Merge pull request #158 from boostcampwm-2022/157-interviewee-interviewer-페이지-스타일링

seyoung8239 · web-flow · commit a0a965971b6c · 2022-12-09T06:52:56.000+09:00
interviewee, interviewer, waiting 페이지 스타일링
diff --git a/frontend/src/components/FeedbackEditBtns/FeedbackEditBtns.tsx b/frontend/src/components/FeedbackEditBtns/FeedbackEditBtns.tsx
@@ -5,7 +5,7 @@ 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 { iconSxStyle } from '@styles/commonStyle';
 import { fbBtnContainer } from './FeedbackEditBtns.style';
 
 interface Props {
@@ -21,15 +21,15 @@ const FeedbackEditBtn = ({ id, readOnly }: Props) => {
 		<div css={fbBtnContainer}>
 			{readOnly ? (
 				<button onClick={handleStartEditFeedback}>
-					<EditIcon {...iconSmStyle} fill="black" />
+					<EditIcon {...iconSxStyle} fill="black" />
 				</button>
 			) : (
 				<button onClick={handleEndEditFeedback}>
-					<CheckIcon {...iconSmStyle} fill="black" />
+					<CheckIcon {...iconSxStyle} fill="black" />
 				</button>
 			)}
 			<button onClick={handleDeleteFeedback}>
-				<DeleteIcon {...iconSmStyle} fill="black" />
+				<DeleteIcon {...iconSxStyle} fill="black" />
 			</button>
 		</div>
 	);
diff --git a/frontend/src/components/FeedbackForm/FeedbackForm.style.ts b/frontend/src/components/FeedbackForm/FeedbackForm.style.ts
@@ -21,7 +21,7 @@ export const fbInputStyle = (theme) => css`
 `;
 
 export const fbStartTimeStyle = (theme) => css`
-	width: 30px;
+	width: 45px;
 	height: 15px;
 	font-size: 12px;
 	border-radius: 2px;
diff --git a/frontend/src/components/FeedbackForm/FeedbackForm.tsx b/frontend/src/components/FeedbackForm/FeedbackForm.tsx
@@ -1,6 +1,8 @@
+import { ONE_SECOND } from '@constants/time.constant';
 import { EditableFeedbackType } from '@customType/feedback';
 import { currentVideoTimeState } from '@store/currentVideoTime.store';
 import { feedbackIdsState, feedbackIdxMapState, feedbackState } from '@store/feedback.store';
+import { mmssFormatter } from '@utils/common.util';
 import React, { useState } from 'react';
 import { useRecoilTransaction_UNSTABLE, useRecoilValue } from 'recoil';
 
@@ -57,7 +59,9 @@ const FeedbackForm = () => {
 
 	return (
 		<div css={fbFormWrapperStyle}>
-			<div css={fbStartTimeStyle}>{inputVal ? startTime : currentVideoTime}</div>
+			<div css={fbStartTimeStyle}>
+				{mmssFormatter((inputVal ? startTime : currentVideoTime) * ONE_SECOND)}
+			</div>
 			<textarea
 				value={inputVal}
 				onKeyDown={handleKeyDown}
diff --git a/frontend/src/components/FeedbackItem/FeedbackItem.style.ts b/frontend/src/components/FeedbackItem/FeedbackItem.style.ts
@@ -17,7 +17,7 @@ export const fbTextAreaStyle = (theme) => css`
 `;
 
 export const fbStartTimeStyle = (theme) => css`
-	width: 30px;
+	width: 45px;
 	height: 15px;
 	font-size: 12px;
 	border-radius: 2px;
diff --git a/frontend/src/components/FeedbackItem/FeedbackItem.tsx b/frontend/src/components/FeedbackItem/FeedbackItem.tsx
@@ -26,11 +26,8 @@ const FeedbackItem = ({ feedback, feedbackRef, index, editableBtns }: Props) =>
 	const { handleFbChange } = useCrudFeedback(feedback.id);
 
 	useEffect(() => {
-		const effect = () => {
-			if (!feedbackRef) return;
+		if (feedbackRef)
 			feedbackRef.current[index].style.height = textareaRef.current.scrollHeight + 'px';
-		};
-		effect();
 	});
 
 	const { startTime, isFirst, content, readOnly } = feedback;
@@ -41,13 +38,8 @@ const FeedbackItem = ({ feedback, feedbackRef, index, editableBtns }: Props) =>
 		setCurrentVideoTime(startTime);
 	};
 
