addForm 수정

components/AddBoard/AddForm.module.css

@@ -33,8 +33,10 @@
 }
 
 .writeForm {
-  display: grid;
-  gap: 12px;
+  /* display: grid; */
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
 .titleInput {

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>
   );
 }

components/Board/ArticleList.module.css

@@ -2,7 +2,6 @@
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   list-style: none;
-  padding: 0;
   gap: 24px;
 }
 

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; */