[common/features, apps/cs] refactor: SortSelect 컴포넌트 추가 및 적용

apps/common/features/src/widgets/post/index.ts

@@ -1,3 +1,4 @@
 export { Post } from "./ui/post";
 export { PostForm } from "./ui/post-form";
 export { PostPage } from "./ui/post-page";
+export { SortSelect } from "./ui/sort-select";

apps/common/features/src/widgets/post/ui/post-page.tsx

@@ -33,6 +33,7 @@ import { useMenuStore, useUserStore } from "@/shared/lib";
 import { GridViewDataTable } from "@/shared/ui/grid-view-data-table";
 import { columns as tableColumns } from "../model/post-table-columns";
 import { createColumns as createGridViewColumns } from "../model/grid-view-table-columns";
+import { SortSelect } from "./sort-select";
 
 function PostPage({ bbsId }: { bbsId: string }) {
   const router = useRouter();
@@ -203,24 +204,9 @@ function PostPage({ bbsId }: { bbsId: string }) {
                     ))}
                   </SelectContent>
                 </Select>
-                <Select
-                  value={tableSort}
-                  onValueChange={(value) => {
-                    setTableSort(value);
-                  }}
-                >
-                  <SelectTrigger className="h-[3.2rem] w-[8rem]">
-                    <SelectValue placeholder="정렬" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="pstTtl,asc">제목&uarr;</SelectItem>
-                    <SelectItem value="pstTtl,desc">제목&darr;</SelectItem>
-                    <SelectItem value="rgtrNm,asc">작성자&uarr;</SelectItem>
-                    <SelectItem value="rgtrNm,desc">작성자&darr;</SelectItem>
-                    <SelectItem value="regDt,asc">등록일&uarr;</SelectItem>
-                    <SelectItem value="regDt,desc">등록일&darr;</SelectItem>
-                  </SelectContent>
-                </Select>
+                {bbsInfo?.ansUseYn === "N" && (
+                  <SortSelect value={tableSort} onValueChange={setTableSort} />
+                )}
               </div>
             </div>
           </div>

apps/common/features/src/widgets/post/ui/sort-select.tsx

@@ -0,0 +1,32 @@
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "@common/components";
+
+type SortSelectProps = {
+  value: string;
+  onValueChange: (value: string) => void;
+};
+
+function SortSelect(props: SortSelectProps) {
+  return (
+    <Select {...props}>
+      <SelectTrigger className="h-[3.2rem] w-[8rem]">
+        <SelectValue placeholder="정렬" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="pstTtl,asc">제목&uarr;</SelectItem>
+        <SelectItem value="pstTtl,desc">제목&darr;</SelectItem>
+        <SelectItem value="rgtrNm,asc">작성자&uarr;</SelectItem>
+        <SelectItem value="rgtrNm,desc">작성자&darr;</SelectItem>
+        <SelectItem value="regDt,asc">등록일&uarr;</SelectItem>
+        <SelectItem value="regDt,desc">등록일&darr;</SelectItem>
+      </SelectContent>
+    </Select>
+  );
+}
+
+export { SortSelect };

apps/cs/src/pages/recent/ui/recent-page.tsx

@@ -21,6 +21,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@common/components";
+import { SortSelect } from "@/widgets/post";
 import {
   PostApi,
   deleteReasonMessages,
@@ -49,7 +50,9 @@ function RecentPage() {
   const { prompt } = useSelectPrompt(selectData);
   const { confirm } = useConfirm();
   const alert = useAlertStore((state) => state.setMessage);
+
   const [dateRange, setDateRange] = useState<DateRange>();
+  const [tableSort, setTableSort] = useState("regDt,desc");
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: 10,
@@ -62,17 +65,17 @@ function RecentPage() {
     delYn: "N",
     frDateYmd: "",
     toDateYmd: "",
-    sort:"regDt,desc"
   });
   const [isDeletePostData, setIsDeletePostData] = useState(false);
 
   const query = useQuery({
-    queryKey: [ENDPOINT.BOARD_SERVICE.POSTS, pagination],
+    queryKey: [ENDPOINT.BOARD_SERVICE.POSTS, pagination, tableSort],
     queryFn: () =>
       PostApi.getRecentPostList({
         ...recentPostQuery,
         page: pagination.pageIndex,
         size: pagination.pageSize,
+        sort: tableSort,
       }),
     placeholderData: keepPreviousData,
   });
@@ -342,6 +345,7 @@ function RecentPage() {
                   ))}
                 </SelectContent>
               </Select>
+              <SortSelect value={tableSort} onValueChange={setTableSort} />
             </div>
           </div>
         </div>

apps/cs/src/widgets/post/index.ts

@@ -1,4 +1,5 @@
 export { Post } from "./ui/post";
 export { PostForm } from "./ui/post-form";
 export { PostPage } from "./ui/post-page";
+export { SortSelect } from "./ui/sort-select";
 export { GeneralFileUploader } from "./ui/general-file-uploader";

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

@@ -34,6 +34,7 @@ import { useMenuStore, useSelectPrompt } from "@/shared/lib";
 import { GridViewDataTable } from "@/shared/ui/grid-view-data-table";
 import { columns as tableColumns } from "../model/post-table-columns";
 import { createColumns as createGridViewColumns } from "../model/grid-view-table-columns";
+import { SortSelect } from "./sort-select";
 
 const selectData = Object.entries(deleteReasonMessages).map(
   ([label, value]) => ({ label, value }),
@@ -212,24 +213,9 @@ function PostPage({ bbsId }: { bbsId: string }) {
                     ))}
                   </SelectContent>
                 </Select>
-                <Select
-                  value={tableSort}
-                  onValueChange={(value) => {
-                    setTableSort(value);
-                  }}
-                >
-                  <SelectTrigger className="h-[3.2rem] w-[8rem]">
-                    <SelectValue placeholder="정렬" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="pstTtl,asc">제목&uarr;</SelectItem>
-                    <SelectItem value="pstTtl,desc">제목&darr;</SelectItem>
-                    <SelectItem value="rgtrNm,asc">작성자&uarr;</SelectItem>
-                    <SelectItem value="rgtrNm,desc">작성자&darr;</SelectItem>
-                    <SelectItem value="regDt,asc">등록일&uarr;</SelectItem>
-                    <SelectItem value="regDt,desc">등록일&darr;</SelectItem>
-                  </SelectContent>
-                </Select>
+                {bbsInfo?.ansUseYn === "N" && (
+                  <SortSelect value={tableSort} onValueChange={setTableSort} />
+                )}
               </div>
             </div>
           </div>

apps/cs/src/widgets/post/ui/sort-select.tsx

@@ -0,0 +1,32 @@
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "@common/components";
+
+type SortSelectProps = {
+  value: string;
+  onValueChange: (value: string) => void;
+};
+
+function SortSelect(props: SortSelectProps) {
+  return (
+    <Select {...props}>
+      <SelectTrigger className="h-[3.2rem] w-[8rem]">
+        <SelectValue placeholder="정렬" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="pstTtl,asc">제목&uarr;</SelectItem>
+        <SelectItem value="pstTtl,desc">제목&darr;</SelectItem>
+        <SelectItem value="rgtrNm,asc">작성자&uarr;</SelectItem>
+        <SelectItem value="rgtrNm,desc">작성자&darr;</SelectItem>
+        <SelectItem value="regDt,asc">등록일&uarr;</SelectItem>
+        <SelectItem value="regDt,desc">등록일&darr;</SelectItem>
+      </SelectContent>
+    </Select>
+  );
+}
+
+export { SortSelect };