fix(history): 역사 줄바꿈

Team-INSERT · Mar 18, 2024 · a5ab0ee · a5ab0ee
1 parent 5b289fc
commit a5ab0ee
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 10 deletions.
diff --git a/app/(docs)/docs/[title]/style.css.ts b/app/(docs)/docs/[title]/style.css.ts
@@ -10,6 +10,7 @@ export const container = style({
 export const body = style({
   width: "100%",
   whiteSpace: "pre-wrap",
+  ...font.p1,
 });
 
 export const contributorsBox = style({

diff --git a/app/history/[title]/detail/[id]/HistoryDetail.tsx b/app/history/[title]/detail/[id]/HistoryDetail.tsx
@@ -41,7 +41,9 @@ const HistoryDetail = ({
           return (
             <div key={id} className={styles.historyContent}>
               <div className={styles.historyOperation[dif.operation]}>{operationIcon}</div>
-              <div className={styles.history[dif.operation]}>{dif.text}</div>
+              <div className={styles.history[dif.operation]}>
+                {dif.text.replaceAll("<br>", "\n")}
+              </div>
             </div>
           );
         })}

diff --git a/app/history/[title]/detail/[id]/style.css.ts b/app/history/[title]/detail/[id]/style.css.ts
@@ -28,6 +28,7 @@ const historyBase = style({
   width: "100%",
   padding: "6px 8px",
   gap: "12px",
+  whiteSpace: "pre-wrap",
   opacity: 0.7,
   ...flex.VERTICAL,
 });

diff --git a/components/Editor/index.tsx b/components/Editor/index.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useCallback, useState } from "react";
+import React, { ChangeEvent, useCallback, useState } from "react";
 import { decodeContent, getYear } from "@/utils";
 import { ArrowIcon } from "@/assets";
 import { useDocs } from "@/hooks/useDocs";
@@ -65,15 +65,17 @@ const Editor = ({ contents = "", title = "", docsType = "", mode }: EditorPropsT
     docsType,
   });
 
-  const handleOpenComfirm = () => {
+  const handleOpenConfirm = () => {
     if (contents !== docs.contents.trim()) {
       openModal({
-        component: <Confirm content="변경 사항을 삭제하시겠습니까?" onConfirm={onClickUndo} />,
+        component: (
+          <Confirm content="변경 사항을 삭제하시겠습니까?" onConfirm={handleDocsUndoClick} />
+        ),
       });
     }
   };
 
-  const onClickUndo = () => {
+  const handleDocsUndoClick = () => {
     if (contents) {
       setDocs((prev) => ({
         ...prev,
@@ -87,7 +89,7 @@ const Editor = ({ contents = "", title = "", docsType = "", mode }: EditorPropsT
     const { url } = await upload(file);
     setDocs((prev) => {
       const first = prev.contents.substring(0, cursorPosition);
-      const middle = `<사진 {200px}>${url}</사진>`;
+      const middle = `\n<사진 {200px}>${url}</사진>\n`;
       const last = prev.contents.substring(cursorPosition, prev.contents.length);
       return {
         ...prev,
@@ -135,6 +137,10 @@ const Editor = ({ contents = "", title = "", docsType = "", mode }: EditorPropsT
     }
   };
 
+  const handleDocsContentsChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setDocs((prev) => ({ ...prev, contents: autoClosingTag(e).replaceAll("<br>", "\n") }));
+  };
+
   const buttonMode = {
     EDIT: {
       function: handleEditDocsClick,
@@ -177,7 +183,7 @@ const Editor = ({ contents = "", title = "", docsType = "", mode }: EditorPropsT
           <div className={styles.separator} />
           {mode === "EDIT" ? (
             <div>
-              <button onClick={handleOpenComfirm} className={styles.undoBtn}>
+              <button onClick={handleOpenConfirm} className={styles.undoBtn}>
                 되돌리기
               </button>
             </div>
@@ -204,9 +210,7 @@ const Editor = ({ contents = "", title = "", docsType = "", mode }: EditorPropsT
           )}
           <textarea
             onKeyDown={(e) => setCursorPosition((e.target as HTMLTextAreaElement).selectionStart)}
-            onChange={(e) =>
-              setDocs((prev) => ({ ...prev, contents: autoClosingTag(e).replaceAll("<br>", "\n") }))
-            }
+            onChange={handleDocsContentsChange}
             value={docs.contents.replaceAll("<br>", "\n")}
             placeholder="문서 내용을 입력해주세요. 사진 또는 동영상을 넣으려면 파일을 드래그&드롭하세요..."
             className={styles.textarea[String(isExampleOpen)]}