From c3fc0eb96b9a42e123e95c55a2e3fd93747cc750 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Tue, 13 May 2025 15:09:56 +0900
Subject: [PATCH] =?UTF-8?q?design:=20=EB=B8=94=EB=9E=99=20=ED=85=8C?=
 =?UTF-8?q?=EB=A7=88=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bbsimage/[bbsId]/[pstNo]/modify/page.tsx  | 10 ++++
 apps/common/features/package.json             |  1 +
 apps/common/features/src/app/index.tsx        |  2 +
 apps/common/features/src/app/styles/base.css  | 10 ++--
 .../features/src/pages/(pst)/image/index.ts   |  1 +
 .../src/pages/(pst)/image/ui/modify-page.tsx  | 53 +++++++++++++++++++
 .../post/model/grid-view-table-columns.tsx    | 34 +++++++-----
 .../src/widgets/post/ui/post-comment.tsx      | 16 +++---
 .../src/widgets/post/ui/post-form.tsx         |  2 +-
 .../features/src/widgets/post/ui/post.tsx     | 13 ++---
 .../post/ui/with-preview-file-uploader.tsx    | 20 +++++--
 apps/common/features/tailwind.config.ts       |  3 ++
 pnpm-lock.yaml                                |  7 +++
 13 files changed, 135 insertions(+), 37 deletions(-)
 create mode 100644 apps/common/features/app/(with-base-layout)/pst/bbsimage/[bbsId]/[pstNo]/modify/page.tsx
 create mode 100644 apps/common/features/src/pages/(pst)/image/ui/modify-page.tsx

diff --git a/apps/common/features/app/(with-base-layout)/pst/bbsimage/[bbsId]/[pstNo]/modify/page.tsx b/apps/common/features/app/(with-base-layout)/pst/bbsimage/[bbsId]/[pstNo]/modify/page.tsx
new file mode 100644
index 000000000..d7601ffd1
--- /dev/null
+++ b/apps/common/features/app/(with-base-layout)/pst/bbsimage/[bbsId]/[pstNo]/modify/page.tsx
@@ -0,0 +1,10 @@
+import { ModifyPage } from "@/pages/(pst)/image";
+
+export default async function PstBbsImagePostModifyPage({
+  params,
+}: {
+  params: Promise<{ bbsId: string; pstNo: string }>;
+}) {
+  const { bbsId, pstNo } = await params;
+  return <ModifyPage bbsId={bbsId} pstNo={pstNo} />;
+}
diff --git a/apps/common/features/package.json b/apps/common/features/package.json
index 88a5a66a1..8ec6639bf 100644
--- a/apps/common/features/package.json
+++ b/apps/common/features/package.json
@@ -13,6 +13,7 @@
     "@common/components": "workspace:*",
     "@common/config": "workspace:*",
     "@common/network": "workspace:*",
+    "@fontsource-variable/noto-sans-kr": "^5.2.5",
     "@frontend-opensource/use-react-hooks": "^1.1.4",
     "@hookform/resolvers": "^4.1.3",
     "@minoru/react-dnd-treeview": "^3.5.0",
diff --git a/apps/common/features/src/app/index.tsx b/apps/common/features/src/app/index.tsx
index 5a73f2fdd..692b55ef0 100644
--- a/apps/common/features/src/app/index.tsx
+++ b/apps/common/features/src/app/index.tsx
@@ -1,5 +1,7 @@
 import "./styles/base.css";
 import "./styles/components.css";
+import "@fontsource-variable/noto-sans-kr";
+
 import { AppProvider } from "./providers";
 import { cookies } from "next/headers";
 
diff --git a/apps/common/features/src/app/styles/base.css b/apps/common/features/src/app/styles/base.css
index a4f54680f..6cbb623bb 100644
--- a/apps/common/features/src/app/styles/base.css
+++ b/apps/common/features/src/app/styles/base.css
@@ -5,8 +5,10 @@
 @tailwind base;
 @tailwind utilities;
 
