diff --git a/frontend/src/components/@drawer/RecordDrawer/RecordDrawer.tsx b/frontend/src/components/@drawer/RecordDrawer/RecordDrawer.tsx
index 6bfa829f..0f019917 100644
--- a/frontend/src/components/@drawer/RecordDrawer/RecordDrawer.tsx
+++ b/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" />
 			))}
 		</>
 	);
diff --git a/frontend/src/components/@drawer/UserDrawer/UserDrawer.tsx b/frontend/src/components/@drawer/UserDrawer/UserDrawer.tsx
index 9fb4ce5a..bc4d2c41 100644
--- a/frontend/src/components/@drawer/UserDrawer/UserDrawer.tsx
+++ b/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>
diff --git a/frontend/src/components/Modal/EnterRoomModal.tsx b/frontend/src/components/@modal/EnterRoomModal.tsx
similarity index 92%
rename from frontend/src/components/Modal/EnterRoomModal.tsx
rename to frontend/src/components/@modal/EnterRoomModal.tsx
index 41a0688d..07fa1e6d 100644
--- a/frontend/src/components/Modal/EnterRoomModal.tsx
+++ b/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);
diff --git a/frontend/src/components/@modal/InterviewDocsListModal/InterviewDocsListModal.style.ts b/frontend/src/components/@modal/InterviewDocsListModal/InterviewDocsListModal.style.ts
new file mode 100644
index 00000000..1ac846f7
--- /dev/null
+++ b/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;
+`;
diff --git a/frontend/src/components/@modal/InterviewDocsListModal/InterviewDocsListModal.tsx b/frontend/src/components/@modal/InterviewDocsListModal/InterviewDocsListModal.tsx
new file mode 100644
index 00000000..7b703f92
--- /dev/null
+++ b/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;
diff --git a/frontend/src/components/Modal/InterviewDocsModal.tsx b/frontend/src/components/@modal/InterviewDocsModal.tsx
similarity index 100%
rename from frontend/src/components/Modal/InterviewDocsModal.tsx
rename to frontend/src/components/@modal/InterviewDocsModal.tsx
diff --git a/frontend/src/components/@modal/InterviewDocsModal/InterviewDocsModal.style.ts b/frontend/src/components/@modal/InterviewDocsModal/InterviewDocsModal.style.ts
new file mode 100644
index 00000000..feb4f63f
--- /dev/null
+++ b/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;
+`;
diff --git a/frontend/src/components/@modal/InterviewDocsModal/InterviewDocsModal.tsx b/frontend/src/components/@modal/InterviewDocsModal/InterviewDocsModal.tsx
new file mode 100644
index 00000000..37cdc7c0
--- /dev/null
+++ b/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;
diff --git a/frontend/src/components/@shared/RoundButton/RoundButton.stories.tsx b/frontend/src/components/@shared/RoundButton/RoundButton.stories.tsx
index 4f5fd4de..c366331f 100644
--- a/frontend/src/components/@shared/RoundButton/RoundButton.stories.tsx
+++ b/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 },
+};
diff --git a/frontend/src/components/@shared/RoundButton/RoundButton.style.ts b/frontend/src/components/@shared/RoundButton/RoundButton.style.ts
index 12212e8e..0cb199e5 100644
--- a/frontend/src/components/@shared/RoundButton/RoundButton.style.ts
+++ b/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%)`};
+	}
 `;
diff --git a/frontend/src/components/@shared/RoundButton/RoundButton.tsx b/frontend/src/components/@shared/RoundButton/RoundButton.tsx
index 311f75d9..193bbae7 100644
--- a/frontend/src/components/@shared/RoundButton/RoundButton.tsx
+++ b/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}>
diff --git a/frontend/src/components/BottomBar/BottomBar.tsx b/frontend/src/components/BottomBar/BottomBar.tsx
index 0c9318aa..b29bbbad 100644
--- a/frontend/src/components/BottomBar/BottomBar.tsx
+++ b/frontend/src/components/BottomBar/BottomBar.tsx
@@ -30,6 +30,7 @@ import { socketEmit } from '@api/socket.api';
 import { SOCKET_EVENT_TYPE } from '@constants/socket.constant';
 import useSafeNavigate from '@hooks/useSafeNavigate';
 import { PAGE_TYPE } from '@constants/page.constant';
