diff --git a/src/apis/login.ts b/src/apis/login.ts
new file mode 100644
index 0000000..c879e9a
--- /dev/null
+++ b/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);
+};
diff --git a/src/components/login.tsx b/src/components/login.tsx
index cfe85b4..a07359d 100644
--- a/src/components/login.tsx
+++ b/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
로그인
;
+ const { roomId } = useParams<{ roomId: string }>();
+ const [formLoading, setFormLoading] = useState(false);
+ const navigate = useNavigate();
+ const setLoginState = useSetAtom(loginAtom);
+ const { register, handleSubmit } = useForm();
+
+ // 사용자 로그인을 위한 과정
+ 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 (
+ <>
+
+
+ >
+ );
}
diff --git a/src/pages/location-each.tsx b/src/pages/location-each.tsx
index 26b7390..8478943 100644
--- a/src/pages/location-each.tsx
+++ b/src/pages/location-each.tsx
@@ -9,6 +9,8 @@ export default function LocationEach() {
// const { roomId } = useParams<{ roomId: string }>();
const isLogin = useAtomValue(loginAtom); // 로그인 여부 확인을 위한 변수
+ // 유효하지 않은 방번호에 대한 접근인 경우 컴포넌트를 return한다.
+
// 장소 입력 방에 저장된 사람들의 정보 가져오기
// const { data: usersData, isLoading: usersLoading } = useQuery({
// queryKey: ['placeRoomUsers', roomId],
@@ -44,13 +46,11 @@ export default function LocationEach() {
// return ;
// }
- // 유효하지 않은 방번호에 대한 접근인 경우 컴포넌트를 return한다.
-
return (
<>
- {!isLogin ? : }
+ {isLogin ? : }