From c77d18ae586cc0c1cf6b1cd26bf5a0f6425bf84e Mon Sep 17 00:00:00 2001 From: hyeonjiroh Date: Fri, 28 Mar 2025 22:15:46 +0900 Subject: [PATCH 1/2] feat: Add BackButton to navigate to previous page --- public/icon/arrow_right_icon.svg | 3 ++ .../mypage/_components/BackButton.tsx | 28 +++++++++++++++++++ src/app/(after-login)/mypage/page.tsx | 10 ++++++- 3 files changed, 40 insertions(+), 1 deletion(-) create mode 100644 public/icon/arrow_right_icon.svg create mode 100644 src/app/(after-login)/mypage/_components/BackButton.tsx diff --git a/public/icon/arrow_right_icon.svg b/public/icon/arrow_right_icon.svg new file mode 100644 index 0000000..49a70bf --- /dev/null +++ b/public/icon/arrow_right_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/(after-login)/mypage/_components/BackButton.tsx b/src/app/(after-login)/mypage/_components/BackButton.tsx new file mode 100644 index 0000000..e26ef38 --- /dev/null +++ b/src/app/(after-login)/mypage/_components/BackButton.tsx @@ -0,0 +1,28 @@ +"use client"; + +import { useRouter } from "next/navigation"; +import Image from "next/image"; +import BackIcon from "../../../../../public/icon/arrow_right_icon.svg"; + +export default function BackButton() { + const router = useRouter(); + + return ( + + ); +} diff --git a/src/app/(after-login)/mypage/page.tsx b/src/app/(after-login)/mypage/page.tsx index c77a0a2..bb1733b 100644 --- a/src/app/(after-login)/mypage/page.tsx +++ b/src/app/(after-login)/mypage/page.tsx @@ -1,3 +1,11 @@ +import BackButton from "./_components/BackButton"; + export default function Page() { - return
/mypage
; + return ( +
+
+ +
+
+ ); } From 20f0659ab598d9776047830630b7c6432620321b Mon Sep 17 00:00:00 2001 From: hyeonjiroh Date: Fri, 28 Mar 2025 23:44:28 +0900 Subject: [PATCH 2/2] design: Complete MyPage layout --- .../mypage/_components/BackButton.tsx | 34 +++++------ .../mypage/_components/PasswordSection.tsx | 25 +++++++++ .../mypage/_components/ProfileSection.tsx | 56 +++++++++++++++++++ src/app/(after-login)/mypage/page.tsx | 8 ++- 4 files changed, 106 insertions(+), 17 deletions(-) create mode 100644 src/app/(after-login)/mypage/_components/PasswordSection.tsx create mode 100644 src/app/(after-login)/mypage/_components/ProfileSection.tsx diff --git a/src/app/(after-login)/mypage/_components/BackButton.tsx b/src/app/(after-login)/mypage/_components/BackButton.tsx index e26ef38..62eb7a8 100644 --- a/src/app/(after-login)/mypage/_components/BackButton.tsx +++ b/src/app/(after-login)/mypage/_components/BackButton.tsx @@ -8,21 +8,23 @@ export default function BackButton() { const router = useRouter(); return ( - +
+ +
); } diff --git a/src/app/(after-login)/mypage/_components/PasswordSection.tsx b/src/app/(after-login)/mypage/_components/PasswordSection.tsx new file mode 100644 index 0000000..2b12ad1 --- /dev/null +++ b/src/app/(after-login)/mypage/_components/PasswordSection.tsx @@ -0,0 +1,25 @@ +"use client"; + +import Button from "@/components/common/button/Button"; +import Input from "@/components/common/input/Input"; + +export default function PasswordSection() { + return ( +
+
+
+ 비밀번호 변경 +
+
+
+ {/* 로그인/회원가입 페이지에서 한 것 처럼 패스워드 토글 버튼 넣어도 좋을 것 같네요 */} + + + +
+ +
+
+
+ ); +} diff --git a/src/app/(after-login)/mypage/_components/ProfileSection.tsx b/src/app/(after-login)/mypage/_components/ProfileSection.tsx new file mode 100644 index 0000000..d4444f8 --- /dev/null +++ b/src/app/(after-login)/mypage/_components/ProfileSection.tsx @@ -0,0 +1,56 @@ +"use client"; + +import { useEffect, useState } from "react"; +import { UserInfo } from "@/lib/types"; +import { fetchUser } from "@/lib/apis/usersApi"; +import { TOKEN_1 } from "@/lib/constants/tokens"; +import Button from "@/components/common/button/Button"; +import ImageInput from "@/components/common/input/ImageInput"; +import Input from "@/components/common/input/Input"; + +export default function ProfileSection() { + const [data, setData] = useState(null); + + useEffect(() => { + const getData = async () => { + const res = await fetchUser({ + token: TOKEN_1, + }); + setData(res); + }; + + getData(); + }, []); + + if (!data) return; + + const { email, nickname, profileImageUrl } = data; + + // 이 밑으로 formData(닉네임, 이미지) state 생성하시고, 기본값으로 각각 위의 nickname, profileImageUrl 넣어주시면 될 거예요 + // 아래는 vercel 배포를 위해 위 값들을 임시로 사용한 테스트 코드라 나중에 삭제해주시면 됩니다 + console.log(nickname); + console.log(profileImageUrl); + + return ( +
+
+
+ 프로필 +
+
+
+ +
+
+
+ {/* 이메일 인풋에는 나중에 disabled 속성 들어가야 합니다 */} + + +
+ +
+
+
+
+ ); +} diff --git a/src/app/(after-login)/mypage/page.tsx b/src/app/(after-login)/mypage/page.tsx index bb1733b..8093b20 100644 --- a/src/app/(after-login)/mypage/page.tsx +++ b/src/app/(after-login)/mypage/page.tsx @@ -1,10 +1,16 @@ import BackButton from "./_components/BackButton"; +import PasswordSection from "./_components/PasswordSection"; +import ProfileSection from "./_components/ProfileSection"; export default function Page() { return (
-
+
+
+ + +
);