refactor/116/profileedit-schema

src/apis/users/types.ts

@@ -1,5 +1,6 @@
 import { z } from 'zod';
 import { SIGNUP_FORM_VALID_LENGTH, SIGNUP_FORM_ERROR_MESSAGE } from '@/constants/auth';
+import { PROFILEEDIT_FORM_VALID_LENGTH, PROFILEEDIT_FORM_ERROR_MESSAGE } from '@/constants/profileEdit';
 
 interface FailResponse {
   message: string;
@@ -44,7 +45,7 @@ export type SignupResponse = Promise<SignupSuccessResponse | SignupFailResponse>
 type ProfileImageUrl = string | URL | null;
 
 export const updateUserFormSchema = z.object({
-  nickname: z.string(),
+  nickname: z.string().max(PROFILEEDIT_FORM_VALID_LENGTH.NICKNAME.MAX, PROFILEEDIT_FORM_ERROR_MESSAGE.NICKNAME.MAX),
   profileImageUrl: z.string(),
 });
 

src/components/profile/ProfileEdit.tsx

@@ -118,8 +118,8 @@ export default function ProfileEdit() {
         {/* 프로필 수정 폼 */}
         <form onSubmit={handleSubmit(handleSave)} className='w-[252px] md:w-[276px] lg:w-[400px]'>
           <Input label='이메일' placeholder={currentEmail} readOnly className='mb-4 w-full' />
-          <Input label='닉네임' placeholder={currentNickname} {...register('nickname')} error={errors.nickname?.message} className='mb-4 w-full' />
-          <SubmitButton isValid={isValid && isFormChanged} isSubmitting={isSubmitting} text='저장' className='w-full' />
+          <Input label='닉네임' placeholder={currentNickname} {...register('nickname')} error={errors.nickname?.message} className='w-full' />
+          <SubmitButton isValid={isValid && isFormChanged} isSubmitting={isSubmitting} text='저장' className='mt-4 w-full' />
         </form>
       </div>
     </div>

src/constants/profileEdit.ts

@@ -0,0 +1,15 @@
+export const PROFILEEDIT_FORM_PLACEHOLDER = {
+  NICKNAME: '닉네임을 입력해 주세요',
+} as const;
+
+export const PROFILEEDIT_FORM_VALID_LENGTH = {
+  NICKNAME: {
+    MAX: 10,
+  },
+} as const;
+
+export const PROFILEEDIT_FORM_ERROR_MESSAGE = {
+  NICKNAME: {
+    MAX: '열 자 이하로 작성해 주세요',
+  },
+} as const;