Skip to content

Commit

Permalink
Feat: #27 로그인 페이지 생성 및 Validation 작성 (#43)
Browse files Browse the repository at this point in the history
* Feat: #5 회원가입 페이지 생성 및 마크업, CSS 스타일링

* Feat: #5 회원가입 입력 데이터 유효성 검사 기능 추가

* Design: #5 회원가입 페이지 스타일링 변경 및 프로필 이미지 설정 , 삭제 기능 추가

* Feat: #27 로그인 페이지 작성

* design: 수정된 회원가입 폼으로 UI 수정, 비밀번호 보이기 및 숨김 기능 추가

* Design: #27 수정된 로그인 폼으로 UI 수정

* Formatting: #5 유저관련폼 중복 처리 및 회원가입 폼 변수명 수정

* refactor: 공통 유효성 인증 input 컴포넌트 적용 및 회원가입 폼 디자인 수정사항 반영

* feat: 링크 갯수 제한 기능 추가

* UI: #5 로직에 따른 아이콘 등록 수정

* UI: #5 버튼 라운드 값 수정

* UI: #5 리뷰 반영 디자인 수정

* Chore: 정규식 수정 및 eslint 수정

* Refactor: #5 회원가입 폼에서 유효성 검증 규칙 분리

* Refactor: #27 ValidationInput 컴포넌트를 이용한 리팩토링 및 전반적인 UI 수정

* UI: #27 소셜 로그인 버튼 UI 수정
  • Loading branch information
