최근순을 최근 수정순과 최근 생성순으로 나누어 구현 (#961)

woowacourse-teams · Dec 17, 2024 · 0f72be3 · 0f72be3
1 parent ae43eab
commit 0f72be3
Show file tree

Hide file tree

Showing 14 changed files with 52 additions and 41 deletions.
diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
@@ -1,9 +1,6 @@
 export { API_URL } from './config';
 export { QUERY_KEY } from './queryKeys';
 export {
-  PAGE_SIZE,
-  SORTING_OPTIONS,
-  DEFAULT_SORTING_OPTION,
   getTemplateList,
   getTemplateExplore,
   getTemplate,

diff --git a/frontend/src/api/templates.ts b/frontend/src/api/templates.ts
@@ -1,26 +1,7 @@
 import { apiClient } from '@/api/config';
+import { DEFAULT_SORTING_OPTION, PAGE_SIZE } from '@/models/templates';
 import { END_POINTS } from '@/routes';
 import type { TemplateRequest, TemplateEditRequest, TemplateUploadRequest, TemplateListRequest } from '@/types';
-import { SortingOption } from '@/types';
-
-export const PAGE_SIZE = 20;
-
-export const SORTING_OPTIONS: SortingOption[] = [
-  {
-    key: 'modifiedAt,desc',
-    value: '최근 순',
-  },
-  {
-    key: 'modifiedAt,asc',
-    value: '오래된 순',
-  },
-  {
-    key: 'likesCount,desc',
-    value: '좋아요 순',
-  },
-];
-
-export const DEFAULT_SORTING_OPTION = SORTING_OPTIONS[0];
 
 export const getTemplateList = async ({
   keyword,

diff --git a/frontend/src/components/TemplateCard/TemplateCard.tsx b/frontend/src/components/TemplateCard/TemplateCard.tsx
@@ -17,7 +17,7 @@ interface Props {
 }
 
 const TemplateCard = ({ template }: Props) => {
-  const { title, description, thumbnail, tags, modifiedAt, member, visibility } = template;
+  const { title, description, thumbnail, tags, createdAt, member, visibility } = template;
   const [showAllTagList, toggleShowAllTagList] = useToggle();
   const isPrivate = visibility === VISIBILITY_PRIVATE;
 
@@ -49,7 +49,7 @@ const TemplateCard = ({ template }: Props) => {
             <S.TimeContainer>
               <ClockIcon width={ICON_SIZE.X_SMALL} color={theme.color.light.secondary_600} />
               <S.NoWrapTextWrapper>
-                <Text.Small color={theme.color.light.secondary_600}>{formatRelativeTime(modifiedAt)}</Text.Small>
+                <Text.Small color={theme.color.light.secondary_600}>{formatRelativeTime(createdAt)}</Text.Small>
               </S.NoWrapTextWrapper>
             </S.TimeContainer>
           </Flex>

diff --git a/frontend/src/hooks/useQueryParams.ts b/frontend/src/hooks/useQueryParams.ts
@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
-import { DEFAULT_SORTING_OPTION } from '@/api';
+import { DEFAULT_SORTING_OPTION } from '@/models/templates';
 
 interface FilterState {
   category: number;

diff --git a/frontend/src/mocks/handlers/template.ts b/frontend/src/mocks/handlers/template.ts
@@ -37,14 +37,22 @@ export const templateHandlers = [
     }
 
     switch (sort) {
-      case 'modifiedAt,asc':
-        filteredTemplates.sort((a, b) => new Date(a.modifiedAt).getTime() - new Date(b.modifiedAt).getTime());
+      case 'createdAt,asc':
+        filteredTemplates.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
+        break;
+
+      case 'createdAt,desc':
+        filteredTemplates.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
         break;
 
       case 'modifiedAt,desc':
         filteredTemplates.sort((a, b) => new Date(b.modifiedAt).getTime() - new Date(a.modifiedAt).getTime());
         break;
 
+      case 'likesCount,desc':
+        filteredTemplates.sort((a, b) => b.likesCount - a.likesCount);
+        break;
+
       default:
         break;
     }

diff --git a/frontend/src/models/templates/.gitkeep b/frontend/src/models/templates/.gitkeep
diff --git a/frontend/src/models/templates/index.ts b/frontend/src/models/templates/index.ts
@@ -0,0 +1,22 @@
+export const PAGE_SIZE = 20;
+
+export const SORTING_OPTIONS = [
+  {
+    key: 'createdAt,desc',
+    value: '최근 생성 순',
+  },
+  {
+    key: 'modifiedAt,desc',
+    value: '최근 수정 순',
+  },
+  {
+    key: 'createdAt,asc',
+    value: '오래된 순',
+  },
+  {
+    key: 'likesCount,desc',
+    value: '좋아요 순',
+  },
+] as const;
+
+export const DEFAULT_SORTING_OPTION = SORTING_OPTIONS[0];
diff --git a/frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx b/frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx
@@ -1,10 +1,10 @@
 import { Suspense } from 'react';
 import { useParams } from 'react-router-dom';
 
-import { SORTING_OPTIONS } from '@/api';
 import { SearchIcon } from '@/assets/images';
 import { Flex, Input, PagingButtons, Dropdown, Heading } from '@/components';
 import { useAuth } from '@/hooks/authentication';
+import { SORTING_OPTIONS } from '@/models/templates';
 import {
   CategoryListSection,
   CategoryListSectionSkeleton,
@@ -105,7 +105,7 @@ const MyTemplatePage = () => {
             </S.SearchInput>
             <Dropdown
               {...dropdownProps}
-              options={SORTING_OPTIONS}
+              options={[...SORTING_OPTIONS]}
               currentValue={sortingOption}
               getOptionLabel={(option) => option.value}
             />

diff --git a/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx b/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx
@@ -2,7 +2,6 @@ import { QueryErrorResetBoundary } from '@tanstack/react-query';
 import { useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
-import { SORTING_OPTIONS } from '@/api';
 import { SearchIcon } from '@/assets/images';
 import {
   Dropdown,
@@ -16,6 +15,7 @@ import {
   TemplateCard,
 } from '@/components';
 import { useDropdown, useInput, useQueryParams, useWindowWidth } from '@/hooks';
+import { SORTING_OPTIONS } from '@/models/templates';
 import { TemplateListSectionLoading } from '@/pages/MyTemplatesPage/components';
 import { HotTopicCarousel } from '@/pages/TemplateExplorePage/components';
 import { useHotTopic } from '@/pages/TemplateExplorePage/hooks';
@@ -100,7 +100,7 @@ const TemplateExplorePage = () => {
         </S.SearchInput>
         <Dropdown
           {...dropdownProps}
-          options={SORTING_OPTIONS}
+          options={[...SORTING_OPTIONS]}
           currentValue={sortingOption}
           getOptionLabel={(option) => option.value}
         />

diff --git a/frontend/src/queries/templates/useTemplateExploreQuery.ts b/frontend/src/queries/templates/useTemplateExploreQuery.ts
@@ -1,7 +1,8 @@
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
 
-import { PAGE_SIZE, QUERY_KEY, DEFAULT_SORTING_OPTION, getTemplateExplore } from '@/api';
+import { QUERY_KEY, getTemplateExplore } from '@/api';
 import { ApiError } from '@/api/Error';
+import { DEFAULT_SORTING_OPTION, PAGE_SIZE } from '@/models/templates';
 import type { SortingKey, TemplateListResponse } from '@/types';
 
 interface Props {

diff --git a/frontend/src/queries/templates/useTemplateListQuery.spec.tsx b/frontend/src/queries/templates/useTemplateListQuery.spec.tsx
@@ -1,9 +1,9 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { renderHook, waitFor } from '@testing-library/react';
 
-import { DEFAULT_SORTING_OPTION, PAGE_SIZE } from '@/api';
 import { AuthProvider } from '@/contexts';
 import { templates as mockTemplates } from '@/mocks/fixtures/templateList.json';
+import { DEFAULT_SORTING_OPTION, PAGE_SIZE } from '@/models/templates';
 
 import { useTemplateListQuery } from './useTemplateListQuery';
 
@@ -43,7 +43,7 @@ describe('useTemplateListQuery', () => {
           keyword: 'console.log',
           categoryId: undefined,
           tagIds: [],
-          sort: 'modifiedAt,desc',
+          sort: 'createdAt,desc',
           page: 1,
           size: 20,
         }),
@@ -70,7 +70,7 @@ describe('useTemplateListQuery', () => {
           keyword: '',
           categoryId: 1,
           tagIds: [],
-          sort: 'modifiedAt,desc',
+          sort: 'createdAt,desc',
           page: 1,
           size: 20,
         }),
@@ -89,7 +89,7 @@ describe('useTemplateListQuery', () => {
           keyword: '',
           categoryId: undefined,
           tagIds: [3, 5],
-          sort: 'modifiedAt,desc',
+          sort: 'createdAt,desc',
           page: 1,
           size: 20,
         }),
@@ -114,7 +114,7 @@ describe('useTemplateListQuery', () => {
           keyword: '',
           categoryId: undefined,
           tagIds: [],
-          sort: 'modifiedAt,desc',
+          sort: 'createdAt,desc',
           page: 2,
           size: 20,
         }),

diff --git a/frontend/src/queries/templates/useTemplateListQuery.ts b/frontend/src/queries/templates/useTemplateListQuery.ts
@@ -1,7 +1,8 @@
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
 
-import { PAGE_SIZE, QUERY_KEY, getTemplateList, DEFAULT_SORTING_OPTION } from '@/api';
+import { QUERY_KEY, getTemplateList } from '@/api';
 import { useAuth } from '@/hooks/authentication';
+import { DEFAULT_SORTING_OPTION, PAGE_SIZE } from '@/models/templates';
 import type { TemplateListResponse, SortingKey } from '@/types';
 
 interface Props {

diff --git a/frontend/src/service/getSortingOptionByValue.ts b/frontend/src/service/getSortingOptionByValue.ts
@@ -1,4 +1,4 @@
-import { DEFAULT_SORTING_OPTION, SORTING_OPTIONS } from '@/api';
+import { DEFAULT_SORTING_OPTION, SORTING_OPTIONS } from '@/models/templates';
 
 export const getSortingOptionByValue = (value: string) =>
   SORTING_OPTIONS.find((el) => el.value === value) || DEFAULT_SORTING_OPTION;
diff --git a/frontend/src/types/api.ts b/frontend/src/types/api.ts
@@ -1,3 +1,4 @@
+import { SORTING_OPTIONS } from '@/models/templates';
 import { Category, SourceCodes, Tag, TemplateListItem, TemplateVisibility } from '@/types';
 
 export interface TemplateListResponse {
@@ -75,6 +76,6 @@ export interface GetMemberNameResponse {
   name: string;
 }
 
-export type SortingKey = 'modifiedAt,asc' | 'modifiedAt,desc' | 'likesCount,desc';
+export type SortingKey = (typeof SORTING_OPTIONS)[number]['key'];
 
 export type SortingOption = { key: SortingKey; value: string };