Merge pull request #59 from codeit9-temporary/feature/AuthStore

Feat: AuthStore 구현

Author: venise5224

components/HeaderMenu.tsx

@@ -4,9 +4,10 @@ import Star from "@/public/icons/star.png";
 import Link from "next/link";
 import SubmitButton from "./SubMitButton";
 import { useRouter } from "next/router";
+import useAuthStore from "@/store/useAuthStore";
 
 const HeaderMenu = () => {
-  const isLoggedIn = false;
+  const { user, isLoggedIn } = useAuthStore();
   const router = useRouter();
 
   return (
@@ -40,8 +41,7 @@ const HeaderMenu = () => {
           </Link>
           <div className="flex items-center gap-[6px] text-[14px] leading-[16.71px] font-normal">
             <Image src={Profile} width={28} height={28} alt="프로필" />
-            {/* 임시 유저 네임 */}
-            <span className="hidden md:block lg:block">전상민</span>
+            <span className="hidden md:block lg:block">{user?.name}</span>
           </div>
         </div>
       )}

hooks/useForm.tsx

@@ -1,6 +1,7 @@
 import { useState, ChangeEvent, FormEvent } from "react";
 import { useRouter } from "next/router";
 import { postSignIn, postSignUp } from "@/lib/api/auth";
+import useAuthStore from "@/store/useAuthStore";
 import { TbWashDryP } from "react-icons/tb";
 
 interface FormValues {
@@ -21,6 +22,7 @@ const useForm = (isSignUp = false) => {
   const [values, setValues] = useState<FormValues>(INITIAL_VALUES);
   const [errors, setErrors] = useState<FormValues>(INITIAL_VALUES);
   const router = useRouter();
+  const { login } = useAuthStore();
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
@@ -92,7 +94,7 @@ const useForm = (isSignUp = false) => {
         alert("회원가입 실패: 이메일 또는 비밀번호를 확인해주세요.");
       }
     } else {
-      const data = await postSignIn({ email, password });
+      const data = await login({ email, password });
 
       if (data) {
         router.push("/");

lib/api/auth.ts

@@ -1,6 +1,6 @@
 import axiosInstance, { proxy } from "./axiosInstanceApi";
 
-interface signInProps {
+export interface signInProps {
   email: string;
   password: string;
 }
@@ -9,7 +9,7 @@ interface signUpProps extends signInProps {
   name: string;
 }
 
-interface easySignInProps {
+export interface easySignInProps {
   token: string;
   redirectUri: string;
 }

pages/api/users/index.ts

@@ -0,0 +1,28 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import { parse } from "cookie";
+import axiosInstance from "@/lib/api/axiosInstanceApi";
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  const cookies = parse(req.headers.cookie || "");
+  const accessToken = cookies.accessToken;
+
+  switch (req.method) {
+    case "GET":
+      // 현재 유저 조회
+      try {
+        const response = await axiosInstance.get(`/users`, {
+          headers: { Authorization: `Bearer ${accessToken}` },
+        });
+        return res.status(200).json(response.data);
+      } catch (err) {
+        console.error(err);
+        return res.status(500).json({ message: "프로필 조회에 실패했습니다." });
+      }
+
+    default:
+      res.setHeader("Allow", ["GET"]);
+      return res.status(405).end(`메서드 ${req.method}는 허용되지 않습니다.`);
+  }
+};
+
+export default handler;

store/useAuthStore.tsx

@@ -0,0 +1,70 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { User } from "@/types/AuthTypes";
+import {
+  postSignIn,
+  signInProps,
+  easySignInProps,
+  postEasySignIn,
+} from "@/lib/api/auth";
+import { getUserInfo } from "@/lib/api/user";
+
+interface AuthStore {
+  user: User | null;
+  isLoggedIn: boolean;
+  login: (body: signInProps) => Promise<boolean>;
+  SNSLogin: (
+    provider: "google" | "kakao",
+    body: easySignInProps
+  ) => Promise<boolean>;
+  logout: () => void;
+}
+
+const useAuthStore = create<AuthStore>()(
+  persist(
+    (set) => ({
+      user: null,
+      isLoggedIn: false,
+
+      login: async (body) => {
+        try {
+          const { email, password } = body;
+          const response = await postSignIn({ email, password });
+          if (response) {
+            const userInfo = await getUserInfo();
+            if (userInfo) {
+              set({ isLoggedIn: true, user: userInfo });
+              return true;
+            }
+          }
+        } catch (error) {
+          console.error("로그인 중 에러가 발생했습니다", error);
+        }
+        return false;
+      },
+
+      SNSLogin: async (provider, body) => {
+        try {
+          const response = await postEasySignIn(provider, body);
+          if (response) {
+            const userInfo = await getUserInfo();
+            if (userInfo) {
+              set({ isLoggedIn: true, user: userInfo });
+              return true;
+            }
+          }
+        } catch (error) {
+          console.error("소셜 로그인 중 에러가 발생했습니다.", error);
+        }
+        return false;
+      },
+
+      logout: () => set({ user: null, isLoggedIn: false }),
+    }),
+    {
+      name: "auth-storage",
+    }
+  )
+);
+
+export default useAuthStore;

types/AuthTypes.ts

@@ -0,0 +1,7 @@
+export interface User {
+  id: number;
+  name: string;
+  imageSource: string;
+  email: string;
+  createdAt: string;
+}