feat: 사이트 반영 팝업 작업

apps/cs/src/entities/posting/ui/posting-dialog.tsx

@@ -1,3 +1,4 @@
+import dayjs from "dayjs";
 import { useState } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
 import { useQuery } from "@tanstack/react-query";
@@ -17,22 +18,29 @@ import {
   TableRow,
   Checkbox,
   Select,
+  DateRangePicker,
 } from "@common/components/ui";
+import { cn } from "@common/components/lib";
 import { CodeSelect } from "@/entities/code";
 import { SiteApi, type Site } from "@/entities/site";
 import type { PageableList } from "@/shared/model";
 import { ENDPOINT } from "@/shared/config";
 import { type PostingType } from "../model/posting-interface";
 
-interface PostingTarget {
+type DateRange = {
+  from: string;
+  to?: string;
+};
+
+type PostingTarget = {
   pstgTrgtNm: string;
   pstgTrgtNo: number;
-}
+};
 
-interface PostingDialogProps {
+type PostingDialogProps = {
   postingType: PostingType;
   postingTargets: PostingTarget[];
-}
+};
 
 const POSTING_TYPE_LABEL = {
   POPUP: "팝업",
@@ -42,9 +50,12 @@ const POSTING_TYPE_LABEL = {
 
 function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
   const [selectedRows, setSelectedRows] = useState<number[]>([]);
-  const [rememberSelectValues, setRememberSelectValues] = useState<
+  const [rememberPeriodCode, setRememberPeriodCode] = useState<
     Record<string, string>
   >({});
+  const [rememberPeriodDate, setRememberPeriodDate] = useState<
+    Record<string, DateRange | undefined>
+  >({});
 
   const { data: siteList } = useQuery<PageableList<Site>>({
     queryKey: [ENDPOINT.CMS_SERVICE.SITES],
@@ -60,14 +71,22 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
   const isAllSelected =
     siteList && selectedRows.length === siteList.content.length;
 
-  const initialize = () => {
-    setSelectedRows([]);
-    replace([]);
+  const postingPeriod = (siteId: string) => {
+    const periodCode = Number(rememberPeriodCode[siteId]);
+
+    if (periodCode === 99) return "상시";
+
+    return `${dayjs().format("YYYY-MM-DD")} ~ ${dayjs()
+      .add(periodCode, "day")
+      .format("YYYY-MM-DD")}`;
   };
 
   const handleOpenChange = (open: boolean) => {
     if (open) return true;
-    initialize();
+    replace([]);
+    setSelectedRows([]);
+    setRememberPeriodCode({});
+    setRememberPeriodDate({});
   };
 
   const handleAppendFields = (i: number) => {
@@ -76,9 +95,9 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
       siteId,
       pstgTypeCd: postingType,
       pstgTrgtNo: target.pstgTrgtNo,
-      pstgBgngDt: "",
-      pstgEndDt: "",
-      pstgPrdSeCd: rememberSelectValues[siteId] ?? "",
+      pstgBgngDt: rememberPeriodDate[siteId]?.from ?? "",
+      pstgEndDt: rememberPeriodDate[siteId]?.to ?? "",
+      pstgPrdSeCd: rememberPeriodCode[siteId] ?? "",
       delYn: "N",
       mode: "C",
     }));
@@ -120,7 +139,8 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
 
   const handleSelectAll = () => {
     if (selectedRows.length === (siteList?.content.length ?? 0)) {
-      initialize();
+      replace([]);
+      setSelectedRows([]);
     } else {
       setSelectedRows(siteList?.content.map((_, i) => i) ?? []);
       replace([]);
@@ -128,8 +148,8 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
     }
   };
 
-  const handleSelectValueChange = (siteId: string) => (value: string) => {
-    setRememberSelectValues((prev) => ({
+  const handlePeriodCodeChange = (siteId: string) => (value: string) => {
+    setRememberPeriodCode((prev) => ({
       ...prev,
       [siteId]: value,
     }));
@@ -138,6 +158,20 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
     });
   };
 
+  const handlePeriodDateChange =
+    (siteId: string) => (value: DateRange | undefined) => {
+      const from = dayjs(value?.from).format("YYYY-MM-DD 00:00:00");
+      const to = dayjs(value?.to).format("YYYY-MM-DD 23:59:59");
+      setRememberPeriodDate((prev) => ({
+        ...prev,
+        [siteId]: { from, to },
+      }));
+      handleUpdateFields(siteId)({
+        pstgBgngDt: from,
+        pstgEndDt: to,
+      });
+    };
+
   return (
     <Dialog onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
@@ -192,10 +226,32 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
                   </TableCell>
                   <TableCell align="center">{site.siteNm}</TableCell>
                   <TableCell align="left">
-                    <PostingPeriodSelect
-                      onValueChange={handleSelectValueChange(site.siteId)}
-                      disabled={!selectedRows.includes(i)}
-                    />
+                    <div className="flex items-center gap-4">
+                      <PostingPeriodSelect
+                        onValueChange={handlePeriodCodeChange(site.siteId)}
+                        disabled={!selectedRows.includes(i)}
+                      />
+                      {!!Number(rememberPeriodCode[site.siteId]) && (
+                        <span
+                          className={cn(
+                            "text-lg text-label",
+                            !selectedRows.includes(i) && "text-muted",
+                          )}
+                        >
+                          게시 기간: <u>{postingPeriod(site.siteId)}</u>
+                        </span>
+                      )}
+                      {Number(rememberPeriodCode[site.siteId]) === 0 && (
+                        <DateRangePicker
+                          handleDateChange={(date) =>
+                            handlePeriodDateChange(site.siteId)(
+                              date as DateRange | undefined,
+                            )
+                          }
+                          disabled={!selectedRows.includes(i)}
+                        />
+                      )}
+                    </div>
                   </TableCell>
                 </TableRow>
               ))}