From d7887f319712c6fe2b3af4c71a9f318980991cab Mon Sep 17 00:00:00 2001
From: Choi hee ruk <chlgmlfkr593@naver.com>
Date: Tue, 14 Oct 2025 00:33:56 +0900
Subject: [PATCH 01/10] =?UTF-8?q?=E2=9C=A8=20Feat:=20Quill=20=EC=97=90?=
 =?UTF-8?q?=EB=94=94=ED=84=B0=20=ED=8F=B0=ED=8A=B8=20=EC=A0=81=EC=9A=A9=20?=
 =?UTF-8?q?=EB=B0=A9=EC=8B=9D=20=EA=B0=9C=EC=84=A0=20=EB=B0=8F=20=ED=88=B4?=
 =?UTF-8?q?=EB=B0=94=20=EC=98=B5=EC=85=98=20=ED=99=95=EC=9E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/TextEditor.jsx | 32 +++++++++++++++-------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/components/common/TextEditor.jsx b/src/components/common/TextEditor.jsx
index adfb7141..392fe16e 100644
--- a/src/components/common/TextEditor.jsx
+++ b/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="여기에 내용을 입력해주세요."
       />

From a3e4e7b96cbde684338306816824258cad13ae01 Mon Sep 17 00:00:00 2001
From: Choi hee ruk <chlgmlfkr593@naver.com>
Date: Tue, 14 Oct 2025 00:36:29 +0900
Subject: [PATCH 02/10] =?UTF-8?q?=F0=9F=8E=A8=20Style:=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EC=97=B4=EB=A6=BC/=EB=8B=AB=ED=9E=98=20=EC=8B=9C?=
 =?UTF-8?q?=20=EB=B6=80=EB=93=9C=EB=9F=AC=EC=9A=B4=20=EC=A0=84=ED=99=98=20?=
 =?UTF-8?q?=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/modal/Modal.jsx | 30 ++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/components/common/modal/Modal.jsx b/src/components/common/modal/Modal.jsx
index aaf10c83..e09e063f 100644
--- a/src/components/common/modal/Modal.jsx
+++ b/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"

From b8e3d7e5f534afe6d9f8993ed974fbb48eb4d098 Mon Sep 17 00:00:00 2001
From: Choi hee ruk <chlgmlfkr593@naver.com>
Date: Tue, 14 Oct 2025 00:37:11 +0900
Subject: [PATCH 03/10] =?UTF-8?q?=E2=9C=A8=20Feat:=20PostContent=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A6=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EB=B0=8F=20=ED=8F=B0=ED=8A=B8=20=EB=A0=8C=EB=8D=94?=
 =?UTF-8?q?=EB=A7=81=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/modal/PostContent.jsx | 109 ++++++++++++++++----
 1 file changed, 90 insertions(+), 19 deletions(-)

