From c382eb892da9debc8e229f1e28a65e5f1c59108e Mon Sep 17 00:00:00 2001
From: novice0840 <magnolia0840@gmail.com>
Date: Tue, 23 Jul 2024 15:58:12 +0900
Subject: [PATCH 01/10] =?UTF-8?q?feat:=20route=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=B6=94=EA=B0=80=20#46?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/MainPage/MainPage.tsx       |  7 +++++++
 .../src/pages/NicknamePage/NicknamePage.tsx    |  7 +++++++
 frontend/src/router/index.tsx                  | 18 ++++++++++++++++--
 3 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/pages/MainPage/MainPage.tsx
 create mode 100644 frontend/src/pages/NicknamePage/NicknamePage.tsx

diff --git a/frontend/src/pages/MainPage/MainPage.tsx b/frontend/src/pages/MainPage/MainPage.tsx
new file mode 100644
index 000000000..87084c7fd
--- /dev/null
+++ b/frontend/src/pages/MainPage/MainPage.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const MainPage = () => {
+  return <div>this is main page</div>;
+};
+
+export default MainPage;
diff --git a/frontend/src/pages/NicknamePage/NicknamePage.tsx b/frontend/src/pages/NicknamePage/NicknamePage.tsx
new file mode 100644
index 000000000..3452bbbc3
--- /dev/null
+++ b/frontend/src/pages/NicknamePage/NicknamePage.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const NicknamePage = () => {
+  return <div>this is Nick name page</div>;
+};
+
+export default NicknamePage;
diff --git a/frontend/src/router/index.tsx b/frontend/src/router/index.tsx
index 056d3fe78..f4b706d52 100644
--- a/frontend/src/router/index.tsx
+++ b/frontend/src/router/index.tsx
@@ -4,6 +4,8 @@ import { Layout } from './layout';
 
 import GamePage from '@/pages/GamePage/GamePage';
 import GameResultPage from '@/pages/GameResultPage/GameResultPage';
