[FE] Feat #133: 댓글 입력 컴포넌트 개발

Change-Id: I4d1a03063907920d80c30f48c907f0b70b6e206e

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

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 />
 		</>
 	)
 }

frontend/tailwind.config.js

@@ -5,6 +5,7 @@ const colorPalette = {
 	point1: '#454645',
 	unActive: '#D9D9D9',
 	lightGray: '#F6F6F6',
+	gray: '#c4c4c4',
 	subText: '#ACADAD',
 	inputBg: '#F8F8F8',
 	disabled: '#737373',