Yoonyesol authored Jul 9, 2024
1 parent 71521a3 commit f228917
Show file tree
Hide file tree
Showing 5 changed files with 69 additions and 72 deletions.
2 changes: 1 addition & 1 deletion src/constants/formValidationRules.ts
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export const STATUS_VALIDATION_RULES = deepFreeze({
},
pattern: {
value: PASSWORD_REGEX,
message: '비밀번호는 영문자, 숫자, 기호를 포함해야 합니다.',
message: '비밀번호는 영문자, 숫자, 기호를 모두 포함해야 합니다.',
},
}),
PASSWORD_CONFIRM: () => ({
Expand Down
8 changes: 8 additions & 0 deletions src/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -85,4 +85,12 @@
.selected::before {
@apply absolute left-0 top-0 block h-30 w-3 bg-main content-[''];
}

.auth-btn {
@apply flex h-30 items-center justify-center rounded-lg bg-sub px-8 font-bold;
}

.auth-input {
@apply h-30 flex-grow rounded-lg border border-input px-8 text-sm outline-none placeholder:text-emphasis;
}
}
2 changes: 1 addition & 1 deletion src/layouts/page/AuthLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export default function AuthLayout() {
return (
<div className="flex h-screen flex-row items-center justify-evenly bg-main">
<img src={AuthGULogo} alt="Auth GU Logo" />
<main className="font-emphasis flex h-[90vh] flex-col overflow-y-scroll rounded-2xl bg-[white] p-30 scrollbar-hide">
<main className="flex h-[90vh] flex-col overflow-y-scroll rounded-2xl bg-[white] p-30 scrollbar-hide">
<Outlet />
</main>
</div>
Expand Down
119 changes: 49 additions & 70 deletions src/pages/user/SignInPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,87 +24,66 @@ export default function SignInPage() {
};

return (
<form onSubmit={handleSubmit(onSubmit)} className="flex w-300 flex-col gap-8 text-emphasis">
<div className="mb-24 mt-30 text-large">
<form onSubmit={handleSubmit(onSubmit)} noValidate className="flex h-screen w-300 flex-col py-30">
<section className="h-1/6 text-large text-main">
Welcome to our site!
<br /> Grow Up your Life with us.
</div>
<div className="flex flex-row gap-8">
<input
{...register('email', {
required: '이메일(아이디)을 입력해 주세요.',
pattern: {
value: EMAIL_REGEX,
message: '이메일 형식에 맞지 않습니다.',
},
})}
type="email"
placeholder="이메일 (아이디)"
className={`auth-input ${errors.email && `border-2 border-[#FF0000]`}`}
</section>

<section className="flex flex-grow flex-col justify-center gap-8">
{/* 이메일(아이디) */}
<ValidationInput
placeholder="이메일"
errors={errors.email?.message}
register={register('email', STATUS_VALIDATION_RULES.EMAIL())}
/>
</div>
{errors.email && <p className="text-sm text-[#FF0000]">{errors.email.message}</p>}

<input
{...register('password', {
required: '비밀번호를 입력해 주세요.',
minLength: {
value: 8,
message: '비밀번호는 최소 8자 이상이어야 합니다.',
},
maxLength: {
value: 16,
message: '비밀번호는 최대 16자 이하여야 합니다.',
},
pattern: {
value: PASSWORD_REGEX,
message: '비밀번호는 영문자, 숫자, 기호를 포함해야 합니다.',
},
})}
placeholder="비밀번호 (영문자, 숫자, 기호 포함 8~16자리)"
type="password"
id="password"
className={`auth-input ${errors.password && `border-2 border-[#FF0000]`}`}
/>
{errors.password && <p className="text-sm text-[#FF0000]">{errors.password.message}</p>}
{/* 비밀번호 */}
<ValidationInput
placeholder="비밀번호 (영문자, 숫자, 기호 포함 8~16자리)"
type="password"
errors={errors.password?.message}
register={register('password', STATUS_VALIDATION_RULES.PASSWORD())}
/>

<div className="flex flex-col gap-4 text-center">
<button type="submit" className="auth-btn" disabled={isSubmitting}>
로그인
</button>
</div>
<div className="flex flex-col gap-4 text-center">
<button type="submit" className="auth-btn" disabled={isSubmitting}>
로그인
</button>
</div>

<div className="flex flex-row justify-center gap-8">
<p className="cursor-pointer font-bold" onClick={() => nav('/search/id')} onKeyDown={() => nav('/search/id')}>
아이디 찾기
</p>
<p>|</p>
<p
className="cursor-pointer font-bold"
onClick={() => nav('/search/password')}
onKeyDown={() => nav('/search/password')}
>
비밀번호 찾기
</p>
</div>
<div className="flex flex-row justify-center gap-8">
<button type="button" className="cursor-pointer bg-inherit font-bold" onClick={() => nav('/search/id')}>
아이디 찾기
</button>
<p>|</p>
<button type="button" className="cursor-pointer bg-inherit font-bold" onClick={() => nav('/search/password')}>
비밀번호 찾기
</button>
</div>

<div className="mb-35 mt-15 flex flex-row items-center justify-center gap-8">
<p className="items-center font-bold">회원이 아니신가요?</p>
<button type="button" className="auth-btn" onClick={() => nav('/signup')}>
회원가입
</button>
</div>
<div className="mb-35 mt-15 flex flex-row items-center justify-center gap-8">
<p className="items-center font-bold">회원이 아니신가요?</p>
<button type="button" className="auth-btn" onClick={() => nav('/signup')}>
회원가입
</button>
</div>
</section>

<div className="flex flex-col gap-4 text-center">
<button type="button" className="auth-btn bg-[#f6e04b]" disabled={isSubmitting}>
<img src={Kakao} alt="Kakao" className="mr-5 size-15" />
카카오 로그인
<section className="flex h-1/6 flex-col gap-4 text-center">
<button type="button" className="auth-btn bg-kakao" disabled={isSubmitting}>
<div className="flex w-81 items-center justify-between">
<img src={Kakao} alt="Kakao" className="size-15" />
카카오 로그인
</div>
</button>
<button type="button" className="auth-btn bg-button" disabled={isSubmitting}>
<img src={Google} alt="Google" className="mr-5 size-40" />
구글 로그인
<div className="flex w-81 items-center justify-between">
<img src={Google} alt="Google" className="size-42" />
로그인
</div>
</button>
</div>
</section>
</form>
);
}
10 changes: 10 additions & 0 deletions tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,16 @@ export default {
scroll: 'var(--color-scroll)',
button: 'var(--color-button)',
kakao: 'var(--color-kakao)',
todo: {
red: 'var(--color-todo-red)',
yellow: 'var(--color-todo-yellow)',
green: 'var(--color-todo-green)',
blue: 'var(--color-todo-blue)',
orange: 'var(--color-todo-orange)',
purple: 'var(--color-todo-purple)',
'yellow-green': 'var(--color-todo-yellow-green)',
gray: 'var(--color-todo-gray)',
},
},
},
},
Expand Down

0 comments on commit f228917

Please sign in to comment.