diff --git a/src/components/common/modal/PostContent.jsx b/src/components/common/modal/PostContent.jsx
index 8a248711..0c4131e1 100644
--- a/src/components/common/modal/PostContent.jsx
+++ b/src/components/common/modal/PostContent.jsx
@@ -1,32 +1,103 @@
 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}`;
+  // Tailwind의 기본 폰트 사이즈 클래스를 빼줘야 인라인 font-size가 적용됨
+  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);
+
+    // 기존 quill 체크박스 관련 span 제거 (유니코드 마커가 중복 생성되는 것을 방지)
+    sanitized = sanitized.replace(/<span class="ql-ui".*?<\/span>/g, '');
+
+    return sanitized;
+  }, [htmlContent]);
+
+  useEffect(() => {
+    const container = contentRef.current;
+    if (!container) {
+      return;
+    }
+
+    container.innerHTML = cleanHtml;
+
+    // 🚨 1, 4번 문제 해결: 모든 리스트 항목(li)에 기준점과 텍스트 시작 위치 설정
+    const listItems = container.querySelectorAll('li');
+    listItems.forEach((li) => {
+      // ql-ui의 absolute 기준점
+      li.style.position = 'relative';
+      // 텍스트가 겹치지 않도록 오른쪽으로 밀어냄
+      li.style.paddingLeft = '1.5em';
+    });
+
+    // ✅ 리스트용 커스텀 UI 생성 및 위치 지정
+    const lists = [
+      // 1. 순서가 있는 리스트 (숫자)
+      {
+        selector: 'li[data-list="ordered"]',
+        content: (index) => `${index + 1}. `,
+      },
+      // 3. 점 리스트
+      { selector: 'li[data-list="bullet"]', content: () => ' • ' },
+
+      // 2, 4. 체크 리스트: 유니코드 문자로 설정
+      // 체크되지 않음: 흰색 네모
+      {
+        selector: 'li[data-list="unchecked"]',
+        content: () => '☐ ',
+        style: { color: '#1f2937' },
+      },
+      // ✅ 수정: 체크 완료 상태에서 색상(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',
+            }
+          : {}),
+      }}
     />
   );
 };

From 33a5e6216bac96bde03be571265b210e562d43a9 Mon Sep 17 00:00:00 2001
From: Choi hee ruk <chlgmlfkr593@naver.com>
Date: Tue, 14 Oct 2025 00:37:50 +0900
Subject: [PATCH 04/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20MessageC?=
 =?UTF-8?q?ard=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?PostContent=20=EC=9E=AC=EC=82=AC=EC=9A=A9=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=A4=91=EB=B3=B5=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../message-card/MessageCard.jsx              | 34 ++++---------------
 1 file changed, 6 insertions(+), 28 deletions(-)

diff --git a/src/components/rolling-paper-list/message-card/MessageCard.jsx b/src/components/rolling-paper-list/message-card/MessageCard.jsx
index ec79583a..70039c22 100644
--- a/src/components/rolling-paper-list/message-card/MessageCard.jsx
+++ b/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>
   );

From 945a4fd50eff77f0a8d3e2388db91e69c2cdfd12 Mon Sep 17 00:00:00 2001
From: Choi hee ruk <chlgmlfkr593@naver.com>
Date: Tue, 14 Oct 2025 00:38:36 +0900
Subject: [PATCH 05/10] =?UTF-8?q?=E2=9C=A8=20Feat:=20=ED=8F=B0=ED=8A=B8=20?=
 =?UTF-8?q?=EB=A7=A4=ED=95=91=20=EB=B0=8F=20=ED=81=B4=EB=9E=98=EC=8A=A4=20?=
 =?UTF-8?q?=EC=83=81=EC=88=98=20=EC=A0=95=EB=A6=AC=20(fontMap,=20FONT=5FCL?=
 =?UTF-8?q?ASSES,=20QUILL=5FFONT=5FCLASSES)=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/fontMap.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/constants/fontMap.js b/src/constants/fontMap.js
index 17b95174..6aa16654 100644
--- a/src/constants/fontMap.js
+++ b/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',
+};

From 7a096a950e74c83590aedc33b26fcb58fa0683a5 Mon Sep 17 00:00:00 2001
From: Choi hee ruk <chlgmlfkr593@naver.com>
Date: Tue, 14 Oct 2025 00:39:19 +0900
Subject: [PATCH 06/10] =?UTF-8?q?=E2=9C=A8=20Feat:=20SANITIZE=5FCONFIG=20?=
 =?UTF-8?q?=ED=99=95=EC=9E=A5=20=E2=80=94=20=EC=B2=B4=ED=81=AC=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EB=B0=8F=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EC=86=8D=EC=84=B1=20=EC=A7=80=EC=9B=90=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/sanitizeConfig.js | 37 +++++++++++++++++++++++++++------
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/constants/sanitizeConfig.js b/src/constants/sanitizeConfig.js
index 91960376..18bebc62 100644
--- a/src/constants/sanitizeConfig.js
+++ b/src/constants/sanitizeConfig.js
@@ -24,11 +24,36 @@ export const SANITIZE_CONFIG = {
     'blockquote',
     'code',
     'pre',
+    'input',
+  ],
+  ALLOWED_ATTR: [
+    'href',
+    'src',
+    'alt',
+    'title',
+    'class',
+    'style',
+    'type',
+    'checked',
+    'data-list',
+    'data-checked',
+    'align',
+  ],
+  ALLOW_ARBITRARY_ATTRIBUTES: true,
+  KEEP_CONTENT: true,
+  ALLOWED_CSS_PROPERTIES: [
+    'font-size',
+    'text-align',
+    'color',
+    'background-color',
+    'font-weight',
+    'font-style',
+    'text-decoration',
+    'line-height',
+    'letter-spacing',
+    'position',
+    'left',
+    'padding-left',
+    'top',
   ],
-  ALLOWED_ATTR: ['href', 'src', 'alt', 'title', 'class', 'style'],
-};
-
-export const SANITIZE_CONFIG_MESSAGECARD = {
-  ALLOWED_TAGS: ['img'],
-  ALLOWED_ATTR: ['src', 'alt'],
 };

From 1e99cfbd9506987aa3401a79ff65c5258558e506 Mon Sep 17 00:00:00 2001
From: Choi hee ruk <chlgmlfkr593@naver.com>
Date: Tue, 14 Oct 2025 00:39:59 +0900
Subject: [PATCH 07/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20PostMess?=
 =?UTF-8?q?age=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=EC=A1=B0?=
 =?UTF-8?q?=20=EA=B0=9C=EC=84=A0=20=EB=B0=8F=20=ED=94=84=EB=A1=9C=ED=95=84?=
 =?UTF-8?q?=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EA=B4=80=EB=A6=AC=20=EB=B0=A9?=
 =?UTF-8?q?=EC=8B=9D=20=EB=8B=A8=EC=88=9C=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/PostMessage.jsx | 96 +++++++++++++++++++++------------------
 1 file changed, 51 insertions(+), 45 deletions(-)

diff --git a/src/pages/PostMessage.jsx b/src/pages/PostMessage.jsx
index e69c8a29..059bbec5 100644
--- a/src/pages/PostMessage.jsx
+++ b/src/pages/PostMessage.jsx
@@ -28,44 +28,19 @@ const PostMessage = () => {
   const [profileImageURL, setProfileImageURL] = useState('');
   const [selectedFont, setSelectedFont] = useState('Noto Sans');
 
-  // TextEditor에서 폰트 변경 시 호출 (fontKey를 직접 받음)
-  const handleEditorFontChange = (fontKey) => {
-    if (!fontKey) {
-      return;
-    }
-
-    // 선택된 폰트 상태 업데이트
-    setSelectedFont(fontKey);
-
-    // 외부 드롭다운도 동기화
-    const displayName = FONT_DISPLAY_NAMES[fontKey];
-    if (displayName && fontRef.current?.setValue) {
-      fontRef.current.setValue(displayName);
-    }
-  };
-
-  // 외부 Dropdown에서 폰트 변경 시 호출
-  const handleDropdownFontChange = () => {
-    const selectedDisplayName = fontRef.current?.getValue();
-    if (!selectedDisplayName) {
-      return;
-    }
-
-    const fontKey = Object.keys(FONT_DISPLAY_NAMES).find(
-      (key) => FONT_DISPLAY_NAMES[key] === selectedDisplayName
-    );
-
-    if (fontKey) {
-      setSelectedFont(fontKey);
-    }
-  };
-
   const { loading, profileImages } = useProfileImages();
   const { isSubmitting, submitMessage } = usePostMessage();
 
+  // 오른쪽 리스트에서 첫 번째 이미지를 제외한 이미지들 관리
+  const [rightImages, setRightImages] = useState([]);
+
   useEffect(() => {
     if (!loading && profileImages && profileImages.length > 0) {
-      setProfileImageURL((prev) => prev || profileImages[0]);
+      // 첫 번째 이미지를 왼쪽 기본 이미지로 세팅
+      setProfileImageURL(profileImages[0]);
+
+      // 오른쪽 이미지는 첫 번째 이미지를 제외한 나머지 이미지들
+      setRightImages(profileImages.slice(1));
     }
   }, [loading, profileImages]);
 
@@ -98,10 +73,8 @@ const PostMessage = () => {
   const isButtonDisabled =
     isSubmitting ||
     isContentEmpty ||
-    !fromInput.value ||
-    fromInput.value.trim() === '' ||
-    !profileImageURL ||
-    profileImageURL.trim() === '' ||
+    !fromInput.value?.trim() ||
+    !profileImageURL?.trim() ||
     !relationshipRef.current?.getValue() ||
     !fontRef.current?.getValue();
 
@@ -109,6 +82,7 @@ const PostMessage = () => {
     <form
       className="mx-auto flex max-w-[720px] flex-col gap-[50px] pb-20 pt-12"
       onSubmit={handleSubmit}>
+      {/* From 입력 */}
       <div className="flex flex-col gap-4">
         <label
           htmlFor="From"
@@ -121,11 +95,12 @@ const PostMessage = () => {
           {...fromInput}
         />
       </div>
+
+      {/* 프로필 이미지 선택 영역 */}
       <div>
         <Title className="mb-[12px]">프로필 이미지</Title>
-        {/* 모바일: 가로 배치, 데스크톱: 가로 배치 */}
         <div className="mt-2 flex flex-row items-start gap-4">
-          {/* 선택된 프로필 이미지 */}
+          {/* 왼쪽 - 선택된 프로필 이미지 */}
           <div className="mt-[20px] flex flex-shrink-0 sm:mt-[7px]">
             {profileImageURL && (
               <ProfileImage
@@ -137,19 +112,19 @@ const PostMessage = () => {
               />
             )}
           </div>
-          {/* 선택 가능한 이미지 목록 */}
+
+          {/* 오른쪽 - 선택 가능한 이미지 리스트 */}
           <div className="flex flex-1 flex-col gap-2">
             <p className="text-base font-medium text-gray-700">
               프로필 이미지를 선택해주세요!
             </p>
-            {/* 모바일: 5개씩 고정, 태블릿/데스크톱: 1줄 배치 */}
             <div className="flex flex-wrap gap-2 sm:flex-nowrap sm:gap-[2px]">
               {loading ? (
                 <p className="w-full text-sm text-gray-400">
                   프로필 이미지를 불러오는 중...
                 </p>
-              ) : profileImages && profileImages.length > 0 ? (
-                profileImages.map((url) => {
+              ) : rightImages && rightImages.length > 0 ? (
+                rightImages.map((url) => {
                   return (
                     <div key={url} className="w-[calc(20%-8px)] sm:w-auto">
                       <ProfileImage
@@ -172,6 +147,8 @@ const PostMessage = () => {
           </div>
         </div>
       </div>
+
+      {/* 관계 선택 */}
       <div className="flex flex-col gap-4">
         <Title>상대와의 관계</Title>
         <Dropdown
@@ -180,24 +157,53 @@ const PostMessage = () => {
           defaultValue="지인"
         />
       </div>
+
+      {/* 내용 입력 */}
       <div className="flex flex-col gap-4">
         <Title>내용을 입력해 주세요</Title>
         <TextEditor
           value={content}
           onChange={setContent}
           font={selectedFont}
-          onFontChange={handleEditorFontChange}
+          onFontChange={(fontKey) => {
+            if (!fontKey) {
+              return;
+            }
+            setSelectedFont(fontKey);
+
+            const displayName = FONT_DISPLAY_NAMES[fontKey];
+            if (displayName && fontRef.current?.setValue) {
+              fontRef.current.setValue(displayName);
+            }
+          }}
         />
       </div>
+
+      {/* 폰트 선택 */}
       <div className="flex flex-col gap-4">
         <Title>폰트 선택</Title>
         <Dropdown
           ref={fontRef}
           items={FONT_ITEMS}
           defaultValue="Noto Sans"
-          onSelect={handleDropdownFontChange}
+          onSelect={() => {
+            const selectedDisplayName = fontRef.current?.getValue();
+            if (!selectedDisplayName) {
+              return;
+            }
+
+            const fontKey = Object.keys(FONT_DISPLAY_NAMES).find(
+              (key) => FONT_DISPLAY_NAMES[key] === selectedDisplayName
+            );
+
+            if (fontKey) {
+              setSelectedFont(fontKey);
+            }
+          }}
         />
       </div>
+
+      {/* 제출 버튼 */}
       <FloatingButtonContainer>
         <Button
           type="submit"

From 2dcb56f65f31e9f06345c37fdeabc9635e6be34f Mon Sep 17 00:00:00 2001
From: Choi hee ruk <chlgmlfkr593@naver.com>
Date: Tue, 14 Oct 2025 00:40:55 +0900
Subject: [PATCH 08/10] =?UTF-8?q?=F0=9F=8E=A8=20Style:=20Quill=20=EC=B2=B4?=
 =?UTF-8?q?=ED=81=AC=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EB=B0=8F=20=EC=97=90?=
 =?UTF-8?q?=EB=94=94=ED=84=B0=20=EC=98=81=EC=97=AD=20=EC=BB=A4=EC=8A=A4?=
 =?UTF-8?q?=ED=85=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/style/base/quill-custom.css | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/style/base/quill-custom.css b/src/style/base/quill-custom.css
index 065ea8ef..3848c73c 100644
--- a/src/style/base/quill-custom.css
+++ b/src/style/base/quill-custom.css
@@ -79,7 +79,7 @@
 
 .ql-editor {
   font-family: 'Noto Sans KR', sans-serif;
-  min-height: 260px;
+  /*min-height: 260px;*/
 }
 
 .ql-editor.ql-blank::before {
@@ -101,6 +101,7 @@
 
 .ql-editor li {
   list-style-type: none !important;
+  /* PostContent.jsx에서 인라인 스타일로 적용하므로, 이 코드는 Quill 에디터에서만 유효 */
   padding-left: 1.5em;
   position: relative;
 }
@@ -119,7 +120,6 @@
   padding-left: 1.5em;
 }
 .ql-editor li[data-list='check'] > .ql-ui {
-  position: absolute;
   left: 0;
   color: #9ca3af !important;
   cursor: pointer;
@@ -166,7 +166,6 @@
 }
 
 .ql-editor li[data-list='check'] > .ql-ui {
-  position: absolute;
   left: 0;
   color: #9ca3af !important;
   cursor: pointer;
@@ -257,7 +256,7 @@ button.ql-list.ql-active {
 }
 
 .ql-snow.ql-toolbar button.ql-list.ql-active .ql-stroke,
-.ql-snow.ql-toolbar button.ql-list.ql-active .ql-stroke,
+.ql-snow .ql-toolbar button.ql-list.ql-active .ql-stroke,
 button.ql-list.ql-active .ql-stroke {
   stroke: #7c3aed !important;
 }
@@ -578,3 +577,25 @@ div.ql-snow .ql-picker-options .ql-picker-item.ql-selected {
 .ql-toolbar .ql-formats:nth-child(7) {
   margin-right: 1px !important;
 }
+
+.ql-editor li[data-list='check'] {
+  list-style-type: none !important;
+  position: relative;
+}
+
+.ql-editor li[data-list='check'] > .ql-ui {
+  left: 0;
+  top: 0.15em;
+  color: #9ca3af !important;
+  cursor: pointer;
+  width: 1.2em;
+  height: 1.2em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ql-editor {
+  height: auto !important;
+  max-height: none !important;
+}

From eaeca19bd8aa1447d7abf9c456598d7011b4a886 Mon Sep 17 00:00:00 2001
From: Choi hee ruk <chlgmlfkr593@naver.com>
Date: Tue, 14 Oct 2025 00:48:29 +0900
Subject: [PATCH 09/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20?=
 =?UTF-8?q?=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20=EC=A3=BC=EC=84=9D?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/modal/PostContent.jsx | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/components/common/modal/PostContent.jsx b/src/components/common/modal/PostContent.jsx
index 0c4131e1..687410d8 100644
--- a/src/components/common/modal/PostContent.jsx
+++ b/src/components/common/modal/PostContent.jsx
@@ -5,7 +5,7 @@ import { SANITIZE_CONFIG } from '@/constants/sanitizeConfig';
 
 const textStyle = (font) => {
   const fontClass = FONT_CLASSES[font] || 'font-sans';
-  // Tailwind의 기본 폰트 사이즈 클래스를 빼줘야 인라인 font-size가 적용됨
+
   return `${fontClass} text-gray-900`;
 };
 
@@ -15,7 +15,6 @@ const PostContent = ({ htmlContent, font, className, card }) => {
   const cleanHtml = useMemo(() => {
     let sanitized = DOMPurify.sanitize(htmlContent, SANITIZE_CONFIG);
 
-    // 기존 quill 체크박스 관련 span 제거 (유니코드 마커가 중복 생성되는 것을 방지)
     sanitized = sanitized.replace(/<span class="ql-ui".*?<\/span>/g, '');
 
     return sanitized;
@@ -29,34 +28,27 @@ const PostContent = ({ htmlContent, font, className, card }) => {
 
     container.innerHTML = cleanHtml;
 
-    // 🚨 1, 4번 문제 해결: 모든 리스트 항목(li)에 기준점과 텍스트 시작 위치 설정
     const listItems = container.querySelectorAll('li');
     listItems.forEach((li) => {
-      // ql-ui의 absolute 기준점
       li.style.position = 'relative';
-      // 텍스트가 겹치지 않도록 오른쪽으로 밀어냄
+
       li.style.paddingLeft = '1.5em';
     });
 
-    // ✅ 리스트용 커스텀 UI 생성 및 위치 지정
     const lists = [
-      // 1. 순서가 있는 리스트 (숫자)
       {
         selector: 'li[data-list="ordered"]',
         content: (index) => `${index + 1}. `,
       },
-      // 3. 점 리스트
+
       { selector: 'li[data-list="bullet"]', content: () => ' • ' },
 
-      // 2, 4. 체크 리스트: 유니코드 문자로 설정
-      // 체크되지 않음: 흰색 네모
       {
         selector: 'li[data-list="unchecked"]',
         content: () => '☐ ',
         style: { color: '#1f2937' },
       },
-      // ✅ 수정: 체크 완료 상태에서 색상(color) 제거.
-      // 이제 ☑️ 문자는 텍스트와 동일한 색상(#1f2937)으로 표시됩니다.
+
       {
         selector: 'li[data-list="checked"]',
         content: () => '☑ ',
@@ -67,7 +59,6 @@ const PostContent = ({ htmlContent, font, className, card }) => {
     lists.forEach(({ selector, style }) => {
       const items = container.querySelectorAll(selector);
       items.forEach((li) => {
-        // 이미 생성된 마커가 있다면 건너뜁니다. (안전 장치)
         if (li.querySelector('.ql-ui')) {
           return;
         }

From de6922ef26bcd031f85f7608b8699daef7a5cea7 Mon Sep 17 00:00:00 2001
From: Choi hee ruk <chlgmlfkr593@naver.com>
Date: Tue, 14 Oct 2025 01:00:29 +0900
Subject: [PATCH 10/10] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20import?=
 =?UTF-8?q?=20DOMpurify=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/sanitizeConfig.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/constants/sanitizeConfig.js b/src/constants/sanitizeConfig.js
index 8183890e..18bebc62 100644
--- a/src/constants/sanitizeConfig.js
+++ b/src/constants/sanitizeConfig.js
@@ -1,5 +1,3 @@
-import DOMPurify from 'dompurify';
-
 export const SANITIZE_CONFIG = {
   ALLOWED_TAGS: [
     'p',