issue #37

- 기능 구현 1차 완료(동작 확인 필요)

src/ui/page/account/login/LoginPage.tsx

@@ -0,0 +1,177 @@
+import { Card, CardContent, CardHeader, CardFooter } from '@/components/ui/card';
+import { LoginSchema } from '@/data/form';
+import { Field, FieldError, FieldLabel } from '@/components/ui/field';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useCallback, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import { PageRouting } from '@/const/PageRouting';
+import * as z from 'zod';
+import { Separator } from '@/components/ui/separator';
+import { Validator } from '@/util/Validator';
+import { LoginRequest } from '@/data/request/account/LoginRequest';
+import { AccountNetwork } from '@/network/AccountNetwork';
+import { toast } from 'sonner';
+import { useAuthStore } from '@/store/authStore';
+
+export default function LoginPage() {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const { login } = useAuthStore();
+  const navigate = useNavigate();
+  const accountNetwork = new AccountNetwork();
+  const loginForm = useForm<z.infer<typeof LoginSchema>>({
+    resolver: zodResolver(LoginSchema),
+    defaultValues: {
+      id: "",
+      password: ""
+    }
+  });
+  const { id, password } = { id: loginForm.watch('id'), password: loginForm.watch('password') };
+
+  const moveToSignUpPage = useCallback(() => {
+    navigate(PageRouting["SIGN_UP"].path);
+  }, []);
+
+  const moveToResetPasswordPage = useCallback(() => {
+    navigate(PageRouting["RESET_PASSWORD"].path);
+  }, []);
+
+  const moveToHomePage = useCallback(() => {
+    navigate(PageRouting["HOME"].path);
+  }, []);
+
+  // TODO 33 로그인 기능 구현
+  const reqLogin = async () => {
+    if (isLoading) return;
+    const type = Validator.isEmail(id) ? 'email' : 'accountId';
+
+    const data: LoginRequest = new LoginRequest(type, id, password);
+
+    setIsLoading(true);
+
+    const loginPromise = accountNetwork.login(data);
+
+    toast.promise<{ message?: string }>(
+      () => new Promise(async (resolve, reject) => {
+        try {
+          loginPromise.then((res) => {
+            if (res.data.success) {
+              resolve({message: ''});
+            } else {
+              reject(res.data.message);
+            }
+          })
+        } catch (err) {
+          reject ("서버 에러 발생");
+        }
+      }),
+      {
+        loading: "로그인 중입니다.",
+        success: "로그인이 완료되었습니다.",
+        error: (err) => `${err}`
+      }
+    );
+
+    loginPromise
+    .then((res) => {
+      if (res.data.success) {
+        const data = {
+          accessToken: res.data.accessToken!,
+          refreshToken: res.data.refreshToken!
+        }
+        login({ ...data });
+        moveToHomePage();
+      }
+    })
+    .finally(() => setIsLoading(false));
+  }
+
+  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">
+        <CardHeader>
+          로그인
+        </CardHeader>
+        <CardContent>
+          <form id="form-login" className="w-full flex flex-col gap-2.5">
+            <Controller
+              name="id"
+              control={loginForm.control}
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="form-login-id">아이디 또는 이메일</FieldLabel>
+                  <Input
+                    {...field}
+                    type="text"
+                    id="form-login-id"
+                    aria-invalid={fieldState.invalid}
+                  />
+                  <FieldError errors={[fieldState.error]} />
+                </Field>
+              )}
+            >
+            </Controller>
+            <Controller
+              name="password"
+              control={loginForm.control}
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <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}
+                      type="button"
+                    >
+                      비밀번호를 잊으셨습니까?
+                    </Button>
+                  </div>
+                  <Input
+                    {...field}
+                    type="password"
+                    id="form-login-password"
+                    aria-invalid={fieldState.invalid}
+                  />
+                  <FieldError errors={[fieldState.error]} />
+                </Field>
+              )}
+            >
+            </Controller>
+          </form>
+        </CardContent>
+        <CardFooter
+          className="w-full flex flex-col items-center gap-5"
+        >
+          <Button 
+            className="w-full bg-indigo-500 hover:bg-indigo-400"
+            type="button"
+            disabled={id.trim().length < 1 || password.trim().length < 1}
+            onClick={reqLogin}
+          >
+            로그인
+          </Button>
+          <TextSeparator text="또는" />
+          <Button
+            className="w-full text-violet-500 bg-white border border-violet-500 hover:bg-violet-500 hover:text-white"
+            type="button"
+            onClick={moveToSignUpPage}
+          >
+            회원가입
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}