Merge pull request #48 from epigram5-9/fix/FE-66

FE-66 🔧 회원가입 페이지 ui 수정
epigram5-9 · Jul 20, 2024 · 1256f61 · 1256f61
2 parents 03d62c5 + bd48061
commit 1256f61
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 66 deletions.
diff --git a/src/pageLayout/AuthLayout/AuthLayout.tsx b/src/pageLayout/AuthLayout/AuthLayout.tsx
diff --git a/src/pages/auth/SignUp.tsx b/src/pages/auth/SignUp.tsx
@@ -1,6 +1,5 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import AuthLayout from '@/pageLayout/AuthLayout/AuthLayout';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { PostSignUpRequest, PostSignUpRequestType } from '@/schema/auth';
 import { useForm } from 'react-hook-form';
@@ -21,21 +20,21 @@ export default function SignUp() {
   });
 
   return (
-    <AuthLayout>
-      <header className='mb-[50px] md:mb-[60px]'>
+    <div className='flex flex-col justify-center items-center bg-background-100 w-full min-h-screen'>
+      <header className='h-full mb-[50px] md:mb-[60px]'>
         <Link href='/'>
           <Image src='/lg.svg' alt='logo' width={172} height={48} />
         </Link>
       </header>
-      <Form {...form}>
-        <form className='flex flex-col items-center md:gap-10 gap-[30px] w-full px-6 md:mb-[60px] mb-[50px]'>
-          <div className='flex flex-col items-center md:gap-10 gap-5 w-full lg:max-w-[640px] md:max-w-[384px]'>
+      <div className='w-full'>
+        <Form {...form}>
+          <form className='flex flex-col items-center w-full h-full px-6'>
             <FormField
               control={form.control}
               name='email'
               render={({ field, fieldState }) => (
-                <FormItem className='flex flex-col md:gap-5 gap-4 w-full space-y-0'>
-                  <FormLabel className={`font-pretendard lg:text-xl md:text-base sm:text-sm ${fieldState.invalid ? 'text-state-error' : 'text-blue-900'}`}>이메일</FormLabel>
+                <FormItem className='flex flex-col w-full lg:max-w-[640px] md:max-w-[384px] space-y-0 md:mb-10 mb-5'>
+                  <FormLabel className={`md:mb-5 mb-4 font-pretendard lg:text-xl md:text-base sm:text-sm ${fieldState.invalid ? 'text-state-error' : 'text-blue-900'}`}>이메일</FormLabel>
                   <FormControl>
                     <Input
                       type='text'
@@ -48,49 +47,47 @@ export default function SignUp() {
                 </FormItem>
               )}
             />
-            <div className='flex flex-col items-center md:gap-4 gap-[10px] w-full lg:max-w-[640px] md:max-w-[384px]'>
-              <FormField
-                control={form.control}
-                name='password'
-                render={({ field, fieldState }) => (
-                  <FormItem className='flex flex-col md:gap-5 gap-4 w-full space-y-0'>
-                    <FormLabel className={`font-pretendard lg:text-xl md:text-base sm:text-sm ${fieldState.invalid ? 'text-state-error' : 'text-blue-900'}`}>비밀번호</FormLabel>
-                    <FormControl>
-                      <Input
-                        type='password'
-                        placeholder='비밀번호'
-                        className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${fieldState.invalid ? 'border-2 border-state-error' : ''}`}
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage className='flex justify-end text-[13px] text-state-error' />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name='passwordConfirmation'
-                render={({ field, fieldState }) => (
-                  <FormItem className='flex flex-col md:gap-5 gap-4 w-full space-y-0'>
-                    <FormControl>
-                      <Input
-                        type='password'
-                        placeholder='비밀번호 확인'
-                        className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${fieldState.invalid ? 'border-2 border-state-error' : ''}`}
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage className='flex justify-end text-[13px] text-state-error' />
-                  </FormItem>
-                )}
-              />
-            </div>
+            <FormField
+              control={form.control}
+              name='password'
+              render={({ field, fieldState }) => (
+                <FormItem className='flex flex-col w-full lg:max-w-[640px] md:max-w-[384px] space-y-0 md:mb-4 mb-[10px]'>
+                  <FormLabel className={`md:mb-5 mb-4 font-pretendard lg:text-xl md:text-base sm:text-sm ${fieldState.invalid ? 'text-state-error' : 'text-blue-900'}`}>비밀번호</FormLabel>
+                  <FormControl>
+                    <Input
+                      type='password'
+                      placeholder='비밀번호'
+                      className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${fieldState.invalid ? 'border-2 border-state-error' : ''}`}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage className='flex justify-end text-[13px] text-state-error' />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='passwordConfirmation'
+              render={({ field, fieldState }) => (
+                <FormItem className='flex flex-col w-full lg:max-w-[640px] md:max-w-[384px] space-y-0 md:mb-10 mb-5'>
+                  <FormControl>
+                    <Input
+                      type='password'
+                      placeholder='비밀번호 확인'
+                      className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 font-pretendard ${fieldState.invalid ? 'border-2 border-state-error' : ''}`}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage className='flex justify-end text-[13px] text-state-error' />
+                </FormItem>
+              )}
+            />
             <FormField
               control={form.control}
               name='nickname'
               render={({ field, fieldState }) => (
-                <FormItem className='flex flex-col md:gap-5 gap-4 w-full space-y-0'>
-                  <FormLabel className={`font-pretendard lg:text-xl md:text-base sm:text-sm ${fieldState.invalid ? 'text-state-error' : 'text-blue-900'}`}>닉네임</FormLabel>
+                <FormItem className='flex flex-col w-full lg:max-w-[640px] md:max-w-[384px] md:mb-10 mb-[30px] space-y-0'>
+                  <FormLabel className={`md:mb-5 mb-4 font-pretendard lg:text-xl md:text-base sm:text-sm ${fieldState.invalid ? 'text-state-error' : 'text-blue-900'}`}>닉네임</FormLabel>
                   <FormControl>
                     <Input
                       type='text'
@@ -103,17 +100,17 @@ export default function SignUp() {
                 </FormItem>
               )}
             />
-          </div>
-          <Button
-            disabled={!form.formState.isValid}
-            type='submit'
-            className={`w-full lg:max-w-[640px] md:max-w-[384px] lg:h-16 h-11 bg-black-500 font-pretendard text-white lg:text-xl md:text-base rounded-xl ${!form.formState.isValid ? 'bg-blue-300' : 'bg-black-500'}`}
-          >
-            가입하기
-          </Button>
-        </form>
-      </Form>
-      <div className='flex gap-4'>
+            <Button
+              disabled={!form.formState.isValid}
+              type='submit'
+              className={`w-full lg:max-w-[640px] md:max-w-[384px] lg:h-16 h-11 md:mb-[60px] mb-[50px] bg-black-500 font-pretendard text-white lg:text-xl md:text-base rounded-xl ${!form.formState.isValid ? 'bg-blue-300' : 'bg-black-500'}`}
+            >
+              가입하기
+            </Button>
+          </form>
+        </Form>
+      </div>
+      <div className='flex justify-center gap-4'>
         <Button type='button' className='md:size-[60px] p-0'>
           <Image src='/logo-naver.svg' alt='logo-naver' width={60} height={60} className='md:size-[60px] size-10' />
         </Button>
@@ -124,6 +121,6 @@ export default function SignUp() {
           <Image src='/logo-kakao.svg' alt='logo-kakao' width={60} height={60} className='md:size-[60px] size-10' />
         </Button>
       </div>
-    </AuthLayout>
+    </div>
   );
 }
diff --git a/src/schema/auth.ts b/src/schema/auth.ts
@@ -1,14 +1,14 @@
 import z from 'zod';
 
-const PWD_VALIDATION = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,}$/;
+const PWD_VALIDATION_REGEX = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,}$/;
 export const PostSignUpRequest = z
   .object({
     email: z.string().min(1, { message: '이메일은 필수 입력입니다.' }).email({ message: '이메일 형식으로 작성해 주세요.' }),
     password: z
       .string()
       .min(1, { message: '비밀번호는 필수 입력입니다.' })
       .min(8, { message: '비밀번호는 최소 8자 이상입니다.' })
-      .regex(PWD_VALIDATION, { message: '비밀번호는 숫자, 영문, 특수문자로만 가능합니다.' }),
+      .regex(PWD_VALIDATION_REGEX, { message: '비밀번호는 숫자, 영문, 특수문자로만 가능합니다.' }),
     passwordConfirmation: z.string().min(1, { message: '비밀번호 확인을 입력해주세요.' }),
     nickname: z.string().min(1, { message: '닉네임은 필수 입력입니다.' }).max(20, { message: '닉네임은 최대 20자까지 가능합니다.' }),
   })