-html,
-body {
-  font-family: "Noto Sans KR", sans-serif;
-  font-size: 10px;
+@layer base {
+  html,
+  body {
+    font-family: "Noto Sans KR", sans-serif;
+    font-size: 10px;
+  }
 }
diff --git a/apps/common/features/src/pages/(pst)/image/index.ts b/apps/common/features/src/pages/(pst)/image/index.ts
index b3a860dfe..0bc16c1ad 100644
--- a/apps/common/features/src/pages/(pst)/image/index.ts
+++ b/apps/common/features/src/pages/(pst)/image/index.ts
@@ -1,3 +1,4 @@
 export { CreatePage } from "./ui/create-page";
+export { ModifyPage } from "./ui/modify-page";
 export { ImagePage } from "./ui/image-page";
 export { ImagePost } from "./ui/image-post";
diff --git a/apps/common/features/src/pages/(pst)/image/ui/modify-page.tsx b/apps/common/features/src/pages/(pst)/image/ui/modify-page.tsx
new file mode 100644
index 000000000..c721286e4
--- /dev/null
+++ b/apps/common/features/src/pages/(pst)/image/ui/modify-page.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { PostForm } from "@/widgets/post";
+import {
+  PostApi,
+  postUpdateFormSchema,
+  type PostUpdateFormData,
+} from "@/entities/post";
+import { ENDPOINT } from "@/shared/config";
+import { useAlertStore, useUserStore } from "@/shared/lib";
+
+function ModifyPage({ bbsId, pstNo }: { bbsId: string; pstNo: string }) {
+  const router = useRouter();
+  const { setMessage: alert } = useAlertStore((state) => state);
+  const { userInfo } = useUserStore((state) => state);
+
+  const { data: postInfo } = useQuery({
+    queryKey: [ENDPOINT.BOARD_SERVICE.POSTS_USER, bbsId, pstNo],
+    queryFn: () => PostApi.getPostInfo(bbsId, pstNo),
+  });
+
+  const { mutateAsync: updatePost } = useMutation({
+    mutationFn: (data: PostUpdateFormData) =>
+      PostApi.updatePost(bbsId, pstNo, data),
+    onSuccess: () => {
+      alert("수정되었습니다.", router.back);
+    },
+  });
+
+  const form = useForm<PostUpdateFormData>({
+    resolver: zodResolver(postUpdateFormSchema),
+    values: {
+      ...postInfo,
+      pstTtl: postInfo?.pstTtl ?? "",
+      pstPswd: userInfo?.userUnqId ?? "",
+    },
+  });
+
+  return (
+    <div className="card card-border !mt-6">
+      <div className="card-header">
+        <h3 className="text-2xl font-medium text-label">이미지 게시글 수정</h3>
+      </div>
+      <PostForm form={form} handleSave={updatePost} />
+    </div>
+  );
+}
+
+export { ModifyPage };
diff --git a/apps/common/features/src/widgets/post/model/grid-view-table-columns.tsx b/apps/common/features/src/widgets/post/model/grid-view-table-columns.tsx
index 66c144053..4969d2c77 100644
--- a/apps/common/features/src/widgets/post/model/grid-view-table-columns.tsx
+++ b/apps/common/features/src/widgets/post/model/grid-view-table-columns.tsx
@@ -38,9 +38,9 @@ export const createColumns = (
               <Badge color="blue">NEW</Badge>
             )}
           </div>
-          <div className="flex items-start gap-2 text-left">
-            <span className="text-3xl font-bold leading-none">{pstTtl}</span>
-          </div>
+          <span className="text-3xl font-bold leading-none text-label">
+            {pstTtl}
+          </span>
         </div>
       );
     },
