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

refactor: 게시글 폼 리팩토링

Browse Source
This commit is contained in:
chanii8
2025-05-12 16:20:17 +09:00
parent aa56483f8d
commit 528c281859
4 changed files with 92 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/common/features/src/pages/(pst)/notice/ui/create-page.tsx
+1 -1
View File
@@ -36,7 +36,7 @@ function CreatePage({ bbsId }: { bbsId: string }) {
return (
<div className="card card-border !mt-6">
<div className="card-header">
<h3 className="text-2xl font-medium text-label">게시글 등록</h3>
<h3 className="text-2xl font-medium text-label">공지 게시글 등록</h3>
</div>
<PostForm form={form} handleSave={createPost} />
</div>
apps/common/features/src/pages/(pst)/notice/ui/modify-page.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ function ModifyPage({ bbsId, pstNo }: { bbsId: string; pstNo: string }) {
return (
<div className="card card-border !mt-6">
<div className="card-header">
<h3 className="text-2xl font-medium text-label">게시글 수정</h3>
<h3 className="text-2xl font-medium text-label">공지 게시글 수정</h3>
</div>
<PostForm form={form} handleSave={updatePost} />
</div>
apps/common/features/src/widgets/post/ui/post-form.tsx
+4 -86
View File
@@ -1,4 +1,3 @@
import dayjs from "dayjs";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { useQuery } from "@tanstack/react-query";
@@ -19,11 +18,9 @@ import {
TableHead,
TableRow,
Textarea,
DateRangePicker,
FileUploader,
Button,
} from "@common/components";
import { CodeSelect } from "@/entities/code";
import { handleTusUpload } from "@/entities/tus";
import { BOARD_POSTING_CODE, type Board } from "@/entities/board";
import { AttachmentApi, type Attachment } from "@/entities/attachment";
@@ -31,6 +28,7 @@ import type { Post, PostFormData, PostUpdateFormData } from "@/entities/post";
import { ENDPOINT } from "@/shared/config";
import { useUserStore, useAlertStore, setCookie } from "@/shared/lib";
import { Form, FormControl, FormField, FormItem } from "@/shared/ui/form";
import { PostingPeriodSelector } from "./posting-period-selector";
type PostFormProps<T extends PostFormData | PostUpdateFormData> = {
form: UseFormReturn<T>;
@@ -299,7 +297,7 @@ function PostForm<T extends PostFormData | PostUpdateFormData>({
return (
<FormItem>
<FormControl>
<PeriodSelector
<PostingPeriodSelector
defaultValues={{ ...fieldValues }}
disabled={
form.getValues(
@@ -373,7 +371,7 @@ function PostForm<T extends PostFormData | PostUpdateFormData>({
return (
<FormItem>
<FormControl>
<PeriodSelector
<PostingPeriodSelector
defaultValues={{ ...fieldValues }}
disabled={
form.getValues(
@@ -447,7 +445,7 @@ function PostForm<T extends PostFormData | PostUpdateFormData>({
return (
<FormItem>
<FormControl>
<PeriodSelector
<PostingPeriodSelector
defaultValues={{ ...fieldValues }}
disabled={
form.getValues(
@@ -547,84 +545,4 @@ function PostForm<T extends PostFormData | PostUpdateFormData>({
);
}
type PostingDate = {
pstgBgngDt: string | undefined;
pstgEndDt: string | undefined;
};
const PeriodSelector = ({
defaultValues,
disabled,
handlePeriodValueChange,
handlePostingDateChange,
}: {
defaultValues?: {
pstgPrdSeCd?: string | null;
pstgBgngDt?: string | null;
pstgEndDt?: string | null;
};
disabled: boolean;
handlePeriodValueChange: (periodCode: string, date?: PostingDate) => void;
handlePostingDateChange: (date?: PostingDate) => void;
}) => {
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")}`,
});
};
const onDateChange = (date?: {
from: Date | undefined;
to?: Date | undefined;
}) => {
handlePostingDateChange({
pstgBgngDt: dayjs(date?.from).format("YYYY-MM-DD 00:00:00"),
pstgEndDt: dayjs(date?.to).format("YYYY-MM-DD 23:59:59"),
});
};
const postingPeriodFormat = (periodCode: number | null) => {
if (!periodCode) return "";
if (periodCode === 99) return "상시";
return `${dayjs().format("YYYY-MM-DD")} ~ ${dayjs()
.add(periodCode, "day")
.format("YYYY-MM-DD")}`;
};
return (
<div className="flex items-center gap-4">
<CodeSelect
upCd="PSTGPRDCD"
defaultValue={defaultValues?.pstgPrdSeCd ?? ""}
onValueChange={onPeriodCodeChange}
disabled={disabled}
placeholder="기간 선택"
/>
{periodCode ? (
<span className="text-lg text-label">
게시 기간: <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} />
)}
</div>
);
};
export { PostForm };
apps/common/features/src/widgets/post/ui/posting-period-selector.tsx
+86
View File
@@ -0,0 +1,86 @@
import dayjs from "dayjs";
import { useState } from "react";
import { CodeSelect } from "@/entities/code";
import { DateRangePicker } from "@common/components";
type PostingDate = {
pstgBgngDt: string | undefined;
pstgEndDt: string | undefined;
};
function PostingPeriodSelector({
defaultValues,
disabled,
handlePeriodValueChange,
handlePostingDateChange,
}: {
defaultValues?: {
pstgPrdSeCd?: string | null;
pstgBgngDt?: string | null;
pstgEndDt?: string | null;
};
disabled: boolean;
handlePeriodValueChange: (periodCode: string, date?: PostingDate) => void;
handlePostingDateChange: (date?: PostingDate) => void;
}) {
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")}`,
});
};
const onDateChange = (date?: {
from: Date | undefined;
to?: Date | undefined;
}) => {
handlePostingDateChange({
pstgBgngDt: dayjs(date?.from).format("YYYY-MM-DD 00:00:00"),
pstgEndDt: dayjs(date?.to).format("YYYY-MM-DD 23:59:59"),
});
};
const postingPeriodFormat = (periodCode: number | null) => {
if (!periodCode) return "";
if (periodCode === 99) return "상시";
return `${dayjs().format("YYYY-MM-DD")} ~ ${dayjs()
.add(periodCode, "day")
.format("YYYY-MM-DD")}`;
};
return (
<div className="flex items-center gap-4">
<CodeSelect
upCd="PSTGPRDCD"
defaultValue={defaultValues?.pstgPrdSeCd ?? ""}
onValueChange={onPeriodCodeChange}
disabled={disabled}
placeholder="기간 선택"
/>
{periodCode ? (
<span className="text-lg text-label">
게시 기간: <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} />
)}
</div>
);
}
export { PostingPeriodSelector };