✨ feat: login API 연동 #4

FE/src/components/Login/Input.tsx

@@ -1,16 +1,12 @@
-import { HTMLInputTypeAttribute } from 'react';
+import { ComponentProps } from 'react';
 
-type LoginInputProps = {
-  type: HTMLInputTypeAttribute;
-  placeholder: string;
-};
+type LoginInputProps = ComponentProps<'input'>;
 
-export default function Input({ type, placeholder }: LoginInputProps) {
+export default function Input({ ...props }: LoginInputProps) {
   return (
     <input
       className='px-4 py-2 text-sm border-2 rounded-lg outline-none'
-      type={type}
-      placeholder={placeholder}
+      {...props}
     />
   );
 }

FE/src/components/Login/index.tsx

@@ -1,30 +1,57 @@
 import useLoginModalStore from 'store/useLoginModalStore';
 import Input from './Input';
 import { ChatBubbleOvalLeftIcon } from '@heroicons/react/16/solid';
+import { FormEvent, useState } from 'react';
+import { login } from 'service/auth';
 
 export default function Login() {
   const { isOpen, toggleModal } = useLoginModalStore();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
 
   if (!isOpen) return;
 
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const res = await login(email, password);
+
+    if ('error' in res) {
+      return;
+    }
+
+    console.log(res);
+  };
+
   return (
     <>
       <Overay onClick={() => toggleModal()} />
       <section className='fixed left-1/2 top-1/2 flex w-[500px] -translate-x-1/2 -translate-y-1/2 flex-col rounded-2xl bg-white p-20 shadow-lg'>
         <h2 className='text-3xl font-bold'>JuGa</h2>
-        <div className='flex flex-col gap-2 my-10'>
-          <Input type='text' placeholder='아이디' />
-          <Input type='password' placeholder='비밀번호' />
-        </div>
-        <div className='flex flex-col gap-2'>
+        <form className='flex flex-col mb-2' onSubmit={handleSubmit}>
+          <div className='flex flex-col gap-2 my-10'>
+            <Input
+              type='text'
+              placeholder='아이디'
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              autoComplete='username'
+            />
+            <Input
+              type='password'
+              placeholder='비밀번호'
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              autoComplete='current-password'
+            />
+          </div>
           <button className='py-2 text-white transition rounded-3xl bg-juga-blue-40 hover:bg-juga-blue-50'>
             로그인
           </button>
-          <button className='flex items-center justify-center gap-2 rounded-3xl bg-yellow-300 px-3.5 py-2 transition hover:bg-yellow-400'>
-            <ChatBubbleOvalLeftIcon className='size-5' />
-            <p>카카오 계정으로 로그인</p>
-          </button>
-        </div>
+        </form>
+        <button className='flex items-center justify-center gap-2 rounded-3xl bg-yellow-300 px-3.5 py-2 transition hover:bg-yellow-400'>
+          <ChatBubbleOvalLeftIcon className='size-5' />
+          <p>카카오 계정으로 로그인</p>
+        </button>
       </section>
     </>
   );

FE/src/service/auth.ts

@@ -0,0 +1,15 @@
+import { LoginFailResponse, LoginSuccessResponse } from 'types';
+
+export async function login(
+  email: string,
+  password: string,
+): Promise<LoginSuccessResponse | LoginFailResponse> {
+  return fetch('http://223.130.151.42:3000/auth/login', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      email,
+      password,
+    }),
+  }).then((res) => res.json());
+}

FE/src/types.ts

@@ -0,0 +1,9 @@
+export type LoginSuccessResponse = {
+  accessToken: string;
+};
+
+export type LoginFailResponse = {
+  error: string;
+  message: string[];
+  statusCode: number;
+};