🛠️ refactor: (FE) - feedback 관련 컴포넌트 구조 및 이름 변경

Author: seyoung8239

frontend/src/components/FeedbackArea/FeedbackArea.style.ts

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 
-export const feedbackBoxStyle = (theme) => css`
+export const feedbackBoxStyle = css`
 	display: flex;
 	gap: 10px;
 	position: relative;
@@ -16,16 +16,6 @@ export const fbTextAreaStyle = (theme) => css`
 	box-sizing: border-box;
 `;
 
-export const fbBtnContainer = css`
-	position: absolute;
-	right: 10px;
-	height: 100%;
-	padding: 5px 0px;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-`;
-
 export const fbStartTimeStyle = (theme) => css`
 	width: 30px;
 	height: 15px;

frontend/src/components/EditableFeedbackBox/EditableFeedbackBox.style.ts renamed to frontend/src/components/FeedbackItem/FeedbackItem.style.ts

@@ -5,16 +5,8 @@ import useCrudFeedback from '@hooks/useCrudFeedback';
 import { isFbClickedState, isFbSyncState } from '@store/feedback.store';
 import { currentVideoTimeState } from '@store/currentVideoTime.store';
 
-import { ReactComponent as DeleteIcon } from '@assets/icon/delete.svg';
-import { ReactComponent as EditIcon } from '@assets/icon/edit.svg';
-import { ReactComponent as CheckIcon } from '@assets/icon/check.svg';
-import {
-	feedbackBoxStyle,
-	fbTextAreaStyle,
-	fbBtnContainer,
-	fbStartTimeStyle,
-} from './EditableFeedbackBox.style';
-import { iconSmStyle } from '@styles/commonStyle';
+import { feedbackBoxStyle, fbTextAreaStyle, fbStartTimeStyle } from './FeedbackItem.style';
+
 import { FeedbackItemType } from '@customType/feedback';
 
 interface PropsType {
@@ -23,13 +15,12 @@ interface PropsType {
 	feedbackRef: React.MutableRefObject<any[]>;
 	index: number;
 }
-const EditableFeedbackBox = ({ feedback, feedbackRef, index }: PropsType) => {
+const FeedbackItem = ({ feedback, feedbackRef, index }: PropsType) => {
 	const textareaRef = useRef<HTMLTextAreaElement>(null);
 	const isFbSync = useRecoilValue(isFbSyncState);
 	const setIsFbClicked = useSetRecoilState(isFbClickedState);
 	const setCurrentVideoTime = useSetRecoilState(currentVideoTimeState);
-	const { handleStartEditFeedback, handleEndEditFeedback, handleFbChange, handleDeleteFeedback } =
-		useCrudFeedback(feedback.id);
+	const { handleFbChange } = useCrudFeedback(feedback.id);
 
 	useEffect(() => {
 		feedbackRef.current[index].style.height = textareaRef.current.scrollHeight + 'px';
@@ -56,22 +47,8 @@ const EditableFeedbackBox = ({ feedback, feedbackRef, index }: PropsType) => {
 				onClick={handleClickFeedback}
 				css={fbTextAreaStyle}
 			/>
-			<div css={fbBtnContainer}>
-				{readOnly ? (
-					<button onClick={handleStartEditFeedback}>
-						<EditIcon {...iconSmStyle} fill="black" />
-					</button>
-				) : (
-					<button onClick={handleEndEditFeedback}>
-						<CheckIcon {...iconSmStyle} fill="black" />
-					</button>
-				)}
-				<button onClick={handleDeleteFeedback}>
-					<DeleteIcon {...iconSmStyle} fill="black" />
-				</button>
-			</div>
 		</div>
 	);
 };
 
-export default React.memo(EditableFeedbackBox);
+export default React.memo(FeedbackItem);

frontend/src/components/EditableFeedbackBox/EditableFeedbackBox.tsx renamed to frontend/src/components/FeedbackItem/FeedbackItem.tsx

@@ -0,0 +1,9 @@
+import { css } from '@emotion/react';
+
+export const feedbackListStyle = css`
+	overflow: scroll;
+	display: flex;
+	flex-direction: column;
+	height: 70%;
+	gap: 10px;
+`;

frontend/src/components/FeedbackList/FeedbackList.style.ts

@@ -1,13 +1,12 @@
 import React, { useEffect, useRef } from 'react';
-import FeedbackForm from '@components/FeedbackForm/FeedbackForm';
-import EditableFeedbackBox from '@components/EditableFeedbackBox/EditableFeedbackBox';
+import EditableFeedbackBox from '@components/FeedbackItem/FeedbackItem';
 import { useRecoilValue } from 'recoil';
 import { feedbackListSelector, isFbSyncState } from '@store/feedback.store';
 import { focusIndexSelector } from '@store/currentVideoTime.store';
 
-import { feedbackAreaStyle, feedbackListStyle } from './FeedbackArea.style';
+import { feedbackListStyle } from './FeedbackList.style';
 
-const FeedbackArea = () => {
+const FeedbackList = () => {
 	const feedbackRef = useRef([]);
 	const feedbackList = useRecoilValue(feedbackListSelector);
 	const focusIndex = useRecoilValue(focusIndexSelector);
@@ -22,20 +21,17 @@ const FeedbackArea = () => {
 	}, [focusIndex, isFbSync]);
 
 	return (
-		<div css={feedbackAreaStyle}>
-			<div css={feedbackListStyle}>
-				{feedbackList.map((feedback, idx) => (
-					<EditableFeedbackBox
-						key={feedback.id}
-						feedback={feedback}
-						feedbackRef={feedbackRef}
-						index={idx}
-					/>
-				))}
-			</div>
-			<FeedbackForm />
+		<div css={feedbackListStyle}>
+			{feedbackList.map((feedback, idx) => (
+				<EditableFeedbackBox
+					key={feedback.id}
+					feedback={feedback}
+					feedbackRef={feedbackRef}
+					index={idx}
+				/>
+			))}
 		</div>
 	);
 };
 
-export default FeedbackArea;
+export default FeedbackList;

frontend/src/components/FeedbackArea/FeedbackArea.tsx renamed to frontend/src/components/FeedbackList/FeedbackList.tsx

@@ -16,3 +16,21 @@ export const feedbackPageContainerStyle = css`
 	max-width: 1200px;
 	margin: auto;
 `;
+
+export const feedbackSyncBtnStyle = (theme, isFbSync) => css`
+	background-color: ${isFbSync ? theme.colors.primary : theme.colors.white};
+	width: 50;
+	height: 50;
+	border-radius: '25px';
+	display: 'flex';
+	justify-content: 'center';
+	align-items: 'center';
+`;
+
+export const feedbackAreaStyle = css`
+	display: flex;
+	flex-direction: column;
+	width: 50%;
+	height: 80%;
+	gap: 25px;
+`;

frontend/src/pages/Feedback/Feedback.style.ts

@@ -3,7 +3,7 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import axios from 'axios';
 
 import IntervieweeVideo from '@components/IntervieweeVideo/IntervieweeVideo';
-import FeedbackArea from '@components/FeedbackArea/FeedbackArea';
+import FeedbackList from '@components/FeedbackList/FeedbackList';
 import BottomBar from '@components/BottomBar/BottomBar';
 import RoundButton from '@components/@shared/RoundButton/RoundButton';
 import usePreventLeave from '@hooks/usePreventLeave';
@@ -13,13 +13,19 @@ import { completedFbCntState, docsUUIDState, meInRoomState } from '@store/room.s
 
 import { ReactComponent as LinkIcon } from '@assets/icon/link.svg';
 import { socket } from '../../service/socket';
-import { feedbackWrapperStyle, feedbackPageContainerStyle } from './Feedback.style';
+import {
+	feedbackWrapperStyle,
+	feedbackPageContainerStyle,
+	feedbackAreaStyle,
+	feedbackSyncBtnStyle,
+} from './Feedback.style';
 import { PAGE_TYPE } from '@constants/page.constant';
 import theme from '@styles/theme';
 import { iconBgStyle } from '@styles/commonStyle';
 import { socketEmit } from '@api/socket.api';
 import { SOCKET_EVENT_TYPE } from '@constants/socket.constant';
 import { FeedbackDtoType } from '@customType/DTO';
+import FeedbackForm from '@components/FeedbackForm/FeedbackForm';
 
 const Feedback = () => {
 	usePreventLeave();
@@ -76,23 +82,18 @@ const Feedback = () => {
 			<div css={feedbackPageContainerStyle}>
 				<IntervieweeVideo src={videoUrl} width={400} autoplay muted controls />
 				<button
-					style={{
-						backgroundColor: isFbSync ? theme.colors.primary : theme.colors.white,
-						width: 50,
-						height: 50,
-						borderRadius: '25px',
-						display: 'flex',
-						justifyContent: 'center',
-						alignItems: 'center',
-					}}
+					css={(theme) => feedbackSyncBtnStyle(theme, isFbSync)}
 					onClick={() => setIsFbSync((current) => !current)}
 				>
 					<LinkIcon
 						{...iconBgStyle}
 						fill={isFbSync ? theme.colors.white : theme.colors.primary}
 					/>
 				</button>
-				<FeedbackArea />
+				<div css={feedbackAreaStyle}>
+					<FeedbackList />
+					<FeedbackForm />
+				</div>
 			</div>
 			<BottomBar mainController={finishFeedbackBtn} />
 		</div>

frontend/src/pages/Feedback/Feedback.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import IntervieweeVideo from '@components/IntervieweeVideo/IntervieweeVideo';
-import FeedbackArea from '@components/FeedbackArea/FeedbackArea';
+import FeedbackList from '@components/FeedbackList/FeedbackList';
 import Video from '@components/@shared/Video/Video';
 import useSafeNavigate from '@hooks/useSafeNavigate';
 import usePreventLeave from '@hooks/usePreventLeave';
@@ -57,7 +57,7 @@ const Interviewer = () => {
 				/>
 			))}
 
-			<FeedbackArea />
+			<FeedbackList />
 			<button onClick={hadleEndInterview}>면접 종료</button>
 		</div>
 	);