+import useCleanupRoom from '@hooks/useCleanupRoom';
 
 interface Props {
 	mainController?: React.ReactNode;
@@ -43,6 +44,7 @@ enum DRAWER_TYPE {
 
 const BottomBar = ({ mainController }: Props) => {
 	const { safeNavigate } = useSafeNavigate();
+	const cleanupRoom = useCleanupRoom();
 	const [isMicOn, setIsMicOn] = useState(true);
 	const [isCameraOn, setIsCameraOn] = useState(true);
 
@@ -78,6 +80,7 @@ const BottomBar = ({ mainController }: Props) => {
 
 	const handleLeaveRoom = () => {
 		socketEmit(SOCKET_EVENT_TYPE.LEAVE_ROOM);
+		cleanupRoom();
 		safeNavigate(PAGE_TYPE.LANDING_PAGE);
 	};
 
diff --git a/frontend/src/components/DocsItem/DocsItem.stories.tsx b/frontend/src/components/DocsItem/DocsItem.stories.tsx
deleted file mode 100644
index 80a6cbe5..00000000
--- a/frontend/src/components/DocsItem/DocsItem.stories.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { Story } from '@storybook/react';
-import DocsItem, { Props } from './DocsItem';
-
-export default {
-	component: DocsItem,
-	title: '@shared/DocsItem',
-};
-
-const Template: Story<Props> = (args) => <DocsItem {...args} />;
-const dummyDocs = { docsUUID: 'asdf', createdAt: new Date(), playTime: 20000 };
-
-export const Card = Template.bind({});
-Card.args = {
-	docs: dummyDocs,
-	idx: 1,
-	style: 'card',
-};
-
-export const List = Template.bind({});
-List.args = {
-	docs: dummyDocs,
-	idx: 1,
-	style: 'list',
-};
diff --git a/frontend/src/components/FeedbackEditBtns/FeedbackEditBtns.tsx b/frontend/src/components/FeedbackEditBtns/FeedbackEditBtns.tsx
index b220f3b0..ba122ce5 100644
--- a/frontend/src/components/FeedbackEditBtns/FeedbackEditBtns.tsx
+++ b/frontend/src/components/FeedbackEditBtns/FeedbackEditBtns.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import useCrudFeedback from '@hooks/useCrudFeedback';
+import useEditFeedback from '@hooks/useEditFeedback';
 
 import { ReactComponent as DeleteIcon } from '@assets/icon/delete.svg';
 import { ReactComponent as EditIcon } from '@assets/icon/edit.svg';
@@ -15,7 +15,7 @@ interface Props {
 
 const FeedbackEditBtn = ({ id, readOnly }: Props) => {
 	const { handleStartEditFeedback, handleEndEditFeedback, handleDeleteFeedback } =
-		useCrudFeedback(id);
+		useEditFeedback(id);
 
 	return (
 		<div css={fbBtnContainer}>
diff --git a/frontend/src/components/FeedbackForm/FeedbackForm.tsx b/frontend/src/components/FeedbackForm/FeedbackForm.tsx
index b77a1ccc..5808db0f 100644
--- a/frontend/src/components/FeedbackForm/FeedbackForm.tsx
+++ b/frontend/src/components/FeedbackForm/FeedbackForm.tsx
@@ -1,60 +1,35 @@
-import { ONE_SECOND } from '@constants/time.constant';
-import { EditableFeedbackType } from '@customType/feedback';
+import React, { useState } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import useAddFeedback from '@hooks/useAddFeedback';
 import { currentVideoTimeState } from '@store/currentVideoTime.store';
-import { feedbackIdsState, feedbackIdxMapState, feedbackState } from '@store/feedback.store';
+
+import { ONE_SECOND } from '@constants/time.constant';
 import { mmssFormatter } from '@utils/common.util';
-import React, { useState } from 'react';
-import { useRecoilTransaction_UNSTABLE, useRecoilValue } from 'recoil';
 
 import { fbFormWrapperStyle, fbInputStyle, fbStartTimeStyle } from './FeedbackForm.style';
 
 const FeedbackForm = () => {
 	const [inputVal, setInputVal] = useState('');
 	const [startTime, setStartTime] = useState(0);
-	const feedbackIdxMap = useRecoilValue(feedbackIdxMapState);
+
 	const currentVideoTime = useRecoilValue(currentVideoTimeState);
+	const { handleAddFeedback } = useAddFeedback();
+	const ENTER_KEY_CODE = 13;
 
 	const handleChange = (e) => {
-		if (!inputVal.length) {
-			setStartTime(currentVideoTime);
-		}
+		if (!inputVal.length) setStartTime(currentVideoTime);
 		setInputVal(e.target.value);
 	};
 
-	const handleAddFeedback = () => {
-		feedbackIdxMap.set(startTime, feedbackIdxMap.get(startTime) + 1 || 1);
-		const nextInnerIdx = feedbackIdxMap.get(startTime);
-		const newFeedbackId = generateFeedbackId(startTime, nextInnerIdx);
-		const newFeedback = {
-			id: newFeedbackId,
-			startTime: startTime,
-			innerIndex: nextInnerIdx,
-			content: inputVal,
-			readOnly: true,
-		};
-
-		insertFeedback(newFeedback, newFeedbackId);
-		setInputVal('');
-	};
-
-	const generateFeedbackId = (startTime: number, innerIdx: number) => {
-		return ('000000' + startTime).slice(-6) + ('00' + innerIdx).slice(-2);
+	const handleKeyDown = (e) => {
+		if (e.keyCode === ENTER_KEY_CODE && !e.shiftKey) addFeedback(e);
 	};
 
-	const insertFeedback = useRecoilTransaction_UNSTABLE(
-		({ set }) =>
-			(newFeedback: EditableFeedbackType, newFeedbackId: string) => {
-				set(feedbackIdsState, (todoId) => todoId.concat(newFeedbackId).sort());
-				set(feedbackState(newFeedbackId), newFeedback);
-			},
-		[]
-	);
-
-	const handleKeyDown = (e) => {
-		if (e.keyCode === 13 && !e.shiftKey) {
-			e.preventDefault();
-			handleAddFeedback();
-		}
+	const addFeedback = (e) => {
+		e.preventDefault();
+		handleAddFeedback({ startTime, inputVal });
+		setInputVal('');
 	};
 
 	return (
diff --git a/frontend/src/components/FeedbackItem/FeedbackItem.stories.tsx b/frontend/src/components/FeedbackItem/FeedbackItem.stories.tsx
deleted file mode 100644
index c7494651..00000000
--- a/frontend/src/components/FeedbackItem/FeedbackItem.stories.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-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;
diff --git a/frontend/src/components/FeedbackItem/FeedbackItem.tsx b/frontend/src/components/FeedbackItem/FeedbackItem.tsx
index af4b667e..ebda9df2 100644
--- a/frontend/src/components/FeedbackItem/FeedbackItem.tsx
+++ b/frontend/src/components/FeedbackItem/FeedbackItem.tsx
@@ -1,7 +1,7 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 
-import useCrudFeedback from '@hooks/useCrudFeedback';
+import useEditFeedback from '@hooks/useEditFeedback';
 import { isFbClickedState, isFbSyncState } from '@store/feedback.store';
 import { currentVideoTimeState } from '@store/currentVideoTime.store';
 
@@ -23,12 +23,7 @@ const FeedbackItem = ({ feedback, feedbackRef, index, editableBtns }: Props) =>
 	const isFbSync = useRecoilValue(isFbSyncState);
 	const setIsFbClicked = useSetRecoilState(isFbClickedState);
 	const setCurrentVideoTime = useSetRecoilState(currentVideoTimeState);
-	const { handleFbChange } = useCrudFeedback(feedback.id);
-
-	useEffect(() => {
-		if (feedbackRef)
-			feedbackRef.current[index].style.height = textareaRef.current.scrollHeight + 'px';
-	});
+	const { handleFbChange } = useEditFeedback(feedback.id);
 
 	const { startTime, isFirst, content, readOnly } = feedback;
 
@@ -38,6 +33,9 @@ const FeedbackItem = ({ feedback, feedbackRef, index, editableBtns }: Props) =>
 		setCurrentVideoTime(startTime);
 	};
 
+	if (feedbackRef)
+		feedbackRef.current[index].style.height = textareaRef.current.scrollHeight + 'px';
+
 	return (
 		<div ref={(el) => (feedbackRef.current[index] = el)} css={feedbackBoxStyle}>
 			<div css={fbStartTimeStyle} style={{ visibility: isFirst ? 'visible' : 'hidden' }}>
diff --git a/frontend/src/components/FeedbackList/FeedbackList.tsx b/frontend/src/components/FeedbackList/FeedbackList.tsx
index 3639718c..20780cb7 100644
--- a/frontend/src/components/FeedbackList/FeedbackList.tsx
+++ b/frontend/src/components/FeedbackList/FeedbackList.tsx
@@ -1,18 +1,20 @@
 import React, { useEffect, useRef } from 'react';
 import FeedbackItem from '@components/FeedbackItem/FeedbackItem';
 import { useRecoilValue } from 'recoil';
-import { feedbackListSelector, isFbSyncState } from '@store/feedback.store';
+import { isFbSyncState } from '@store/feedback.store';
 import { focusIndexSelector } from '@store/currentVideoTime.store';
 
 import { feedbackListStyle } from './FeedbackList.style';
 import FeedbackEditBtn from '@components/FeedbackEditBtns/FeedbackEditBtns';
+import { FeedbackItemType } from '@customType/feedback';
 
 interface Props {
-	editable: boolean;
+	editable?: boolean;
+	feedbackList: FeedbackItemType[];
 }
-const FeedbackList = ({ editable }: Props) => {
+const FeedbackList = ({ editable = false, feedbackList }: Props) => {
 	const feedbackRef = useRef([]);
-	const feedbackList = useRecoilValue(feedbackListSelector);
+
 	const focusIndex = useRecoilValue(focusIndexSelector);
 	const isFbSync = useRecoilValue(isFbSyncState);
 
diff --git a/frontend/src/components/DocsItem/DocsItem.style.ts b/frontend/src/components/InterviewDocsItem/InterviewDocsItem.style.ts
similarity index 92%
rename from frontend/src/components/DocsItem/DocsItem.style.ts
rename to frontend/src/components/InterviewDocsItem/InterviewDocsItem.style.ts
index 9f4b30bb..2197339f 100644
--- a/frontend/src/components/DocsItem/DocsItem.style.ts
+++ b/frontend/src/components/InterviewDocsItem/InterviewDocsItem.style.ts
@@ -9,6 +9,7 @@ export const docsItemWrapper = (theme, style) =>
 		margin: 20px 0px;
 		width: 100%;
 		gap: 40px;
+		cursor: pointer;
 
 		${style === 'card' ? cardDocsStyle(theme) : listDocsStyle(theme)};
 		div {
@@ -18,7 +19,7 @@ export const docsItemWrapper = (theme, style) =>
 	`;
 
 const cardDocsStyle = (theme) => css`
-	background-color: ${theme.colors.blue1};
+	background-color: ${theme.colors.primary};
 	height: 150px;
 	color: white;
 	border-radius: 4px;
diff --git a/frontend/src/components/DocsItem/DocsItem.tsx b/frontend/src/components/InterviewDocsItem/InterviewDocsItem.tsx
similarity index 56%
rename from frontend/src/components/DocsItem/DocsItem.tsx
rename to frontend/src/components/InterviewDocsItem/InterviewDocsItem.tsx
index 864661e1..67d20c38 100644
--- a/frontend/src/components/DocsItem/DocsItem.tsx
+++ b/frontend/src/components/InterviewDocsItem/InterviewDocsItem.tsx
@@ -3,8 +3,11 @@ import React from 'react';
 import { DocsItemDtoType } from '@customType/dto';
 import { ReactComponent as DownloadIcon } from '@assets/icon/download.svg';
 import { iconSmStyle } from '@styles/commonStyle';
-import { createdAtStyle, docsItemWrapper, indexStyle, playTimeStyle } from './DocsItem.style';
+import { createdAtStyle, docsItemWrapper, indexStyle, playTimeStyle } from './InterviewDocsItem.style';
 import { mmssFormatter } from '@utils/common.util';
+import { ONE_SECOND } from '@constants/time.constant';
+import useModal from '@hooks/useModal';
+import { MODAL_TYPE } from '@constants/modal.constant';
 
 export interface Props {
 	docs: DocsItemDtoType;
@@ -12,19 +15,16 @@ export interface Props {
 	style: 'card' | 'list';
 }
 
-const DocsItem = ({ docs, idx, style }: Props) => {
+const InterviewDocsItem = ({ docs, idx, style }: Props) => {
+	const { openModal } = useModal();
 	const handleClickDocsItem = () => {
-		//open modal
+		openModal(MODAL_TYPE.InterviewDocsItemModal, { docsUUID: docs.id, idx });
 	};
 	return (
-		<article
-			key={docs.docsUUID}
-			onClick={handleClickDocsItem}
-			css={(theme) => docsItemWrapper(theme, style)}
-		>
+		<article onClick={handleClickDocsItem} css={(theme) => docsItemWrapper(theme, style)}>
 			<div>
 				<div css={indexStyle}>#{idx}</div>
-				<div css={playTimeStyle}>{mmssFormatter(docs.playTime)}</div>
+				<div css={playTimeStyle}>{mmssFormatter(docs.videoPlayTime * ONE_SECOND)}</div>
 			</div>
 			<div>
 				<div css={createdAtStyle}>{docs.createdAt.toLocaleString()}</div>
@@ -36,4 +36,4 @@ const DocsItem = ({ docs, idx, style }: Props) => {
 	);
 };
 
-export default DocsItem;
+export default InterviewDocsItem;
diff --git a/frontend/src/components/ModalManager.tsx b/frontend/src/components/ModalManager.tsx
index 609f47ef..24dae574 100644
--- a/frontend/src/components/ModalManager.tsx
+++ b/frontend/src/components/ModalManager.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import { useRecoilValue } from 'recoil';
 import { currentModalState } from '@store/currentModal.store';
 import ReactDOM from 'react-dom';
-import EnterRoomModal from './Modal/EnterRoomModal';
-import InterviewDocsModal from './Modal/InterviewDocsModal';
+import EnterRoomModal from './@modal/EnterRoomModal';
+import InterviewDocsListModal from './@modal/InterviewDocsListModal/InterviewDocsListModal';
+import InterviewDocsItemModal from './@modal/InterviewDocsModal/InterviewDocsModal';
 
 const ModalManager = () => {
 	const currentModal = useRecoilValue(currentModalState);
@@ -13,7 +14,8 @@ const ModalManager = () => {
 	//TODO 다이나믹 import로 변경
 	const modalStore = {
 		EnterRoomModal,
-		InterviewDocsModal,
+		InterviewDocsListModal,
+		InterviewDocsItemModal,
 	};
 
 	const ModalComponent = modalStore[currentModal.modal];
diff --git a/frontend/src/constants/modal.constant.ts b/frontend/src/constants/modal.constant.ts
index cd603f76..2c336a75 100644
--- a/frontend/src/constants/modal.constant.ts
+++ b/frontend/src/constants/modal.constant.ts
@@ -1,4 +1,5 @@
 export const MODAL_TYPE = {
 	EnterRoomModal: 'EnterRoomModal',
-	InterviewDocsModal: 'InterviewDocsModal',
+	InterviewDocsListModal: 'InterviewDocsListModal',
+	InterviewDocsItemModal: 'InterviewDocsItemModal',
 };
diff --git a/frontend/src/constants/statusCode.constants.ts b/frontend/src/constants/statusCode.constants.ts
new file mode 100644
index 00000000..218c0621
--- /dev/null
+++ b/frontend/src/constants/statusCode.constants.ts
@@ -0,0 +1,5 @@
+export enum SC_TYPE {
+	OK = 200,
+	UNAUTHORIZED = 401,
+	INTERNAL_SERVER_ERROR = 500,
+}
diff --git a/frontend/src/customType/dto.ts b/frontend/src/customType/dto.ts
index 0c38e27b..0640af4d 100644
--- a/frontend/src/customType/dto.ts
+++ b/frontend/src/customType/dto.ts
@@ -16,8 +16,8 @@ export interface DocsReqDtoType {
 export interface DocsResDtoType {
 	docsUUID: string;
 	createdAt: Date;
-	playTime: number;
-	feedbacks: namedFeedback;
+	videoPlayTime: number;
+	feedbacks: namedFeedback[];
 }
 
 interface namedFeedback {
@@ -26,9 +26,9 @@ interface namedFeedback {
 }
 
 export interface DocsItemDtoType {
-	docsUUID: string;
+	id: string;
 	createdAt: Date;
-	playTime: number;
+	videoPlayTime: number;
 }
 
 export interface FeedbackDtoType {
diff --git a/frontend/src/customType/feedback.d.ts b/frontend/src/customType/feedback.d.ts
index 12e90957..42e5cd80 100644
--- a/frontend/src/customType/feedback.d.ts
+++ b/frontend/src/customType/feedback.d.ts
@@ -9,6 +9,7 @@ export interface EditableFeedbackType extends FeedbackType {
 	readOnly: boolean;
 }
 
-export interface FeedbackItemType extends EditableFeedbackType {
+export interface FeedbackItemType extends FeedbackType {
 	isFirst: boolean;
+	readOnly?: boolean;
 }
diff --git a/frontend/src/hooks/useAddFeedback.ts b/frontend/src/hooks/useAddFeedback.ts
new file mode 100644
index 00000000..90b0eedf
--- /dev/null
+++ b/frontend/src/hooks/useAddFeedback.ts
@@ -0,0 +1,44 @@
+import { EditableFeedbackType } from '@customType/feedback';
+import { feedbackIdsState, feedbackIdxMapState, feedbackState } from '@store/feedback.store';
+import { useRecoilTransaction_UNSTABLE, useRecoilValue } from 'recoil';
+
+interface AddFeedbackArgsType {
+	startTime: number;
+	inputVal: string;
+}
+
+const useAddFeedback = () => {
+	const feedbackIdxMap = useRecoilValue(feedbackIdxMapState);
+
+	const handleAddFeedback = ({ startTime, inputVal }: AddFeedbackArgsType) => {
+		feedbackIdxMap.set(startTime, feedbackIdxMap.get(startTime) + 1 || 1);
+		const nextInnerIdx = feedbackIdxMap.get(startTime);
+		const newFeedbackId = generateFeedbackId(startTime, nextInnerIdx);
+		const newFeedback = {
+			id: newFeedbackId,
+			startTime: startTime,
+			innerIndex: nextInnerIdx,
+			content: inputVal,
+			readOnly: true,
+		};
+
+		insertFeedback(newFeedback, newFeedbackId);
+	};
+
+	const generateFeedbackId = (startTime: number, innerIdx: number) => {
+		return ('000000' + startTime).slice(-6) + ('00' + innerIdx).slice(-2);
+	};
+
+	const insertFeedback = useRecoilTransaction_UNSTABLE(
+		({ set }) =>
+			(newFeedback: EditableFeedbackType, newFeedbackId: string) => {
+				set(feedbackIdsState, (todoId) => todoId.concat(newFeedbackId).sort());
+				set(feedbackState(newFeedbackId), newFeedback);
+			},
+		[]
+	);
+
+	return { handleAddFeedback };
+};
+
+export default useAddFeedback;
diff --git a/frontend/src/hooks/useCleanupInterview.ts b/frontend/src/hooks/useCleanupInterview.ts
new file mode 100644
index 00000000..460476ec
--- /dev/null
+++ b/frontend/src/hooks/useCleanupInterview.ts
@@ -0,0 +1,32 @@
+import { currentVideoTimeState } from '@store/currentVideoTime.store';
+import { feedbackIdsState, feedbackIdxMapState } from '@store/feedback.store';
+import { docsListQuery } from '@store/interviewDocs.store';
+import { roomUUIDState } from '@store/room.store';
+import { completedFbCntState, docsUUIDState } from '@store/interview.store';
+import { useCallback } from 'react';
+import { useRecoilRefresher_UNSTABLE, useRecoilValue, useResetRecoilState } from 'recoil';
+
+const useCleanupInterview = () => {
+	const roomUUID = useRecoilValue(roomUUIDState);
+	const docsListRefresher = useRecoilRefresher_UNSTABLE(docsListQuery(roomUUID));
+	const resetFeedback = useResetRecoilState(feedbackIdsState);
+	const resetFeedbackIdxMap = useResetRecoilState(feedbackIdxMapState);
+	const resetCurrentVideoTime = useResetRecoilState(currentVideoTimeState);
+	const resetDocsUUID = useResetRecoilState(docsUUIDState);
+	const resetCompletedFbCnt = useResetRecoilState(completedFbCntState);
+
+	const cleanupInterview = useCallback(() => {
+		console.log('cleanup interview');
+		resetFeedback();
+		resetFeedbackIdxMap();
+		resetCurrentVideoTime();
+		resetDocsUUID();
+		resetCompletedFbCnt();
+
+		docsListRefresher();
+	}, []);
+
+	return cleanupInterview;
+};
+
+export default useCleanupInterview;
diff --git a/frontend/src/hooks/useCleanupRoom.ts b/frontend/src/hooks/useCleanupRoom.ts
new file mode 100644
index 00000000..0a20392b
--- /dev/null
+++ b/frontend/src/hooks/useCleanupRoom.ts
@@ -0,0 +1,27 @@
+import { meInRoomState, othersInRoomState, roomUUIDState } from '@store/room.store';
+import { webRTCUserMapState } from '@store/webRTC.store';
+import { useCallback } from 'react';
+import { useResetRecoilState } from 'recoil';
+import useCleanupInterview from './useCleanupInterview';
+
+const useCleanupRoom = () => {
+	const cleanupInterview = useCleanupInterview();
+	const roomUUIDRefresher = useResetRecoilState(roomUUIDState);
+	const ohtersRefresher = useResetRecoilState(othersInRoomState);
+	const meRefresher = useResetRecoilState(meInRoomState);
+	const webRTCUserMapRefresher = useResetRecoilState(webRTCUserMapState);
+
+	const cleanupRoom = useCallback(() => {
+		console.log('cleanup room');
+		roomUUIDRefresher();
+		ohtersRefresher();
+		meRefresher();
+		webRTCUserMapRefresher();
+
+		cleanupInterview();
+	}, []);
+
+	return cleanupRoom;
+};
+
+export default useCleanupRoom;
diff --git a/frontend/src/hooks/useCrudFeedback.ts b/frontend/src/hooks/useEditFeedback.ts
similarity index 91%
rename from frontend/src/hooks/useCrudFeedback.ts
rename to frontend/src/hooks/useEditFeedback.ts
index 0a38b742..8e82f56b 100644
--- a/frontend/src/hooks/useCrudFeedback.ts
+++ b/frontend/src/hooks/useEditFeedback.ts
@@ -1,7 +1,7 @@
 import { feedbackIdsState, feedbackState } from '@store/feedback.store';
 import { useResetRecoilState, useSetRecoilState } from 'recoil';
 
-const useCrudFeedback = (feedbackId: string) => {
+const useEditFeedback = (feedbackId: string) => {
 	const setFeedback = useSetRecoilState(feedbackState(feedbackId));
 	const deleteFeedback = useResetRecoilState(feedbackState(feedbackId));
 	const setFeedbackIds = useSetRecoilState(feedbackIdsState);
@@ -32,4 +32,4 @@ const useCrudFeedback = (feedbackId: string) => {
 	return { handleStartEditFeedback, handleEndEditFeedback, handleFbChange, handleDeleteFeedback };
 };
 
-export default useCrudFeedback;
+export default useEditFeedback;
diff --git a/frontend/src/hooks/useSafeNavigate.ts b/frontend/src/hooks/useSafeNavigate.ts
index ecabd9fc..37f89647 100644
--- a/frontend/src/hooks/useSafeNavigate.ts
+++ b/frontend/src/hooks/useSafeNavigate.ts
@@ -1,13 +1,16 @@
-import { useSetRecoilState } from 'recoil';
+import { useRecoilRefresher_UNSTABLE, useSetRecoilState } from 'recoil';
 import { pageState } from '@store/page.store';
 import { PAGE_TYPE } from '@constants/page.constant';
+import isAuthQuery from '@store/auth.store';
 
 const useSafeNavigate = () => {
 	const setPage = useSetRecoilState(pageState);
+	const authRefresher = useRecoilRefresher_UNSTABLE(isAuthQuery);
 	const safeNavigate = (newPage: PAGE_TYPE) => {
+		authRefresher();
 		setPage(newPage);
 	};
-	
+
 	return { safeNavigate };
 };
 export default useSafeNavigate;
diff --git a/frontend/src/pages/Feedback/Feedback.style.ts b/frontend/src/pages/Feedback/Feedback.style.ts
index 7f92dd66..f778478b 100644
--- a/frontend/src/pages/Feedback/Feedback.style.ts
+++ b/frontend/src/pages/Feedback/Feedback.style.ts
@@ -17,16 +17,6 @@ export const feedbackContainerStyle = css`
 	margin: auto;
 `;
 
-export const feedbackSyncBtnStyle = (theme, isFbSync) => css`
-	background-color: ${isFbSync ? theme.colors.primary : theme.colors.white};
-	width: 50px;
-	height: 50px;
-	border-radius: 50%;
-	display: 'flex';
-	justify-content: 'center';
-	align-items: 'center';
-`;
-
 export const feedbackAreaStyle = css`
 	display: flex;
 	flex-direction: column;
diff --git a/frontend/src/pages/Feedback/Feedback.tsx b/frontend/src/pages/Feedback/Feedback.tsx
index e1978d53..6bc00f74 100644
--- a/frontend/src/pages/Feedback/Feedback.tsx
+++ b/frontend/src/pages/Feedback/Feedback.tsx
@@ -8,17 +8,14 @@ import BottomBar from '@components/BottomBar/BottomBar';
 import RoundButton from '@components/@shared/RoundButton/RoundButton';
 import usePreventLeave from '@hooks/usePreventLeave';
 import useSafeNavigate from '@hooks/useSafeNavigate';
-import { feedbackDtoSelector, isFbSyncState } from '@store/feedback.store';
-import { completedFbCntState, docsUUIDState, meInRoomState } from '@store/room.store';
+import useCleanupInterview from '@hooks/useCleanupInterview';
+import { feedbackDtoSelector, feedbackListSelector, isFbSyncState } from '@store/feedback.store';
+import { meInRoomState } from '@store/room.store';
+import { completedFbCntState, docsUUIDState } from '@store/interview.store';
 
 import { ReactComponent as LinkIcon } from '@assets/icon/link.svg';
 import { socket } from '../../service/socket';
-import {
-	feedbackWrapperStyle,
-	feedbackContainerStyle,
-	feedbackAreaStyle,
-	feedbackSyncBtnStyle,
-} from './Feedback.style';
+import { feedbackWrapperStyle, feedbackContainerStyle, feedbackAreaStyle } from './Feedback.style';
 import { PAGE_TYPE } from '@constants/page.constant';
 import theme from '@styles/theme';
 import { iconBgStyle } from '@styles/commonStyle';
@@ -35,13 +32,17 @@ interface endFeedbackResponseType {
 
 const Feedback = () => {
 	usePreventLeave();
-	const setCompletedFbCnt = useSetRecoilState(completedFbCntState);
 	const { safeNavigate } = useSafeNavigate();
+	const cleanupInterview = useCleanupInterview();
+
+	const setCompletedFbCnt = useSetRecoilState(completedFbCntState);
 	const [isFbSync, setIsFbSync] = useRecoilState(isFbSyncState);
-	const [videoUrl, setVideoUrl] = useState('');
 	const docsUUID = useRecoilValue(docsUUIDState);
-	const feedbackList = useRecoilValue(feedbackDtoSelector);
+	const feedbackListDto = useRecoilValue(feedbackDtoSelector);
+	const feedbackList = useRecoilValue(feedbackListSelector);
+
 	const me = useRecoilValue(meInRoomState);
+	const [videoUrl, setVideoUrl] = useState('');
 
 	const handleEndFeedback = useCallback(async () => {
 		const { isLastFeedback, count } = await socketEmit<endFeedbackResponseType>(
@@ -51,13 +52,13 @@ const Feedback = () => {
 		const feedbackDto: FeedbackDtoType = {
 			docsUUID,
 			userUUID: me.uuid,
-			feedbackList,
+			feedbackList: feedbackListDto,
 		};
 		axios.post(REST_TYPE.FEEDBACK, feedbackDto);
 
 		if (isLastFeedback) safeNavigate(PAGE_TYPE.LOBBY_PAGE);
 		else safeNavigate(PAGE_TYPE.WAITTING_PAGE);
-	}, [docsUUID, feedbackList, me]);
+	}, [docsUUID, feedbackListDto, me]);
 
 	useEffect(() => {
 		socket.on(SOCKET_EVENT_TYPE.DOWNLOAD_VIDEO, ({ videoUrl }) => {
@@ -65,17 +66,19 @@ const Feedback = () => {
 		});
 	}, []);
 
+	useEffect(() => {
+		return cleanupInterview;
+	}, []);
+
 	const finishFeedbackBtn = (
 		<RoundButton
 			style={{
-				backgroundColor: theme.colors.primary,
-				width: 200,
+				width: 160,
 				height: 50,
-				color: theme.colors.white,
 			}}
 			onClick={handleEndFeedback}
 		>
-			<div>피드백 종료</div>
+			<span>피드백 종료</span>
 		</RoundButton>
 	);
 
@@ -83,17 +86,21 @@ const Feedback = () => {
 		<div css={feedbackWrapperStyle}>
 			<div css={feedbackContainerStyle}>
 				<IntervieweeVideo src={videoUrl} width={400} autoplay muted controls />
-				<button
-					css={(theme) => feedbackSyncBtnStyle(theme, isFbSync)}
+				<RoundButton
+					style={{
+						width: 50,
+						height: 50,
+						backgroundColor: isFbSync ? theme.colors.primary : theme.colors.white,
+					}}
 					onClick={() => setIsFbSync((current) => !current)}
 				>
 					<LinkIcon
 						{...iconBgStyle}
 						fill={isFbSync ? theme.colors.white : theme.colors.primary}
 					/>
-				</button>
+				</RoundButton>
 				<div css={feedbackAreaStyle}>
-					<FeedbackList editable />
+					<FeedbackList feedbackList={feedbackList} editable />
 					<FeedbackForm />
 				</div>
 			</div>
diff --git a/frontend/src/pages/Interviewee/Interviewee.tsx b/frontend/src/pages/Interviewee/Interviewee.tsx
index c0eee756..d0fb8a9d 100644
--- a/frontend/src/pages/Interviewee/Interviewee.tsx
+++ b/frontend/src/pages/Interviewee/Interviewee.tsx
@@ -6,9 +6,9 @@ import IntervieweeVideo from '@components/IntervieweeVideo/IntervieweeVideo';
 import Video from '@components/@shared/Video/Video';
 import useSafeNavigate from '@hooks/useSafeNavigate';
 import usePreventLeave from '@hooks/usePreventLeave';
-import { webRTCStreamSelector, webRTCUserMapState } from '@store/webRTC.store';
+import { webRTCStreamSelector } from '@store/webRTC.store';
 import { currentVideoTimeState } from '@store/currentVideoTime.store';
-import { docsUUIDState, userRoleSelector } from '@store/room.store';
+import { docsUUIDState, userRoleSelector } from '@store/interview.store';
 
 import { socket } from '@service/socket';
 import mediaStreamer from '@service/mediaStreamer';
@@ -20,7 +20,6 @@ import { DocsReqDtoType } from '@customType/dto';
 import { intervieweeWrapperStyle } from './Interviewee.style';
 import BottomBar from '@components/BottomBar/BottomBar';
 import RoundButton from '@components/@shared/RoundButton/RoundButton';
-import theme from '@styles/theme';
 
 const Interviewee = () => {
 	usePreventLeave();
@@ -28,7 +27,6 @@ const Interviewee = () => {
 	const { startStream, stopStream } = mediaStreamer();
 
 	const { interviewee, interviewerList } = useRecoilValue(userRoleSelector);
-	const webRTCUserMap = useRecoilValue(webRTCUserMapState);
 	const currentVideoTime = useRecoilValue(currentVideoTimeState);
 	const streamList = useRecoilValue(webRTCStreamSelector);
 	const setDocsUUID = useSetRecoilState(docsUUIDState);
@@ -74,14 +72,12 @@ const Interviewee = () => {
 	const endInterviewBtn = (
 		<RoundButton
 			style={{
-				backgroundColor: theme.colors.primary,
-				width: 200,
+				width: 160,
 				height: 50,
-				color: theme.colors.white,
 			}}
 			onClick={hadleEndInterview}
 		>
-			<div>면접 종료</div>
+			<span>면접 종료</span>
 		</RoundButton>
 	);
 
diff --git a/frontend/src/pages/Interviewer/Interviewer.tsx b/frontend/src/pages/Interviewer/Interviewer.tsx
index 9d090d19..48fda1dd 100644
--- a/frontend/src/pages/Interviewer/Interviewer.tsx
+++ b/frontend/src/pages/Interviewer/Interviewer.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useRecoilValue } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 
 import IntervieweeVideo from '@components/IntervieweeVideo/IntervieweeVideo';
 import FeedbackList from '@components/FeedbackList/FeedbackList';
@@ -7,7 +7,8 @@ import Video from '@components/@shared/Video/Video';
 import useSafeNavigate from '@hooks/useSafeNavigate';
 import usePreventLeave from '@hooks/usePreventLeave';
 import { webRTCStreamSelector } from '@store/webRTC.store';
-import { userRoleSelector } from '@store/room.store';
+import { docsUUIDState, userRoleSelector } from '@store/interview.store';
+import { feedbackListSelector } from '@store/feedback.store';
 
 import { socket } from '../../service/socket';
 import { PAGE_TYPE } from '@constants/page.constant';
@@ -24,8 +25,10 @@ const Interviewer = () => {
 	const { safeNavigate } = useSafeNavigate();
 	usePreventLeave();
 
+	const feedbackList = useRecoilValue(feedbackListSelector);
 	const { interviewee, interviewerList } = useRecoilValue(userRoleSelector);
 	const streamList = useRecoilValue(webRTCStreamSelector);
+	const setDocsUUID = useSetRecoilState(docsUUIDState);
 
 	const hadleEndInterview = () => {
 		socketEmit(SOCKET_EVENT_TYPE.END_INTERVIEW);
@@ -36,7 +39,8 @@ const Interviewer = () => {
 	};
 
 	useEffect(() => {
-		socket.on(SOCKET_EVENT_TYPE.START_FEEDBACK, () => {
+		socket.on(SOCKET_EVENT_TYPE.START_FEEDBACK, ({ docsUUID }) => {
+			setDocsUUID(docsUUID);
 			safeNavigate(PAGE_TYPE.FEEDBACK_PAGE);
 		});
 	}, []);
@@ -44,14 +48,12 @@ const Interviewer = () => {
 	const endInterviewBtn = (
 		<RoundButton
 			style={{
-				backgroundColor: theme.colors.primary,
-				width: 200,
+				width: 160,
 				height: 50,
-				color: theme.colors.white,
 			}}
 			onClick={hadleEndInterview}
 		>
-			<div>면접 종료</div>
+			<span>면접 종료</span>
 		</RoundButton>
 	);
 
@@ -77,7 +79,7 @@ const Interviewer = () => {
 					))}
 				</div>
 				<div css={feedbackAreaStyle}>
-					<FeedbackList editable />
+					<FeedbackList feedbackList={feedbackList} editable />
 					<FeedbackForm />
 				</div>
 			</div>
diff --git a/frontend/src/pages/Landing/Landing.tsx b/frontend/src/pages/Landing/Landing.tsx
index a0f4dee1..03620ed2 100644
--- a/frontend/src/pages/Landing/Landing.tsx
+++ b/frontend/src/pages/Landing/Landing.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useRecoilRefresher_UNSTABLE, useSetRecoilState } from 'recoil';
 import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
@@ -53,8 +53,8 @@ const Landing = () => {
 
 	const handleSignOut = async () => {
 		//TODO TOAST로 교체
-		const res = await axios.get('/api/auth/logout');
-		alert(res.status);
+		await axios.get('/api/auth/logout');
+		alert('로그아웃 되었습니다.');
 		refreshAuth();
 		naviagte(ROUTE_TYPE.LOGIN_ROUTE);
 	};
@@ -84,7 +84,7 @@ const Landing = () => {
 					<Button
 						size="small"
 						color="black"
-						onClick={() => openModal(MODAL_TYPE.InterviewDocsModal)}
+						onClick={() => openModal(MODAL_TYPE.InterviewDocsListModal)}
 					>
 						<FolderIcon />
 						<span>기록</span>
diff --git a/frontend/src/pages/Lobby/Lobby.style.ts b/frontend/src/pages/Lobby/Lobby.style.ts
index 49836359..309fd8b0 100644
--- a/frontend/src/pages/Lobby/Lobby.style.ts
+++ b/frontend/src/pages/Lobby/Lobby.style.ts
@@ -6,23 +6,6 @@ export const lobbyWrapperStyle = (theme) => css`
 	background-color: ${theme.colors.tertiary};
 `;
 
-export const startInterviewBtnStyle = (theme) => css`
-	box-sizing: border-box;
-	background-color: ${theme.colors.primary};
-	width: 200px;
-	height: 50px;
-	border-radius: 36px;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: 0px 30px;
-
-	div {
-		color: white;
-		font-size: 24px;
-	}
-`;
-
 export const VideoAreaStyle = () => css`
 	display: flex;
 	justify-content: center;
diff --git a/frontend/src/pages/Lobby/Lobby.tsx b/frontend/src/pages/Lobby/Lobby.tsx
index b804e934..41382c83 100644
--- a/frontend/src/pages/Lobby/Lobby.tsx
+++ b/frontend/src/pages/Lobby/Lobby.tsx
@@ -16,23 +16,21 @@ import { UserType } from '@customType/user';
 import { SOCKET_EVENT_TYPE } from '@constants/socket.constant';
 import { PAGE_TYPE } from '@constants/page.constant';
 import { iconBgStyle } from '@styles/commonStyle';
-import { lobbyWrapperStyle, startInterviewBtnStyle, VideoAreaStyle } from './Lobby.style';
+import { lobbyWrapperStyle, VideoAreaStyle } from './Lobby.style';
 import { ReactComponent as BroadcastIcon } from '@assets/icon/broadcast.svg';
+import RoundButton from '@components/@shared/RoundButton/RoundButton';
 
 interface joinInterviewResponseType {
 	usersInRoom: UserType[];
 }
 
 const Lobby = () => {
+	usePreventLeave();
 	const { safeNavigate } = useSafeNavigate();
 	const [me, setMe] = useRecoilState<UserType>(meInRoomState);
 	const [others, setOthers] = useRecoilState<UserType[]>(othersInRoomState);
-
-	usePreventLeave();
-
 	const [webRTCUserList, setWebRTCUserList] = useRecoilState(webRTCUserMapState);
 	const { startConnection } = useWebRTCSignaling(webRTCUserList, setWebRTCUserList);
-
 	const streamList = useRecoilValue(webRTCStreamSelector);
 
 	useEffect(() => {
@@ -81,10 +79,16 @@ const Lobby = () => {
 	};
 
 	const startInterviewBtn = (
-		<button css={startInterviewBtnStyle} onClick={handleStartInterviewee}>
+		<RoundButton
+			onClick={handleStartInterviewee}
+			style={{
+				width: 180,
+				height: 50,
+			}}
+		>
 			<BroadcastIcon {...iconBgStyle} />
-			<div>면접 시작</div>
-		</button>
+			<span>면접 시작</span>
+		</RoundButton>
 	);
 
 	return (
diff --git a/frontend/src/pages/Waiting/Waiting.tsx b/frontend/src/pages/Waiting/Waiting.tsx
index bf392062..729254a9 100644
--- a/frontend/src/pages/Waiting/Waiting.tsx
+++ b/frontend/src/pages/Waiting/Waiting.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
-import { completedFbCntState, othersInRoomState } from '@store/room.store';
+import { othersInRoomState } from '@store/room.store';
+import { completedFbCntState } from '@store/interview.store';
 import usePreventLeave from '@hooks/usePreventLeave';
 import useSafeNavigate from '@hooks/useSafeNavigate';
 import { PAGE_TYPE } from '@constants/page.constant';
@@ -9,9 +10,11 @@ import { PAGE_TYPE } from '@constants/page.constant';
 import { socket } from '../../service/socket';
 import BottomBar from '@components/BottomBar/BottomBar';
 import { waitingWrapperStyle } from './Waiting.style';
+import useCleanupInterview from '@hooks/useCleanupInterview';
 
 const Waiting = () => {
 	usePreventLeave();
+	const cleanupInterview = useCleanupInterview();
 	const { safeNavigate } = useSafeNavigate();
 	const totalUser = useRecoilValue(othersInRoomState);
 	const [completedFbCnt, setCompletedFbCnt] = useRecoilState(completedFbCntState);
@@ -27,6 +30,10 @@ const Waiting = () => {
 		});
 	}, []);
 
+	useEffect(() => {
+		return cleanupInterview;
+	}, []);
+
 	return (
 		<>
 			<div css={waitingWrapperStyle}>
diff --git a/frontend/src/service/socket.ts b/frontend/src/service/socket.ts
index 41d77f3a..bf939f71 100644
--- a/frontend/src/service/socket.ts
+++ b/frontend/src/service/socket.ts
@@ -1,3 +1,3 @@
 import { io } from 'socket.io-client';
 
-export const socket = io('/socket');
\ No newline at end of file
+export const socket = io('/socket');
diff --git a/frontend/src/store/auth.store.ts b/frontend/src/store/auth.store.ts
index 5494a3a2..7fe1433c 100644
--- a/frontend/src/store/auth.store.ts
+++ b/frontend/src/store/auth.store.ts
@@ -1,3 +1,5 @@
+import { REST_TYPE } from '@constants/rest.constant';
+import { SC_TYPE } from '@constants/statusCode.constants';
 import axios from 'axios';
 import { selector } from 'recoil';
 
@@ -5,12 +7,10 @@ const isAuthQuery = selector({
 	key: 'isAUth',
 	get: async () => {
 		try {
-			const res = await axios.get('/api/auth/login');
-			console.log(res);
-			return res.status === 200;
+			const res = await axios.get(REST_TYPE.LOGIN);
+			return res.status === SC_TYPE.OK;
 		} catch (e) {
-			console.log(e);
-			if (e.response.status === 401) return false;
+			if (e.response.status === SC_TYPE.UNAUTHORIZED) return false;
 			throw e;
 		}
 	},
diff --git a/frontend/src/store/feedback.store.ts b/frontend/src/store/feedback.store.ts
index bf5ad399..ab7b090c 100644
--- a/frontend/src/store/feedback.store.ts
+++ b/frontend/src/store/feedback.store.ts
@@ -1,4 +1,5 @@
 import { EditableFeedbackType } from '@customType/feedback';
+import { getFirstLabeledFbList } from '@utils/common.util';
 import { atom, atomFamily, selector } from 'recoil';
 
 export const feedbackState = atomFamily<EditableFeedbackType, string>({
@@ -29,16 +30,9 @@ export const isFbSyncState = atom({
 export const feedbackListSelector = selector({
 	key: 'feedbackListSelector',
 	get: ({ get }) => {
-		let prev = -1;
-		const fbList = get(feedbackIdsState).map((id) => {
-			const fb = { ...get(feedbackState(id)), isFirst: false };
-			if (fb.startTime > prev) {
-				prev = fb.startTime;
-				fb.isFirst = true;
-			}
-			return fb;
-		});
-		return fbList;
+		const fbList = get(feedbackIdsState).map((id) => get(feedbackState(id)));
+		const firstLabeledFbList = getFirstLabeledFbList(fbList);
+		return firstLabeledFbList;
 	},
 });
 
diff --git a/frontend/src/store/interview.store.ts b/frontend/src/store/interview.store.ts
new file mode 100644
index 00000000..92b30b77
--- /dev/null
+++ b/frontend/src/store/interview.store.ts
@@ -0,0 +1,29 @@
+import { atom, selector } from 'recoil';
+import { meInRoomState, othersInRoomState } from './room.store';
+
+export const docsUUIDState = atom({
+	key: 'docsUUIDState',
+	default: null,
+});
+
+export const completedFbCntState = atom({
+	key: 'completedFbCntState',
+	default: 0,
+});
+
+export const userRoleSelector = selector({
+	key: 'userRoleSelector',
+	get: ({ get }) => {
+		const totalUser = [get(meInRoomState), ...get(othersInRoomState)];
+
+		return totalUser.reduce(
+			(acc, cur) => {
+				if (cur.role === 'interviewee') acc.interviewee = cur;
+				else acc.interviewerList.push(cur);
+
+				return acc;
+			},
+			{ interviewee: null, interviewerList: [] }
+		);
+	},
+});
diff --git a/frontend/src/store/interviewDocs.store.ts b/frontend/src/store/interviewDocs.store.ts
new file mode 100644
index 00000000..acb9435a
--- /dev/null
+++ b/frontend/src/store/interviewDocs.store.ts
@@ -0,0 +1,32 @@
+import { REST_TYPE } from '@constants/rest.constant';
+import { SC_TYPE } from '@constants/statusCode.constants';
+import { DocsItemDtoType, DocsResDtoType } from '@customType/dto';
+import axios from 'axios';
+import { selectorFamily } from 'recoil';
+
+export const docsListQuery = selectorFamily<DocsItemDtoType[], string>({
+	key: 'docsListQuery',
+	get: (roomUUID) => async () => {
+		try {
+			const params = { 'room-uuid': roomUUID };
+			const res = await axios.get(REST_TYPE.INTERVIEW_DOCS_LIST, { params });
+
+			if (res.status === SC_TYPE.OK) return res.data.data;
+		} catch (e) {
+			console.log(e);
+		}
+	},
+});
+
+export const docsItemQuery = selectorFamily<DocsResDtoType, string>({
+	key: 'docsItemQuery',
+	get: (docsUUID) => async () => {
+		try {
+			const res = await axios.get(REST_TYPE.INTERVIEW_DOCS + `/${docsUUID}`);
+
+			if (res.status === SC_TYPE.OK) return res.data.data;
+		} catch (e) {
+			console.log(e);
+		}
+	},
+});
diff --git a/frontend/src/store/room.store.ts b/frontend/src/store/room.store.ts
index 5505b874..c0f3b4e9 100644
--- a/frontend/src/store/room.store.ts
+++ b/frontend/src/store/room.store.ts
@@ -1,16 +1,11 @@
 import { UserType } from '@customType/user';
-import { atom, selector } from 'recoil';
+import { atom } from 'recoil';
 
 export const roomUUIDState = atom({
 	key: 'roomUUIDState',
 	default: null,
 });
 
-export const docsUUIDState = atom({
-	key: 'docsUUIDState',
-	default: null,
-});
-
 export const othersInRoomState = atom<UserType[]>({
 	key: 'othersInRoomState',
 	default: [],
@@ -20,25 +15,3 @@ export const meInRoomState = atom<UserType>({
 	key: 'meInRoomState',
 	default: null,
 });
-
-export const completedFbCntState = atom({
-	key: 'completedFbCntState',
-	default: 0,
-});
-
-export const userRoleSelector = selector({
-	key: 'userRoleSelector',
-	get: ({ get }) => {
-		const totalUser = [get(meInRoomState), ...get(othersInRoomState)];
-
-		return totalUser.reduce(
-			(acc, cur) => {
-				if (cur.role === 'interviewee') acc.interviewee = cur;
-				else acc.interviewerList.push(cur);
-
-				return acc;
-			},
-			{ interviewee: null, interviewerList: [] }
-		);
-	},
-});
diff --git a/frontend/src/utils/common.util.ts b/frontend/src/utils/common.util.ts
index 9a1e2b6b..73fad736 100644
--- a/frontend/src/utils/common.util.ts
+++ b/frontend/src/utils/common.util.ts
@@ -1,4 +1,5 @@
 import { ONE_MINUTE, ONE_SECOND } from '@constants/time.constant';
+import { EditableFeedbackType, FeedbackItemType, FeedbackType } from '@customType/feedback';
 
 export const mmssFormatter = (ms: number) => {
 	const mm = paddingFormatter(ms / ONE_MINUTE);
@@ -14,3 +15,19 @@ const paddingFormatter = (n: number) => {
 	const sliceSize = l > 2 ? l : 2;
 	return ('00' + n).slice(-sliceSize);
 };
+
+export const getFirstLabeledFbList = (
+	fbList: EditableFeedbackType[] | FeedbackType[]
+): FeedbackItemType[] => {
+	let prev = -1;
+	return fbList.map((fb_) => {
+		const fb = { ...fb_ };
+		fb.isFirst = false;
+		if (fb.startTime > prev) {
+			prev = fb.startTime;
+			fb.isFirst = true;
+		}
+
+		return fb;
+	});
+};