Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FE-66 🔧 회원가입 페이지 ui 수정 #48

Merged
merged 3 commits into from
Jul 20, 2024
Merged

FE-66 🔧 회원가입 페이지 ui 수정 #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bfd7d3b
:fire: AuthLayout 삭제
jangmoonwon Jul 19, 2024
467a76c
:art: 회원가입 페이지 브라우저 확대시 ui 깨짐 수정
jangmoonwon Jul 19, 2024
bd48061
:truck: 정규표현식 네이밍 변경
jangmoonwon Jul 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions src/pageLayout/AuthLayout/AuthLayout.tsx
View file
Open in desktop

This file was deleted.

115 changes: 56 additions & 59 deletions src/pages/auth/SignUp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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'
Expand All @@ -48,49 +47,47 @@ export default function SignUp() {
</FormItem>
)}
/>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<div></div> 한 줄만 삭제했습니다.

<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'
Expand All @@ -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>
Expand All @@ -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>
);
}
4 changes: 2 additions & 2 deletions src/schema/auth.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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자까지 가능합니다.' }),
})
Expand Down
Loading