Merge pull request #143 from boostcampwm-2022/138-피드백-관련-컴포넌트-리팩토링-및-문서화

피드백 관련 컴포넌트 리팩토링 및 문서화

Author: seyoung8239

frontend/src/components/@drawer/RecordDrawer/RecordDrawer.tsx

@@ -1,4 +1,4 @@
-import DocsItem from '@components/@shared/DocsItem/DocsItem';
+import DocsItem from '@components/DocsItem/DocsItem';
 import { REST_TYPE } from '@constants/rest.constant';
 import { DocsItemDtoType } from '@customType/dto';
 import axios from 'axios';

frontend/src/components/@shared/FeedbackBox/FeedbackBox.stories.tsx

@@ -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/@shared/FeedbackBox/FeedbackBox.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;