podo-ui 0.3.14 → 0.3.16

package/dist/index.d.ts

@@ -7,7 +7,7 @@ import Field from './react/molecule/field';
 declare const Form: {
     Input: import("react").FC<import("./react/atom/input").InputWrapperProps>;
     Textarea: import("react").FC<import("./react/atom/textarea").TextareaWrapperProps>;
-    Editor: ({ value, width, height, minHeight, maxHeight, resizable, onChange, validator, placeholder, }: import("./react/atom/editor").EditorProps) => import("react/jsx-runtime").JSX.Element;
+    Editor: ({ value, width, height, minHeight, maxHeight, resizable, onChange, validator, placeholder, toolbar, }: import("./react/atom/editor").EditorProps) => import("react/jsx-runtime").JSX.Element;
     EditorView: ({ value, className }: import("./react/atom/editor-view").EditorViewProps) => import("react/jsx-runtime").JSX.Element;
     Field: ({ label, labelClass, required, helper, helperClass, children, validator, value, setClassName, className, }: import("./react/molecule/field").FieldProps) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/react/atom/editor.d.ts

@@ -1,4 +1,5 @@
 import { z } from 'zod';
+export type ToolbarItem = 'undo-redo' | 'paragraph' | 'text-style' | 'color' | 'align' | 'list' | 'table' | 'link' | 'image' | 'youtube' | 'format' | 'code';
 export interface EditorProps {
     value: string;
     width?: string;
@@ -9,7 +10,8 @@ export interface EditorProps {
     onChange: (content: string) => void;
     validator?: z.ZodType<unknown>;
     placeholder?: string;
+    toolbar?: ToolbarItem[];
 }
-declare const Editor: ({ value, width, height, minHeight, maxHeight, resizable, onChange, validator, placeholder, }: EditorProps) => import("react/jsx-runtime").JSX.Element;
+declare const Editor: ({ value, width, height, minHeight, maxHeight, resizable, onChange, validator, placeholder, toolbar, }: EditorProps) => import("react/jsx-runtime").JSX.Element;
 export default Editor;
 //# sourceMappingURL=editor.d.ts.map

package/dist/react/atom/editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../react/atom/editor.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGxB,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,MAAM,iGAUT,WAAW,4CAuxGb,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../react/atom/editor.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGxB,MAAM,MAAM,WAAW,GACnB,WAAW,GACX,WAAW,GACX,YAAY,GACZ,OAAO,GACP,OAAO,GACP,MAAM,GACN,OAAO,GACP,MAAM,GACN,OAAO,GACP,SAAS,GACT,QAAQ,GACR,MAAM,CAAC;AAEX,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;CACzB;AAED,QAAA,MAAM,MAAM,0GAWT,WAAW,4CAssIb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/react/atom/editor.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHeight, resizable = false, onChange, validator, placeholder = '내용을 입력하세요...', toolbar, }) => {
     const [message, setMessage] = useState('');
     const [statusClass, setStatusClass] = useState('');
     const [currentParagraphStyle, setCurrentParagraphStyle] = useState('p');
@@ -70,22 +70,59 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
     const imageButtonRef = useRef(null);
     const youtubeButtonRef = useRef(null);
     const imageFileInputRef = useRef(null);
+    const tableButtonRef = useRef(null);
     // 클라이언트에서만 ID 생성 (Vite React용)
     const [editorID, setEditorID] = useState('podo-editor');
+    // 표 삽입 관련 상태
+    const [isTableDropdownOpen, setIsTableDropdownOpen] = useState(false);
+    const [tableRows, setTableRows] = useState(0);
+    const [tableCols, setTableCols] = useState(0);
+    const [savedTableSelection, setSavedTableSelection] = useState(null);
+    // 표 컨텍스트 메뉴 관련 상태
+    const [isTableContextMenuOpen, setIsTableContextMenuOpen] = useState(false);
+    const [tableContextMenuPosition, setTableContextMenuPosition] = useState({ x: 0, y: 0 });
+    const [selectedTableCell, setSelectedTableCell] = useState(null);
+    const [isTableCellColorOpen, setIsTableCellColorOpen] = useState(false);
+    const tableContextMenuRef = useRef(null);
+    // 다중 셀 선택 관련 상태
+    const [selectedTableCells, setSelectedTableCells] = useState([]);
+    const [isSelectingCells, setIsSelectingCells] = useState(false);
+    const [selectionStartCell, setSelectionStartCell] = useState(null);
+    const isSelectingCellsRef = useRef(false); // 최신 상태 추적을 위한 ref
+    const justFinishedDraggingRef = useRef(false); // 드래그가 방금 끝났는지 추적
+    const isMouseDownRef = useRef(false); // 마우스 버튼이 눌려있는지 추적
+    // 툴바 설정 (기본값: 모든 툴)
+    const defaultToolbar = [
+        'undo-redo',
+        'paragraph',
+        'text-style',
+        'color',
+        'align',
+        'list',
+        'table',
+        'link',
+        'image',
+        'youtube',
+        'format',
+        'code',
+    ];
+    const activeToolbar = toolbar || defaultToolbar;
+    // 특정 툴바 아이템이 활성화되어 있는지 확인
+    const isToolbarItemEnabled = (item) => activeToolbar.includes(item);
     // 색상 팔레트 정의 (이미지 기반)
     const colorPalette = [
-        // 첫 번째 줄: 순수 색상
-        ['#ff0000', '#ff8000', '#ffff00', '#80ff00', '#00ffff', '#0080ff', '#0000ff', '#8000ff', '#ff00ff', '#000000'],
+        // 첫 번째 줄: 순수 색상 + 흰색/검은색
+        ['#ff0000', '#ff8000', '#ffff00', '#80ff00', '#00ffff', '#0080ff', '#0000ff', '#8000ff', '#ff00ff', '#ffffff', '#000000'],
         // 두 번째 줄: 매우 밝은 톤 (90% 밝기)
-        ['#ffcccc', '#ffe0cc', '#ffffcc', '#e0ffcc', '#ccffff', '#cce0ff', '#ccccff', '#e0ccff', '#ffccff', '#cccccc'],
+        ['#ffcccc', '#ffe0cc', '#ffffcc', '#e0ffcc', '#ccffff', '#cce0ff', '#ccccff', '#e0ccff', '#ffccff', '#f5f5f5', '#cccccc'],
         // 세 번째 줄: 밝은 톤 (70% 밝기)
-        ['#ff9999', '#ffcc99', '#ffff99', '#ccff99', '#99ffff', '#99ccff', '#9999ff', '#cc99ff', '#ff99ff', '#999999'],
+        ['#ff9999', '#ffcc99', '#ffff99', '#ccff99', '#99ffff', '#99ccff', '#9999ff', '#cc99ff', '#ff99ff', '#e6e6e6', '#999999'],
         // 네 번째 줄: 중간 톤 (50% 밝기)
-        ['#ff6666', '#ffb366', '#ffff66', '#b3ff66', '#66ffff', '#66b3ff', '#6666ff', '#b366ff', '#ff66ff', '#666666'],
+        ['#ff6666', '#ffb366', '#ffff66', '#b3ff66', '#66ffff', '#66b3ff', '#6666ff', '#b366ff', '#ff66ff', '#d9d9d9', '#666666'],
         // 다섯 번째 줄: 어두운 톤 (30% 밝기)
-        ['#cc0000', '#cc6600', '#cccc00', '#66cc00', '#00cccc', '#0066cc', '#0000cc', '#6600cc', '#cc00cc', '#333333'],
+        ['#cc0000', '#cc6600', '#cccc00', '#66cc00', '#00cccc', '#0066cc', '#0000cc', '#6600cc', '#cc00cc', '#b3b3b3', '#333333'],
         // 여섯 번째 줄: 매우 어두운 톤 (15% 밝기)
-        ['#800000', '#804000', '#808000', '#408000', '#008080', '#004080', '#000080', '#400080', '#800080', '#1a1a1a'],
+        ['#800000', '#804000', '#808000', '#408000', '#008080', '#004080', '#000080', '#400080', '#800080', '#808080', '#1a1a1a'],
     ];
     // 정렬 옵션 정의
     const alignOptions = [
@@ -346,7 +383,8 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
             // 지원하는 태그와 스타일 정의
             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'];
+                'UL', 'OL', 'LI', 'A', 'IMG', 'SPAN', 'DIV', 'HR',
+                'TABLE', 'THEAD', 'TBODY', 'TFOOT', 'TR', 'TH', 'TD'];
             const allowedStyles = ['color', 'background-color', 'text-align'];
             // 모든 요소를 순회하면서 정리
             const cleanElement = (element) => {
@@ -383,14 +421,45 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
                         newElement.setAttribute('alt', element.getAttribute('alt'));
                     }
                 }
