From af346f27ab76ac37ddca6c9d40c314d4f8c2a99c Mon Sep 17 00:00:00 2001 From: Jiwoo Ahn Date: Wed, 15 May 2024 21:02:49 +0900 Subject: [PATCH 01/10] =?UTF-8?q?=F0=9F=8E=A8=20Feat:=20mui=20theme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- aeye/app/layout.tsx | 23 ++++++++++++++++++++++- aeye/app/page.tsx | 4 ++-- 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/aeye/app/layout.tsx b/aeye/app/layout.tsx index 085eff8..eac6b54 100644 --- 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({ - {children} + + {children} + ); diff --git a/aeye/app/page.tsx b/aeye/app/page.tsx index 4f6f5b3..7b8614f 100644 --- a/aeye/app/page.tsx +++ b/aeye/app/page.tsx @@ -92,7 +92,7 @@ function GoogleLoginButton() { variant="outlined" onClick={handleLoginWithGoogle} startIcon={} - color="primary" + color="secondary" size="small" > Sign in with Google @@ -113,7 +113,7 @@ function KakaoLoginButton() { variant="outlined" onClick={handleLoginWithKakao} startIcon={} - color="primary" + color="secondary" size="small" > Sign in with Kakao From 774deb8d71934368c3c771dc0240622c5b75427e Mon Sep 17 00:00:00 2001 From: Jiwoo Ahn Date: Wed, 15 May 2024 21:07:00 +0900 Subject: [PATCH 02/10] =?UTF-8?q?=F0=9F=A9=B9=20Fix:=20using=20theme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- aeye/app/(nav)/home/styleSearch.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aeye/app/(nav)/home/styleSearch.ts b/aeye/app/(nav)/home/styleSearch.ts index 22b501c..d61f640 100644 --- 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), }, From 1a2870dff560a103514399d3ba2bcd64183a9ba1 Mon Sep 17 00:00:00 2001 From: Jiwoo Ahn Date: Wed, 15 May 2024 21:17:16 +0900 Subject: [PATCH 03/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20split=20?= =?UTF-8?q?profile=20avatar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- aeye/app/(nav)/my/ProfileAvatar.tsx | 52 +++++++++++++++++++++++++++++ aeye/app/(nav)/my/page.tsx | 51 +--------------------------- 2 files changed, 53 insertions(+), 50 deletions(-) create mode 100644 aeye/app/(nav)/my/ProfileAvatar.tsx diff --git a/aeye/app/(nav)/my/ProfileAvatar.tsx b/aeye/app/(nav)/my/ProfileAvatar.tsx new file mode 100644 index 0000000..d5e67b4 --- /dev/null +++ b/aeye/app/(nav)/my/ProfileAvatar.tsx @@ -0,0 +1,52 @@ +"use client"; +import { useState, useEffect } from "react"; +import { Avatar, Typography, Tooltip } from "@mui/material"; +import fetchWithInterception from "@/app/fetchWrapper"; + +export default function ProfileAvatar() { + const [member, setMember] = useState(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)); + }, []); + + return ( + member && ( +
+ + + + + {member.name} + + + {member.email} + + + {member.phone || "No phone number"} + +
+ ) + ); +} diff --git a/aeye/app/(nav)/my/page.tsx b/aeye/app/(nav)/my/page.tsx index c2cb883..73bf6bd 100644 --- a/aeye/app/(nav)/my/page.tsx +++ b/aeye/app/(nav)/my/page.tsx @@ -1,8 +1,7 @@ "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"; +import ProfileAvatar from "./ProfileAvatar"; const StyledPaper = styled(Paper)(({ theme }) => ({ backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff", @@ -19,54 +18,6 @@ const StyledPaper = styled(Paper)(({ theme }) => ({ }, })); -function ProfileAvatar() { - const [member, setMember] = useState(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)); - }, []); - - return ( - member && ( -
- - - - - {member.name} - - - {member.email} - - - {member.phone || "No phone number"} - -
- ) - ); -} - export default function MyPage() { return ( From 1edd6ef14a561692a2d6fd439c453e6e390f92ab Mon Sep 17 00:00:00 2001 From: Jiwoo Ahn Date: Wed, 15 May 2024 21:20:08 +0900 Subject: [PATCH 04/10] =?UTF-8?q?=F0=9F=94=A5=20Rm:=20unused=20imports?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- aeye/app/(nav)/my/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aeye/app/(nav)/my/page.tsx b/aeye/app/(nav)/my/page.tsx index 73bf6bd..9af3b10 100644 --- a/aeye/app/(nav)/my/page.tsx +++ b/aeye/app/(nav)/my/page.tsx @@ -1,6 +1,6 @@ "use client"; import { styled } from "@mui/material/styles"; -import { Box, Grid, Paper, Avatar, Tooltip, Typography } from "@mui/material"; +import { Box, Grid, Paper } from "@mui/material"; import ProfileAvatar from "./ProfileAvatar"; const StyledPaper = styled(Paper)(({ theme }) => ({ From bb35ba727cf97c9b4f551ab3dcefd33e8dda170f Mon Sep 17 00:00:00 2001 From: Jiwoo Ahn Date: Wed, 15 May 2024 21:35:57 +0900 Subject: [PATCH 05/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20member?= =?UTF-8?q?=20state=20to=20global?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- aeye/app/(nav)/my/ProfileAvatar.tsx | 6 ++++-- aeye/app/recoil-states.ts | 9 ++++++++- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/aeye/app/(nav)/my/ProfileAvatar.tsx b/aeye/app/(nav)/my/ProfileAvatar.tsx index d5e67b4..8100243 100644 --- a/aeye/app/(nav)/my/ProfileAvatar.tsx +++ b/aeye/app/(nav)/my/ProfileAvatar.tsx @@ -1,10 +1,12 @@ "use client"; -import { useState, useEffect } from "react"; +import { useEffect } from "react"; +import { useRecoilState } from "recoil"; +import { memberState } from "@/app/recoil-states"; import { Avatar, Typography, Tooltip } from "@mui/material"; import fetchWithInterception from "@/app/fetchWrapper"; export default function ProfileAvatar() { - const [member, setMember] = useState(null); + const [member, setMember] = useRecoilState(memberState); useEffect(() => { fetchWithInterception("https://api.a-eye.live/member/detail", { diff --git a/aeye/app/recoil-states.ts b/aeye/app/recoil-states.ts index 553bf9d..323c5fb 100644 --- a/aeye/app/recoil-states.ts +++ b/aeye/app/recoil-states.ts @@ -1,6 +1,13 @@ import { atom } from "recoil"; -export const searchQueryState = atom({ +const searchQueryState = atom({ key: "searchQueryState", default: "", }); + +const memberState = atom({ + key: "memberState", + default: null, +}); + +export { searchQueryState, memberState }; From 4b6270b8c344ac74e175be79ddb9b378449a523c Mon Sep 17 00:00:00 2001 From: Jiwoo Ahn Date: Wed, 15 May 2024 21:47:59 +0900 Subject: [PATCH 06/10] =?UTF-8?q?=E2=9C=A8=20Feat:=20phone=20number=20info?= =?UTF-8?q?=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- aeye/app/(nav)/my/ProfileAvatar.tsx | 1 + aeye/app/(nav)/my/page.tsx | 16 +++++++++++++++- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/aeye/app/(nav)/my/ProfileAvatar.tsx b/aeye/app/(nav)/my/ProfileAvatar.tsx index 8100243..a071e96 100644 --- a/aeye/app/(nav)/my/ProfileAvatar.tsx +++ b/aeye/app/(nav)/my/ProfileAvatar.tsx @@ -24,6 +24,7 @@ export default function ProfileAvatar() { display: "flex", flexDirection: "column", alignItems: "center", + marginTop: "10px", marginBottom: "20px", }} > diff --git a/aeye/app/(nav)/my/page.tsx b/aeye/app/(nav)/my/page.tsx index 9af3b10..6a9a58f 100644 --- a/aeye/app/(nav)/my/page.tsx +++ b/aeye/app/(nav)/my/page.tsx @@ -1,7 +1,9 @@ "use client"; import { styled } from "@mui/material/styles"; -import { Box, Grid, Paper } from "@mui/material"; +import { Alert, Box, Grid, Paper } from "@mui/material"; import ProfileAvatar from "./ProfileAvatar"; +import { useRecoilValue } from "recoil"; +import { memberState } from "@/app/recoil-states"; const StyledPaper = styled(Paper)(({ theme }) => ({ backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff", @@ -18,11 +20,23 @@ const StyledPaper = styled(Paper)(({ theme }) => ({ }, })); +function AddPhoneNumberInfo() { + const profile = useRecoilValue(memberState); + return ( + !profile?.phone && ( + + 알림톡 기능을 위해 전화번호를 추가해주세요. + + ) + ); +} + export default function MyPage() { return ( + item 1 item 2 From d0b375f1b57de0c184264ee88ddb197d16e4db31 Mon Sep 17 00:00:00 2001 From: Jiwoo Ahn Date: Thu, 16 May 2024 17:17:17 +0900 Subject: [PATCH 07/10] =?UTF-8?q?=E2=9C=A8=20Feat:=20profile=20menu=20comp?= =?UTF-8?q?onent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- aeye/app/(nav)/my/ProfileAvatar.tsx | 24 +++++----- aeye/app/(nav)/my/page.tsx | 32 +++++-------- aeye/app/(nav)/my/profileMenu.tsx | 70 +++++++++++++++++++++++++++++ 3 files changed, 91 insertions(+), 35 deletions(-) create mode 100644 aeye/app/(nav)/my/profileMenu.tsx diff --git a/aeye/app/(nav)/my/ProfileAvatar.tsx b/aeye/app/(nav)/my/ProfileAvatar.tsx index a071e96..65e3127 100644 --- a/aeye/app/(nav)/my/ProfileAvatar.tsx +++ b/aeye/app/(nav)/my/ProfileAvatar.tsx @@ -2,7 +2,7 @@ import { useEffect } from "react"; import { useRecoilState } from "recoil"; import { memberState } from "@/app/recoil-states"; -import { Avatar, Typography, Tooltip } from "@mui/material"; +import { Avatar, Typography } from "@mui/material"; import fetchWithInterception from "@/app/fetchWrapper"; export default function ProfileAvatar() { @@ -28,18 +28,16 @@ export default function ProfileAvatar() { marginBottom: "20px", }} > - - - + {member.name} diff --git a/aeye/app/(nav)/my/page.tsx b/aeye/app/(nav)/my/page.tsx index 6a9a58f..a2ec710 100644 --- a/aeye/app/(nav)/my/page.tsx +++ b/aeye/app/(nav)/my/page.tsx @@ -1,30 +1,19 @@ "use client"; -import { styled } from "@mui/material/styles"; -import { Alert, Box, Grid, Paper } from "@mui/material"; -import ProfileAvatar from "./ProfileAvatar"; + +import { useState } from "react"; import { useRecoilValue } from "recoil"; import { memberState } from "@/app/recoil-states"; - -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 - }, -})); +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 ( - !profile?.phone && ( - + !profile?.phone && + !close && ( + setClose(true)}> 알림톡 기능을 위해 전화번호를 추가해주세요. ) @@ -38,8 +27,7 @@ export default function MyPage() { - item 1 - item 2 + diff --git a/aeye/app/(nav)/my/profileMenu.tsx b/aeye/app/(nav)/my/profileMenu.tsx new file mode 100644 index 0000000..c5ed89d --- /dev/null +++ b/aeye/app/(nav)/my/profileMenu.tsx @@ -0,0 +1,70 @@ +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"; + +export default function ProfileMenu() { + const [member, setMember] = useRecoilState(memberState); + + const handleClick = async () => { + const newPhoneNumber = prompt("Enter your new phone number:"); + if (newPhoneNumber) { + const response = await fetchWithInterception("/api/member/phone", { + method: "PUT", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ phone: newPhoneNumber }), + }); + if (response.ok) { + //setMember({ ...member, phone: newPhoneNumber }); + alert("Phone number updated successfully!"); + } else { + alert("Failed to update phone number. Please try again."); + } + } + }; + + return ( + + + Account Linking Information + + {member?.socialLogin} + + + Update Phone Number + + + + + + + + + + ); +} From 66f854fbb7225ab548362ae7dee16a03c68b7494 Mon Sep 17 00:00:00 2001 From: Jiwoo Ahn Date: Thu, 16 May 2024 17:50:22 +0900 Subject: [PATCH 08/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20split=20?= =?UTF-8?q?the=20svg=20icon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- aeye/app/google.tsx | 32 +++++++++++++++++++++++++ aeye/app/kakao.tsx | 24 +++++++++++++++++++ aeye/app/page.tsx | 58 +++------------------------------------------ 3 files changed, 59 insertions(+), 55 deletions(-) create mode 100644 aeye/app/google.tsx create mode 100644 aeye/app/kakao.tsx diff --git a/aeye/app/google.tsx b/aeye/app/google.tsx new file mode 100644 index 0000000..736238a --- /dev/null +++ b/aeye/app/google.tsx @@ -0,0 +1,32 @@ +import { SvgIcon } from "@mui/material"; + +export default function GoogleIcon() { + return ( + + + + + + + + + ); +} diff --git a/aeye/app/kakao.tsx b/aeye/app/kakao.tsx new file mode 100644 index 0000000..3a20447 --- /dev/null +++ b/aeye/app/kakao.tsx @@ -0,0 +1,24 @@ +import { SvgIcon } from "@mui/material"; + +export default function KakaoIcon() { + return ( + + + + + + + + ); +} diff --git a/aeye/app/page.tsx b/aeye/app/page.tsx index 7b8614f..0101902 100644 --- a/aeye/app/page.tsx +++ b/aeye/app/page.tsx @@ -1,7 +1,9 @@ "use client"; -import { Typography, SvgIcon, Button } from "@mui/material"; +import { Typography, Button } from "@mui/material"; import { styled } from "@mui/system"; import { useEffect } from "react"; +import GoogleIcon from "@/app/google"; +import KakaoIcon from "@/app/kakao"; const RootContainer = styled("div")({ display: "flex", @@ -25,60 +27,6 @@ const CustomTypography = styled(Typography)({ fontSize: "8rem", }); -function GoogleIcon() { - return ( - - - - - - - - - ); -} - -function KakaoIcon() { - return ( - - - - - - - - ); -} - function GoogleLoginButton() { const handleLoginWithGoogle = async () => { window.location.replace( From bbddd28f48e680dc8cd41d8061095f80ae4d4f0a Mon Sep 17 00:00:00 2001 From: Jiwoo Ahn Date: Thu, 16 May 2024 17:50:54 +0900 Subject: [PATCH 09/10] =?UTF-8?q?=E2=9C=A8=20Feat:=20svg=20icon=20on=20soc?= =?UTF-8?q?ial?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- aeye/app/(nav)/my/profileMenu.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/aeye/app/(nav)/my/profileMenu.tsx b/aeye/app/(nav)/my/profileMenu.tsx index c5ed89d..d716679 100644 --- a/aeye/app/(nav)/my/profileMenu.tsx +++ b/aeye/app/(nav)/my/profileMenu.tsx @@ -9,6 +9,8 @@ import { 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); @@ -40,10 +42,13 @@ export default function ProfileMenu() { > Account Linking Information - {member?.socialLogin} + + {member?.socialLogin} + {member?.socialLogin === "GOOGLE" ? : } + - Update Phone Number + Update Phone Number Date: Thu, 16 May 2024 17:59:16 +0900 Subject: [PATCH 10/10] =?UTF-8?q?=E2=9C=A8=20Feat:=20phone=20number=20api?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- aeye/app/(nav)/my/profileMenu.tsx | 27 +++++++++++---------------- 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/aeye/app/(nav)/my/profileMenu.tsx b/aeye/app/(nav)/my/profileMenu.tsx index d716679..30439a7 100644 --- a/aeye/app/(nav)/my/profileMenu.tsx +++ b/aeye/app/(nav)/my/profileMenu.tsx @@ -1,3 +1,4 @@ +import { useState } from "react"; import { useRecoilState } from "recoil"; import { memberState } from "@/app/recoil-states"; import { @@ -14,24 +15,16 @@ import GoogleIcon from "@/app/google"; export default function ProfileMenu() { const [member, setMember] = useRecoilState(memberState); + const [phone, setPhone] = useState(""); const handleClick = async () => { - const newPhoneNumber = prompt("Enter your new phone number:"); - if (newPhoneNumber) { - const response = await fetchWithInterception("/api/member/phone", { - method: "PUT", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ phone: newPhoneNumber }), - }); - if (response.ok) { - //setMember({ ...member, phone: newPhoneNumber }); - alert("Phone number updated successfully!"); - } else { - alert("Failed to update phone number. Please try again."); - } - } + 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 ( @@ -57,6 +50,8 @@ export default function ProfileMenu() { size="small" fullWidth autoFocus + value={phone} + onChange={(e) => setPhone(e.target.value)} />