Merge pull request #196 from TripInfoWeb/dev_diary

Feat: 이미지 삽입 시 border-radius를 1rem으로 지정
TripInfoWeb · Aug 13, 2024 · 7540c66 · 7540c66
2 parents 366a84d + 0a6ef34
commit 7540c66
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/src/components/diary/write/DiaryEditor.tsx b/src/components/diary/write/DiaryEditor.tsx
@@ -3,9 +3,14 @@ import PlaceModalContainer from "@/containers/diary/write/PlaceModalContainer";
 import DateRangeModalContainer from "@/containers/diary/write/DateRangeModalContainer";
 import { useDiaryEditorStoreType } from "@/store/diaryEditorStore";
 import dynamic from "next/dynamic";
+import QuillEditorSkeleton from "@/components/skeleton/diary/write/QuillEditorSkeleton";
 
 const QuillEditorContainer = dynamic(
   () => import("@/containers/diary/write/QuillEditorContainer"),
+  {
+    ssr: false,
+    loading: () => <QuillEditorSkeleton />,
+  },
 );
 
 interface Props {

diff --git a/src/containers/diary/write/QuillEditorContainer.tsx b/src/containers/diary/write/QuillEditorContainer.tsx
@@ -35,6 +35,21 @@ const QuillEditorContainer = () => {
         if (range) {
           editor.insertEmbed(range.index, "image", url);
           editor.setSelection(range.index + 1, 0);
+
+          // 이미지가 DOM에 추가된 후 이미지에 스타일을 적용하기 위해 setTimeout 사용합니다.
+          setTimeout(() => {
+            // Property 'style' does not exist on type 'Element'.ts(2339) 오류를
+            // 방지하기 위해 타입을 any로 지정합니다.
+            const imageElement: any = document.querySelector(
+              `img[src="${url}"]`,
+            );
+            if (imageElement) {
+              imageElement.style.borderRadius = "1rem";
+            }
+
+            // 메모리 누수를 방지하기 위해 URL을 해제합니다.
+            // URL.revokeObjectURL(url);
+          }, 100);
         }
       }
     });