fix: css prop layout 컨벤션에 맞게 수정 #46

Author: novice0840

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,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;

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,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;

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,6 +1,6 @@
 import { css } from '@emotion/react';
 
-export const layout = css`
+export const selectContainerLayout = css`
   display: flex;
   flex-direction: column;
   justify-content: center;

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,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;

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;

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/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/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 />,