-	const getFbRef = (el) => {
-		if (!feedbackRef) return;
-		return (feedbackRef.current[index] = el);
-	};
-
 	return (
-		<div ref={getFbRef} css={feedbackBoxStyle}>
+		<div ref={(el) => (feedbackRef.current[index] = el)} css={feedbackBoxStyle}>
 			<div css={fbStartTimeStyle} style={{ visibility: isFirst ? 'visible' : 'hidden' }}>
 				{mmssFormatter(startTime * ONE_SECOND)}
 			</div>
diff --git a/frontend/src/constants/page.constant.ts b/frontend/src/constants/page.constant.ts
@@ -5,5 +5,5 @@ export enum PAGE_TYPE {
 	INTERVIEWER_PAGE = 'interviewer',
 	INTERVIEWEE_PAGE = 'interviewee',
 	FEEDBACK_PAGE = 'feedback',
-	WAITTING_PAGE = 'waitting',
+	WAITTING_PAGE = 'waiting',
 }
diff --git a/frontend/src/constants/route.constant.ts b/frontend/src/constants/route.constant.ts
@@ -5,5 +5,5 @@ export enum ROUTE_TYPE {
 	INTERVIEWER_ROUTE = '/interviewer',
 	INTERVIEWEE_ROUTE = '/interviewee',
 	FEEDBACK_ROUTE = '/feedback',
-	WAITTING_ROUTE = '/waitting',
+	WAITTING_ROUTE = '/waiting',
 }
diff --git a/frontend/src/pages/Feedback/Feedback.style.ts b/frontend/src/pages/Feedback/Feedback.style.ts
@@ -7,7 +7,7 @@ export const feedbackWrapperStyle = (theme) => css`
 	background-color: ${theme.colors.tertiary};
 `;
 
-export const feedbackPageContainerStyle = css`
+export const feedbackContainerStyle = css`
 	height: 100%;
 	display: flex;
 	gap: 25px;
@@ -19,9 +19,9 @@ export const feedbackPageContainerStyle = css`
 
 export const feedbackSyncBtnStyle = (theme, isFbSync) => css`
 	background-color: ${isFbSync ? theme.colors.primary : theme.colors.white};
-	width: 50;
-	height: 50;
-	border-radius: '25px';
+	width: 50px;
+	height: 50px;
+	border-radius: 50%;
 	display: 'flex';
 	justify-content: 'center';
 	align-items: 'center';
diff --git a/frontend/src/pages/Feedback/Feedback.tsx b/frontend/src/pages/Feedback/Feedback.tsx
@@ -15,7 +15,7 @@ import { ReactComponent as LinkIcon } from '@assets/icon/link.svg';
 import { socket } from '../../service/socket';
 import {
 	feedbackWrapperStyle,
-	feedbackPageContainerStyle,
+	feedbackContainerStyle,
 	feedbackAreaStyle,
 	feedbackSyncBtnStyle,
 } from './Feedback.style';
@@ -81,7 +81,7 @@ const Feedback = () => {
 
 	return (
 		<div css={feedbackWrapperStyle}>
-			<div css={feedbackPageContainerStyle}>
+			<div css={feedbackContainerStyle}>
 				<IntervieweeVideo src={videoUrl} width={400} autoplay muted controls />
 				<button
 					css={(theme) => feedbackSyncBtnStyle(theme, isFbSync)}
diff --git a/frontend/src/pages/Interviewee/Interviewee.style.tsx b/frontend/src/pages/Interviewee/Interviewee.style.tsx
@@ -0,0 +1,7 @@
+import { css } from '@emotion/react';
+
+export const intervieweeWrapperStyle = (theme) => css`
+	width: 100%;
+	height: 100%;
+	background-color: ${theme.colors.tertiary};
+`;
diff --git a/frontend/src/pages/Interviewee/Interviewee.tsx b/frontend/src/pages/Interviewee/Interviewee.tsx
@@ -17,6 +17,10 @@ import { SOCKET_EVENT_TYPE } from '@constants/socket.constant';
 import { socketEmit } from '@api/socket.api';
 import { REST_TYPE } from '@constants/rest.constant';
 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();
@@ -67,9 +71,22 @@ const Interviewee = () => {
 		};
 	}, [currentVideoTime]);
 
+	const endInterviewBtn = (
+		<RoundButton
+			style={{
+				backgroundColor: theme.colors.primary,
+				width: 200,
+				height: 50,
+				color: theme.colors.white,
+			}}
+			onClick={hadleEndInterview}
+		>
+			<div>면접 종료</div>
+		</RoundButton>
+	);
+
 	return (
-		<>
-			<div>Interviewee</div>
+		<div css={intervieweeWrapperStyle}>
 			<IntervieweeVideo
 				key={interviewee.uuid}
 				src={getStreamFromUUID(interviewee.uuid)}
@@ -86,8 +103,8 @@ const Interviewee = () => {
 					muted
 				/>
 			))}
