From f06a8e963717b3cb8acf70b50c84d4ef58184fd6 Mon Sep 17 00:00:00 2001 From: bicochan Date: Wed, 28 May 2025 16:17:35 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=84=A4=EB=AC=B8=20=EC=82=AC=EC=9D=B4?= =?UTF-8?q?=ED=8A=B8=20=EA=B2=8C=EC=8B=9C=20=EC=9D=B4=EB=A0=A5=20=EA=B4=80?= =?UTF-8?q?=EB=A6=AC=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../survey/model/posting-table-columns.tsx | 45 ++++++ ...e-columns.tsx => survey-table-columns.tsx} | 0 apps/cs/src/pages/survey/ui/detail-page.tsx | 140 +++++++++++++----- apps/cs/src/pages/survey/ui/survey-page.tsx | 2 +- 4 files changed, 153 insertions(+), 34 deletions(-) create mode 100644 apps/cs/src/pages/survey/model/posting-table-columns.tsx rename apps/cs/src/pages/survey/model/{table-columns.tsx => survey-table-columns.tsx} (100%) diff --git a/apps/cs/src/pages/survey/model/posting-table-columns.tsx b/apps/cs/src/pages/survey/model/posting-table-columns.tsx new file mode 100644 index 000000000..cf4fb2bb0 --- /dev/null +++ b/apps/cs/src/pages/survey/model/posting-table-columns.tsx @@ -0,0 +1,45 @@ +import dayjs from "dayjs"; +import type { ColumnDef } from "@tanstack/react-table"; +import { Checkbox } from "@common/components"; +import type { Post } from "@/entities/posting"; + +export const columns: ColumnDef[] = [ + { + id: "select", + header: ({ table }) => ( + e.stopPropagation()} + onCheckedChange={(checked) => + table.toggleAllPageRowsSelected(!!checked) + } + className="h-4 w-4 rounded border-gray-300" + /> + ), + cell: ({ row }) => ( + e.stopPropagation()} + onCheckedChange={(checked) => row.toggleSelected(!!checked)} + className="h-4 w-4 rounded border-gray-300" + /> + ), + meta: { + width: 50, + }, + }, + { + accessorKey: "siteNm", + header: "사이트", + }, + { + accessorKey: "pstgPrdSeNm", + header: "게시기간", + cell: ({ row }) => { + const pstgPrdSeNm = row.original.pstgPrdSeNm; + const pstgBgngDt = row.original.pstgBgngDt; + const pstgEndDt = row.original.pstgEndDt; + return `${pstgPrdSeNm} (${dayjs(pstgBgngDt).format("YYYY-MM-DD")} ~ ${dayjs(pstgEndDt).format("YYYY-MM-DD")})`; + }, + }, +]; diff --git a/apps/cs/src/pages/survey/model/table-columns.tsx b/apps/cs/src/pages/survey/model/survey-table-columns.tsx similarity index 100% rename from apps/cs/src/pages/survey/model/table-columns.tsx rename to apps/cs/src/pages/survey/model/survey-table-columns.tsx diff --git a/apps/cs/src/pages/survey/ui/detail-page.tsx b/apps/cs/src/pages/survey/ui/detail-page.tsx index 1c874d2e1..fd69fc365 100644 --- a/apps/cs/src/pages/survey/ui/detail-page.tsx +++ b/apps/cs/src/pages/survey/ui/detail-page.tsx @@ -1,54 +1,128 @@ "use client"; +import { useState } from "react"; import { usePathname, useRouter } from "next/navigation"; -import { useQuery } from "@tanstack/react-query"; -import { Button } from "@common/components"; +import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; +import { + getCoreRowModel, + useReactTable, + type RowSelectionState, +} from "@tanstack/react-table"; +import { useConfirm } from "@frontend-opensource/use-react-hooks"; +import { Button, DataTable } from "@common/components"; +import { PostingApi, type PostPayload } from "@/entities/posting"; import { ENDPOINT } from "@/shared/config"; +import { useAlertStore } from "@/shared/lib"; import { SurveyApi } from "../api/survey-service"; +import { columns } from "../model/posting-table-columns"; function DetailPage({ srvySn }: { srvySn: string }) { const router = useRouter(); const pathname = usePathname(); + const { confirm } = useConfirm(); + const queryClient = useQueryClient(); + const alert = useAlertStore((state) => state.setMessage); + + const [rowSelection, setRowSelection] = useState({}); const { data: surveyInfo } = useQuery({ queryKey: [ENDPOINT.CMS_SERVICE.SURVEY, srvySn], queryFn: () => SurveyApi.getSurveyInfo(parseInt(srvySn)), }); + const { data: postHistory } = useQuery({ + queryKey: [ENDPOINT.CMS_SERVICE.POSTINGS, srvySn], + queryFn: () => + PostingApi.getPostingHistory({ pstgTrgtNo: parseInt(srvySn) }), + }); + + const { mutateAsync: savePostingHistory } = useMutation({ + mutationFn: (data: PostPayload[]) => PostingApi.savePosting(data), + onSuccess: () => { + queryClient.invalidateQueries({ + queryKey: [ENDPOINT.CMS_SERVICE.POSTINGS, srvySn], + }); + alert("삭제되었습니다."); + }, + }); + + const table = useReactTable({ + data: postHistory?.content ?? [], + columns, + state: { + rowSelection, + }, + enableMultiRowSelection: true, + getCoreRowModel: getCoreRowModel(), + onRowSelectionChange: setRowSelection, + }); + + const handleDeletePostingHistory = async () => { + const data = table.getFilteredSelectedRowModel().rows.map((row) => ({ + ...row.original, + mode: "D", + })); + + if (await confirm("삭제하시겠습니까?")) { + savePostingHistory(data); + setRowSelection({}); + } + }; + return ( -
-
-

설문 상세

-
- - - +
+
+
+

설문 상세

+
+ + + +
+
+
    +
  • + 설문 제목 +

    {surveyInfo?.srvyTtl}

    +
    • +
  • + 설문 목적 +

    {surveyInfo?.srvyPrps}

    +
    • +
  • + + 설문 작성 안내 내용 + +

    {surveyInfo?.srvyWrtGdCn}

    +
    • +
  • + 설문 대상 +

    {surveyInfo?.srvyTrgt}

    +
    • +
+
+
+
+

사이트 게시 이력

+
+
+
+ +
+
-
    -
  • - 설문 제목 -

    {surveyInfo?.srvyTtl}

    -
    • -
  • - 설문 목적 -

    {surveyInfo?.srvyPrps}

    -
    • -
  • - - 설문 작성 안내 내용 - -

    {surveyInfo?.srvyWrtGdCn}

    -
    • -
  • - 설문 대상 -

    {surveyInfo?.srvyTrgt}

    -
    • -
); } diff --git a/apps/cs/src/pages/survey/ui/survey-page.tsx b/apps/cs/src/pages/survey/ui/survey-page.tsx index 4288d2235..ff660460a 100644 --- a/apps/cs/src/pages/survey/ui/survey-page.tsx +++ b/apps/cs/src/pages/survey/ui/survey-page.tsx @@ -15,7 +15,7 @@ import { AuthorityButton } from "@/entities/menu-authority"; import { ENDPOINT } from "@/shared/config"; import { SurveyApi } from "../api/survey-service"; import type { Survey, SurveyParams } from "../model/survey-interface"; -import { columns } from "../model/table-columns"; +import { columns } from "../model/survey-table-columns"; type PostingTarget = { pstgTrgtNm: string;