+                // Table 요소에 에디터 기본 스타일 적용 (insertTable과 동일)
+                if (tagName === 'TABLE') {
+                    newElement.style.borderCollapse = 'collapse';
+                    newElement.style.width = '100%';
+                    newElement.style.margin = '10px 0';
+                    newElement.setAttribute('border', '1');
+                    newElement.style.border = '1px solid #ddd';
+                }
+                if (tagName === 'TH' || tagName === 'TD') {
+                    newElement.style.border = '1px solid #ddd';
+                    newElement.style.padding = '8px';
+                    if (tagName === 'TD') {
+                        newElement.style.minWidth = '50px';
+                    }
+                }
+                if (tagName === 'TH') {
+                    newElement.style.fontWeight = 'bold';
+                }
                 // 스타일 복원 (허용된 것만)
                 if (element instanceof HTMLElement && element.style) {
-                    allowedStyles.forEach(styleName => {
-                        const value = element.style.getPropertyValue(styleName);
-                        if (value) {
-                            newElement.style.setProperty(styleName, value);
-                        }
-                    });
+                    // 테이블 셀의 경우 배경색과 정렬만 허용
+                    if (tagName === 'TD' || tagName === 'TH') {
+                        const cellAllowedStyles = ['background-color', 'text-align'];
+                        cellAllowedStyles.forEach(styleName => {
+                            const value = element.style.getPropertyValue(styleName);
+                            if (value) {
+                                newElement.style.setProperty(styleName, value);
+                            }
+                        });
+                    }
+                    else {
+                        // 일반 요소는 허용된 스타일만
+                        allowedStyles.forEach(styleName => {
+                            const value = element.style.getPropertyValue(styleName);
+                            if (value) {
+                                newElement.style.setProperty(styleName, value);
+                            }
+                        });
+                    }
                 }
                 // 자식 요소 처리
                 Array.from(element.childNodes).forEach(child => {
@@ -434,13 +503,61 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
             }
         }
         else if (text) {
-            // HTML이 없으면 일반 텍스트 삽입
+            // HTML이 없으면 일반 텍스트 삽입 (줄바꿈을 <br> 및 <p> 태그로 변환)
             const selection = window.getSelection();
             if (selection && selection.rangeCount > 0) {
                 const range = selection.getRangeAt(0);
                 range.deleteContents();
-                range.insertNode(document.createTextNode(text));
+                // 텍스트를 줄 단위로 분리 (연속된 줄바꿈은 문단 구분으로 처리)
+                const lines = text.split('\n');
+                const paragraphs = [];
+                let currentParagraph = [];
+                lines.forEach((line) => {
+                    if (line.trim() === '') {
+                        // 빈 줄이면 현재 문단을 저장하고 새 문단 시작
+                        if (currentParagraph.length > 0) {
+                            paragraphs.push(currentParagraph);
+                            currentParagraph = [];
+                        }
+                    }
+                    else {
+                        currentParagraph.push(line);
+                    }
+                });
+                // 마지막 문단 추가
+                if (currentParagraph.length > 0) {
+                    paragraphs.push(currentParagraph);
+                }
+                // 문단이 없으면 빈 문자열 처리
+                if (paragraphs.length === 0) {
+                    range.insertNode(document.createTextNode(text));
+                    range.collapse(false);
+                    return;
+                }
+                const fragment = document.createDocumentFragment();
+                paragraphs.forEach((paragraph) => {
+                    if (paragraph.length === 1) {
+                        // 한 줄짜리 문단은 <p> 태그로 감싸기
+                        const p = document.createElement('p');
+                        p.textContent = paragraph[0];
+                        fragment.appendChild(p);
+                    }
+                    else if (paragraph.length > 1) {
+                        // 여러 줄은 <p> 태그로 감싸고 내부는 <br>로 구분
+                        const p = document.createElement('p');
+                        paragraph.forEach((line, lIndex) => {
+                            p.appendChild(document.createTextNode(line));
+                            if (lIndex < paragraph.length - 1) {
+                                p.appendChild(document.createElement('br'));
+                            }
+                        });
+                        fragment.appendChild(p);
+                    }
+                });
+                range.insertNode(fragment);
                 range.collapse(false);
+                selection.removeAllRanges();
+                selection.addRange(range);
             }
         }
         // 변경사항 반영
