merge: 게시글 작성 중 이미지 크기 수정

게시글 작성 중 이미지 크기 수정
re-Duck · Dec 13, 2023 · b5ed926 · b5ed926
2 parents f5a1dd6 + 829d3b9
commit b5ed926
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 10 deletions.
diff --git a/client/package.json b/client/package.json
@@ -45,6 +45,7 @@
     "react-error-boundary": "^4.0.11",
     "react-redux": "^8.0.5",
     "socketjs-client": "^1.0.2",
+    "tiptap-extension-resize-image": "^1.0.2",
     "typescript": "5.0.2",
     "uuid": "^9.0.0",
     "yup": "^1.0.2"

diff --git a/client/src/components/board/PostDetail/index.tsx b/client/src/components/board/PostDetail/index.tsx
@@ -1,5 +1,5 @@
 //core
-import React, { useEffect } from 'react';
+import React from 'react';
 import Link from 'next/link';
 
 //interface
@@ -17,10 +17,10 @@ import { BASE_URL } from '@/service/base/api';
 import { EditorContent, useEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import Highlight from '@tiptap/extension-highlight';
-import Image from '@tiptap/extension-image';
 import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
 
 import { common, createLowlight } from 'lowlight';
+import { ImageResize } from 'tiptap-extension-resize-image';
 
 interface PostDetail {
   data: Omit<IPostInformation, 'commentsCount'>;
@@ -32,23 +32,19 @@ export default function PostDetail({ data, IS_AUTHOR }: PostDetail) {
   const url = data.postAuthorId
     ? `${BASE_URL}${data.postAuthorProfileImgPath}`
     : '';
-
   const editor = useEditor({
     extensions: [
       StarterKit,
       Highlight,
-      Image.configure({ inline: true, allowBase64: true }),
       CodeBlockLowlight.configure({
         lowlight,
       }),
+      ImageResize.configure({ inline: true, allowBase64: true }),
     ],
     editable: false,
+    content: data.postContent,
   });
 
-  useEffect(() => {
-    editor?.commands.setContent(data.postContent);
-  }, [data, editor]);
-
   return (
     <article className="flex flex-col max-w-4xl min-w-full gap-8 px-4 py-6 m-auto bg-white border-2 border-gray-100 sm:p-12">
       <h1 className="text-4xl font-extrabold ">{data.postTitle}</h1>

diff --git a/client/src/hooks/Write/useTiptap.ts b/client/src/hooks/Write/useTiptap.ts
@@ -2,21 +2,21 @@
 import { useEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import Highlight from '@tiptap/extension-highlight';
-import Image from '@tiptap/extension-image';
 import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
 
 import { common, createLowlight } from 'lowlight';
+import { ImageResize } from 'tiptap-extension-resize-image';
 
 function useTipTap() {
   const lowlight = createLowlight(common);
   const editor = useEditor({
     extensions: [
       StarterKit,
       Highlight,
-      Image.configure({ inline: true, allowBase64: true }),
       CodeBlockLowlight.configure({
         lowlight,
       }),
+      ImageResize.configure({ inline: true, allowBase64: true }),
     ],
   });
   return { editor };

diff --git a/client/yarn.lock b/client/yarn.lock
@@ -10182,6 +10182,11 @@ tippy.js@^6.3.7:
   dependencies:
     "@popperjs/core" "^2.9.0"
 
+tiptap-extension-resize-image@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/tiptap-extension-resize-image/-/tiptap-extension-resize-image-1.0.2.tgz#124319eedc04cc344e2af2617f7f20b37456c8fd"
+  integrity sha512-fdFzodaGlBUYtyXOEyi2NOM47NWASunGdbbw/6LTPL8pEPHdi+b6FpQhbes7oZUtJD4G0PV3wLzHRAjnfwk4cg==
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"