From 967a449029a371647b105b030869bad1f3b042fa Mon Sep 17 00:00:00 2001
From: parkseyoung <hellosy76@naver.com>
Date: Fri, 25 Oct 2024 10:42:29 +0900
Subject: [PATCH] =?UTF-8?q?styles:=20=EB=8C=93=EA=B8=80=EB=8B=A4=EB=8A=94?=
 =?UTF-8?q?=20=EB=B6=80=EB=B6=84=20scss=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/Comment.jsx              |  2 +-
 src/component/CommentInput.jsx         |  8 ++---
 src/component/styles/CommentInput.scss | 45 ++++++++++++++++++++++++++
 src/containers/PostForm.jsx            |  1 +
 4 files changed, 51 insertions(+), 5 deletions(-)
 create mode 100644 src/component/styles/CommentInput.scss

diff --git a/src/component/Comment.jsx b/src/component/Comment.jsx
index 60a122b..c3d2ff2 100644
--- a/src/component/Comment.jsx
+++ b/src/component/Comment.jsx
@@ -230,7 +230,7 @@ const Comment = ({
           parentId={comment.id}
           postId={postId} // 명시적으로 postId 전달
           currentUserId={currentUserId} // 명시적으로 currentUserId 전달
-          depth={depth}
+          depth={depth + 1}
         />
       )}
 
diff --git a/src/component/CommentInput.jsx b/src/component/CommentInput.jsx
index 7f8ae34..e38528c 100644
--- a/src/component/CommentInput.jsx
+++ b/src/component/CommentInput.jsx
@@ -1,5 +1,6 @@
 import PropTypes from "prop-types";
 import { useState } from "react";
+import "./styles/CommentInput.scss";
 
 const CommentInput = ({
   onSubmit,
@@ -17,16 +18,15 @@ const CommentInput = ({
     if (!content.trim() || isSubmitting) return;
 
     try {
-      // 모든 필요한 파라미터를 명시적으로 전달
       await onSubmit(postId, currentUserId, content.trim(), parentId, depth);
-      setContent(""); // 입력 성공 시 초기화
+      setContent("");
     } catch (error) {
       console.error("댓글 작성 실패:", error);
     }
   };
 
   return (
-    <form className="comment-input-container" onSubmit={handleSubmit}>
+    <form className="comment-input-form" onSubmit={handleSubmit}>
       <input
         type="text"
         value={content}
@@ -37,7 +37,7 @@ const CommentInput = ({
       />
       <button
         type="submit"
-        className="send-button"
+        className="comment-submit-button"
         disabled={isSubmitting || !content.trim()}
       >
         {isSubmitting ? "..." : "SEND"}
diff --git a/src/component/styles/CommentInput.scss b/src/component/styles/CommentInput.scss
new file mode 100644
index 0000000..4d849ea
--- /dev/null
+++ b/src/component/styles/CommentInput.scss
@@ -0,0 +1,45 @@
+.comment-input-form {
+  display: flex;
+  width: 100%;
+  gap: 8px;
+  align-items: center;
+
+  .comment-input {
+    flex: 1;
+    padding: 8px 16px;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    font-size: 14px;
+
+    &:focus {
+      outline: none;
+      border-color: #3b82f6;
+      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+    }
+
+    &:disabled {
+      background-color: #f1f5f9;
+      cursor: not-allowed;
+    }
+  }
+
+  .comment-submit-button {
+    padding: 8px 16px;
+    background-color: #3d3d3d;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    transition: background-color 0.2s;
+
+    &:hover:not(:disabled) {
+      background-color: #2563eb;
+    }
+
+    &:disabled {
+      background-color: #cbd5e1;
+      cursor: not-allowed;
+    }
+  }
+}
diff --git a/src/containers/PostForm.jsx b/src/containers/PostForm.jsx
index aa64821..2fe7267 100644
--- a/src/containers/PostForm.jsx
+++ b/src/containers/PostForm.jsx
@@ -1,3 +1,4 @@
+//PostForm.jsx
 import { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import "./styles/PostForm.scss";