@@ -484,6 +601,10 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
         }
         else {
             // 일반 모드에서 코드보기로 전환
+            // 셀 선택 상태 해제
+            if (selectedTableCells.length > 0) {
+                clearCellSelection();
+            }
             if (editorRef.current) {
                 // height가 contents일 때 현재 에디터 높이 저장
                 if (height === 'contents') {
@@ -914,6 +1035,22 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
         if (selectedYoutube && !target.closest('.youtube-wrapper') && !isResizing) {
             deselectYoutube();
         }
+        // 표 컨텍스트 메뉴 닫기
+        if (isTableContextMenuOpen && !target.closest(`.${styles.tableContextMenu}`)) {
+            setIsTableContextMenuOpen(false);
+            setSelectedTableCell(null);
+            setIsTableCellColorOpen(false);
+        }
+        // 표 셀 클릭 시에는 선택 유지
+        const clickedCell = target.closest('td');
+        // 드래그가 방금 끝난 경우 선택 해제하지 않음
+        if (justFinishedDraggingRef.current) {
+            return;
+        }
+        // 표 셀 외부를 클릭한 경우에만 선택 해제
+        if (!clickedCell && selectedTableCells.length > 0) {
+            clearCellSelection();
+        }
         // 링크 요소인지 확인
         const linkElement = target.closest('a');
         if (linkElement && editorRef.current?.contains(linkElement)) {
@@ -929,6 +1066,112 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
             detectCurrentAlign();
         }
     };
+    // 표 셀 마우스 다운 (드래그 선택 시작)
+    const handleCellMouseDown = useCallback((e) => {
+        const target = e.target;
+        const cell = target.closest('td');
+        if (cell && editorRef.current?.contains(cell)) {
+            // 이미지나 이미지 컨테이너를 드래그하는 경우 셀 선택 방지
+            if (target.tagName === 'IMG' || target.classList.contains('image-container')) {
+                return;
+            }
+            // 마우스 다운 상태 설정
+            isMouseDownRef.current = true;
+            // 드래그 시작 셀 설정
+            setSelectionStartCell(cell);
+            // 이미 선택된 셀을 클릭한 경우 선택 유지
+            const isAlreadySelected = cell.classList.contains('selected-cell');
+            // 새로운 셀을 클릭하거나 Shift 키를 누르지 않은 경우에만 기존 선택 해제
+            if (!isAlreadySelected && !e.shiftKey) {
+                const allCells = editorRef.current.querySelectorAll('.selected-cell');
+                allCells.forEach(c => c.classList.remove('selected-cell'));
+                setSelectedTableCells([]);
+            }
+        }
+    }, []);
+    // 표 셀 마우스 이동 (드래그 선택 중)
+    const handleCellMouseMove = useCallback((e) => {
+        const target = e.target;
+        const cell = target.closest('td');
+        if (!cell || !editorRef.current?.contains(cell))
+            return;
+        // 마우스가 눌려있지 않으면 드래그 불가
+        if (!isMouseDownRef.current) {
+            return;
+        }
+        // selectionStartCell이 있고, 다른 셀로 이동한 경우에만 드래그 선택 모드 활성화
+        if (selectionStartCell && cell !== selectionStartCell && !isSelectingCellsRef.current) {
+            isSelectingCellsRef.current = true;
+            setIsSelectingCells(true);
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        if (!isSelectingCellsRef.current || !selectionStartCell)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        // 범위 내 모든 셀 선택
+        const cellsInRange = getCellsInRange(selectionStartCell, cell);
+        // 기존 선택 클래스 제거
+        const allSelectedCells = editorRef.current.querySelectorAll('.selected-cell');
+        allSelectedCells.forEach(c => c.classList.remove('selected-cell'));
+        // 새 선택 적용
+        setSelectedTableCells(cellsInRange);
+        cellsInRange.forEach(c => c.classList.add('selected-cell'));
+    }, [selectionStartCell]);
+    // 표 셀 마우스 업 (드래그 선택 종료)
+    const handleCellMouseUp = useCallback((e) => {
+        const target = e.target;
+        const cell = target.closest('td');
+        // 드래그 선택 중이었다면 플래그 설정
+        if (isSelectingCellsRef.current) {
+            // 셀 내부에서 마우스 업한 경우 이벤트 방지
+            if (cell && editorRef.current?.contains(cell)) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            // 드래그가 방금 끝났음을 표시
+            justFinishedDraggingRef.current = true;
+            // 50ms 후 플래그 해제 (클릭 이벤트가 처리된 후)
+            setTimeout(() => {
+                justFinishedDraggingRef.current = false;
+            }, 50);
+        }
+        // 마우스 다운 상태 해제 (가장 중요!)
+        isMouseDownRef.current = false;
+        // 드래그 선택 모드 무조건 종료 (선택된 셀은 유지)
+        isSelectingCellsRef.current = false;
+        setIsSelectingCells(false);
+        // selectionStartCell은 유지하여 선택 상태 보존
+    }, []);
+    // 셀 선택 해제
+    const clearCellSelection = () => {
+        selectedTableCells.forEach(cell => cell.classList.remove('selected-cell'));
+        setSelectedTableCells([]);
+        setSelectionStartCell(null);
+    };
+    // 표 셀 우클릭 이벤트 처리
+    const handleEditorContextMenu = (e) => {
+        const target = e.target;
+        // 표 셀 우클릭 감지 (td 또는 td 내부 요소)
+        const cell = target.closest('td');
+        if (cell && editorRef.current?.contains(cell)) {
+            e.preventDefault();
+            e.stopPropagation();
+            // 선택된 셀이 없거나, 우클릭한 셀이 선택 영역에 포함되지 않은 경우
+            if (selectedTableCells.length === 0 || !selectedTableCells.includes(cell)) {
+                clearCellSelection();
+                setSelectedTableCell(cell);
+            }
+            else {
+                // 선택된 셀들 중 하나를 우클릭한 경우, 첫 번째 셀을 대표로 사용
+                setSelectedTableCell(selectedTableCells[0]);
+            }
+            setTableContextMenuPosition({ x: e.clientX, y: e.clientY });
+            setIsTableContextMenuOpen(true);
+            setIsTableCellColorOpen(false);
+        }
+    };
     // 링크 수정
     const updateLink = () => {
         if (selectedLinkElement && editLinkUrl) {
@@ -1007,8 +1250,7 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
                 });
                 imageSrc = imageUrl;
             }
-            catch (error) {
-                console.error('Image validation failed:', error);
+            catch {
                 alert(`이미지를 불러올 수 없습니다.\n\n가능한 원인:\n1. 잘못된 이미지 URL\n2. CORS 정책으로 인한 차단 (외부 도메인)\n3. 네트워크 연결 문제\n4. 이미지가 존재하지 않음\n\nURL: ${imageUrl}\n\n💡 팁: CORS 정책으로 차단된 경우, 이미지를 직접 다운로드 후 파일 업로드를 사용해주세요.`);
                 return;
             }
@@ -1024,7 +1266,6 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
         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) {
@@ -1401,6 +1642,274 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
         handleInput();
     };
     // YouTube 삽입
+    // 표 삽입 함수
+    const insertTable = (rows, cols) => {
+        if (rows === 0 || cols === 0)
+            return;
+        // 표 HTML 생성
+        const table = document.createElement('table');
+        table.style.borderCollapse = 'collapse';
+        table.style.width = '100%';
+        table.style.margin = '10px 0';
+        table.setAttribute('border', '1');
+        table.style.border = '1px solid #ddd';
+        const tbody = document.createElement('tbody');
+        for (let i = 0; i < rows; i++) {
+            const tr = document.createElement('tr');
+            for (let j = 0; j < cols; j++) {
+                const td = document.createElement('td');
+                td.style.border = '1px solid #ddd';
+                td.style.padding = '8px';
+                td.style.minWidth = '50px';
+                td.innerHTML = '<br>';
+                tr.appendChild(td);
+            }
+            tbody.appendChild(tr);
+        }
+        table.appendChild(tbody);
+        // 에디터에 포커스 설정
+        if (editorRef.current) {
+            editorRef.current.focus();
+            const selection = window.getSelection();
+            // 저장된 선택 영역이 있으면 복원
+            if (savedTableSelection && selection) {
+                try {
+                    selection.removeAllRanges();
+                    selection.addRange(savedTableSelection);
+                    // 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(table);
+                // 표 다음에 새 문단 추가
+                const newP = document.createElement('p');
+                newP.innerHTML = '<br>';
+                table.after(newP);
+                // 커서를 첫 번째 셀로 이동
+                const firstCell = table.querySelector('td');
+                if (firstCell) {
+                    const newRange = document.createRange();
+                    newRange.selectNodeContents(firstCell);
+                    newRange.collapse(true);
+                    selection.removeAllRanges();
+                    selection.addRange(newRange);
+                }
+            }
+            else {
+                // 폴백: 에디터 끝에 추가
+                editorRef.current.appendChild(table);
+            }
+        }
+        // 상태 초기화
+        setIsTableDropdownOpen(false);
+        setTableRows(0);
+        setTableCols(0);
+        setSavedTableSelection(null);
+        editorRef.current?.focus();
+        handleInput();
+    };
+    // 다중 셀 선택 범위 계산
+    const getCellsInRange = (startCell, endCell) => {
+        const table = startCell.closest('table');
+        if (!table)
+            return [];
+        const tbody = table.querySelector('tbody');
+        if (!tbody)
+            return [];
+        const startRow = startCell.parentElement;
+        const endRow = endCell.parentElement;
+        const startRowIndex = Array.from(tbody.rows).indexOf(startRow);
+        const endRowIndex = Array.from(tbody.rows).indexOf(endRow);
+        const startColIndex = startCell.cellIndex;
+        const endColIndex = endCell.cellIndex;
+        const minRow = Math.min(startRowIndex, endRowIndex);
+        const maxRow = Math.max(startRowIndex, endRowIndex);
+        const minCol = Math.min(startColIndex, endColIndex);
+        const maxCol = Math.max(startColIndex, endColIndex);
+        const cells = [];
+        for (let r = minRow; r <= maxRow; r++) {
+            const row = tbody.rows[r];
+            for (let c = minCol; c <= maxCol; c++) {
+                if (row.cells[c]) {
+                    cells.push(row.cells[c]);
+                }
+            }
+        }
+        return cells;
+    };
+    // 표 셀 배경색 변경 (단일/다중)
+    const changeTableCellBackgroundColor = (color) => {
+        // 다중 셀이 선택되어 있으면 모든 선택된 셀에 적용
+        if (selectedTableCells.length > 0) {
+            selectedTableCells.forEach(cell => {
+                cell.style.backgroundColor = color;
+            });
+        }
+        else if (selectedTableCell) {
+            // 단일 셀에만 적용
+            selectedTableCell.style.backgroundColor = color;
+        }
+        setIsTableCellColorOpen(false);
+        handleInput();
+    };
+    // 셀 배경색 초기화
+    const resetTableCellBackgroundColor = () => {
+        if (selectedTableCells.length > 0) {
+            selectedTableCells.forEach(cell => {
+                cell.style.backgroundColor = '';
+            });
+        }
+        else if (selectedTableCell) {
+            selectedTableCell.style.backgroundColor = '';
+        }
+        setIsTableCellColorOpen(false);
+        handleInput();
+    };
+    // 셀 정렬 설정
+    const changeTableCellAlign = (align) => {
+        if (selectedTableCells.length > 0) {
+            selectedTableCells.forEach(cell => {
+                cell.style.textAlign = align;
+            });
+        }
+        else if (selectedTableCell) {
+            selectedTableCell.style.textAlign = align;
+        }
+        handleInput();
+    };
+    // 행 추가 (위/아래)
+    const addTableRow = (position) => {
+        if (!selectedTableCell)
+            return;
+        const row = selectedTableCell.closest('tr');
+        if (!row)
+            return;
+        const table = row.closest('table');
+        if (!table)
+            return;
+        const newRow = document.createElement('tr');
+        const cellCount = row.cells.length;
+        for (let i = 0; i < cellCount; i++) {
+            const td = document.createElement('td');
+            td.style.border = '1px solid #ddd';
+            td.style.padding = '8px';
+            td.style.minWidth = '50px';
+            td.innerHTML = '<br>';
+            newRow.appendChild(td);
+        }
+        if (position === 'above') {
+            row.parentNode?.insertBefore(newRow, row);
+        }
+        else {
+            row.parentNode?.insertBefore(newRow, row.nextSibling);
+        }
+        setIsTableContextMenuOpen(false);
+        handleInput();
+    };
+    // 행 삭제
+    const deleteTableRow = () => {
+        if (!selectedTableCell)
+            return;
+        const row = selectedTableCell.closest('tr');
+        if (!row)
+            return;
+        const tbody = row.parentNode;
+        if (!tbody)
+            return;
+        // 마지막 행이면 삭제 불가
+        if (tbody.rows.length <= 1) {
+            alert('표에는 최소 1개의 행이 필요합니다.');
+            return;
+        }
+        row.remove();
+        setIsTableContextMenuOpen(false);
+        setSelectedTableCell(null);
+        handleInput();
+    };
+    // 열 추가 (좌/우)
+    const addTableColumn = (position) => {
+        if (!selectedTableCell)
+            return;
+        const cellIndex = selectedTableCell.cellIndex;
+        const row = selectedTableCell.closest('tr');
+        if (!row)
+            return;
+        const table = row.closest('table');
+        if (!table)
+            return;
+        const tbody = table.querySelector('tbody');
+        if (!tbody)
+            return;
+        Array.from(tbody.rows).forEach(row => {
+            const newCell = document.createElement('td');
+            newCell.style.border = '1px solid #ddd';
+            newCell.style.padding = '8px';
+            newCell.style.minWidth = '50px';
+            newCell.innerHTML = '<br>';
+            if (position === 'left') {
+                row.insertBefore(newCell, row.cells[cellIndex]);
+            }
+            else {
+                if (cellIndex + 1 < row.cells.length) {
+                    row.insertBefore(newCell, row.cells[cellIndex + 1]);
+                }
+                else {
+                    row.appendChild(newCell);
+                }
+            }
+        });
+        setIsTableContextMenuOpen(false);
+        handleInput();
+    };
+    // 열 삭제
+    const deleteTableColumn = () => {
+        if (!selectedTableCell)
+            return;
+        const cellIndex = selectedTableCell.cellIndex;
+        const row = selectedTableCell.closest('tr');
+        if (!row)
+            return;
+        const table = row.closest('table');
+        if (!table)
+            return;
+        const tbody = table.querySelector('tbody');
+        if (!tbody)
+            return;
+        // 마지막 열이면 삭제 불가
+        if (row.cells.length <= 1) {
+            alert('표에는 최소 1개의 열이 필요합니다.');
+            return;
+        }
+        Array.from(tbody.rows).forEach(row => {
+            if (row.cells[cellIndex]) {
+                row.cells[cellIndex].remove();
+            }
+        });
+        setIsTableContextMenuOpen(false);
+        setSelectedTableCell(null);
+        handleInput();
+    };
     const insertYoutube = () => {
         if (!youtubeUrl)
             return;
@@ -1645,11 +2154,116 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
             return;
         }
         const range = selection.getRangeAt(0);
-        // 선택된 텍스트를 span으로 감싸기
+        // 선택 영역에 포함된 모든 표 셀 찾기
+        const getSelectedTableCells = () => {
+            const cells = [];
+            const container = range.commonAncestorContainer;
+            // 컨테이너가 표인지 확인
+            let tableElement = null;
+            let current = container.nodeType === Node.TEXT_NODE ? container.parentElement : container;
+            while (current && current !== editorRef.current) {
+                if (current.tagName === 'TABLE' || current.tagName === 'TBODY' || current.tagName === 'TR') {
+                    // 상위 table 요소 찾기
+                    let table = current;
+                    while (table && table.tagName !== 'TABLE') {
+                        table = table.parentElement;
+                    }
+                    tableElement = table;
+                    break;
+                }
+                current = current.parentElement;
+            }
+            if (!tableElement)
+                return cells;
+            // 표 내의 모든 셀 확인
+            const allCells = tableElement.querySelectorAll('td, th');
+            allCells.forEach(cell => {
+                if (range.intersectsNode(cell)) {
+                    cells.push(cell);
+                }
+            });
+            return cells;
+        };
+        const selectedCells = getSelectedTableCells();
+        // 여러 표 셀이 선택된 경우
+        if (selectedCells.length > 1) {
+            selectedCells.forEach(cell => {
+                // 각 셀의 모든 내용을 span으로 감싸기
+                const cellContents = Array.from(cell.childNodes);
+                cellContents.forEach(node => {
+                    if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
+                        // 텍스트 노드를 span으로 감싸기
+                        const span = document.createElement('span');
+                        if (styleProperty === 'color') {
+                            span.style.color = color;
+                        }
+                        else if (styleProperty === 'background-color') {
+                            span.style.backgroundColor = color;
+                        }
+                        span.textContent = node.textContent;
+                        cell.replaceChild(span, node);
+                    }
+                    else if (node.nodeType === Node.ELEMENT_NODE) {
+                        // 기존 요소에 스타일 적용
+                        const element = node;
+                        if (styleProperty === 'color') {
+                            element.style.color = color;
+                        }
+                        else if (styleProperty === 'background-color') {
+                            element.style.backgroundColor = color;
+                        }
+                    }
+                });
+            });
+            // 선택 해제
+            selection.removeAllRanges();
+            editorRef.current?.focus();
+            handleInput();
+            return;
+        }
+        // 단일 셀 내부 또는 일반 텍스트
+        const commonAncestor = range.commonAncestorContainer;
+        // 선택 영역이 표 셀 내부인지 확인
+        const isInTableCell = (node) => {
+            let current = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
+            while (current && current !== editorRef.current) {
+                if (current.tagName === 'TD' || current.tagName === 'TH') {
+                    return true;
+                }
+                current = current.parentElement;
+            }
+            return false;
+        };
+        // 표 셀 내부에서의 색상 변경 (단일 셀)
+        if (isInTableCell(commonAncestor)) {
+            try {
+                const contents = range.extractContents();
+                const span = document.createElement('span');
+                if (styleProperty === 'color') {
+                    span.style.color = color;
+                }
+                else if (styleProperty === 'background-color') {
+                    span.style.backgroundColor = color;
+                }
+                span.appendChild(contents);
+                range.insertNode(span);
+                // 커서 위치 조정
+                range.setStartAfter(span);
+                range.collapse(true);
+                selection.removeAllRanges();
+                selection.addRange(range);
+                editorRef.current?.focus();
+                handleInput();
+                return;
+            }
+            catch {
+                // 오류 무시
+            }
+        }
+        // 일반 텍스트에 대한 색상 변경
         const span = document.createElement('span');
         try {
             const contents = range.extractContents();
-            // 스타일 적용 - setAttribute를 사용하여 !important 포함
             if (styleProperty === 'color') {
                 span.setAttribute('style', `color: ${color} !important;`);
             }
@@ -1658,14 +2272,12 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
             }
             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);
             }
