마이페이지 - 프로필 설정 페이지 퍼블리싱

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) => {
           <span className="truncate text-body2-regular text-layout-body-default">{email}</span>
         </div>
       </div>
-      <Button variant="outlined"> 프로필 수정 </Button>
+      <Button as={Link} href="/mypage/profile" variant="outlined">
+        프로필 수정
+      </Button>
     </div>
   );
 };

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 (

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 (
+    <form onSubmit={handleSubmitMypageProfile} className="flex h-dvh w-full flex-col">
+      <div className="flex justify-center py-[30px]">
+        <div className="relative h-[80px] w-[80px]">
+          {profileImgURL ? (
+            <img
+              src={profileImgURL}
+              alt="프로필 이미지"
+              className="h-[80px] w-[80px] rounded-full"
+            />
+          ) : (
+            <Icon name="UserProfile" size={80} />
+          )}
+          {/* TODO(수현): 디자인 토큰 변경 요청 해놓은 상태로 등록 시 추후 변경 */}
+          <button
+            className="absolute left-[52px] top-[52px] h-[28px] w-[28px] rounded-full bg-[#f5f5f5] flex-center"
+            aria-label="프로필 이미지 변경 버튼"
+          >
+            <Icon name="CameraBorder" size={16} />
+          </button>
+        </div>
+      </div>
+
+      <div className="flex w-full flex-col gap-5 p-5">
+        <InputText
+          name="nickname"
+          label="닉네임"
+          // TODO(수현): 기존 닉네임이 placeholder로 들어갈 예정
+          placeholder="기존 닉네임 표기"
+          rule="2~10자, 특수문자/금칙어 제한"
+          maxLength={10}
+          validation={{
+            required: true,
+            maxLength: 10,
+          }}
+        >
+          중복 확인
+        </InputText>
+      </div>
+
+      <div className="sticky bottom-0 mt-auto h-[88px] w-full border-t border-divider-default bg-white px-4 py-3">
+        <Button type="submit" variant="auth" ariaLabel="설정완료 버튼">
+          설정 완료
+        </Button>
+      </div>
+    </form>
+  );
+};
+
+export default MypageProfileForm;

src/app/(route)/mypage/profile/_components/index.ts

@@ -0,0 +1 @@
+export { default as MypageProfileForm } from "./MypageProfileForm/MypageProfileForm";

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<MypageProfileFormType>({
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  return (
+    <Suspense fallback="">
+      <DetailHeader title="프로필 설정" />
+      <FormProvider {...methods}>
+        <MypageProfileForm />
+      </FormProvider>
+    </Suspense>
+  );
+};
+
+export default page;

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";