룰렛 수정

frontend/src/components/UserPreview/UserPreview.style.ts

@@ -14,6 +14,7 @@ export const preview = ({
   height: ${size || '3.5rem'};
 
   background: url(${imageUrl}), url(${defaultProfile});
+  background-color: white;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 100% 100%;

frontend/src/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: center;
+  align-items: flex-start;
   justify-content: flex-start;
 
   width: 100%;

frontend/src/pages/Bet/BetDetailPage/BetDetailPage.tsx

@@ -38,6 +38,19 @@ const getIsButtonDisabled = (bet?: BetDetail) => {
 
 const bitbit = 'bitbit';
 
+const getPercentString = (bet: BetDetail) => {
+  const prefix =
+    bet.myRole === 'NON_MOIMEE' ? '지금 오면 당첨 확률' : '지금 당첨 확률은';
+  const motherNumber =
+    bet.participants.length + (bet.myRole === 'NON_MOIMEE' ? 1 : 0);
+  const percentNumber = (1 / motherNumber) * 100;
+  const percentString =
+    percentNumber % 1 === 0
+      ? percentNumber.toString()
+      : percentNumber.toFixed(1);
+  return `${prefix} *${percentString}*%`;
+};
+
 export default function BetDetailPage() {
   const navigate = useNavigate();
   const params = useParams();
@@ -113,7 +126,7 @@ export default function BetDetailPage() {
           {
             <RouletteWrapper
               title={bet?.title || ''}
-              description={`지금 당첨될 확률은 *${((1 / (bet?.participants.length || 1)) * 100).toFixed(1)}*%!`}
+              description={bet ? getPercentString(bet) : '지금 오면 %'}
               mainDescription={mainDescription}
             >
               {nameList && (

frontend/src/pages/Bet/BetResultPage/BetResultPage.tsx

@@ -4,6 +4,7 @@ import { useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import BackArrowButton from '@_components/Button/BackArrowButton/BackArrowButton';
+import { BetDetail } from '@_types/index';
 import Button from '@_components/Button/Button';
 import GET_ROUTES from '@_common/getRoutes';
 import Roulette from '../components/Roulette/Roulette';
@@ -18,6 +19,17 @@ import useBetResult from '@_hooks/queries/useBetResult';
 // import StarThreeIcon from '@_components/Icons/StarIcons/StarThreeIcon';
 // import StarTwoIcon from '@_components/Icons/StarIcons/StarTwoIcon';
 const bitbit = 'bitbit';
+
+const getPercentString = (bet: BetDetail) => {
+  const motherNumber = bet.participants.length;
+  const percentNumber = (1 / motherNumber) * 100;
+  const percentString =
+    percentNumber % 1 === 0
+      ? percentNumber.toString()
+      : percentNumber.toFixed(1);
+  return `지금 당첨 확률은 *${percentString}*%`;
+};
+
 export default function BetResultPage() {
   const navigate = useNavigate();
 
@@ -83,7 +95,7 @@ export default function BetResultPage() {
         <div css={S.containerStyle}>
           <RouletteWrapper
             title={bet?.title || ''}
-            description={`지금 당첨될 확률은 *${((1 / (bet?.participants.length || 1)) * 100).toFixed(1)}*%!`}
+            description={bet ? getPercentString(bet) : '지금 당첨 확률은   %'}
             mainDescription={isRouletteEnd ? betResult + ' 당첨!!' : ''}
           >
             {nameList && (

frontend/src/pages/Bet/components/Roulette/DrawRoulette.ts

@@ -302,6 +302,8 @@ export default function drawRoulette(props: drawRouletteProps) {
   const ctx = canvas.getContext('2d');
   if (!ctx) return { clearCanvas: () => {} };
 
+  canvas.width = widthPx || canvas.width;
+  canvas.height = heightPx || canvas.height;
   const { gpw, gph } = getCanvasUtil(canvas, widthPx, heightPx);
 
   const FRAME_SECOND = 20;

frontend/src/pages/Chatting/ChatPage/ChatPage.tsx

@@ -35,7 +35,7 @@ export default function ChatPage() {
             </h2>
           </ChattingPreviewLayout.Header.Left>
         </ChattingPreviewLayout.Header>
-        <ChattingPreviewLayout.HeaderBottom>
+        <ChattingPreviewLayout.ContentContainer>
           <ChatFilterTagList>
             <ChatFilterTag
               value={'모임'}
@@ -48,8 +48,6 @@ export default function ChatPage() {
               onClick={() => setNowChatRoomType('BET')}
             />
           </ChatFilterTagList>
-        </ChattingPreviewLayout.HeaderBottom>
-        <ChattingPreviewLayout.ContentContainer>
           {isLoading ? (
             <ChatCardListSkeleton />
           ) : chatPreviews && chatPreviews.length > 0 ? (