ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 사이트 반영 팝업 작업

Browse Source
This commit is contained in:
chanii8
2025-04-04 14:49:00 +09:00
parent d84bfe2a7c
commit 528cc39831
7 changed files with 151 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/cs/src/entities/posting/ui/posting-dialog.tsx
+75 -19
View File
@@ -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>
))}
packages/common/components/src/ui/calendar/index.tsx
+1 -1
View File
@@ -44,7 +44,7 @@ export function Calendar({
),
day_range_end: "day-range-end",
day_selected:
"!bg-primary !text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
day_today: "bg-accent text-accent-foreground",
day_outside:
"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
packages/common/components/src/ui/date-picker/date-picker.css
+1 -1
View File
@@ -2,6 +2,6 @@
@layer components {
.date-picker-trigger {
@apply h-[3rem] w-[12rem] justify-between border-input !bg-background px-4 py-2 text-left text-[1.3rem] font-normal leading-none text-muted-foreground hover:!bg-accent;
@apply h-[3rem] w-[12rem] justify-start border-input !bg-background px-4 py-2 text-left text-[1.3rem] font-normal text-muted-foreground hover:!bg-accent;
}
}
packages/common/components/src/ui/date-picker/date-picker.stories.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { useState } from "react";
import type { Meta, StoryObj } from "@storybook/react";
import { DatePicker } from ".";
import { useState } from "react";
const meta: Meta<typeof DatePicker> = {
title: "Elements/DatePicker",
packages/common/components/src/ui/date-picker/index.tsx
+1 -1
View File
@@ -19,12 +19,12 @@ export function DatePicker({ className, ...props }: DatePickerProps) {
variant="outline"
className={cn("date-picker-trigger", className)}
>
<CalendarIcon className="!size-[1.6rem]" />
{props.selected ? (
format(props.selected, "yyyy-MM-dd")
) : (
<span>날짜 선택</span>
)}
<CalendarIcon className="!size-[1.6rem]" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0">
packages/common/components/src/ui/date-range-picker/index.tsx
+71
View File
@@ -0,0 +1,71 @@
"use client";
import { useState } from "react";
import { format } from "date-fns";
import { CalendarIcon } from "lucide-react";
import type { DateRange } from "react-day-picker";
import { cn } from "../../lib/utils";
import { Button } from "../button";
import { Calendar } from "../calendar";
import { Popover, PopoverContent, PopoverTrigger } from "../popover";
type DateRangePickerProps = React.HTMLAttributes<HTMLDivElement> & {
disabled?: boolean;
handleDateChange?: (date: DateRange | undefined) => void;
};
export function DateRangePicker({
disabled,
className,
handleDateChange,
}: DateRangePickerProps) {
const [date, setDate] = useState<DateRange>();
const handleSelect = (date: DateRange | undefined) => {
setDate(date);
handleDateChange?.(date);
};
return (
<div className={cn("grid gap-2", className)}>
<Popover>
<PopoverTrigger asChild>
<Button
id="date"
variant="outline"
className={cn(
"h-[3.2rem] min-w-[12rem] justify-start border-input !bg-background px-4 py-2 text-left text-[1.3rem] font-normal text-muted-foreground hover:!bg-accent",
!date && "text-muted-foreground",
)}
disabled={disabled}
>
<CalendarIcon className="!size-[1.6rem]" />
{date?.from ? (
date.to ? (
<>
{format(date.from, "yyyy-MM-dd")} ~{" "}
{format(date.to, "yyyy-MM-dd")}
</>
) : (
format(date.from, "yyyy-MM-dd")
)
) : (
<span>기간 선택</span>
)}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<Calendar
initialFocus
mode="range"
defaultMonth={date?.from}
selected={date}
onSelect={handleSelect}
numberOfMonths={2}
/>
</PopoverContent>
</Popover>
</div>
);
}
packages/common/components/src/ui/index.ts
+1
View File
@@ -5,6 +5,7 @@ export * from "./calendar";
export * from "./checkbox";
export * from "./data-table";
export * from "./date-picker";
export * from "./date-range-picker";
export * from "./dialog";
export * from "./dropdown-menu";
export * from "./file-uploader";