Merge branch 'dev' into main

Author: six-standard

src/apis/instance.request.ts

@@ -79,19 +79,16 @@ export const instance = async <I, R>(
         ? AbortSignal.timeout(ABORT_MS)
         : abortPolyfill(ABORT_MS),
       credentials: 'include',
+      cache: 'no-store',
     });
 
     return (data.body as unknown as SuccessType<R>).data;
   } catch (err: unknown) {
     const context = err as Response;
-    if (
-      location &&
-      !context.ok &&
-      (context.status === 401 || context.status === 403)
-    ) {
+    if (location && !context.ok && context.status === 403) {
       window.location.replace('/');
     }
-
+    //context.status === 401 ||
     setContext('Request', {
       path: context.url,
       status: context.status,

src/app/(with-tracker)/(auth-required)/layout.tsx

@@ -4,6 +4,7 @@ import { Header } from '@/components';
 import { PATHS } from '@/constants';
 import { me } from '@/apis';
 import { getQueryClient } from '@/utils/queryUtil';
+import { Header } from '@/components';
 
 interface IProp {
   children: ReactElement;

src/app/(with-tracker)/(auth-required)/leaderboards/Content.tsx

@@ -16,7 +16,7 @@ const data = [
 
 export const Content = () => {
   const width = useResponsive();
-  const { setSearchParams } = useSearchParam();
+  const [, setSearchParams] = useSearchParam();
 
   return (
     <div className="flex w-full h-full flex-col gap-[30px] overflow-auto items-center max-TBL:gap-5">

src/app/(with-tracker)/(auth-required)/main/Content.tsx

@@ -3,27 +3,23 @@
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
-import {
-  Button,
-  Dropdown,
-  Section,
-  Summary,
-  Check,
-  OptionType,
-} from '@/components';
+import { Button, Dropdown, Section, Summary, Check } from '@/components';
 import { postList, postSummary } from '@/apis';
-import { PATHS } from '@/constants';
+import { PATHS, SORT_TYPE } from '@/constants';
 import { useSearchParam } from '@/hooks/useSearchParam';
 import { trackUserEvent, MessageEnum } from '@/utils/trackUtil';
+import { SortKey, SortValue } from '@/types';
 
-const sorts: Array<OptionType> = [
-  ['작성일순', ''],
-  ['조회순', 'dailyViewCount'],
-  ['좋아요순', 'dailyLikeCount'],
-];
+const sorts: Array<[SortKey, SortValue]> = Object.entries(SORT_TYPE) as Array<
+  [SortKey, SortValue]
+>;
 
 export const Content = () => {
-  const { searchParams, setSearchParams } = useSearchParam();
+  const [searchParams, setSearchParams] = useSearchParam<{
+    asc: 'true' | 'false';
+    sort: SortValue;
+  }>();
+
   const { ref, inView } = useInView();
 
   const { data: posts, fetchNextPage } = useInfiniteQuery({
@@ -83,20 +79,21 @@ export const Content = () => {
                 onChange={() => {
                   trackUserEvent(MessageEnum.SORT_INTERACT_MAIN);
                   setSearchParams({
-                    asc: `${!(searchParams.asc === 'true')}`,
+                    asc: searchParams.asc === 'true' ? 'false' : 'true',
                   });
                 }}
                 checked={searchParams.asc === 'true'}
                 label="오름차순"
               />
               <Dropdown
                 defaultValue={
-                  sorts.find((i) => i[1] === searchParams.sort) as OptionType
+                  sorts.find((i) => i[1] === searchParams.sort) ??
+                  SORT_TYPE['작성일순']
                 }
                 options={sorts}
                 onChange={(data) => {
                   trackUserEvent(MessageEnum.SORT_INTERACT_MAIN);
-                  setSearchParams({ sort: encodeURI(data as string) });
+                  setSearchParams({ sort: data as SortValue });
                 }}
               />
             </div>

src/app/(with-tracker)/(login)/Content.tsx

@@ -3,7 +3,7 @@
 import { useRouter } from 'next/navigation';
 import { useForm } from 'react-hook-form';
 import Image from 'next/image';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Input, Button } from '@/components';
 import { LoginVo } from '@/types';
 import { login, sampleLogin } from '@/apis';
@@ -14,6 +14,7 @@ const responsiveStyle =
 
 export const Content = () => {
   const { replace } = useRouter();
+  const client = useQueryClient();
 
   const {
     register,
@@ -22,6 +23,7 @@ export const Content = () => {
   } = useForm<LoginVo>({ mode: 'all' });
 
   const onSuccess = () => {
+    client.clear();
     trackUserEvent(MessageEnum.LOGIN);
     replace('/main?asc=false&sort=');
   };

src/components/auth-required/header/index.tsx

@@ -32,8 +32,13 @@ export const Header = () => {
   const path = usePathname();
   const router = useRouter();
   const width = useResponsive();
-  const client = useQueryClient();
   const barWidth = width < SCREENS.MBI ? 65 : 180;
+  const client = useQueryClient();
+
+  const { data: profiles } = useQuery({
+    queryKey: [PATHS.ME],
+    queryFn: me,
+  });
 
   const { mutate: out } = useMutation({
     mutationFn: logout,
@@ -45,7 +50,7 @@ export const Header = () => {
     queryKey: [PATHS.ME],
     queryFn: me,
   });
-
+      
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent) =>
       open &&

src/components/auth-required/index.ts

@@ -1,3 +1,3 @@
-export * from './header';
+export * from './/header';
 export * from './main';
 export * from './leaderboards';

src/constants/index.ts

@@ -3,3 +3,4 @@ export * from './colors.constant';
 export * from './sizes.constant';
 export * from './paths.constant';
 export * from './fonts.constant';
+export * from './searchParams.constant';

src/constants/searchParams.constant.ts

@@ -0,0 +1,5 @@
+export const SORT_TYPE = {
+  작성일순: '',
+  조회순: 'dailyViewCount',
+  좋아요순: 'dailyLikeCount',
+} as const;

src/hooks/useSearchParam.ts

@@ -1,25 +1,27 @@
 import { useSearchParams, useRouter, usePathname } from 'next/navigation';
 
-export const useSearchParam = () => {
+export const useSearchParam = <T extends Record<string, string>>() => {
   const router = useRouter();
   const pathname = usePathname();
   const _searchParams = useSearchParams();
   const searchParams = new URLSearchParams(_searchParams.toString());
 
-  const setNewParams = (newParams: Record<string, string>) => {
+  const setNewParams = (newParams: Partial<T>) => {
     for (const [key, value] of Object.entries(newParams)) {
       if (value !== undefined && value !== null) searchParams.set(key, value);
       else searchParams.delete(key);
     }
     return searchParams.toString();
   };
 
-  const setSearchParams = (newParams: Record<string, string>) => {
+  const setSearchParams = (
+    newParams: Partial<T>,
+    isReplace: boolean = false,
+  ) => {
+    if (isReplace) router.replace(`${pathname}?${setNewParams(newParams)}`);
+
     return router.push(`${pathname}?${setNewParams(newParams)}`);
   };
 
-  return {
-    searchParams: Object.fromEntries(searchParams),
-    setSearchParams,
-  };
+  return [Object.fromEntries(searchParams) as T, setSearchParams] as const;
 };

src/types/index.ts

@@ -1,2 +1,3 @@
 export * from './dashboard.type';
 export * from './user.type';
+export * from './searchParams.type';

src/types/searchParams.type.ts

@@ -0,0 +1,6 @@
+import { SORT_TYPE } from '@/constants';
+
+export type SortKey = '작성일순' | '조회순' | '좋아요순';
+export type SortValue = (typeof SORT_TYPE)[keyof typeof SORT_TYPE];
+
+export type SortType = Record<SortKey, string>;

src/utils/queryUtil.ts

@@ -3,14 +3,15 @@ import { toast } from 'react-toastify';
 
 let localQueryClient: QueryClient | undefined;
 const STALE_TIME = 1000 * 60 * 3;
-const GC_TIME = 1000 * 60 * 30;
+const GC_TIME = 1000;
 
 const createQueryClient = () =>
   new QueryClient({
     defaultOptions: {
       queries: {
         retry: 1,
-        refetchOnWindowFocus: false,
+        refetchOnWindowFocus: true,
+        refetchOnMount: true,
         staleTime: STALE_TIME,
         gcTime: GC_TIME,
       },

src/utils/trackUtil.tsx

@@ -28,6 +28,7 @@ export const trackUserEvent = (event: keyof typeof MessageEnum | number) => {
     instance('/event', {
       body: { eventType },
       method: 'POST',
+      keepalive: true,
     });
   }
 };