Skip to content

Commit

Permalink
design : 로그인&회원가입 페이지 디자인 소폭 변경
Browse files Browse the repository at this point in the history
  • Loading branch information
@cmlim0070
cmlim0070 committed Jan 3, 2025
1 parent 9f9875e commit 51666e9
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 130 deletions.
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>
);
};
11 changes: 4 additions & 7 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,10 +32,6 @@ export const LoginPage = () => {
mutate({ email, password });
};

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

return (
<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">
Expand All @@ -60,12 +57,12 @@ export const LoginPage = () => {
</button>
<div>
계정이 없으신가요?
<a
<Link
to="/register"
className="text-bold text-sample-blue"
onClick={handleNavigateRegister}
>
{' '}회원가입
</a>
</Link>
</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 51666e9

Please sign in to comment.