diff --git a/src/assets/landing/landing-img.webp b/src/assets/landing/landing-img.webp new file mode 100644 index 0000000..c78c3d0 Binary files /dev/null and b/src/assets/landing/landing-img.webp differ diff --git a/src/assets/landing/logo-white.svg b/src/assets/landing/logo-white.svg new file mode 100644 index 0000000..0e9ef90 --- /dev/null +++ b/src/assets/landing/logo-white.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/TextField.tsx b/src/components/TextField.tsx index dc67479..b104722 100644 --- a/src/components/TextField.tsx +++ b/src/components/TextField.tsx @@ -82,7 +82,7 @@ const Input = forwardRef( ref: Ref, ) => { const wrapperClassNames = cn( - "flex w-fit gap-1.5 border rounded-[0.375rem] border-gray-30 focus-within:border-blue-20 placeholder:text-gray-40 bg-white", + "flex w-fit gap-1.5 border rounded-[0.375rem] border-gray-30 focus-within:border-red-20 placeholder:text-gray-40 bg-white", { "w-full": fullWidth, "bg-gray-20 text-gray-40": disabled, diff --git a/src/index.css b/src/index.css index 691f1af..64a18fe 100644 --- a/src/index.css +++ b/src/index.css @@ -26,3 +26,11 @@ ::-webkit-scrollbar-button { display: none; } + +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus { + -webkit-box-shadow: 0 0 0px 1000px white inset !important; + box-shadow: 0 0 0px 1000px white inset !important; + -webkit-text-fill-color: #000 !important; +} diff --git a/src/layouts/AuthLayout.tsx b/src/layouts/AuthLayout.tsx index b8c486b..d944e18 100644 --- a/src/layouts/AuthLayout.tsx +++ b/src/layouts/AuthLayout.tsx @@ -2,10 +2,8 @@ import { Outlet } from "react-router-dom"; export default function AuthLayout() { return ( -
-
- -
+
+
); } diff --git a/src/pages/AuthPage/SigninPage.tsx b/src/pages/AuthPage/SigninPage.tsx index db592e2..94790e4 100644 --- a/src/pages/AuthPage/SigninPage.tsx +++ b/src/pages/AuthPage/SigninPage.tsx @@ -3,12 +3,13 @@ import { useState, useEffect } from "react"; import { AxiosError } from "axios"; import { useNavigate, Link } from "react-router-dom"; -import Logo from "../../assets/logo/thejulge.svg?react"; +import Logo from "../../assets/landing/logo-white.svg?react"; import Spinner from "./components/Spinner"; import { useAuthForm } from "./hooks/useAuthForm"; import { postAuthentication } from "@/apis/services/authenticationService"; +import LandingImage from "@/assets/landing/landing-img.webp"; import Button from "@/components/Button"; import TextField from "@/components/TextField"; import { ROUTES } from "@/constants/router"; @@ -35,7 +36,8 @@ export default function SigninPage() { } }, [user, navigate]); - const handleSubmit = async () => { + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); if (isSubmitting) return; setIsSubmitting(true); @@ -97,60 +99,78 @@ export default function SigninPage() { }; return ( -
- - - - -
{ - e.preventDefault(); - if (isFormValid) { - handleSubmit(); - } - }} - > - - - - - - - -

- 회원이 아니신가요?{" "} - - 회원가입하기 +

+
+ + -

-
+
+ +
+
+

+ 더 나은 + 조건, +
+ 더 나은 선택 +

+

+ 당신에게{" "} + 더 + 줄게요. +

+ LandingImage +
+ +
+
+
+ + + + +

+ 아직 계정이 없으신가요?{" "} + + 회원가입 + +

+
+
+
+ ); } diff --git a/src/pages/AuthPage/SignupPage.tsx b/src/pages/AuthPage/SignupPage.tsx index b93af0c..967c58a 100644 --- a/src/pages/AuthPage/SignupPage.tsx +++ b/src/pages/AuthPage/SignupPage.tsx @@ -5,13 +5,13 @@ import clsx from "clsx"; import { useNavigate, Link } from "react-router-dom"; import IconCheck from "../../assets/icon/check.svg?react"; -import Logo from "../../assets/logo/thejulge.svg?react"; +import Logo from "../../assets/landing/logo-white.svg?react"; import Spinner from "./components/Spinner"; import { useAuthForm } from "./hooks/useAuthForm"; -import { postAuthentication } from "@/apis/services/authenticationService"; import { postUser } from "@/apis/services/userService"; +import LandingImage from "@/assets/landing/landing-img.webp"; import Button from "@/components/Button"; import TextField from "@/components/TextField"; import { ROUTES } from "@/constants/router"; @@ -20,7 +20,7 @@ import { useUserStore } from "@/store/useUserStore"; export default function SignupPage() { const navigate = useNavigate(); - const { user, setUserAndToken } = useUserStore(); + const { user } = useUserStore(); const { openModal, closeModal } = useModalStore(); const { @@ -35,6 +35,7 @@ export default function SignupPage() { const [isSubmitting, setIsSubmitting] = useState(false); useEffect(() => { + if (!user || location.pathname === ROUTES.AUTH.SIGNUP) return; if (user) { if (user.type === "employer") { navigate(ROUTES.SHOP.ROOT); @@ -56,21 +57,8 @@ export default function SignupPage() { }); if (response.status === 201) { - const loginRes = await postAuthentication({ - email: formData.email, - password: formData.password, - }); - - const token = loginRes.data.item.token; - const user = loginRes.data.item.user.item; - - setUserAndToken(user, token); - resetForm(); - const route = - user.type === "employer" ? ROUTES.SHOP.ROOT : ROUTES.PROFILE.ROOT; - openModal({ type: "message", message: "가입이 완료되었습니다!", @@ -85,7 +73,7 @@ export default function SignupPage() { }, ], onClose: () => { - navigate(route); + navigate(ROUTES.AUTH.SIGNIN); }, }); } @@ -115,141 +103,175 @@ export default function SignupPage() { }; return ( -
- - - - -
{ - e.preventDefault(); - handleSubmit(); - }} - > - - - - - - -
- - 회원 유형 - -
- + + +
+
+ +
- 알바님 - - - + + +

+ 이미 가입하셨나요?{" "} + - {formData.userType === "employer" && ( - - )} -

- 사장님 - + 로그인하기 + +

- - - - - -

- 이미 가입하셨나요?{" "} - - 로그인하기 - -

- + + + ); }