styles: 댓글다는 부분 scss 변경

Kakaotech-10 · Oct 25, 2024 · 967a449 · 967a449
1 parent f41fb96
commit 967a449
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -1,3 +1,4 @@
+//PostForm.jsx
 import { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import "./styles/PostForm.scss";