+import MainPage from '@/pages/MainPage/MainPage';
+import NicknamePage from '@/pages/NicknamePage/NicknamePage';
 import RoundResultPage from '@/pages/RoundResultPage/RoundResultPage';
 
 export const router = createBrowserRouter([
@@ -13,14 +15,26 @@ export const router = createBrowserRouter([
     children: [
       {
         index: true,
+        element: <MainPage />,
+      },
+      {
+        path: 'nickname',
+        element: <NicknamePage />,
+      },
+      {
+        path: 'ready',
+        element: <div>게임 대기 화면</div>,
+      },
+      {
+        path: 'game/:roundId',
         element: <GamePage />,
       },
       {
-        path: 'round-result',
+        path: 'round/:roundId/result',
         element: <RoundResultPage />,
       },
       {
-        path: 'game-result',
+        path: 'game/result',
         element: <GameResultPage />,
       },
     ],

From c179f82ee01e865043eff82059178daffda8419b Mon Sep 17 00:00:00 2001
From: novice0840 <magnolia0840@gmail.com>
Date: Tue, 23 Jul 2024 16:27:59 +0900
Subject: [PATCH 02/10] =?UTF-8?q?fix:=20css=20prop=20layout=20=EC=BB=A8?=
 =?UTF-8?q?=EB=B2=A4=EC=85=98=EC=97=90=20=EB=A7=9E=EA=B2=8C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20#46?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/GameResult/GameResult.styled.ts   | 2 +-
 frontend/src/components/GameResult/GameResult.tsx         | 4 ++--
 .../src/components/NicknameList/NicknameList.styled.ts    | 2 +-
 frontend/src/components/NicknameList/NicknameList.tsx     | 4 ++--
 .../components/RoundVoteResult/RoundVoteResult.styled.ts  | 4 ++--
 .../src/components/RoundVoteResult/RoundVoteResult.tsx    | 4 ++--
 .../components/SelectContainer/SelectContainer.styled.ts  | 2 +-
 .../src/components/SelectContainer/SelectContainer.tsx    | 4 ++--
 .../src/components/SelectOption/SelectOption.styled.ts    | 2 +-
 frontend/src/components/SelectOption/SelectOption.tsx     | 4 ++--
 frontend/src/components/Timer/Timer.styled.ts             | 2 +-
 frontend/src/components/Timer/Timer.tsx                   | 4 ++--
 .../components/TopicContainer/TopicContainer.styled.ts    | 2 +-
 frontend/src/components/TopicContainer/TopicContainer.tsx | 4 ++--
 frontend/src/components/layout/Content/Content.styled.ts  | 2 +-
 frontend/src/components/layout/Content/Content.tsx        | 4 ++--
 frontend/src/router/index.tsx                             | 8 ++++----
 17 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/GameResult/GameResult.styled.ts b/frontend/src/components/GameResult/GameResult.styled.ts
index 0dfd6cae4..5b6951d55 100644
--- a/frontend/src/components/GameResult/GameResult.styled.ts
+++ b/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;
diff --git a/frontend/src/components/GameResult/GameResult.tsx b/frontend/src/components/GameResult/GameResult.tsx
index 7355320dc..adfde8a71 100644
--- a/frontend/src/components/GameResult/GameResult.tsx
+++ b/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>
diff --git a/frontend/src/components/NicknameList/NicknameList.styled.ts b/frontend/src/components/NicknameList/NicknameList.styled.ts
index d1fe809c6..655571f4a 100644
--- a/frontend/src/components/NicknameList/NicknameList.styled.ts
+++ b/frontend/src/components/NicknameList/NicknameList.styled.ts
@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 
-export const layout = css`
+export const nicknameListLayout = css`
   display: flex;
   justify-content: space-around;
   width: 24.5rem;
diff --git a/frontend/src/components/NicknameList/NicknameList.tsx b/frontend/src/components/NicknameList/NicknameList.tsx
index a72d8c950..35f83aa0a 100644
--- a/frontend/src/components/NicknameList/NicknameList.tsx
+++ b/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>
diff --git a/frontend/src/components/RoundVoteResult/RoundVoteResult.styled.ts b/frontend/src/components/RoundVoteResult/RoundVoteResult.styled.ts
index b99fb6126..32addcadb 100644
--- a/frontend/src/components/RoundVoteResult/RoundVoteResult.styled.ts
+++ b/frontend/src/components/RoundVoteResult/RoundVoteResult.styled.ts
@@ -2,11 +2,11 @@ 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;
diff --git a/frontend/src/components/RoundVoteResult/RoundVoteResult.tsx b/frontend/src/components/RoundVoteResult/RoundVoteResult.tsx
index a780a1187..634ac52e8 100644
--- a/frontend/src/components/RoundVoteResult/RoundVoteResult.tsx
+++ b/frontend/src/components/RoundVoteResult/RoundVoteResult.tsx
@@ -1,4 +1,4 @@
-import { layout, fontBold, voteContent } from './RoundVoteResult.styled';
+import { roundVoteResultLayout, fontBold, voteContent } from './RoundVoteResult.styled';
 
 import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
 
@@ -6,7 +6,7 @@ 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>
diff --git a/frontend/src/components/SelectContainer/SelectContainer.styled.ts b/frontend/src/components/SelectContainer/SelectContainer.styled.ts
index 80ba82c2c..f2c0a4d94 100644
--- a/frontend/src/components/SelectContainer/SelectContainer.styled.ts
+++ b/frontend/src/components/SelectContainer/SelectContainer.styled.ts
@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 
-export const layout = css`
+export const selectContainerLayout = css`
   display: flex;
   flex-direction: column;
   justify-content: center;
diff --git a/frontend/src/components/SelectContainer/SelectContainer.tsx b/frontend/src/components/SelectContainer/SelectContainer.tsx
index 65eed1455..76a40645d 100644
--- a/frontend/src/components/SelectContainer/SelectContainer.tsx
+++ b/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}
diff --git a/frontend/src/components/SelectOption/SelectOption.styled.ts b/frontend/src/components/SelectOption/SelectOption.styled.ts
index 820daf17c..d7a5fa52a 100644
--- a/frontend/src/components/SelectOption/SelectOption.styled.ts
+++ b/frontend/src/components/SelectOption/SelectOption.styled.ts
@@ -2,7 +2,7 @@ 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;
diff --git a/frontend/src/components/SelectOption/SelectOption.tsx b/frontend/src/components/SelectOption/SelectOption.tsx
index 4070eb93a..cb7f7312b 100644
--- a/frontend/src/components/SelectOption/SelectOption.tsx
+++ b/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}
diff --git a/frontend/src/components/Timer/Timer.styled.ts b/frontend/src/components/Timer/Timer.styled.ts
index 3d8fb433b..331ee3842 100644
--- a/frontend/src/components/Timer/Timer.styled.ts
+++ b/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%;
diff --git a/frontend/src/components/Timer/Timer.tsx b/frontend/src/components/Timer/Timer.tsx
index 61b544d03..57dcfa208 100644
--- a/frontend/src/components/Timer/Timer.tsx
+++ b/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;
diff --git a/frontend/src/components/TopicContainer/TopicContainer.styled.ts b/frontend/src/components/TopicContainer/TopicContainer.styled.ts
index ab7e53d5d..5d5cb40bb 100644
--- a/frontend/src/components/TopicContainer/TopicContainer.styled.ts
+++ b/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;
diff --git a/frontend/src/components/TopicContainer/TopicContainer.tsx b/frontend/src/components/TopicContainer/TopicContainer.tsx
index a375be173..0c55d196f 100644
--- a/frontend/src/components/TopicContainer/TopicContainer.tsx
+++ b/frontend/src/components/TopicContainer/TopicContainer.tsx
@@ -1,4 +1,4 @@
-import { categoryText, topicLayout, topicText } from './TopicContainer.styled';
+import { categoryText, topicContainerLayout, topicText } from './TopicContainer.styled';
 
 import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
 
@@ -6,7 +6,7 @@ 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>
diff --git a/frontend/src/components/layout/Content/Content.styled.ts b/frontend/src/components/layout/Content/Content.styled.ts
index 02d3286f4..a1d90f77d 100644
--- a/frontend/src/components/layout/Content/Content.styled.ts
+++ b/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;
diff --git a/frontend/src/components/layout/Content/Content.tsx b/frontend/src/components/layout/Content/Content.tsx
index 4f6d7c175..7f14c19a6 100644
--- a/frontend/src/components/layout/Content/Content.tsx
+++ b/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;
diff --git a/frontend/src/router/index.tsx b/frontend/src/router/index.tsx
index f4b706d52..fd3bae910 100644
--- a/frontend/src/router/index.tsx
+++ b/frontend/src/router/index.tsx
@@ -9,14 +9,14 @@ import NicknamePage from '@/pages/NicknamePage/NicknamePage';
 import RoundResultPage from '@/pages/RoundResultPage/RoundResultPage';
 
 export const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <MainPage />,
+  },
   {
     path: '/',
     element: <Layout />,
     children: [
-      {
-        index: true,
-        element: <MainPage />,
-      },
       {
         path: 'nickname',
         element: <NicknamePage />,

From a3ed6cdcb2fcdb4ffdc9a5992f027ccf6509570e Mon Sep 17 00:00:00 2001
From: novice0840 <magnolia0840@gmail.com>
Date: Tue, 23 Jul 2024 18:51:14 +0900
Subject: [PATCH 03/10] =?UTF-8?q?fix:=20=EA=B3=B5=ED=86=B5=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EB=B3=80=EA=B2=BD=20#46?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/common/Button/Button.tsx       | 2 +-
 frontend/src/components/layout/Header/Header.styled.ts | 1 +
 frontend/src/styles/Theme.ts                           | 6 ++++++
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/common/Button/Button.tsx b/frontend/src/components/common/Button/Button.tsx
index 804ec0876..62acc28c2 100644
--- a/frontend/src/components/common/Button/Button.tsx
+++ b/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;
 }
diff --git a/frontend/src/components/layout/Header/Header.styled.ts b/frontend/src/components/layout/Header/Header.styled.ts
index 25fae2786..f9ca2b6b4 100644
--- a/frontend/src/components/layout/Header/Header.styled.ts
+++ b/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: 7rem;
 `;
 
 export const gameTitle = css`
diff --git a/frontend/src/styles/Theme.ts b/frontend/src/styles/Theme.ts
index fdf9bd95d..6939b0f62 100644
--- a/frontend/src/styles/Theme.ts
+++ b/frontend/src/styles/Theme.ts
@@ -1,8 +1,14 @@
 const color = {
   // primary color
+  peanut200: '#FFF0D4',
   peanut300: '#FFF4DF',
   peanut400: '#FFDD9A',
   peanut500: '#FFD076',
+
+  gray200: '#F3F1F1',
+  gray300: '#E4E4E4',
+  gray400: '#9D9B9B',
+  gray500: '#7A7A7A',
 } as const;
 
 export const Theme = {

From 284ccb760802420ccfbaef15665f510722a7e25a Mon Sep 17 00:00:00 2001
From: novice0840 <magnolia0840@gmail.com>
Date: Tue, 23 Jul 2024 19:00:54 +0900
Subject: [PATCH 04/10] feat: main page UI #46

---
 .../src/pages/MainPage/MainPage.styled.ts     | 30 +++++++++++++++++++
 frontend/src/pages/MainPage/MainPage.tsx      | 21 +++++++++++--
 frontend/src/styles/GlobalStyle.ts            |  1 -
 3 files changed, 49 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/pages/MainPage/MainPage.styled.ts

diff --git a/frontend/src/pages/MainPage/MainPage.styled.ts b/frontend/src/pages/MainPage/MainPage.styled.ts
new file mode 100644
index 000000000..b38e06d2c
--- /dev/null
+++ b/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;
+`;
diff --git a/frontend/src/pages/MainPage/MainPage.tsx b/frontend/src/pages/MainPage/MainPage.tsx
index 87084c7fd..fac7ea5b0 100644
--- a/frontend/src/pages/MainPage/MainPage.tsx
+++ b/frontend/src/pages/MainPage/MainPage.tsx
@@ -1,7 +1,24 @@
-import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { mainPageLayout, logoWrapper, title, intro } from './MainPage.styled';
+
+import Button from '@/components/common/Button/Button';
 
 const MainPage = () => {
-  return <div>this is main page</div>;
+  const navigate = useNavigate();
+
+  const goToNicknamePage = () => {
+    navigate('/nickname');
+  };
+
+  return (
+    <div css={mainPageLayout}>
+      <div css={logoWrapper}>LO to the GO</div>
+      <h1 css={title}>땅콩</h1>
+      <div css={intro}>어색한 분위기를 주도해봐요</div>
+      <Button text="방 만들기" active={true} onClick={goToNicknamePage}></Button>
+    </div>
+  );
 };
 
 export default MainPage;
diff --git a/frontend/src/styles/GlobalStyle.ts b/frontend/src/styles/GlobalStyle.ts
index f32172627..7c8fe3ef9 100644
--- a/frontend/src/styles/GlobalStyle.ts
+++ b/frontend/src/styles/GlobalStyle.ts
@@ -143,7 +143,6 @@ const GlobalStyle = css`
   ${reset}
 
   html {
-    margin-top: 3rem;
     font-size: 10px;
   }
 

From f5957812a03c3a60a67a0d27588cd043f3c1dc67 Mon Sep 17 00:00:00 2001
From: novice0840 <magnolia0840@gmail.com>
Date: Tue, 23 Jul 2024 19:01:35 +0900
Subject: [PATCH 05/10] feat: nickname page UI #46

---
 .../pages/NicknamePage/NicknamePage.styled.ts | 39 +++++++++++++++++++
 .../src/pages/NicknamePage/NicknamePage.tsx   | 14 ++++++-
 2 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/pages/NicknamePage/NicknamePage.styled.ts

diff --git a/frontend/src/pages/NicknamePage/NicknamePage.styled.ts b/frontend/src/pages/NicknamePage/NicknamePage.styled.ts
new file mode 100644
index 000000000..f2ad784c1
--- /dev/null
+++ b/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.9rem;
+  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;
+`;
diff --git a/frontend/src/pages/NicknamePage/NicknamePage.tsx b/frontend/src/pages/NicknamePage/NicknamePage.tsx
index 3452bbbc3..176bcde87 100644
--- a/frontend/src/pages/NicknamePage/NicknamePage.tsx
+++ b/frontend/src/pages/NicknamePage/NicknamePage.tsx
@@ -1,7 +1,17 @@
-import React from 'react';
+import { profile, nickname, nicknameInputWrapper, nicknameInput } from './NicknamePage.styled';
+
+import Content from '@/components/layout/Content/Content';
 
 const NicknamePage = () => {
-  return <div>this is Nick name page</div>;
+  return (
+    <Content>
+      <div css={profile}></div>
+      <div css={nickname}>닉네임</div>
+      <div css={nicknameInputWrapper}>
+        <input css={nicknameInput} type="text" placeholder="닉네임을 입력해 주세요" />
+      </div>
+    </Content>
+  );
 };
 
 export default NicknamePage;

From 8febc714161982b97081d676dc2ada32f15b4570 Mon Sep 17 00:00:00 2001
From: novice0840 <magnolia0840@gmail.com>
Date: Tue, 23 Jul 2024 19:13:49 +0900
Subject: [PATCH 06/10] =?UTF-8?q?feat:=20=EB=9E=9C=EB=8D=A4=20=EB=8B=89?=
 =?UTF-8?q?=EB=84=A4=EC=9E=84=20=EC=83=9D=EC=84=B1=20#46?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/NicknamePage/NicknamePage.tsx | 5 ++++-
 frontend/src/utils/.gitkeep                      | 0
 frontend/src/utils/nickname.ts                   | 9 +++++++++
 3 files changed, 13 insertions(+), 1 deletion(-)
 delete mode 100644 frontend/src/utils/.gitkeep
 create mode 100644 frontend/src/utils/nickname.ts

diff --git a/frontend/src/pages/NicknamePage/NicknamePage.tsx b/frontend/src/pages/NicknamePage/NicknamePage.tsx
index 176bcde87..0647c79bb 100644
--- a/frontend/src/pages/NicknamePage/NicknamePage.tsx
+++ b/frontend/src/pages/NicknamePage/NicknamePage.tsx
@@ -1,14 +1,17 @@
 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="닉네임을 입력해 주세요" />
+        <input css={nicknameInput} type="text" placeholder={randomNickname} />
       </div>
     </Content>
   );
diff --git a/frontend/src/utils/.gitkeep b/frontend/src/utils/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/frontend/src/utils/nickname.ts b/frontend/src/utils/nickname.ts
new file mode 100644
index 000000000..6314362bb
--- /dev/null
+++ b/frontend/src/utils/nickname.ts
@@ -0,0 +1,9 @@
+export const createRandomNickname = () => {
+  const adjectives = ['배고픈', '성실한', '욕망의', '섹시한', '멋있는', '타락한'];
+  const nouns = ['마루', '썬데이', '프린', '이든', '포메', '타칸', '커찬'];
+
+  const randomAdjective = adjectives[Math.floor(Math.random() * adjectives.length)];
+  const randomNoun = nouns[Math.floor(Math.random() * nouns.length)];
+
+  return `${randomAdjective} ${randomNoun}`;
+};

From f2f1669d13faab1f54be52a198cee968c6ef827b Mon Sep 17 00:00:00 2001
From: novice0840 <magnolia0840@gmail.com>
Date: Wed, 24 Jul 2024 14:09:17 +0900
Subject: [PATCH 07/10] =?UTF-8?q?fix:=20=ED=83=9C=EA=B7=B8=EB=AA=85=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20#46?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/MainPage/MainPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/MainPage/MainPage.tsx b/frontend/src/pages/MainPage/MainPage.tsx
index fac7ea5b0..2be7aad30 100644
--- a/frontend/src/pages/MainPage/MainPage.tsx
+++ b/frontend/src/pages/MainPage/MainPage.tsx
@@ -15,7 +15,7 @@ const MainPage = () => {
     <div css={mainPageLayout}>
       <div css={logoWrapper}>LO to the GO</div>
       <h1 css={title}>땅콩</h1>
-      <div css={intro}>어색한 분위기를 주도해봐요</div>
+      <h2 css={intro}>어색한 분위기를 주도해봐요</h2>
       <Button text="방 만들기" active={true} onClick={goToNicknamePage}></Button>
     </div>
   );

From 5dd6366b5ce35151969badf5b8e1b1f30a93f1c4 Mon Sep 17 00:00:00 2001
From: novice0840 <magnolia0840@gmail.com>
Date: Wed, 24 Jul 2024 14:30:46 +0900
Subject: [PATCH 08/10] =?UTF-8?q?fix:=20=EB=9E=9C=EB=8D=A4=20=EB=8B=89?=
 =?UTF-8?q?=EB=84=A4=EC=9E=84=20=EC=83=9D=EC=84=B1=20=ED=98=95=EC=9A=A9?=
 =?UTF-8?q?=EC=82=AC=20=EC=B6=94=EA=B0=80=20#46?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/utils/nickname.ts | 39 +++++++++++++++++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/frontend/src/utils/nickname.ts b/frontend/src/utils/nickname.ts
index 6314362bb..d37ef2e3f 100644
--- a/frontend/src/utils/nickname.ts
+++ b/frontend/src/utils/nickname.ts
@@ -1,5 +1,42 @@
 export const createRandomNickname = () => {
-  const adjectives = ['배고픈', '성실한', '욕망의', '섹시한', '멋있는', '타락한'];
+  const adjectives = [
+    '춤추는',
+    '노래하는',
+    '웃긴',
+    '귀여운',
+    '사랑스러운',
+    '재치있는',
+    '기운찬',
+    '활발한',
+    '지적인',
+    '영리한',
+    '장난꾸러기',
+    '유쾌한',
+    '깔끔한',
+    '매력적인',
+    '화려한',
+    '신나는',
+    '용감한',
+    '상냥한',
+    '달콤한',
+    '기발한',
+    '짜릿한',
+    '다정한',
+    '평온한',
+    '쾌활한',
+    '따뜻한',
+    '호기심 많은',
+    '재빠른',
+    '천재적인',
+    '엉뚱한',
+    '호탕한',
+    '멋진',
+    '섹시한',
+    '발랄한',
+    '당당한',
+    '명랑한',
+    '흥미로운',
+  ];
   const nouns = ['마루', '썬데이', '프린', '이든', '포메', '타칸', '커찬'];
 
   const randomAdjective = adjectives[Math.floor(Math.random() * adjectives.length)];

From 937783d530b4d5cfabe7d6446a8184ba2debf211 Mon Sep 17 00:00:00 2001
From: novice0840 <magnolia0840@gmail.com>
Date: Wed, 24 Jul 2024 14:42:50 +0900
Subject: [PATCH 09/10] =?UTF-8?q?fix:=20=EB=9D=BC=EC=9A=B0=ED=8A=B8=20roun?=
 =?UTF-8?q?dId=20=EC=A0=9C=EA=B1=B0=20#46?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/router/index.tsx  |  4 ++--
 frontend/src/utils/nickname.ts | 33 ++++++++++++++++++++++++++++++++-
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/frontend/src/router/index.tsx b/frontend/src/router/index.tsx
index fd3bae910..02cb7b7d9 100644
--- a/frontend/src/router/index.tsx
+++ b/frontend/src/router/index.tsx
@@ -26,11 +26,11 @@ export const router = createBrowserRouter([
         element: <div>게임 대기 화면</div>,
       },
       {
-        path: 'game/:roundId',
+        path: 'game',
         element: <GamePage />,
       },
       {
-        path: 'round/:roundId/result',
+        path: 'round/result',
         element: <RoundResultPage />,
       },
       {
diff --git a/frontend/src/utils/nickname.ts b/frontend/src/utils/nickname.ts
index d37ef2e3f..da1525f8d 100644
--- a/frontend/src/utils/nickname.ts
+++ b/frontend/src/utils/nickname.ts
@@ -37,7 +37,38 @@ export const createRandomNickname = () => {
     '명랑한',
     '흥미로운',
   ];
-  const nouns = ['마루', '썬데이', '프린', '이든', '포메', '타칸', '커찬'];
+  const nouns = [
+    '강아지',
+    '고양이',
+    '개구리',
+    '딱다구리',
+    '사자',
+    '호랑이',
+    '코끼리',
+    '기린',
+    '고래',
+    '판다',
+    '토끼',
+    '햄스터',
+    '다람쥐',
+    '수달',
+    '원숭이',
+    '여우',
+    '늑대',
+    '말',
+    '돼지',
+    '소',
+    '양',
+    '염소',
+    '치타',
+    '타조',
+    '참새',
+    '비둘기',
+    '까마귀',
+    '공룡',
+    '거북이',
+    '독수리',
+  ];
 
   const randomAdjective = adjectives[Math.floor(Math.random() * adjectives.length)];
   const randomNoun = nouns[Math.floor(Math.random() * nouns.length)];

From 936ecaa13e8a6aebee8b0c3cedb315dceac0be05 Mon Sep 17 00:00:00 2001
From: novice0840 <magnolia0840@gmail.com>
Date: Wed, 24 Jul 2024 14:45:19 +0900
Subject: [PATCH 10/10] =?UTF-8?q?fix:=20css=20=EC=B5=9C=EC=86=8C=20?=
 =?UTF-8?q?=EB=8B=A8=EC=9C=84=20=ED=86=B5=EC=9D=BC=ED=99=94=20#46?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/NicknameList/NicknameList.styled.ts   | 4 ++--
 .../src/components/RoundVoteResult/RoundVoteResult.styled.ts  | 4 ++--
 .../src/components/SelectContainer/SelectContainer.styled.ts  | 2 +-
 frontend/src/components/SelectOption/SelectOption.styled.ts   | 2 +-
 .../src/components/TopicContainer/TopicContainer.styled.ts    | 2 +-
 frontend/src/components/layout/Header/Header.styled.ts        | 2 +-
 frontend/src/pages/NicknamePage/NicknamePage.styled.ts        | 2 +-
 frontend/src/pages/RoundResultPage/RoundResultPage.styled.ts  | 2 +-
 8 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/NicknameList/NicknameList.styled.ts b/frontend/src/components/NicknameList/NicknameList.styled.ts
index 655571f4a..28f20d469 100644
--- a/frontend/src/components/NicknameList/NicknameList.styled.ts
+++ b/frontend/src/components/NicknameList/NicknameList.styled.ts
@@ -3,8 +3,8 @@ import { css } from '@emotion/react';
 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`
diff --git a/frontend/src/components/RoundVoteResult/RoundVoteResult.styled.ts b/frontend/src/components/RoundVoteResult/RoundVoteResult.styled.ts
index 32addcadb..670869b95 100644
--- a/frontend/src/components/RoundVoteResult/RoundVoteResult.styled.ts
+++ b/frontend/src/components/RoundVoteResult/RoundVoteResult.styled.ts
@@ -10,8 +10,8 @@ export const roundVoteResultLayout = ({ percentage }: RoundVoteResultLayoutProps
   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(
diff --git a/frontend/src/components/SelectContainer/SelectContainer.styled.ts b/frontend/src/components/SelectContainer/SelectContainer.styled.ts
index f2c0a4d94..1a134def7 100644
--- a/frontend/src/components/SelectContainer/SelectContainer.styled.ts
+++ b/frontend/src/components/SelectContainer/SelectContainer.styled.ts
@@ -5,7 +5,7 @@ export const selectContainerLayout = css`
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  gap: 5rem;
+  gap: 4rem;
   flex-basis: 55%;
 `;
 
diff --git a/frontend/src/components/SelectOption/SelectOption.styled.ts b/frontend/src/components/SelectOption/SelectOption.styled.ts
index d7a5fa52a..c5b03e0a4 100644
--- a/frontend/src/components/SelectOption/SelectOption.styled.ts
+++ b/frontend/src/components/SelectOption/SelectOption.styled.ts
@@ -6,7 +6,7 @@ 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;
 
diff --git a/frontend/src/components/TopicContainer/TopicContainer.styled.ts b/frontend/src/components/TopicContainer/TopicContainer.styled.ts
index 5d5cb40bb..5906fc9e8 100644
--- a/frontend/src/components/TopicContainer/TopicContainer.styled.ts
+++ b/frontend/src/components/TopicContainer/TopicContainer.styled.ts
@@ -11,7 +11,7 @@ export const topicContainerLayout = css`
 
 export const categoryText = css`
   font-weight: bold;
-  font-size: 1.4rem;
+  font-size: 1.2rem;
 `;
 
 export const topicText = css`
diff --git a/frontend/src/components/layout/Header/Header.styled.ts b/frontend/src/components/layout/Header/Header.styled.ts
index f9ca2b6b4..0e19358f1 100644
--- a/frontend/src/components/layout/Header/Header.styled.ts
+++ b/frontend/src/components/layout/Header/Header.styled.ts
@@ -4,7 +4,7 @@ export const headerLayout = css`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 7rem;
+  height: 8rem;
 `;
 
 export const gameTitle = css`
diff --git a/frontend/src/pages/NicknamePage/NicknamePage.styled.ts b/frontend/src/pages/NicknamePage/NicknamePage.styled.ts
index f2ad784c1..7f9fd3a51 100644
--- a/frontend/src/pages/NicknamePage/NicknamePage.styled.ts
+++ b/frontend/src/pages/NicknamePage/NicknamePage.styled.ts
@@ -23,7 +23,7 @@ export const nicknameInputWrapper = css`
   display: flex;
   align-items: center;
   width: 26.8rem;
-  height: 4.9rem;
+  height: 4.8rem;
   padding: 0 1rem;
 
   background-color: ${Theme.color.gray200};
diff --git a/frontend/src/pages/RoundResultPage/RoundResultPage.styled.ts b/frontend/src/pages/RoundResultPage/RoundResultPage.styled.ts
index 8425470f1..410f844f0 100644
--- a/frontend/src/pages/RoundResultPage/RoundResultPage.styled.ts
+++ b/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;
 `;