Merge branch 'develop' into Feat/159/CrewReview

Author: HaeJungg

.storybook/preview.tsx

@@ -24,3 +24,9 @@ export const decorators = [
   (renderStory: any) => <ColorSchemeWrapper>{renderStory()}</ColorSchemeWrapper>,
   (renderStory: any) => <MantineProvider>{renderStory()}</MantineProvider>,
 ];
+
+export const parameters = {
+  nextjs: {
+    appDirectory: true,
+  },
+};

src/_queries/auth/reissue-queries.ts

@@ -1,9 +1,9 @@
 import { useQuery } from '@tanstack/react-query';
 import { getUser } from '@/src/_apis/auth/user-apis';
-import { authStore } from '@/src/store/use-auth-store';
+import { useAuthStore } from '@/src/store/use-auth-store';
 
 export function useUser() {
-  const { token } = authStore.getState();
+  const token = useAuthStore((state) => state.token);
   return useQuery({
     queryKey: ['user'],
     queryFn: getUser,

src/_queries/auth/user-queries.ts

@@ -1,14 +1,18 @@
 'use client';
 
 import { ReactNode, useState } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
 import { QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental';
 import { reissue } from '../_apis/auth/reissue-apis';
 import { useAuthStore } from '../store/use-auth-store';
+import { ApiError } from '../utils/api';
 
 export default function ClientProvider({ children }: { children: ReactNode }) {
   const setToken = useAuthStore((state) => state.setToken);
+  const redirect = usePathname();
+  const router = useRouter();
 
   const [queryClient] = useState(
     () =>
@@ -25,16 +29,22 @@ export default function ClientProvider({ children }: { children: ReactNode }) {
             },
           },
         },
-        // accessToken 에러 -> reissue() -> refetch()
         queryCache: new QueryCache({
           onError: async (error, query) => {
-            if (error.message === '토큰이 올바르지 않습니다.') {
-              const { token } = await reissue();
-              if (token) setToken(token.replace(/^Bearer\s/, ''));
-              await Promise.all([
-                queryClient.refetchQueries({ queryKey: query.queryKey }),
-                queryClient.refetchQueries({ queryKey: ['user'] }),
-              ]);
+            const apiError = error as ApiError;
+            if (apiError.status === 401) {
+              try {
+                const { token } = await reissue();
+                if (token) {
+                  setToken(token.replace(/^Bearer\s/, ''));
+                  await Promise.all([
+                    queryClient.refetchQueries({ queryKey: query.queryKey }),
+                    queryClient.refetchQueries({ queryKey: ['user'] }),
+                  ]);
+                }
+              } catch {
+                router.push(`/login?redirect=${redirect}`);
+              }
             }
           },
         }),

src/components/client-provider.tsx

@@ -28,14 +28,13 @@ export default function ScheduledGatheringCardPresenter({
         tabIndex={0}
         className="h-80 cursor-pointer items-center rounded-xl bg-white shadow-xs md:flex md:h-44"
       >
-        {/* Image Section */}
-        <div className="relative h-28 w-28 flex-shrink-0 overflow-hidden rounded-lg md:h-32 md:w-32 lg:h-32 lg:w-32">
+        <div className="relative h-1/2 w-full flex-shrink-0 overflow-hidden rounded-t-lg md:h-full md:w-1/3 md:rounded-l-lg md:rounded-r-none">
           <Image
             src={imageUrl}
             alt={title}
             fill
             sizes="(max-width: 744px) 100vw, (max-width: 1200px) 50vw, 33vw"
-            className="h-full w-full object-cover"
+            className="object-cover"
           />
         </div>
         <div className="flex h-1/2 w-full min-w-0 flex-grow flex-col justify-between p-4 md:h-full">