woowacourse-teams · cys4585 · Oct 23, 2024 · Oct 23, 2024 · Oct 23, 2024 · Oct 23, 2024
diff --git 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;
 `;
diff --git 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>
   );
 }
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>