From b1ab9685a9b2b5a4795555a59db9a2f932222f39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=EA=B8=B0=EC=98=81?= <wjdrldud98@gmail.com>
Date: Thu, 18 Jul 2024 14:03:16 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20CreateArticle=20=EA=B8=80=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1,=20=EC=A3=BC=EC=A0=9C=EB=B0=8F=20=EC=A0=9C=EB=AA=A9?=
 =?UTF-8?q?=20=EB=B0=9B=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Article/CreateArticle/CreateArticle.jsx   | 80 ++++++++++++-------
 1 file changed, 53 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/Article/CreateArticle/CreateArticle.jsx b/frontend/src/components/Article/CreateArticle/CreateArticle.jsx
index db4a5b0..10100bb 100644
--- a/frontend/src/components/Article/CreateArticle/CreateArticle.jsx
+++ b/frontend/src/components/Article/CreateArticle/CreateArticle.jsx
@@ -1,43 +1,69 @@
-import { Link } from 'react-router-dom';
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
 import styles from './CreateArticle.module.css';
 
-export default function CreateArticle() {
+export default function CreateArticle({ topic, title, backPath = '/' }) {
+  const navigate = useNavigate();
+
+  const [articleTitle, setArticleTitle] = useState('');
+  const [content, setContent] = useState('');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // TODO: 글 작성 기능 연결
+    if (articleTitle && content) {
+      navigate(backPath);
+    }
+  };
   // TODO: 입력 크기에 따라 반응형으로 textarea 크기 변경
+
   return (
     <div className={styles.createArticle}>
-      <header className={styles.header}>
+      <header>
         <div>
           <Link
-            to={'/'}
+            to={backPath}
             className={styles.backButton}
           >
             <div>-</div>
-            <div className={styles.backText}>Q&A</div>
+            <div className={styles.backText}>{title}</div>
           </Link>
         </div>
-        <div className={styles.title}>질문하기</div>
+        <div className={styles.title}>{topic}</div>
       </header>
-      <div className={styles.formWrapper}>
-        <form>
-          <div className={styles.fieldWrapper}>
-            <label className={styles.label}>제목</label>
-            <input
-              type="text"
-              className={styles.titleInput}
-            />
-          </div>
-          <div className={styles.fieldWrapper}>
-            <label className={styles.label}>내용</label>
-            <textarea className={styles.contentInput}></textarea>
-          </div>
-          <div className={styles.buttonWrapper}>
-            <button className={styles.button}>
-              <div>| i |</div>
-              <div className={styles.buttonText}>글 쓰기</div>
-            </button>
-          </div>
-        </form>
-      </div>
+      <form
+        className={styles.formWrapper}
+        onSubmit={handleSubmit}
+      >
+        <div className={styles.fieldWrapper}>
+          <label className={styles.label}>제목</label>
+          <input
+            type="text"
+            className={styles.titleInput}
+            placeholder="제목을 입력하세요"
+            value={articleTitle}
+            onChange={(e) => setArticleTitle(e.target.value)}
+          />
+        </div>
+        <div className={styles.fieldWrapper}>
+          <label className={styles.label}>내용</label>
+          <textarea
+            className={styles.contentInput}
+            placeholder="내용을 입력하세요"
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+          ></textarea>
+        </div>
+        <button
+          type="button"
+          className={styles.button}
+          onClick={handleSubmit}
+          disabled={!articleTitle || !content}
+        >
+          <div>| i |</div>
+          <div>글 쓰기</div>
+        </button>
+      </form>
     </div>
   );
 }