[FEAT] 게임화면 및 대기화면 기능 구현

frontend/src/components/GameResult/GameResult.styled.ts

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 
-export const layout = css`
+export const gameResultLayout = css`
   display: flex;
   flex-direction: column;
   justify-content: center;

frontend/src/components/GameResult/GameResult.tsx

@@ -1,6 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 
-import { gameResultTitle, gameResultTitleWrapper, layout } from './GameResult.styled';
+import { gameResultTitle, gameResultTitleWrapper, gameResultLayout } from './GameResult.styled';
 
 import Button from '@/components/common/Button/Button';
 
@@ -12,7 +12,7 @@ const GameResult = () => {
   };
 
   return (
-    <div css={layout}>
+    <div css={gameResultLayout}>
       <div css={gameResultTitleWrapper}>
         <h1 css={gameResultTitle}>게임 결과</h1>
       </div>

frontend/src/components/NicknameList/NicknameList.styled.ts

@@ -1,10 +1,10 @@
 import { css } from '@emotion/react';
 
-export const layout = css`
+export const nicknameListLayout = css`
   display: flex;
   justify-content: space-around;
-  width: 24.5rem;
-  height: 15.4rem;
+  width: 24.4rem;
+  height: 15.8rem;
 `;
 
 export const nicknameContainer = css`

frontend/src/components/NicknameList/NicknameList.tsx

@@ -1,11 +1,11 @@
-import { layout, nicknameContainer, verticalLine } from './NicknameList.styled';
+import { nicknameListLayout, nicknameContainer, verticalLine } from './NicknameList.styled';
 
 const NicknameList = () => {
   const optionANicknames = ['철수', '철수', '철수', '철수', '철수', '철수', '철수', '철수', '철수'];
   const optionBNicknames = ['영미', '영미', '영미'];
 
   return (
-    <div css={layout}>
+    <div css={nicknameListLayout}>
       <div css={nicknameContainer}>
         {optionANicknames.map((optionANickname) => (
           <span key={optionANickname}>{optionANickname}</span>

frontend/src/components/RoundVoteResult/RoundVoteResult.styled.ts

@@ -2,16 +2,16 @@ import { css } from '@emotion/react';
 
 import { Theme } from '@/styles/Theme';
 
-interface LayoutProps {
+interface RoundVoteResultLayoutProps {
   percentage: number;
 }
 
-export const layout = ({ percentage }: LayoutProps) => css`
+export const roundVoteResultLayout = ({ percentage }: RoundVoteResultLayoutProps) => css`
   display: flex;
   justify-content: space-around;
   align-items: center;
-  width: 24.5rem;
-  height: 11rem;
+  width: 24rem;
+  height: 11.6rem;
 
   font-size: 1.2rem;
   background: linear-gradient(

frontend/src/components/RoundVoteResult/RoundVoteResult.tsx

@@ -1,12 +1,12 @@
-import { layout, fontBold, voteContent } from './RoundVoteResult.styled';
+import { roundVoteResultLayout, fontBold, voteContent } from './RoundVoteResult.styled';
 
 import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
 
 const RoundVoteResult = () => {
   const { balanceContent } = useBalanceContentQuery();
 
   return (
-    <div css={layout({ percentage: 72 })}>
+    <div css={roundVoteResultLayout({ percentage: 72 })}>
       <div css={voteContent}>
         <div css={fontBold}>{balanceContent?.firstOption.name}</div>
         <div css={fontBold}>72%</div>

frontend/src/components/SelectContainer/SelectContainer.styled.ts

@@ -1,11 +1,11 @@
 import { css } from '@emotion/react';
 
-export const layout = css`
+export const selectContainerLayout = css`
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  gap: 5rem;
+  gap: 4rem;
   flex-basis: 55%;
 `;
 

frontend/src/components/SelectContainer/SelectContainer.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { layout, selectSection } from './SelectContainer.styled';
+import { selectContainerLayout, selectSection } from './SelectContainer.styled';
 
 import Button from '@/components/common/Button/Button';
 import SelectOption from '@/components/SelectOption/SelectOption';
@@ -25,7 +25,7 @@ const SelectContainer = () => {
   return (
     <>
       {balanceContent && (
-        <div css={layout}>
+        <div css={selectContainerLayout}>
           <section css={selectSection}>
             <SelectOption
               option={balanceContent.firstOption}

frontend/src/components/SelectOption/SelectOption.styled.ts

@@ -2,11 +2,11 @@ import { css } from '@emotion/react';
 
 import { Theme } from '@/styles/Theme';
 
-export const layout = (selected: boolean) => css`
+export const SelectOptionLayout = (selected: boolean) => css`
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 11.4rem;
+  width: 11.6rem;
   height: 16.8rem;
   padding: 1.6rem;
 

frontend/src/components/SelectOption/SelectOption.tsx

@@ -1,4 +1,4 @@
-import { layout } from './SelectOption.styled';
+import { SelectOptionLayout } from './SelectOption.styled';
 
 import { BalanceContent } from '@/types/balanceContent';
 
@@ -11,7 +11,7 @@ interface SelectOptionProps {
 const SelectOption = ({ option, selectedId, handleSelectOption }: SelectOptionProps) => {
   return (
     <button
-      css={layout(Boolean(selectedId === option.optionId))}
+      css={SelectOptionLayout(Boolean(selectedId === option.optionId))}
       onClick={() => handleSelectOption(option.optionId)}
     >
       {option.name}

frontend/src/components/Timer/Timer.styled.ts

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 
 import { Theme } from '@/styles/Theme';
 
-export const layout = css`
+export const timerLayout = css`
   display: flex;
   justify-content: center;
   width: 100%;

frontend/src/components/Timer/Timer.tsx

@@ -1,7 +1,7 @@
-import { layout } from './Timer.styled';
+import { timerLayout } from './Timer.styled';
 
 const Timer = () => {
-  return <div css={layout}></div>;
+  return <div css={timerLayout}></div>;
 };
 
 export default Timer;

frontend/src/components/TopicContainer/TopicContainer.styled.ts

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 
-export const topicLayout = css`
+export const topicContainerLayout = css`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -11,7 +11,7 @@ export const topicLayout = css`
 
 export const categoryText = css`
   font-weight: bold;
-  font-size: 1.4rem;
+  font-size: 1.2rem;
 `;
 
 export const topicText = css`

frontend/src/components/TopicContainer/TopicContainer.tsx

@@ -1,12 +1,12 @@
-import { categoryText, topicLayout, topicText } from './TopicContainer.styled';
+import { categoryText, topicContainerLayout, topicText } from './TopicContainer.styled';
 
 import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
 
 const TopicContainer = () => {
   const { balanceContent } = useBalanceContentQuery();
 
   return (
-    <section css={topicLayout}>
+    <section css={topicContainerLayout}>
       <span css={categoryText}>{balanceContent?.category}</span>
       <span css={topicText}>{balanceContent?.question}</span>
     </section>

frontend/src/components/common/Button/Button.tsx

@@ -1,7 +1,7 @@
 import { buttonLayout } from './Button.styled';
 
 interface ButtonProps {
-  text: '선택' | '확인' | '다음';
+  text: string;
   active: boolean;
   onClick: () => void;
 }

frontend/src/components/layout/Content/Content.styled.ts

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 
-export const contentSection = css`
+export const contentLayout = css`
   display: flex;
   flex-direction: column;
   align-items: center;

frontend/src/components/layout/Content/Content.tsx

@@ -1,9 +1,9 @@
 import { PropsWithChildren } from 'react';
 
-import { contentSection } from './Content.styled';
+import { contentLayout } from './Content.styled';
 
 const Content = ({ children }: PropsWithChildren) => {
-  return <section css={contentSection}>{children}</section>;
+  return <section css={contentLayout}>{children}</section>;
 };
 
 export default Content;

frontend/src/components/layout/Header/Header.styled.ts

@@ -4,6 +4,7 @@ export const headerLayout = css`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  height: 8rem;
 `;
 
 export const gameTitle = css`

frontend/src/pages/MainPage/MainPage.styled.ts

@@ -0,0 +1,30 @@
+import { css } from '@emotion/react';
+
+import { Theme } from '@/styles/Theme';
+
+export const mainPageLayout = css`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+
+  background-color: ${Theme.color.peanut200};
+  gap: 3rem;
+`;
+
+export const logoWrapper = css`
+  width: 16rem;
+  height: 16rem;
+
+  background-color: white;
+`;
+
+export const title = css`
+  font-size: 4.8rem;
+`;
+
+export const intro = css`
+  color: ${Theme.color.gray400};
+  font-size: 1.6rem;
+`;

frontend/src/pages/MainPage/MainPage.tsx

@@ -0,0 +1,24 @@
+import { useNavigate } from 'react-router-dom';
+
+import { mainPageLayout, logoWrapper, title, intro } from './MainPage.styled';
+
+import Button from '@/components/common/Button/Button';
+
+const MainPage = () => {
+  const navigate = useNavigate();
+
+  const goToNicknamePage = () => {
+    navigate('/nickname');
+  };
+
+  return (
+    <div css={mainPageLayout}>
+      <div css={logoWrapper}>LO to the GO</div>
+      <h1 css={title}>땅콩</h1>
+      <h2 css={intro}>어색한 분위기를 주도해봐요</h2>
+      <Button text="방 만들기" active={true} onClick={goToNicknamePage}></Button>
+    </div>
+  );
+};
+
+export default MainPage;

frontend/src/pages/NicknamePage/NicknamePage.styled.ts

@@ -0,0 +1,39 @@
+import { css } from '@emotion/react';
+
+import { Theme } from '@/styles/Theme';
+
+export const profile = css`
+  width: 8rem;
+  height: 8rem;
+  margin-top: 4rem;
+
+  background-color: ${Theme.color.gray300};
+  border-radius: 50%;
+`;
+
+export const nickname = css`
+  width: 26.8rem;
+  margin: 2rem 0;
+
+  font-weight: 600;
+  font-size: 1.6rem;
+`;
+
+export const nicknameInputWrapper = css`
+  display: flex;
+  align-items: center;
+  width: 26.8rem;
+  height: 4.8rem;
+  padding: 0 1rem;
+
+  background-color: ${Theme.color.gray200};
+  border-radius: 1rem;
+`;
+
+export const nicknameInput = css`
+  width: 100%;
+  border: 0;
+
+  background-color: ${Theme.color.gray200};
+  outline: none;
+`;

frontend/src/pages/NicknamePage/NicknamePage.tsx

@@ -0,0 +1,20 @@
+import { profile, nickname, nicknameInputWrapper, nicknameInput } from './NicknamePage.styled';
+
+import Content from '@/components/layout/Content/Content';
+import { createRandomNickname } from '@/utils/nickname';
+
+const NicknamePage = () => {
+  const randomNickname = createRandomNickname();
+
+  return (
+    <Content>
+      <div css={profile}></div>
+      <div css={nickname}>닉네임</div>
+      <div css={nicknameInputWrapper}>
+        <input css={nicknameInput} type="text" placeholder={randomNickname} />
+      </div>
+    </Content>
+  );
+};
+
+export default NicknamePage;

frontend/src/pages/RoundResultPage/RoundResultPage.styled.ts

@@ -2,5 +2,5 @@ import { css } from '@emotion/react';
 
 export const NicknameListWrapper = css`
   margin-top: 1.6rem;
-  margin-bottom: 0.7rem;
+  margin-bottom: 0.8rem;
 `;