From d82b4f40ef0fe24b0fbc824c28d58fa7dd83cc9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=9A=B0=EC=84=B1?= <sitpo96@naver.com>
Date: Thu, 8 Feb 2024 00:40:19 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20Feat=20#133:=20=EB=8C=93=EA=B8=80=20?=
 =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=B3=B4=EC=9D=BC=20=EB=95=8C=20=EB=8C=93=EA=B8=80?=
 =?UTF-8?q?=20=EC=9E=85=EB=A0=A5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EB=9E=9C=EB=8D=94=EB=A7=81=20=EB=90=98=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Change-Id: I25ef17876ba0016799d4d4e3c74da84f1f3d4dd0
---
 .../BucketDetail/Comment/CommentInput.tsx     | 25 ++++++++--
 .../BucketDetail/Comment/CommentList.tsx      | 46 +++++++++++++++++--
 .../src/pages/Bucket/BucketDetail/index.tsx   |  7 ++-
 3 files changed, 68 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/Bucket/BucketDetail/Comment/CommentInput.tsx b/frontend/src/pages/Bucket/BucketDetail/Comment/CommentInput.tsx
index f57a5f08..a2f40c96 100644
--- a/frontend/src/pages/Bucket/BucketDetail/Comment/CommentInput.tsx
+++ b/frontend/src/pages/Bucket/BucketDetail/Comment/CommentInput.tsx
@@ -1,20 +1,37 @@
-import { ChangeEvent, useState } from 'react'
+import { ChangeEvent, useRef } from 'react'
+import { useCommentStore } from '../../../../store/detailStore'
+
+interface ICommentInput {
+	setIsInputFocused: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+// Todo: Pwa 환경에서 해당 컴포넌트가 언마운트 될때 키보드가 내려가는지 확인 필요
+const CommentInput = ({ setIsInputFocused }: ICommentInput) => {
+	const { commentText, setCommentText } = useCommentStore()
+	const inputRef = useRef<HTMLInputElement>(null)
 
-const CommentInput = () => {
-	const [commentText, setCommentText] = useState('')
 	const handleCommentChange = (event: ChangeEvent<HTMLInputElement>) => {
 		const text = event.currentTarget.value
 		setCommentText(text)
 	}
+	const handleFocusInput = () => {
+		setIsInputFocused(true)
+	}
+	const handleBlurInput = () => {
+		setIsInputFocused(false)
+	}
 
 	return (
-		<div className="fixed bottom-0 flex w-full px-6 py-3 bg-white border-t-[1px] border-gray">
+		<div className="comment-input fixed bottom-0 flex w-full px-6 py-3 bg-white border-t-[1px] border-gray">
 			<img src="/public/defaultProfile.svg" />
 			<input
+				ref={inputRef}
 				type="text"
 				placeholder="댓글 입력하기..."
 				value={commentText}
 				onChange={handleCommentChange}
+				onFocus={handleFocusInput}
+				onBlur={handleBlurInput}
 				className="px-3 grow focus:outline-none"
 			/>
 			<button type="button" className={`${commentText ? 'text-point1' : 'text-gray'}`}>
diff --git a/frontend/src/pages/Bucket/BucketDetail/Comment/CommentList.tsx b/frontend/src/pages/Bucket/BucketDetail/Comment/CommentList.tsx
index a2164b05..a77a58cd 100644
--- a/frontend/src/pages/Bucket/BucketDetail/Comment/CommentList.tsx
+++ b/frontend/src/pages/Bucket/BucketDetail/Comment/CommentList.tsx
@@ -1,5 +1,7 @@
 import Comment from './Comment'
 import { ICommentItem } from '../../../../interfaces'
+import { useEffect, useRef } from 'react'
+import { useCommentStore } from '../../../../store/detailStore'
 
 const commentInfo = {
 	totalPages: 0,
@@ -87,13 +89,49 @@ const commentInfo = {
 	last: true,
 	empty: true,
 }
+interface ICommentListProps {
+	isInputFocused: boolean
+	setIsInputShown: React.Dispatch<React.SetStateAction<boolean>>
+}
 
 // Todo : Api 데이터 타입 지정 후 as 삭제 예정
-const CommentList = () => {
+const CommentList = ({ isInputFocused, setIsInputShown }: ICommentListProps) => {
+	const { commentText } = useCommentStore()
+	const targetRef = useRef<HTMLUListElement>(null)
+
+	// 전역 이벤트 핸들러에서 closure 때문에 최신 state 값을 못 가져오는 문제 해결을 위한 useEffect
+	useEffect(() => {
+		window.addEventListener('scroll', checkTargetIsShown)
+		checkTargetIsShown() // 초기 로드 시에도 위치 확인
+
+		return () => {
+			window.removeEventListener('scroll', checkTargetIsShown)
+		}
+	}, [commentText, isInputFocused])
+
+	const checkTargetIsShown = () => {
+		if (targetRef.current) {
+			const targetLocationInfo = targetRef.current.getBoundingClientRect()
+			const isVisible = targetLocationInfo.top < window.innerHeight
+
+			// 타겟이 보일 때 -> 항상 input이 보이도록 설정
+			if (isVisible === true) {
+				setIsInputShown(true)
+				return
+			}
+			if (isVisible === false && commentText.length === 0 && !isInputFocused) {
+				setIsInputShown(false)
+				return
+			}
+		}
+	}
+
 	return (
-		<ul>
-			{commentInfo.content.map((comment) => (
-				<Comment commentInfo={comment as ICommentItem} />
+		<ul ref={targetRef}>
+			{commentInfo.content.map((comment, index) => (
+				<li key={index}>
+					<Comment commentInfo={comment as ICommentItem} />
+				</li>
 			))}
 		</ul>
 	)
diff --git a/frontend/src/pages/Bucket/BucketDetail/index.tsx b/frontend/src/pages/Bucket/BucketDetail/index.tsx
index f58cd79e..4abac247 100644
--- a/frontend/src/pages/Bucket/BucketDetail/index.tsx
+++ b/frontend/src/pages/Bucket/BucketDetail/index.tsx
@@ -13,6 +13,7 @@ import { useParams } from 'react-router-dom'
 import Reaction from './Reaction'
 import CommentList from './Comment/CommentList'
 import CommentInput from './Comment/CommentInput'
+import { useState } from 'react'
 
 const userInfo: UserInfoType = {
 	userId: 1,
@@ -49,6 +50,8 @@ const bucketInfo: IBucketInfo = {
 }
 
 const BucketDetail = () => {
+	const [isInputShown, setIsInputShown] = useState(false)
+	const [isInputFocused, setIsInputFocused] = useState(false)
 	const { goBack } = useRouter()
 	const { bucketId } = useParams()
 
@@ -97,9 +100,9 @@ const BucketDetail = () => {
 						: bucketId && <WriteReviewButton id={bucketId} />}
 				</div>
 				<Reaction />
-				<CommentList />
+				<CommentList isInputFocused={isInputFocused} setIsInputShown={setIsInputShown} />
 			</WithHeaderLayout>
-			<CommentInput />
+			{isInputShown && <CommentInput setIsInputFocused={setIsInputFocused} />}
 		</>
 	)
 }