버그수정사항 추가 (#61)

* fix: 페이지 접근 권한 추가 - 주문 페이지, 프로필 페이지, 메뉴 페이지

* fix: 테이블 페이지 네이션 수정

* fix: 폴더명 대문자로 인한 빌드에러 수정

Author: jangwonyoon

src/pages/dashboard/components/OrderTable.tsx

@@ -152,7 +152,7 @@ const OrderTable = () => {
         </span>
         <button
           onClick={() => setPageIndex((prev) => prev + 1)}
-          disabled={currentPageData.length < PAGE_SIZE}
+          disabled={currentPageData.length <= PAGE_SIZE}
         >
           다음 페이지
         </button>

src/pages/menuList/index.tsx

@@ -4,6 +4,7 @@ import MenuCard from './components/menuCard';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Button } from 'common/components';
 import { MenuListProps } from './types';
+import useAuth from 'common/hooks/useAuth';
 import { useGetStoresMenuQuery } from 'queries/modules/stores/useStoresQuery';
 
 const MenuList = ({ data }: MenuListProps) => {
@@ -39,6 +40,7 @@ const MenuList = ({ data }: MenuListProps) => {
 };
 
 const MenuListWrapper = () => {
+  const { AuthGuard } = useAuth(['admin', 'owner']);
   const storeId = 1;
 
   // useGetStoresMenuQuery 훅을 사용해 데이터 받아오기
@@ -47,8 +49,13 @@ const MenuListWrapper = () => {
   if (isLoading) return <div>Loading...</div>;
   if (error) return <div>Error loading menus</div>;
   if (!data) return <></>;
-  return <MenuList data={data?.response} />;
+  return (
+    <AuthGuard>
+      <MenuList data={data?.response} />
+    </AuthGuard>
+  );
 };
+
 export default MenuListWrapper;
 
 const _container = css`

src/pages/order/index.tsx

@@ -26,6 +26,7 @@ import {
 import queryString from 'query-string';
 import { commaize } from 'utils/commaize';
 import colors from 'styles/color';
+import useAuth from 'common/hooks/useAuth';
 
 const STATUS_OPTIONS = [
   {
@@ -43,6 +44,9 @@ const STATUS_OPTIONS = [
 ];
 
 const Order = ({ ...rest }) => {
+  // 권한 설정
+  const { AuthGuard } = useAuth(['admin', 'owner']);
+
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const { pathname } = useLocation();
@@ -157,99 +161,101 @@ const Order = ({ ...rest }) => {
   }
 
   return (
-    <div css={_container} {...rest}>
-      <div css={_header}>
-        <div>
-          <h1>주문</h1>
-          <div>주문 내역을 확인하실 수 있어요.</div>
-        </div>
-        <div css={_filterWrapper}>
-          <Filter
-            leftSlot={<Lightning />}
-            backgroundColor="lightBlue"
-            placeholder="주문 상태"
-            value={orderStatus}
-            onChange={handleChangeOrderStatus}
-            options={STATUS_OPTIONS}
-          />
-          {/* TODO: datepicker는 추후에 개발 */}
-          {/* <Filter
+    <AuthGuard>
+      <div css={_container} {...rest}>
+        <div css={_header}>
+          <div>
+            <h1>주문</h1>
+            <div>주문 내역을 확인하실 수 있어요.</div>
+          </div>
+          <div css={_filterWrapper}>
+            <Filter
+              leftSlot={<Lightning />}
+              backgroundColor="lightBlue"
+              placeholder="주문 상태"
+              value={orderStatus}
+              onChange={handleChangeOrderStatus}
+              options={STATUS_OPTIONS}
+            />
+            {/* TODO: datepicker는 추후에 개발 */}
+            {/* <Filter
             leftSlot={<Calendar />}
             backgroundColor="lightBlue"
             placeholder="주문 기간"
           /> */}
+          </div>
         </div>
-      </div>
 
-      <div css={_tableContainer}>
-        <table>
-          <thead>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <tr key={headerGroup.id}>
-                {headerGroup.headers.map((header) => (
-                  <th
-                    css={css`
+        <div css={_tableContainer}>
+          <table>
+            <thead>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => (
+                    <th
+                      css={css`
                       padding: 20px;
                     `}
-                    key={header.id}
-                    colSpan={header.colSpan}
-                  >
-                    <div>
-                      {flexRender(
-                        header.column.columnDef.header,
-                        header.getContext(),
-                      )}
-                    </div>
-                  </th>
-                ))}
-              </tr>
-            ))}
-          </thead>
-          <tbody>
-            {table.getRowModel().rows.map((row) => (
-              <tr
-                css={css`
+                      key={header.id}
+                      colSpan={header.colSpan}
+                    >
+                      <div>
+                        {flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                      </div>
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            <tbody>
+              {table.getRowModel().rows.map((row) => (
+                <tr
+                  css={css`
                   cursor: pointer;
                   &:hover {
                     background-color: ${colors.secondary};
                   }
                 `}
-                key={row.id}
-                onClick={() => gotoOrderDetail(row.original.orderId)}
-              >
-                {row.getVisibleCells().map((cell) => (
-                  <td
-                    key={cell.id}
-                    css={css`
+                  key={row.id}
+                  onClick={() => gotoOrderDetail(row.original.orderId)}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <td
+                      key={cell.id}
+                      css={css`
                       padding: 20px;
                     `}
-                  >
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-      <div css={_paginationContainer}>
-        <div
-          css={css`
+                    >
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        <div css={_paginationContainer}>
+          <div
+            css={css`
             color: #3e4954;
           `}
-        >
-          총 주문 건수: {(orders as any)?.response?.totalCount}건
+          >
+            총 주문 건수: {(orders as any)?.response?.totalCount}건
+          </div>
+          <Pagination
+            currentPage={Number(page)}
+            // @ts-expect-error 타입이 useQuery에서 안잡혀서 임시로 타입을 무시합니다.
+            totalCount={orders?.response?.totalCount}
+            onClickPage={handleClickPage}
+            onClickPrevPage={handleClickPrevPage}
+            onClickNextPage={handleClickNextPage}
+          />
         </div>
-        <Pagination
-          currentPage={Number(page)}
-          // @ts-expect-error 타입이 useQuery에서 안잡혀서 임시로 타입을 무시합니다.
-          totalCount={orders?.response?.totalCount}
-          onClickPage={handleClickPage}
-          onClickPrevPage={handleClickPrevPage}
-          onClickNextPage={handleClickNextPage}
-        />
       </div>
-    </div>
+    </AuthGuard>
   );
 };
 

src/pages/profile/index.tsx

@@ -3,7 +3,7 @@ import { css } from "@emotion/react";
 import useAuth from 'common/hooks/useAuth';
 
 const Profile = ({ ...rest }) => {
-  const { AuthGuard } = useAuth(["admin"]);
+  const { AuthGuard } = useAuth(["admin", "owner"]);
 
   return (
     <AuthGuard>