From 77539bb7855e572467b56d5d5d50d31e2cf18a5a Mon Sep 17 00:00:00 2001 From: bicochan Date: Tue, 8 Apr 2025 13:59:04 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20form=20wrapper=20=EC=84=A0=EC=96=B8?= =?UTF-8?q?=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/cs/src/entities/code/@x/posting.ts | 1 + .../entities/posting/ui/posting-dialog.tsx | 4 +- apps/cs/src/entities/site/@x/posting.ts | 2 + .../src/entities/site/model/site-interface.ts | 16 +- apps/cs/src/pages/banner/ui/banner-form.tsx | 482 ++++++------- apps/cs/src/pages/image/ui/image-form.tsx | 497 ++++++------- apps/cs/src/pages/menu/ui/menu-form.tsx | 89 +-- apps/cs/src/pages/site/ui/create-page.tsx | 4 +- .../site/ui/domain-management-dialog.tsx | 308 ++++---- .../pages/site/ui/ip-management-dialog.tsx | 266 ++++--- apps/cs/src/pages/site/ui/site-form.tsx | 667 ++++++++---------- apps/cs/src/widgets/form-wrapper/index.ts | 1 + .../widgets/form-wrapper/ui/form-wrapper.tsx | 68 ++ 13 files changed, 1146 insertions(+), 1259 deletions(-) create mode 100644 apps/cs/src/entities/code/@x/posting.ts create mode 100644 apps/cs/src/entities/site/@x/posting.ts create mode 100644 apps/cs/src/widgets/form-wrapper/index.ts create mode 100644 apps/cs/src/widgets/form-wrapper/ui/form-wrapper.tsx diff --git a/apps/cs/src/entities/code/@x/posting.ts b/apps/cs/src/entities/code/@x/posting.ts new file mode 100644 index 000000000..0525684d9 --- /dev/null +++ b/apps/cs/src/entities/code/@x/posting.ts @@ -0,0 +1 @@ +export { CodeSelect } from "../ui/code-select"; diff --git a/apps/cs/src/entities/posting/ui/posting-dialog.tsx b/apps/cs/src/entities/posting/ui/posting-dialog.tsx index d7c0b60ca..b49e541c2 100644 --- a/apps/cs/src/entities/posting/ui/posting-dialog.tsx +++ b/apps/cs/src/entities/posting/ui/posting-dialog.tsx @@ -25,8 +25,8 @@ import { DialogFooter, } from "@common/components/ui"; import { cn } from "@common/components/lib"; -import { CodeSelect } from "@/entities/code"; -import { SiteApi, type Site } from "@/entities/site"; +import { CodeSelect } from "@/entities/code/@x/posting"; +import { SiteApi, type Site } from "@/entities/site/@x/posting"; import type { PageableList } from "@/shared/model"; import { ENDPOINT } from "@/shared/config"; import { PostingApi } from "../api/posting-service"; diff --git a/apps/cs/src/entities/site/@x/posting.ts b/apps/cs/src/entities/site/@x/posting.ts new file mode 100644 index 000000000..6470b3cb2 --- /dev/null +++ b/apps/cs/src/entities/site/@x/posting.ts @@ -0,0 +1,2 @@ +export { SiteApi } from "../api/site-service"; +export type { Site } from "../model/site-interface"; diff --git a/apps/cs/src/entities/site/model/site-interface.ts b/apps/cs/src/entities/site/model/site-interface.ts index 85b1f802f..8846f59b9 100644 --- a/apps/cs/src/entities/site/model/site-interface.ts +++ b/apps/cs/src/entities/site/model/site-interface.ts @@ -35,17 +35,17 @@ export interface SiteDetail extends SiteFormData { export const siteFormSchema = z.object({ siteId: z.string().max(2).nonempty(), siteNm: z.string().max(100).nonempty(), - siteExpln: z.string().max(1000).nullable(), + siteExpln: z.string().max(1000).nullish(), siteKndCd: z.string().max(10).nonempty(), - siteAddr: z.string().max(2000).nullable(), - faxNo: z.string().max(100).nullable(), - telNo: z.string().max(1000).nullable(), - lwndCn: z.string().max(2000).nullable(), + siteAddr: z.string().max(2000).nullish(), + faxNo: z.string().max(100).nullish(), + telNo: z.string().max(1000).nullish(), + lwndCn: z.string().max(2000).nullish(), bscSiteYn: z.string(), - bkmkIcon: z.string().max(100).nullable(), + bkmkIcon: z.string().max(100).nullish(), useYn: z.string(), - siteSkn: z.string().max(10).nullable(), - dmnAddr: z.string().nullable(), + siteSkn: z.string().max(10).nullish(), + dmnAddr: z.string().nullish(), }); export type SiteFormData = z.infer; diff --git a/apps/cs/src/pages/banner/ui/banner-form.tsx b/apps/cs/src/pages/banner/ui/banner-form.tsx index 4e283d45d..ade05f13e 100644 --- a/apps/cs/src/pages/banner/ui/banner-form.tsx +++ b/apps/cs/src/pages/banner/ui/banner-form.tsx @@ -2,13 +2,10 @@ import Image from "next/image"; import { useEffect, useState } from "react"; -import { useRouter } from "next/navigation"; import { useQuery } from "@tanstack/react-query"; import type { UseFormReturn } from "react-hook-form"; import type { HttpResponse, Upload } from "tus-js-client"; -import { useConfirm } from "@frontend-opensource/use-react-hooks"; import { - Button, FileUploader, Input, Label, @@ -25,9 +22,10 @@ import { import { CodeSelect } from "@/entities/code"; import { AttachmentApi } from "@/entities/attachment"; import { ENDPOINT } from "@/shared/config"; -import { Form, FormControl, FormField, FormItem } from "@/shared/ui/form"; +import { FormControl, FormField, FormItem } from "@/shared/ui/form"; import type { BannerFormData } from "../model/banner-interface"; import { handleUpload } from "../lib/utils"; +import { FormWrapper } from "@/widgets/form-wrapper"; type BannerFormProps = { form: UseFormReturn; @@ -36,17 +34,9 @@ type BannerFormProps = { handleDelete?: () => Promise; }; -function BannerForm({ - form, - bnrSn, - handleSave, - handleDelete, -}: BannerFormProps) { - const isModifyMode = !!bnrSn; +function BannerForm({ form, bnrSn, ...props }: BannerFormProps) { const atflCd = form.watch("atflCd"); - const router = useRouter(); - const { confirm } = useConfirm(); const [imageUrl, setImageUrl] = useState(""); const [upload, setUpload] = useState(null); const [progress, setProgress] = useState(0); @@ -58,22 +48,6 @@ function BannerForm({ enabled: !!atflCd, }); - const onSubmit = async (data: BannerFormData) => { - const confirmMessage = isModifyMode - ? "수정하시겠습니까?" - : "저장하시겠습니까?"; - - if (await confirm(confirmMessage)) { - await handleSave(data); - } - }; - - const onDelete = async () => { - if (await confirm("삭제하시겠습니까?")) { - await handleDelete?.(); - } - }; - const handleProgress = (percentage: string) => { setProgress(Number(percentage)); }; @@ -96,245 +70,223 @@ function BannerForm({ }, [atflId]); return ( - <> -
- -
- - - - - - - - 배너명 - - ( - - - - - - )} - /> - - - - 배너구분 - - ( - - - - - - )} - /> - - - - 배너 이미지 - - ( - - - { - const files = e.target.files; - if (!files) return; - handleUpload(files, { - handleUploadStart: setUpload, - handleProgress, - handleSuccess: setUpload, - handleResponse: handleUploadResponse, - }); - }} - customPreview={ - <> -
+ + + + + + + 배너명 + + ( + + + + + + )} + /> + + + + 배너구분 + + ( + + + + + + )} + /> + + + + 배너 이미지 + + ( + + + { + const files = e.target.files; + if (!files) return; + handleUpload(files, { + handleUploadStart: setUpload, + handleProgress, + handleSuccess: setUpload, + handleResponse: handleUploadResponse, + }); + }} + customPreview={ + <> +