✨ feat: (FE) - 같은 시점의 첫 번째 box만 시간 표현

Author: seyoung8239

frontend/src/components/EditableFeedbackBox/EditableFeedbackBox.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 
 import useCrudFeedback from '@hooks/useCrudFeedback';
-import { feedbackState, isFbClickedState, isFbSyncState } from '@store/feedback.store';
+import { isFbClickedState, isFbSyncState } from '@store/feedback.store';
 import { currentVideoTimeState } from '@store/currentVideoTime.store';
 
 import { ReactComponent as DeleteIcon } from '@assets/icon/delete.svg';
@@ -15,26 +15,27 @@ import {
 	fbStartTimeStyle,
 } from './EditableFeedbackBox.style';
 import { iconSmStyle } from '@styles/commonStyle';
+import { FeedbackItemType } from '@customType/feedback';
 
 interface PropsType {
-	feedbackId: string;
+	feedback: FeedbackItemType;
+	//TODO ref type any
 	feedbackRef: React.MutableRefObject<any[]>;
 	index: number;
 }
-const EditableFeedbackBox = ({ feedbackId, feedbackRef, index }: PropsType) => {
+const EditableFeedbackBox = ({ feedback, feedbackRef, index }: PropsType) => {
 	const textareaRef = useRef<HTMLTextAreaElement>(null);
-	const feedback = useRecoilValue(feedbackState(feedbackId));
 	const isFbSync = useRecoilValue(isFbSyncState);
 	const setIsFbClicked = useSetRecoilState(isFbClickedState);
 	const setCurrentVideoTime = useSetRecoilState(currentVideoTimeState);
 	const { handleStartEditFeedback, handleEndEditFeedback, handleFbChange, handleDeleteFeedback } =
-		useCrudFeedback(feedbackId);
+		useCrudFeedback(feedback.id);
 
 	useEffect(() => {
 		feedbackRef.current[index].style.height = textareaRef.current.scrollHeight + 'px';
 	});
 
-	const { startTime, innerIndex, content, readOnly } = feedback;
+	const { startTime, isFirst, content, readOnly } = feedback;
 
 	const handleClickFeedback = () => {
 		if (!isFbSync) return;
@@ -44,8 +45,9 @@ const EditableFeedbackBox = ({ feedbackId, feedbackRef, index }: PropsType) => {
 
 	return (
 		<div ref={(el) => (feedbackRef.current[index] = el)} css={feedbackBoxStyle}>
-			{/* TODO: find first innerIndex */}
-			<div css={fbStartTimeStyle}>{startTime}</div>
+			<div css={fbStartTimeStyle} style={{ visibility: isFirst ? 'visible' : 'hidden' }}>
+				{startTime}
+			</div>
 			<textarea
 				ref={textareaRef}
 				value={content}

frontend/src/components/FeedbackArea/FeedbackArea.tsx

@@ -2,14 +2,14 @@ import React, { useEffect, useRef } from 'react';
 import FeedbackForm from '@components/FeedbackForm/FeedbackForm';
 import EditableFeedbackBox from '@components/EditableFeedbackBox/EditableFeedbackBox';
 import { useRecoilValue } from 'recoil';
-import { feedbackIdsState, isFbSyncState } from '@store/feedback.store';
+import { feedbackListSelector, isFbSyncState } from '@store/feedback.store';
 import { focusIndexSelector } from '@store/currentVideoTime.store';
 
 import { feedbackAreaStyle, feedbackListStyle } from './FeedbackArea.style';
 
 const FeedbackArea = () => {
 	const feedbackRef = useRef([]);
-	const feedbackIds = useRecoilValue(feedbackIdsState);
+	const feedbackList = useRecoilValue(feedbackListSelector);
 	const focusIndex = useRecoilValue(focusIndexSelector);
 	const isFbSync = useRecoilValue(isFbSyncState);
 
@@ -24,10 +24,10 @@ const FeedbackArea = () => {
 	return (
 		<div css={feedbackAreaStyle}>
 			<div css={feedbackListStyle}>
-				{feedbackIds.map((feedbackId, idx) => (
+				{feedbackList.map((feedback, idx) => (
 					<EditableFeedbackBox
-						key={feedbackId}
-						feedbackId={feedbackId}
+						key={feedback.id}
+						feedback={feedback}
 						feedbackRef={feedbackRef}
 						index={idx}
 					/>

frontend/src/components/FeedbackForm/FeedbackForm.tsx

@@ -4,12 +4,7 @@ import { feedbackIdsState, feedbackIdxMapState, feedbackState } from '@store/fee
 import React, { useState } from 'react';
 import { useRecoilTransaction_UNSTABLE, useRecoilValue } from 'recoil';
 
-import {
-	fbFormStyle,
-	fbFormWrapperStyle,
-	fbInputStyle,
-	fbStartTimeStyle,
-} from './FeedbackForm.style';
+import { fbFormWrapperStyle, fbInputStyle, fbStartTimeStyle } from './FeedbackForm.style';
 
 const FeedbackForm = () => {
 	const [inputVal, setInputVal] = useState('');
@@ -27,14 +22,16 @@ const FeedbackForm = () => {
 	const handleAddFeedback = () => {
 		feedbackIdxMap.set(startTime, feedbackIdxMap.get(startTime) + 1 || 1);
 		const nextInnerIdx = feedbackIdxMap.get(startTime);
+		const newFeedbackId = generateFeedbackId(startTime, nextInnerIdx);
 		const newFeedback = {
+			id: newFeedbackId,
 			startTime: startTime,
 			innerIndex: nextInnerIdx,
 			content: inputVal,
 			readOnly: true,
 		};
 
-		insertFeedback(newFeedback);
+		insertFeedback(newFeedback, newFeedbackId);
 		setInputVal('');
 	};
 
@@ -44,11 +41,7 @@ const FeedbackForm = () => {
 
 	const insertFeedback = useRecoilTransaction_UNSTABLE(
 		({ set }) =>
-			(newFeedback: EditableFeedbackType) => {
-				const newFeedbackId = generateFeedbackId(
-					newFeedback.startTime,
-					newFeedback.innerIndex
-				);
+			(newFeedback: EditableFeedbackType, newFeedbackId: string) => {
 				set(feedbackIdsState, (todoId) => todoId.concat(newFeedbackId).sort());
 				set(feedbackState(newFeedbackId), newFeedback);
 			},

frontend/src/customType/feedback.d.ts

@@ -1,4 +1,5 @@
 export interface FeedbackType {
+	id: string;
 	startTime: number;
 	innerIndex: number;
 	content: string;
@@ -8,8 +9,6 @@ export interface EditableFeedbackType extends FeedbackType {
 	readOnly: boolean;
 }
 
-export interface FeedbackDTO {
-	docsUUID: string;
-	feedbackList: FeedbackType[];
+export interface FeedbackItemType extends EditableFeedbackType {
+	isFirst: boolean;
 }
-

frontend/src/pages/Feedback/Feedback.tsx

@@ -8,7 +8,7 @@ import BottomBar from '@components/BottomBar/BottomBar';
 import RoundButton from '@components/@shared/RoundButton/RoundButton';
 import usePreventLeave from '@hooks/usePreventLeave';
 import useSafeNavigate from '@hooks/useSafeNavigate';
-import { feedbackSelector, isFbSyncState } from '@store/feedback.store';
+import { feedbackDtoSelector, isFbSyncState } from '@store/feedback.store';
 import { completedFbCntState, docsUUIDState, meInRoomState } from '@store/room.store';
 
 import { ReactComponent as LinkIcon } from '@assets/icon/link.svg';
@@ -29,7 +29,7 @@ const Feedback = () => {
 	const [isFbSync, setIsFbSync] = useRecoilState(isFbSyncState);
 	const [videoUrl, setVideoUrl] = useState('');
 	const docsUUID = useRecoilValue(docsUUIDState);
-	const feedbackList = useRecoilValue(feedbackSelector);
+	const feedbackList = useRecoilValue(feedbackDtoSelector);
 	const me = useRecoilValue(meInRoomState);
 
 	const handleEndFeedback = useCallback(() => {

frontend/src/store/feedback.store.ts

@@ -26,7 +26,23 @@ export const isFbSyncState = atom({
 	default: true,
 });
 
-export const feedbackSelector = selector({
+export const feedbackListSelector = selector({
+	key: 'feedbackListSelector',
+	get: ({ get }) => {
+		let prev = -1;
+		const fbList = get(feedbackIdsState).map((id) => {
+			const fb = { ...get(feedbackState(id)), isFirst: false };
+			if (fb.startTime > prev) {
+				prev = fb.startTime;
+				fb.isFirst = true;
+			}
+			return fb;
+		});
+		return fbList;
+	},
+});
+
+export const feedbackDtoSelector = selector({
 	key: 'feedbackSelector',
 	get: ({ get }) => {
 		return get(feedbackIdsState).map((id) => {