[🐛 Bug] 생성 롤링페이퍼와 모달창에 cl,ul,ol 정렬, 글자크기 변경,프로필 미선택 이미지 리스트에서 삭제

src/components/common/TextEditor.jsx

@@ -183,29 +183,35 @@ const useChecklistToolbarManager = (reactQuillRef) => {
 
 const TextEditor = ({ value, onChange, onFontChange, font }) => {
   const reactQuillRef = useRef(null);
-  const lastSelectionFontRef = useRef(null); // 마지막 선택 영역의 폰트 추적
+  const lastSelectionFontRef = useRef(null);
+
+  const handleChange = (content) => {
+    onChange(content);
+  };
 
   useFontPersistence(reactQuillRef);
   useChecklistToolbarManager(reactQuillRef);
 
-  // 외부 Dropdown에서 선택된 폰트 → 에디터 전체에 적용
+  // 외부 Dropdown에서 선택된 폰트 → 선택된 영역에만 적용 (수정됨!)
   useEffect(() => {
     const quill = reactQuillRef.current?.getEditor();
     if (!quill || !font) {
       return;
     }
 
-    // 전체 텍스트 범위 가져오기
-    const length = quill.getLength();
-    if (length <= 1) {
-      // 텍스트가 없을 때는 커서 위치에 폰트 설정
+    const range = quill.getSelection();
+
+    if (!range) {
+      // 포커스가 없으면 다음 입력에 적용될 포맷만 설정
+      quill.format('font', font, 'api');
+    } else if (range.length === 0) {
+      // 커서만 있고 선택 영역이 없으면 다음 입력에 적용
       quill.format('font', font, 'api');
     } else {
-      // 텍스트가 있을 때는 전체에 폰트 적용
-      quill.formatText(0, length, { font }, 'api');
+      // 선택 영역이 있으면 해당 영역에만 폰트 적용
+      quill.formatText(range.index, range.length, { font }, 'api');
     }
 
-    // 외부에서 폰트가 변경되면 ref도 업데이트
     lastSelectionFontRef.current = font;
   }, [font]);
 
@@ -217,12 +223,10 @@ const TextEditor = ({ value, onChange, onFontChange, font }) => {
     }
 
     const handleTextChange = (delta, oldDelta, source) => {
-      // 'user' 소스는 사용자 입력, 'api' 소스는 프로그래밍 방식 변경
       if (source !== 'user') {
         return;
       }
 
-      // 폰트 변경이 포함된 경우만 체크
       const hasFontChange = delta.ops?.some((op) => op.attributes?.font);
       if (!hasFontChange) {
         return;
@@ -260,16 +264,13 @@ const TextEditor = ({ value, onChange, onFontChange, font }) => {
         .trim();
 
     const hasContent = () => {
-      // 텍스트가 있는지 확인
       if (getVisibleText().length > 0) {
         return true;
       }
-      // 리스트 요소가 있는지 확인
       const hasLists = root.querySelector('ol, ul');
       if (hasLists) {
         return true;
       }
-      // 이미지나 다른 블록 요소가 있는지 확인
       const hasBlocks = root.querySelector('img, iframe, video');
       if (hasBlocks) {
         return true;
@@ -312,6 +313,7 @@ const TextEditor = ({ value, onChange, onFontChange, font }) => {
       toolbar: {
         container: [
           [{ font: Font.whitelist }],
+          [{ size: ['small', false, 'large', 'huge'] }],
           ['bold', 'italic', 'underline', 'strike'],
           [{ align: [] }],
           [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
@@ -339,7 +341,7 @@ const TextEditor = ({ value, onChange, onFontChange, font }) => {
         ref={reactQuillRef}
         theme="snow"
         value={value || ''}
-        onChange={onChange}
+        onChange={handleChange}
         modules={modules}
         placeholder="여기에 내용을 입력해주세요."
       />

src/components/common/modal/Modal.jsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import Button from '@/components/common/button/Button';
 import ModalHeader from '@/components/common/modal/ModalHeader';
 import PostContent from '@/components/common/modal/PostContent';
@@ -14,6 +14,18 @@ const Modal = ({
   createdAt,
   font,
 }) => {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      setVisible(true);
+    } else {
+      // 닫힐 때 애니메이션 고려해 약간의 지연
+      const timer = setTimeout(() => setVisible(false), 200);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen]);
+
   useEffect(() => {
     document.body.style.overflow = isOpen ? 'hidden' : '';
     return () => (document.body.style.overflow = '');
@@ -32,20 +44,24 @@ const Modal = ({
     return () => document.removeEventListener('keydown', handleKeyDown);
   }, [isOpen, onClose]);
 
-  if (!isOpen) {
+  // 완전히 닫힌 상태에서는 Portal 자체 제거
+  if (!visible) {
     return null;
   }
 
   return (
     <ModalPortal>
       <div
-        className="fixed inset-0 z-[1000] bg-black/50"
+        className={`fixed inset-0 z-[1000] bg-black/50 transition-opacity duration-200 ${
+          isOpen ? 'opacity-100' : 'opacity-0'
+        }`}
         onClick={onClose}
         aria-hidden="true"
       />
-
       <div
-        className="tablet:w-[500px] mobile:w-[90vw] mobile:h-auto fixed left-1/2 top-1/2 z-[1001] flex h-[476px] max-h-[90vh] w-[600px] max-w-[90vw] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-[16px] bg-white p-10 shadow-lg"
+        className={`tablet:w-[500px] mobile:w-[90vw] mobile:h-auto fixed left-1/2 top-1/2 z-[1001] flex h-[476px] max-h-[90vh] w-[600px] max-w-[90vw] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-[16px] bg-white p-10 shadow-lg transition-transform duration-200 ${
+          isOpen ? 'scale-100' : 'scale-95 opacity-0'
+        }`}
         role="dialog"
         aria-modal="true"
         onClick={(e) => e.stopPropagation()}>
@@ -55,11 +71,9 @@ const Modal = ({
           date={createdAt}
           profileImgUrl={profileImgUrl}
         />
-
-        <div className="flex-grow overflow-y-auto px-4 py-2">
+        <div className="flex-grow overflow-y-auto">
           <PostContent htmlContent={contentHtml} font={font} />
         </div>
-
         <div className="flex justify-center pt-6">
           <Button
             theme="primary"

src/components/common/modal/PostContent.jsx

@@ -1,32 +1,94 @@
 import DOMPurify from 'dompurify';
-import { useMemo } from 'react';
+import { useMemo, useEffect, useRef } from 'react';
+import { FONT_CLASSES, QUILL_FONT_CLASSES } from '@/constants/fontMap';
 import { SANITIZE_CONFIG } from '@/constants/sanitizeConfig';
 
-const FONT_CLASSES = {
-  Pretendard: 'font-sans',
-  'Noto Sans': 'ff-noto',
-  나눔명조: 'ff-nanum-myeongjo',
-  '나눔손글씨 손편지체': 'ff-nanum-sonpyeonji',
-};
-
 const textStyle = (font) => {
   const fontClass = FONT_CLASSES[font] || 'font-sans';
-  return `font-15-regular sm:font-18-regular text-gray-900 ${fontClass}`;
+
+  return `${fontClass} text-gray-900`;
 };
 
-/**
- * React Quill 에디터의 HTML 값을 안전하게 출력하는 컴포넌트
- */
-const PostContent = ({ htmlContent, font }) => {
-  const cleanHtml = useMemo(
-    () => DOMPurify.sanitize(htmlContent, SANITIZE_CONFIG),
-    [htmlContent]
-  );
+const PostContent = ({ htmlContent, font, className, card }) => {
+  const contentRef = useRef(null);
+
+  const cleanHtml = useMemo(() => {
+    let sanitized = DOMPurify.sanitize(htmlContent, SANITIZE_CONFIG);
+
+    sanitized = sanitized.replace(/<span class="ql-ui".*?<\/span>/g, '');
+
+    return sanitized;
+  }, [htmlContent]);
+
+  useEffect(() => {
+    const container = contentRef.current;
+    if (!container) {
+      return;
+    }
+
+    container.innerHTML = cleanHtml;
+
+    const listItems = container.querySelectorAll('li');
+    listItems.forEach((li) => {
+      li.style.position = 'relative';
+
+      li.style.paddingLeft = '1.5em';
+    });
+
+    const lists = [
+      {
+        selector: 'li[data-list="ordered"]',
+        content: (index) => `${index + 1}. `,
+      },
+
+      { selector: 'li[data-list="bullet"]', content: () => ' • ' },
+
+      {
+        selector: 'li[data-list="unchecked"]',
+        content: () => '☐ ',
+        style: { color: '#1f2937' },
+      },
+
+      {
+        selector: 'li[data-list="checked"]',
+        content: () => '☑ ',
+        style: { fontWeight: 'bold', color: 'rgb(31, 41, 55)' },
+      },
+    ];
+
+    lists.forEach(({ selector, style }) => {
+      const items = container.querySelectorAll(selector);
+      items.forEach((li) => {
+        if (li.querySelector('.ql-ui')) {
+          return;
+        }
+
+        const ui = document.createElement('span');
+        ui.className = 'ql-ui';
+
+        if (style) {
+          Object.assign(ui.style, style);
+        }
+
+        li.prepend(ui);
+      });
+    });
+  }, [cleanHtml]);
+
+  const quillFontClass = QUILL_FONT_CLASSES[font] || '';
 
   return (
     <div
-      className={`quill-content-view ${textStyle(font)}`}
-      dangerouslySetInnerHTML={{ __html: cleanHtml }}
+      ref={contentRef}
+      className={`ql-editor w-full ${textStyle(font)} ${quillFontClass} ${className}`}
+      style={{
+        padding: 0,
+        ...(card
+          ? {
+              overflow: 'hidden',
+            }
+          : {}),
+      }}
     />
   );
 };

src/components/rolling-paper-list/message-card/MessageCard.jsx

@@ -1,27 +1,10 @@
-import { cva } from 'class-variance-authority';
-import DOMPurify from 'dompurify';
-import { useMemo } from 'react';
 import Icons from '@/assets/icons/icons';
 import Button from '@/components/common/button/Button';
+import PostContent from '@/components/common/modal/PostContent';
 import AuthorInfo from '@/components/rolling-paper-list/AuthorInfo';
 import DateText from '@/components/rolling-paper-list/DateText';
-import { SANITIZE_CONFIG_MESSAGECARD } from '@/constants/sanitizeConfig';
 import { cn } from '@/utils/style';
 
-const textStyle = cva(
-  'font-15-regular sm:font-18-regular line-clamp-2 text-gray-600 sm:line-clamp-3',
-  {
-    variants: {
-      font: {
-        Pretendard: 'font-sans',
-        'Noto Sans': 'ff-noto',
-        나눔명조: 'ff-nanum-myeongjo',
-        '나눔손글씨 손편지체': 'ff-nanum-sonpyeonji',
-      },
-    },
-  }
-);
-
 /** 롤링페이퍼 목록에서 사용되는 메시지 카드 컴포넌트입니다.
  * 클릭 시 해당 메시지의 상세 모달을 띄웁니다.
  * @param {object} props
@@ -48,11 +31,6 @@ const MessageCard = ({
   edit = false,
   onDelete,
 }) => {
-  const sanitizedContent = useMemo(
-    () => DOMPurify.sanitize(content, SANITIZE_CONFIG_MESSAGECARD),
-    [content]
-  );
-
   const handleKeyDown = (e) => {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
@@ -95,12 +73,12 @@ const MessageCard = ({
           <Icons.DeletedIcon />
         </Button>
       )}
-
-      <div
-        className={cn(textStyle({ font }))}
-        dangerouslySetInnerHTML={{ __html: sanitizedContent }}
+      <PostContent
+        htmlContent={content}
+        className={'line-clamp-2 sm:line-clamp-3'}
+        font={font}
+        card
       />
-
       <DateText className="mt-auto" createdAt={createdAt} />
     </div>
   );

src/constants/fontMap.js

@@ -12,3 +12,17 @@ export const FONT_DISPLAY_NAMES = {
   'nanum-myeongjo': '나눔명조',
   handletter: '나눔손글씨 손편지체',
 };
+
+export const FONT_CLASSES = {
+  Pretendard: 'font-sans',
+  'Noto Sans': 'ff-noto',
+  나눔명조: 'ff-nanum-myeongjo',
+  '나눔손글씨 손편지체': 'ff-nanum-sonpyeonji',
+};
+
+export const QUILL_FONT_CLASSES = {
+  'noto-sans': 'ql-font-noto-sans',
+  pretendard: 'ql-font-pretendard',
+  'nanum-myeongjo': 'ql-font-nanum-myeongjo',
+  handletter: 'ql-font-handletter',
+};