Feat: memo viewer SSR 수정

Funssion-SWM · Dec 6, 2023 · 18b1b2b · 18b1b2b
1 parent d00d3b7
commit 18b1b2b
Showing 1 changed file with 9 additions and 16 deletions.
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/react';
 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,10 @@ 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} />