issue # 비밀번호 초기화 로직 구현 중

src/App.tsx

@@ -8,6 +8,7 @@ import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-d
 import { useAuthStore } from './store/authStore';
 import { PageRouting } from './data/RoutingData';
 import LoginPage from './ui/page/login/LoginPage';
+import ResetPasswordPage from './ui/page/resetPassword/ResetPasswordPage';
 
 function App() {
   const { authData } = useAuthStore();
@@ -18,6 +19,7 @@ function App() {
         <Route element={<Layout />}>
           <Route element={<LoginPage />} path={PageRouting["LOGIN"].path} />
           <Route element={<SignUpPage />} path={PageRouting["SIGN_UP"].path} />
+          <Route element={<ResetPasswordPage />} path={PageRouting["RESET_PASSWORD"].path} />
           {!(authData?.isLogedIn) ? <Route element={<Navigate to={PageRouting["LOGIN"].path} />} path="*" /> : null}
         </Route>
       </Routes>

src/data/form/resetPassword.schema.ts

@@ -3,4 +3,7 @@ import * as z from 'zod';
 export const ResetPasswordSchema = z.object({
 	email: z
 		.email()
+	, resetCode: z
+		.string()
+		.length(6)
 });

src/ui/page/login/LoginPage.tsx

@@ -1,6 +1,6 @@
 import { Card, CardContent, CardHeader, CardFooter } from '@/components/ui/card';
 import { LoginSchema } from '@/data/form';
-import { Field, FieldError, FieldGroup, FieldLabel, FieldLegend } from '@/components/ui/field';
+import { Field, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator } from '@/components/ui/field';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -9,6 +9,8 @@ import { Controller, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { PageRouting } from '@/data/RoutingData';
 import * as z from 'zod';
+import { Separator } from '@/components/ui/separator';
+import { Label } from '@/components/ui/label';
 
 export default function LoginPage() {
   const navigate = useNavigate();
@@ -25,6 +27,20 @@ export default function LoginPage() {
     navigate(PageRouting["SIGN_UP"].path);
   }, []);
 
+  const moveToResetPasswordPage = useCallback(() => {
+    navigate(PageRouting["RESET_PASSWORD"].path);
+  }, []);
+
+  const TextSeparator = ({ text }: { text: string }) => {
+    return (
+      <div className="w-full flex flex-row items-center justify-center">
+        <Separator className="flex-1" />
+        <span className="text-gray-500 px-3 text-sm text-muted-foregroud">{text}</span>
+        <Separator className="flex-1" />
+      </div>
+    )
+  }
+
   return (
     <div className="w-full h-full flex flex-col justify-center items-center">
       <Card className="w-md pl-2 pr-2">
@@ -32,7 +48,7 @@ export default function LoginPage() {
           로그인
         </CardHeader>
         <CardContent>
-          <form id="form-login">
+          <form id="form-login" className="w-full flex flex-col gap-2.5">
             <Controller
               name="email"
               control={loginForm.control}
@@ -55,7 +71,15 @@ export default function LoginPage() {
               control={loginForm.control}
               render={({ field, fieldState }) => (
                 <Field data-invalid={fieldState.invalid}>
-                  <FieldLabel htmlFor="form-login-password">비밀번호</FieldLabel>
+                  <div className="w-full flex flex-row justify-between items-end">
+                    <FieldLabel className="w-fit" htmlFor="form-login-password">비밀번호</FieldLabel>
+                    <Button
+                      className="p-0 bg-transparent hover:bg-transparent h-fit w-fit text-xs text-gray-400 hover:text-gray-500 cursor-pointer"
+                      onClick={moveToResetPasswordPage}
+                    >
+                      비밀번호를 잊으셨습니까?
+                    </Button>
+                  </div>
                   <Input
                     {...field}
                     type="password"
@@ -70,16 +94,21 @@ export default function LoginPage() {
           </form>
         </CardContent>
         <CardFooter
-          className="w-full flex flex-col items-center justify-between gap-[5px]"
+          className="w-full flex flex-col items-center gap-5"
         >
           <Button 
-            className="w-full"
+            className="w-full bg-indigo-500 hover:bg-indigo-400"
             type="submit"
-            form="form-login">
+            form="form-login"
+            disabled={
+              (loginForm.getValues("email").trim.length < 1)
+              && (loginForm.getValues("password").trim.length < 1)
+            }>
             로그인
           </Button>
+          <TextSeparator text="또는" />
           <Button
-            className="w-full bg-white border-2 text-black hover:bg-gray-100"
+            className="w-full text-violet-500 bg-white border border-violet-500 hover:bg-violet-500 hover:text-white"
             onClick={moveToSignUpPage}
           >
             회원가입

src/ui/page/resetPassword/ResetPasswordPage.tsx

@@ -0,0 +1,80 @@
+import { Card, CardContent, CardHeader, CardFooter } from '@/components/ui/card';
+import { ResetPasswordSchema } from '@/data/form';
+import { Field, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator } from '@/components/ui/field';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useState, useCallback } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import { PageRouting } from '@/data/RoutingData';
+import * as z from 'zod';
+import { Separator } from '@/components/ui/separator';
+import { Label } from '@/components/ui/label';
+
+export default function ResetPasswordPage() {
+  const navigate = useNavigate();
+
+  const loginForm = useForm<z.infer<typeof ResetPasswordSchema>>({
+    resolver: zodResolver(ResetPasswordSchema),
+    defaultValues: {
+      email: "",
+      resetCode: ""
+    }
+  });
+
+  const moveToLoginPage = useCallback(() => {
+    navigate(PageRouting["LOGIN"].path);
+  }, []);
+
+  return (
+    <div className="w-full h-full flex flex-col justify-center items-center">
+      <Card className="w-md pl-2 pr-2">
+        <CardHeader>
+          비밀번호 초기화
+        </CardHeader>
+        <CardContent>
+          <form id="form-reset-password" className="w-full flex flex-col gap-2.5">
+            <Controller
+              name="email"
+              control={loginForm.control}
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="form-reset-password-email">이메일</FieldLabel>
+                  <Input
+                    {...field}
+                    type="email"
+                    id="form-reset-password-email"
+                    aria-invalid={fieldState.invalid}
+                  />
+                  <FieldError errors={[fieldState.error]} />
+                </Field>
+              )}
+            >
+            </Controller>
+          </form>
+        </CardContent>
+        <CardFooter
+          className="w-full flex flex-row items-center gap-5"
+        >
+          <Button 
+            className="flex-8 bg-indigo-500 hover:bg-indigo-400"
+            type="submit"
+            form="form-reset-password"
+            disabled={
+              (loginForm.getValues("email").trim.length < 1)
+              && (loginForm.getValues("resetCode").trim.length < 1)
+            }>
+            인증 번호 발송
+          </Button>
+          <Button
+            className="flex-1 bg-stone-300 text-white hover:bg-stone-400"
+            onClick={moveToLoginPage}
+          >
+            취소
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}