Merge pull request #81 from Funssion-SWM/develop

fix: 코드하이라이팅, 개행 안되는 문제 해결
Funssion-SWM · Dec 7, 2023 · 8e9a2a2 · 8e9a2a2
2 parents 8a7c775 + e77083a
commit 8e9a2a2
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 22 deletions.
diff --git a/src/components/memo/MemoViewer.tsx b/src/components/memo/MemoViewer.tsx
@@ -4,7 +4,9 @@ import { generateHTML } from '@tiptap/html';
 import MemoViewerHeader from './MemoViewerHeader';
 import { handleTiptapExtensions } from '@/components/editor/extensions';
 import TagView from '../shared/TagView';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { EditorContent, useEditor } from '@tiptap/react';
+import { handleTiptapEditorProps } from '../editor/props';
 
 type Props = {
   title: string;
@@ -37,10 +39,24 @@ export default function MemoViewer({
   seriesTitle,
   isLogin,
 }: Props) {
+  const [hydrated, setHydrated] = useState(false);
+
+  const editor = useEditor({
+    extensions: handleTiptapExtensions('memo', memoId),
+    editorProps: handleTiptapEditorProps('memo', memoId),
+    editable: false,
+    content: content,
+  });
+
   const output = useMemo(() => {
     return generateHTML(content, handleTiptapExtensions('memo', memoId));
   }, [content]);
 
+  useEffect(() => {
+    editor?.commands.setContent(content);
+    setHydrated(true);
+  }, []);
+
   return (
     <section
       className={`flex flex-col sm:rounded-2xl sm:shadow-lg px-2 min-h-screen sm:min-h-for-fit-screen w-full pb-4 ${
@@ -75,12 +91,19 @@ export default function MemoViewer({
         {title}
       </h1>
       <div className="h-[0.5px] mx-3 my-4 bg-soma-grey-49"></div>
-      <div
-        className="flex-grow max-w-full px-4 prose-sm break-all sm:prose-lg prose-headings:my-2 prose-p:my-0 prose-stone dark:prose-invert prose-headings:font-display font-default focus:outline-none"
-        dangerouslySetInnerHTML={{
-          __html: output,
-        }}
-      ></div>
+      {hydrated ? (
+        <div className="flex-grow px-4 break-all">
+          <EditorContent editor={editor} />
+        </div>
+      ) : (
+        <div
+          className="hidden"
+          dangerouslySetInnerHTML={{
+            __html: output,
+          }}
+        ></div>
+      )}
+
       <div className="flex flex-wrap gap-1 mx-2 mt-10 mb-1">
         {memoTags.map((tag, idx) => (
           <TagView key={idx} tagText={tag} isLogin={isLogin} />

diff --git a/src/components/question/AnswerCard.tsx b/src/components/question/AnswerCard.tsx
@@ -1,9 +1,9 @@
-import { useEditor } from '@tiptap/react';
+import { EditorContent, useEditor } from '@tiptap/react';
 import { handleTiptapExtensions } from '../editor/extensions';
 import { handleTiptapEditorProps } from '../editor/props';
 import { Answer } from '@/types/answer';
 import AnswerCardHeader from './AnswerCardHeader';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { updateAnswer } from '@/service/answers';
 import { notifyToast } from '@/service/notify';
@@ -39,6 +39,7 @@ export default function AnswerCard({
   isMyQuestion,
   isSolved,
 }: Props) {
+  const [hydrated, setHydrated] = useState(false);
   const [isEditMode, setIsEditMode] = useState(false);
   const router = useRouter();
 
@@ -72,6 +73,11 @@ export default function AnswerCard({
     });
   };
 
+  useEffect(() => {
+    editor?.commands.setContent(JSON.parse(text));
+    setHydrated(true);
+  }, []);
+
   return (
     <article
       className={`flex flex-col relative p-4 border-b-[1px] border-soma-grey-49 ${
@@ -94,12 +100,18 @@ export default function AnswerCard({
         questionId={questionId}
         authorRank={rank}
       />
-      <div
-        className="max-w-full my-3 prose-sm break-all sm:prose-lg prose-headings:my-2 prose-p:my-0 prose-stone dark:prose-invert prose-headings:font-display font-default focus:outline-none"
-        dangerouslySetInnerHTML={{
-          __html: output,
-        }}
-      ></div>
+      {hydrated ? (
+        <div className="my-3 break-all">
+          <EditorContent editor={editor} />
+        </div>
+      ) : (
+        <div
+          className="hidden"
+          dangerouslySetInnerHTML={{
+            __html: output,
+          }}
+        ></div>
+      )}
       <AnswerCardFooter
         repliesCount={repliesCount}
         answerId={id}

diff --git a/src/components/question/QuestionDetail.tsx b/src/components/question/QuestionDetail.tsx
@@ -8,7 +8,9 @@ import QuestionFooter from './QuestionFooter';
 import AnswersList from './AnswersList';
 import { Answer } from '@/types/answer';
 import AnswerForm from './AnswerForm';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { EditorContent, useEditor } from '@tiptap/react';
+import { handleTiptapEditorProps } from '../editor/props';
 
 type Props = {
   questionData: Question;
@@ -38,13 +40,27 @@ export default function QuestionDetail({
   memoTitle,
   isLogin,
 }: Props) {
+  const [hydrated, setHydrated] = useState(false);
+
+  const editor = useEditor({
+    extensions: handleTiptapExtensions('question', id),
+    editorProps: handleTiptapEditorProps('question', id),
+    editable: false,
+    content: JSON.parse(text),
+  });
+
   const output = useMemo(() => {
     return generateHTML(
       JSON.parse(text),
       handleTiptapExtensions('question', id)
     );
   }, [text]);
 
+  useEffect(() => {
+    editor?.commands.setContent(JSON.parse(text));
+    setHydrated(true);
+  }, []);
+
   return (
     <div className="flex flex-col">
       <div className="p-5 bg-soma-grey-25 rounded-2xl">
@@ -61,12 +77,19 @@ export default function QuestionDetail({
             {title}
           </h1>
           <div className="h-[0.5px] mx-1 my-4 bg-soma-grey-49"></div>
-          <div
-            className="max-w-full prose-sm break-all sm:prose-lg prose-headings:my-2 prose-p:my-0 prose-stone dark:prose-invert prose-headings:font-display font-default focus:outline-none"
-            dangerouslySetInnerHTML={{
-              __html: output,
-            }}
-          ></div>
+
+          {hydrated ? (
+            <div className="break-all">
+              <EditorContent editor={editor} />
+            </div>
+          ) : (
+            <div
+              className="hidden"
+              dangerouslySetInnerHTML={{
+                __html: output,
+              }}
+            ></div>
+          )}
         </div>
         <QuestionFooter
           tags={tags}