-			<button onClick={hadleEndInterview}>면접 종료</button>
-		</>
+			<BottomBar mainController={endInterviewBtn} />
+		</div>
 	);
 };
 
diff --git a/frontend/src/pages/Interviewer/Interviewer.style.tsx b/frontend/src/pages/Interviewer/Interviewer.style.tsx
@@ -0,0 +1,17 @@
+import { css } from '@emotion/react';
+
+export const interviewerWrapperStyle = (theme) => css`
+	width: 100%;
+	height: 100%;
+	background-color: ${theme.colors.tertiary};
+`;
+
+export const interviewerContainerStyle = css`
+	height: 100%;
+	display: flex;
+	gap: 25px;
+	justify-content: center;
+	align-items: center;
+	max-width: 1200px;
+	margin: auto;
+`;
diff --git a/frontend/src/pages/Interviewer/Interviewer.tsx b/frontend/src/pages/Interviewer/Interviewer.tsx
@@ -12,8 +12,13 @@ import { userRoleSelector } from '@store/room.store';
 import { socket } from '../../service/socket';
 import { PAGE_TYPE } from '@constants/page.constant';
 import { SOCKET_EVENT_TYPE } from '@constants/socket.constant';
-import { css } from '@emotion/react';
 import { socketEmit } from '@api/socket.api';
+import { interviewerContainerStyle, interviewerWrapperStyle } from './Interviewer.style';
+import RoundButton from '@components/@shared/RoundButton/RoundButton';
+import theme from '@styles/theme';
+import BottomBar from '@components/BottomBar/BottomBar';
+import FeedbackForm from '@components/FeedbackForm/FeedbackForm';
+import { feedbackAreaStyle } from '@pages/Feedback/Feedback.style';
 
 const Interviewer = () => {
 	const { safeNavigate } = useSafeNavigate();
@@ -36,41 +41,49 @@ const Interviewer = () => {
 		});
 	}, []);
 
-	return (
-		<div css={InterviewerWrapperStyle}>
-			<div>Interviewer</div>
-			<div>면접자 : {interviewee.uuid}</div>
-			<IntervieweeVideo
-				key={interviewee.uuid}
-				src={getStreamFromUUID(interviewee.uuid)}
-				width={400}
-				autoplay
-				muted
-			/>
-			{interviewerList.map((interviewer) => (
-				<Video
-					key={interviewer.uuid}
-					src={getStreamFromUUID(interviewer.uuid)}
-					width={200}
-					autoplay
-					muted
-				/>
-			))}
+	const endInterviewBtn = (
+		<RoundButton
+			style={{
+				backgroundColor: theme.colors.primary,
+				width: 200,
+				height: 50,
+				color: theme.colors.white,
+			}}
+			onClick={hadleEndInterview}
+		>
+			<div>면접 종료</div>
+		</RoundButton>
+	);
 
-			<FeedbackList editable />
-			<button onClick={hadleEndInterview}>면접 종료</button>
+	return (
+		<div css={interviewerWrapperStyle}>
+			<div css={interviewerContainerStyle}>
+				<div>
+					<IntervieweeVideo
+						key={interviewee.uuid}
+						src={getStreamFromUUID(interviewee.uuid)}
+						width={400}
+						autoplay
+						muted
+					/>
+					{interviewerList.map((interviewer) => (
+						<Video
+							key={interviewer.uuid}
+							src={getStreamFromUUID(interviewer.uuid)}
+							width={200}
+							autoplay
+							muted
+						/>
+					))}
+				</div>
+				<div css={feedbackAreaStyle}>
+					<FeedbackList editable />
+					<FeedbackForm />
+				</div>
+			</div>
+			<BottomBar mainController={endInterviewBtn} />
 		</div>
 	);
 };
 
 export default Interviewer;
