Skip to content

Commit

Permalink
design : 로그인&회원가입 페이지 스타일 변경 (#465)
Browse files Browse the repository at this point in the history 
* env : 개발 환경에서 서비스워커 캐싱 무효화

* design : 로그인 페이지 디자인 변경

* design : 로그인&회원가입 페이지 디자인 소폭 변경
  • Loading branch information
@cmlim0070
cmlim0070 authored Jan 4, 2025
1 parent 04f8986 commit ce424f9
Show file tree
Hide file tree
Showing 4 changed files with 141 additions and 138 deletions.
6 changes: 6 additions & 0 deletions public/sw.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,13 @@ const cacheName = '::myServiceWorker';
const version = 'v0.0.1';
const cacheList = [];

const isDev =
self.location.hostname === 'localhost' ||
self.location.hostname === '127.0.0.1';

self.addEventListener('fetch', (e) => {
if (isDev) return e.respondWith(fetch(e.request));

e.respondWith(
caches.match(e.request).then((r) => {
if (r) {
Expand Down
154 changes: 75 additions & 79 deletions src/components/RegisterPage/EmailSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,93 +27,89 @@ export const EmailSection = ({
console.log(isVerifyLoading);
}, [isVerifyLoading]);
return (
<div className="flex flex-col gap-5">
<div>
<div className="flex flex-col gap-2">
<div className="flex w-full items-end gap-2">
<div className="w-full">
{email && isEmailSend && isEmailVerified && (
<div className="flex items-center h-6 text-[12px] text-green-500 md:text-base">
✔ 인증이 완료되었습니다.
</div>
)}
<EmailInput onValueChange={onEmailChange} />
</div>
<button
type="button"
className="flex flex-row justify-center items-center gap-2 border border-sample-blue h-8 px-3 w-[200px] rounded text-sample-blue hover:bg-sample-blue hover:text-white transition-colors whitespace-nowrap"
onClick={onRequestVerify}
>
{isVerifyLoading ? (
<svg
className="animate-spin h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
/>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
) : isEmailVerified ? (
<svg
className="h-5 w-5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M5 13l4 4L19 7"
/>
</svg>
) : (
<svg
className="h-5 w-5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M14 5l7 7m0 0l-7 7m7-7H3"
/>
</svg>
)}
인증번호 전송
</button>
</div>

{isEmailSend && (
<div className="flex w-full items-end gap-2">
<div className="w-full">
{email && isEmailSend && isEmailVerified && (
<div className="flex items-center h-6 text-[12px] text-green-500 md:text-base">
✔ 인증이 완료되었습니다.
</div>
)}
<EmailInput onValueChange={onEmailChange} />
<VerifyEmailInput onValueChange={onAuthNumChange} />
</div>
<button
type="button"
className="flex flex-row justify-center items-center gap-2 border border-sample-blue h-8 px-3 w-[200px] rounded text-sample-blue hover:bg-sample-blue hover:text-white transition-colors whitespace-nowrap"
onClick={onRequestVerify}
className="border border-sample-blue h-8 px-3 rounded text-sample-blue hover:bg-sample-blue hover:text-white transition-colors whitespace-nowrap items-end"
onClick={onRequestAuthNumVerify}
>
{isVerifyLoading ? (
<svg
className="animate-spin h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
/>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
) : isEmailVerified ? (
<svg
className="h-5 w-5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M5 13l4 4L19 7"
/>
</svg>
) : (
<svg
className="h-5 w-5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M14 5l7 7m0 0l-7 7m7-7H3"
/>
</svg>
)}
인증번호 전송
확인
</button>
</div>
</div>

<div>
{isEmailSend && (
<div className="flex w-full items-end gap-2">
<div className="w-full">
<VerifyEmailInput onValueChange={onAuthNumChange} />
</div>
<button
type="button"
className="border border-sample-blue h-8 px-3 rounded text-sample-blue hover:bg-sample-blue hover:text-white transition-colors whitespace-nowrap items-end"
onClick={onRequestAuthNumVerify}
>
확인
</button>
</div>
)}
</div>
)}
</div>
);
};
31 changes: 16 additions & 15 deletions src/pages/User/Login/LoginPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { EmailInput } from '@/components/Common/Input/EmailInput';
import { PasswordInput } from '@/components/Common/Input/PasswordInput';
import { useToastStore } from '@/hooks/useToastStore';
import { useLogin } from './../../../hooks/useLogin';
import { Link } from 'react-router-dom';

// const KAKAO_CLIENT_ID = import.meta.env.VITE_JAVASCRIPT_KEY as string;
// const REDIRECT_URI = 'http://localhost:5173/login/kakao';
Expand Down Expand Up @@ -31,38 +32,38 @@ export const LoginPage = () => {
mutate({ email, password });
};

const handleNavigateRegister = () => {
navigate('/register');
};

return (
<div className="flex flex-col gap-3 h-full my-[50px]">
<div className="flex flex-col items-center gap-3 w-full h-full my-[50px]">
<h2 className="text-2xl text-center text-sample-blue font-bold py-3">
Bottler
</h2>
<form
className="flex flex-col gap-5 "
className="flex flex-col gap-5 w-full p-5"
onSubmit={handleSubmit}
noValidate
>
<h2 className="text-2xl font-bold ">로그인</h2>
<div className="flex flex-col gap-5">
<div className="flex flex-col gap-2">
<EmailInput></EmailInput>
<PasswordInput></PasswordInput>
</div>
<div className="flex flex-col gap-1 w-full">
<div className="flex flex-row gap-1 w-full">
<div className="flex flex-col gap-3 w-full">
<button
className="btn-primary-filled"
type="submit"
>
로그인
</button>
<button
className="btn-primary"
type="button"
onClick={handleNavigateRegister}
>
회원가입
</button>
<div>
계정이 없으신가요?
<Link
to="/register"
className="text-bold text-sample-blue"
>
{' '}회원가입
</Link>
</div>
</div>
</div>
</div>
Expand Down
88 changes: 44 additions & 44 deletions src/pages/User/Register/RegisterPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,51 +23,51 @@ export const RegisterPage = () => {
};

return (
<div className="flex flex-col gap-3 h-full my-[50px]">
<h2 className="font-bold text-2xl ">회원가입</h2>
<div>
<form
className="flex flex-col gap-5"
onSubmit={handleSubmit}
onKeyDown={handleFormKeyDown}
noValidate
>
<EmailSection
email={formState.email}
onEmailChange={(value) => updateField('email', value)}
onAuthNumChange={(value) =>
updateField('authNum', value)
}
onRequestVerify={handleRequestEmailVerifyCode}
onRequestAuthNumVerify={handleVerifyEmail}
isVerifyLoading={validationState.isVerifyLoading}
isEmailSend={validationState.isEmailSend}
isEmailVerified={validationState.isEmailVerified}
></EmailSection>
<PasswordSection
onPasswordChange={(value) =>
updateField('password', value)
}
onConfirmPasswordChange={(value) =>
updateField('confirmPassword', value)
}
></PasswordSection>
<NicknameSection
nickname={formState.nickname}
onNicknameChange={(value) =>
updateField('nickname', value)
}
onRequestNicknameVerify={handleCheckNickname}
isNicknameChecked={validationState.isNicknameChecked}
isNicknameValid={validationState.isNicknameValid}
></NicknameSection>
<button type="submit" className="btn-primary-filled">
가입하기
</button>
<Link to="/login">
<div className="cursor-pointer">이미 회원이신가요?</div>
<div className="flex flex-col items-center gap-5 w-full h-full my-[50px] px-5">
<h2 className="text-2xl text-center text-sample-blue font-bold py-3 ">
Bottler
</h2>
<form
className="flex flex-col gap-2 w-full"
onSubmit={handleSubmit}
onKeyDown={handleFormKeyDown}
noValidate
>
<EmailSection
email={formState.email}
onEmailChange={(value) => updateField('email', value)}
onAuthNumChange={(value) => updateField('authNum', value)}
onRequestVerify={handleRequestEmailVerifyCode}
onRequestAuthNumVerify={handleVerifyEmail}
isVerifyLoading={validationState.isVerifyLoading}
isEmailSend={validationState.isEmailSend}
isEmailVerified={validationState.isEmailVerified}
></EmailSection>
<PasswordSection
onPasswordChange={(value) => updateField('password', value)}
onConfirmPasswordChange={(value) =>
updateField('confirmPassword', value)
}
></PasswordSection>
<NicknameSection
nickname={formState.nickname}
onNicknameChange={(value) => updateField('nickname', value)}
onRequestNicknameVerify={handleCheckNickname}
isNicknameChecked={validationState.isNicknameChecked}
isNicknameValid={validationState.isNicknameValid}
></NicknameSection>
</form>
<div className="flex flex-col w-full gap-2">
<button type="submit" className="btn-primary-filled">
가입하기
</button>
<div>
이미 회원이신가요?
<Link to="/login" className="text-bold text-sample-blue">
{' '}
로그인
</Link>
</form>
</div>
</div>
</div>
);
Expand Down

0 comments on commit ce424f9

Please sign in to comment.