InterviewDocsList, InterviewDocs 컴포넌트 추가

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

@@ -1,30 +1,19 @@
-import DocsItem from '@components/DocsItem/DocsItem';
-import { REST_TYPE } from '@constants/rest.constant';
-import { DocsItemDtoType } from '@customType/dto';
-import axios from 'axios';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
-const initialDocsList = [
-	{ docsUUID: 'asdf', createdAt: new Date(), playTime: 20000 },
-	{ docsUUID: 'qwe', createdAt: new Date(), playTime: 454630 },
-	{ docsUUID: 'zxc', createdAt: new Date(), playTime: 798760 },
-	{ docsUUID: 'wer', createdAt: new Date(), playTime: 58760 },
-];
+import DocsItem from '@components/InterviewDocsItem/InterviewDocsItem';
+import { docsListQuery } from '@store/interviewDocs.store';
+import { roomUUIDState } from '@store/room.store';
+
+import { useRecoilValue } from 'recoil';
 
 const RecordDrawer = () => {
-	const [docsList, setDocsList] = useState<DocsItemDtoType[]>(initialDocsList);
-	// useEffect(() => {
-	// 	const fetch = async () => {
-	// 		const res = await axios.get(REST_TYPE.INTERVIEW_DOCS_LIST);
-	// 		setDocsList(res.data);
-	// 	};
-	// 	fetch();
-	// }, []);
+	const roomUUID = useRecoilValue(roomUUIDState);
+	const docsList = useRecoilValue(docsListQuery(roomUUID));
 
 	return (
 		<>
 			{docsList.map((docs, idx) => (
-				<DocsItem key={docs.docsUUID} docs={docs} idx={idx} style='card' />
+				<DocsItem key={docs.id} docs={docs} idx={idx} style="card" />
 			))}
 		</>
 	);

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

@@ -22,6 +22,13 @@ const UserDrawer = () => {
 	return (
 		<>
 			<div css={userListStyle}>
+				<div>
+					<div>{me.nickname}</div>
+					<div>
+						<MicOnIcon {...iconSmStyle} />
+						<CameraOnIcon {...iconSmStyle} />
+					</div>
+				</div>
 				{others.map((other, i) => (
 					<div key={i}>
 						<div>{other.nickname}</div>

frontend/src/components/Modal/EnterRoomModal.tsx → frontend/src/components/@modal/EnterRoomModal.tsx

@@ -7,7 +7,7 @@ import { UserType } from '@customType/user';
 import useSafeNavigate from '@hooks/useSafeNavigate';
 import { PAGE_TYPE } from '@constants/page.constant';
 import { useSetRecoilState } from 'recoil';
-import { meInRoomState, othersInRoomState } from '@store/room.store';
+import { meInRoomState, othersInRoomState, roomUUIDState } from '@store/room.store';
 
 interface attendRoomResponseType {
 	success?: boolean;
@@ -21,6 +21,7 @@ const EnterRoomModal = () => {
 	const [errorMsg, setErrorMsg] = useState('');
 	const setOthers = useSetRecoilState(othersInRoomState);
 	const setMe = useSetRecoilState(meInRoomState);
+	const setRoom = useSetRecoilState(roomUUIDState);
 
 	const { closeModal } = useModal();
 	const { safeNavigate } = useSafeNavigate();
@@ -40,6 +41,7 @@ const EnterRoomModal = () => {
 			closeModal();
 			setOthers(others);
 			setMe(me);
+			setRoom(roomUUID);
 			safeNavigate(PAGE_TYPE.LOBBY_PAGE);
 		} catch (e) {
 			setErrorMsg(e.message);

frontend/src/components/@modal/InterviewDocsListModal/InterviewDocsListModal.style.ts

@@ -0,0 +1,18 @@
+import { css } from '@emotion/react';
+
+export const docsListWrapperStyle = css`
+	display: flex;
+	flex-direction: column;
+	gap: 15px;
+	height: 80vh;
+	width: 100%;
+`;
+
+export const docsListHeaderStyle = css`
+	display: flex;
+	justify-content: space-between;
+`;
+
+export const docsListBodyStyle = css`
+	overflow: scroll;
+`;

frontend/src/components/@modal/InterviewDocsListModal/InterviewDocsListModal.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Modal from '@components/@shared/Modal/Modal';
+import { useRecoilValue } from 'recoil';
+import { docsListQuery } from '@store/interviewDocs.store';
+import DocsItem from '@components/InterviewDocsItem/InterviewDocsItem';
+import Button from '@components/@shared/Button/Button';
+import {
+	docsListBodyStyle,
+	docsListHeaderStyle,
+	docsListWrapperStyle,
+} from './InterviewDocsListModal.style';
+
+const InterviewDocsListModal = () => {
+	const docsList = useRecoilValue(docsListQuery(''));
+	return (
+		<Modal>
+			<div css={docsListWrapperStyle}>
+				<div css={docsListHeaderStyle}>
+					<div>인터뷰 기록</div>
+					<Button size="small">닫기</Button>
+				</div>
+				<div css={docsListBodyStyle}>
+					{docsList.map((docs, idx) => (
+						<DocsItem key={docs.id} docs={docs} idx={idx} style="list" />
+					))}
+				</div>
+			</div>
+		</Modal>
+	);
+};
+
+export default InterviewDocsListModal;

frontend/src/components/@modal/InterviewDocsModal/InterviewDocsModal.style.ts

@@ -0,0 +1,54 @@
+import { css } from '@emotion/react';
+
+export const docsItemWrapperStyle = css`
+	display: flex;
+	flex-direction: column;
+	gap: 15px;
+	padding: 10px;
+	height: 80vh;
+	width: 100%;
+`;
+
+export const docsItemHeaderStyle = css`
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+`;
+
+export const docsItemBtnsStyle = css`
+	display: flex;
+`;
+
+export const docsItemBodyStyle = css`
+	display: flex;
+	gap: 15px;
+`;
+
+export const docsItemVideoAreaStyle = css`
+	display: flex;
+	flex-direction: column;
+	gap: 15px;
+`;
+
+export const docsItemVideoInfoStyle = css`
+	display: flex;
+	flex-direction: column;
+	gap: 5px;
+	div {
+		display: 'flex';
+	}
+`;
+
+export const docsItemFbAreaStyle = css`
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+`;
+
+export const docsItemFbBtnsStyle = css`
+	display: flex;
+`;
+
+export const docsItemFbListStyle = css`
+	overflow: scroll;
+`;

frontend/src/components/@modal/InterviewDocsModal/InterviewDocsModal.tsx

@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import Modal from '@components/@shared/Modal/Modal';
+import { useRecoilValue } from 'recoil';
+import { docsItemQuery } from '@store/interviewDocs.store';
+import Button from '@components/@shared/Button/Button';
+import Video from '@components/@shared/Video/Video';
+import FeedbackList from '@components/FeedbackList/FeedbackList';
+import { getFirstLabeledFbList } from '@utils/common.util';
+import {
+	docsItemBodyStyle,
+	docsItemBtnsStyle,
+	docsItemFbAreaStyle,
+	docsItemFbBtnsStyle,
+	docsItemHeaderStyle,
+	docsItemWrapperStyle,
+	docsItemVideoAreaStyle,
+	docsItemVideoInfoStyle,
+	docsItemFbListStyle,
+} from './InterviewDocsModal.style';
+
+interface Props {
+	docsUUID: string;
+	idx: number;
+}
+
+const InterviewDocsModal = ({ docsUUID, idx }: Props) => {
+	const docsItem = useRecoilValue(docsItemQuery(docsUUID));
+	const { createdAt, videoPlayTime, feedbacks } = docsItem;
+	const createdAtDate = new Date(createdAt);
+	const [docIdx, setDocIdx] = useState(0);
+
+	const handleChangeDocIdx = (idx) => {
+		setDocIdx(idx);
+	};
+
+	return (
+		<Modal>
+			<div css={docsItemWrapperStyle}>
+				<div css={docsItemHeaderStyle}>
+					<div>#{idx}</div>
+					<div>Sync</div>
+					<div css={docsItemBtnsStyle}>
+						<Button size="small">다운로드</Button>
+						<Button size="small">닫기</Button>
+					</div>
+				</div>
+				<div css={docsItemBodyStyle}>
+					<div css={docsItemVideoAreaStyle}>
+						<Video width={100} src="" />
+						<div css={docsItemVideoInfoStyle}>
+							<div>
+								<div>일시</div>
+								<div>{createdAtDate.toLocaleDateString()}</div>
+							</div>
+							<div>
+								<div>면접 시간</div>
+								<div>{videoPlayTime}</div>
+							</div>
+							<div>
+								<div>면접자</div>
+								<div>dummyUUID</div>
+							</div>
+						</div>
+					</div>
+					<div css={docsItemFbAreaStyle}>
+						<div css={docsItemFbBtnsStyle}>
+							{feedbacks.map((fb, i) => (
+								<Button size="small" key={i} onClick={() => handleChangeDocIdx(i)}>
+									{fb.nickname}
+								</Button>
+							))}
+						</div>
+						<div css={docsItemFbListStyle}>
+							{feedbacks[docIdx] ? (
+								<FeedbackList
+									feedbackList={getFirstLabeledFbList(
+										feedbacks[docIdx].feedbackList
+									)}
+								/>
+							) : (
+								<div>작성된 피드백이 없습니다.</div>
+							)}
+						</div>
+					</div>
+				</div>
+			</div>
+		</Modal>
+	);
+};
+
+export default InterviewDocsModal;

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

@@ -1,37 +1,42 @@
 import React from 'react';
 import { Story } from '@storybook/react';
-import Button, { buttonPropType } from '../Button/Button';
+import RoundButton, { roundButtonPropType } from './RoundButton';
 import { ReactComponent as FolderIcon } from '@assets/icon/folder.svg';
+import { iconSmStyle } from '@styles/commonStyle';
+import theme from '@styles/theme';
 
 export default {
-	component: Button,
-	title: '@shared/Button',
+	component: RoundButton,
+	title: '@shared/RoundButton',
 };
 
-const Template: Story<buttonPropType> = (args) => (
-	<Button {...args}>
+const Template: Story<roundButtonPropType> = (args) => (
+	<RoundButton {...args}>
 		<span>Button</span>
-	</Button>
+	</RoundButton>
 );
-
 export const Default = Template.bind({});
-Default.args = {};
+Default.args = {
+	style: { backgroundColor: theme.colors.primary, width: 100, height: 50 },
+};
 
-const IconTemplate: Story<buttonPropType> = (args) => (
-	<Button {...args}>
-		<FolderIcon />
+const IconTemplate: Story<roundButtonPropType> = (args) => (
+	<RoundButton {...args}>
+		<FolderIcon {...iconSmStyle} />
 		<span>Button</span>
-	</Button>
+	</RoundButton>
 );
-
 export const IconButton = IconTemplate.bind({});
-IconButton.args = {};
+IconButton.args = {
+	style: { backgroundColor: theme.colors.primary, width: 130, height: 50 },
+};
 
-const IconOnlyTemplate: Story<buttonPropType> = (args) => (
-	<Button {...args}>
-		<FolderIcon />
-	</Button>
+const IconOnlyTemplate: Story<roundButtonPropType> = (args) => (
+	<RoundButton {...args}>
+		<FolderIcon {...iconSmStyle} />
+	</RoundButton>
 );
-
 export const IconOnlyButton = IconOnlyTemplate.bind({});
-IconButton.args = {};
+IconOnlyButton.args = {
+	style: { backgroundColor: theme.colors.primary, width: 50, height: 50 },
+};

frontend/src/components/@shared/RoundButton/RoundButton.style.ts

@@ -1,16 +1,20 @@
 import { css } from '@emotion/react';
+import theme from '@styles/theme';
 
 export const roundButtonStyle = (style) => css`
 	display: flex;
 	box-sizing: border-box;
-	justify-content: center;
+	justify-content: space-around;
 	align-items: center;
 
 	width: ${style.width}px;
 	height: ${style.height}px;
 	border-radius: ${style.height / 2}px;
-	background-color: ${style.backgroundColor};
-	color: ${style.color};
-	padding: 0px 30px;
+	background-color: ${style.backgroundColor || theme.colors.primary};
+	color: ${style.color || 'white'};
 	font-size: ${style.fontsize || '24px'};
+
+	&:hover {
+		filter: ${style.color === 'black' ? `brightness(200%)` : `brightness(110%)`};
+	}
 `;

frontend/src/components/@shared/RoundButton/RoundButton.tsx

@@ -1,21 +1,19 @@
 import React from 'react';
 import { roundButtonStyle } from './RoundButton.style';
 
-export interface Prop {
+export interface roundButtonPropType {
 	children?: React.ReactNode | React.ReactNode[];
 	onClick?: React.MouseEventHandler<HTMLButtonElement>;
 	style: StyleType;
 }
-
 interface StyleType {
 	width?: number;
 	height?: number;
 	backgroundColor?: string;
 	color?: string;
-	iconColor?: boolean;
 }
 
-const RoundButton = (prop: Prop) => {
+const RoundButton = (prop: roundButtonPropType) => {
 	const { children, onClick, style } = prop;
 	return (
 		<button css={(theme) => roundButtonStyle({ ...style, theme })} onClick={onClick}>