refactor(client): 프로필 리스트 필터링 cardinal number 타입 보장 & 노트 작성

sickgyun · Apr 28, 2024 · 9f51e40 · 9f51e40
1 parent bd3f249
commit 9f51e40
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 23 deletions.
diff --git a/apps/client/src/app/profile/page.tsx b/apps/client/src/app/profile/page.tsx
@@ -11,13 +11,12 @@ import ProfileList from '@/components/profile/ProfileList';
 import ProfileNavigationBar from '@/components/profile/ProfileNavigationBar';
 import { withAuth } from '@/hocs/withAuth';
 import type { GetProfileListParams } from '@/hooks/api/profile/useGetProfileList';
-import type { Major, Promotion } from '@/types/profile';
+import type { Major } from '@/types/profile';
 
 const ProfilePage = () => {
   const router = useRouter();
   const params = useSearchParams();
   const major = params.get('major') as Major;
-  const promotion = params.get('promotion') as Promotion;
   const { register, setValue, watch } = useForm<GetProfileListParams>({
     defaultValues: {
       major: major ?? 'ALL',
@@ -42,8 +41,8 @@ const ProfilePage = () => {
           <ProfileList
             major={watch('major')}
             isRecruited={watch('isRecruited')}
-            cardinal={watch('cardinal')}
-            promotion={promotion}
+            // NOTE: cardinal이 number 타입 보장이 되지 않음 isRecruited, major가 변경이 되면 string 타입으로 변경되는 문제가 있어서 강제 형 변환 적용
+            cardinal={Number(watch('cardinal'))}
           />
         </StyledProfilePage>
       </StyledProfilePageLayout>

diff --git a/apps/client/src/components/profile/ProfileList/index.tsx b/apps/client/src/components/profile/ProfileList/index.tsx
@@ -1,20 +1,20 @@
 import styled from '@emotion/styled';
 import { Text } from '@sickgyun/ui';
 import { isEmpty } from 'lodash';
-import React from 'react';
+import { useSearchParams } from 'next/navigation';
 import ProfileCard from '../ProfileCard';
 import { BUMAWIKI_PROFILE_ID_LIST, SICKGYUN_PROFILE_ID_LIST } from '@/constants/profile';
 import { withSuspense } from '@/hocs/withSuspense';
 import type { GetProfileListParams } from '@/hooks/api/profile/useGetProfileList';
 import { useGetProfileList } from '@/hooks/api/profile/useGetProfileList';
 import type { Promotion } from '@/types/profile';
 
-type ProfileListProps = {
-  promotion: Promotion;
-} & GetProfileListParams;
+type ProfileListProps = GetProfileListParams;
 
-const ProfileList = ({ major, isRecruited, cardinal, promotion }: ProfileListProps) => {
+const ProfileList = ({ major, isRecruited, cardinal }: ProfileListProps) => {
+  const params = useSearchParams();
   const { profileList } = useGetProfileList({ major, isRecruited, cardinal });
+  const promotion = params.get('promotion') as Promotion;
 
   const filteredProfileList = profileList.filter((profile) => {
     switch (promotion) {

diff --git a/apps/client/src/components/profile/ProfileNavigationBar/index.tsx b/apps/client/src/components/profile/ProfileNavigationBar/index.tsx
@@ -4,7 +4,6 @@ import { IconExpandMoreFill } from '@seed-design/icon';
 import { Button, Chip, Flex, Select, Stack, Switch, Text } from '@sickgyun/ui';
 import { useOverlay } from '@toss/use-overlay';
 import { useRouter, useSearchParams } from 'next/navigation';
-import type { ChangeEventHandler } from 'react';
 import { useEffect } from 'react';
 import type { UseFormRegister, UseFormSetValue, UseFormWatch } from 'react-hook-form';
 import CoffeechatContactFormModal from '@/components/coffeechat/CoffeechatContactFormModal';
@@ -67,10 +66,6 @@ const ProfileNavigationBar = ({
     setValue('isRecruited', value);
   };
 
-  const handleCardinalSelectChange: ChangeEventHandler<HTMLSelectElement> = (e) => {
-    setValue('cardinal', Number(e.target.value));
-  };
-
   const handleGoProfileManagePage = () => {
     if (user.hasCreatedProfile) {
       router.push('/profile/update');
@@ -107,15 +102,12 @@ const ProfileNavigationBar = ({
           <Flex align="center" justify="space-between">
             <Stack direction="horizontal" align="center" spacing={24}>
               <Stack direction="horizontal" align="center" spacing={16}>
-                <StyledCardinalSelect
-                  {...register('cardinal')}
-                  onChange={handleCardinalSelectChange}
-                >
-                  <option value="0">전체 기수</option>
-                  <option value="1">1기</option>
-                  <option value="2">2기</option>
-                  <option value="3">3기</option>
-                  <option value="4">4기</option>
+                <StyledCardinalSelect {...register('cardinal')}>
+                  <option value={0}>전체 기수</option>
+                  <option value={1}>1기</option>
+                  <option value={2}>2기</option>
+                  <option value={3}>3기</option>
+                  <option value={4}>4기</option>
                 </StyledCardinalSelect>
                 <Switch
                   options={[

diff --git a/apps/client/src/hooks/api/profile/useGetProfileList.ts b/apps/client/src/hooks/api/profile/useGetProfileList.ts
@@ -34,6 +34,7 @@ export const useGetProfileList = ({
     GetProfileListResponse[],
     AxiosError<ApiErrorScheme>
   >({
+    // NOTE: cardinal이 number 타입일 경우 0이면 false로 인식되어 쿼리 업데이트가 진행되지 않기 때문에 string으로 강제 형 변환을 진행해 줍니다.
     queryKey: [PROFILE_LIST_QUERY_KEY, [major, isRecruited, String(cardinal)]],
     queryFn: async () =>
       await get('/profiles', {