From b40f01f0b0f0115a3c3019038ec57556a454e754 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=9A=B0=EC=84=B1?= <sitpo96@naver.com>
Date: Wed, 7 Feb 2024 21:24:56 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20Feat=20#133:=20=EB=8C=93=EA=B8=80=20?=
 =?UTF-8?q?=EC=9E=85=EB=A0=A5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EA=B0=9C=EB=B0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Change-Id: I4d1a03063907920d80c30f48c907f0b70b6e206e
---
 .../BucketDetail/Comment/CommentInput.tsx     | 27 +++++++++++++++++++
 .../src/pages/Bucket/BucketDetail/index.tsx   |  2 ++
 frontend/tailwind.config.js                   |  1 +
 3 files changed, 30 insertions(+)
 create mode 100644 frontend/src/pages/Bucket/BucketDetail/Comment/CommentInput.tsx

diff --git a/frontend/src/pages/Bucket/BucketDetail/Comment/CommentInput.tsx b/frontend/src/pages/Bucket/BucketDetail/Comment/CommentInput.tsx
new file mode 100644
index 00000000..f57a5f08
--- /dev/null
+++ b/frontend/src/pages/Bucket/BucketDetail/Comment/CommentInput.tsx
@@ -0,0 +1,27 @@
+import { ChangeEvent, useState } from 'react'
+
+const CommentInput = () => {
+	const [commentText, setCommentText] = useState('')
+	const handleCommentChange = (event: ChangeEvent<HTMLInputElement>) => {
+		const text = event.currentTarget.value
+		setCommentText(text)
+	}
+
+	return (
+		<div className="fixed bottom-0 flex w-full px-6 py-3 bg-white border-t-[1px] border-gray">
+			<img src="/public/defaultProfile.svg" />
+			<input
+				type="text"
+				placeholder="댓글 입력하기..."
+				value={commentText}
+				onChange={handleCommentChange}
+				className="px-3 grow focus:outline-none"
+			/>
+			<button type="button" className={`${commentText ? 'text-point1' : 'text-gray'}`}>
+				등록
+			</button>
+		</div>
+	)
+}
+
+export default CommentInput
diff --git a/frontend/src/pages/Bucket/BucketDetail/index.tsx b/frontend/src/pages/Bucket/BucketDetail/index.tsx
index fc9bf6a3..f58cd79e 100644
--- a/frontend/src/pages/Bucket/BucketDetail/index.tsx
+++ b/frontend/src/pages/Bucket/BucketDetail/index.tsx
@@ -12,6 +12,7 @@ import WriteReviewButton from './WriteReviewButton'
 import { useParams } from 'react-router-dom'
 import Reaction from './Reaction'
 import CommentList from './Comment/CommentList'
+import CommentInput from './Comment/CommentInput'
 
 const userInfo: UserInfoType = {
 	userId: 1,
@@ -98,6 +99,7 @@ const BucketDetail = () => {
 				<Reaction />
 				<CommentList />
 			</WithHeaderLayout>
+			<CommentInput />
 		</>
 	)
 }
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 0593545f..1e9c4028 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -5,6 +5,7 @@ const colorPalette = {
 	point1: '#454645',
 	unActive: '#D9D9D9',
 	lightGray: '#F6F6F6',
+	gray: '#c4c4c4',
 	subText: '#ACADAD',
 	inputBg: '#F8F8F8',
 	disabled: '#737373',