Qnrr 463 조민주 스터디 신청 회원 불러오기 UI 및 api 적용

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package.json

@@ -18,6 +18,7 @@
     "api:logs": "docker-compose -f ../study-platform-mvp/docker-compose.yml logs -f mvp-app"
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.2.1",
     "@next/third-parties": "^15.3.3",
     "@radix-ui/react-avatar": "^1.1.9",
     "@radix-ui/react-dialog": "^1.1.10",
@@ -37,10 +38,12 @@
     "react": "^19.0.0",
     "react-day-picker": "9.4.3",
     "react-dom": "^19.0.0",
+    "react-hook-form": "^7.62.0",
     "tailwind-merge": "^3.2.0",
     "tailwindcss": "^4.0.6",
     "tailwindcss-animate": "^1.0.7",
     "tw-animate-css": "^1.2.5",
+    "zod": "^4.0.17",
     "zustand": "^5.0.3"
   },
   "devDependencies": {

src/features/auth/ui/login-modal.tsx

@@ -36,7 +36,6 @@ export default function LoginModal({
     ? '616205933420-b45d510q23togkaqo069j8igmsjhp9v0.apps.googleusercontent.com'
     : process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID;
 
-  const NAVER_LOGIN_URL = '';
   const KAKAO_LOGIN_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${KAKAO_CLIENT_ID}&redirect_uri=${API_BASE_URL}/api/v1/auth/kakao/redirect-uri&response_type=code&state=${state}`;
   const GOOGLE_LOGIN_URL = `https://accounts.google.com/o/oauth2/v2/auth?scope=openid%20profile&access_type=offline&prompt=consent&include_granted_scopes=true&response_type=code&redirect_uri=${API_BASE_URL}/api/v1/auth/google/redirect-uri&client_id=${GOOGLE_CLIENT_ID}&state=${state}`;
 

src/features/auth/ui/sign-up-image-selector.tsx

@@ -1,26 +1,24 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { PencilIcon } from 'lucide-react';
-import Image from 'next/image';
+import UserAvatar from '@/shared/ui/avatar';
 
 export default function SignupImageSelector({
   image,
   setImage,
   fileInputRef,
   handleImageChange,
 }: {
-  image: string;
-  setImage: (image: string) => void;
+  image?: string;
+  setImage: (image?: string) => void;
   fileInputRef: React.RefObject<HTMLInputElement>;
   handleImageChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }) {
-  const setDefaultImage = () => setImage('/profile-default.svg');
+  const setDefaultImage = () => setImage(undefined);
   const openFileFolder = () => fileInputRef.current?.click();
 
   return (
     <div className="relative">
-      <div className="relative h-[112px] w-[112px] overflow-hidden rounded-full">
-        <Image src={image} alt="프로필" fill className="object-cover" />
-      </div>
+      <UserAvatar image={image} size={112} />
       <DropdownMenu.Root>
         <DropdownMenu.Trigger asChild>
           <button

src/features/my-page/model/profile-form.schema.ts

@@ -0,0 +1,106 @@
+import { FieldNamesMarkedBoolean } from 'react-hook-form';
+import { z } from 'zod';
+import type { MemberProfile } from '@/entities/user/api/types';
+import { UrlSchema } from '@/shared/util/zod-schema';
+import { UpdateUserProfileRequest } from '../api/types';
+
+const nameRegex = /^[가-힣a-zA-Z]{2,10}$/;
+const telRegex = /^\d{2,3}-\d{3,4}-\d{4}$/;
+const birthRegex = /^\d{4}\.(0[1-9]|1[0-2])\.(0[1-9]|[12]\d|3[01])$/;
+
+export const ProfileFormSchema = z.object({
+  name: z
+    .string()
+    .trim()
+    .min(1, '이름은 필수입니다.')
+    .regex(nameRegex, '이름은 2~10자의 한글 또는 영문만 허용됩니다.'),
+
+  tel: z
+    .string()
+    .trim()
+    .min(1, '연락처는 필수입니다.')
+    .regex(telRegex, '연락처는 숫자와 하이픈(-) 형식으로 입력해주세요.'),
+
+  birthDate: z
+    .string()
+    .trim()
+    .optional()
+    .transform((v) => (v === '' || v === undefined ? undefined : v))
+    .refine((v) => v === undefined || birthRegex.test(v), {
+      message: '잘못된 형식입니다.',
+    })
+    .refine(
+      (v) => {
+        if (!v) return true;
+        const d = new Date(v.replace(/\./g, '-'));
+        const year = d.getFullYear();
+        const now = new Date().getFullYear();
+
+        return !Number.isNaN(d.getTime()) && year >= 1900 && year <= now;
+      },
+      { message: '잘못된 형식입니다.' },
+    )
+    .transform((v) => (v ? v.replace(/\./g, '-') : undefined)),
+
+  githubLink: UrlSchema,
+  blogOrSnsLink: UrlSchema,
+
+  simpleIntroduction: z
+    .string()
+    .trim()
+    .max(200, '최대 200자까지 입력할 수 있어요.')
+    .optional()
+    .transform((v) => (v === '' || v === undefined ? undefined : v)),
+
+  mbti: z
+    .string()
+    .optional()
+    .transform((v) => (v === '' || v === undefined ? undefined : v)),
+
+  interests: z
+    .array(z.string())
+    .optional()
+    .transform((arr) => (!arr || arr.length === 0 ? undefined : arr)),
+});
+
+export type ProfileFormInput = z.input<typeof ProfileFormSchema>;
+export type ProfileFormValues = z.output<typeof ProfileFormSchema>;
+
+export function buildProfileDefaultValues(
+  member: MemberProfile,
+): ProfileFormInput {
+  return {
+    name: member.memberName ?? '',
+    tel: member.tel ?? '',
+    // 화면에서는 점(.)으로 보여주기, 스키마 제출 시 하이픈(-) 변환
+    birthDate: member.birthDate ? member.birthDate.replace(/-/g, '.') : '',
+    githubLink: member.githubLink?.url ?? '',
+    blogOrSnsLink: member.blogOrSnsLink?.url ?? '',
+    mbti: (member.mbti as string) ?? '',
+    simpleIntroduction: member.simpleIntroduction ?? '',
+    interests: member.interests?.map((i) => i.name) ?? [],
+  };
+}
+
+// 서버 전송 payload
+export function toUpdateProfilePayload(
+  v: ProfileFormValues,
+  extra?: Partial<Pick<UpdateUserProfileRequest, 'profileImageExtension'>>,
+): UpdateUserProfileRequest {
+  const payload: UpdateUserProfileRequest = {
+    name: v.name,
+    tel: v.tel,
+    birthDate: v.birthDate,
+    githubLink: v.githubLink,
+    blogOrSnsLink: v.blogOrSnsLink,
+    simpleIntroduction: v.simpleIntroduction,
+    mbti: v.mbti,
+    interests: v.interests,
+  };
+
+  if (extra?.profileImageExtension) {
+    payload.profileImageExtension = extra.profileImageExtension;
+  }
+
+  return payload;
+}

src/features/my-page/model/profile-info-form.schema.ts

@@ -0,0 +1,60 @@
+import { z } from 'zod';
+import type { MemberInfo } from '@/entities/user/api/types';
+import type { UpdateUserProfileInfoRequest } from '../api/types';
+
+export const ProfileInfoFormSchema = z.object({
+  selfIntroduction: z
+    .string()
+    .trim()
+    .max(500, '최대 500자까지 입력 가능합니다.'),
+
+  studyPlan: z
+    .string()
+    .trim()
+    .min(1, '공부 계획을 입력해 주세요.')
+    .max(500, '최대 500자까지 입력 가능합니다.'),
+
+  preferredStudySubjectId: z.string().optional(),
+
+  availableStudyTimeIds: z
+    .array(z.string())
+    .min(1, '가능 시간대를 1개 이상 선택해 주세요.'),
+
+  techStackIds: z
+    .array(z.string())
+    .min(1, '기술 스택을 1개 이상 선택해 주세요.'),
+});
+
+export type ProfileInfoFormValues = z.infer<typeof ProfileInfoFormSchema>;
+
+export function buildProfileInfoDefaultValues(
+  member: MemberInfo,
+): ProfileInfoFormValues {
+  return {
+    selfIntroduction: member.selfIntroduction ?? '',
+    studyPlan: member.studyPlan ?? '',
+    preferredStudySubjectId: member.preferredStudySubject
+      ? String(member.preferredStudySubject.studySubjectId)
+      : undefined,
+    availableStudyTimeIds: (member.availableStudyTimes ?? [])
+      .map((t) => t?.id)
+      .filter((x): x is number => typeof x === 'number')
+      .map(String),
+    techStackIds: (member.techStacks ?? [])
+      .map((t) => t?.techStackId)
+      .filter((x): x is number => typeof x === 'number')
+      .map(String),
+  };
+}
+
+export function toUpdateUserProfileInfoRequest(
+  v: ProfileInfoFormValues,
+): UpdateUserProfileInfoRequest {
+  return {
+    selfIntroduction: v.selfIntroduction,
+    studyPlan: v.studyPlan,
+    preferredStudySubjectId: v.preferredStudySubjectId!,
+    availableStudyTimeIds: v.availableStudyTimeIds.map(Number),
+    techStackIds: v.techStackIds.map(Number),
+  };
+}