diff --git a/src/app/(route)/mypage/_components/MyPageProfile/MyPageProfile.tsx b/src/app/(route)/mypage/_components/MyPageProfile/MyPageProfile.tsx index 077ebdf6..9b98bfdc 100644 --- a/src/app/(route)/mypage/_components/MyPageProfile/MyPageProfile.tsx +++ b/src/app/(route)/mypage/_components/MyPageProfile/MyPageProfile.tsx @@ -1,4 +1,5 @@ import { Button } from "@/components"; +import Link from "next/link"; interface ProfileProps { userName: string; @@ -16,7 +17,9 @@ const MyPageProfile = ({ userName, email }: ProfileProps) => { {email} - + ); }; diff --git a/src/app/(route)/mypage/page.tsx b/src/app/(route)/mypage/page.tsx index 9646f8c4..e2065612 100644 --- a/src/app/(route)/mypage/page.tsx +++ b/src/app/(route)/mypage/page.tsx @@ -1,5 +1,4 @@ import { MyPageIconNav, MyPageMenuSection, MyPageProfile } from "./_components"; -import { MYPAGE_MENU_LIST } from "./_constants/MYPAGE_MENU_LIST"; const page = () => { return ( diff --git a/src/app/(route)/mypage/profile/_components/MypageProfileForm/MypageProfileForm.tsx b/src/app/(route)/mypage/profile/_components/MypageProfileForm/MypageProfileForm.tsx new file mode 100644 index 00000000..3677bf57 --- /dev/null +++ b/src/app/(route)/mypage/profile/_components/MypageProfileForm/MypageProfileForm.tsx @@ -0,0 +1,59 @@ +import { InputText, Button, Icon } from "@/components"; + +const MypageProfileForm = () => { + const profileImgURL = ""; + + const handleSubmitMypageProfile = () => { + // TODO(수현): 폼 제출 함수 추가 예정 + }; + + return ( +
+
+
+ {profileImgURL ? ( + 프로필 이미지 + ) : ( + + )} + {/* TODO(수현): 디자인 토큰 변경 요청 해놓은 상태로 등록 시 추후 변경 */} + +
+
+ +
+ + 중복 확인 + +
+ +
+ +
+
+ ); +}; + +export default MypageProfileForm; diff --git a/src/app/(route)/mypage/profile/_components/index.ts b/src/app/(route)/mypage/profile/_components/index.ts new file mode 100644 index 00000000..55e570c2 --- /dev/null +++ b/src/app/(route)/mypage/profile/_components/index.ts @@ -0,0 +1 @@ +export { default as MypageProfileForm } from "./MypageProfileForm/MypageProfileForm"; diff --git a/src/app/(route)/mypage/profile/page.tsx b/src/app/(route)/mypage/profile/page.tsx new file mode 100644 index 00000000..921345b6 --- /dev/null +++ b/src/app/(route)/mypage/profile/page.tsx @@ -0,0 +1,31 @@ +"use client"; + +import { DetailHeader } from "@/components"; +import { FormProvider, useForm } from "react-hook-form"; +import { Suspense } from "react"; +import { MypageProfileForm } from "./_components"; + +interface MypageProfileFormType { + profile: string; + nickname: string; + email: string; + emailAuth: number; +} + +const page = () => { + const methods = useForm({ + mode: "onChange", + reValidateMode: "onChange", + }); + + return ( + + + + + + + ); +}; + +export default page; diff --git a/src/assets/camera-border.svg b/src/assets/camera-border.svg new file mode 100644 index 00000000..042a4bac --- /dev/null +++ b/src/assets/camera-border.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/user-profile.svg b/src/assets/user-profile.svg new file mode 100644 index 00000000..c61c2e2d --- /dev/null +++ b/src/assets/user-profile.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/common/Icon/index.ts b/src/components/common/Icon/index.ts index 194e0be4..d707cdb1 100644 --- a/src/components/common/Icon/index.ts +++ b/src/components/common/Icon/index.ts @@ -43,3 +43,5 @@ export { default as AlertNewChat } from "@/assets/alert-new-chat.svg"; export { default as AlertNewComment } from "@/assets/alert-new-comment.svg"; export { default as AlertStar } from "@/assets/alert-star.svg"; export { default as AlertUnreadChat } from "@/assets/alert-unread-chat.svg"; +export { default as UserProfile } from "@/assets/user-profile.svg"; +export { default as CameraBorder } from "@/assets/camera-border.svg";