@@ -1737,6 +2349,16 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
                 setYoutubeUrl('');
                 setSavedYoutubeSelection(null);
             }
+            // 표 드롭다운 체크
+            const tableDropdown = document.querySelector(`.${styles.tableDropdown}`);
+            if (tableButtonRef.current &&
+                !tableButtonRef.current.contains(target) &&
+                (!tableDropdown || !tableDropdown.contains(target))) {
+                setIsTableDropdownOpen(false);
+                setTableRows(0);
+                setTableCols(0);
+                setSavedTableSelection(null);
+            }
             // 이미지 편집 팝업 닫기
             if (isImageEditPopupOpen && selectedImage) {
                 const imageEditPopup = document.querySelector(`.${styles.imageDropdown}`);
@@ -1758,14 +2380,20 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
                     setEditLinkTarget('_self');
                 }
             }
+            // 표 컨텍스트 메뉴 닫기
+            if (isTableContextMenuOpen && tableContextMenuRef.current && !tableContextMenuRef.current.contains(target)) {
+                setIsTableContextMenuOpen(false);
+                setSelectedTableCell(null);
+                setIsTableCellColorOpen(false);
+            }
         };
-        if (isParagraphDropdownOpen || isTextColorOpen || isBgColorOpen || isAlignDropdownOpen || isLinkDropdownOpen || isEditLinkPopupOpen || isImageDropdownOpen || isImageEditPopupOpen || isYoutubeDropdownOpen) {
+        if (isParagraphDropdownOpen || isTextColorOpen || isBgColorOpen || isAlignDropdownOpen || isLinkDropdownOpen || isEditLinkPopupOpen || isImageDropdownOpen || isImageEditPopupOpen || isYoutubeDropdownOpen || isTableDropdownOpen || isTableContextMenuOpen) {
             document.addEventListener('mousedown', handleClickOutside);
         }
         return () => {
             document.removeEventListener('mousedown', handleClickOutside);
         };
-    }, [isParagraphDropdownOpen, isTextColorOpen, isBgColorOpen, isAlignDropdownOpen, isLinkDropdownOpen, isEditLinkPopupOpen, isImageDropdownOpen, isImageEditPopupOpen, isYoutubeDropdownOpen, selectedLinkElement, selectedImage]);
+    }, [isParagraphDropdownOpen, isTextColorOpen, isBgColorOpen, isAlignDropdownOpen, isLinkDropdownOpen, isEditLinkPopupOpen, isImageDropdownOpen, isImageEditPopupOpen, isYoutubeDropdownOpen, isTableDropdownOpen, isTableContextMenuOpen, selectedLinkElement, selectedImage]);
     // 리사이즈 중 마우스 이벤트 처리
     useEffect(() => {
         if (!isResizing || !resizeStartData)
@@ -1890,6 +2518,20 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
             document.removeEventListener('mouseup', handleMouseUp);
         };
     }, [isResizing, resizeStartData, selectedImage, selectedYoutube]);
