Merge pull request #43 from KNU-AEYE/28-some-profile-update-http-reqs

28 some profile update http reqs
KNU-AEYE · May 16, 2024 · b215f01 · b215f01
2 parents 4b020be + d4a35a9
commit b215f01
Show file tree

Hide file tree

Showing 9 changed files with 231 additions and 123 deletions.
diff --git a/aeye/app/(nav)/home/styleSearch.ts b/aeye/app/(nav)/home/styleSearch.ts
@@ -4,7 +4,7 @@ import { styled, alpha } from "@mui/material/styles";
 const Search = styled("div")(({ theme }) => ({
   position: "relative",
   borderRadius: theme.shape.borderRadius,
-  backgroundColor: "#efefef",
+  backgroundColor: "info.main",
   "&:hover": {
     backgroundColor: alpha(theme.palette.common.white, 0.25),
   },

diff --git a/aeye/app/(nav)/my/ProfileAvatar.tsx b/aeye/app/(nav)/my/ProfileAvatar.tsx
@@ -0,0 +1,53 @@
+"use client";
+import { useEffect } from "react";
+import { useRecoilState } from "recoil";
+import { memberState } from "@/app/recoil-states";
+import { Avatar, Typography } from "@mui/material";
+import fetchWithInterception from "@/app/fetchWrapper";
+
+export default function ProfileAvatar() {
+  const [member, setMember] = useRecoilState(memberState);
+
+  useEffect(() => {
+    fetchWithInterception("https://api.a-eye.live/member/detail", {
+      method: "GET",
+    })
+      .then((response) => response.json())
+      .then((jsonData) => setMember(jsonData.data))
+      .catch((error) => console.error(error));
+  }, []);
+
+  return (
+    member && (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          marginTop: "10px",
+          marginBottom: "20px",
+        }}
+      >
+        <Avatar
+          alt="User member"
+          src={member.profileUri}
+          sx={{
+            width: 100,
+            height: 100,
+            backgroundColor: "#f0f0f0", // Add background color
+            boxShadow: "0 2px 4px rgba(0,0,0,0.1)", // Add subtle shadow
+          }}
+        />
+        <Typography variant="h5" component="h2" style={{ marginTop: "12px" }}>
+          {member.name}
+        </Typography>
+        <Typography style={{ color: "#666", marginBottom: "4px" }}>
+          {member.email}
+        </Typography>
+        <Typography style={{ color: "#666", marginBottom: "4px" }}>
+          {member.phone || "No phone number"}
+        </Typography>
+      </div>
+    )
+  );
+}
diff --git a/aeye/app/(nav)/my/page.tsx b/aeye/app/(nav)/my/page.tsx
@@ -1,68 +1,21 @@
 "use client";
-import React, { useEffect, useState } from "react";
-import { styled } from "@mui/material/styles";
-import { Box, Grid, Paper, Avatar, Tooltip, Typography } from "@mui/material";
-import fetchWithInterception from "@/app/fetchWrapper";
 
-const StyledPaper = styled(Paper)(({ theme }) => ({
-  backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff",
-  ...theme.typography.body2,
-  padding: theme.spacing(2),
-  textAlign: "center",
-  color: theme.palette.text.primary,
-  margin: theme.spacing(2),
-  boxShadow: "0 2px 4px rgba(0,0,0,0.1)", // Add subtle shadow
-  borderRadius: theme.shape.borderRadius * 2, // Add border radius
-  transition: "transform 0.2s", // Add transition effect
-  "&:hover": {
-    transform: "scale(1.02)", // Scale up on hover
-  },
-}));
-
-function ProfileAvatar() {
-  const [member, setMember] = useState<Member | null>(null);
-
-  useEffect(() => {
-    fetchWithInterception("https://api.a-eye.live/member/detail", {
-      method: "GET",
-    })
-      .then((response) => response.json())
-      .then((jsonData) => setMember(jsonData.data))
-      .catch((error) => console.error(error));
-  }, []);
+import { useState } from "react";
+import { useRecoilValue } from "recoil";
+import { memberState } from "@/app/recoil-states";
+import { Alert, Box, Grid } from "@mui/material";
+import ProfileAvatar from "./ProfileAvatar";
+import ProfileMenu from "./profileMenu";
 
+function AddPhoneNumberInfo() {
+  const [close, setClose] = useState(false);
+  const profile = useRecoilValue(memberState);
   return (
-    member && (
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          marginBottom: "20px",
-        }}
-      >
-        <Tooltip title="Update profile" placement="top-start">
-          <Avatar
-            alt="User member"
-            src={member.profileUri}
-            sx={{
-              width: 100,
-              height: 100,
-              backgroundColor: "#f0f0f0", // Add background color
-              boxShadow: "0 2px 4px rgba(0,0,0,0.1)", // Add subtle shadow
-            }}
-          />
-        </Tooltip>
-        <Typography variant="h5" component="h2" style={{ marginTop: "12px" }}>
-          {member.name}
-        </Typography>
-        <Typography style={{ color: "#666", marginBottom: "4px" }}>
-          {member.email}
-        </Typography>
-        <Typography style={{ color: "#666", marginBottom: "4px" }}>
-          {member.phone || "No phone number"}
-        </Typography>
-      </div>
+    !profile?.phone &&
+    !close && (
+      <Alert severity="warning" onClose={() => setClose(true)}>
+        알림톡 기능을 위해 전화번호를 추가해주세요.
+      </Alert>
     )
   );
 }
@@ -72,9 +25,9 @@ export default function MyPage() {
     <Box sx={{ flexGrow: 1 }}>
       <Grid container justifyContent="center" spacing={4}>
         <Grid item xs={12} sm={8} md={6}>
+          <AddPhoneNumberInfo />
           <ProfileAvatar />
-          <StyledPaper>item 1</StyledPaper>
-          <StyledPaper>item 2</StyledPaper>
+          <ProfileMenu />
         </Grid>
       </Grid>
     </Box>

diff --git a/aeye/app/(nav)/my/profileMenu.tsx b/aeye/app/(nav)/my/profileMenu.tsx
@@ -0,0 +1,70 @@
+import { useState } from "react";
+import { useRecoilState } from "recoil";
+import { memberState } from "@/app/recoil-states";
+import {
+  Paper,
+  Divider,
+  Button,
+  Typography,
+  TextField,
+  Box,
+} from "@mui/material";
+import fetchWithInterception from "@/app/fetchWrapper";
+import KakaoIcon from "@/app/kakao";
+import GoogleIcon from "@/app/google";
+
+export default function ProfileMenu() {
+  const [member, setMember] = useRecoilState(memberState);
+  const [phone, setPhone] = useState("");
+
+  const handleClick = async () => {
+    fetchWithInterception("https://api.a-eye.live/member/phone", {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ phone }),
+    }).catch((error) => console.error(error));
+  };
+
+  return (
+    <Box display="flex" flexDirection="column" alignItems="center">
+      <Paper
+        elevation={3}
+        sx={{ padding: "20px", marginBottom: "20px", width: "100%" }}
+      >
+        <Typography variant="h6">Account Linking Information</Typography>
+        <Divider />
+        <Typography variant="body1" sx={{ textAlign: "center" }}>
+          {member?.socialLogin}
+          {member?.socialLogin === "GOOGLE" ? <GoogleIcon /> : <KakaoIcon />}
+        </Typography>
+      </Paper>
+      <Paper elevation={3} sx={{ padding: "20px", width: "100%" }}>
+        <Typography variant="h6">Update Phone Number </Typography>
+        <Divider />
+        <Box mt={2}>
+          <TextField
+            label="New Phone Number"
+            variant="outlined"
+            size="small"
+            fullWidth
+            autoFocus
+            value={phone}
+            onChange={(e) => setPhone(e.target.value)}
+          />
+        </Box>
+        <Box
+          mt={2}
+          display="flex"
+          flexDirection="row"
+          justifyContent="flex-end"
+        >
+          <Button variant="contained" color="primary" onClick={handleClick}>
+            Update
+          </Button>
+        </Box>
+      </Paper>
+    </Box>
+  );
+}
diff --git a/aeye/app/google.tsx b/aeye/app/google.tsx
@@ -0,0 +1,32 @@
+import { SvgIcon } from "@mui/material";
+
+export default function GoogleIcon() {
+  return (
+    <SvgIcon>
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M15.68 8.18182C15.68 7.61455 15.6291 7.06909 15.5345 6.54545H8V9.64364H12.3055C12.1164 10.64 11.5491 11.4836 10.6982 12.0509V14.0655H13.2945C14.8073 12.6691 15.68 10.6182 15.68 8.18182Z"
+          fill="#4285F4"
+        />
+        <path
+          d="M8 16C10.16 16 11.9709 15.2873 13.2945 14.0655L10.6982 12.0509C9.98545 12.5309 9.07636 12.8218 8 12.8218C5.92 12.8218 4.15273 11.4182 3.52 9.52727H0.858182V11.5927C2.17455 14.2036 4.87273 16 8 16Z"
+          fill="#34A853"
+        />
+        <path
+          d="M3.52 9.52C3.36 9.04 3.26545 8.53091 3.26545 8C3.26545 7.46909 3.36 6.96 3.52 6.48V4.41455H0.858182C0.312727 5.49091 0 6.70545 0 8C0 9.29455 0.312727 10.5091 0.858182 11.5855L2.93091 9.97091L3.52 9.52Z"
+          fill="#FBBC05"
+        />
+        <path
+          d="M8 3.18545C9.17818 3.18545 10.2255 3.59273 11.0618 4.37818L13.3527 2.08727C11.9636 0.792727 10.16 0 8 0C4.87273 0 2.17455 1.79636 0.858182 4.41455L3.52 6.48C4.15273 4.58909 5.92 3.18545 8 3.18545Z"
+          fill="#EA4335"
+        />
+      </svg>
+    </SvgIcon>
+  );
+}
diff --git a/aeye/app/kakao.tsx b/aeye/app/kakao.tsx
@@ -0,0 +1,24 @@
+import { SvgIcon } from "@mui/material";
+
+export default function KakaoIcon() {
+  return (
+    <SvgIcon>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="2500"
+        height="2500"
+        viewBox="0 0 256 256"
+      >
+        <path
+          fill="#FFE812"
+          d="M256 236c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20V20C0 8.954 8.954 0 20 0h216c11.046 0 20 8.954 20 20v216z"
+        />
+        <path d="M128 36C70.562 36 24 72.713 24 118c0 29.279 19.466 54.97 48.748 69.477-1.593 5.494-10.237 35.344-10.581 37.689 0 0-.207 1.762.934 2.434s2.483.15 2.483.15c3.272-.457 37.943-24.811 43.944-29.04 5.995.849 12.168 1.29 18.472 1.29 57.438 0 104-36.712 104-82 0-45.287-46.562-82-104-82z" />
+        <path
+          fill="#FFE812"
+          d="M70.5 146.625c-3.309 0-6-2.57-6-5.73V105.25h-9.362c-3.247 0-5.888-2.636-5.888-5.875s2.642-5.875 5.888-5.875h30.724c3.247 0 5.888 2.636 5.888 5.875s-2.642 5.875-5.888 5.875H76.5v35.645c0 3.16-2.691 5.73-6 5.73zM123.112 146.547c-2.502 0-4.416-1.016-4.993-2.65l-2.971-7.778-18.296-.001-2.973 7.783c-.575 1.631-2.488 2.646-4.99 2.646a9.155 9.155 0 0 1-3.814-.828c-1.654-.763-3.244-2.861-1.422-8.52l14.352-37.776c1.011-2.873 4.082-5.833 7.99-5.922 3.919.088 6.99 3.049 8.003 5.928l14.346 37.759c1.826 5.672.236 7.771-1.418 8.532a9.176 9.176 0 0 1-3.814.827c-.001 0 0 0 0 0zm-11.119-21.056L106 108.466l-5.993 17.025h11.986zM138 145.75c-3.171 0-5.75-2.468-5.75-5.5V99.5c0-3.309 2.748-6 6.125-6s6.125 2.691 6.125 6v35.25h12.75c3.171 0 5.75 2.468 5.75 5.5s-2.579 5.5-5.75 5.5H138zM171.334 146.547c-3.309 0-6-2.691-6-6V99.5c0-3.309 2.691-6 6-6s6 2.691 6 6v12.896l16.74-16.74c.861-.861 2.044-1.335 3.328-1.335 1.498 0 3.002.646 4.129 1.772 1.051 1.05 1.678 2.401 1.764 3.804.087 1.415-.384 2.712-1.324 3.653l-13.673 13.671 14.769 19.566a5.951 5.951 0 0 1 1.152 4.445 5.956 5.956 0 0 1-2.328 3.957 5.94 5.94 0 0 1-3.609 1.211 5.953 5.953 0 0 1-4.793-2.385l-14.071-18.644-2.082 2.082v13.091a6.01 6.01 0 0 1-6.002 6.003z"
+        />
+      </svg>
+    </SvgIcon>
+  );
+}
diff --git a/aeye/app/layout.tsx b/aeye/app/layout.tsx
@@ -1,5 +1,24 @@
 "use client";
 import { RecoilRoot } from "recoil";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: "#65d586",
+      light: "#D6FADC",
+      dark: "#62956E",
+    },
+    secondary: {
+      main: "#52589E",
+      dark: "#00114A",
+      light: "#00114A",
+    },
+    info: {
+      main: "#EFEFEF",
+    },
+  },
+});
 
 export default function RootLayout({
   children,
@@ -10,7 +29,9 @@ export default function RootLayout({
     <html lang="en">
       <body>
         <link rel="icon" href="/images/favicon.ico" sizes="any" />
-        <RecoilRoot>{children}</RecoilRoot>
+        <ThemeProvider theme={theme}>
+          <RecoilRoot>{children}</RecoilRoot>
+        </ThemeProvider>
       </body>
     </html>
   );