Merge pull request #80 from Funssion-SWM/develop

Fix: tiptap content Server side에서 받아오도록 수정
Funssion-SWM · Dec 6, 2023 · 8a7c775 · 8a7c775
2 parents b4d254d + 6216868
commit 8a7c775
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 45 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "@tiptap/extension-task-list": "^2.0.3",
     "@tiptap/extension-text-style": "^2.0.3",
     "@tiptap/extension-underline": "^2.0.3",
+    "@tiptap/html": "^2.1.13",
     "@tiptap/pm": "^2.0.3",
     "@tiptap/react": "^2.0.3",
     "@tiptap/starter-kit": "^2.0.3",

diff --git a/src/app/loading.tsx b/src/app/loading.tsx
diff --git a/src/components/memo/MemoViewer.tsx b/src/components/memo/MemoViewer.tsx
@@ -1,15 +1,14 @@
 'use client';
 
-import { EditorContent, useEditor } from '@tiptap/react';
+import { generateHTML } from '@tiptap/html';
 import MemoViewerHeader from './MemoViewerHeader';
 import { handleTiptapExtensions } from '@/components/editor/extensions';
 import TagView from '../shared/TagView';
-import { handleTiptapEditorProps } from '../editor/props';
-import { useEffect } from 'react';
+import { useMemo } from 'react';
 
 type Props = {
   title: string;
-  content: string;
+  content: object;
   color: string;
   memoTags: string[];
   memoId: number;
@@ -38,15 +37,8 @@ export default function MemoViewer({
   seriesTitle,
   isLogin,
 }: Props) {
-  const editor = useEditor({
-    extensions: handleTiptapExtensions('memo', memoId),
-    editorProps: handleTiptapEditorProps('memo', memoId),
-    editable: false,
-    content: content,
-  });
-
-  useEffect(() => {
-    editor?.commands.setContent(content);
+  const output = useMemo(() => {
+    return generateHTML(content, handleTiptapExtensions('memo', memoId));
   }, [content]);
 
   return (
@@ -83,9 +75,12 @@ export default function MemoViewer({
         {title}
       </h1>
       <div className="h-[0.5px] mx-3 my-4 bg-soma-grey-49"></div>
-      <div className="px-4 flex-grow break-all">
-        <EditorContent editor={editor} />
-      </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>
       <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,13 +1,14 @@
-import { EditorContent, useEditor } from '@tiptap/react';
+import { useEditor } from '@tiptap/react';
 import { handleTiptapExtensions } from '../editor/extensions';
 import { handleTiptapEditorProps } from '../editor/props';
 import { Answer } from '@/types/answer';
 import AnswerCardHeader from './AnswerCardHeader';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { updateAnswer } from '@/service/answers';
 import { notifyToast } from '@/service/notify';
 import AnswerCardFooter from './AnswerCardFooter';
+import { generateHTML } from '@tiptap/html';
 
 type Props = {
   answer: Answer;
@@ -48,6 +49,10 @@ export default function AnswerCard({
     content: JSON.parse(text),
   });
 
+  const output = useMemo(() => {
+    return generateHTML(JSON.parse(text), handleTiptapExtensions('answer', 0));
+  }, [text]);
+
   const handleUpdateBtnClick = () => {
     setIsEditMode(true);
     editor?.setOptions({ editable: true, autofocus: true });
@@ -89,9 +94,12 @@ export default function AnswerCard({
         questionId={questionId}
         authorRank={rank}
       />
-      <div className="break-all my-3">
-        <EditorContent editor={editor} />
-      </div>
+      <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>
       <AnswerCardFooter
         repliesCount={repliesCount}
         answerId={id}
@@ -103,7 +111,7 @@ export default function AnswerCard({
         isDislike={disLike}
       />
       {selected && (
-        <div className="absolute top-0 right-0 font-medium bg-soma-blue-40 text-soma-white py-2 px-4 rounded-xl rounded-e-none rounded-t-none text-xs sm:text-base">
+        <div className="absolute top-0 right-0 px-4 py-2 text-xs font-medium rounded-t-none bg-soma-blue-40 text-soma-white rounded-xl rounded-e-none sm:text-base">
           selected
         </div>
       )}

diff --git a/src/components/question/QuestionDetail.tsx b/src/components/question/QuestionDetail.tsx
@@ -1,14 +1,14 @@
 'use client';
 
 import { Question } from '@/types/question';
-import { EditorContent, useEditor } from '@tiptap/react';
+import { generateHTML } from '@tiptap/html';
 import { handleTiptapExtensions } from '../editor/extensions';
-import { handleTiptapEditorProps } from '../editor/props';
 import QuestionHeader from './QuestionHeader';
 import QuestionFooter from './QuestionFooter';
 import AnswersList from './AnswersList';
 import { Answer } from '@/types/answer';
 import AnswerForm from './AnswerForm';
+import { useMemo } from 'react';
 
 type Props = {
   questionData: Question;
@@ -38,9 +38,16 @@ export default function QuestionDetail({
   memoTitle,
   isLogin,
 }: Props) {
+  const output = useMemo(() => {
+    return generateHTML(
+      JSON.parse(text),
+      handleTiptapExtensions('question', id)
+    );
+  }, [text]);
+
   return (
     <div className="flex flex-col">
-      <div className="bg-soma-grey-25 rounded-2xl p-5">
+      <div className="p-5 bg-soma-grey-25 rounded-2xl">
         <QuestionHeader
           questionId={id}
           likeNum={likes}
@@ -50,20 +57,16 @@ export default function QuestionDetail({
           isLike={isLike}
         />
         <div className="my-5">
-          <h1 className="text-2xl sm:text-4xl text-soma-grey-70 font-bold break-all">
+          <h1 className="text-2xl font-bold break-all sm:text-4xl text-soma-grey-70">
             {title}
           </h1>
           <div className="h-[0.5px] mx-1 my-4 bg-soma-grey-49"></div>
-          <div className="break-all ">
-            <EditorContent
-              editor={useEditor({
-                extensions: handleTiptapExtensions('question', id),
-                editorProps: handleTiptapEditorProps('question', id),
-                editable: false,
-                content: JSON.parse(text),
-              })}
-            />
-          </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>
         </div>
         <QuestionFooter
           tags={tags}