[25.02.25] Fix - useSearchParam > 제네릭 사용하여 타입 추론 정확히 하도록 수정 (#14)

* [25.02.16 / TASK-118] Feature: 채널톡 추가 및 헤더 로고 클릭 동작 추가 (#13)

* hotfix: 일부 오류 수정
username 관련 오류 및 SSR 렌더린 관련 오류로 추정되는 오류 수정

* feat: 채널톡 추가 및 헤더 로고 동작 추가

* refactor: console.log 제거

* refactor: 메세지 내용 변경

* refactor: 코멘트 반영 겸 자잘한 오류 해결

* refactor: username 관련 코드 수정

* refactor: ENV 오류 전용 공통 오류 객체 추가

* hotfix: env 값 추가

* hotfix: env 관련 오류 해결

* hotfix: 구조분해 관련 오류 해결

* fix: useSearchParam > 제네릭 사용하여 타입 추론 정확히 하도록 수정

---------

Co-authored-by: 육기준 <[email protected]>

Author: haryan248

.github/workflows/docker-publish.yaml

@@ -31,6 +31,7 @@ jobs:
           echo "NEXT_PUBLIC_ABORT_MS=${{ secrets.NEXT_PUBLIC_ABORT_MS }}" >> .env
           echo "NEXT_PUBLIC_EVENT_LOG=${{ secrets.NEXT_PUBLIC_EVENT_LOG }}" >> .env
           echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> .env
+          echo "NEXT_PUBLIC_CHANNELTALK_PLUGIN_KEY=${{ secrets.NEXT_PUBLIC_CHANNELTALK_PLUGIN_KEY }}" >> .env
           echo "SENTRY_DSN=${{ secrets.SENTRY_DSN }}" >> .env
           cp .env .env.production
 

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/components/auth-required/main/Section/index.tsx

@@ -15,16 +15,17 @@ export const Section = (p: PostType) => {
   const client = useQueryClient();
 
   const { username } = client.getQueryData([PATHS.ME]) as UserDto;
-  const { NEXT_PUBLIC_VELOG_URL } = process.env;
+  const URL = process.env.NEXT_PUBLIC_VELOG_URL;
 
   if (!username) {
     throw new UserNameNotFoundError();
   }
-  if (NEXT_PUBLIC_VELOG_URL) {
+
+  if (!URL) {
     throw new EnvNotFoundError('NEXT_PUBLIC_VELOG_URL');
   }
 
-  const url = `${process.env.NEXT_PUBLIC_VELOG_URL}/@${username}/${p.slug}`;
+  const url = `${URL}/@${username}/${p.slug}`;
 
   return (
     <section className="flex flex-col w-full h-fit relative">

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>;