podo-ui 0.3.8 → 0.3.9

package/dist/react/atom/editor.js

@@ -0,0 +1,2224 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState, useCallback } from 'react';
+import { v4 as uuid } from 'uuid';
+import { z } from 'zod';
+import styles from './editor.module.scss';
+const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHeight, resizable = false, onChange, validator, placeholder = '내용을 입력하세요...', }) => {
+    const [message, setMessage] = useState('');
+    const [statusClass, setStatusClass] = useState('');
+    const [currentParagraphStyle, setCurrentParagraphStyle] = useState('p');
+    const [isParagraphDropdownOpen, setIsParagraphDropdownOpen] = useState(false);
+    const [isTextColorOpen, setIsTextColorOpen] = useState(false);
+    const [isBgColorOpen, setIsBgColorOpen] = useState(false);
+    const [isAlignDropdownOpen, setIsAlignDropdownOpen] = useState(false);
+    const [currentAlign, setCurrentAlign] = useState('left');
+    const [isLinkDropdownOpen, setIsLinkDropdownOpen] = useState(false);
+    const [linkUrl, setLinkUrl] = useState('');
+    const [linkTarget, setLinkTarget] = useState('_blank');
+    const [isEditLinkPopupOpen, setIsEditLinkPopupOpen] = useState(false);
+    const [selectedLinkElement, setSelectedLinkElement] = useState(null);
+    const [editLinkUrl, setEditLinkUrl] = useState('');
+    const [editLinkTarget, setEditLinkTarget] = useState('_self');
+    const [savedSelection, setSavedSelection] = useState(null);
+    const [isImageDropdownOpen, setIsImageDropdownOpen] = useState(false);
+    const [imageTabMode, setImageTabMode] = useState('file'); // 탭 모드 추가
+    const [imageUrl, setImageUrl] = useState('');
+    const [imageWidth, setImageWidth] = useState('original'); // 기본값을 원본으로 변경
+    const [imageAlign, setImageAlign] = useState('left'); // 기본값을 좌측으로 변경
+    const [imageAlt, setImageAlt] = useState('');
+    const [imageFile, setImageFile] = useState(null);
+    const [imagePreview, setImagePreview] = useState('');
+    const [savedImageSelection, setSavedImageSelection] = useState(null); // 이미지 삽입용 선택 영역 저장
+    const [selectedImage, setSelectedImage] = useState(null); // 선택된 이미지
+    const [isImageEditPopupOpen, setIsImageEditPopupOpen] = useState(false); // 이미지 편집 팝업 상태
+    const [editImageWidth, setEditImageWidth] = useState(''); // 편집 중인 이미지 크기
+    const [editImageAlign, setEditImageAlign] = useState('left'); // 편집 중인 이미지 정렬
+    const [editImageAlt, setEditImageAlt] = useState(''); // 편집 중인 이미지 대체 텍스트
+    const [isResizing, setIsResizing] = useState(false); // 리사이즈 중 여부
+    const [resizeStartData, setResizeStartData] = useState(null);
+    // 유튜브 관련 상태
+    const [isYoutubeDropdownOpen, setIsYoutubeDropdownOpen] = useState(false);
+    const [youtubeUrl, setYoutubeUrl] = useState('');
+    const [savedYoutubeSelection, setSavedYoutubeSelection] = useState(null);
+    const [youtubeWidth, setYoutubeWidth] = useState('100%'); // 기본값 100%
+    const [youtubeAlign, setYoutubeAlign] = useState('center'); // 기본값 가운데
+    const [selectedYoutube, setSelectedYoutube] = useState(null); // 선택된 유튜브
+    const [isYoutubeEditPopupOpen, setIsYoutubeEditPopupOpen] = useState(false); // 유튜브 편집 팝업
+    const [editYoutubeWidth, setEditYoutubeWidth] = useState('100%'); // 편집 중인 유튜브 크기
+    const [editYoutubeAlign, setEditYoutubeAlign] = useState('center'); // 편집 중인 유튜브 정렬
+    const [isCodeView, setIsCodeView] = useState(false); // 코드보기 모드
+    const [codeContent, setCodeContent] = useState(''); // 코드보기 내용
+    const [savedEditorHeight, setSavedEditorHeight] = useState(null); // 위지윅 에디터 높이 저장
+    // Undo/Redo 히스토리 관리
+    const [history, setHistory] = useState([value]);
+    const [historyIndex, setHistoryIndex] = useState(0);
+    const historyTimerRef = useRef(null);
+    const historyRef = useRef([value]);
+    const historyIndexRef = useRef(0);
+    const isUndoRedoRef = useRef(false); // undo/redo 실행 중 플래그
+    const editorRef = useRef(null);
+    const codeEditorRef = useRef(null);
+    const containerRef = useRef(null);
+    const fileInputRef = useRef(null);
+    const paragraphButtonRef = useRef(null);
+    const textColorButtonRef = useRef(null);
+    const bgColorButtonRef = useRef(null);
+    const alignButtonRef = useRef(null);
+    const linkButtonRef = useRef(null);
+    const imageButtonRef = useRef(null);
+    const youtubeButtonRef = useRef(null);
+    const imageFileInputRef = useRef(null);
+    // 클라이언트에서만 ID 생성 (Vite React용)
+    const [editorID, setEditorID] = useState('podo-editor');
+    // 색상 팔레트 정의 (이미지 기반)
+    const colorPalette = [
+        // 첫 번째 줄: 순수 색상
+        ['#ff0000', '#ff8000', '#ffff00', '#80ff00', '#00ffff', '#0080ff', '#0000ff', '#8000ff', '#ff00ff', '#000000'],
+        // 두 번째 줄: 매우 밝은 톤 (90% 밝기)
+        ['#ffcccc', '#ffe0cc', '#ffffcc', '#e0ffcc', '#ccffff', '#cce0ff', '#ccccff', '#e0ccff', '#ffccff', '#cccccc'],
+        // 세 번째 줄: 밝은 톤 (70% 밝기)
+        ['#ff9999', '#ffcc99', '#ffff99', '#ccff99', '#99ffff', '#99ccff', '#9999ff', '#cc99ff', '#ff99ff', '#999999'],
+        // 네 번째 줄: 중간 톤 (50% 밝기)
+        ['#ff6666', '#ffb366', '#ffff66', '#b3ff66', '#66ffff', '#66b3ff', '#6666ff', '#b366ff', '#ff66ff', '#666666'],
+        // 다섯 번째 줄: 어두운 톤 (30% 밝기)
+        ['#cc0000', '#cc6600', '#cccc00', '#66cc00', '#00cccc', '#0066cc', '#0000cc', '#6600cc', '#cc00cc', '#333333'],
+        // 여섯 번째 줄: 매우 어두운 톤 (15% 밝기)
+        ['#800000', '#804000', '#808000', '#408000', '#008080', '#004080', '#000080', '#400080', '#800080', '#1a1a1a'],
+    ];
+    // 정렬 옵션 정의
+    const alignOptions = [
+        { value: 'left', label: '왼쪽 정렬', icon: 'alignLeft' },
+        { value: 'center', label: '가운데 정렬', icon: 'alignCenter' },
+        { value: 'right', label: '오른쪽 정렬', icon: 'alignRight' },
+    ];
+    // 문단 형식 옵션 정의
+    const paragraphOptions = [
+        { value: 'h1', label: '제목 1' },
+        { value: 'h2', label: '제목 2' },
+        { value: 'h3', label: '제목 3' },
+        { value: 'p', label: '본문', className: styles.pDefault },
+        { value: 'p1', label: 'P1', className: styles.p1Preview },
+        { value: 'p2', label: 'P2', className: styles.p2Preview },
+        { value: 'p3', label: 'P3', className: styles.p3Preview },
+        { value: 'p3_semibold', label: 'P3 Semibold', className: styles.p3_semiboldPreview },
+        { value: 'p4', label: 'P4', className: styles.p4Preview },
+        { value: 'p4_semibold', label: 'P4 Semibold', className: styles.p4_semiboldPreview },
+        { value: 'p5', label: 'P5', className: styles.p5Preview },
+        { value: 'p5_semibold', label: 'P5 Semibold', className: styles.p5_semiboldPreview },
+    ];
+    // 현재 선택된 스타일의 라벨 가져오기
+    const getCurrentStyleLabel = () => {
+        const option = paragraphOptions.find(opt => opt.value === currentParagraphStyle);
+        return option ? option.label : '문단 형식';
+    };
+    // 현재 정렬 상태의 라벨 가져오기
+    const getCurrentAlignLabel = () => {
+        const option = alignOptions.find(opt => opt.value === currentAlign);
+        return option ? option.label : '왼쪽 정렬';
+    };
+    // 현재 정렬 상태의 아이콘 가져오기
+    const getCurrentAlignIcon = () => {
+        const option = alignOptions.find(opt => opt.value === currentAlign);
+        return option ? styles[option.icon] : styles.alignLeft;
+    };
+    const validateHandler = (content) => {
+        setMessage('');
+        setStatusClass('');
+        if (validator && content.length > 0) {
+            try {
+                validator.parse(content);
+                setStatusClass('success');
+            }
+            catch (e) {
+                if (e instanceof z.ZodError) {
+                    setMessage(e.errors[0].message);
+                    setStatusClass('danger');
+                }
+            }
+        }
+    };
+    const detectCurrentAlign = () => {
+        // 정렬 상태 감지
+        if (document.queryCommandState('justifyLeft')) {
+            setCurrentAlign('left');
+        }
+        else if (document.queryCommandState('justifyCenter')) {
+            setCurrentAlign('center');
+        }
+        else if (document.queryCommandState('justifyRight')) {
+            setCurrentAlign('right');
+        }
+        else {
+            // 기본값은 왼쪽 정렬
+            setCurrentAlign('left');
+        }
+    };
+    const detectCurrentParagraphStyle = () => {
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+            setCurrentParagraphStyle('p');
+            return;
+        }
+        let container = selection.getRangeAt(0).commonAncestorContainer;
+        if (container.nodeType === Node.TEXT_NODE) {
+            container = container.parentNode;
+        }
+        // 상위 블록 요소 찾기
+        while (container && container !== editorRef.current) {
+            const element = container;
+            if (element.tagName) {
+                const tagName = element.tagName.toLowerCase();
+                // H1, H2, H3 체크
+                if (tagName === 'h1' || tagName === 'h2' || tagName === 'h3') {
+                    setCurrentParagraphStyle(tagName);
+                    return;
+                }
+                // P 태그 체크
+                if (tagName === 'p') {
+                    // 클래스 확인
+                    if (element.className) {
+                        // p1, p2, p3, p4, p5, p1_semibold, p2_semibold 등의 클래스 찾기
+                        const classNames = Object.keys(styles);
+                        for (const className of classNames) {
+                            if (className.match(/^p[1-5](_semibold)?$/) &&
+                                element.classList.contains(styles[className])) {
+                                setCurrentParagraphStyle(className);
+                                return;
+                            }
+                        }
+                    }
+                    // 클래스가 없으면 일반 p
+                    setCurrentParagraphStyle('p');
+                    return;
+                }
+                // DIV나 기타 블록 요소는 본문으로 처리
+                if (tagName === 'div' || tagName === 'blockquote' || tagName === 'pre') {
+                    setCurrentParagraphStyle('p');
+                    return;
+                }
+            }
+            container = container.parentNode;
+        }
+        // 기본값은 본문
+        setCurrentParagraphStyle('p');
+    };
+    // ref와 state 동기화
+    useEffect(() => {
+        historyRef.current = history;
+        historyIndexRef.current = historyIndex;
+    }, [history, historyIndex]);
+    // 히스토리에 추가 (디바운스 적용)
+    const addToHistory = useCallback((content) => {
+        // 기존 타이머 취소
+        if (historyTimerRef.current) {
+            clearTimeout(historyTimerRef.current);
+        }
+        // 500ms 후에 히스토리 추가 (연속 입력 시 하나로 묶음)
+        historyTimerRef.current = setTimeout(() => {
+            // ref에서 최신 값 가져오기
+            const currentHistory = historyRef.current;
+            const currentIndex = historyIndexRef.current;
+            // 현재 인덱스 이후의 히스토리 제거
+            const newHistory = currentHistory.slice(0, currentIndex + 1);
+            // 마지막 항목과 동일하면 추가하지 않음
+            if (newHistory[newHistory.length - 1] === content) {
+                return;
+            }
+            // 새 항목 추가 (최대 200개)
+            const updated = [...newHistory, content];
+            if (updated.length > 200) {
+                updated.shift(); // 가장 오래된 항목 제거
+                setHistory(updated);
+                setHistoryIndex(currentIndex); // 인덱스는 그대로 유지
+            }
+            else {
+                setHistory(updated);
+                setHistoryIndex(updated.length - 1);
+            }
+        }, 500);
+    }, []);
+    // Undo 실행
+    const performUndo = useCallback(() => {
+        // debounce 타이머 취소 (undo 중에는 히스토리 추가 안 함)
+        if (historyTimerRef.current) {
+            clearTimeout(historyTimerRef.current);
+            historyTimerRef.current = null;
+        }
+        const currentIndex = historyIndexRef.current;
+        const currentHistory = historyRef.current;
+        if (currentIndex > 0) {
+            const newIndex = currentIndex - 1;
+            const content = currentHistory[newIndex];
+            setHistoryIndex(newIndex);
+            if (editorRef.current) {
+                isUndoRedoRef.current = true; // undo 실행 중 플래그 설정
+                editorRef.current.innerHTML = content;
+                onChange(content);
+                detectCurrentParagraphStyle();
+                detectCurrentAlign();
+                // 다음 틱에서 플래그 해제
+                setTimeout(() => {
+                    isUndoRedoRef.current = false;
+                }, 0);
+            }
+        }
+    }, [onChange]);
+    // Redo 실행
+    const performRedo = useCallback(() => {
+        // debounce 타이머 취소 (redo 중에는 히스토리 추가 안 함)
+        if (historyTimerRef.current) {
+            clearTimeout(historyTimerRef.current);
+            historyTimerRef.current = null;
+        }
+        const currentIndex = historyIndexRef.current;
+        const currentHistory = historyRef.current;
+        if (currentIndex < currentHistory.length - 1) {
+            const newIndex = currentIndex + 1;
+            const content = currentHistory[newIndex];
+            setHistoryIndex(newIndex);
+            if (editorRef.current) {
+                isUndoRedoRef.current = true; // redo 실행 중 플래그 설정
+                editorRef.current.innerHTML = content;
+                onChange(content);
+                detectCurrentParagraphStyle();
+                detectCurrentAlign();
+                // 다음 틱에서 플래그 해제
+                setTimeout(() => {
+                    isUndoRedoRef.current = false;
+                }, 0);
+            }
+        }
+    }, [onChange]);
+    const handleInput = useCallback(() => {
+        if (editorRef.current) {
+            const content = editorRef.current.innerHTML;
+            onChange(content);
+            validateHandler(content);
+            detectCurrentParagraphStyle();
+            detectCurrentAlign();
+            // 히스토리에 추가
+            addToHistory(content);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [onChange, addToHistory]);
+    // 붙여넣기 이벤트 핸들러 - 지원하지 않는 스타일 제거
+    const handlePaste = useCallback((e) => {
+        e.preventDefault();
+        const clipboardData = e.clipboardData;
+        if (!clipboardData)
+            return;
+        // HTML 데이터 가져오기
+        const html = clipboardData.getData('text/html');
+        const text = clipboardData.getData('text/plain');
+        if (html) {
+            // 임시 div를 만들어서 HTML 파싱
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = html;
+            // 지원하는 태그와 스타일 정의
+            const allowedTags = ['P', 'BR', 'STRONG', 'B', 'EM', 'I', 'U', 'S', 'STRIKE', 'DEL',
+                'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'BLOCKQUOTE', 'PRE',
+                'UL', 'OL', 'LI', 'A', 'IMG', 'SPAN', 'DIV'];
+            const allowedStyles = ['color', 'background-color', 'text-align'];
+            // 모든 요소를 순회하면서 정리
+            const cleanElement = (element) => {
+                const tagName = element.tagName;
+                // 지원하지 않는 태그는 내용만 유지
+                if (!allowedTags.includes(tagName)) {
+                    const fragment = document.createDocumentFragment();
+                    Array.from(element.childNodes).forEach(child => {
+                        if (child.nodeType === Node.ELEMENT_NODE) {
+                            const cleaned = cleanElement(child);
+                            if (cleaned)
+                                fragment.appendChild(cleaned);
+                        }
+                        else if (child.nodeType === Node.TEXT_NODE) {
+                            fragment.appendChild(child.cloneNode(true));
+                        }
+                    });
+                    return fragment.childNodes.length > 0 ? fragment : null;
+                }
+                // 지원하는 태그는 복제하고 스타일 정리
+                const newElement = element.cloneNode(false);
+                // 모든 속성 제거 후 필요한 것만 복원
+                const attrs = Array.from(element.attributes);
+                attrs.forEach(attr => newElement.removeAttribute(attr.name));
+                // href, src, alt 등 필수 속성만 복원
+                if (tagName === 'A' && element.getAttribute('href')) {
+                    newElement.setAttribute('href', element.getAttribute('href'));
+                }
+                if (tagName === 'IMG') {
+                    if (element.getAttribute('src')) {
+                        newElement.setAttribute('src', element.getAttribute('src'));
+                    }
+                    if (element.getAttribute('alt')) {
+                        newElement.setAttribute('alt', element.getAttribute('alt'));
+                    }
+                }
+                // 스타일 복원 (허용된 것만)
+                if (element instanceof HTMLElement && element.style) {
+                    allowedStyles.forEach(styleName => {
+                        const value = element.style.getPropertyValue(styleName);
+                        if (value) {
+                            newElement.style.setProperty(styleName, value);
+                        }
+                    });
+                }
+                // 자식 요소 처리
+                Array.from(element.childNodes).forEach(child => {
+                    if (child.nodeType === Node.ELEMENT_NODE) {
+                        const cleaned = cleanElement(child);
+                        if (cleaned)
+                            newElement.appendChild(cleaned);
+                    }
+                    else if (child.nodeType === Node.TEXT_NODE) {
+                        newElement.appendChild(child.cloneNode(true));
+                    }
+                });
+                return newElement;
+            };
+            // 정리된 HTML 생성
+            const cleanedDiv = document.createElement('div');
+            Array.from(tempDiv.childNodes).forEach(child => {
+                if (child.nodeType === Node.ELEMENT_NODE) {
+                    const cleaned = cleanElement(child);
+                    if (cleaned)
+                        cleanedDiv.appendChild(cleaned);
+                }
+                else if (child.nodeType === Node.TEXT_NODE) {
+                    cleanedDiv.appendChild(child.cloneNode(true));
+                }
+            });
+            // 현재 커서 위치에 삽입
+            const selection = window.getSelection();
+            if (selection && selection.rangeCount > 0) {
+                const range = selection.getRangeAt(0);
+                range.deleteContents();
+                const fragment = document.createDocumentFragment();
+                while (cleanedDiv.firstChild) {
+                    fragment.appendChild(cleanedDiv.firstChild);
+                }
+                range.insertNode(fragment);
+                // 커서를 삽입된 내용의 끝으로 이동
+                range.collapse(false);
+                selection.removeAllRanges();
+                selection.addRange(range);
+            }
+        }
+        else if (text) {
+            // HTML이 없으면 일반 텍스트 삽입
+            const selection = window.getSelection();
+            if (selection && selection.rangeCount > 0) {
+                const range = selection.getRangeAt(0);
+                range.deleteContents();
+                range.insertNode(document.createTextNode(text));
+                range.collapse(false);
+            }
+        }
+        // 변경사항 반영
+        handleInput();
+    }, [handleInput]);
+    const execCommand = (command, value = undefined) => {
+        // undo/redo는 커스텀 함수 사용
+        if (command === 'undo') {
+            performUndo();
+            return;
+        }
+        if (command === 'redo') {
+            performRedo();
+            return;
+        }
+        // bold, italic, underline, strikeThrough일 때 선택 영역이 없으면 아무것도 하지 않음
+        if (['bold', 'italic', 'underline', 'strikeThrough'].includes(command)) {
+            const selection = window.getSelection();
+            if (selection && selection.isCollapsed) {
+                // 선택 영역이 없으면 실행하지 않음
+                return;
+            }
+        }
+        document.execCommand(command, false, value);
+        editorRef.current?.focus();
+        handleInput();
+    };
+    // 코드보기 토글
+    const toggleCodeView = () => {
+        if (isCodeView) {
+            // 코드보기에서 일반 모드로 전환
+            setIsCodeView(false);
+            setSavedEditorHeight(null); // 저장된 높이 초기화
+            // 다음 렌더링 사이클에서 에디터 내용 업데이트
+            setTimeout(() => {
+                if (editorRef.current && codeContent !== undefined) {
+                    editorRef.current.innerHTML = codeContent;
+                    handleInput();
+                }
+            }, 0);
+        }
+        else {
+            // 일반 모드에서 코드보기로 전환
+            if (editorRef.current) {
+                // height가 contents일 때 현재 에디터 높이 저장
+                if (height === 'contents') {
+                    const currentHeight = editorRef.current.scrollHeight;
+                    setSavedEditorHeight(currentHeight);
+                }
+                // 현재 HTML을 포맷팅
+                const html = editorRef.current.innerHTML;
+                const formattedHtml = formatHtml(html);
+                setCodeContent(formattedHtml);
+                setIsCodeView(true);
+            }
+        }
+    };
+    // HTML 포맷팅 함수
+    const formatHtml = (html) => {
+        // 기본적인 HTML 포맷팅
+        const formatted = html
+            .replace(/></g, '>\n<') // 태그 사이에 줄바꿈 추가
+            .replace(/(<div|<p|<h[1-6]|<ul|<ol|<li|<blockquote)/gi, '\n$1') // 블록 요소 앞에 줄바꿈
+            .replace(/(<\/div>|<\/p>|<\/h[1-6]>|<\/ul>|<\/ol>|<\/li>|<\/blockquote>)/gi, '$1\n'); // 블록 요소 뒤에 줄바꿈
+        // 들여쓰기 추가
+        const lines = formatted.split('\n');
+        let indentLevel = 0;
+        const indentedLines = lines.map(line => {
+            const trimmed = line.trim();
+            if (!trimmed)
+                return '';
+            // 닫는 태그인 경우 들여쓰기 레벨 감소
+            if (trimmed.startsWith('</')) {
+                indentLevel = Math.max(0, indentLevel - 1);
+                const indented = '  '.repeat(indentLevel) + trimmed;
+                return indented;
+            }
+            // 자체 닫는 태그가 아닌 여는 태그인 경우
+            const indented = '  '.repeat(indentLevel) + trimmed;
+            if (trimmed.startsWith('<') && !trimmed.startsWith('<!') &&
+                !trimmed.endsWith('/>') && trimmed.includes('>') &&
+                !trimmed.includes('</')) {
+                indentLevel++;
+            }
+            return indented;
+        });
+        return indentedLines.filter(line => line !== '').join('\n');
+    };
+    // 코드 에디터 내용 변경 처리
+    const handleCodeChange = (e) => {
+        setCodeContent(e.target.value);
+    };
+    const applyParagraphStyle = (value) => {
+        // 빈 값이면 본문으로 설정
+        if (!value) {
+            value = 'p';
+        }
+        // h1, h2, h3는 formatBlock 사용
+        if (value === 'h1' || value === 'h2' || value === 'h3') {
+            execCommand('formatBlock', value);
+            setCurrentParagraphStyle(value);
+        }
+        // 본문은 p 태그로
+        else if (value === 'p') {
+            execCommand('formatBlock', 'p');
+            setCurrentParagraphStyle('p');
+        }
+        // p1~p5 및 p1_semibold~p5_semibold 스타일은 클래스 적용
+        else if (value.match(/^p[1-5](_semibold)?$/)) {
+            // 먼저 p 태그로 만들고
+            execCommand('formatBlock', 'p');
+            // 잠시 후 클래스 적용
+            setTimeout(() => {
+                const selection = window.getSelection();
+                if (!selection || selection.rangeCount === 0)
+                    return;
+                let container = selection.getRangeAt(0).commonAncestorContainer;
+                if (container.nodeType === Node.TEXT_NODE) {
+                    container = container.parentNode;
+                }
+                // 상위 블록 요소 찾기
+                while (container && container !== editorRef.current) {
+                    const element = container;
+                    if (element.tagName && ['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'DIV'].includes(element.tagName)) {
+                        // 클래스 적용
+                        element.className = styles[value];
+                        setCurrentParagraphStyle(value);
+                        break;
+                    }
+                    container = element.parentNode;
+                }
+                handleInput();
+            }, 10);
+        }
+        // 드롭다운 닫기
+        setIsParagraphDropdownOpen(false);
+    };
+    const applyLink = () => {
+        if (linkUrl && savedSelection) {
+            restoreSelection(savedSelection);
+            const selection = window.getSelection();
+            if (selection && !selection.isCollapsed) {
+                const range = selection.getRangeAt(0);
+                const selectedText = range.toString();
+                // Create link element
+                const link = document.createElement('a');
+                link.href = linkUrl;
+                link.textContent = selectedText;
+                // Set target attribute
+                if (linkTarget === '_blank') {
+                    link.target = '_blank';
+                    link.rel = 'noopener noreferrer';
+                }
+                // Replace selection with link
+                range.deleteContents();
+                range.insertNode(link);
+                // Clear and close dropdown
+                setLinkUrl('');
+                setLinkTarget('_blank');
+                setIsLinkDropdownOpen(false);
+                setSavedSelection(null);
+                editorRef.current?.focus();
+                handleInput();
+            }
+        }
+    };
+    const openLinkDropdown = () => {
+        const selection = window.getSelection();
+        if (selection && !selection.isCollapsed) {
+            // Save selection
+            const range = saveSelection();
+            setSavedSelection(range);
+            setIsLinkDropdownOpen(true);
+            setIsParagraphDropdownOpen(false);
+            setIsTextColorOpen(false);
+            setIsBgColorOpen(false);
+            setIsAlignDropdownOpen(false);
+        }
+    };
+    // 이미지 선택
+    const selectImage = (img) => {
+        // 기존 선택 해제
+        if (selectedImage) {
+            deselectImage();
+        }
+        setSelectedImage(img);
+        // 이미지 주위에 wrapper 추가
+        const wrapper = document.createElement('div');
+        wrapper.className = 'image-wrapper';
+        wrapper.style.position = 'relative';
+        wrapper.style.display = 'inline-block';
+        wrapper.style.border = '2px solid #0084ff';
+        wrapper.style.padding = '0';
+        // 리사이즈 핸들 추가
+        const handles = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
+        handles.forEach(handle => {
+            const handleDiv = document.createElement('div');
+            handleDiv.className = `resize-handle resize-handle-${handle}`;
+            handleDiv.dataset.handle = handle;
+            handleDiv.style.position = 'absolute';
+            handleDiv.style.width = '8px';
+            handleDiv.style.height = '8px';
+            handleDiv.style.backgroundColor = '#0084ff';
+            handleDiv.style.border = '1px solid white';
+            handleDiv.style.borderRadius = '2px';
+            handleDiv.style.cursor = `${handle}-resize`;
+            // 핸들 위치 설정
+            switch (handle) {
+                case 'nw':
+                    handleDiv.style.top = '-5px';
+                    handleDiv.style.left = '-5px';
+                    break;
+                case 'n':
+                    handleDiv.style.top = '-5px';
+                    handleDiv.style.left = '50%';
+                    handleDiv.style.transform = 'translateX(-50%)';
+                    break;
+                case 'ne':
+                    handleDiv.style.top = '-5px';
+                    handleDiv.style.right = '-5px';
+                    break;
+                case 'e':
+                    handleDiv.style.top = '50%';
+                    handleDiv.style.right = '-5px';
+                    handleDiv.style.transform = 'translateY(-50%)';
+                    break;
+                case 'se':
+                    handleDiv.style.bottom = '-5px';
+                    handleDiv.style.right = '-5px';
+                    break;
+                case 's':
+                    handleDiv.style.bottom = '-5px';
+                    handleDiv.style.left = '50%';
+                    handleDiv.style.transform = 'translateX(-50%)';
+                    break;
+                case 'sw':
+                    handleDiv.style.bottom = '-5px';
+                    handleDiv.style.left = '-5px';
+                    break;
+                case 'w':
+                    handleDiv.style.top = '50%';
+                    handleDiv.style.left = '-5px';
+                    handleDiv.style.transform = 'translateY(-50%)';
+                    break;
+            }
+            // 리사이즈 이벤트 핸들러
+            handleDiv.onmousedown = (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                startResize(e, img, handle);
+            };
+            wrapper.appendChild(handleDiv);
+        });
+        // 이미지를 wrapper로 감싸기
+        const parent = img.parentNode;
+        parent?.insertBefore(wrapper, img);
+        wrapper.appendChild(img);
+        // 편집 팝업 데이터 설정
+        // 이미지 크기 확인
+        if (img.style.width) {
+            setEditImageWidth(img.style.width);
+        }
+        else {
+            setEditImageWidth('original');
+        }
+        // 이미지의 정렬 상태 확인 - 부모 div의 textAlign 체크
+        let container = img.parentElement;
+        let currentAlign = 'left'; // 기본값
+        // 부모 요소를 올라가며 textAlign이 설정된 div 찾기
+        while (container && container !== editorRef.current) {
+            if (container.tagName === 'DIV' && container.style.textAlign) {
+                currentAlign = container.style.textAlign;
+                break;
+            }
+            container = container.parentElement;
+        }
+        setEditImageAlign(currentAlign);
+        setEditImageAlt(img.alt || '');
+        // 약간의 지연 후 편집창 열기 (클릭 이벤트 완전 처리 후)
+        setTimeout(() => {
+            setIsImageEditPopupOpen(true);
+        }, 50);
+    };
+    // 이미지 선택 해제
+    const deselectImage = () => {
+        if (!selectedImage)
+            return;
+        // wrapper 제거
+        const wrapper = selectedImage.parentElement;
+        if (wrapper && wrapper.classList.contains('image-wrapper')) {
+            const parent = wrapper.parentNode;
+            if (parent) {
+                try {
+                    // 이미지를 wrapper 밖으로 이동
+                    parent.insertBefore(selectedImage, wrapper);
+                    // wrapper 제거
+                    wrapper.remove();
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                }
+                catch (e) {
+                    // 이미 제거된 경우 무시
+                }
+            }
+        }
+        // 이미지 draggable 속성 제거
+        if (selectedImage) {
+            selectedImage.draggable = false;
+        }
+        // 상태 초기화
+        setSelectedImage(null);
+        setIsImageEditPopupOpen(false);
+        setIsResizing(false);
+        setResizeStartData(null);
+    };
+    // 리사이즈 시작
+    const startResize = (e, img, handle) => {
+        setIsResizing(true);
+        setResizeStartData({
+            startX: e.clientX,
+            startY: e.clientY,
+            startWidth: img.offsetWidth,
+            startHeight: img.offsetHeight,
+            handle
+        });
+    };
+    // 이미지 편집 적용
+    const applyImageEdit = () => {
+        if (!selectedImage)
+            return;
+        // 크기 적용
+        if (editImageWidth) {
+            if (editImageWidth.includes('%')) {
+                selectedImage.style.width = editImageWidth;
+                selectedImage.style.height = 'auto';
+            }
+            else if (editImageWidth === 'original') {
+                selectedImage.style.width = '';
+                selectedImage.style.height = '';
+            }
+            else {
+                selectedImage.style.width = editImageWidth;
+                selectedImage.style.height = 'auto';
+            }
+        }
+        // 정렬 적용 - 이미지를 감싸는 정렬 컨테이너 찾기 또는 생성
+        let alignContainer = selectedImage.parentElement;
+        // wrapper가 있으면 그 부모를 확인
+        if (alignContainer?.classList.contains('image-wrapper')) {
+            alignContainer = alignContainer.parentElement;
+        }
+        // 정렬 컨테이너가 이미 있는지 확인 (div이고 textAlign이 설정된 경우)
+        if (alignContainer && alignContainer.tagName === 'DIV' && alignContainer !== editorRef.current) {
+            // 기존 컨테이너의 정렬 변경
+            alignContainer.style.textAlign = editImageAlign;
+        }
+        else {
+            // 정렬 컨테이너가 없으면 새로 생성
+            const newContainer = document.createElement('div');
+            newContainer.style.textAlign = editImageAlign;
+            // wrapper나 이미지를 새 컨테이너로 감싸기
+            const elementToWrap = selectedImage.parentElement?.classList.contains('image-wrapper')
+                ? selectedImage.parentElement
+                : selectedImage;
+            if (elementToWrap.parentNode) {
+                elementToWrap.parentNode.insertBefore(newContainer, elementToWrap);
+                newContainer.appendChild(elementToWrap);
+            }
+        }
+        // 대체 텍스트 적용
+        selectedImage.alt = editImageAlt;
+        // 선택 해제
+        deselectImage();
+        handleInput();
+    };
+    // 이미지 삭제
+    const deleteImage = () => {
+        if (!selectedImage)
+            return;
+        // 먼저 선택 해제 (상태 초기화)
+        const imageToDelete = selectedImage;
+        deselectImage();
+        // wrapper가 있는 경우 wrapper를 찾아서 제거
+        let elementToRemove = imageToDelete;
+        let parent = imageToDelete.parentElement;
+        // wrapper를 거슬러 올라가며 정렬 컨테이너까지 찾기
+        while (parent && parent !== editorRef.current) {
+            if (parent.classList.contains('image-wrapper') ||
+                (parent.tagName === 'DIV' && parent.style.textAlign)) {
+                elementToRemove = parent;
+                parent = parent.parentElement;
+            }
+            else {
+                break;
+            }
+        }
+        // DOM에서 제거
+        if (elementToRemove.parentNode) {
+            elementToRemove.parentNode.removeChild(elementToRemove);
+        }
+        handleInput();
+    };
+    // 링크 요소 클릭 감지
+    const handleEditorClick = (e) => {
+        const target = e.target;
+        // 리사이즈 핸들 클릭은 무시
+        if (target.classList.contains('resize-handle')) {
+            return;
+        }
+        // 이미지 편집 팝업 클릭은 무시
+        if (target.closest(`.${styles.imageDropdown}`)) {
+            return;
+        }
+        // 유튜브 편집 팝업 클릭은 무시
+        if (target.closest(`.${styles.youtubeEditPopup}`)) {
+            return;
+        }
+        // 유튜브 오버레이 클릭 감지
+        if ((target.classList.contains('youtube-overlay') || target.closest('.youtube-container')) && editorRef.current?.contains(target)) {
+            e.preventDefault();
+            e.stopPropagation();
+            const youtubeContainer = target.closest('.youtube-container');
+            if (youtubeContainer) {
+                // 이미 선택된 유튜브가 아닌 경우에만 선택
+                if (selectedYoutube !== youtubeContainer) {
+                    // 기존 선택 해제
+                    if (selectedYoutube) {
+                        deselectYoutube();
+                    }
+                    if (selectedImage) {
+                        deselectImage();
+                    }
+                    selectYoutube(youtubeContainer);
+                }
+                else {
+                    // 같은 유튜브를 다시 클릭하면 편집창 토글
+                    setIsYoutubeEditPopupOpen(!isYoutubeEditPopupOpen);
+                }
+            }
+            return;
+        }
+        // 이미지 요소인지 확인
+        if (target.tagName === 'IMG' && editorRef.current?.contains(target)) {
+            e.preventDefault();
+            e.stopPropagation();
+            const img = target;
+            // 이미 선택된 이미지가 아닌 경우에만 선택
+            if (selectedImage !== img) {
+                // 기존 선택 해제
+                if (selectedImage) {
+                    deselectImage();
+                }
+                if (selectedYoutube) {
+                    deselectYoutube();
+                }
+                selectImage(img);
+            }
+            else {
+                // 같은 이미지를 다시 클릭하면 편집창 토글
+                setIsImageEditPopupOpen(!isImageEditPopupOpen);
+            }
+            return;
+        }
+        // 기존 선택된 이미지가 있으면 선택 해제
+        // image-wrapper 또는 리사이즈 핸들이 아닌 경우
+        // 단, 리사이즈 중일 때는 선택 해제하지 않음
+        if (selectedImage && !target.closest('.image-wrapper') && !isResizing) {
+            deselectImage();
+        }
+        // 기존 선택된 유튜브가 있으면 선택 해제
+        // 단, 리사이즈 중일 때는 선택 해제하지 않음
+        if (selectedYoutube && !target.closest('.youtube-wrapper') && !isResizing) {
+            deselectYoutube();
+        }
+        // 링크 요소인지 확인
+        const linkElement = target.closest('a');
+        if (linkElement && editorRef.current?.contains(linkElement)) {
+            e.preventDefault();
+            setSelectedLinkElement(linkElement);
+            setEditLinkUrl(linkElement.href);
+            setEditLinkTarget(linkElement.target || '_self');
+            setIsEditLinkPopupOpen(true);
+        }
+        else {
+            // 일반 클릭 처리
+            detectCurrentParagraphStyle();
+            detectCurrentAlign();
+        }
+    };
+    // 링크 수정
+    const updateLink = () => {
+        if (selectedLinkElement && editLinkUrl) {
+            selectedLinkElement.href = editLinkUrl;
+            if (editLinkTarget === '_blank') {
+                selectedLinkElement.target = '_blank';
+                selectedLinkElement.rel = 'noopener noreferrer';
+            }
+            else {
+                selectedLinkElement.removeAttribute('target');
+                selectedLinkElement.removeAttribute('rel');
+            }
+            setIsEditLinkPopupOpen(false);
+            setSelectedLinkElement(null);
+            editorRef.current?.focus();
+            handleInput();
+        }
+    };
+    // 링크 삭제
+    const removeLink = () => {
+        if (selectedLinkElement) {
+            const parent = selectedLinkElement.parentNode;
+            const textContent = selectedLinkElement.textContent || '';
+            const textNode = document.createTextNode(textContent);
+            parent?.replaceChild(textNode, selectedLinkElement);
+            setIsEditLinkPopupOpen(false);
+            setSelectedLinkElement(null);
+            editorRef.current?.focus();
+            handleInput();
+        }
+    };
+    const openImageDropdown = (e) => {
+        e?.stopPropagation();
+        // 현재 선택 영역 저장
+        const selection = window.getSelection();
+        if (selection && selection.rangeCount > 0) {
+            const range = selection.getRangeAt(0).cloneRange();
+            setSavedImageSelection(range);
+        }
+        else {
+            setSavedImageSelection(null);
+        }
+        setIsImageDropdownOpen(true);
+        setImageTabMode('file'); // 기본값으로 파일 업로드 탭 선택
+        setIsParagraphDropdownOpen(false);
+        setIsTextColorOpen(false);
+        setIsBgColorOpen(false);
+        setIsAlignDropdownOpen(false);
+        setIsLinkDropdownOpen(false);
+    };
+    const insertImage = async () => {
+        let imageSrc = '';
+        // 파일이 업로드된 경우
+        if (imageFile && imagePreview) {
+            imageSrc = imagePreview;
+        }
+        // URL이 입력된 경우
+        else if (imageUrl) {
+            // URL 유효성 검사
+            try {
+                const testImg = new Image();
+                await new Promise((resolve, reject) => {
+                    const timeout = setTimeout(() => {
+                        reject(new Error('Timeout'));
+                    }, 5000); // 5초 타임아웃
+                    testImg.onload = () => {
+                        clearTimeout(timeout);
+                        resolve(true);
+                    };
+                    testImg.onerror = () => {
+                        clearTimeout(timeout);
+                        reject(new Error('Load failed'));
+                    };
+                    // CORS를 우회하기 위해 crossOrigin 설정하지 않음
+                    testImg.src = imageUrl;
+                });
+                imageSrc = imageUrl;
+            }
+            catch (error) {
+                console.error('Image validation failed:', error);
+                alert(`이미지를 불러올 수 없습니다.\n\n가능한 원인:\n1. 잘못된 이미지 URL\n2. CORS 정책으로 인한 차단 (외부 도메인)\n3. 네트워크 연결 문제\n4. 이미지가 존재하지 않음\n\nURL: ${imageUrl}\n\n💡 팁: CORS 정책으로 차단된 경우, 이미지를 직접 다운로드 후 파일 업로드를 사용해주세요.`);
+                return;
+            }
+        }
+        if (!imageSrc)
+            return;
+        // 이미지 엘리먼트 생성
+        const img = document.createElement('img');
+        img.src = imageSrc;
+        img.alt = imageAlt || '';
+        // display를 inline-block으로 설정하여 정렬이 작동하도록 함
+        img.style.display = 'inline-block';
+        img.style.verticalAlign = 'middle'; // 수직 정렬 개선
+        // 이미지 로드 에러 처리
+        img.onerror = () => {
+            console.error('Image load failed:', imageSrc);
+            alert(`이미지를 불러올 수 없습니다.\n\n가능한 원인:\n1. 잘못된 이미지 URL\n2. CORS 정책으로 인한 차단\n3. 네트워크 연결 문제\n\nURL: ${imageSrc}`);
+            // 에러 발생 시 삽입된 이미지 제거
+            if (img.parentNode) {
+                img.parentNode.removeChild(img);
+            }
+        };
+        // 이미지 로드 성공 처리
+        img.onload = () => {
+            // 이미지 로드 성공
+        };
+        // 크기 설정
+        if (imageWidth === '100%') {
+            img.style.width = '100%';
+            img.style.height = 'auto';
+        }
+        else if (imageWidth === '75%') {
+            img.style.width = '75%';
+            img.style.height = 'auto';
+        }
+        else if (imageWidth === '50%') {
+            img.style.width = '50%';
+            img.style.height = 'auto';
+        }
+        // '원본'인 경우 스타일을 설정하지 않음
+        // 컨테이너 div 생성 (정렬용)
+        const container = document.createElement('div');
+        container.style.textAlign = imageAlign;
+        container.appendChild(img);
+        // 에디터에 포커스 먼저 설정
+        if (editorRef.current) {
+            editorRef.current.focus();
+            const selection = window.getSelection();
+            // 저장된 선택 영역이 있으면 복원
+            if (savedImageSelection && selection) {
+                try {
+                    selection.removeAllRanges();
+                    selection.addRange(savedImageSelection);
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                }
+                catch (e) {
+                    // 복원 실패 시 무시
+                }
+            }
+            // 선택 영역 재확인
+            if (!selection || selection.rangeCount === 0 || !editorRef.current.contains(selection.anchorNode)) {
+                // 에디터가 비어있으면 p 태그 추가
+                if (!editorRef.current.innerHTML || editorRef.current.innerHTML === '<br>') {
+                    const p = document.createElement('p');
+                    p.innerHTML = '<br>';
+                    editorRef.current.appendChild(p);
+                }
+                // 커서를 에디터 끝으로 이동
+                const range = document.createRange();
+                range.selectNodeContents(editorRef.current);
+                range.collapse(false);
+                selection?.removeAllRanges();
+                selection?.addRange(range);
+            }
+            // 이제 이미지 삽입
+            if (selection && selection.rangeCount > 0) {
+                const range = selection.getRangeAt(0);
+                range.deleteContents();
+                range.insertNode(container);
+                // 이미지 다음에 새 문단 추가
+                const newP = document.createElement('p');
+                newP.innerHTML = '<br>';
+                container.after(newP);
+                // 커서를 새 문단으로 이동
+                const newRange = document.createRange();
+                newRange.selectNodeContents(newP);
+                newRange.collapse(true);
+                selection.removeAllRanges();
+                selection.addRange(newRange);
+            }
+            else {
+                // 폴백: 에디터 끝에 추가
+                editorRef.current.appendChild(container);
+            }
+        }
+        // 상태 초기화
+        setIsImageDropdownOpen(false);
+        setImageTabMode('file'); // 탭 모드도 초기화
+        setImageUrl('');
+        setImageFile(null);
+        setImagePreview('');
+        setImageWidth('original'); // 원본으로 초기화
+        setImageAlign('left'); // 좌측으로 초기화
+        setImageAlt('');
+        setSavedImageSelection(null); // 저장된 선택 영역 초기화
+        editorRef.current?.focus();
+        handleInput();
+    };
+    // YouTube URL에서 Video ID 추출
+    const extractYoutubeVideoId = (url) => {
+        // 다양한 YouTube URL 형식 지원
+        const patterns = [
+            /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/,
+            /youtube\.com\/watch\?.*v=([^&\n?#]+)/,
+        ];
+        for (const pattern of patterns) {
+            const match = url.match(pattern);
+            if (match && match[1]) {
+                return match[1];
+            }
+        }
+        return null;
+    };
+    // YouTube 선택
+    const selectYoutube = (youtubeContainer) => {
+        // 기존 선택 해제
+        if (selectedYoutube) {
+            deselectYoutube();
+        }
+        if (selectedImage) {
+            deselectImage();
+        }
+        setSelectedYoutube(youtubeContainer);
+        // 유튜브 주위에 wrapper 추가
+        const wrapper = document.createElement('div');
+        wrapper.className = 'youtube-wrapper';
+        wrapper.style.position = 'relative';
+        wrapper.style.border = '2px solid #0084ff';
+        wrapper.style.padding = '0';
+        // wrapper를 유튜브 컨테이너와 동일한 display 속성으로 설정
+        const computedStyle = window.getComputedStyle(youtubeContainer);
+        wrapper.style.display = computedStyle.display;
+        // style.width가 있으면 그것을 사용, 없으면 computed width 사용
+        wrapper.style.width = youtubeContainer.style.width || computedStyle.width;
+        // 원본 스타일 저장 (나중에 복원용)
+        youtubeContainer.dataset.originalWidth = youtubeContainer.style.width;
+        youtubeContainer.dataset.originalDisplay = youtubeContainer.style.display;
+        // 리사이즈 핸들 추가 (8개 포인트)
+        const handles = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
+        handles.forEach(handle => {
+            const handleDiv = document.createElement('div');
+            handleDiv.className = `resize-handle resize-handle-${handle}`;
+            handleDiv.dataset.handle = handle;
+            handleDiv.style.position = 'absolute';
+            handleDiv.style.width = '8px';
+            handleDiv.style.height = '8px';
+            handleDiv.style.backgroundColor = '#0084ff';
+            handleDiv.style.border = '1px solid white';
+            handleDiv.style.borderRadius = '2px';
+            handleDiv.style.cursor = `${handle}-resize`;
+            // 핸들 위치 설정
+            switch (handle) {
+                case 'nw':
+                    handleDiv.style.top = '-5px';
+                    handleDiv.style.left = '-5px';
+                    break;
+                case 'n':
+                    handleDiv.style.top = '-5px';
+                    handleDiv.style.left = '50%';
+                    handleDiv.style.transform = 'translateX(-50%)';
+                    break;
+                case 'ne':
+                    handleDiv.style.top = '-5px';
+                    handleDiv.style.right = '-5px';
+                    break;
+                case 'e':
+                    handleDiv.style.top = '50%';
+                    handleDiv.style.right = '-5px';
+                    handleDiv.style.transform = 'translateY(-50%)';
+                    break;
+                case 'se':
+                    handleDiv.style.bottom = '-5px';
+                    handleDiv.style.right = '-5px';
+                    break;
+                case 's':
+                    handleDiv.style.bottom = '-5px';
+                    handleDiv.style.left = '50%';
+                    handleDiv.style.transform = 'translateX(-50%)';
+                    break;
+                case 'sw':
+                    handleDiv.style.bottom = '-5px';
+                    handleDiv.style.left = '-5px';
+                    break;
+                case 'w':
+                    handleDiv.style.top = '50%';
+                    handleDiv.style.left = '-5px';
+                    handleDiv.style.transform = 'translateY(-50%)';
+                    break;
+            }
+            // 리사이즈 이벤트 핸들러
+            handleDiv.onmousedown = (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                startYoutubeResize(e, youtubeContainer, handle);
+            };
+            wrapper.appendChild(handleDiv);
+        });
+        // 유튜브를 wrapper로 감싸기
+        const parent = youtubeContainer.parentNode;
+        parent?.insertBefore(wrapper, youtubeContainer);
+        wrapper.appendChild(youtubeContainer);
+        // 편집 팝업 데이터 설정
+        // 컨테이너 크기 확인
+        if (youtubeContainer.style.width) {
+            if (youtubeContainer.style.width === '560px') {
+                setEditYoutubeWidth('original');
+            }
+            else if (youtubeContainer.style.width.includes('%')) {
+                setEditYoutubeWidth(youtubeContainer.style.width);
+            }
+            else {
+                // px 값을 %로 변환
+                const parentWidth = editorRef.current?.offsetWidth || window.innerWidth;
+                const containerWidth = parseInt(youtubeContainer.style.width);
+                const percentage = Math.round((containerWidth / parentWidth) * 100);
+                if (percentage >= 95) {
+                    setEditYoutubeWidth('100%');
+                }
+                else if (percentage >= 70 && percentage <= 80) {
+                    setEditYoutubeWidth('75%');
+                }
+                else if (percentage >= 45 && percentage <= 55) {
+                    setEditYoutubeWidth('50%');
+                }
+                else {
+                    setEditYoutubeWidth(`${percentage}%`);
+                }
+            }
+        }
+        else {
+            setEditYoutubeWidth('100%');
+        }
+        // 정렬 확인
+        let alignContainer = youtubeContainer.parentElement;
+        let currentAlign = 'center';
+        while (alignContainer && alignContainer !== editorRef.current) {
+            if (alignContainer.tagName === 'DIV' && alignContainer.style.textAlign) {
+                currentAlign = alignContainer.style.textAlign;
+                break;
+            }
+            alignContainer = alignContainer.parentElement;
+        }
+        setEditYoutubeAlign(currentAlign);
+        // 약간의 지연 후 편집창 열기
+        setTimeout(() => {
+            setIsYoutubeEditPopupOpen(true);
+        }, 50);
+    };
+    // YouTube 선택 해제
+    const deselectYoutube = () => {
+        if (!selectedYoutube)
+            return;
+        // 원본 스타일 복원
+        if (selectedYoutube.dataset.originalWidth !== undefined) {
+            selectedYoutube.style.width = selectedYoutube.dataset.originalWidth;
+            delete selectedYoutube.dataset.originalWidth;
+        }
+        if (selectedYoutube.dataset.originalDisplay !== undefined) {
+            selectedYoutube.style.display = selectedYoutube.dataset.originalDisplay;
+            delete selectedYoutube.dataset.originalDisplay;
+        }
+        // wrapper 제거
+        const wrapper = selectedYoutube.parentElement;
+        if (wrapper && wrapper.classList.contains('youtube-wrapper')) {
+            const parent = wrapper.parentNode;
+            if (parent) {
+                try {
+                    parent.insertBefore(selectedYoutube, wrapper);
+                    wrapper.remove();
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                }
+                catch (e) {
+                    // 이미 제거된 경우 무시
+                }
+            }
+        }
+        // 상태 초기화
+        setSelectedYoutube(null);
+        setIsYoutubeEditPopupOpen(false);
+    };
+    // YouTube 리사이즈 시작
+    const startYoutubeResize = (e, container, handle) => {
+        // 컨테이너의 실제 크기를 가져옴 (getBoundingClientRect로 실제 픽셀 크기 가져오기)
+        const rect = container.getBoundingClientRect();
+        const currentWidth = rect.width;
+        const currentHeight = rect.height || (currentWidth / (16 / 9)); // height가 없으면 16:9 비율로 계산
+        setIsResizing(true);
+        setResizeStartData({
+            startX: e.clientX,
+            startY: e.clientY,
+            startWidth: currentWidth,
+            startHeight: currentHeight,
+            handle
+        });
+    };
+    // YouTube 편집 적용
+    const applyYoutubeEdit = () => {
+        if (!selectedYoutube)
+            return;
+        // 크기 적용
+        if (editYoutubeWidth === '100%' || editYoutubeWidth === '75%' || editYoutubeWidth === '50%') {
+            // 퍼센트 값은 그대로 유지
+            selectedYoutube.style.width = editYoutubeWidth;
+            selectedYoutube.style.aspectRatio = '16 / 9';
+            selectedYoutube.style.height = 'auto';
+        }
+        else if (editYoutubeWidth === 'original') {
+            // original은 고정 크기
+            selectedYoutube.style.aspectRatio = '';
+            selectedYoutube.style.width = '560px';
+            selectedYoutube.style.height = '315px';
+        }
+        else {
+            // px 값은 그대로 설정 (리사이즈로 변경된 경우)
+            selectedYoutube.style.aspectRatio = '';
+            selectedYoutube.style.width = editYoutubeWidth;
+            // height 계산
+            const width = parseInt(editYoutubeWidth);
+            const height = width / (16 / 9);
+            selectedYoutube.style.height = height + 'px';
+        }
+        // wrapper 크기도 업데이트
+        const wrapper = selectedYoutube.parentElement;
+        if (wrapper && wrapper.classList.contains('youtube-wrapper')) {
+            wrapper.style.width = selectedYoutube.style.width;
+            wrapper.style.aspectRatio = selectedYoutube.style.aspectRatio;
+            if (selectedYoutube.style.height && selectedYoutube.style.height !== 'auto') {
+                wrapper.style.height = selectedYoutube.style.height;
+            }
+            else {
+                wrapper.style.height = 'auto';
+            }
+        }
+        // dataset의 originalWidth도 업데이트 (선택 해제 시 이 크기로 복원)
+        selectedYoutube.dataset.originalWidth = selectedYoutube.style.width;
+        // 정렬 적용
+        // youtube-wrapper의 부모를 찾음
+        const targetElement = selectedYoutube.parentElement?.classList.contains('youtube-wrapper')
+            ? selectedYoutube.parentElement
+            : selectedYoutube;
+        // 정렬 컨테이너 찾기 (최상위 DIV 컨테이너)
+        const alignContainer = targetElement?.parentElement;
+        // 정렬 컨테이너가 있고 DIV이면 정렬 적용
+        if (alignContainer && alignContainer.tagName === 'DIV' && alignContainer !== editorRef.current) {
+            alignContainer.style.textAlign = editYoutubeAlign;
+            // 유튜브 컨테이너 자체도 적절한 display 설정
+            if (editYoutubeAlign === 'center' || editYoutubeAlign === 'right') {
+                selectedYoutube.style.display = 'inline-block';
+            }
+            else {
+                selectedYoutube.style.display = 'inline-block';
+            }
+        }
+        // 선택 해제
+        deselectYoutube();
+        handleInput();
+    };
+    // YouTube 삭제
+    const deleteYoutube = () => {
+        if (!selectedYoutube)
+            return;
+        const youtubeToDelete = selectedYoutube;
+        deselectYoutube();
+        let elementToRemove = youtubeToDelete;
+        let parent = youtubeToDelete.parentElement;
+        while (parent && parent !== editorRef.current) {
+            if (parent.classList.contains('youtube-wrapper') ||
+                parent.classList.contains('youtube-container') ||
+                (parent.tagName === 'DIV' && parent.style.textAlign)) {
+                elementToRemove = parent;
+                parent = parent.parentElement;
+            }
+            else {
+                break;
+            }
+        }
+        if (elementToRemove.parentNode) {
+            elementToRemove.parentNode.removeChild(elementToRemove);
+        }
+        handleInput();
+    };
+    // YouTube 삽입
+    const insertYoutube = () => {
+        if (!youtubeUrl)
+            return;
+        const videoId = extractYoutubeVideoId(youtubeUrl);
+        if (!videoId) {
+            alert('올바른 유튜브 URL을 입력해주세요.\n\n지원 형식:\n• https://www.youtube.com/watch?v=VIDEO_ID\n• https://youtu.be/VIDEO_ID');
+            return;
+        }
+        // YouTube 정렬 컨테이너 생성
+        const alignContainer = document.createElement('div');
+        alignContainer.style.textAlign = youtubeAlign;
+        alignContainer.style.margin = '20px 0';
+        // YouTube iframe 컨테이너 생성
+        const container = document.createElement('div');
+        container.className = 'youtube-container';
+        container.style.position = 'relative';
+        container.style.display = 'inline-block';
+        container.style.maxWidth = '100%';
+        // 크기 설정
+        if (youtubeWidth === 'original') {
+            container.style.width = '560px';
+            container.style.height = '315px';
+        }
+        else if (youtubeWidth === '100%' || youtubeWidth === '75%' || youtubeWidth === '50%') {
+            // 퍼센트는 그대로 유지하고 aspect-ratio 사용
+            container.style.width = youtubeWidth;
+            container.style.aspectRatio = '16 / 9';
+        }
+        else {
+            // 기타 값은 그대로 설정
+            container.style.width = youtubeWidth;
+            container.style.aspectRatio = '16 / 9';
+        }
+        // iframe 생성
+        const iframe = document.createElement('iframe');
+        iframe.width = '100%';
+        iframe.height = '100%';
+        iframe.src = `https://www.youtube.com/embed/${videoId}`;
+        iframe.title = 'YouTube video player';
+        iframe.frameBorder = '0';
+        iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';
+        iframe.allowFullscreen = true;
+        iframe.style.width = '100%';
+        iframe.style.height = 'auto';
+        iframe.style.aspectRatio = '16 / 9';
+        iframe.style.display = 'block';
+        // 투명 오버레이 추가 (편집 모드에서 클릭 방지)
+        const overlay = document.createElement('div');
+        overlay.className = 'youtube-overlay';
+        overlay.style.position = 'absolute';
+        overlay.style.top = '0';
+        overlay.style.left = '0';
+        overlay.style.width = '100%';
+        overlay.style.height = '100%';
+        overlay.style.backgroundColor = 'transparent';
+        overlay.style.cursor = 'pointer';
+        overlay.style.zIndex = '1';
+        container.appendChild(iframe);
+        container.appendChild(overlay);
+        alignContainer.appendChild(container);
+        // 에디터에 포커스 설정
+        if (editorRef.current) {
+            editorRef.current.focus();
+            const selection = window.getSelection();
+            // 저장된 선택 영역이 있으면 복원
+            if (savedYoutubeSelection && selection) {
+                try {
+                    selection.removeAllRanges();
+                    selection.addRange(savedYoutubeSelection);
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                }
+                catch (e) {
+                    // 선택 영역 복원 실패 시 무시
+                }
+            }
+            // 선택 영역 재확인
+            if (!selection || selection.rangeCount === 0 || !editorRef.current.contains(selection.anchorNode)) {
+                // 에디터가 비어있으면 p 태그 추가
+                if (!editorRef.current.innerHTML || editorRef.current.innerHTML === '<br>') {
+                    const p = document.createElement('p');
+                    p.innerHTML = '<br>';
+                    editorRef.current.appendChild(p);
+                }
+                // 커서를 에디터 끝으로 이동
+                const range = document.createRange();
+                range.selectNodeContents(editorRef.current);
+                range.collapse(false);
+                selection?.removeAllRanges();
+                selection?.addRange(range);
+            }
+            // YouTube iframe 삽입
+            if (selection && selection.rangeCount > 0) {
+                const range = selection.getRangeAt(0);
+                range.deleteContents();
+                range.insertNode(alignContainer);
+                // iframe 다음에 새 문단 추가
+                const newP = document.createElement('p');
+                newP.innerHTML = '<br>';
+                alignContainer.after(newP);
+                // 커서를 새 문단으로 이동
+                const newRange = document.createRange();
+                newRange.selectNodeContents(newP);
+                newRange.collapse(true);
+                selection.removeAllRanges();
+                selection.addRange(newRange);
+            }
+            else {
+                // 폴백: 에디터 끝에 추가
+                editorRef.current.appendChild(alignContainer);
+            }
+        }
+        // 상태 초기화
+        setIsYoutubeDropdownOpen(false);
+        setYoutubeUrl('');
+        setYoutubeWidth('100%'); // 초기화
+        setYoutubeAlign('center'); // 초기화
+        setSavedYoutubeSelection(null);
+        editorRef.current?.focus();
+        handleInput();
+    };
+    const handleImageFileSelect = (e) => {
+        const file = e.target.files?.[0];
+        if (file && file.type.startsWith('image/')) {
+            setImageFile(file);
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                const base64String = reader.result;
+                setImagePreview(base64String);
+                // URL 필드 초기화
+                setImageUrl('');
+            };
+            reader.readAsDataURL(file);
+        }
+        else {
+            alert('이미지 파일을 선택해주세요.');
+        }
+        // 같은 파일을 다시 선택할 수 있도록 초기화
+        e.target.value = '';
+    };
+    // 기존 handleFileUpload은 삭제 또는 제거 예정
+    const handleFileUpload = (e) => {
+        const file = e.target.files?.[0];
+        if (file && file.type.startsWith('image/')) {
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                const base64String = reader.result;
+                execCommand('insertImage', base64String);
+            };
+            reader.readAsDataURL(file);
+        }
+        else {
+            alert('이미지 파일을 선택해주세요.');
+        }
+        // 같은 파일을 다시 선택할 수 있도록 초기화
+        e.target.value = '';
+    };
+    const handleKeyDown = (e) => {
+        // Backspace 또는 Delete 키로 선택된 이미지 삭제
+        if ((e.key === 'Backspace' || e.key === 'Delete') && selectedImage) {
+            e.preventDefault();
+            // deleteImage 함수 호출로 통합
+            deleteImage();
+            return;
+        }
+        // Backspace 또는 Delete 키로 선택된 유튜브 삭제
+        if ((e.key === 'Backspace' || e.key === 'Delete') && selectedYoutube) {
+            e.preventDefault();
+            deleteYoutube();
+            return;
+        }
+        // 에디터가 비어있고 처음 입력하는 경우
+        if (editorRef.current && (!editorRef.current.innerHTML || editorRef.current.innerHTML === '<br>')) {
+            // Enter, Backspace, Delete가 아닌 일반 문자 입력인 경우
+            if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+                e.preventDefault();
+                // p 태그 생성 및 텍스트 삽입
+                const p = document.createElement('p');
+                p.textContent = e.key;
+                editorRef.current.innerHTML = '';
+                editorRef.current.appendChild(p);
+                // 커서를 텍스트 끝으로 이동
+                const selection = window.getSelection();
+                const range = document.createRange();
+                range.selectNodeContents(p);
+                range.collapse(false);
+                selection?.removeAllRanges();
+                selection?.addRange(range);
+                handleInput();
+                return;
+            }
+        }
+        if (e.key === 'Enter' && !e.shiftKey) {
+            // Enter만 눌렀을 때: p 태그로 새 문단 생성
+            e.preventDefault();
+            // insertParagraph를 사용하여 새 문단 생성
+            document.execCommand('insertParagraph', false);
+            // 새로 생성된 문단을 p 태그로 변환
+            setTimeout(() => {
+                const selection = window.getSelection();
+                if (selection && selection.rangeCount > 0) {
+                    const range = selection.getRangeAt(0);
+                    let container = range.commonAncestorContainer;
+                    // 텍스트 노드인 경우 부모 요소로
+                    if (container.nodeType === Node.TEXT_NODE) {
+                        container = container.parentElement;
+                    }
+                    // div인 경우 p로 변경
+                    if (container && container.tagName === 'DIV') {
+                        document.execCommand('formatBlock', false, 'p');
+                    }
+                }
+                handleInput();
+            }, 0);
+        }
+        // Shift+Enter는 브라우저 기본 동작 사용 (br 태그 삽입)
+    };
+    // 선택 영역 저장
+    const saveSelection = () => {
+        const selection = window.getSelection();
+        if (selection && selection.rangeCount > 0) {
+            return selection.getRangeAt(0);
+        }
+        return null;
+    };
+    // 선택 영역 복원
+    const restoreSelection = (range) => {
+        if (range) {
+            const selection = window.getSelection();
+            if (selection) {
+                selection.removeAllRanges();
+                selection.addRange(range);
+            }
+        }
+    };
+    const applyColorStyle = (styleProperty, color, savedRange) => {
+        // 저장된 선택 영역이 있으면 복원
+        if (savedRange) {
+            restoreSelection(savedRange);
+        }
+        const selection = window.getSelection();
+        if (!selection || selection.isCollapsed) {
+            return;
+        }
+        const range = selection.getRangeAt(0);
+        // 선택된 텍스트를 span으로 감싸기
+        const span = document.createElement('span');
+        try {
+            const contents = range.extractContents();
+            // 스타일 적용 - setAttribute를 사용하여 !important 포함
+            if (styleProperty === 'color') {
+                span.setAttribute('style', `color: ${color} !important;`);
+            }
+            else if (styleProperty === 'background-color') {
+                span.setAttribute('style', `background-color: ${color} !important;`);
+            }
+            span.appendChild(contents);
+            range.insertNode(span);
+            // 커서 위치 조정
+            range.selectNodeContents(span);
+            range.collapse(false);
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+        catch {
+            // 폴백: execCommand 사용
+            if (styleProperty === 'color') {
+                document.execCommand('foreColor', false, color);
+            }
+            else {
+                document.execCommand('hiliteColor', false, color);
+            }
+        }
+        editorRef.current?.focus();
+        handleInput();
+    };
+    const changeFontColor = (color, savedRange) => {
+        applyColorStyle('color', color, savedRange);
+    };
+    const changeBackgroundColor = (color, savedRange) => {
+        applyColorStyle('background-color', color, savedRange);
+    };
+    // 클라이언트에서만 고유 ID 생성
+    useEffect(() => {
+        setEditorID(`editor-${uuid()}`);
+    }, []);
+    useEffect(() => {
+        if (editorRef.current && value && !editorRef.current.innerHTML) {
+            editorRef.current.innerHTML = value;
+        }
+    }, [value]);
+    // 외부 클릭 시 드롭다운 닫기
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            if (paragraphButtonRef.current && !paragraphButtonRef.current.contains(target)) {
+                setIsParagraphDropdownOpen(false);
+            }
+            if (textColorButtonRef.current && !textColorButtonRef.current.contains(target)) {
+                setIsTextColorOpen(false);
+            }
+            if (bgColorButtonRef.current && !bgColorButtonRef.current.contains(target)) {
+                setIsBgColorOpen(false);
+            }
+            if (alignButtonRef.current && !alignButtonRef.current.contains(target)) {
+                setIsAlignDropdownOpen(false);
+            }
+            if (linkButtonRef.current && !linkButtonRef.current.contains(target)) {
+                setIsLinkDropdownOpen(false);
+                setLinkUrl('');
+                setLinkTarget('_blank');
+                setSavedSelection(null);
+            }
+            // 이미지 드롭다운 체크 - 드롭다운 자체도 체크
+            const imageDropdown = document.querySelector(`.${styles.imageDropdown}`);
+            if (imageButtonRef.current &&
+                !imageButtonRef.current.contains(target) &&
+                (!imageDropdown || !imageDropdown.contains(target))) {
+                setIsImageDropdownOpen(false);
+                setImageTabMode('file'); // 탭 모드 초기화
+                setImageUrl('');
+                setImageFile(null);
+                setImagePreview('');
+                setImageWidth('original'); // 원본으로 초기화
+                setImageAlign('left'); // 좌측으로 초기화
+                setImageAlt('');
+                setSavedImageSelection(null); // 저장된 선택 영역 초기화
+            }
+            // 유튜브 드롭다운 체크
+            const youtubeDropdown = document.querySelector(`.${styles.youtubeDropdown}`);
+            if (youtubeButtonRef.current &&
+                !youtubeButtonRef.current.contains(target) &&
+                (!youtubeDropdown || !youtubeDropdown.contains(target))) {
+                setIsYoutubeDropdownOpen(false);
+                setYoutubeUrl('');
+                setSavedYoutubeSelection(null);
+            }
+            // 이미지 편집 팝업 닫기
+            if (isImageEditPopupOpen && selectedImage) {
+                const imageEditPopup = document.querySelector(`.${styles.imageDropdown}`);
+                // 편집 팝업, 선택된 이미지, image-wrapper 외부를 클릭한 경우
+                if (imageEditPopup &&
+                    !imageEditPopup.contains(target) &&
+                    !selectedImage.contains(target) &&
+                    !selectedImage.parentElement?.contains(target)) {
+                    setIsImageEditPopupOpen(false);
+                }
+            }
+            // 링크 수정 팝업 닫기
+            if (isEditLinkPopupOpen) {
+                const editPopup = document.querySelector(`.${styles.editLinkPopup}`);
+                if (editPopup && !editPopup.contains(target) && !selectedLinkElement?.contains(target)) {
+                    setIsEditLinkPopupOpen(false);
+                    setSelectedLinkElement(null);
+                    setEditLinkUrl('');
+                    setEditLinkTarget('_self');
+                }
+            }
+        };
+        if (isParagraphDropdownOpen || isTextColorOpen || isBgColorOpen || isAlignDropdownOpen || isLinkDropdownOpen || isEditLinkPopupOpen || isImageDropdownOpen || isImageEditPopupOpen || isYoutubeDropdownOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isParagraphDropdownOpen, isTextColorOpen, isBgColorOpen, isAlignDropdownOpen, isLinkDropdownOpen, isEditLinkPopupOpen, isImageDropdownOpen, isImageEditPopupOpen, isYoutubeDropdownOpen, selectedLinkElement, selectedImage]);
+    // 리사이즈 중 마우스 이벤트 처리
+    useEffect(() => {
+        if (!isResizing || !resizeStartData)
+            return;
+        const handleMouseMove = (e) => {
+            if (!resizeStartData)
+                return;
+            const deltaX = e.clientX - resizeStartData.startX;
+            const deltaY = e.clientY - resizeStartData.startY;
+            // 이미지 리사이즈
+            if (selectedImage) {
+                const aspectRatio = resizeStartData.startWidth / resizeStartData.startHeight;
+                let newWidth = resizeStartData.startWidth;
+                let newHeight = resizeStartData.startHeight;
+                switch (resizeStartData.handle) {
+                    case 'e':
+                    case 'w':
+                        newWidth = resizeStartData.startWidth + (resizeStartData.handle === 'e' ? deltaX : -deltaX);
+                        newHeight = newWidth / aspectRatio;
+                        break;
+                    case 'n':
+                    case 's':
+                        newHeight = resizeStartData.startHeight + (resizeStartData.handle === 's' ? deltaY : -deltaY);
+                        newWidth = newHeight * aspectRatio;
+                        break;
+                    case 'ne':
+                    case 'nw':
+                    case 'se':
+                    case 'sw': {
+                        // 대각선 리사이즈는 더 큰 변화량 기준
+                        const diagonalDelta = Math.abs(deltaX) > Math.abs(deltaY) ? deltaX : deltaY;
+                        const multiplier = resizeStartData.handle.includes('e') ? 1 : -1;
+                        newWidth = resizeStartData.startWidth + (diagonalDelta * multiplier);
+                        newHeight = newWidth / aspectRatio;
+                        break;
+                    }
+                }
+                // 최소 크기 제한
+                newWidth = Math.max(50, newWidth);
+                newHeight = Math.max(50, newHeight);
+                selectedImage.style.width = newWidth + 'px';
+                selectedImage.style.height = newHeight + 'px';
+            }
+            // 유튜브 리사이즈
+            if (selectedYoutube) {
+                const aspectRatio = 16 / 9; // 유튜브는 16:9 고정
+                let newWidth = resizeStartData.startWidth;
+                let newHeight = resizeStartData.startHeight;
+                switch (resizeStartData.handle) {
+                    case 'e':
+                    case 'w':
+                        newWidth = resizeStartData.startWidth + (resizeStartData.handle === 'e' ? deltaX : -deltaX);
+                        newHeight = newWidth / aspectRatio;
+                        break;
+                    case 'n':
+                    case 's':
+                        newHeight = resizeStartData.startHeight + (resizeStartData.handle === 's' ? deltaY : -deltaY);
+                        newWidth = newHeight * aspectRatio;
+                        break;
+                    case 'ne':
+                    case 'nw':
+                    case 'se':
+                    case 'sw': {
+                        // 대각선 리사이즈는 더 큰 변화량 기준
+                        const diagonalDelta = Math.abs(deltaX) > Math.abs(deltaY) ? deltaX : deltaY;
+                        const multiplier = resizeStartData.handle.includes('e') ? 1 : -1;
+                        newWidth = resizeStartData.startWidth + (diagonalDelta * multiplier);
+                        newHeight = newWidth / aspectRatio;
+                        break;
+                    }
+                }
+                // 최소/최대 크기 제한
+                const parentWidth = editorRef.current?.offsetWidth || window.innerWidth;
+                newWidth = Math.max(200, Math.min(newWidth, parentWidth - 40));
+                newHeight = newWidth / aspectRatio;
+                // 유튜브 컨테이너 크기 업데이트
+                // aspectRatio를 제거하고 명시적인 크기 설정
+                selectedYoutube.style.aspectRatio = '';
+                selectedYoutube.style.width = newWidth + 'px';
+                selectedYoutube.style.height = newHeight + 'px';
+                // wrapper 크기도 업데이트
+                const wrapper = selectedYoutube.parentElement;
+                if (wrapper && wrapper.classList.contains('youtube-wrapper')) {
+                    wrapper.style.width = newWidth + 'px';
+                    wrapper.style.height = newHeight + 'px';
+                }
+                // 편집 중인 크기 업데이트
+                const percentage = Math.round((newWidth / parentWidth) * 100);
+                if (percentage >= 95) {
+                    setEditYoutubeWidth('100%');
+                }
+                else if (percentage >= 70 && percentage <= 80) {
+                    setEditYoutubeWidth('75%');
+                }
+                else if (percentage >= 45 && percentage <= 55) {
+                    setEditYoutubeWidth('50%');
+                }
+                else {
+                    setEditYoutubeWidth(`${percentage}%`);
+                }
+            }
+        };
+        const handleMouseUp = () => {
+            setIsResizing(false);
+            setResizeStartData(null);
+            if (selectedImage) {
+                setEditImageWidth(selectedImage.style.width);
+            }
+            if (selectedYoutube) {
+                // 유튜브 크기는 이미 px로 설정되어 있으므로,
+                // 편집창의 width 값만 업데이트 (실제 DOM은 변경하지 않음)
+                const currentWidth = selectedYoutube.style.width;
+                setEditYoutubeWidth(currentWidth);
+                // 변경된 크기를 새로운 원본으로 설정 (선택 해제 시 이 크기로 복원됨)
+                selectedYoutube.dataset.originalWidth = currentWidth;
+            }
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isResizing, resizeStartData, selectedImage, selectedYoutube]);
+    // 스크롤, 리사이즈 및 이미지/유튜브 드래그 시 편집창 숨기기
+    useEffect(() => {
+        if (!selectedImage && !selectedYoutube)
+            return;
+        // 스크롤 이벤트 핸들러
+        const handleScroll = () => {
+            if (isImageEditPopupOpen) {
+                setIsImageEditPopupOpen(false);
+            }
+            if (isYoutubeEditPopupOpen) {
+                setIsYoutubeEditPopupOpen(false);
+            }
+        };
+        // 리사이즈 이벤트 핸들러
+        const handleResize = () => {
+            if (isImageEditPopupOpen) {
+                setIsImageEditPopupOpen(false);
+            }
+            if (isYoutubeEditPopupOpen) {
+                setIsYoutubeEditPopupOpen(false);
+            }
+        };
+        // 드래그 시작 이벤트 핸들러
+        const handleDragStart = (e) => {
+            if (e.target === selectedImage && selectedImage) {
+                setIsImageEditPopupOpen(false);
+                // 드래그 효과를 'move'로 설정하여 복제가 아닌 이동으로 동작하도록 함
+                e.dataTransfer.effectAllowed = 'move';
+                e.dataTransfer.dropEffect = 'move';
+                // wrapper를 숨겨서 드래그 중 핸들이 보이지 않도록 함 (DOM 조작은 dragend에서 수행)
+                const wrapper = selectedImage.parentElement;
+                if (wrapper && wrapper.classList.contains('image-wrapper')) {
+                    wrapper.style.border = 'none';
+                    const handles = wrapper.querySelectorAll('.resize-handle');
+                    handles.forEach((handle) => {
+                        handle.style.display = 'none';
+                    });
+                }
+            }
+            if (e.target === selectedYoutube && selectedYoutube) {
+                setIsYoutubeEditPopupOpen(false);
+                // 드래그 효과를 'move'로 설정하여 복제가 아닌 이동으로 동작하도록 함
+                e.dataTransfer.effectAllowed = 'move';
+                e.dataTransfer.dropEffect = 'move';
+                // wrapper를 숨겨서 드래그 중 핸들이 보이지 않도록 함 (DOM 조작은 dragend에서 수행)
+                const wrapper = selectedYoutube.parentElement;
+                if (wrapper && wrapper.classList.contains('youtube-wrapper')) {
+                    wrapper.style.border = 'none';
+                    const handles = wrapper.querySelectorAll('.resize-handle');
+                    handles.forEach((handle) => {
+                        handle.style.display = 'none';
+                    });
+                }
+            }
+        };
+        // 드래그 종료 이벤트 핸들러 - 이미지/유튜브 이동 후 선택 해제
+        const handleDragEnd = () => {
+            // 드래그 완료 후 wrapper를 제거하여 선택 해제
+            if (selectedImage) {
+                deselectImage();
+            }
+            if (selectedYoutube) {
+                deselectYoutube();
+            }
+        };
+        // 이벤트 리스너 등록
+        window.addEventListener('scroll', handleScroll, true);
+        window.addEventListener('resize', handleResize);
+        editorRef.current?.addEventListener('scroll', handleScroll);
+        containerRef.current?.addEventListener('resize', handleResize);
+        if (selectedImage) {
+            selectedImage.addEventListener('dragstart', handleDragStart);
+            selectedImage.addEventListener('dragend', handleDragEnd);
+            // 이미지에 draggable 속성 추가
+            selectedImage.draggable = true;
+        }
+        if (selectedYoutube) {
+            selectedYoutube.addEventListener('dragstart', handleDragStart);
+            selectedYoutube.addEventListener('dragend', handleDragEnd);
+            // 유튜브에 draggable 속성 추가
+            selectedYoutube.draggable = true;
+        }
+        return () => {
+            window.removeEventListener('scroll', handleScroll, true);
+            window.removeEventListener('resize', handleResize);
+            editorRef.current?.removeEventListener('scroll', handleScroll);
+            containerRef.current?.removeEventListener('resize', handleResize);
+            if (selectedImage) {
+                selectedImage.removeEventListener('dragstart', handleDragStart);
+                selectedImage.removeEventListener('dragend', handleDragEnd);
+                selectedImage.draggable = false;
+            }
+            if (selectedYoutube) {
+                selectedYoutube.removeEventListener('dragstart', handleDragStart);
+                selectedYoutube.removeEventListener('dragend', handleDragEnd);
+                selectedYoutube.draggable = false;
+            }
+        };
+    }, [selectedImage, selectedYoutube, isImageEditPopupOpen, isYoutubeEditPopupOpen]);
+    // DOM Mutation Observer - 선택된 이미지가 DOM에서 제거되는 것을 감지
+    useEffect(() => {
+        if (!selectedImage || !editorRef.current)
+            return;
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                // 제거된 노드들 확인
+                mutation.removedNodes.forEach((node) => {
+                    // 제거된 노드가 선택된 이미지이거나 그것을 포함하는 경우
+                    if (node === selectedImage ||
+                        (node.nodeType === Node.ELEMENT_NODE &&
+                            node.contains(selectedImage))) {
+                        // 선택 상태 해제
+                        deselectImage();
+                    }
+                });
+            });
+        });
+        // 에디터 관찰 시작
+        observer.observe(editorRef.current, {
+            childList: true,
+            subtree: true
+        });
+        return () => {
+            observer.disconnect();
+        };
+    }, [selectedImage]);
+    // DOM Mutation Observer - 선택된 유튜브가 DOM에서 제거되는 것을 감지
+    useEffect(() => {
+        if (!selectedYoutube || !editorRef.current)
+            return;
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                // 제거된 노드들 확인
+                mutation.removedNodes.forEach((node) => {
+                    // 제거된 노드가 선택된 유튜브이거나 그것을 포함하는 경우
+                    if (node === selectedYoutube ||
+                        (node.nodeType === Node.ELEMENT_NODE &&
+                            node.contains(selectedYoutube))) {
+                        // 선택 상태 해제
+                        deselectYoutube();
+                    }
+                });
+            });
+        });
+        // 에디터 관찰 시작
+        observer.observe(editorRef.current, {
+            childList: true,
+            subtree: true
+        });
+        return () => {
+            observer.disconnect();
+        };
+    }, [selectedYoutube]);
+    // 외부에서 value가 변경되면 히스토리 초기화 (단, undo/redo 중에는 제외)
+    useEffect(() => {
+        if (isUndoRedoRef.current) {
+            return;
+        }
+        if (editorRef.current && editorRef.current.innerHTML !== value) {
+            editorRef.current.innerHTML = value;
+            setHistory([value]);
+            setHistoryIndex(0);
+        }
+    }, [value]);
+    // 초기 로드 시 문단 형식 감지 (기본 p 태그는 추가하지 않음)
+    useEffect(() => {
+        // 약간의 지연을 주어 DOM이 완전히 렌더링된 후 감지
+        const timer = setTimeout(() => {
+            if (editorRef.current && editorRef.current.innerHTML) {
+                // 내용이 있을 때만 문단 형식 감지
+                detectCurrentParagraphStyle();
+                detectCurrentAlign();
+            }
+        }, 100);
+        return () => clearTimeout(timer);
+    }, []);
+    return (_jsxs("div", { className: `${styles.editor} ${statusClass}`, style: { width, position: 'relative' }, children: [_jsxs("div", { className: styles.toolbar, children: [_jsxs("div", { className: styles.toolbarGroup, children: [_jsx("button", { type: "button", className: styles.toolbarButton, onClick: () => execCommand('undo'), disabled: historyIndex <= 0, title: "\uC2E4\uD589 \uCDE8\uC18C", style: {
+                                    opacity: historyIndex <= 0 ? 0.65 : 1,
+                                    backgroundColor: 'transparent',
+                                    border: 'none',
+                                    cursor: historyIndex <= 0 ? 'not-allowed' : 'pointer'
+                                }, children: _jsx("i", { className: styles.undo }) }), _jsx("button", { type: "button", className: styles.toolbarButton, onClick: () => execCommand('redo'), disabled: historyIndex >= history.length - 1, title: "\uB2E4\uC2DC \uC2E4\uD589", style: {
+                                    opacity: historyIndex >= history.length - 1 ? 0.65 : 1,
+                                    backgroundColor: 'transparent',
+                                    border: 'none',
+                                    cursor: historyIndex >= history.length - 1 ? 'not-allowed' : 'pointer'
+                                }, children: _jsx("i", { className: styles.redo }) })] }), _jsxs("div", { className: styles.toolbarGroup, ref: paragraphButtonRef, children: [_jsxs("button", { type: "button", className: styles.paragraphButton, onClick: () => {
+                                    setIsParagraphDropdownOpen(!isParagraphDropdownOpen);
+                                    setIsTextColorOpen(false);
+                                    setIsBgColorOpen(false);
+                                    setIsAlignDropdownOpen(false);
+                                }, title: "\uBB38\uB2E8 \uD615\uC2DD", children: [_jsx("span", { children: getCurrentStyleLabel() }), _jsx("i", { className: styles.dropdownArrow })] }), isParagraphDropdownOpen && (_jsx("div", { className: styles.paragraphDropdown, style: {
+                                    top: paragraphButtonRef.current?.getBoundingClientRect().bottom ?? 0,
+                                    left: paragraphButtonRef.current?.getBoundingClientRect().left ?? 0
+                                }, children: paragraphOptions.map((option) => (_jsx("button", { type: "button", className: `${styles.paragraphOption} ${currentParagraphStyle === option.value ? styles.active : ''}`, onClick: () => applyParagraphStyle(option.value), children: option.value === 'h1' ? (_jsx("h1", { children: option.label })) : option.value === 'h2' ? (_jsx("h2", { children: option.label })) : option.value === 'h3' ? (_jsx("h3", { children: option.label })) : (_jsx("span", { className: option.className || '', children: option.label })) }, option.value))) }))] }), _jsxs("div", { className: styles.toolbarGroup, children: [_jsx("button", { type: "button", className: styles.toolbarButton, onClick: () => execCommand('bold'), title: "\uAD75\uAC8C", children: _jsx("i", { className: styles.bold }) }), _jsx("button", { type: "button", className: styles.toolbarButton, onClick: () => execCommand('italic'), title: "\uAE30\uC6B8\uC784", children: _jsx("i", { className: styles.italic }) }), _jsx("button", { type: "button", className: styles.toolbarButton, onClick: () => execCommand('underline'), title: "\uBC11\uC904", children: _jsx("i", { className: styles.underline }) }), _jsx("button", { type: "button", className: styles.toolbarButton, onClick: () => execCommand('strikeThrough'), title: "\uCDE8\uC18C\uC120", children: _jsx("i", { className: styles.strikethrough }) })] }), _jsxs("div", { className: styles.toolbarGroup, children: [_jsxs("div", { ref: textColorButtonRef, style: { position: 'relative' }, children: [_jsx("button", { type: "button", className: styles.toolbarButton, onClick: () => {
+                                            const selection = window.getSelection();
+                                            if (selection && !selection.isCollapsed) {
+                                                // 선택 영역 저장
+                                                const range = saveSelection();
+                                                setSavedSelection(range);
+                                                setIsTextColorOpen(!isTextColorOpen);
+                                                setIsBgColorOpen(false);
+                                            }
+                                        }, title: "\uAE00\uAF34 \uC0C9\uC0C1", children: _jsx("i", { className: styles.fontColor }) }), isTextColorOpen && (_jsx("div", { className: styles.colorPalette, style: {
+                                            top: textColorButtonRef.current?.getBoundingClientRect().bottom ?? 0,
+                                            left: textColorButtonRef.current?.getBoundingClientRect().left ?? 0
+                                        }, children: colorPalette.map((row, rowIndex) => (_jsx("div", { className: styles.colorRow, children: row.map((color) => (_jsx("button", { type: "button", className: styles.colorButton, style: { backgroundColor: color }, onMouseDown: (e) => e.preventDefault(), onClick: () => {
+                                                    changeFontColor(color, savedSelection);
+                                                    setIsTextColorOpen(false);
+                                                    setSavedSelection(null);
+                                                } }, color))) }, rowIndex))) }))] }), _jsxs("div", { ref: bgColorButtonRef, style: { position: 'relative' }, children: [_jsx("button", { type: "button", className: styles.toolbarButton, onClick: () => {
+                                            const selection = window.getSelection();
+                                            if (selection && !selection.isCollapsed) {
+                                                // 선택 영역 저장
+                                                const range = saveSelection();
+                                                setSavedSelection(range);
+                                                setIsBgColorOpen(!isBgColorOpen);
+                                                setIsTextColorOpen(false);
+                                            }
+                                        }, title: "\uBC30\uACBD \uC0C9\uC0C1", children: _jsx("i", { className: styles.highlight }) }), isBgColorOpen && (_jsx("div", { className: styles.colorPalette, style: {
+                                            top: bgColorButtonRef.current?.getBoundingClientRect().bottom ?? 0,
+                                            left: bgColorButtonRef.current?.getBoundingClientRect().left ?? 0
+                                        }, children: colorPalette.map((row, rowIndex) => (_jsx("div", { className: styles.colorRow, children: row.map((color) => (_jsx("button", { type: "button", className: styles.colorButton, style: { backgroundColor: color }, onMouseDown: (e) => e.preventDefault(), onClick: () => {
+                                                    changeBackgroundColor(color, savedSelection);
+                                                    setIsBgColorOpen(false);
+                                                    setSavedSelection(null);
+                                                } }, color))) }, rowIndex))) }))] })] }), _jsxs("div", { className: styles.toolbarGroup, children: [_jsxs("div", { ref: alignButtonRef, style: { position: 'relative' }, children: [_jsx("button", { type: "button", className: styles.toolbarButton, onClick: () => {
+                                            setIsAlignDropdownOpen(!isAlignDropdownOpen);
+                                            setIsParagraphDropdownOpen(false);
+                                            setIsTextColorOpen(false);
+                                            setIsBgColorOpen(false);
+                                        }, title: getCurrentAlignLabel(), children: _jsx("i", { className: getCurrentAlignIcon() }) }), isAlignDropdownOpen && (_jsx("div", { className: styles.alignDropdown, style: {
+                                            top: alignButtonRef.current?.getBoundingClientRect().bottom ?? 0,
+                                            left: alignButtonRef.current?.getBoundingClientRect().left ?? 0
+                                        }, children: alignOptions.map((option) => (_jsx("button", { type: "button", className: `${styles.alignOption} ${currentAlign === option.value ? styles.active : ''}`, onClick: () => {
+                                                if (option.value === 'left') {
+                                                    execCommand('justifyLeft');
+                                                }
+                                                else if (option.value === 'center') {
+                                                    execCommand('justifyCenter');
+                                                }
+                                                else if (option.value === 'right') {
+                                                    execCommand('justifyRight');
+                                                }
+                                                setCurrentAlign(option.value);
+                                                setIsAlignDropdownOpen(false);
+                                            }, title: option.label, children: _jsx("i", { className: styles[option.icon] }) }, option.value))) }))] }), _jsx("button", { type: "button", className: styles.toolbarButton, onClick: () => execCommand('insertUnorderedList'), title: "\uBAA9\uB85D", children: _jsx("i", { className: styles.listUl }) }), _jsx("button", { type: "button", className: styles.toolbarButton, onClick: () => execCommand('insertOrderedList'), title: "\uBC88\uD638 \uBAA9\uB85D", children: _jsx("i", { className: styles.listOl }) })] }), _jsxs("div", { className: styles.toolbarGroup, children: [_jsxs("div", { ref: linkButtonRef, style: { position: 'relative' }, children: [_jsx("button", { type: "button", className: styles.toolbarButton, onClick: openLinkDropdown, title: "\uB9C1\uD06C", children: _jsx("i", { className: styles.link }) }), isLinkDropdownOpen && (_jsxs("div", { className: styles.linkDropdown, style: {
+                                            top: linkButtonRef.current?.getBoundingClientRect().bottom ?? 0,
+                                            left: linkButtonRef.current?.getBoundingClientRect().left ?? 0
+                                        }, children: [_jsxs("div", { className: styles.linkInput, children: [_jsx("label", { children: "URL" }), _jsx("input", { type: "text", value: linkUrl, onChange: (e) => setLinkUrl(e.target.value), placeholder: "https://...", autoFocus: true })] }), _jsxs("div", { className: styles.linkTarget, children: [_jsxs("label", { children: [_jsx("input", { type: "radio", value: "_blank", checked: linkTarget === '_blank', onChange: (e) => setLinkTarget(e.target.value) }), "\uC0C8 \uCC3D\uC5D0\uC11C \uC5F4\uAE30"] }), _jsxs("label", { children: [_jsx("input", { type: "radio", value: "_self", checked: linkTarget === '_self', onChange: (e) => setLinkTarget(e.target.value) }), "\uD604\uC7AC \uCC3D\uC5D0\uC11C \uC5F4\uAE30"] })] }), _jsxs("div", { className: styles.linkActions, children: [_jsx("button", { type: "button", onClick: () => {
+                                                            setIsLinkDropdownOpen(false);
+                                                            setLinkUrl('');
+                                                            setLinkTarget('_blank');
+                                                            setSavedSelection(null);
+                                                        }, className: styles.default, children: "\uCDE8\uC18C" }), _jsx("button", { type: "button", onClick: applyLink, disabled: !linkUrl, className: styles.primary, children: "\uC0BD\uC785" })] })] }))] }), _jsxs("div", { ref: imageButtonRef, style: { position: 'relative' }, children: [_jsx("button", { type: "button", className: styles.toolbarButton, onClick: openImageDropdown, title: "\uC774\uBBF8\uC9C0", children: _jsx("i", { className: styles.image }) }), isImageDropdownOpen && (_jsxs("div", { className: styles.imageDropdown, style: {
+                                            top: imageButtonRef.current?.getBoundingClientRect().bottom ?? 0,
+                                            left: imageButtonRef.current?.getBoundingClientRect().left ?? 0
+                                        }, children: [_jsxs("div", { className: styles.imageTabSection, children: [_jsxs("div", { className: styles.imageTabButtons, children: [_jsx("button", { type: "button", className: imageTabMode === 'file' ? styles.active : '', onClick: () => {
+                                                                    setImageTabMode('file');
+                                                                    setImageUrl(''); // URL 초기화
+                                                                }, children: "\uD30C\uC77C \uC5C5\uB85C\uB4DC" }), _jsx("button", { type: "button", className: imageTabMode === 'url' ? styles.active : '', onClick: () => {
+                                                                    setImageTabMode('url');
+                                                                    setImageFile(null); // 파일 초기화
+                                                                    setImagePreview(''); // 프리뷰 초기화
+                                                                }, children: "URL \uC785\uB825" })] }), imageTabMode === 'file' && (_jsxs("div", { className: styles.imageFileSection, children: [_jsx("input", { ref: imageFileInputRef, type: "file", accept: "image/*", onChange: handleImageFileSelect, style: { display: 'none' } }), _jsx("button", { type: "button", onClick: () => imageFileInputRef.current?.click(), className: styles.fileSelectButton, children: imageFile ? imageFile.name : '파일 선택' }), imagePreview && (_jsx("div", { className: styles.imagePreviewBox, children: _jsx("img", { src: imagePreview, alt: "Preview" }) }))] })), imageTabMode === 'url' && (_jsx("div", { className: styles.imageUrlSection, children: _jsx("input", { type: "text", value: imageUrl, onChange: (e) => {
+                                                                setImageUrl(e.target.value);
+                                                            }, placeholder: "https://..." }) }))] }), _jsxs("div", { className: styles.imageOptions, children: [_jsxs("div", { className: styles.imageOptionRow, children: [_jsx("label", { children: "\uD06C\uAE30" }), _jsxs("div", { className: styles.imageSizeButtons, children: [_jsx("button", { type: "button", className: imageWidth === '100%' ? styles.active : '', onClick: () => setImageWidth('100%'), children: "100%" }), _jsx("button", { type: "button", className: imageWidth === '75%' ? styles.active : '', onClick: () => setImageWidth('75%'), children: "75%" }), _jsx("button", { type: "button", className: imageWidth === '50%' ? styles.active : '', onClick: () => setImageWidth('50%'), children: "50%" }), _jsx("button", { type: "button", className: imageWidth === 'original' ? styles.active : '', onClick: () => setImageWidth('original'), children: "\uC6D0\uBCF8" })] })] }), _jsxs("div", { className: styles.imageOptionRow, children: [_jsx("label", { children: "\uC815\uB82C" }), _jsxs("div", { className: styles.imageAlignButtons, children: [_jsx("button", { type: "button", className: imageAlign === 'left' ? styles.active : '', onClick: () => setImageAlign('left'), title: "\uC67C\uCABD \uC815\uB82C", children: _jsx("i", { className: styles.alignLeft }) }), _jsx("button", { type: "button", className: imageAlign === 'center' ? styles.active : '', onClick: () => setImageAlign('center'), title: "\uAC00\uC6B4\uB370 \uC815\uB82C", children: _jsx("i", { className: styles.alignCenter }) }), _jsx("button", { type: "button", className: imageAlign === 'right' ? styles.active : '', onClick: () => setImageAlign('right'), title: "\uC624\uB978\uCABD \uC815\uB82C", children: _jsx("i", { className: styles.alignRight }) })] })] }), _jsxs("div", { className: styles.imageOptionRow, children: [_jsx("label", { children: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8" }), _jsx("input", { type: "text", value: imageAlt, onChange: (e) => setImageAlt(e.target.value), placeholder: "\uC774\uBBF8\uC9C0 \uC124\uBA85..." })] })] }), _jsxs("div", { className: styles.imageActions, children: [_jsx("button", { type: "button", onClick: () => {
+                                                            setIsImageDropdownOpen(false);
+                                                            setImageTabMode('file'); // 탭 모드 초기화
+                                                            setImageUrl('');
+                                                            setImageFile(null);
+                                                            setImagePreview('');
+                                                            setImageWidth('original'); // 원본으로 초기화
+                                                            setImageAlign('left'); // 좌측으로 초기화
+                                                            setImageAlt('');
+                                                            setSavedImageSelection(null); // 저장된 선택 영역 초기화
+                                                        }, className: styles.default, children: "\uCDE8\uC18C" }), _jsx("button", { type: "button", onClick: insertImage, disabled: !imageUrl && !imageFile, className: styles.primary, children: "\uC0BD\uC785" })] })] }))] }), _jsxs("div", { ref: youtubeButtonRef, style: { position: 'relative' }, children: [_jsx("button", { type: "button", className: styles.toolbarButton, onClick: (e) => {
+                                            e.stopPropagation();
+                                            // 현재 선택 영역 저장
+                                            const selection = window.getSelection();
+                                            if (selection && selection.rangeCount > 0) {
+                                                const range = selection.getRangeAt(0).cloneRange();
+                                                setSavedYoutubeSelection(range);
+                                            }
+                                            else {
+                                                setSavedYoutubeSelection(null);
+                                            }
+                                            setIsYoutubeDropdownOpen(true);
+                                            setIsImageDropdownOpen(false);
+                                            setIsParagraphDropdownOpen(false);
+                                            setIsTextColorOpen(false);
+                                            setIsBgColorOpen(false);
+                                            setIsAlignDropdownOpen(false);
+                                            setIsLinkDropdownOpen(false);
+                                        }, title: "\uC720\uD29C\uBE0C", children: _jsx("i", { className: styles.youtube }) }), isYoutubeDropdownOpen && (_jsxs("div", { className: styles.imageDropdown, style: {
+                                            top: youtubeButtonRef.current?.getBoundingClientRect().bottom ?? 0,
+                                            left: youtubeButtonRef.current?.getBoundingClientRect().left ?? 0
+                                        }, children: [_jsxs("div", { className: styles.imageTabSection, children: [_jsx("div", { className: styles.imageTabButtons, children: _jsx("button", { type: "button", className: styles.active, style: { width: '100%' }, children: "\uC720\uD29C\uBE0C URL" }) }), _jsx("div", { className: styles.imageUrlSection, children: _jsx("input", { type: "text", value: youtubeUrl, onChange: (e) => setYoutubeUrl(e.target.value), placeholder: "https://www.youtube.com/watch?v=... \uB610\uB294 https://youtu.be/...", autoFocus: true }) })] }), _jsxs("div", { className: styles.imageOptions, children: [_jsxs("div", { className: styles.imageOptionRow, children: [_jsx("label", { children: "\uD06C\uAE30" }), _jsxs("div", { className: styles.imageSizeButtons, children: [_jsx("button", { type: "button", className: youtubeWidth === '100%' ? styles.active : '', onClick: () => setYoutubeWidth('100%'), children: "100%" }), _jsx("button", { type: "button", className: youtubeWidth === '75%' ? styles.active : '', onClick: () => setYoutubeWidth('75%'), children: "75%" }), _jsx("button", { type: "button", className: youtubeWidth === '50%' ? styles.active : '', onClick: () => setYoutubeWidth('50%'), children: "50%" }), _jsx("button", { type: "button", className: youtubeWidth === 'original' ? styles.active : '', onClick: () => setYoutubeWidth('original'), children: "\uC6D0\uBCF8" })] })] }), _jsxs("div", { className: styles.imageOptionRow, children: [_jsx("label", { children: "\uC815\uB82C" }), _jsxs("div", { className: styles.imageAlignButtons, children: [_jsx("button", { type: "button", className: youtubeAlign === 'left' ? styles.active : '', onClick: () => setYoutubeAlign('left'), title: "\uC67C\uCABD \uC815\uB82C", children: _jsx("i", { className: styles.alignLeft }) }), _jsx("button", { type: "button", className: youtubeAlign === 'center' ? styles.active : '', onClick: () => setYoutubeAlign('center'), title: "\uAC00\uC6B4\uB370 \uC815\uB82C", children: _jsx("i", { className: styles.alignCenter }) }), _jsx("button", { type: "button", className: youtubeAlign === 'right' ? styles.active : '', onClick: () => setYoutubeAlign('right'), title: "\uC624\uB978\uCABD \uC815\uB82C", children: _jsx("i", { className: styles.alignRight }) })] })] })] }), _jsxs("div", { className: styles.imageActions, children: [_jsx("button", { type: "button", className: styles.default, onClick: () => {
+                                                            setIsYoutubeDropdownOpen(false);
+                                                            setYoutubeUrl('');
+                                                            setYoutubeWidth('100%');
+                                                            setYoutubeAlign('center');
+                                                            setSavedYoutubeSelection(null);
+                                                        }, children: "\uCDE8\uC18C" }), _jsx("button", { type: "button", className: styles.primary, onClick: () => insertYoutube(), disabled: !youtubeUrl, children: "\uC0BD\uC785" })] })] }))] })] }), _jsx("div", { className: styles.toolbarGroup, children: _jsx("button", { type: "button", className: styles.toolbarButton, onClick: () => execCommand('removeFormat'), title: "\uC11C\uC2DD \uC9C0\uC6B0\uAE30", children: _jsx("i", { className: styles.eraser }) }) }), _jsx("div", { className: styles.toolbarGroup, children: _jsx("button", { type: "button", className: `${styles.toolbarButton} ${isCodeView ? styles.active : ''}`, onClick: toggleCodeView, title: isCodeView ? "에디터로 전환" : "HTML 코드보기", children: _jsx("i", { className: styles.code }) }) })] }), _jsx("div", { ref: containerRef, className: `${styles.editorContainer} ${resizable ? styles.resizable : ''}`, style: {
+                    height: height === 'contents' ? 'auto' : (height || '300px'),
+                    minHeight: minHeight || (height === 'contents' ? '100px' : '200px'),
+                    maxHeight: maxHeight || (height === 'contents' ? undefined : undefined),
+                    display: 'flex',
+                    flexDirection: 'column',
+                    resize: resizable ? 'vertical' : 'none',
+                    overflow: 'auto'
+                }, children: isCodeView ? (_jsx("textarea", { ref: codeEditorRef, className: styles.codeEditor, value: codeContent, onChange: handleCodeChange, spellCheck: false, style: {
+                        flex: height === 'contents' ? '0 0 auto' : 1,
+                        minHeight: height === 'contents' ? 'auto' : 0,
+                        height: height === 'contents' && savedEditorHeight ? `${savedEditorHeight}px` : undefined,
+                        resize: 'none'
+                    }, placeholder: placeholder })) : (_jsx("div", { ref: editorRef, id: editorID, className: styles.editorContent, contentEditable: true, onInput: handleInput, onPaste: handlePaste, onClick: handleEditorClick, onKeyUp: () => {
+                        detectCurrentParagraphStyle();
+                        detectCurrentAlign();
+                    }, onKeyDown: handleKeyDown, style: {
+                        flex: height === 'contents' ? '0 0 auto' : 1,
+                        minHeight: height === 'contents' ? 'auto' : 0,
+                        overflowY: height === 'contents' ? 'visible' : 'auto'
+                    }, "data-placeholder": placeholder })) }), validator && message && (_jsx("div", { className: styles.validator, children: message })), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileUpload, style: { display: 'none' } }), isEditLinkPopupOpen && selectedLinkElement && (_jsx("div", { className: styles.editLinkPopup, style: {
+                    position: 'absolute',
+                    top: selectedLinkElement.offsetTop + selectedLinkElement.offsetHeight + 5,
+                    left: selectedLinkElement.offsetLeft
+                }, children: _jsxs("div", { className: styles.editLinkContent, children: [_jsxs("div", { className: styles.editLinkInput, children: [_jsx("label", { children: "URL \uC218\uC815" }), _jsx("input", { type: "text", value: editLinkUrl, onChange: (e) => setEditLinkUrl(e.target.value), placeholder: "https://...", autoFocus: true })] }), _jsxs("div", { className: styles.editLinkTarget, children: [_jsxs("label", { children: [_jsx("input", { type: "radio", value: "_blank", checked: editLinkTarget === '_blank', onChange: (e) => setEditLinkTarget(e.target.value) }), "\uC0C8 \uCC3D\uC5D0\uC11C \uC5F4\uAE30"] }), _jsxs("label", { children: [_jsx("input", { type: "radio", value: "_self", checked: editLinkTarget === '_self', onChange: (e) => setEditLinkTarget(e.target.value) }), "\uD604\uC7AC \uCC3D\uC5D0\uC11C \uC5F4\uAE30"] })] }), _jsxs("div", { className: styles.editLinkActions, children: [_jsx("button", { type: "button", onClick: removeLink, className: styles.danger, children: "\uB9C1\uD06C \uC0AD\uC81C" }), _jsxs("div", { style: { display: 'flex', gap: '8px' }, children: [_jsx("button", { type: "button", onClick: () => {
+                                                setIsEditLinkPopupOpen(false);
+                                                setSelectedLinkElement(null);
+                                                setEditLinkUrl('');
+                                                setEditLinkTarget('_self');
+                                            }, className: styles.default, children: "\uCDE8\uC18C" }), _jsx("button", { type: "button", onClick: updateLink, disabled: !editLinkUrl, className: styles.primary, children: "\uC801\uC6A9" })] })] })] }) })), isImageEditPopupOpen && selectedImage && (() => {
+                // 이미지의 wrapper를 찾기 (wrapper가 있으면 wrapper 기준, 없으면 이미지 기준)
+                const imageWrapper = selectedImage.parentElement?.classList.contains('image-wrapper')
+                    ? selectedImage.parentElement
+                    : selectedImage;
+                return (_jsxs("div", { className: styles.imageDropdown, style: {
+                        position: 'fixed',
+                        top: imageWrapper.getBoundingClientRect().bottom + 10,
+                        left: Math.max(10, Math.min(imageWrapper.getBoundingClientRect().left + (imageWrapper.getBoundingClientRect().width / 2) - 180, window.innerWidth - 370)),
+                        zIndex: 9999,
+                        minWidth: '360px',
+                        maxWidth: '90%'
+                    }, children: [_jsx("h3", { style: { margin: '0 0 15px 0', fontSize: '16px', fontWeight: '600' }, children: "\uC774\uBBF8\uC9C0 \uD3B8\uC9D1" }), _jsxs("div", { className: styles.imageOptions, style: { marginBottom: '0' }, children: [_jsxs("div", { className: styles.imageOptionRow, children: [_jsx("label", { children: "\uD06C\uAE30" }), _jsxs("div", { className: styles.imageSizeButtons, children: [_jsx("button", { type: "button", onClick: () => setEditImageWidth('100%'), className: editImageWidth === '100%' ? styles.active : '', children: "100%" }), _jsx("button", { type: "button", onClick: () => setEditImageWidth('75%'), className: editImageWidth === '75%' ? styles.active : '', children: "75%" }), _jsx("button", { type: "button", onClick: () => setEditImageWidth('50%'), className: editImageWidth === '50%' ? styles.active : '', children: "50%" }), _jsx("button", { type: "button", onClick: () => setEditImageWidth('original'), className: editImageWidth === 'original' ? styles.active : '', children: "\uC6D0\uBCF8" })] })] }), _jsxs("div", { className: styles.imageOptionRow, children: [_jsx("label", { children: "\uC815\uB82C" }), _jsxs("div", { className: styles.imageAlignButtons, children: [_jsx("button", { type: "button", onClick: () => setEditImageAlign('left'), title: "\uC67C\uCABD \uC815\uB82C", className: editImageAlign === 'left' ? styles.active : '', children: _jsx("i", { className: styles.alignLeft }) }), _jsx("button", { type: "button", onClick: () => setEditImageAlign('center'), title: "\uAC00\uC6B4\uB370 \uC815\uB82C", className: editImageAlign === 'center' ? styles.active : '', children: _jsx("i", { className: styles.alignCenter }) }), _jsx("button", { type: "button", onClick: () => setEditImageAlign('right'), title: "\uC624\uB978\uCABD \uC815\uB82C", className: editImageAlign === 'right' ? styles.active : '', children: _jsx("i", { className: styles.alignRight }) })] })] }), _jsxs("div", { className: styles.imageOptionRow, children: [_jsx("label", { children: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8" }), _jsx("input", { type: "text", value: editImageAlt, onChange: (e) => setEditImageAlt(e.target.value), placeholder: "\uC774\uBBF8\uC9C0 \uC124\uBA85..." })] })] }), _jsxs("div", { className: styles.imageActions, children: [_jsx("button", { type: "button", onClick: deleteImage, className: styles.danger, children: "\uC0AD\uC81C" }), _jsxs("div", { style: { display: 'flex', gap: '8px' }, children: [_jsx("button", { type: "button", onClick: deselectImage, className: styles.default, children: "\uCDE8\uC18C" }), _jsx("button", { type: "button", onClick: applyImageEdit, className: styles.primary, children: "\uC801\uC6A9" })] })] })] }));
+            })(), isYoutubeEditPopupOpen && selectedYoutube && (() => {
+                // 유튜브의 wrapper를 찾기
+                const youtubeWrapper = selectedYoutube.parentElement?.classList.contains('youtube-wrapper')
+                    ? selectedYoutube.parentElement
+                    : selectedYoutube;
+                return (_jsxs("div", { className: styles.imageDropdown, style: {
+                        position: 'fixed',
+                        top: youtubeWrapper.getBoundingClientRect().bottom + 10,
+                        left: Math.max(10, Math.min(youtubeWrapper.getBoundingClientRect().left + (youtubeWrapper.getBoundingClientRect().width / 2) - 180, window.innerWidth - 370)),
+                        zIndex: 9999,
+                        minWidth: '360px',
+                        maxWidth: '90%'
+                    }, children: [_jsx("h3", { style: { margin: '0 0 15px 0', fontSize: '16px', fontWeight: '600' }, children: "\uC720\uD29C\uBE0C \uD3B8\uC9D1" }), _jsxs("div", { className: styles.imageOptions, style: { marginBottom: '0' }, children: [_jsxs("div", { className: styles.imageOptionRow, children: [_jsx("label", { children: "\uD06C\uAE30" }), _jsxs("div", { className: styles.imageSizeButtons, children: [_jsx("button", { type: "button", onClick: () => setEditYoutubeWidth('100%'), className: editYoutubeWidth === '100%' ? styles.active : '', children: "100%" }), _jsx("button", { type: "button", onClick: () => setEditYoutubeWidth('75%'), className: editYoutubeWidth === '75%' ? styles.active : '', children: "75%" }), _jsx("button", { type: "button", onClick: () => setEditYoutubeWidth('50%'), className: editYoutubeWidth === '50%' ? styles.active : '', children: "50%" }), _jsx("button", { type: "button", onClick: () => setEditYoutubeWidth('original'), className: editYoutubeWidth === 'original' ? styles.active : '', children: "\uC6D0\uBCF8" })] })] }), _jsxs("div", { className: styles.imageOptionRow, children: [_jsx("label", { children: "\uC815\uB82C" }), _jsxs("div", { className: styles.imageAlignButtons, children: [_jsx("button", { type: "button", onClick: () => setEditYoutubeAlign('left'), title: "\uC67C\uCABD \uC815\uB82C", className: editYoutubeAlign === 'left' ? styles.active : '', children: _jsx("i", { className: styles.alignLeft }) }), _jsx("button", { type: "button", onClick: () => setEditYoutubeAlign('center'), title: "\uAC00\uC6B4\uB370 \uC815\uB82C", className: editYoutubeAlign === 'center' ? styles.active : '', children: _jsx("i", { className: styles.alignCenter }) }), _jsx("button", { type: "button", onClick: () => setEditYoutubeAlign('right'), title: "\uC624\uB978\uCABD \uC815\uB82C", className: editYoutubeAlign === 'right' ? styles.active : '', children: _jsx("i", { className: styles.alignRight }) })] })] })] }), _jsxs("div", { className: styles.imageActions, children: [_jsx("button", { type: "button", className: styles.danger, onClick: deleteYoutube, children: "\uC0AD\uC81C" }), _jsxs("div", { style: { display: 'flex', gap: '8px' }, children: [_jsx("button", { type: "button", className: styles.default, onClick: deselectYoutube, children: "\uCDE8\uC18C" }), _jsx("button", { type: "button", className: styles.primary, onClick: applyYoutubeEdit, children: "\uC801\uC6A9" })] })] })] }));
+            })()] }));
+};
+export default Editor;