[feat] 보컬 페이지 카테고리별 항목 정렬 옵션 변경

42Check-in · Sep 4, 2023 · d88bd74 · d88bd74
1 parent 1d72371
commit d88bd74
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 43 deletions.
diff --git a/components/status/Status.tsx b/components/status/Status.tsx
@@ -26,7 +26,6 @@ export default function Status({
   mouseOnIndex,
   vocal,
 }: StatusProps): ReactElement {
-  console.log(isMobile);
   const date = dayjs(status.date).format('YY.MM.DD');
   const router = useRouter();
   const isConferenceRoom = router.query.category === 'conference-rooms';

diff --git a/components/status/VocalStatusBoard.tsx b/components/status/VocalStatusBoard.tsx
@@ -1,6 +1,7 @@
 import type { ApplicationFormInfo } from '@/interfaces/FormInfo';
 import { cls } from '@/styles/cls';
 import apiController from '@/utils/apiController';
+import type { AxiosRequestConfig } from 'axios';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
@@ -62,10 +63,13 @@ export default function VocalStatusBoard({
 
   useEffect(() => {
     async function getFormInfosPage(): Promise<void> {
-      const config = {
+      const config: AxiosRequestConfig = {
         url: `/vocal/subscriptions/${category as string}/form/${filter as string}`,
-        params: { page, size, sort },
+        params: { page, size },
       };
+      if (category !== 'presentations') {
+        config.params.sort = 'id,desc';
+      }
       const { data } = await apiController<FormInfosPage>(config);
       const { list, pageCount } = data;
       setFormInfos(list);
@@ -90,6 +94,21 @@ export default function VocalStatusBoard({
   if (pageNumbers === undefined) return;
 
   const lastPageOffset = getPageOffset(pageCount);
+  const sliceIndex = category === 'presentations' ? 0 : 1;
+  const filters = [
+    {
+      name: 'all',
+      title: '전체',
+    },
+    {
+      name: 'not-approval',
+      title: category === 'presentations' ? '진행 중' : '미승인',
+    },
+    {
+      name: 'approval',
+      title: category === 'presentations' ? '강의 완료' : '승인',
+    },
+  ];
 
   const paginate = (pageNumber: number): void => {
     void router.push({
@@ -108,6 +127,14 @@ export default function VocalStatusBoard({
         const query = { ...router.query };
         query.category = item.category;
         delete query.formInfo;
+        if (item.category === 'presentations') {
+          delete query.sort;
+        } else {
+          query.sort = 'id,desc';
+          if (filter === 'all') {
+            query.filter = 'not-approval';
+          }
+        }
         void router.push({ query });
       };
       return (
@@ -156,7 +183,7 @@ export default function VocalStatusBoard({
                 setShowDropDown(!showDropDown);
               }}
             >
-              {filter === 'approval' ? '승인' : '미승인'}
+              {filters.find(({ name }) => name === filter).title}
               <svg
                 className='-mr-1 h-5 w-5 text-gray-400'
                 viewBox='0 0 20 20'
@@ -179,34 +206,22 @@ export default function VocalStatusBoard({
               aria-labelledby='menu-button'
             >
               <div className='w-max py-1 text-center' role='none'>
-                <Link
-                  href={{
-                    query: {
-                      ...router.query,
-                      filter: 'not-approval',
-                      page: 1,
-                    },
-                  }}
-                  className='block px-4 py-2 text-sm text-gray-700'
-                  role='menuitem'
-                  id='menu-item-0'
-                >
-                  미승인
-                </Link>
-                <Link
-                  href={{
-                    query: {
-                      ...router.query,
-                      filter: 'approval',
-                      page: 1,
-                    },
-                  }}
-                  className='block px-4 py-2 text-sm text-gray-700'
-                  role='menuitem'
-                  id='menu-item-1'
-                >
-                  승인
-                </Link>
+                {filters.slice(sliceIndex).map(({ name, title }) => (
+                  <Link
+                    key={name}
+                    href={{
+                      query: {
+                        ...router.query,
+                        filter: name,
+                        page: 1,
+                      },
+                    }}
+                    className='block px-4 py-2 text-sm text-gray-700'
+                    role='menuitem'
+                  >
+                    {title}
+                  </Link>
+                ))}
               </div>
             </div>
           )}

diff --git a/pages/oauth/login.tsx b/pages/oauth/login.tsx
@@ -18,7 +18,6 @@ export default function Login(): ReactElement {
       };
       const { data } = await apiController(config);
       const { accessToken, grade, refreshToken, staff } = data;
-      console.log(data)
       localStorage.setItem('accessToken', accessToken);
       localStorage.setItem('grade', grade);
       localStorage.setItem('refreshToken', refreshToken);

diff --git a/pages/vocal.tsx b/pages/vocal.tsx
@@ -7,6 +7,7 @@ import VocalStatusBoard from '@/components/status/VocalStatusBoard';
 import type { ApplicationFormInfo } from '@/interfaces/FormInfo';
 import apiController from '@/utils/apiController';
 import { useRouter } from 'next/router';
+import type { ParsedUrlQueryInput } from 'querystring';
 import { useEffect, useState } from 'react';
 import type { ReactElement } from 'react';
 
@@ -19,17 +20,18 @@ export default function Vocal(): ReactElement {
   const [showModal, setShowModal] = useState(false);
 
   useEffect(() => {
-    const requiredQueries = ['category', 'filter', 'page', 'size', 'sort'];
+    const requiredQueries = ['category', 'filter', 'page', 'size'];
     if (!requiredQueries.every((query) => query in router.query)) {
-      void router.push({
-        query: {
-          category: 'visitors',
-          filter: 'not-approval',
-          page: 1,
-          size: 8,
-          sort: 'id,desc',
-        },
-      });
+      const query: ParsedUrlQueryInput = {
+        category: 'visitors',
+        filter: 'not-approval',
+        page: 1,
+        size: 8,
+      };
+      if (category !== 'presentations') {
+        query.sort = 'id,desc';
+      }
+      void router.push({ query });
       return;
     }
     const { category: categoryQuery, formInfo } = router.query;