feat: 안내면진다 추가 요구사항 반영

woowacourse-teams · Oct 23, 2024 · 18cc3cc · 18cc3cc
1 parent 7905085
commit 18cc3cc
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 30 deletions.
diff --git a/frontend/src/pages/Bet/BetResultPage/BetResultPage.tsx b/frontend/src/pages/Bet/BetResultPage/BetResultPage.tsx
@@ -1,7 +1,6 @@
 import * as S from './BetResultPage.style';
 
-import { css, useTheme } from '@emotion/react';
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import BackArrowButton from '@_components/Button/BackArrowButton/BackArrowButton';
@@ -10,6 +9,7 @@ import GET_ROUTES from '@_common/getRoutes';
 import Roulette from '../components/Roulette/Roulette';
 import RouletteWrapper from '../components/RouletteWrapper/RouletteWrapper';
 import SelectLayout from '@_layouts/SelectLayout/SelectLayout';
+import { css } from '@emotion/react';
 import useBet from '@_hooks/queries/useBet';
 import useBetResult from '@_hooks/queries/useBetResult';
 
@@ -21,7 +21,6 @@ const bitbit = 'bitbit';
 export default function BetResultPage() {
   const navigate = useNavigate();
 
-  const theme = useTheme();
   const params = useParams();
   const betId = Number(params.betId);
 
@@ -35,20 +34,20 @@ export default function BetResultPage() {
   const [isRouletteEnd, setIsRouletteEnd] = useState(false);
   const [isButtonShown, setIsButtonShown] = useState(false);
 
-  useEffect(() => {
-    const nowRoot = document.getElementById('root');
-    if (nowRoot) {
-      nowRoot.style.backgroundColor = theme.colorPalette.orange[200];
-      nowRoot.style.transition = '1s all ease-in-out';
-    }
-
-    return () => {
-      if (nowRoot) {
-        nowRoot.style.backgroundColor = '';
-        nowRoot.style.transition = '';
-      }
-    };
-  }, [theme]);
+  // useEffect(() => {
+  //   const nowRoot = document.getElementById('root');
+  //   if (nowRoot) {
+  //     nowRoot.style.backgroundColor = theme.colorPalette.orange[200];
+  //     nowRoot.style.transition = '1s all ease-in-out';
+  //   }
+
+  //   return () => {
+  //     if (nowRoot) {
+  //       nowRoot.style.backgroundColor = '';
+  //       nowRoot.style.transition = '';
+  //     }
+  //   };
+  // }, [theme]);
 
   const handleAfterRoulette = () => {
     setTimeout(() => {
@@ -102,7 +101,7 @@ export default function BetResultPage() {
           {isButtonShown && (
             <Button
               shape="bar"
-              reversePrimary
+              primary
               onClick={buttonClickHandler}
               font={css`
                 font: 400 normal 2rem ${bitbit};

diff --git a/frontend/src/pages/Bet/components/Roulette/Roulette.styles.ts b/frontend/src/pages/Bet/components/Roulette/Roulette.styles.ts
@@ -1,10 +1,7 @@
 import { css } from '@emotion/react';
 
 export const canvas = css`
-  position: fixed;
-  top: 0;
-  left: 0;
-
-  width: 100vw;
-  height: 100vh;
+  width: 25rem;
+  height: 13rem;
+  border-radius: 8px;
 `;
diff --git a/frontend/src/pages/Bet/components/Roulette/Roulette.tsx b/frontend/src/pages/Bet/components/Roulette/Roulette.tsx
@@ -1,3 +1,5 @@
+import * as S from './Roulette.styles';
+
 import { HTMLAttributes, useEffect, useRef } from 'react';
 
 import drawRoulette from './DrawRoulette';
@@ -22,11 +24,11 @@ export default function Roulette(props: RouletteProps) {
     loser,
     minMs = Infinity,
     startSpeed = 500,
-    backgroundColor = 'grey',
+    backgroundColor = '#D2D5DB',
     font = "500 normal 5rem 'bitbit'",
     fontSize = 32,
     stopSpeed = 3,
-    fontColor = 'black',
+    fontColor = '#6D717F',
     itemPercent = 100,
     onEnd,
     ...otherProps
@@ -69,5 +71,5 @@ export default function Roulette(props: RouletteProps) {
     onEnd,
   ]);
 
-  return <canvas ref={canvasRef} {...otherProps} />;
+  return <canvas ref={canvasRef} css={S.canvas} {...otherProps} />;
 }
diff --git a/frontend/src/pages/Bet/components/RouletteWrapper/RouletteWrapper.style.ts b/frontend/src/pages/Bet/components/RouletteWrapper/RouletteWrapper.style.ts
@@ -16,10 +16,9 @@ export const container = ({ theme }: { theme: Theme }) => css`
 
 export const title = ({ theme }: { theme: Theme }) => css`
   ${theme.typography.h2}
-  font:300 normal 5rem ${bitbit};
-
   width: 30rem;
 
+  font: 300 normal 5rem ${bitbit};
   text-align: center;
   word-wrap: break-word;
   white-space: pre-line;

diff --git a/frontend/src/pages/Bet/components/RouletteWrapper/RouletteWrapper.tsx b/frontend/src/pages/Bet/components/RouletteWrapper/RouletteWrapper.tsx
@@ -28,7 +28,7 @@ export default function RouletteWrapper(props: RouletteWrapperProps) {
               css={
                 index % 2
                   ? css`
-                      font: 400 normal 2rem ${bitbit};
+                      font: 400 normal 2.5rem ${bitbit};
                     `
                   : css`
                       font: 300 normal 2rem ${bitbit};