Merge pull request #326 from msdio/feature/client/typing-long-sort

[#325] 긴 글 목록 페이지 정렬 기능 추가

client/src/apis/typing.ts

@@ -2,6 +2,7 @@ import { requestWithAuth, requestWithoutAuth } from '@/apis';
 import type { ErrorResponse } from '@/apis/error';
 import type { ApiResponse } from '@/types/apiResponse';
 import type { LanguageType } from '@/types/language';
+import type { SortBy } from '@/types/longTyping';
 import type { LongTypingDetail, LongTypingItem } from '@/types/typing';
 import type { TypingMode } from '@/types/typing';
 
@@ -67,8 +68,14 @@ export const getExamShortTypingWritingsAPI = async (
   return res.data;
 };
 
-export const getLongTypingListAPI = async (page: number): Promise<LongTypingListResultType> => {
-  const res = await requestWithoutAuth.get(`/typing/long?page=${page}`);
+export const getLongTypingListAPI = async ({
+  page,
+  sortBy,
+}: {
+  page: number;
+  sortBy?: SortBy;
+}): Promise<LongTypingListResultType> => {
+  const res = await requestWithoutAuth.get(`/typing/long?page=${page}${sortBy ? '&sortBy=' + sortBy : ''}`);
 
   return res.data;
 };

client/src/components/typing/long/List/SortBy/index.tsx

@@ -0,0 +1,59 @@
+import { Flex, Menu, MenuButton, MenuDivider, MenuItem, MenuList } from '@chakra-ui/react';
+import Link from 'next/link';
+
+import { PRACTICE_LONG_PATH_LIST } from '@/constants/paths';
+import UpDownArrow from '@/icons/UpDownArrow';
+
+const sortByItems = [
+  {
+    label: '최신순',
+    path: `${PRACTICE_LONG_PATH_LIST}?page=1&sortBy=latest`,
+  },
+  {
+    label: '조회수순',
+    path: `${PRACTICE_LONG_PATH_LIST}?page=1&sortBy=viewCount`,
+  },
+  {
+    label: '오래된순',
+    path: `${PRACTICE_LONG_PATH_LIST}?page=1&sortBy=oldest`,
+  },
+];
+
+export default function SortBy() {
+  return (
+    <Menu>
+      <MenuButton
+        fontWeight={'500'}
+        w={'96px'}
+        h={'34px'}
+        border={'0.6px solid #101010'}
+        borderRadius={16}
+        bg={'background.white'}
+      >
+        <Flex alignItems={'center'} justify={'center'} gap={'15px'}>
+          정렬
+          <UpDownArrow />
+        </Flex>
+      </MenuButton>
+      <MenuList p={0} minW={0} w={'96px'} border={'0.6px solid #101010'} borderRadius={16} bg={'background.white'}>
+        {sortByItems.map((item, index, items) => (
+          <>
+            <Link key={index} href={item.path}>
+              <MenuItem
+                _hover={{ color: 'primary.dark' }}
+                fontWeight={'500'}
+                w={'fit-content'}
+                bg={'background.white'}
+                p={0}
+                m={'15px 18px'}
+              >
+                {item.label}
+              </MenuItem>
+            </Link>
+            {index !== items.length - 1 && <MenuDivider />}
+          </>
+        ))}
+      </MenuList>
+    </Menu>
+  );
+}

client/src/components/typing/long/List/index.tsx

@@ -24,6 +24,7 @@ import { BookmarkOff } from '@/icons/Heart';
 import { Search } from '@/icons/Search';
 import type { LongTypingItem } from '@/types/typing';
 
+import SortBy from './SortBy';
 import TypingListPagination from './TypingListPagination';
 import TypingThumbnail from './TypingThumbnail';
 
@@ -89,11 +90,13 @@ export default function PracticeLongList({ currentPage, totalPage, typingList }:
                 <Th textAlign='center' width='9%'>
                   번호
                 </Th>
-                <Th width='50%'>제목명</Th>
-                <Th width='9%'>타입</Th>
-                <Th width='9%'>페이지 수</Th>
-                <Th width='9%'>조회수</Th>
-                <Th width='14%'></Th>
+                <Th width='42%'>제목명</Th>
+                <Th width='12%'>타입</Th>
+                <Th width='12%'>페이지 수</Th>
+                <Th width='12%'>조회수</Th>
+                <Th width='12%'>
+                  <SortBy />
+                </Th>
               </Tr>
             </Thead>
             <Tbody>

client/src/constants/typing.ts

@@ -16,16 +16,6 @@ export const ACTUAL_TYPING_TIME_LIMIT = {
   SHORT: 5 * 60 * 1000,
 };
 
-// Language Type으로 옮기는게 어떨까요?!
-export const TYPING_TYPE: Record<string, string> = {
-  KOREAN: '한글',
-  ENGLISH: '영어',
-  JAVA: 'Java',
-  PYTHON: 'Python',
-  C: 'C',
-  JAVASCRIPT: 'JavaScript',
-};
-
 export enum TYPING_STATE {
   'DEFAULT' = 'd',
   'CORRECT' = 'c',

client/src/icons/UpDownArrow.tsx

@@ -1,13 +1,15 @@
+import { Icon } from '@chakra-ui/react';
+
 export default function UpDownArrow() {
   return (
-    <svg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <Icon width='9px' height='12px' viewBox='0 0 9 12' fill='none' xmlns='http://www.w3.org/2000/svg'>
       <path
-        d='M6 8.5L3.5 11L1 8.5M1 3.5L3.5 1L6 3.5'
+        d='M8 8.5L4.5 11L1 8.5M1 3.5L4.5 1L8 3.5'
         stroke='black'
         strokeWidth='1.2'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
-    </svg>
+    </Icon>
   );
 }

client/src/pages/practice/long/index.tsx

@@ -5,6 +5,7 @@ import { getLongTypingListAPI } from '@/apis/typing';
 import Footer from '@/components/footer';
 import Header from '@/components/header';
 import PracticeLongList from '@/components/typing/long/List';
+import type { SortBy } from '@/types/longTyping';
 import type { LongTypingItem } from '@/types/typing';
 
 export default function PracticeLongPage() {
@@ -14,8 +15,15 @@ export default function PracticeLongPage() {
     null,
   );
 
-  const getLongTypingList = async (page: number) => {
-    const { result } = await getLongTypingListAPI(page);
+  const getLongTypingList = async ({ page, sortBy }: { page: number; sortBy?: SortBy }) => {
+    let result;
+
+    try {
+      result = (await getLongTypingListAPI({ page, sortBy })).result;
+    } catch {
+      // 잘못된 정렬기준일 경우
+      result = (await getLongTypingListAPI({ page })).result;
+    }
 
     const { totalPage, longTypings } = result as { totalPage: number; longTypings: LongTypingItem[] };
 
@@ -26,9 +34,10 @@ export default function PracticeLongPage() {
     if (!router.isReady) {
       return;
     }
-    const { page } = router.query as { page: string };
+    const { page, sortBy } = router.query as { page: string; sortBy?: SortBy };
 
-    getLongTypingList(Number.isNaN(Number(page)) ? 1 : Number(page));
+    const pageNumber = isNaN(Number(page)) ? 1 : Number(page);
+    getLongTypingList({ page: pageNumber, sortBy });
   }, [router.isReady, router.asPath]);
 
   if (!router.isReady || !data) {

client/src/types/longTyping.ts

@@ -0,0 +1 @@
+export type SortBy = 'latest' | 'oldest' | 'viewcount';