🛠️ refactor: (FE) - FeedbackItem의 수정가능 여부를 고려한 리팩토링

Author: seyoung8239

frontend/src/components/FeedbackEditBtns/FeedbackEditBtns.style.ts

@@ -0,0 +1,11 @@
+import { css } from '@emotion/react';
+
+export const fbBtnContainer = css`
+	position: absolute;
+	right: 10px;
+	height: 100%;
+	padding: 5px 0px;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+`;

frontend/src/components/FeedbackEditBtns/FeedbackEditBtns.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import useCrudFeedback from '@hooks/useCrudFeedback';
+
+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 { iconSmStyle } from '@styles/commonStyle';
+import { fbBtnContainer } from './FeedbackEditBtns.style';
+
+interface Props {
+	id: string;
+	readOnly: boolean;
+}
+
+const FeedbackEditBtn = ({ id, readOnly }: Props) => {
+	const { handleStartEditFeedback, handleEndEditFeedback, handleDeleteFeedback } =
+		useCrudFeedback(id);
+
+	return (
+		<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>
+	);
+};
+
+export default FeedbackEditBtn;

frontend/src/components/FeedbackItem/FeedbackItem.tsx

@@ -14,8 +14,9 @@ interface PropsType {
 	//TODO ref type any
 	feedbackRef: React.MutableRefObject<any[]>;
 	index: number;
+	editableBtns: React.ReactNode;
 }
-const FeedbackItem = ({ feedback, feedbackRef, index }: PropsType) => {
+const FeedbackItem = ({ feedback, feedbackRef, index, editableBtns }: PropsType) => {
 	const textareaRef = useRef<HTMLTextAreaElement>(null);
 	const isFbSync = useRecoilValue(isFbSyncState);
 	const setIsFbClicked = useSetRecoilState(isFbClickedState);
@@ -47,6 +48,7 @@ const FeedbackItem = ({ feedback, feedbackRef, index }: PropsType) => {
 				onClick={handleClickFeedback}
 				css={fbTextAreaStyle}
 			/>
+			{editableBtns}
 		</div>
 	);
 };

frontend/src/components/FeedbackList/FeedbackList.tsx

@@ -1,12 +1,16 @@
 import React, { useEffect, useRef } from 'react';
-import EditableFeedbackBox from '@components/FeedbackItem/FeedbackItem';
+import FeedbackItem from '@components/FeedbackItem/FeedbackItem';
 import { useRecoilValue } from 'recoil';
 import { feedbackListSelector, isFbSyncState } from '@store/feedback.store';
 import { focusIndexSelector } from '@store/currentVideoTime.store';
 
 import { feedbackListStyle } from './FeedbackList.style';
+import FeedbackEditBtn from '@components/FeedbackEditBtns/FeedbackEditBtns';
 
-const FeedbackList = () => {
+interface Props {
+	editable: boolean;
+}
+const FeedbackList = ({ editable }: Props) => {
 	const feedbackRef = useRef([]);
 	const feedbackList = useRecoilValue(feedbackListSelector);
 	const focusIndex = useRecoilValue(focusIndexSelector);
@@ -20,14 +24,17 @@ const FeedbackList = () => {
 			});
 	}, [focusIndex, isFbSync]);
 
+	const editableBtns = (props) => editable && <FeedbackEditBtn {...props} />;
+
 	return (
 		<div css={feedbackListStyle}>
 			{feedbackList.map((feedback, idx) => (
-				<EditableFeedbackBox
+				<FeedbackItem
 					key={feedback.id}
 					feedback={feedback}
 					feedbackRef={feedbackRef}
 					index={idx}
+					editableBtns={editableBtns({ id: feedback.id, readOnly: feedback.readOnly })}
 				/>
 			))}
 		</div>

frontend/src/pages/Interviewer/Interviewer.tsx

@@ -57,7 +57,7 @@ const Interviewer = () => {
 				/>
 			))}
 
-			<FeedbackList />
+			<FeedbackList editable />
 			<button onClick={hadleEndInterview}>면접 종료</button>
 		</div>
 	);