+    // 표 셀 드래그 선택 이벤트 등록
+    useEffect(() => {
+        if (!editorRef.current || isCodeView)
+            return;
+        const editor = editorRef.current;
+        editor.addEventListener('mousedown', handleCellMouseDown);
+        document.addEventListener('mousemove', handleCellMouseMove);
+        document.addEventListener('mouseup', handleCellMouseUp);
+        return () => {
+            editor.removeEventListener('mousedown', handleCellMouseDown);
+            document.removeEventListener('mousemove', handleCellMouseMove);
+            document.removeEventListener('mouseup', handleCellMouseUp);
+        };
+    }, [handleCellMouseDown, handleCellMouseMove, handleCellMouseUp, isCodeView]);
     // 스크롤, 리사이즈 및 이미지/유튜브 드래그 시 편집창 숨기기
     useEffect(() => {
         if (!selectedImage && !selectedYoutube)
@@ -2066,7 +2708,7 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
         }, 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: {
+    return (_jsxs("div", { className: `${styles.editor} ${statusClass}`, style: { width, position: 'relative' }, children: [_jsxs("div", { className: styles.toolbar, children: [isToolbarItemEnabled('undo-redo') && (_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',
@@ -2076,7 +2718,7 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
                                     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: () => {
+                                }, children: _jsx("i", { className: styles.redo }) })] })), isToolbarItemEnabled('paragraph') && (_jsxs("div", { className: styles.toolbarGroup, ref: paragraphButtonRef, children: [_jsxs("button", { type: "button", className: styles.paragraphButton, onClick: () => {
                                     setIsParagraphDropdownOpen(!isParagraphDropdownOpen);
                                     setIsTextColorOpen(false);
                                     setIsBgColorOpen(false);
@@ -2084,7 +2726,7 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
                                 }, 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: () => {
+                                }, 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))) }))] })), isToolbarItemEnabled('text-style') && (_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 }) })] })), isToolbarItemEnabled('color') && (_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) {
                                                 // 선택 영역 저장
@@ -2116,7 +2758,7 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
                                                     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: () => {
+                                                } }, color))) }, rowIndex))) }))] })] })), (isToolbarItemEnabled('align') || isToolbarItemEnabled('list') || isToolbarItemEnabled('table')) && (_jsxs("div", { className: styles.toolbarGroup, children: [isToolbarItemEnabled('align') && (_jsxs("div", { ref: alignButtonRef, style: { position: 'relative' }, children: [_jsx("button", { type: "button", className: styles.toolbarButton, onClick: () => {
                                             setIsAlignDropdownOpen(!isAlignDropdownOpen);
                                             setIsParagraphDropdownOpen(false);
                                             setIsTextColorOpen(false);
@@ -2136,7 +2778,22 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
                                                 }
                                                 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: {
+                                            }, title: option.label, children: _jsx("i", { className: styles[option.icon] }) }, option.value))) }))] })), isToolbarItemEnabled('list') && (_jsxs(_Fragment, { children: [_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 }) })] })), isToolbarItemEnabled('table') && (_jsxs("div", { ref: tableButtonRef, style: { position: 'relative' }, children: [_jsx("button", { type: "button", className: styles.toolbarButton, onClick: () => {
+                                            // 현재 선택 영역 저장
+                                            const selection = window.getSelection();
+                                            if (selection && selection.rangeCount > 0) {
+                                                setSavedTableSelection(selection.getRangeAt(0).cloneRange());
+                                            }
+                                            setIsTableDropdownOpen(!isTableDropdownOpen);
+                                        }, title: "\uD45C \uC0BD\uC785", children: _jsx("i", { className: styles.table }) }), isTableDropdownOpen && (_jsx("div", { className: styles.tableDropdown, style: {
+                                            top: tableButtonRef.current?.getBoundingClientRect().bottom ?? 0,
+                                            left: tableButtonRef.current?.getBoundingClientRect().left ?? 0
+                                        }, children: _jsxs("div", { className: styles.tableGridSelector, children: [_jsx("div", { className: styles.tableGridLabel, children: tableRows > 0 && tableCols > 0 ? `${tableRows} × ${tableCols} 표` : '표 크기 선택' }), _jsx("div", { className: styles.tableGrid, children: Array.from({ length: 10 }, (_, i) => i + 1).map(row => (_jsx("div", { className: styles.tableGridRow, children: Array.from({ length: 10 }, (_, j) => j + 1).map(col => (_jsx("div", { className: `${styles.tableGridCell} ${row <= tableRows && col <= tableCols ? styles.active : ''}`, onMouseEnter: () => {
+                                                                setTableRows(row);
+                                                                setTableCols(col);
+                                                            }, onClick: () => {
+                                                                insertTable(row, col);
+                                                            } }, `${row}-${col}`))) }, row))) })] }) }))] }))] })), (isToolbarItemEnabled('link') || isToolbarItemEnabled('image') || isToolbarItemEnabled('youtube')) && (_jsxs("div", { className: styles.toolbarGroup, children: [isToolbarItemEnabled('link') && (_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: () => {
@@ -2144,7 +2801,7 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
                                                             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: {
+                                                        }, className: styles.default, children: "\uCDE8\uC18C" }), _jsx("button", { type: "button", onClick: applyLink, disabled: !linkUrl, className: styles.primary, children: "\uC0BD\uC785" })] })] }))] })), isToolbarItemEnabled('image') && (_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: () => {
@@ -2166,7 +2823,7 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
                                                             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) => {
+                                                        }, className: styles.default, children: "\uCDE8\uC18C" }), _jsx("button", { type: "button", onClick: insertImage, disabled: !imageUrl && !imageFile, className: styles.primary, children: "\uC0BD\uC785" })] })] }))] })), isToolbarItemEnabled('youtube') && (_jsxs("div", { ref: youtubeButtonRef, style: { position: 'relative' }, children: [_jsx("button", { type: "button", className: styles.toolbarButton, onClick: (e) => {
                                             e.stopPropagation();
                                             // 현재 선택 영역 저장
                                             const selection = window.getSelection();
@@ -2193,7 +2850,7 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
                                                             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: {
+                                                        }, children: "\uCDE8\uC18C" }), _jsx("button", { type: "button", className: styles.primary, onClick: () => insertYoutube(), disabled: !youtubeUrl, children: "\uC0BD\uC785" })] })] }))] }))] })), isToolbarItemEnabled('format') && (_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 }) }) })), isToolbarItemEnabled('code') && (_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),
@@ -2206,7 +2863,7 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
                         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, onCompositionStart: handleCompositionStart, onCompositionEnd: handleCompositionEnd, onPaste: handlePaste, onClick: handleEditorClick, onKeyUp: () => {
+                    }, placeholder: placeholder })) : (_jsx("div", { ref: editorRef, id: editorID, className: styles.editorContent, contentEditable: true, onInput: handleInput, onCompositionStart: handleCompositionStart, onCompositionEnd: handleCompositionEnd, onPaste: handlePaste, onClick: handleEditorClick, onContextMenu: handleEditorContextMenu, onKeyUp: () => {
                         detectCurrentParagraphStyle();
                         detectCurrentAlign();
                     }, onKeyDown: handleKeyDown, style: {
@@ -2248,6 +2905,11 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
                         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" })] })] })] }));
-            })()] }));
+            })(), isTableContextMenuOpen && selectedTableCell && (_jsxs("div", { ref: tableContextMenuRef, className: styles.tableContextMenu, style: {
+                    position: 'fixed',
+                    top: tableContextMenuPosition.y,
+                    left: tableContextMenuPosition.x,
+                    zIndex: 10000
+                }, children: [selectedTableCells.length > 1 && (_jsxs("div", { className: styles.tableContextMenuHeader, children: [selectedTableCells.length, "\uAC1C \uC140 \uC120\uD0DD\uB428"] })), _jsxs("div", { className: styles.tableContextMenuItem, children: [_jsxs("button", { type: "button", onClick: () => setIsTableCellColorOpen(!isTableCellColorOpen), className: styles.tableContextMenuButton, children: ["\uC140 \uBC30\uACBD\uC0C9 ", selectedTableCells.length > 1 ? `(${selectedTableCells.length}개)` : '', _jsx("span", { className: styles.arrow, children: isTableCellColorOpen ? '▲' : '▼' })] }), isTableCellColorOpen && (_jsx("div", { className: styles.colorPaletteInline, children: colorPalette.map((row, rowIndex) => (_jsx("div", { className: styles.colorRow, children: row.map((color, colIndex) => (_jsx("button", { type: "button", className: styles.colorButton, style: { backgroundColor: color }, onClick: () => changeTableCellBackgroundColor(color), title: color }, colIndex))) }, rowIndex))) }))] }), _jsx("button", { type: "button", onClick: resetTableCellBackgroundColor, className: styles.tableContextMenuButton, children: "\uBC30\uACBD\uC0C9 \uCD08\uAE30\uD654" }), _jsx("div", { className: styles.tableContextMenuDivider }), _jsx("button", { type: "button", onClick: () => changeTableCellAlign('left'), className: styles.tableContextMenuButton, children: "\uC67C\uCABD \uC815\uB82C" }), _jsx("button", { type: "button", onClick: () => changeTableCellAlign('center'), className: styles.tableContextMenuButton, children: "\uAC00\uC6B4\uB370 \uC815\uB82C" }), _jsx("button", { type: "button", onClick: () => changeTableCellAlign('right'), className: styles.tableContextMenuButton, children: "\uC624\uB978\uCABD \uC815\uB82C" }), _jsx("div", { className: styles.tableContextMenuDivider }), _jsx("button", { type: "button", onClick: () => addTableRow('above'), className: styles.tableContextMenuButton, children: "\uC704\uC5D0 \uD589 \uCD94\uAC00" }), _jsx("button", { type: "button", onClick: () => addTableRow('below'), className: styles.tableContextMenuButton, children: "\uC544\uB798\uC5D0 \uD589 \uCD94\uAC00" }), _jsx("button", { type: "button", onClick: deleteTableRow, className: styles.tableContextMenuButton, children: "\uD589 \uC0AD\uC81C" }), _jsx("div", { className: styles.tableContextMenuDivider }), _jsx("button", { type: "button", onClick: () => addTableColumn('left'), className: styles.tableContextMenuButton, children: "\uC67C\uCABD\uC5D0 \uC5F4 \uCD94\uAC00" }), _jsx("button", { type: "button", onClick: () => addTableColumn('right'), className: styles.tableContextMenuButton, children: "\uC624\uB978\uCABD\uC5D0 \uC5F4 \uCD94\uAC00" }), _jsx("button", { type: "button", onClick: deleteTableColumn, className: styles.tableContextMenuButton, children: "\uC5F4 \uC0AD\uC81C" })] }))] }));
 };
 export default Editor;