-
-const InterviewerWrapperStyle = (theme) => css`
-	display: flex;
-	justify-content: center;
-	align-items: center;
-
-	width: 100%;
-	height: 100%;
-	background-color: ${theme.colors.primary3};
-`;
diff --git a/frontend/src/pages/Waiting/Waiting.style.ts b/frontend/src/pages/Waiting/Waiting.style.ts
@@ -0,0 +1,20 @@
+import { css } from '@emotion/react';
+
+export const waitingWrapperStyle = (theme) => css`
+	width: 100%;
+	height: 100%;
+
+	text-align: center;
+	background-color: ${theme.colors.tertiary};
+
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	gap: 40px;
+
+	div {
+		font-size: 36px;
+		color: white;
+	}
+`;
diff --git a/frontend/src/pages/Waiting/Waiting.tsx b/frontend/src/pages/Waiting/Waiting.tsx
@@ -7,11 +7,15 @@ import useSafeNavigate from '@hooks/useSafeNavigate';
 import { PAGE_TYPE } from '@constants/page.constant';
 
 import { socket } from '../../service/socket';
+import BottomBar from '@components/BottomBar/BottomBar';
+import { waitingWrapperStyle } from './Waiting.style';
 
-const Waitting = () => {
+const Waiting = () => {
+	usePreventLeave();
 	const { safeNavigate } = useSafeNavigate();
 	const totalUser = useRecoilValue(othersInRoomState);
 	const [completedFbCnt, setCompletedFbCnt] = useRecoilState(completedFbCntState);
+
 	useEffect(() => {
 		socket.on('count_feedback', (res) => {
 			const { count } = res;
@@ -22,15 +26,18 @@ const Waitting = () => {
 			safeNavigate(PAGE_TYPE.LOBBY_PAGE);
 		});
 	}, []);
-	usePreventLeave();
-	
+
 	return (
 		<>
-			<div style={{ padding: '50px' }}>
-				{completedFbCnt}/{totalUser.length}
+			<div css={waitingWrapperStyle}>
+				<div>면접관이 피드백을 정리 중입니다.</div>
+				<div>
+					{totalUser.length}명 중 {completedFbCnt}명 완료
+				</div>
 			</div>
+			<BottomBar />
 		</>
 	);
 };
 
-export default Waitting;
+export default Waiting;
diff --git a/frontend/src/routes/PrivateRoutes.tsx b/frontend/src/routes/PrivateRoutes.tsx
@@ -5,7 +5,7 @@ import Landing from '@pages/Landing/Landing';
 import Lobby from '@pages/Lobby/Lobby';
 import Interviewee from '@pages/Interviewee/Interviewee';
 import Interviewer from '@pages/Interviewer/Interviewer';
-import Waitting from '@pages/Waitting/Waitting';
+import Waiting from '@pages/Waiting/Waiting';
 import Feedback from '@pages/Feedback/Feedback';
 import StrictRoute from './StrictRoute';
 import { ROUTE_TYPE } from '@constants/route.constant';
@@ -38,7 +38,7 @@ const PrivateRoutes = () => {
 				<Route path={INTERVIEWEE_ROUTE} element={<Interviewee />} />
 			</Route>
 			<Route element={<StrictRoute targetPath={WAITTING_ROUTE} />}>
-				<Route path={WAITTING_ROUTE} element={<Waitting />} />
+				<Route path={WAITTING_ROUTE} element={<Waiting />} />
 			</Route>
 			<Route element={<StrictRoute targetPath={FEEDBACK_ROUTE} />}>
 				<Route path={FEEDBACK_ROUTE} element={<Feedback />} />
diff --git a/frontend/src/styles/commonStyle.ts b/frontend/src/styles/commonStyle.ts

Original file line number	Diff line number	Diff line change
`@@ -5,5 +5,5 @@ export enum PAGE_TYPE {`
`5`	`5`	`INTERVIEWER_PAGE = 'interviewer',`
`6`	`6`	`INTERVIEWEE_PAGE = 'interviewee',`
`7`	`7`	`FEEDBACK_PAGE = 'feedback',`
`8`		`- WAITTING_PAGE = 'waitting',`
	`8`	`+ WAITTING_PAGE = 'waiting',`
`9`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5,5 +5,5 @@ export enum ROUTE_TYPE {`
`5`	`5`	`INTERVIEWER_ROUTE = '/interviewer',`
`6`	`6`	`INTERVIEWEE_ROUTE = '/interviewee',`
`7`	`7`	`FEEDBACK_ROUTE = '/feedback',`
`8`		`- WAITTING_ROUTE = '/waitting',`
	`8`	`+ WAITTING_ROUTE = '/waiting',`
`9`	`9`	`}`