QA에서 나온 채팅방 버그 수정

frontend/src/components/MissingFallback/MissingFallback.style.ts

@@ -1,11 +1,17 @@
-import { css } from '@emotion/react';
+import { SerializedStyles, css } from '@emotion/react';
 
-export const container = css`
+export const container = ({
+  backgroundColor,
+}: {
+  backgroundColor?: string | SerializedStyles;
+}) => css`
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
 
+  ${backgroundColor ? `background-color: ${backgroundColor};` : ''}
+
   min-width: 30rem;
   min-height: 30rem;
 

frontend/src/components/MissingFallback/MissingFallback.tsx

@@ -7,13 +7,14 @@ import regretCat from '@_common/assets/regret_cat.webp';
 interface MissingFallbackProps {
   text: string;
   font?: SerializedStyles;
+  backgroundColor?: string | SerializedStyles;
 }
 
 export default function MissingFallback(props: MissingFallbackProps) {
-  const { text, font } = props;
+  const { text, font, backgroundColor } = props;
   const theme = useTheme();
   return (
-    <div css={S.container}>
+    <div css={S.container({ backgroundColor })}>
       <img src={regretCat} alt="미안해용" css={S.image} />
       <span css={font || theme.typography.h5}>{text}</span>
     </div>

frontend/src/layouts/ChattingRoomLayout/ChattingRoomLayout.style.ts

@@ -21,6 +21,6 @@ export const headerCenter = ({ theme }: { theme: Theme }) => css`
 
 export const headerBottom = css`
   position: sticky;
-  top: 5rem;
+  top: 4.8rem;
   left: -2rem;
 `;

frontend/src/mocks/handler/chatHandler.ts

@@ -21,7 +21,7 @@ const chatRoomDetail: (BetChatRoomDetail | MoimChatRoomDetail)[] = [
       isLoser: false,
       betId: 22,
       loser: {
-        nickname: '',
+        nickname: '패배자',
         profile: '',
         role: 'MOIMER',
       },
@@ -31,7 +31,7 @@ const chatRoomDetail: (BetChatRoomDetail | MoimChatRoomDetail)[] = [
     participations: [
       {
         nickname: '1',
-        profile: '',
+        profile: '나',
         role: 'MOIMER',
       },
     ],

frontend/src/pages/Chatting/ChattingRoomPage/ChattingRoomPage.tsx

@@ -99,6 +99,7 @@ export default function ChattingRoomPage() {
       return (
         <MissingFallback
           text={'아직 데이터가 로드되기도 전인데... \n 정말 빨리 누르시는군요'}
+          backgroundColor={theme.colorPalette.white[100]}
         />
       );
     }
@@ -128,23 +129,26 @@ export default function ChattingRoomPage() {
       return (
         <MissingFallback
           text={'모임에 참여한 사람은 \n 아직 할 수 있는 기능이 없어요'}
+          backgroundColor={theme.colorPalette.white[100]}
         />
       );
     }
 
     if (isBetChatRoomDetail(chatRoomDetail)) {
       return (
         <MissingFallback
-          text={'안내면진다 채팅방에서는 아직 \n 아직 할 수 있는 기능이 없어요'}
+          text={'안내면진다 채팅방에서는 \n 아직 할 수 있는 기능이 없어요'}
+          backgroundColor={theme.colorPalette.white[100]}
         />
       );
     }
     return (
       <MissingFallback
-        text={'아직 데이터가 로드되지 않았는데... \n 정말 빨리 누르시는 군요'}
+        text={'아직 데이터가 로드되지 않았는데... \n 정말 빨리 누르시는군요'}
+        backgroundColor={theme.colorPalette.white[100]}
       />
     );
-  }, [chatRoomDetail]);
+  }, [chatRoomDetail, theme]);
 
   return (
     <ChattingRoomLayout>
@@ -197,15 +201,17 @@ export default function ChattingRoomPage() {
             ]}
           />
         )}
-
         {chatRoomDetail && isBetChatRoomDetail(chatRoomDetail) && (
           <ChatInfoAccordion
             tagTheme={chatRoomDetail.attributes.isLoser ? 'yellow' : 'orange'}
             tagValue={chatRoomDetail.attributes.isLoser ? '당첨!' : '미당첨'}
             textList={
               chatRoomDetail.attributes.isLoser
                 ? ['당첨입니다!', '혹시 안내셨나요?ㅋ']
-                : ['살아남았습니다!', '당첨된 친구를 놀려보세요~']
+                : [
+                    '살아남았습니다!',
+                    `당첨된 사람은 ${chatRoomDetail.attributes.loser.nickname}입니다!`,
+                  ]
             }
           />
         )}

frontend/src/pages/Moim/MainPage/MainPage.tsx

@@ -14,6 +14,7 @@ import {
 
 import Button from '@_components/Button/Button';
 import DarakbangNameWrapper from '@_components/DarakbangNameWrapper/DarakbangNameWrapper';
+import DefaultPageLayout from '@_layouts/DefaultPageLayout/DefaultPageLayout';
 import GET_ROUTES from '@_common/getRoutes';
 import HomeMainContent from './components/HomeMainContent/HomeMainContent';
 import Modal from '@_components/Modal/Modal';
@@ -33,7 +34,6 @@ import { useNavigate } from 'react-router-dom';
 import useNowDarakbangName from '@_hooks/queries/useNowDarakbangNameById';
 import useServeToken from '@_hooks/mutaions/useServeToken';
 import { useTheme } from '@emotion/react';
-import DefaultPageLayout from '@_layouts/DefaultPageLayout/DefaultPageLayout';
 
 export default function MainPage() {
   const navigate = useNavigate();
@@ -82,6 +82,11 @@ export default function MainPage() {
       }) || [];
 
     options.push(
+      {
+        onClick: () => navigate(GET_ROUTES.nowDarakbang.darakbangMembers()),
+        description: '다락방 멤버 보기',
+        hasTopBorder: true,
+      },
       {
         onClick: () => navigate(ROUTES.darakbangEntrance),
         description: '코드로 다른 다락방 들어가기',