fix: refreshToken 만료 시 UI 동기화되지 않는 이슈 해결

src/apis/api.ts

@@ -1,3 +1,4 @@
+import { useAuthStore } from "@/store/auth-store";
 import axios, { AxiosError } from "axios";
 
 const api = axios.create({
@@ -63,6 +64,7 @@ api.interceptors.response.use(
         if (!errorResponse) return Promise.reject(error);
 
         if (errorResponse.code === "REFRESH_TOKEN_NOT_FOUND") {
+          useAuthStore.getState().setSignedOut();
           console.clear();
         }
 

src/apis/auth/mutation/use-sign-in.ts

@@ -1,10 +1,17 @@
+import { useAuthStore } from "@/store/auth-store";
 import { SignInRequest } from "@/types/auth";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { signInUser } from "../auth.api";
 
 const useSignIn = () => {
+  const queryClient = useQueryClient();
+
   return useMutation({
     mutationFn: (data: SignInRequest) => signInUser(data),
+    onMutate: async () => {
+      queryClient.clear();
+    },
+    onSuccess: () => useAuthStore.getState().setSignedIn(),
   });
 };
 

src/apis/auth/mutation/use-sign-out.ts

@@ -3,6 +3,7 @@ import queryKeys from "@/apis/query-keys";
 import { useToastStore } from "@/store/toast-store";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 
+import { useAuthStore } from "@/store/auth-store";
 import { useRouter } from "next/navigation";
 import { signOutUser } from "../auth.api";
 
@@ -15,7 +16,7 @@ const useSignOut = () => {
     mutationFn: () => signOutUser(),
     onSuccess: () => {
       queryClient.removeQueries({ queryKey: queryKeys.user.all });
-
+      useAuthStore.getState().setSignedOut();
       router.push("/");
 
       toast({

src/components/section/gathering/detail/sidebar.tsx

@@ -2,7 +2,6 @@
 
 import useJoinGathering from "@/apis/gathering/mutation/use-join-gathering";
 import useLeaveGathering from "@/apis/gathering/mutation/use-leave-gathering";
-import useGetUserInfo from "@/apis/user/query/use-get-user-info";
 import { Information } from "@/components/section";
 import { Button, UpdateGatheringModal } from "@/components/ui";
 import LikeButton from "@/components/ui/button/like-button";
@@ -12,6 +11,7 @@ import {
   GATHERING_MODAL_MESSAGES,
 } from "@/constants/modal-message";
 import { GATHERING_SUCCESS_MESSAGES } from "@/constants/success-message";
+import { useAuthStore } from "@/store/auth-store";
 import { useModalStore } from "@/store/modal-store";
 import { useToastStore } from "@/store/toast-store";
 import type { GetGatheringDetailResponse } from "@/types/gathering";
@@ -38,7 +38,7 @@ const SideBar = ({ data, isOwner }: SideBarProps) => {
               size="size-9"
             />
             {isOwner ? (
-              <div className="flex items-center gap-5">
+              <div className="flex w-full items-center gap-5">
                 <CreateAppointmentModal
                   meetingId={data.meetingId}
                   trigger={
@@ -81,8 +81,7 @@ const JoinButton = ({ meetingId, disabled }: JoinButtonProps) => {
   const { alertModal } = useModalStore();
 
   const { mutate: joinGathering } = useJoinGathering();
-  const { data: user } = useGetUserInfo();
-  const isSignedIn = !!user;
+  const isSignedIn = useAuthStore((state) => state.authStatus);
 
   const handleClick = () => {
     if (!isSignedIn) {

src/components/ui/button/auth-status-button.tsx

@@ -2,6 +2,7 @@
 import useSignOut from "@/apis/auth/mutation/use-sign-out";
 import useGetUserInfo from "@/apis/user/query/use-get-user-info";
 import { Button, Dropdown, Profile } from "@/components/ui";
+import { useAuthStore } from "@/store/auth-store";
 import { cn } from "@/utils/cn";
 import { useRouter } from "next/navigation";
 
@@ -11,33 +12,35 @@ interface AuthStatusButtonProps {
 
 const AuthStatusButton = ({ className }: AuthStatusButtonProps) => {
   const { data: user } = useGetUserInfo();
-  const isSignedIn = !!user;
   const router = useRouter();
   const { mutate: signOut } = useSignOut();
+  const isSignedIn = useAuthStore((state) => state.authStatus);
 
   if (isSignedIn) {
     return (
-      <Dropdown
-        trigger={
-          <Profile
-            profileImageUrl={user?.profileImageUrl}
-            className={className}
-            size="sm"
-          />
-        }
-        items={[
-          {
-            text: "마이페이지",
-            onClick: () => router.push("/my-page"),
-          },
-          {
-            text: "로그아웃",
-            onClick: signOut,
-          },
-        ]}
-        itemClassName="hover:text-gray-neutral-700 text-gray-neutral-500 justify-center"
-        contentAlign="end"
-      />
+      user && (
+        <Dropdown
+          trigger={
+            <Profile
+              profileImageUrl={user?.profileImageUrl}
+              className={className}
+              size="sm"
+            />
+          }
+          items={[
+            {
+              text: "마이페이지",
+              onClick: () => router.push("/my-page"),
+            },
+            {
+              text: "로그아웃",
+              onClick: signOut,
+            },
+          ]}
+          itemClassName="hover:text-gray-neutral-700 text-gray-neutral-500 justify-center"
+          contentAlign="end"
+        />
+      )
     );
   } else {
     return (

src/components/ui/button/like-button.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import useGetUserInfo from "@/apis/user/query/use-get-user-info";
 import { HeartFill, HeartLine } from "@/assets/icons";
 import { AUTH_MODAL_MESSAGES } from "@/constants/modal-message";
+import { useAuthStore } from "@/store/auth-store";
 import { useModalStore } from "@/store/modal-store";
 import { cn } from "@/utils/cn";
 import { useRouter } from "next/navigation";
@@ -16,8 +16,7 @@ interface LikeButtonProps {
 const LikeButton = ({ liked, onClick, size }: LikeButtonProps) => {
   const router = useRouter();
   const { alertModal } = useModalStore();
-  const { data: user } = useGetUserInfo();
-  const isSignedIn = !!user;
+  const isSignedIn = useAuthStore((state) => state.authStatus);
 
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();

src/components/ui/modal/gathering/form/create-gathering-modal.tsx

@@ -7,6 +7,7 @@ import { Button, ModalWrapper } from "@/components/ui";
 import GatheringForm from "@/components/ui/modal/gathering/form/gathering-form";
 import { AUTH_MODAL_MESSAGES } from "@/constants/modal-message";
 import { GATHERING_SUCCESS_MESSAGES } from "@/constants/success-message";
+import { useAuthStore } from "@/store/auth-store";
 import { useModalStore } from "@/store/modal-store";
 import { useToastStore } from "@/store/toast-store";
 import { GatheringFormData, GatheringFormInput } from "@/types/gathering";
@@ -18,16 +19,15 @@ const CreateGathering = () => {
   const router = useRouter();
   const { toast } = useToastStore();
   const { alertModal } = useModalStore();
-
+  const { data: user } = useGetUserInfo();
   const [open, setOpen] = useState(false);
 
   const { mutate: createGathering, isPending: isLoading } =
     useCreateGathering();
-  const { data: user } = useGetUserInfo();
-  const isSignedIn = !!user;
+  const isSignedIn = useAuthStore((state) => state.authStatus);
 
   const handleOpenChange = (open: boolean) => {
-    if (open && !isSignedIn) {
+    if (open && !isSignedIn && user) {
       alertModal({
         ...AUTH_MODAL_MESSAGES.LOGIN_REQUIRED,
         onConfirm: () => {

src/components/ui/side-menu/side-menu.tsx

@@ -1,5 +1,6 @@
 import useSignOut from "@/apis/auth/mutation/use-sign-out";
 import useGetUserInfo from "@/apis/user/query/use-get-user-info";
+import { useAuthStore } from "@/store/auth-store";
 import useSideMenuStore from "@/store/side-menu-store";
 import { cn } from "@/utils/cn";
 import { useRouter } from "next/navigation";
@@ -10,7 +11,7 @@ const SideMenu = () => {
   const { data: user } = useGetUserInfo();
   const { isOpen, toggleSideMenu } = useSideMenuStore();
   const router = useRouter();
-  const isSignedIn = !!user;
+  const isSignedIn = useAuthStore((state) => state.authStatus);
   const { mutate: signOut } = useSignOut();
   useEffect(() => {
     if (isOpen) {
@@ -44,7 +45,7 @@ const SideMenu = () => {
       >
         <div className="flex flex-col gap-3">
           <div className="border-gray-neutral-100 flex items-center gap-[6px] border-b px-1 py-[14px]">
-            {isSignedIn && (
+            {user && (
               <Profile profileImageUrl={user.profileImageUrl} size="sm" />
             )}
             <div className="flex flex-col justify-between gap-0.5">

src/store/auth-store.ts

@@ -0,0 +1,24 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+type AuthState = {
+  authStatus: boolean;
+  setSignedIn: () => void;
+  setSignedOut: () => void;
+};
+
+export const useAuthStore = create<AuthState>()(
+  persist(
+    (set) => ({
+      authStatus: false,
+      setSignedIn: () => set({ authStatus: true }),
+      setSignedOut: () => set({ authStatus: false }),
+    }),
+    {
+      name: "auth-store",
+      partialize: (state) => ({
+        authStatus: state.authStatus,
+      }),
+    }
+  )
+);