Merge pull request #91 from part3-4team-Taskify/feature/Login

[Feat, Refactor] login: 로그인 요청, token 저장 기능 추가 / 공통 상수 폴더 추가

Author: rover1523

package-lock.json

@@ -18,7 +18,8 @@
     "react": "^19.0.0",
     "react-datetime": "^3.3.1",
     "react-dom": "^19.0.0",
-    "react-hook-form": "^7.54.2"
+    "react-hook-form": "^7.54.2",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

package.json

@@ -12,4 +12,13 @@ const axiosInstance = axios.create({
 axiosInstance.defaults.headers.common["Authorization"] =
   `Bearer ${process.env.NEXT_PUBLIC_API_TOKEN}`;
 
+// 👉 요청 보낼 때마다 토큰 자동 추가
+axiosInstance.interceptors.request.use((config) => {
+  const token = localStorage.getItem("accessToken");
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
 export default axiosInstance;

src/api/axiosInstance.ts

@@ -1,7 +1,7 @@
-import axios from "axios";
+import axiosInstance from "./axiosInstance";
 import { MemberType } from "@/types/users";
 
-interface ApiResponse {
+interface MembersResponse {
   members: MemberType[]; // 실제 데이터
   totalCount: number;
 }
@@ -11,21 +11,11 @@ export const getMembers = async (dashboardId?: string | string[]) => {
     console.error("dashboardID가 없습니다.");
     return [];
   }
-
-  const token = process.env.NEXT_PUBLIC_API_TOKEN;
-  const numericDashboardId =
+  const dashboardIdNum =
     typeof dashboardId === "string" ? Number(dashboardId) : undefined;
 
-  const response = await axios.get<ApiResponse>(
-    `${process.env.NEXT_PUBLIC_BASE_URL}13-4/members`,
-    {
-      params: {
-        dashboardId: numericDashboardId,
-      },
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    }
+  const response = await axiosInstance.get<MembersResponse>(
+    `https://sp-taskify-api.vercel.app/13-4/members?page=1&size=20&dashboardId=${dashboardIdNum}`
   );
 
   return response.data.members || [];

src/api/members.ts

@@ -1,4 +1,4 @@
-import axios from "axios";
+import axiosInstance from "./axiosInstance";
 
 interface UserResponse {
   id: number;
@@ -9,17 +9,7 @@ interface UserResponse {
   updatedAt: string;
 }
 
-export const getUserInfo = async () => {
-  const token = process.env.NEXT_PUBLIC_API_TOKEN;
-
-  const response = await axios.get<UserResponse>(
-    `https://sp-taskify-api.vercel.app/13-4/users/me`,
-    {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    }
-  );
-
-  return response.data || [];
+export const getUserInfo = async ({ teamId }: { teamId: string }) => {
+  const response = await axiosInstance.get<UserResponse>(`/${teamId}/users/me`);
+  return response.data;
 };

src/api/user.ts

@@ -0,0 +1 @@
+export const TEAM_ID = "13-4";

src/constants/team.ts

@@ -1,32 +1,70 @@
 import { useState } from "react";
-import Input from "@/components/input/Input";
+import { useRouter } from "next/router";
+import { getUserInfo } from "@/api/user";
+import useUserStore from "@/store/useUserStore";
+import axiosInstance from "@/api/axiosInstance";
 import Link from "next/link";
+import Input from "@/components/input/Input";
+import { TEAM_ID } from "@/constants/team";
 
 export default function LoginPage() {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
+  const router = useRouter();
+  const [values, setValues] = useState({
+    email: "",
+    password: "",
+  });
+  const isFormValid = Object.values(values).every((v) => v.trim() !== "");
+
+  const handleChange = (name: string) => (value: string) => {
+    setValues((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const { email, password } = values;
+    try {
+      const response = await axiosInstance.post(`${TEAM_ID}/auth/login`, {
+        email,
+        password,
+      });
+
+      const token = response.data.accessToken;
+      localStorage.setItem("accessToken", token);
+
+      const userData = await getUserInfo({ teamId: TEAM_ID }); // 로그인 성공 후 사용자 정보 요청
+      useUserStore.getState().setUser(userData); // Zustand에 저장
 
-  const isFormValid = email.trim() !== "" && password.trim() !== "";
+      router.push("/mydashboard");
+    } catch (error) {
+      console.error("로그인 실패:", error);
+      alert("로그인에 실패했습니다.");
+    }
+  };
 
   return (
     <div className="flex flex-col items-center justify-center h-screen bg-[var(--color-gray5)] py-10">
       <div className="text-center mb-[40px]">
         <img
           src="/svgs/main-logo.svg"
           alt="태스키파이 로고 이미지"
-          className="w-[200px] h-[280px] relative"
+          className="w-[200px] h-[280px]"
         />
         <p className="font-20m text-black3">오늘도 만나서 반가워요!</p>
       </div>
 
-      <form className="flex flex-col w-[350px] md:w-[520px] gap-[20px] font-16r text-black3">
+      <form
+        onSubmit={handleSubmit}
+        className="flex flex-col w-[350px] md:w-[520px] gap-[20px] font-16r text-black3"
+      >
         <Input
           type="email"
           name="email"
           label="이메일"
           placeholder="이메일을 입력해 주세요"
-          onChange={setEmail}
-          pattern="^[\w.-]+@[\w.-]+\.\w{2,}$"
+          onChange={handleChange("email")}
           invalidMessage="올바른 이메일 주소를 입력해 주세요"
         />
 
@@ -35,7 +73,7 @@ export default function LoginPage() {
           name="password"
           label="비밀번호"
           placeholder="비밀번호를 입력해 주세요"
-          onChange={setPassword}
+          onChange={handleChange("password")}
           pattern=".{8,}"
           invalidMessage="비밀번호는 8자 이상이어야 해요"
         />

src/pages/login.tsx

@@ -0,0 +1,22 @@
+import { create } from "zustand";
+
+interface UserInfo {
+  id: number;
+  email: string;
+  nickname: string;
+  profileImageUrl: string;
+}
+
+interface UserState {
+  user: UserInfo | null;
+  setUser: (user: UserInfo) => void;
+  clearUser: () => void;
+}
+
+const useUserStore = create<UserState>((set) => ({
+  user: null,
+  setUser: (user) => set({ user }),
+  clearUser: () => set({ user: null }),
+}));
+
+export default useUserStore;