feat: 게시판 페이지 가드 로직 작성

apps/cs/src/widgets/post/ui/post-page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { usePathname, useRouter } from "next/navigation";
 import { useQuery } from "@tanstack/react-query";
 import {
@@ -21,9 +21,13 @@ import {
   SelectValue,
   Skeleton,
 } from "@common/components";
-import { BoardApi } from "@/entities/board";
 import { AuthorityButton } from "@/entities/menu-authority";
-import { PostApi, type Post, type PostParams } from "@/entities/post";
+import {
+  PostApi,
+  PostPageGuard,
+  type Post,
+  type PostParams,
+} from "@/entities/post";
 import { ENDPOINT } from "@/shared/config";
 import { useMenuStore, usePrompt } from "@/shared/lib";
 import { GridViewDataTable } from "@/shared/ui/grid-view-data-table";
@@ -34,7 +38,7 @@ function PostPage({ bbsId }: { bbsId: string }) {
   const router = useRouter();
   const pathname = usePathname();
   const { prompt } = usePrompt();
-  const { bbsInfo, setBbsInfo } = useMenuStore((state) => state);
+  const bbsInfo = useMenuStore((state) => state.bbsInfo);
   const thumbRefs = useRef<Map<number, string>>(new Map());
 
   const [postParams, setPostParams] = useState<PostParams>({
@@ -47,11 +51,6 @@ function PostPage({ bbsId }: { bbsId: string }) {
   });
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
 
-  const { data: boardInfo } = useQuery({
-    queryKey: [ENDPOINT.BOARD_SERVICE.BBS, bbsId],
-    queryFn: () => BoardApi.getBoardInfo(bbsId),
-  });
-
   const { data: upndFixPostList } = useQuery({
     queryKey: [ENDPOINT.BOARD_SERVICE.POSTS, bbsId, bbsInfo],
     queryFn: () =>
@@ -71,7 +70,7 @@ function PostPage({ bbsId }: { bbsId: string }) {
 
   const {
     data: postList,
-    isFetched,
+    isLoading,
     refetch,
   } = useQuery({
     queryKey: [ENDPOINT.BOARD_SERVICE.POSTS, bbsInfo?.bbsTypeCd],
@@ -131,95 +130,92 @@ function PostPage({ bbsId }: { bbsId: string }) {
     router.push(`${pathname}/${row.pstNo}`);
   };
 
-  useEffect(() => {
-    if (!boardInfo) return;
-    setBbsInfo(boardInfo);
-  }, [boardInfo]);
-
   return (
-    <div className="card card-border !mt-6">
-      <div className="card card-border">
-        <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
-          <Label className="mr-2 text-label">검색</Label>
-          <Select
-            value={postParams.keywordType}
-            onValueChange={(keywordType) => {
-              setPostParams({ ...postParams, keywordType });
-            }}
-          >
-            <SelectTrigger className="h-[3.2rem] w-[10rem]">
-              <SelectValue placeholder="선택" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="title">제목</SelectItem>
-              <SelectItem value="all">제목+내용</SelectItem>
-              <SelectItem value="writer">작성자</SelectItem>
-            </SelectContent>
-          </Select>
-          <Input
-            value={postParams.keyword}
-            onChange={(e) =>
-              setPostParams({ ...postParams, keyword: e.target.value })
-            }
-            className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
-          />
-          <Button className="h-[3.2rem]" type="submit">
-            조회
-          </Button>
-        </form>
-      </div>
-      <div className="card card-border">
-        <div className="card-header">
-          <div className="flex w-full items-center justify-between">
-            <h3 className="text-2xl font-medium text-label">콘텐츠 목록</h3>
-            <div className="flex gap-2">
-              <AuthorityButton
-                authority="regAuthrtYn"
-                onClick={() => router.push(`${pathname}/register`)}
-              >
-                등록
-              </AuthorityButton>
-              <AuthorityButton
-                authority="delAuthrtYn"
-                color="red"
-                onClick={onPostDelete}
-                disabled={!table.getFilteredSelectedRowModel().rows.length}
-              >
-                선택삭제
-              </AuthorityButton>
-              <Select
-                value={table.getState().pagination.pageSize.toString()}
-                onValueChange={(value) => {
-                  table.setPageSize(parseInt(value));
-                }}
-              >
-                <SelectTrigger className="h-[3.2rem] w-[12rem]">
-                  <SelectValue placeholder="페이지 크기" />
-                </SelectTrigger>
-                <SelectContent>
-                  {[10, 20, 30, 40, 50].map((pageSize) => (
-                    <SelectItem key={pageSize} value={pageSize.toString()}>
-                      {pageSize}개씩 보기
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+    <PostPageGuard bbsId={bbsId}>
+      <div className="card card-border !mt-6">
+        <div className="card card-border">
+          <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
+            <Label className="mr-2 text-label">검색</Label>
+            <Select
+              value={postParams.keywordType}
+              onValueChange={(keywordType) => {
+                setPostParams({ ...postParams, keywordType });
+              }}
+            >
+              <SelectTrigger className="h-[3.2rem] w-[10rem]">
+                <SelectValue placeholder="선택" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="title">제목</SelectItem>
+                <SelectItem value="all">제목+내용</SelectItem>
+                <SelectItem value="writer">작성자</SelectItem>
+              </SelectContent>
+            </Select>
+            <Input
+              value={postParams.keyword}
+              onChange={(e) =>
+                setPostParams({ ...postParams, keyword: e.target.value })
+              }
+              className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
+            />
+            <Button className="h-[3.2rem]" type="submit">
+              조회
+            </Button>
+          </form>
+        </div>
+        <div className="card card-border">
+          <div className="card-header">
+            <div className="flex w-full items-center justify-between">
+              <h3 className="text-2xl font-medium text-label">콘텐츠 목록</h3>
+              <div className="flex gap-2">
+                <AuthorityButton
+                  authority="regAuthrtYn"
+                  onClick={() => router.push(`${pathname}/register`)}
+                >
+                  등록
+                </AuthorityButton>
+                <AuthorityButton
+                  authority="delAuthrtYn"
+                  color="red"
+                  onClick={onPostDelete}
+                  disabled={!table.getFilteredSelectedRowModel().rows.length}
+                >
+                  선택삭제
+                </AuthorityButton>
+                <Select
+                  value={table.getState().pagination.pageSize.toString()}
+                  onValueChange={(value) => {
+                    table.setPageSize(parseInt(value));
+                  }}
+                >
+                  <SelectTrigger className="h-[3.2rem] w-[12rem]">
+                    <SelectValue placeholder="페이지 크기" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {[10, 20, 30, 40, 50].map((pageSize) => (
+                      <SelectItem key={pageSize} value={pageSize.toString()}>
+                        {pageSize}개씩 보기
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
             </div>
           </div>
-        </div>
-        <div className="card !m-[1.2rem] h-full overflow-auto !p-0">
-          {isFetched ? (
-            <DataTableComponent
-              table={table}
-              onRowClick={handleRowClick}
-              viewPagination
-            />
-          ) : (
-            <Skeleton className="h-[36rem] w-full" />
-          )}
+          <div className="card !m-[1.2rem] h-full overflow-auto !p-0">
+            {isLoading ? (
+              <Skeleton className="h-[36rem] w-full" />
+            ) : (
+              <DataTableComponent
+                table={table}
+                onRowClick={handleRowClick}
+                viewPagination
+              />
+            )}
+          </div>
         </div>
       </div>
-    </div>
+    </PostPageGuard>
   );
 }