💄 design: (FE) - RoundButton 적용

Author: seyoung8239

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

@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import theme from '@styles/theme';
 
 export const roundButtonStyle = (style) => css`
 	display: flex;
@@ -9,7 +10,11 @@ export const roundButtonStyle = (style) => css`
 	width: ${style.width}px;
 	height: ${style.height}px;
 	border-radius: ${style.height / 2}px;
-	background-color: ${style.backgroundColor};
+	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/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;

frontend/src/pages/Feedback/Feedback.tsx

@@ -15,12 +15,7 @@ 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';
@@ -78,30 +73,32 @@ const Feedback = () => {
 	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>
 	);
 
 	return (
 		<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 feedbackList={feedbackList} editable />
 					<FeedbackForm />

frontend/src/pages/Interviewee/Interviewee.tsx

@@ -6,7 +6,7 @@ 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/interview.store';
 
@@ -20,15 +20,13 @@ 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();
 	const { safeNavigate } = useSafeNavigate();
 	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>
 	);
 

frontend/src/pages/Interviewer/Interviewer.tsx

@@ -48,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>
 	);
 

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;

frontend/src/pages/Lobby/Lobby.tsx

@@ -16,8 +16,9 @@ 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[];
@@ -81,10 +82,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 (