📖 docs: (FE) - FeedbackItem컴포넌트 storybook 추가

Author: seyoung8239

frontend/src/components/FeedbackItem/FeedbackItem.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+import FeedbackItem, { Props } from './FeedbackItem';
+import FeedbackEditBtn from '@components/FeedbackEditBtns/FeedbackEditBtns';
+
+export default {
+	component: FeedbackItem,
+	title: 'FeedbackItem',
+};
+
+const Template: Story<Props> = (args: Props) => <FeedbackItem {...args} />;
+
+const dummyFeedback = {
+	id: 'id',
+	startTime: 500,
+	innerIndex: 4,
+	content: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.`,
+	readonly: true,
+	isFirst: true,
+};
+const dummyFbItem = {
+	feedback: dummyFeedback,
+	feedbackRef: false,
+	index: 3,
+	editableBtns: <FeedbackEditBtn id="id" readOnly={true} />,
+};
+
+export const Default = Template.bind({});
+Default.args = { ...dummyFbItem, editableBtns: false };
+
+export const Editable = Template.bind({});
+Editable.args = dummyFbItem;

frontend/src/components/FeedbackItem/FeedbackItem.tsx

@@ -8,23 +8,29 @@ import { currentVideoTimeState } from '@store/currentVideoTime.store';
 import { feedbackBoxStyle, fbTextAreaStyle, fbStartTimeStyle } from './FeedbackItem.style';
 
 import { FeedbackItemType } from '@customType/feedback';
+import { mmssFormatter } from '@utils/common.util';
+import { ONE_SECOND } from '@constants/time.constant';
 
-interface PropsType {
+export interface Props {
 	feedback: FeedbackItemType;
 	//TODO ref type any
 	feedbackRef: React.MutableRefObject<any[]>;
 	index: number;
 	editableBtns: React.ReactNode;
 }
-const FeedbackItem = ({ feedback, feedbackRef, index, editableBtns }: PropsType) => {
+const FeedbackItem = ({ feedback, feedbackRef, index, editableBtns }: Props) => {
 	const textareaRef = useRef<HTMLTextAreaElement>(null);
 	const isFbSync = useRecoilValue(isFbSyncState);
 	const setIsFbClicked = useSetRecoilState(isFbClickedState);
 	const setCurrentVideoTime = useSetRecoilState(currentVideoTimeState);
 	const { handleFbChange } = useCrudFeedback(feedback.id);
 
 	useEffect(() => {
-		feedbackRef.current[index].style.height = textareaRef.current.scrollHeight + 'px';
+		const effect = () => {
+			if (!feedbackRef) return;
+			feedbackRef.current[index].style.height = textareaRef.current.scrollHeight + 'px';
+		};
+		effect();
 	});
 
 	const { startTime, isFirst, content, readOnly } = feedback;
@@ -35,10 +41,15 @@ const FeedbackItem = ({ feedback, feedbackRef, index, editableBtns }: PropsType)
 		setCurrentVideoTime(startTime);
 	};
 
+	const getFbRef = (el) => {
+		if (!feedbackRef) return;
+		return (feedbackRef.current[index] = el);
+	};
+
 	return (
-		<div ref={(el) => (feedbackRef.current[index] = el)} css={feedbackBoxStyle}>
+		<div ref={getFbRef} css={feedbackBoxStyle}>
 			<div css={fbStartTimeStyle} style={{ visibility: isFirst ? 'visible' : 'hidden' }}>
-				{startTime}
+				{mmssFormatter(startTime * ONE_SECOND)}
 			</div>
 			<textarea
 				ref={textareaRef}