package/dist/react/atom/editor.module.scss

@@ -214,6 +214,11 @@
       mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"/></svg>');
       -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"/></svg>');
     }
+
+    &.table {
+      mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M64 256V160H224v96H64zm0 64H224v96H64V320zm224 96V320H448v96H288zM448 256H288V160H448v96zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/></svg>');
+      -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M64 256V160H224v96H64zm0 64H224v96H64V320zm224 96V320H448v96H288zM448 256H288V160H448v96zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/></svg>');
+    }
   }
 
   &:hover i {
@@ -499,6 +504,127 @@
   }
 }
 
+// 표 드롭다운
+.tableDropdown {
+  position: fixed;
+  margin-top: 2px;
+  padding: 12px;
+  background: color(bg-modal);
+  border: 1px solid color(border);
+  border-radius: r(2);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 10000;
+  min-width: 240px;
+
+  .tableGridSelector {
+    .tableGridLabel {
+      text-align: center;
+      font-size: 13px;
+      color: color(text-body);
+      margin-bottom: 8px;
+      font-weight: 500;
+      min-height: 20px;
+    }
+
+    .tableGrid {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+
+      .tableGridRow {
+        display: flex;
+        gap: 2px;
+
+        .tableGridCell {
+          width: 20px;
+          height: 20px;
+          border: 1px solid color(border);
+          background: color(bg-elevation);
+          cursor: pointer;
+          transition: all 0.15s;
+
+          &:hover {
+            border-color: color(primary);
+          }
+
+          &.active {
+            background: color(primary-fill);
+            border-color: color(primary);
+          }
+        }
+      }
+    }
+  }
+}
+
+// 표 컨텍스트 메뉴
+.tableContextMenu {
+  background: color(bg-modal);
+  border: 1px solid color(border);
+  border-radius: r(2);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  padding: 8px 0;
+  min-width: 180px;
+
+  .tableContextMenuHeader {
+    padding: 8px 12px;
+    font-size: 12px;
+    font-weight: 600;
+    color: color(primary);
+    background: color(primary-fill);
+    border-bottom: 1px solid color(border);
+    margin-bottom: 4px;
+  }
+
+  .tableContextMenuItem {
+    position: relative;
+
+    .colorPaletteInline {
+      padding: 8px;
+      background: color(bg-elevation);
+      border-top: 1px solid color(border);
+      margin-top: 4px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+  }
+
+  .tableContextMenuButton {
+    width: 100%;
+    padding: 8px 12px;
+    border: none;
+    background: transparent;
+    color: color(text-body);
+    font-size: 13px;
+    cursor: pointer;
+    text-align: left;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &:hover {
+      background: color(bg-elevation);
+    }
+
+    &:active {
+      background: color(default-pressed);
+    }
+
+    .arrow {
+      font-size: 10px;
+      color: color(text-sub);
+    }
+  }
+
+  .tableContextMenuDivider {
+    height: 1px;
+    background: color(border);
+    margin: 4px 0;
+  }
+}
+
 // 색상 팔레트 드롭다운
 .colorPalette {
   position: fixed;
@@ -1239,3 +1365,12 @@
   width: 100%;
   box-sizing: border-box;
 }
+
+// 선택된 표 셀 스타일
+.editorContent {
+  :global(.selected-cell) {
+    outline: 2px solid color(primary) !important;
+    outline-offset: -2px !important;
+    position: relative;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "podo-ui",
-  "version": "0.3.14",
+  "version": "0.3.16",
   "type": "module",
   "author": "hada0127 <work@tarucy.net>",
   "license": "MIT",
@@ -80,6 +80,7 @@
   "devDependencies": {
     "@cloudflare/next-on-pages": "^1.13.8",
     "@eslint/js": "^9.8.0",
+    "@playwright/test": "^1.56.1",
     "@types/node": "22.10.2",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",