From 528c281859a7e0ceedab9efa6e580d0b8b20cb1c Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Mon, 12 May 2025 16:20:17 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20?=
 =?UTF-8?q?=ED=8F=BC=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/(pst)/notice/ui/create-page.tsx |  2 +-
 .../src/pages/(pst)/notice/ui/modify-page.tsx |  2 +-
 .../src/widgets/post/ui/post-form.tsx         | 90 +------------------
 .../post/ui/posting-period-selector.tsx       | 86 ++++++++++++++++++
 4 files changed, 92 insertions(+), 88 deletions(-)
 create mode 100644 apps/common/features/src/widgets/post/ui/posting-period-selector.tsx

diff --git a/apps/common/features/src/pages/(pst)/notice/ui/create-page.tsx b/apps/common/features/src/pages/(pst)/notice/ui/create-page.tsx
index ddbc22ece..37c21cb0d 100644
--- a/apps/common/features/src/pages/(pst)/notice/ui/create-page.tsx
+++ b/apps/common/features/src/pages/(pst)/notice/ui/create-page.tsx
@@ -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>
diff --git a/apps/common/features/src/pages/(pst)/notice/ui/modify-page.tsx b/apps/common/features/src/pages/(pst)/notice/ui/modify-page.tsx
index d6114ab44..bd014917f 100644
--- a/apps/common/features/src/pages/(pst)/notice/ui/modify-page.tsx
+++ b/apps/common/features/src/pages/(pst)/notice/ui/modify-page.tsx
@@ -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>
diff --git a/apps/common/features/src/widgets/post/ui/post-form.tsx b/apps/common/features/src/widgets/post/ui/post-form.tsx
index 6f238ec2f..8192b0a51 100644
--- a/apps/common/features/src/widgets/post/ui/post-form.tsx
+++ b/apps/common/features/src/widgets/post/ui/post-form.tsx
@@ -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 };
diff --git a/apps/common/features/src/widgets/post/ui/posting-period-selector.tsx b/apps/common/features/src/widgets/post/ui/posting-period-selector.tsx
new file mode 100644
index 000000000..1673df8c9
--- /dev/null
+++ b/apps/common/features/src/widgets/post/ui/posting-period-selector.tsx
@@ -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 };