podo-ui 0.3.0 → 0.3.1

package/next.ts

@@ -3,6 +3,8 @@ import dynamic from 'next/dynamic';
 
 import Input from './react/atom/input';
 import Textarea from './react/atom/textarea';
+import EditorView from './react/atom/editor-view';
+import Pagination from './react/molecule/pagination';
 import Field from './react/molecule/field';
 const Editor = dynamic(() => import('./react/atom/editor'), { ssr: false });
 
@@ -10,9 +12,10 @@ const Form = {
   Input,
   Textarea,
   Editor,
+  EditorView,
   Field,
 };
 
 export default Form;
 
-export { Input, Textarea, Editor, Field };
+export { Input, Textarea, Editor, EditorView, Pagination, Field };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "podo-ui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "type": "module",
   "author": "hada0127 <work@tarucy.net>",
   "license": "MIT",

package/react/atom/editor-view.module.scss

@@ -0,0 +1,203 @@
+@use '../../scss/color/function.scss' as *;
+@use '../../scss/typo/mixin.scss' as typo;
+
+.editorView {
+  color: color(text-body);
+  font-family: inherit;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+
+  // 텍스트 서식
+  strong,
+  b {
+    font-weight: bold;
+  }
+
+  em,
+  i {
+    font-style: italic;
+  }
+
+  u {
+    text-decoration: underline;
+  }
+
+  s,
+  strike {
+    text-decoration: line-through;
+  }
+
+  // 제목 - podo-ui 스타일 상속
+  h1 {
+    @include typo.h1;
+    margin: 0.67em 0;
+  }
+
+  h2 {
+    @include typo.h2;
+    margin: 0.75em 0;
+  }
+
+  h3 {
+    @include typo.h3;
+    margin: 0.83em 0;
+  }
+
+  // p1~p5 스타일 클래스
+  .p1 {
+    @include typo.p1;
+  }
+
+  .p2 {
+    @include typo.p2;
+  }
+
+  .p3 {
+    @include typo.p3;
+  }
+
+  .p4 {
+    @include typo.p4;
+  }
+
+  .p5 {
+    @include typo.p5;
+  }
+
+  // Semibold 스타일
+  .p1_semibold {
+    @include typo.p1;
+    font-weight: 600;
+  }
+
+  .p2_semibold {
+    @include typo.p2;
+    font-weight: 600;
+  }
+
+  .p3_semibold {
+    @include typo.p3-semibold;
+  }
+
+  .p4_semibold {
+    @include typo.p4-semibold;
+  }
+
+  .p5_semibold {
+    @include typo.p5-semibold;
+  }
+
+  // 단락 - 기본 본문 스타일 p3 적용
+  p {
+    @include typo.p3;
+    margin: 1em 0;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // 링크
+  a {
+    color: color(link);
+    text-decoration: underline;
+    cursor: pointer;
+
+    &:hover {
+      color: color(link-hover);
+    }
+  }
+
+  // 목록 - podo-ui p3 스타일 적용
+  ul,
+  ol {
+    @include typo.p3;
+    margin: 1em 0 !important;
+    padding-left: 2em !important;
+    padding-top: 0 !important;
+    padding-right: 0 !important;
+    padding-bottom: 0 !important;
+
+    &:first-child {
+      margin-top: 0 !important;
+    }
+
+    &:last-child {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  ul {
+    list-style: disc !important;
+    list-style-type: disc !important;
+    list-style-position: outside !important;
+  }
+
+  ol {
+    list-style: decimal !important;
+    list-style-type: decimal !important;
+    list-style-position: outside !important;
+  }
+
+  li {
+    display: list-item !important;
+    margin: 0.5em 0 !important;
+    padding: 0 !important;
+    list-style: inherit !important;
+    list-style-position: outside !important;
+
+    // 중첩된 리스트
+    ul,
+    ol {
+      margin: 0.5em 0 !important;
+      padding-left: 1.5em !important;
+    }
+
+    ul {
+      list-style-type: circle !important;
+    }
+
+    ol {
+      list-style-type: lower-alpha !important;
+    }
+  }
+
+  // 이미지
+  img {
+    display: inline-block !important;
+    vertical-align: middle;
+    max-width: 100%;
+    height: auto;
+  }
+
+  // 인용
+  blockquote {
+    @include typo.p3;
+    margin: 1em 0;
+    padding-left: 1em;
+    border-left: 4px solid color(border);
+    color: color(text-sub);
+    font-style: italic;
+  }
+
+  // 유튜브 컨테이너 (editor에서 삽입된 스타일 유지)
+  :global(.youtube-container) {
+    position: relative;
+    display: inline-block;
+    max-width: 100%;
+
+    iframe {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
+    :global(.youtube-overlay) {
+      display: none; // view 모드에서는 오버레이 숨김
+    }
+  }
+}

package/react/atom/editor-view.tsx

@@ -0,0 +1,17 @@
+import styles from './editor-view.module.scss';
+
+interface Props {
+  value: string;
+  className?: string;
+}
+
+const EditorView = ({ value, className }: Props) => {
+  return (
+    <div
+      className={`${styles.editorView} ${className || ''}`}
+      dangerouslySetInnerHTML={{ __html: value }}
+    />
+  );
+};
+
+export default EditorView;

package/react/atom/editor.tsx

@@ -72,6 +72,15 @@ const Editor = ({
   const [isCodeView, setIsCodeView] = useState(false); // 코드보기 모드
   const [codeContent, setCodeContent] = useState(''); // 코드보기 내용
   const [savedEditorHeight, setSavedEditorHeight] = useState<number | null>(null); // 위지윅 에디터 높이 저장
+
+  // Undo/Redo 히스토리 관리
+  const [history, setHistory] = useState<string[]>([value]);
+  const [historyIndex, setHistoryIndex] = useState(0);
+  const historyTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const historyRef = useRef<string[]>([value]);
+  const historyIndexRef = useRef(0);
+  const isUndoRedoRef = useRef(false); // undo/redo 실행 중 플래그
+
   const editorRef = useRef<HTMLDivElement>(null);
   const codeEditorRef = useRef<HTMLTextAreaElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -227,6 +236,106 @@ const Editor = ({
     setCurrentParagraphStyle('p');
   };
 
+  // ref와 state 동기화
+  useEffect(() => {
+    historyRef.current = history;
+    historyIndexRef.current = historyIndex;
+  }, [history, historyIndex]);
+
+  // 히스토리에 추가 (디바운스 적용)
+  const addToHistory = useCallback((content: string) => {
+    // 기존 타이머 취소
+    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;
@@ -235,11 +344,150 @@ const Editor = ({
       validateHandler(content);
       detectCurrentParagraphStyle();
       detectCurrentAlign();
+
+      // 히스토리에 추가
+      addToHistory(content);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [onChange]);
+  }, [onChange, addToHistory]);
+
+  // 붙여넣기 이벤트 핸들러 - 지원하지 않는 스타일 제거
+  const handlePaste = useCallback((e: React.ClipboardEvent<HTMLDivElement>) => {
+    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: Element): Node | null => {
+        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 as Element);
+              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) as HTMLElement;
+
+        // 모든 속성 제거 후 필요한 것만 복원
+        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 as HTMLElement).style.setProperty(styleName, value);
+            }
+          });
+        }
+
+        // 자식 요소 처리
+        Array.from(element.childNodes).forEach(child => {
+          if (child.nodeType === Node.ELEMENT_NODE) {
+            const cleaned = cleanElement(child as Element);
+            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 as Element);
+          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: string, value: string | undefined = 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();
@@ -1929,6 +2177,18 @@ const Editor = ({
     };
   }, [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이 완전히 렌더링된 후 감지
@@ -1951,7 +2211,14 @@ const Editor = ({
             type="button"
             className={styles.toolbarButton}
             onClick={() => execCommand('undo')}
+            disabled={historyIndex <= 0}
             title="실행 취소"
+            style={{
+              opacity: historyIndex <= 0 ? 0.3 : 1,
+              backgroundColor: 'transparent',
+              border: 'none',
+              cursor: historyIndex <= 0 ? 'not-allowed' : 'pointer'
+            }}
           >
             <i className={styles.undo} />
           </button>
@@ -1959,7 +2226,14 @@ const Editor = ({
             type="button"
             className={styles.toolbarButton}
             onClick={() => execCommand('redo')}
+            disabled={historyIndex >= history.length - 1}
             title="다시 실행"
+            style={{
+              opacity: historyIndex >= history.length - 1 ? 0.3 : 1,
+              backgroundColor: 'transparent',
+              border: 'none',
+              cursor: historyIndex >= history.length - 1 ? 'not-allowed' : 'pointer'
+            }}
           >
             <i className={styles.redo} />
           </button>
@@ -2686,6 +2960,7 @@ const Editor = ({
             className={styles.editorContent}
             contentEditable
             onInput={handleInput}
+            onPaste={handlePaste}
             onClick={handleEditorClick}
             onKeyUp={() => {
               detectCurrentParagraphStyle();

package/react.ts

@@ -1,15 +1,17 @@
 import Input from './react/atom/input';
 import Textarea from './react/atom/textarea';
 import Editor from './react/atom/editor';
-import Pagination from './react/atom/pagination';
+import EditorView from './react/atom/editor-view';
+import Pagination from './react/molecule/pagination';
 import Field from './react/molecule/field';
 const Form = {
   Input,
   Textarea,
   Editor,
+  EditorView,
   Field,
 };
 
 export default Form;
 
-export { Input, Textarea, Editor, Pagination, Field };
+export { Input, Textarea, Editor, EditorView, Pagination, Field };