관심사

들어온 피드백을 표시

목표

1. 피드백의 작성 시간과 본문을 표시한다.
2. 편집 버튼을 누르면 편집할 수 있게 된다.
3. pin 버튼을 누르면 상위 컴포넌트로 id를 전달한다.
4. delete 버튼을 누르면 상위 컴포넌트로 id를 전달한다.

필요 파라미터

구현

import React, { useState } from 'react';

export interface FeedbackBoxPropType {
	feedback: feedbackType;
	onPinFeedback: any;
	onDelete: any;
}

export interface feedbackType {
	id: number;
	writeSecond: number;
	content: string;
}

const FeedbackBox = ({
	feedback: { id, writeSecond, content },
	onPinFeedback,
	onDelete,
}: FeedbackBoxPropType) => {
	const [isPin, setIsPin] = useState(false);
	const [readOnly, setReadOnly] = useState(true);
	const minute = Math.floor(writeSecond / 60);
	const second = writeSecond % 60;

	const setPin = () => {
		setIsPin((current) => !current);
		onPinFeedback(id);
	};

	return (
		<div>
			<span>{isPin ? '(고정)' : ''}</span>
			<span>
				{minute}:{second}
			</span>
			<textarea readOnly={readOnly}>{content}</textarea>
			<button type="button" onClick={setPin}>
				{isPin ? '해제' : '고정'}
			</button>
			<button type="button" onClick={() => setReadOnly((current) => !current)}>
				{readOnly ? '편집' : '완료'}
			</button>
			<button type="button" onClick={() => onDelete(id)}>
				삭제
			</button>
		</div>
	);
};

export default FeedbackBox;