Feature/#41 회원가입 페이지

components/Input.tsx

@@ -11,6 +11,7 @@ interface InputFieldProps {
   label?: string;
   compareValue?: string;
   layout?: 'vertical' | 'horizontal';
+  onValidation?: (isValid: boolean) => void;
 }
 
 function InputField({
@@ -21,6 +22,7 @@ function InputField({
   label,
   compareValue,
   layout = 'vertical',
+  onValidation,
 }: InputFieldProps) {
   const { errorMessage, validate } = useValidation({
     type,
@@ -40,17 +42,20 @@ function InputField({
   };
 
   const handleBlur = () => {
-    if (layout === 'vertical')
-      // 가로모드 에러 확인 비활성화
-      validate(value);
+    if (layout === 'vertical') {
+      const error = validate(value);
+      onValidation?.(!error && value.length > 0);
+    }
   };
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     onChange(e);
     if (layout === 'vertical' && errorMessage) {
-      validate(e.target.value);
+      const error = validate(e.target.value);
+      onValidation?.(!error && e.target.value.length > 0);
     }
   };
+
   const getInputType = () => {
     if (type === 'name') {
       return 'text';
@@ -59,6 +64,7 @@ function InputField({
     }
     return type;
   };
+
   //스타일에 따른 클래스
   const variantClass = {
     containerVertical: 'mb-[24px] flex flex-col gap-[10px]',
@@ -71,6 +77,7 @@ function InputField({
       'bg-gray-100 focus:border-green-200 focus:ring-1 focus:ring-green-200',
     errorText: 'text-12 text-red-100',
   };
+
   const labelClass =
     layout === 'horizontal'
       ? variantClass.labelHorizontal

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

@@ -13,10 +13,13 @@
     "@next/eslint-plugin-next": "^15.1.0",
     "@tanstack/react-query": "^5.62.7",
     "axios": "^1.7.9",
+    "date-fns": "^4.1.0",
     "next": "^15.1.0",
     "postcss-nesting": "^13.0.1",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-day-picker": "^9.4.4",
+    "react-dom": "^19.0.0",
+    "react-quill-new": "^3.3.3"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.2.0",