fix: 댓글 등록 버튼 활성화

src/pages/ItemDetailPage/components/CommentSection.jsx

@@ -1,30 +1,47 @@
-import { useEffect, useState } from 'react'
-import { getItemComments } from '../../../api'
-import Comment from './Comment'
-import styles from '../styles/CommentSection.module.css'
+import { useEffect, useState } from "react";
+import { getItemComments } from "../../../api";
+import Comment from "./Comment";
+import styles from "../styles/CommentSection.module.css";
 
 function CommentSection({ productId }) {
-  const limit = 3
-  const [commentList, setCommentList] = useState(null)
+  const limit = 3;
+  const [comment, setComment] = useState("");
+  const [commentList, setCommentList] = useState(null);
+
+  const handleInputChange = (e) => {
+    setComment(e.target.value);
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    alert("submit~!");
+  };
 
   useEffect(() => {
     async function fetchComments() {
-      const data = await getItemComments({ productId, limit })
-      setCommentList(data.list)
+      const data = await getItemComments({ productId, limit });
+      setCommentList(data.list);
     }
 
-    fetchComments()
-  }, [productId])
+    fetchComments();
+  }, [productId]);
 
   return (
     <>
       <div className={styles.inputSection}>
         <p className={styles.sectionTitle}>문의하기</p>
-        <input
+        <textarea
           className={styles.input}
+          value={comment}
+          onChange={handleInputChange}
           placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
         />
-        <button className={styles.button} type="submit">
+        <button
+          className={styles.button}
+          type="submit"
+          onClick={handleSubmit}
+          disabled={!comment}
+        >
           등록
         </button>
       </div>
@@ -34,7 +51,7 @@ function CommentSection({ productId }) {
         ))}
       </div>
     </>
-  )
+  );
 }
 
-export default CommentSection
+export default CommentSection;

src/pages/ItemDetailPage/styles/CommentSection.module.css

@@ -41,7 +41,11 @@
   padding: 12px 23px;
   border-radius: 8px;
   opacity: 0px;
-  background-color: #9ca3af;
+  background-color: #3692ff;
   color: #ffffff;
   border: none;
 }
+
+.button:disabled {
+  background-color: #9ca3af;
+}