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

apps/common/features/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 { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { useQuery } from "@tanstack/react-query";
@@ -22,7 +22,12 @@ import {
   SelectValue,
   Skeleton,
 } from "@common/components";
-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, useUserStore } from "@/shared/lib";
 import { GridViewDataTable } from "@/shared/ui/grid-view-data-table";
@@ -35,6 +40,7 @@ function PostPage({ bbsId }: { bbsId: string }) {
   const { confirm } = useConfirm();
   const userInfo = useUserStore((state) => state.userInfo);
   const { bbsInfo, pageMenuAuthority } = useMenuStore((state) => state);
+  const thumbRefs = useRef<Map<number, string>>(new Map());
 
   const [postParams, setPostParams] = useState<PostParams>({
     keywordType: "title",
@@ -46,8 +52,6 @@ function PostPage({ bbsId }: { bbsId: string }) {
   });
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
 
-  const thumbRefs = useRef<Map<number, string>>(new Map());
-
   const { data: upndFixPostList } = useQuery({
     queryKey: [ENDPOINT.BOARD_SERVICE.POSTS_USER, bbsId, bbsInfo],
     queryFn: () =>
@@ -70,7 +74,7 @@ function PostPage({ bbsId }: { bbsId: string }) {
 
   const {
     data: postList,
-    isFetched,
+    isLoading,
     refetch,
   } = useQuery({
     queryKey: [ENDPOINT.BOARD_SERVICE.POSTS_USER, bbsId],
@@ -80,7 +84,6 @@ function PostPage({ bbsId }: { bbsId: string }) {
         page: pagination.pageIndex,
         size: pagination.pageSize,
       }),
-    enabled: false,
   });
 
   const isGridViewPage =
@@ -128,94 +131,92 @@ function PostPage({ bbsId }: { bbsId: string }) {
     router.push(`${pathname}/${row.pstNo}`);
   };
 
-  useEffect(() => {
-    refetch();
-  }, [pagination]);
-
   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">
-              {pageMenuAuthority?.regAuthrtYn === "Y" && (
-                <Button onClick={() => router.push(`${pathname}/register`)}>
-                  등록
-                </Button>
-              )}
-              {pageMenuAuthority?.delAuthrtYn === "Y" && (
-                <Button
-                  color="red"
-                  onClick={onPostDelete}
-                  disabled={!table.getFilteredSelectedRowModel().rows.length}
+    <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">
+                {pageMenuAuthority?.regAuthrtYn === "Y" && (
+                  <Button onClick={() => router.push(`${pathname}/register`)}>
+                    등록
+                  </Button>
+                )}
+                {pageMenuAuthority?.delAuthrtYn === "Y" && (
+                  <Button
+                    color="red"
+                    onClick={onPostDelete}
+                    disabled={!table.getFilteredSelectedRowModel().rows.length}
+                  >
+                    선택삭제
+                  </Button>
+                )}
+                <Select
+                  value={table.getState().pagination.pageSize.toString()}
+                  onValueChange={(value) => {
+                    table.setPageSize(parseInt(value));
+                  }}
                 >
-                  선택삭제
-                </Button>
-              )}
-              <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>
+                  <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>
   );
 }