Merge pull request #735 from woowacourse-teams/hotfix/#732

2차 QA 버그 수정
woowacourse-teams · Oct 24, 2024 · 2eea62d · 2eea62d
2 parents 82e4427 + f6c43ae
commit 2eea62d
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 20 deletions.
diff --git a/.../layouts/ChattingPreviewLayout/ChattingPreviewContainer/ChattingPreviewContainer.style.ts b/.../layouts/ChattingPreviewLayout/ChattingPreviewContainer/ChattingPreviewContainer.style.ts
@@ -5,7 +5,7 @@ export const Container = ({ theme }: { theme: Theme }) => css`
   display: flex;
   flex-direction: column;
   gap: 2rem;
-  align-items: flex-start;
+  align-items: center;
   justify-content: flex-start;
 
   width: 100%;

diff --git a/frontend/src/pages/Bet/BetResultPage/BetResultPage.tsx b/frontend/src/pages/Bet/BetResultPage/BetResultPage.tsx
@@ -1,6 +1,7 @@
 import * as S from './BetResultPage.style';
 
-import { useMemo, useState } from 'react';
+import { css, useTheme } from '@emotion/react';
+import { useEffect, useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import BackArrowButton from '@_components/Button/BackArrowButton/BackArrowButton';
@@ -10,7 +11,6 @@ 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';
 
@@ -32,6 +32,7 @@ const getPercentString = (bet: BetDetail) => {
 
 export default function BetResultPage() {
   const navigate = useNavigate();
+  const theme = useTheme();
 
   const params = useParams();
   const betId = Number(params.betId);
@@ -46,20 +47,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(() => {
@@ -113,7 +114,7 @@ export default function BetResultPage() {
           {isButtonShown && bet?.myRole !== 'NON_MOIMEE' && (
             <Button
               shape="bar"
-              primary
+              reversePrimary
               onClick={buttonClickHandler}
               font={css`
                 font: 400 normal 2rem ${bitbit};

diff --git a/frontend/src/pages/Bet/components/Roulette/DrawRoulette.ts b/frontend/src/pages/Bet/components/Roulette/DrawRoulette.ts
@@ -312,7 +312,7 @@ export default function drawRoulette(props: drawRouletteProps) {
     itemPercent,
   );
 
-  const catchingIndexDiff = -1;
+  const catchingIndexDiff = (nameList.length % 2) - 1;
   const slotPhaser = new SlotPhaser(
     minMs / FRAME_SECOND,
     catchingIndexDiff,

diff --git a/frontend/src/pages/Bet/components/Roulette/Roulette.tsx b/frontend/src/pages/Bet/components/Roulette/Roulette.tsx
@@ -27,7 +27,7 @@ export default function Roulette(props: RouletteProps) {
     minMs = Infinity,
     startSpeed = 500,
     backgroundColor = '#D2D5DB',
-    font = "500 normal 5rem 'bitbit'",
+    font = "500 normal 50px 'bitbit'",
     fontSize = 32,
     stopSpeed = 3,
     fontColor = '#6D717F',

diff --git a/...tend/src/pages/Chatting/ChatPage/components/ChatFilterTagList/ChatFilterTagList.styles.ts b/...tend/src/pages/Chatting/ChatPage/components/ChatFilterTagList/ChatFilterTagList.styles.ts
@@ -4,4 +4,5 @@ export const list = css`
   display: flex;
   flex-direction: row;
   gap: 1rem;
+  width: 100%;
 `;
diff --git a/frontend/src/pages/Chatting/ChatPage/components/ChattingPreview/ChattingPreview.style.ts b/frontend/src/pages/Chatting/ChatPage/components/ChattingPreview/ChattingPreview.style.ts
@@ -7,6 +7,8 @@ export const container = ({
   theme: Theme;
   themeColor: string | SerializedStyles;
 }) => css`
+  z-index: 0;
+
   display: flex;
   align-items: center;
   justify-content: space-between;