@@ -49,7 +49,6 @@ export const createColumns = (
     id: "atflCd",
     cell: ({ row }) => {
       const atflCd = row.original.atflCd;
-      if (!atflCd) return null;
       return (
         <ThumbImage
           atflCd={atflCd}
@@ -63,13 +62,15 @@ export const createColumns = (
     id: "rgtrNm",
     cell: ({ row }) => {
       const { rgtrNm } = row.original;
-      return <span className="text-[1.4rem] font-bold">{rgtrNm}</span>;
+      return (
+        <span className="text-[1.4rem] font-bold text-label">{rgtrNm}</span>
+      );
     },
   },
   {
     id: "regDt",
     cell: ({ row }) => (
-      <span className="text-[1.2rem]">
+      <span className="text-[1.2rem] text-label">
         {dayjs(row.original.regDt).format("YYYY-MM-DD")}
       </span>
     ),
@@ -102,16 +103,21 @@ const ThumbImage = ({ atflCd, pstNo, thumbRefs }: ThumbImageProps) => {
       </div>
     );
 
-  if (!imageUrl) return null;
+  if (imageUrl)
+    return (
+      <div className="relative my-6 flex h-[16rem] w-full items-center justify-center">
+        <Image
+          src={imageUrl}
+          className="object-contain"
+          fill
+          alt="썸네일 이미지"
+        />
+      </div>
+    );
 
   return (
-    <div className="relative my-6 flex h-[16rem] w-full items-center justify-center">
-      <Image
-        src={imageUrl}
-        className="object-contain"
-        fill
-        alt="썸네일 이미지"
-      />
+    <div className="my-6 flex h-[16rem] w-full items-center justify-center rounded-sm border border-border bg-background">
+      <i className="diveicon di-image text-3xl" />
     </div>
   );
 };
diff --git a/apps/common/features/src/widgets/post/ui/post-comment.tsx b/apps/common/features/src/widgets/post/ui/post-comment.tsx
index 0bddc1e81..983865935 100644
--- a/apps/common/features/src/widgets/post/ui/post-comment.tsx
+++ b/apps/common/features/src/widgets/post/ui/post-comment.tsx
@@ -125,7 +125,7 @@ function PostComment({ bbsId, pstNo }: { bbsId: number; pstNo: number }) {
                 <FormControl>
                   <Textarea
                     maxLength={1000}
-                    className="h-[10rem] bg-background p-4 !text-[1.3rem] !leading-6"
+                    className="h-[10rem] bg-background p-4 !text-[1.3rem] !leading-6 text-foreground"
                     placeholder="댓글을 입력해주세요."
                     {...field}
                   />
@@ -145,7 +145,7 @@ function PostComment({ bbsId, pstNo }: { bbsId: number; pstNo: number }) {
                         <Input
                           {...field}
                           value={field.value ?? ""}
-                          className="w-[16rem] bg-background !text-[1.3rem]"
+                          className="w-[16rem] bg-background !text-[1.3rem] text-foreground"
                           placeholder="작성자"
                         />
                       </FormControl>
@@ -164,7 +164,7 @@ function PostComment({ bbsId, pstNo }: { bbsId: number; pstNo: number }) {
                           {...field}
                           type="password"
                           value={field.value ?? ""}
-                          className="w-[12rem] bg-background !text-[1.3rem]"
+                          className="w-[12rem] bg-background !text-[1.3rem] text-foreground"
                           placeholder="비밀번호"
                         />
                       </FormControl>
@@ -187,10 +187,10 @@ function PostComment({ bbsId, pstNo }: { bbsId: number; pstNo: number }) {
             >
               <div className="flex w-full gap-10">
                 <div className="flex w-[10rem] shrink-0 flex-col">
-                  <span className="text-[1.4rem] font-bold">
+                  <span className="text-[1.4rem] font-bold text-label">
                     {comment.wrtrNm}
                   </span>
-                  <span className="text-[1.2rem] text-gray-500">
+                  <span className="text-[1.2rem] text-label">
                     {dayjs(comment.regDt).format("YYYY.MM.DD")}
                   </span>
                 </div>
@@ -200,7 +200,7 @@ function PostComment({ bbsId, pstNo }: { bbsId: number; pstNo: number }) {
                       value={editValue}
                       onChange={(e) => setEditValue(e.target.value)}
                       maxLength={1000}
-                      className="h-[10rem] bg-background p-4 !text-[1.3rem] !leading-6"
+                      className="h-[10rem] bg-background p-4 !text-[1.3rem] !leading-6 text-foreground"
                     />
                     <div className="flex gap-2">
                       <Button
@@ -224,7 +224,9 @@ function PostComment({ bbsId, pstNo }: { bbsId: number; pstNo: number }) {
                     </div>
                   </div>
                 ) : (
-                  <p className="break-all text-[1.4rem]">{comment.cmntCn}</p>
+                  <p className="break-all text-[1.4rem] text-foreground">
+                    {comment.cmntCn}
+                  </p>
                 )}
               </div>
               <div className="flex gap-2 whitespace-nowrap">
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 d84cb179a..928aef922 100644
--- a/apps/common/features/src/widgets/post/ui/post-form.tsx
+++ b/apps/common/features/src/widgets/post/ui/post-form.tsx
@@ -155,7 +155,7 @@ function PostForm<T extends PostFormData | PostUpdateFormData>({
                             {...field}
                             value={(field.value as string) ?? ""}
                             onChange={field.onChange}
-                            className="h-[20rem] w-full !text-[1.3rem]"
+                            className="h-[20rem] w-full bg-form !text-[1.3rem] !leading-6"
                             placeholder="내용을 입력해주세요"
                           />
                         </FormControl>
diff --git a/apps/common/features/src/widgets/post/ui/post.tsx b/apps/common/features/src/widgets/post/ui/post.tsx
index f000c52ae..60044d2b2 100644
--- a/apps/common/features/src/widgets/post/ui/post.tsx
+++ b/apps/common/features/src/widgets/post/ui/post.tsx
@@ -106,7 +106,9 @@ function Post({ bbsId, pstNo }: { bbsId: string; pstNo: string }) {
     <>
       <PostAction bbsId={bbsId} pstNo={pstNo} handleDelete={handleDelete}>
         <div className="card card-border !p-8">
-          <h3 className="text-[2rem] font-bold">{postData?.pstTtl}</h3>
+          <h3 className="text-[2rem] font-bold text-foreground">
+            {postData?.pstTtl}
+          </h3>
           <div className="card !m-0 !mt-8 bg-accent">
             <ul className="flex gap-8 p-4 text-xl text-label">
               <li>
@@ -134,10 +136,9 @@ function Post({ bbsId, pstNo }: { bbsId: string; pstNo: string }) {
               )}
             </div>
           )}
-          <div
-            className="min-h-[40rem] p-8"
-            dangerouslySetInnerHTML={{ __html: postData?.pstCn ?? "" }}
-          />
+          <pre className="font-noto min-h-[40rem] whitespace-pre-wrap p-8 text-2xl tracking-tighter text-foreground">
+            {postData?.pstCn ?? ""}
+          </pre>
           {isFetching ? (
             <div className="p-8">
               <Skeleton className="h-[2.5rem] w-[32rem]" />
@@ -147,7 +148,7 @@ function Post({ bbsId, pstNo }: { bbsId: string; pstNo: string }) {
               <>
                 <hr />
                 <div className="flex items-center gap-4 p-8">
-                  <span className="font-bold">첨부파일</span>
+                  <span className="font-bold text-label">첨부파일</span>
                   <Button
                     size="sm"
                     color="white"
diff --git a/apps/common/features/src/widgets/post/ui/with-preview-file-uploader.tsx b/apps/common/features/src/widgets/post/ui/with-preview-file-uploader.tsx
index d7f0d5063..7dc8bee90 100644
--- a/apps/common/features/src/widgets/post/ui/with-preview-file-uploader.tsx
+++ b/apps/common/features/src/widgets/post/ui/with-preview-file-uploader.tsx
@@ -1,5 +1,5 @@
 import Image from "next/image";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import type { HttpResponse } from "tus-js-client";
 import type { FieldPath, UseFormReturn } from "react-hook-form";
 import { FileUploader, Label, Progress } from "@common/components";
@@ -10,6 +10,7 @@ import { setCookie, useAlertStore, useMenuStore } from "@/shared/lib";
 
 function WithPreviewFileUploader<T extends PostFormData | PostUpdateFormData>({
   form,
+  attachmentData,
 }: {
   form: UseFormReturn<T>;
   attachmentData?: Attachment[];
@@ -32,7 +33,8 @@ function WithPreviewFileUploader<T extends PostFormData | PostUpdateFormData>({
     const { atflCd, atflId } = JSON.parse(fileInfo) ?? {};
     if (atflCd) form.setValue("atflCd" as FieldPath<T>, atflCd);
     if (atflId) {
-      setThumbnailUrl(await AttachmentApi.getImageUrl(atflId));
+      const imageUrl = await AttachmentApi.getImageUrl(atflId);
+      setThumbnailUrl(imageUrl);
     }
   };
 
@@ -41,9 +43,6 @@ function WithPreviewFileUploader<T extends PostFormData | PostUpdateFormData>({
   };
 
   const onUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const atflCd = form.getValues("atflCd" as FieldPath<T>);
-    if (atflCd) setCookie("atfl-cd-key", atflCd as string);
-
     const files = e.target.files;
     if (!files) return;
     if (bbsInfo?.atflMaxCnt && files.length > bbsInfo.atflMaxCnt) {
@@ -57,6 +56,7 @@ function WithPreviewFileUploader<T extends PostFormData | PostUpdateFormData>({
         alert("첨부파일 최대 크기를 초과했습니다.");
         return;
       }
+      setCookie("atfl-cd-key", "");
       handleTusUpload(file, {
         handleResponse: handleTusResponse,
         handleProgress,
@@ -64,6 +64,16 @@ function WithPreviewFileUploader<T extends PostFormData | PostUpdateFormData>({
     }
   };
 
+  useEffect(() => {
+    if (!attachmentData || attachmentData.length === 0) return;
+    (async () => {
+      const imageUrl = await AttachmentApi.getImageUrl(
+        attachmentData[0]?.atflId as string,
+      );
+      setThumbnailUrl(imageUrl);
+    })();
+  }, [attachmentData]);
+
   return (
     <FileUploader
       id="atflCd"
diff --git a/apps/common/features/tailwind.config.ts b/apps/common/features/tailwind.config.ts
index 2e70675c9..415b9a736 100644
--- a/apps/common/features/tailwind.config.ts
+++ b/apps/common/features/tailwind.config.ts
@@ -13,6 +13,9 @@ export default {
       boxShadow: {
         blur: "0 0 10px -1px rgba(0, 0, 0, 0.06)",
       },
+      fontFamily: {
+        noto: ['"Noto Sans KR"', "sans-serif"],
+      },
     },
   },
   plugins: [tailwindcssAnimate],
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 98c9b9026..eaef040f5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -51,6 +51,9 @@ importers:
       '@common/network':
         specifier: workspace:*
         version: link:../../../packages/common/network
+      '@fontsource-variable/noto-sans-kr':
+        specifier: ^5.2.5
+        version: 5.2.5
       '@frontend-opensource/use-react-hooks':
         specifier: ^1.1.4
         version: 1.1.4
@@ -1734,6 +1737,10 @@ packages:
     resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==}
     dev: false
 
+  /@fontsource-variable/noto-sans-kr@5.2.5:
+    resolution: {integrity: sha512-dIJyVPIBRJXtvaFmQ6GKCV93J9Fx3O2Ym5C3gDRcz5zLpEigrnlEfBnsXBUv4aDBHEF/gm/Q07d40dddGxFytg==}
+    dev: false
+
   /@frontend-opensource/use-react-hooks@1.1.4:
     resolution: {integrity: sha512-otCSyciL5MVCNNYmdDdg2lEL6rbZ3XX1meYQCzapUSC4V6qx2YxMk1kUbhwEM/+vdxhYzBHsVBGD0rZWl5cgrw==}
     dependencies: