Merge pull request #190 from DguFarmSystem/feat/#186

feat: accessToken을 localStorage 대신 Zustand 상태로 관리하도록 변경

Author: dewbeeny

apps/farminglog/src/pages/auth/SocialRedirect.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useRef, useEffect, useMemo } from "react";
 import { useNavigate, useSearchParams } from "react-router";
 import { useSocialLoginPostMutation } from "@repo/auth/services/mutation/useSocialLoginPostMutation";
 
@@ -7,42 +7,58 @@ export default function SocialRedirect() {
   const navigate = useNavigate();
   const { mutate: login, status } = useSocialLoginPostMutation();
 
-
   const isLoading = status === "pending";
 
-  useEffect(() => {
-    const code = params.get("code");
-    const provider = (params.get("state") || params.get("provider"))?.toUpperCase() as "KAKAO" | "GOOGLE";
+    const isCalled = useRef(false); // 한 번만 호출되도록
+
+
+  const code = useMemo(() => params.get("code"), [params]);
+  const provider = useMemo(() => {
+    const raw = params.get("state") || params.get("provider");
+    return raw?.toUpperCase() as "KAKAO" | "GOOGLE" | undefined;
+  }, [params]);
 
+  useEffect(() => {
     if (!code || (provider !== "KAKAO" && provider !== "GOOGLE")) {
-      console.error("소셜 로그인 파라미터 누락 또는 잘못됨");
+      // console.error("소셜 로그인 파라미터 누락 또는 잘못됨");
       navigate("/?error=invalid_params");
       return;
     }
 
+    isCalled.current = true;
+
     login(
       { code, socialType: provider },
       {
         onSuccess: () => {
           navigate("/home");
         },
-       onError: (error: any) => {
-  const status = error?.response?.status;
-
-  if (status === 404) {
-    navigate("/?status=not-member&type=404", { replace: true });
-  } else if (status === 409) {
-    navigate("/?status=not-member&type=409", { replace: true });
-  } else if (status === 500) {
-    navigate("/?status=not-member&type=500", { replace: true });
-  } else {
-    navigate("/?error=unknown", { replace: true });
-  }
-},
+        onError: (error: any) => {
+          const status = error?.response?.status;
+          // console.error("소셜 로그인 에러:", error);
 
+          if (!status) {
+            navigate("/?error=network_or_unknown", { replace: true });
+            return;
+          }
+
+          switch (status) {
+            case 404:
+              navigate("/?error=not-found", { replace: true });
+              break;
+            case 409:
+              navigate("/?error=conflict", { replace: true });
+              break;
+            case 500:
+              navigate("/?error=server-error", { replace: true });
+              break;
+            default:
+              navigate("/?error=unknown", { replace: true });
+          }
+        },
       }
     );
-  }, [params, login, navigate]);
+  }, [code, provider, login, navigate]); 
 
   return (
     <div style={{ textAlign: "center", marginTop: "4rem" }}>

packages/api/utils/getClientSideTokens.ts

@@ -1,8 +1,12 @@
 import Cookies from "js-cookie";
+import { useAuthStore } from "../../auth/stores/useAuthStore"; 
 
 export const getClientSideTokens = () => {
+  const accessToken = useAuthStore.getState().accessToken; 
+  const refreshToken = Cookies.get("refreshToken") || "";
+
   return {
-    accessToken: localStorage.getItem("accessToken") || "",
-    refreshToken: Cookies.get("refreshToken") || "",
+    accessToken: accessToken || "",
+    refreshToken,
   };
 };

packages/auth/services/mutation/useSocialLoginPostMutation.ts

@@ -15,24 +15,25 @@ interface TokenResponse {
 
 export const useSocialLoginPostMutation = () => {
   const { post } = usePublicApi();
-const { studentId, setToken } = useAuthStore();
+  const studentId = useAuthStore((state) => state.studentId);
+  const setToken = useAuthStore((state) => state.setToken);
 
   const mutation = useMutation<TokenResponse, Error, SocialLoginRequest>({
     mutationFn: async ({ code, socialType }) => {
-
       const { data, status } = await post<TokenResponse>("/auth/login", {
         code,
         socialType,
-        studentNumber: studentId, 
+        studentNumber: studentId,
       });
 
       if (status !== 200) throw new Error("로그인 실패");
 
       const { accessToken, refreshToken } = data;
 
-          setToken(accessToken);
-          
+      setToken(accessToken); // 여기서 더 이상 에러 안 남
+      
       //refreshToken: js-cookie 저장 (HttpOnly 아니여서 추후에 보안 조치 필요)
+
       Cookies.set("refreshToken", refreshToken, {
         secure: true,
         sameSite: "Strict",

packages/auth/stores/useAuthStore.ts

@@ -1,5 +1,5 @@
 import { create } from 'zustand';
-import { persist, combine } from 'zustand/middleware';
+import { combine } from 'zustand/middleware';
 
 type AuthStep =
   | 'start'
@@ -14,37 +14,36 @@ interface AuthState {
   studentId: string;
   userName: string;
   errorMessage: string | null;
-  errorTitle: string | null; 
+  errorTitle: string | null;
+  accessToken?: string;
 }
 
 export const useAuthStore = create(
-  persist(
-    combine<AuthState, any>(
-      {
-        step: 'start',
-        studentId: '',
-        userName: '',
-        errorMessage: null,
-        errorTitle: null,
-      },
-      (set) => ({
-        setStep: (step: AuthStep) => set({ step }),
-        setStudentId: (studentId: string) => set({ studentId }),
-        setUserName: (userName: string) => set({ userName }),
-        setErrorMessage: (msg: string | null) => set({ errorMessage: msg }),
-        setErrorTitle: (title: string | null) => set({ errorTitle: title }),
-        reset: () =>
-          set({
-            step: 'start',
-            studentId: '',
-            userName: '',
-            errorMessage: null,
-          }),
-      })
-    ),
+  combine<AuthState, any>(
     {
-      name: 'auth-storage', 
-      partialize: (state) => ({ studentId: state.studentId }), 
-    }
+      step: 'start',
+      studentId: '',
+      userName: '',
+      errorMessage: null,
+      errorTitle: null,
+      accessToken: undefined,
+    },
+    (set) => ({
+      setStep: (step: AuthStep) => set({ step }),
+      setStudentId: (studentId: string) => set({ studentId }),
+      setUserName: (userName: string) => set({ userName }),
+      setErrorMessage: (msg: string | null) => set({ errorMessage: msg }),
+      setErrorTitle: (title: string | null) => set({ errorTitle: title }),
+      setToken: (token: string) => set({ accessToken: token }),
+      reset: () =>
+        set({
+          step: 'start',
+          studentId: '',
+          userName: '',
+          errorMessage: null,
+          errorTitle: null,
+          accessToken: undefined,
+        }),
+    })
   )
 );