[이도엽] Sprint 10

next-sprint/components/ProductDetail/ProductCommentAdd.js

@@ -1,3 +1,46 @@
+import styles from './ProductCommentAdd.module.css';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+
 export default function ProductCommentAdd() {
-  return;
+  const [content, setContent] = useState('');
+
+  const router = useRouter();
+  const productId = router.query['id'];
+
+  const isInputEmpty = () => {
+    return content.trim() !== '';
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!isInputEmpty()) {
+      return;
+    }
+
+    try {
+      await createProductComment(productId, { content });
+      window.location.reload();
+    } catch (err) {
+      console.error('댓글 등록에 실패하였습니다.');
+    }
+  };
+  return (
+    <div>
+      <form className={styles.comment} onSubmit={handleSubmit}>
+        <label htmlFor="content">문의하기</label>
+        <textarea
+          type="text"
+          id="content"
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
+        />
+        <button type="submit" disabled={!isInputEmpty()}>
+          등록
+        </button>
+      </form>
+    </div>
+  );
 }

next-sprint/components/ProductDetail/ProductCommentAdd.module.css

@@ -0,0 +1,59 @@
+.comment {
+  display: flex;
+  flex-direction: column;
+
+  gap: 1.6rem;
+}
+
+.comment label {
+  color: #111827;
+  font-size: 1.6rem;
+  font-weight: 600;
+  line-height: 2.6rem;
+}
+
+.comment textarea {
+  width: 100%;
+  height: 10.4rem;
+
+  padding: 1.6rem 2.4rem;
+  border: none;
+  border-radius: 1.2rem;
+
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: 2.6rem;
+
+  background-color: #f3f4f6;
+}
+
+.comment textarea:focus {
+  outline: none;
+}
+
+.comment textarea::placeholder {
+  color: #9ca3af;
+}
+
+.comment button {
+  display: flex;
+  align-items: center;
+
+  height: 4.2rem;
+
+  margin-left: auto;
+  padding: 1.2rem 2.3rem;
+  border-radius: 0.8rem;
+
+  color: #f3f4f6;
+  font-size: 1.6rem;
+  font-weight: 600;
+  line-height: 2.6rem;
+
+  background-color: #3692ff;
+  border: none;
+}
+
+.comment button:disabled {
+  background-color: #9ca3af;
+}

next-sprint/components/ProductDetail/ProductDetail.js

@@ -24,10 +24,10 @@ export default function ProductDetail({ id }) {
   const handleFavoriteClick = async () => {
     try {
       if (isFavorited) {
-        await deleteProductFavorite(productId);
+        await deleteProductFavorite(id);
         setFavoriteCount(favoriteCount - 1);
       } else {
-        await createProductFavorite(productId);
+        await createProductFavorite(id);
         setFavoriteCount(favoriteCount + 1);
       }
       setIsFavorited(!isFavorited);

next-sprint/components/ProductDetail/ProductDetail.module.css

@@ -1,15 +1,15 @@
 .wrapper {
   display: flex;
   flex-direction: column;
-
+  align-items: center;
   gap: 6.4rem;
   margin-top: 2rem;
 }
 
 .product-comments {
   display: flex;
   flex-direction: column;
-
+  width: 120rem;
   gap: 4rem;
 }