feat: 게시글 폼 수정
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
@@ -10,7 +11,7 @@ import {
|
||||
type PostUpdateFormData,
|
||||
} from "@/entities/post";
|
||||
import { ENDPOINT } from "@/shared/config";
|
||||
import { useAlertStore, useUserStore } from "@/shared/lib";
|
||||
import { setCookie, useAlertStore, useUserStore } from "@/shared/lib";
|
||||
|
||||
function ModifyPage({ bbsId, pstNo }: { bbsId: string; pstNo: string }) {
|
||||
const { setMessage: alert } = useAlertStore((state) => state);
|
||||
@@ -38,6 +39,10 @@ function ModifyPage({ bbsId, pstNo }: { bbsId: string; pstNo: string }) {
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setCookie("atfl-cd-key", "");
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="card card-border !mt-6">
|
||||
<div className="card-header">
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
@@ -10,7 +11,7 @@ import {
|
||||
type PostUpdateFormData,
|
||||
} from "@/entities/post";
|
||||
import { ENDPOINT } from "@/shared/config";
|
||||
import { useAlertStore, useUserStore } from "@/shared/lib";
|
||||
import { setCookie, useAlertStore, useUserStore } from "@/shared/lib";
|
||||
|
||||
function ModifyPage({ bbsId, pstNo }: { bbsId: string; pstNo: string }) {
|
||||
const { setMessage: alert } = useAlertStore((state) => state);
|
||||
@@ -38,6 +39,10 @@ function ModifyPage({ bbsId, pstNo }: { bbsId: string; pstNo: string }) {
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setCookie("atfl-cd-key", "");
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="card card-border !mt-6">
|
||||
<div className="card-header">
|
||||
|
||||
@@ -257,39 +257,36 @@ function PostForm<T extends PostFormData | PostUpdateFormData>({
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={"popupYnEtc" as FieldPath<T>}
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<PeriodSelector
|
||||
periodCode={
|
||||
form.getValues().popupYnEtc?.[0]?.pstgPrdSeCd ??
|
||||
null
|
||||
}
|
||||
disabled={
|
||||
form.getValues("popupYn" as FieldPath<T>) ===
|
||||
"N"
|
||||
}
|
||||
handlePeriodValueChange={(periodCode) => {
|
||||
field.onChange([
|
||||
{
|
||||
...(form.getValues().popupYnEtc?.[0] ?? {}),
|
||||
bbsPstgTypeCd: BOARD_POSTING_CODE.팝업게시,
|
||||
pstgPrdSeCd: periodCode,
|
||||
},
|
||||
]);
|
||||
}}
|
||||
handlePostingDateChange={(date) => {
|
||||
field.onChange([
|
||||
{
|
||||
...(form.getValues().popupYnEtc?.[0] ?? {}),
|
||||
...date,
|
||||
},
|
||||
]);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
render={({ field }) => {
|
||||
const fieldValues = form.getValues().popupYnEtc?.[0];
|
||||
return (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<PeriodSelector
|
||||
defaultValues={{ ...fieldValues }}
|
||||
disabled={
|
||||
form.getValues("popupYn" as FieldPath<T>) ===
|
||||
"N"
|
||||
}
|
||||
handlePeriodValueChange={(periodCode, date) => {
|
||||
field.onChange([
|
||||
{
|
||||
...fieldValues,
|
||||
...date,
|
||||
bbsPstgTypeCd:
|
||||
BOARD_POSTING_CODE.팝업게시,
|
||||
pstgPrdSeCd: periodCode,
|
||||
},
|
||||
]);
|
||||
}}
|
||||
handlePostingDateChange={(date) => {
|
||||
field.onChange([{ ...fieldValues, ...date }]);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</TableCell>
|
||||
@@ -327,41 +324,37 @@ function PostForm<T extends PostFormData | PostUpdateFormData>({
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={"upndFixYnEtc" as FieldPath<T>}
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<PeriodSelector
|
||||
periodCode={
|
||||
form.getValues().upndFixYnEtc?.[0]
|
||||
?.pstgPrdSeCd ?? null
|
||||
}
|
||||
disabled={
|
||||
form.getValues("upndFixYn" as FieldPath<T>) ===
|
||||
"N"
|
||||
}
|
||||
handlePeriodValueChange={(periodCode) => {
|
||||
field.onChange([
|
||||
{
|
||||
...(form.getValues().upndFixYnEtc?.[0] ??
|
||||
{}),
|
||||
bbsPstgTypeCd: BOARD_POSTING_CODE.상단게시,
|
||||
pstgPrdSeCd: periodCode,
|
||||
},
|
||||
]);
|
||||
}}
|
||||
handlePostingDateChange={(date) => {
|
||||
field.onChange([
|
||||
{
|
||||
...(form.getValues().upndFixYnEtc?.[0] ??
|
||||
{}),
|
||||
...date,
|
||||
},
|
||||
]);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
render={({ field }) => {
|
||||
const fieldValues = form.getValues().upndFixYnEtc?.[0];
|
||||
return (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<PeriodSelector
|
||||
defaultValues={{ ...fieldValues }}
|
||||
disabled={
|
||||
form.getValues(
|
||||
"upndFixYn" as FieldPath<T>,
|
||||
) === "N"
|
||||
}
|
||||
handlePeriodValueChange={(periodCode, date) => {
|
||||
field.onChange([
|
||||
{
|
||||
...fieldValues,
|
||||
...date,
|
||||
bbsPstgTypeCd:
|
||||
BOARD_POSTING_CODE.상단게시,
|
||||
pstgPrdSeCd: periodCode,
|
||||
},
|
||||
]);
|
||||
}}
|
||||
handlePostingDateChange={(date) => {
|
||||
field.onChange([{ ...fieldValues, ...date }]);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</TableCell>
|
||||
@@ -399,41 +392,37 @@ function PostForm<T extends PostFormData | PostUpdateFormData>({
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={"prdPstgYnEtc" as FieldPath<T>}
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<PeriodSelector
|
||||
periodCode={
|
||||
form.getValues().prdPstgYnEtc?.[0]
|
||||
?.pstgPrdSeCd ?? null
|
||||
}
|
||||
disabled={
|
||||
form.getValues("prdPstgYn" as FieldPath<T>) ===
|
||||
"N"
|
||||
}
|
||||
handlePeriodValueChange={(periodCode) => {
|
||||
field.onChange([
|
||||
{
|
||||
...(form.getValues().prdPstgYnEtc?.[0] ??
|
||||
{}),
|
||||
bbsPstgTypeCd: BOARD_POSTING_CODE.기간게시,
|
||||
pstgPrdSeCd: periodCode,
|
||||
},
|
||||
]);
|
||||
}}
|
||||
handlePostingDateChange={(date) => {
|
||||
field.onChange([
|
||||
{
|
||||
...(form.getValues().prdPstgYnEtc?.[0] ??
|
||||
{}),
|
||||
...date,
|
||||
},
|
||||
]);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
render={({ field }) => {
|
||||
const fieldValues = form.getValues().prdPstgYnEtc?.[0];
|
||||
return (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<PeriodSelector
|
||||
defaultValues={{ ...fieldValues }}
|
||||
disabled={
|
||||
form.getValues(
|
||||
"prdPstgYn" as FieldPath<T>,
|
||||
) === "N"
|
||||
}
|
||||
handlePeriodValueChange={(periodCode, date) => {
|
||||
field.onChange([
|
||||
{
|
||||
...fieldValues,
|
||||
...date,
|
||||
bbsPstgTypeCd:
|
||||
BOARD_POSTING_CODE.기간게시,
|
||||
pstgPrdSeCd: periodCode,
|
||||
},
|
||||
]);
|
||||
}}
|
||||
handlePostingDateChange={(date) => {
|
||||
field.onChange([{ ...fieldValues, ...date }]);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</TableCell>
|
||||
@@ -494,25 +483,33 @@ function PostForm<T extends PostFormData | PostUpdateFormData>({
|
||||
);
|
||||
}
|
||||
|
||||
type PostingDate = {
|
||||
pstgBgngDt: string | undefined;
|
||||
pstgEndDt: string | undefined;
|
||||
};
|
||||
|
||||
const PeriodSelector = ({
|
||||
periodCode,
|
||||
defaultValues,
|
||||
disabled,
|
||||
handlePeriodValueChange,
|
||||
handlePostingDateChange,
|
||||
}: {
|
||||
periodCode: string | null;
|
||||
defaultValues?: {
|
||||
pstgPrdSeCd?: string | null;
|
||||
pstgBgngDt?: string | null;
|
||||
pstgEndDt?: string | null;
|
||||
};
|
||||
disabled: boolean;
|
||||
handlePeriodValueChange: (periodCode: string) => void;
|
||||
handlePostingDateChange: (date?: {
|
||||
pstgBgngDt: string | undefined;
|
||||
pstgEndDt: string | undefined;
|
||||
}) => void;
|
||||
handlePeriodValueChange: (periodCode: string, date?: PostingDate) => void;
|
||||
handlePostingDateChange: (date?: PostingDate) => void;
|
||||
}) => {
|
||||
const handlePeriodCodeChange = (periodCode: string) => {
|
||||
handlePeriodValueChange(periodCode);
|
||||
handlePostingDateChange({
|
||||
pstgBgngDt: undefined,
|
||||
pstgEndDt: undefined,
|
||||
const [periodCode, setPeriodCode] = useState<string | null>(null);
|
||||
|
||||
const onPeriodCodeChange = (periodCode: string) => {
|
||||
setPeriodCode(periodCode);
|
||||
handlePeriodValueChange(periodCode, {
|
||||
pstgBgngDt: `${dayjs().format("YYYY-MM-DD 00:00:00")}`,
|
||||
pstgEndDt: `${dayjs().add(parseInt(periodCode), "day").format("YYYY-MM-DD 23:59:59")}`,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -526,7 +523,7 @@ const PeriodSelector = ({
|
||||
});
|
||||
};
|
||||
|
||||
const postingPeriod = (periodCode: number | null) => {
|
||||
const postingPeriodFormat = (periodCode: number | null) => {
|
||||
if (!periodCode) return "";
|
||||
if (periodCode === 99) return "상시";
|
||||
return `${dayjs().format("YYYY-MM-DD")} ~ ${dayjs()
|
||||
@@ -538,15 +535,26 @@ const PeriodSelector = ({
|
||||
<div className="flex items-center gap-4">
|
||||
<CodeSelect
|
||||
upCd="PSTGPRDCD"
|
||||
defaultValue={periodCode ?? ""}
|
||||
onValueChange={handlePeriodCodeChange}
|
||||
defaultValue={defaultValues?.pstgPrdSeCd ?? ""}
|
||||
onValueChange={onPeriodCodeChange}
|
||||
disabled={disabled}
|
||||
placeholder="기간 선택"
|
||||
/>
|
||||
{!!periodCode && (
|
||||
{periodCode ? (
|
||||
<span className="text-lg text-label">
|
||||
게시 기간: <u>{postingPeriod(parseInt(periodCode))}</u>
|
||||
게시 기간: <u>{postingPeriodFormat(parseInt(periodCode))}</u>
|
||||
</span>
|
||||
) : (
|
||||
defaultValues?.pstgBgngDt &&
|
||||
defaultValues?.pstgEndDt && (
|
||||
<span className="text-lg text-label">
|
||||
게시 기간:{" "}
|
||||
<u>
|
||||
{dayjs(defaultValues?.pstgBgngDt).format("YYYY-MM-DD")} ~{" "}
|
||||
{dayjs(defaultValues?.pstgEndDt).format("YYYY-MM-DD")}
|
||||
</u>
|
||||
</span>
|
||||
)
|
||||
)}
|
||||
{periodCode === "0" && (
|
||||
<DateRangePicker handleDateChange={onDateChange} />
|
||||
|
||||
Reference in New Issue
Block a user