Feature/#29 텍스트 에디터 - quill 추가

components/TextEditor.tsx

@@ -0,0 +1,49 @@
+import dynamic from 'next/dynamic';
+
+import 'react-quill-new/dist/quill.snow.css';
+
+// ref: https://www.npmjs.com/package/react-quill-new
+const QuillEditor = dynamic(() => import('react-quill-new'), {
+  ssr: false,
+  loading: () => <p>편집기 불러오는 중...</p>,
+});
+
+interface Props {
+  value?: string;
+  onChange: (value: string) => void;
+}
+
+/**
+ * 텍스트 에디터 컴포넌트
+ * @param {object} props
+ * @param {string} props.value - 초기 값
+ * @param {function} props.onChange - 값 변경시 콜백 함수
+ */
+export default function TextEditor({ value = '', onChange }: Props) {
+  const modules = {
+    toolbar: {
+      container: [
+        [{ header: [1, 2, 3, false] }],
+        ['bold', 'italic', 'underline'],
+        [{ align: null }, { align: 'center' }, { align: 'right' }],
+        [{ list: 'ordered' }, { list: 'bullet' }],
+        ['blockquote', 'link', 'image'],
+      ],
+    },
+  };
+
+  const handleChange = (value: string) => {
+    onChange(value);
+  };
+
+  return (
+    <QuillEditor
+      theme="snow"
+      value={value}
+      onChange={handleChange}
+      modules={modules}
+      placeholder="본문을 입력해 주세요."
+      className="quill-custom"
+    />
+  );
+}

package.json

@@ -16,7 +16,8 @@
     "next": "^15.1.0",
     "postcss-nesting": "^13.0.1",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-quill-new": "^3.3.3"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.2.0",

pages/test/editor.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+
+import TextEditor from '@/components/TextEditor';
+
+const cellStyle = 'px-4 py-2';
+const trStyle = 'border-b';
+
+export default function Editor() {
+  const [value, setValue] = useState('');
+
+  const handleChange = (v: string) => {
+    // console.log('value', v);
+    setValue(v);
+  };
+
+  return (
+    <div className="flex table-fixed items-center justify-center">
+      <table className="w-[1000px]">
+        <thead>
+          <tr className={trStyle}>
+            <th scope="col" className={cellStyle}>
+              props
+            </th>
+            <th scope="col" className={cellStyle}>
+              example
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr className={trStyle}>
+            <td className={cellStyle}>
+              <ul>
+                <li>value: string</li>
+                <li>onChange: (value: string) =&gt; void</li>
+              </ul>
+            </td>
+            <td className={cellStyle}>
+              <div className="h-[300px] w-[600px]">
+                <TextEditor value={value} onChange={handleChange} />
+              </div>
+              <hr className="my-4" />
+              <p className="font-bold">
+                참고: 에디터의 크기는 에디터 부모의 100%가 적용되니 부모의
+                크기를 정의하시면 됩니다.
+              </p>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}

styles/globals.css

@@ -51,3 +51,36 @@ body {
   color: var(--gray-500);
   background: var(--background);
 }
+
+/* quill editor custom style */
+.quill-custom {
+  @apply grid h-full w-full;
+  grid-template-rows: 1fr max-content;
+
+  .ql-editor {
+    @apply p-0;
+  }
+  .ql-editor.ql-blank::before {
+    @apply left-0 not-italic text-gray-400;
+  }
+  .ql-container {
+    @apply overflow-y-auto font-sans text-16;
+  }
+  .ql-container.ql-snow {
+    @apply border-0;
+  }
+  .ql-toolbar.ql-snow {
+    @apply order-last rounded-full border-gray-200 text-gray-400;
+  }
+  .ql-snow .ql-stroke {
+    stroke: var(--gray-400);
+  }
+  .ql-snow .ql-fill,
+  .ql-snow .ql-stroke.ql-fill {
+    fill: var(--gray-400);
+  }
+  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
+  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
+    color: var(--gray-400);
+  }
+}