podo-ui 0.2.1 → 0.3.1

package/global.scss

@@ -57,3 +57,4 @@
 @forward './scss/molecule/table.scss';
 @forward './scss/molecule/pagination.scss';
 @forward './scss/molecule/toast.scss';
+

package/next.ts

@@ -3,9 +3,10 @@ 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 });
-import EditorView from './react/atom/editor-view';
 
 const Form = {
   Input,
@@ -17,4 +18,4 @@ const Form = {
 
 export default Form;
 
-export { Input, Textarea, Editor, EditorView, Field };
+export { Input, Textarea, Editor, EditorView, Pagination, Field };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "podo-ui",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "type": "module",
   "author": "hada0127 <work@tarucy.net>",
   "license": "MIT",
@@ -27,7 +27,6 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "sass": "^1.83.0",
-    "suneditor": "^2.47.1",
     "uuid": "^11.0.3",
     "zod": "^3.23.8"
   },

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

@@ -1,10 +1,15 @@
-import 'suneditor/dist/css/suneditor.min.css';
+import styles from './editor-view.module.scss';
 
-const EditorView = ({ content }: { content: string }) => {
+interface Props {
+  value: string;
+  className?: string;
+}
+
+const EditorView = ({ value, className }: Props) => {
   return (
     <div
-      className="context sun-editor-editable"
-      dangerouslySetInnerHTML={{ __html: content }}
+      className={`${styles.editorView} ${className || ''}`}
+      dangerouslySetInnerHTML={{ __html: value }}
     />
   );
 };