From 34b50db33a2947f13991ebba495bec651584a9cd Mon Sep 17 00:00:00 2001
From: ss0526100 <ss0526100@gmail.com>
Date: Wed, 23 Oct 2024 16:05:01 +0900
Subject: [PATCH 1/3] =?UTF-8?q?hotfix:=20=EB=B2=84=EA=B7=B8=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../OptionsPanel/OptionsPanel.style.ts          |  1 +
 .../pages/Bet/BetDetailPage/BetDetailPage.tsx   |  6 +++---
 .../pages/Bet/BetResultPage/BetResultPage.tsx   |  2 +-
 .../Bet/components/Roulette/DrawRoulette.ts     | 16 ++++++++++++----
 .../Bet/components/Roulette/Roulette.styles.ts  | 12 +++++++++---
 .../pages/Bet/components/Roulette/Roulette.tsx  | 17 ++++++++++++++++-
 .../OAuthMigrationResultPage.tsx                | 15 ++++++++-------
 7 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/OptionsPanel/OptionsPanel.style.ts b/frontend/src/components/OptionsPanel/OptionsPanel.style.ts
index 2a24e5af7..e14b4c715 100644
--- a/frontend/src/components/OptionsPanel/OptionsPanel.style.ts
+++ b/frontend/src/components/OptionsPanel/OptionsPanel.style.ts
@@ -22,6 +22,7 @@ export const panel = ({
 
   width: ${width};
 
+  background-color: white;
   border: 0;
   border-radius: 2.4rem;
   box-shadow: 0 0 12.6px 0 rgb(178 178 178 / 33%);
diff --git a/frontend/src/pages/Bet/BetDetailPage/BetDetailPage.tsx b/frontend/src/pages/Bet/BetDetailPage/BetDetailPage.tsx
index ac403b1e5..781b3e1b4 100644
--- a/frontend/src/pages/Bet/BetDetailPage/BetDetailPage.tsx
+++ b/frontend/src/pages/Bet/BetDetailPage/BetDetailPage.tsx
@@ -28,12 +28,12 @@ const getButtonMessage = (bet?: BetDetail) => {
 
 const getIsButtonDisabled = (bet?: BetDetail) => {
   if (!bet) return true;
-  if (bet.isAnnounced && bet.chatroomId) return false;
+  if (bet.isAnnounced && bet.chatroomId) return true;
   if (bet.myRole === 'MOIMER') return false;
 
   if (bet.myRole === 'MOIMEE') return true;
-  if (bet.myRole === 'NON_MOIMEE') return true;
-  return false;
+  if (bet.myRole === 'NON_MOIMEE') return false;
+  return true;
 };
 
 const bitbit = 'bitbit';
diff --git a/frontend/src/pages/Bet/BetResultPage/BetResultPage.tsx b/frontend/src/pages/Bet/BetResultPage/BetResultPage.tsx
index 278f10de8..56ee0c7f3 100644
--- a/frontend/src/pages/Bet/BetResultPage/BetResultPage.tsx
+++ b/frontend/src/pages/Bet/BetResultPage/BetResultPage.tsx
@@ -98,7 +98,7 @@ export default function BetResultPage() {
               />
             )}
           </RouletteWrapper>
-          {isButtonShown && (
+          {isButtonShown && bet?.myRole !== 'NON_MOIMEE' && (
             <Button
               shape="bar"
               primary
diff --git a/frontend/src/pages/Bet/components/Roulette/DrawRoulette.ts b/frontend/src/pages/Bet/components/Roulette/DrawRoulette.ts
index dcbcb93af..996e4a9b1 100644
--- a/frontend/src/pages/Bet/components/Roulette/DrawRoulette.ts
+++ b/frontend/src/pages/Bet/components/Roulette/DrawRoulette.ts
@@ -1,4 +1,8 @@
-const getCanvasUtil = (canvas: HTMLCanvasElement) => {
+const getCanvasUtil = (
+  canvas: HTMLCanvasElement,
+  widthPx?: number,
+  heightPx?: number,
+) => {
   return {
     /**
      * getPercentToWidth
@@ -8,7 +12,7 @@ const getCanvasUtil = (canvas: HTMLCanvasElement) => {
      */
 
     gpw: (percent: number) => {
-      const width = canvas.width;
+      const width = widthPx ?? canvas.width;
       percent = Math.min(percent, width);
 
       return (percent / 100) * width;
@@ -21,7 +25,7 @@ const getCanvasUtil = (canvas: HTMLCanvasElement) => {
      * @returns percentNumber
      */
     gph: (percent: number) => {
-      const height = canvas.height;
+      const height = heightPx ?? canvas.height;
       percent = Math.min(percent, height);
 
       return (percent / 100) * height;
@@ -274,6 +278,8 @@ interface drawRouletteProps {
   stopSpeed?: number;
   fontColor?: string;
   itemPercent?: number;
+  widthPx?: number;
+  heightPx?: number;
   onEnd?: () => void;
 }
 
@@ -289,12 +295,14 @@ export default function drawRoulette(props: drawRouletteProps) {
     stopSpeed = 3,
     fontColor = 'grey',
     itemPercent = 100,
+    widthPx,
+    heightPx,
     onEnd,
   } = props;
   const ctx = canvas.getContext('2d');
   if (!ctx) return { clearCanvas: () => {} };
 
-  const { gpw, gph } = getCanvasUtil(canvas);
+  const { gpw, gph } = getCanvasUtil(canvas, widthPx, heightPx);
 
   const FRAME_SECOND = 20;
   const slotItemMover = new SlotItemMover(
diff --git a/frontend/src/pages/Bet/components/Roulette/Roulette.styles.ts b/frontend/src/pages/Bet/components/Roulette/Roulette.styles.ts
index b93a88053..8fbd053ef 100644
--- a/frontend/src/pages/Bet/components/Roulette/Roulette.styles.ts
+++ b/frontend/src/pages/Bet/components/Roulette/Roulette.styles.ts
@@ -1,7 +1,13 @@
 import { css } from '@emotion/react';
 
-export const canvas = css`
-  width: 25rem;
-  height: 13rem;
+export const canvas = ({
+  width,
+  height,
+}: {
+  width: number;
+  height: number;
+}) => css`
+  width: ${width}px;
+  height: ${height}px;
   border-radius: 8px;
 `;
diff --git a/frontend/src/pages/Bet/components/Roulette/Roulette.tsx b/frontend/src/pages/Bet/components/Roulette/Roulette.tsx
index f35904ab3..76b3dbecd 100644
--- a/frontend/src/pages/Bet/components/Roulette/Roulette.tsx
+++ b/frontend/src/pages/Bet/components/Roulette/Roulette.tsx
@@ -15,6 +15,8 @@ interface RouletteProps extends HTMLAttributes<HTMLCanvasElement> {
   stopSpeed?: number;
   fontColor?: string;
   itemPercent?: number;
+  widthPx?: number;
+  heightPx?: number;
   onEnd?: () => void;
 }
 
@@ -29,7 +31,10 @@ export default function Roulette(props: RouletteProps) {
     fontSize = 32,
     stopSpeed = 3,
     fontColor = '#6D717F',
+    widthPx = 250,
+    heightPx = 130,
     itemPercent = 100,
+
     onEnd,
     ...otherProps
   } = props;
@@ -50,6 +55,8 @@ export default function Roulette(props: RouletteProps) {
       stopSpeed,
       fontColor,
       itemPercent,
+      widthPx,
+      heightPx,
       onEnd: () => {
         onEnd && onEnd();
         isEnded.current = true;
@@ -68,8 +75,16 @@ export default function Roulette(props: RouletteProps) {
     stopSpeed,
     fontColor,
     itemPercent,
+    widthPx,
+    heightPx,
     onEnd,
   ]);
 
-  return <canvas ref={canvasRef} css={S.canvas} {...otherProps} />;
+  return (
+    <canvas
+      ref={canvasRef}
+      css={S.canvas({ width: widthPx, height: heightPx })}
+      {...otherProps}
+    />
+  );
 }
diff --git a/frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.tsx b/frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.tsx
index a3600c6ed..c4dd552b5 100644
--- a/frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.tsx
+++ b/frontend/src/pages/Login/DataMigrationPage/OAuthMigrationResult/OAuthMigrationResultPage.tsx
@@ -1,15 +1,16 @@
-import LoginLayout from '@_layouts/LoginLayout/LoginLayout';
-import MissingFallback from '@_components/Fallback/MissingFallback/MissingFallback';
 import * as S from './OAuthMigrationResultPage.style';
-import { useTheme } from '@emotion/react';
 
 import { useNavigate, useParams } from 'react-router-dom';
+
 import Button from '@_components/Button/Button';
+import GET_ROUTES from '@_common/getRoutes';
+import HappyFallback from '@_components/Fallback/HappyFallback/HappyFallback';
+import LoginLayout from '@_layouts/LoginLayout/LoginLayout';
+import MissingFallback from '@_components/Fallback/MissingFallback/MissingFallback';
 import ROUTES from '@_constants/routes';
 import { getInviteCode } from '@_common/inviteCodeManager';
 import { useEffect } from 'react';
-import GET_ROUTES from '@_common/getRoutes';
-import HappyFallback from '@_components/Fallback/HappyFallback/HappyFallback';
+import { useTheme } from '@emotion/react';
 
 export default function OAuthMigrationResultPage() {
   const theme = useTheme();
@@ -75,9 +76,9 @@ export default function OAuthMigrationResultPage() {
         <LoginLayout.Footer>
           <Button
             shape={'bar'}
-            onClick={() => navigate(GET_ROUTES.default.home)}
+            onClick={() => navigate(ROUTES.darakbangSelectOption)}
           >
-            로그인 페이지로 이동하기
+            다락방 선택 페이지로 이동하기
           </Button>
         </LoginLayout.Footer>
       </LoginLayout>

From a5b2353491ca98802cd6f328e9e30cf08d3f67eb Mon Sep 17 00:00:00 2001
From: ss0526100 <ss0526100@gmail.com>
Date: Wed, 23 Oct 2024 16:20:50 +0900
Subject: [PATCH 2/3] =?UTF-8?q?feat:=EB=8B=A4=EB=9D=BD=EB=B0=A9=20?=
 =?UTF-8?q?=EC=9D=B4=EB=A6=84=20=EA=B2=80=EC=A0=95=EC=83=89=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DarakbangNameWrapper/DarakbangNameWrapper.style.ts         | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/components/DarakbangNameWrapper/DarakbangNameWrapper.style.ts b/frontend/src/components/DarakbangNameWrapper/DarakbangNameWrapper.style.ts
index 363d81ef9..80988501a 100644
--- a/frontend/src/components/DarakbangNameWrapper/DarakbangNameWrapper.style.ts
+++ b/frontend/src/components/DarakbangNameWrapper/DarakbangNameWrapper.style.ts
@@ -3,7 +3,10 @@ import { SerializedStyles, css } from '@emotion/react';
 export const name = ({ font }: { font: string | SerializedStyles }) => css`
   ${font}
   overflow-x: hidden;
+
   max-width: 40vw;
+
+  color: black;
   text-overflow: ellipsis;
   white-space: nowrap;
 `;

From caeb349ef4ff18ed696141aa349675a3dcf15bea Mon Sep 17 00:00:00 2001
From: ss0526100 <ss0526100@gmail.com>
Date: Wed, 23 Oct 2024 16:21:05 +0900
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=EB=8B=A4=EB=9D=BD=EB=B0=A9=20?=
 =?UTF-8?q?=ED=99=94=EC=82=B4=ED=91=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Icons/SolidArrow.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Icons/SolidArrow.tsx b/frontend/src/components/Icons/SolidArrow.tsx
index 5c658b449..490e55b97 100644
--- a/frontend/src/components/Icons/SolidArrow.tsx
+++ b/frontend/src/components/Icons/SolidArrow.tsx
@@ -22,16 +22,17 @@ export default function SolidArrow(props: SolidArrowProps) {
       viewBox="0 0 27 27"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      transform={`rotate(${directionMapper[direction]})`}
       {...otherProps}
     >
-      <path
-        d="M16.8446 23.5825L6.73785 12.8812L16.8446 3.36893"
-        stroke={color || '#767676'}
-        strokeWidth="2.24595"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
+      <g transform={`rotate(${directionMapper[direction]} 13.5 13.5)`}>
+        <path
+          d="M16.8446 23.5825L6.73785 12.8812L16.8446 3.36893"
+          stroke={color || '#767676'}
+          strokeWidth="2.24595"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
     </svg>
   );
 }