From 1985a6fd0a36b041e326e418a438146c161b5774 Mon Sep 17 00:00:00 2001
From: ayoooyh <127219927+ayoooyh@users.noreply.github.com>
Date: Mon, 26 Aug 2024 12:24:46 +0900
Subject: [PATCH] =?UTF-8?q?addForm=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/AddBoard/AddForm.module.css        |  6 ++--
 components/AddBoard/AddForm.tsx               | 34 ++++++++++++++++---
 components/Board/ArticleList.module.css       |  1 -
 .../Boards/BestArticleSection.module.css      |  4 +--
 4 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/components/AddBoard/AddForm.module.css b/components/AddBoard/AddForm.module.css
index cf77e4c68..2a9b037dd 100644
--- a/components/AddBoard/AddForm.module.css
+++ b/components/AddBoard/AddForm.module.css
@@ -33,8 +33,10 @@
 }
 
 .writeForm {
-  display: grid;
-  gap: 12px;
+  /* display: grid; */
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
 .titleInput {
diff --git a/components/AddBoard/AddForm.tsx b/components/AddBoard/AddForm.tsx
index 669e52bd2..0c8b32ad8 100644
--- a/components/AddBoard/AddForm.tsx
+++ b/components/AddBoard/AddForm.tsx
@@ -1,18 +1,44 @@
+import { FormEvent, useState } from "react";
+
 import styles from "@/components/AddBoard/AddForm.module.css";
 import PlusIcon from "assets/images/icons/ic_plus.svg";
+import { Form } from "react-router-dom";
 
 export default function AddForm() {
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+
+  const isSubmitDisabled = !title.trim() || !content.trim();
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+  };
   return (
     <div className={styles.headerContainer}>
       <div className={styles.addFormHeader}>
         <span className={styles.articleWrite}>게시글 쓰기</span>
         <button className={styles.enrollment}>등록</button>
       </div>
-      <div className={styles.writeForm}>
+      <Form className={styles.writeForm} onSubmit={handleSubmit}>
         <span className={styles.titleFont}>*제목</span>
-        <div className={styles.titleInput}> 제목을 입력해주세요</div>
+        <div
+          className={styles.titleInput}
+          id="title"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+        >
+          제목을 입력해주세요
+        </div>
         <span className={styles.titleFont}>*내용</span>
-        <div className={styles.contentInput}> 내용을 입력해주세요</div>
+        <div
+          className={styles.contentInput}
+          id="content"
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          isTextArea
+        >
+          내용을 입력해주세요
+        </div>
         <span className={styles.titleFont}>이미지</span>
 
         <div className={styles.addImage}>
@@ -21,7 +47,7 @@ export default function AddForm() {
             이미지 등록
           </div>
         </div>
-      </div>
+      </Form>
     </div>
   );
 }
diff --git a/components/Board/ArticleList.module.css b/components/Board/ArticleList.module.css
index 571aba81d..678bd7213 100644
--- a/components/Board/ArticleList.module.css
+++ b/components/Board/ArticleList.module.css
@@ -2,7 +2,6 @@
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   list-style: none;
-  padding: 0;
   gap: 24px;
 }
 
diff --git a/components/Boards/BestArticleSection.module.css b/components/Boards/BestArticleSection.module.css
index 1e1ebf5c0..79353c492 100644
--- a/components/Boards/BestArticleSection.module.css
+++ b/components/Boards/BestArticleSection.module.css
@@ -20,8 +20,8 @@
 .bestArticleCardContainer {
   display: flex;
   flex-direction: column;
-  /* width: 384px;
-  height: 169px; */
+  width: 384px;
+  height: 169px;
 
   padding: 0px 24px 16px 24px;
   /* gap: 10px; */