✨ feat: 로그인 컴포넌트 구현

✨ feat: 로그인 컴포넌트 구현

src/apis/login.ts

@@ -0,0 +1,12 @@
+import axios from 'axios';
+
+interface ILoginPayload {
+  readonly roomId: string;
+  readonly id: string;
+  readonly pw: string;
+}
+
+// 유저 로그인을 위한 함수
+export const fetchLogin = async (loginPayload: ILoginPayload) => {
+  return axios.post('/api/auth/login', loginPayload);
+};

src/components/login.tsx

@@ -1,3 +1,83 @@
+import { useForm } from 'react-hook-form';
+import { useNavigate, useParams } from 'react-router-dom';
+import Button from './button';
+import { useState } from 'react';
+import { useSetAtom } from 'jotai';
+import { loginAtom } from '@/stores/login-state';
+import { useMutation } from '@tanstack/react-query';
+import { fetchLogin } from '@/apis/login';
+
+interface IForm {
+  id: string;
+  pw: string;
+}
+
 export default function Login() {
-  return <h1>로그인</h1>;
+  const { roomId } = useParams<{ roomId: string }>();
+  const [formLoading, setFormLoading] = useState(false);
+  const navigate = useNavigate();
+  const setLoginState = useSetAtom(loginAtom);
+  const { register, handleSubmit } = useForm<IForm>();
+
+  // 사용자 로그인을 위한 과정
+  const { mutate: userLogin } = useMutation({
+    mutationFn: fetchLogin,
+    onSuccess: (data: any) => {
+      localStorage.setItem('accessToken', data.accessToken);
+      localStorage.setItem('refreshToken', data.refreshToken);
+      setLoginState(true);
+      navigate(`/enter-location/${roomId}`);
+    },
+    onError: (error) => {
+      console.log('로그인 과정 에러', error);
+    },
+  });
+
+  const onSubmit = (data: IForm) => {
+    setFormLoading(true);
+
+    const { id, pw } = data;
+    if (roomId === undefined) {
+      alert('login.tsx roomId오류!');
+      setFormLoading(false);
+      return;
+    }
+
+    const payload = {
+      roomId,
+      id,
+      pw,
+    };
+
+    // 유저 로그인 요청
+    userLogin(payload);
+
+    setFormLoading(false);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 py-1 mb-6 overflow-auto">
+        <div className="px-1">
+          <div className="flex flex-col items-start justify-between w-full *:rounded-lg gap-3">
+            <span className="text-xl font-semibold">아이디</span>
+            <input
+              {...register('id')}
+              type="text"
+              placeholder="아이디를 입력하세요"
+              className="w-full transition bg-indigo-100 border-none ring-1 focus:ring-2 ring-indigo-100 focus:outline-none"
+            />
+            <span className="text-xl font-semibold">비밀번호</span>
+            <input
+              {...register('pw')}
+              type="password"
+              placeholder="비밀번호를 입력하세요"
+              className="w-full transition bg-indigo-100 border-none ring-1 focus:ring-2 ring-indigo-100 focus:outline-none"
+            />
+          </div>
+        </div>
+      </form>
+      <Button isLoading={formLoading} text="로그인" onClick={handleSubmit(onSubmit)} />
+    </>
+  );
 }

src/pages/location-each.tsx

@@ -9,6 +9,8 @@ export default function LocationEach() {
   // const { roomId } = useParams<{ roomId: string }>();
   const isLogin = useAtomValue(loginAtom); // 로그인 여부 확인을 위한 변수
 
+  // 유효하지 않은 방번호에 대한 접근인 경우 <NotFound/>컴포넌트를 return한다.
+
   // 장소 입력 방에 저장된 사람들의 정보 가져오기
   // const { data: usersData, isLoading: usersLoading } = useQuery({
   //   queryKey: ['placeRoomUsers', roomId],
@@ -44,13 +46,11 @@ export default function LocationEach() {
   //   return <Loading />;
   // }
 
-  // 유효하지 않은 방번호에 대한 접근인 경우 <NotFound/>컴포넌트를 return한다.
-
   return (
     <>
       <div className="flex w-full gap-20 min-w-[1024px] justify-center mt-20">
         <div className="w-[45%] min-w-[540px] h-96 flex flex-col gap-3">
-          {!isLogin ? <LocationEachForm /> : <Login />}
+          {isLogin ? <LocationEachForm /> : <Login />}
         </div>
         <div className="w-[38%] rounded-xl h-[500px] -mt-8 shadow-lg">
           <KakaoMap addresses={addressList} />