Merge pull request #767 from woowacourse-teams/fix/#766

qa 버그 3차
woowacourse-teams · Oct 24, 2024 · ddf447d · ddf447d
2 parents 01ea2cd + 496c4cb
commit ddf447d
Show file tree

Hide file tree

Showing 12 changed files with 86 additions and 36 deletions.
diff --git a/frontend/src/components/ProfileFrame/ProfileFrame.tsx b/frontend/src/components/ProfileFrame/ProfileFrame.tsx
@@ -1,8 +1,9 @@
 import * as S from './ProfileFrame.style';
 
+import { ImgHTMLAttributes, useState } from 'react';
+
 import Crown from '@_common/assets/crown.svg?url';
 import DefaultProfile from '@_common/assets/default_profile.svg?url';
-import { ImgHTMLAttributes, useState } from 'react';
 import { Role } from '@_types/index';
 import { useTheme } from '@emotion/react';
 
@@ -36,7 +37,11 @@ export default function ProfileFrame(props: ProfileFrameProps) {
 
   return (
     <div css={S.profileBox()}>
-      {role === 'MOIMER' ? <img src={Crown} css={S.profileCrown(width)} /> : ''}
+      {role === 'MOIMER' ? (
+        <img src={Crown} css={S.profileCrown(width)} aria-hidden />
+      ) : (
+        ''
+      )}
       <div css={S.profileFrame({ width, height, borderWidth, theme })}>
         {!isLoaded && (
           <img src={DefaultProfile} css={S.profileImage()} alt="Placeholder" />

diff --git a/frontend/src/layouts/ChattingPreviewLayout/ChattingPreviewLayout.style.ts b/frontend/src/layouts/ChattingPreviewLayout/ChattingPreviewLayout.style.ts
@@ -5,7 +5,7 @@ export const layoutStyle = ({ theme }: { theme: Theme }) => css`
   display: flex;
   flex-direction: column;
 
-  height: 100vh;
+  min-height: calc(100vh - 9rem);
 
   background-color: ${theme.colorPalette.grey[100]};
 

diff --git a/frontend/src/pages/Bet/BetListPage/BetListPage.tsx b/frontend/src/pages/Bet/BetListPage/BetListPage.tsx
@@ -1,18 +1,22 @@
+import { Fragment, useEffect } from 'react';
+
+import BetList from './components/BetList/BetList';
+import DarakbangNameWrapper from '@_components/DarakbangNameWrapper/DarakbangNameWrapper';
+import DefaultPageLayout from '@_layouts/DefaultPageLayout/DefaultPageLayout';
 import GET_ROUTES from '@_common/getRoutes';
 import NavigationBar from '@_components/NavigationBar/NavigationBar';
-import PlusButton from '@_components/PlusButton/PlusButton';
 import NavigationBarWrapper from '@_layouts/components/NavigationBarWrapper/NavigationBarWrapper';
-import { useTheme } from '@emotion/react';
-import { Fragment } from 'react';
-import { useNavigate } from 'react-router-dom';
-import BetList from './components/BetList/BetList';
-import DefaultPageLayout from '@_layouts/DefaultPageLayout/DefaultPageLayout';
+import PlusButton from '@_components/PlusButton/PlusButton';
 import RefreshButton from '@_components/RefreshButton/RefreshButton';
-import DarakbangNameWrapper from '@_components/DarakbangNameWrapper/DarakbangNameWrapper';
 import { common } from '@_common/common.style';
+import { useNavigate } from 'react-router-dom';
+import { useTheme } from '@emotion/react';
 
 export default function BetListPage() {
   const navigate = useNavigate();
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
 
   const theme = useTheme();
 

diff --git a/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx b/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import ChatCardListSkeleton from './ChatListSkeleton/ChatCardListSkeleton';
@@ -24,6 +24,9 @@ export default function ChatPage() {
   );
   const { data: chatPreviews, isLoading } = useChatPreviews(nowChatRoomType);
   const navigate = useNavigate();
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
 
   return (
     <Fragment>
@@ -84,7 +87,7 @@ export default function ChatPage() {
               />
             ))
           ) : (
-            <MissingFallback text="아직 만들어진 채팅방이 없어요" />
+            <MissingFallback text="아직 열린 채팅방이 없습니다" />
           )}
         </ChattingPreviewLayout.ContentContainer>
       </ChattingPreviewLayout>

diff --git a/frontend/src/pages/Moim/MainPage/MainPage.tsx b/frontend/src/pages/Moim/MainPage/MainPage.tsx
@@ -55,6 +55,10 @@ export default function MainPage() {
       setIsModalOpen(true);
     }
     requestPermission(mutate);
+  }, [mutate]);
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
   }, []);
 
   const handleModalClose = () => {

diff --git a/...pages/Moim/MainPage/components/HomeMainContent/MoimCardList/MoimCard/MoimCard.stories.tsx b/...pages/Moim/MainPage/components/HomeMainContent/MoimCardList/MoimCard/MoimCard.stories.tsx
@@ -48,6 +48,7 @@ export const Default: Story = {
           children: [],
         },
       ],
+      chatRoomId: 1,
     },
   },
   render: (args) => <MoimCard {...args} />,

diff --git a/.../src/pages/Moim/MainPage/components/HomeMainContent/MoimCardList/MoimCardList.stories.tsx b/.../src/pages/Moim/MainPage/components/HomeMainContent/MoimCardList/MoimCardList.stories.tsx
@@ -40,6 +40,7 @@ export const Default: Story = {
           },
         ],
         description: '코딩하면서 놀아요',
+        chatRoomId: 1,
       },
       {
         title: '볼 함 차보까?',
@@ -77,6 +78,7 @@ export const Default: Story = {
             children: [],
           },
         ],
+        chatRoomId: 1,
       },
       {
         title: '볼 함 차보까?',
@@ -114,6 +116,7 @@ export const Default: Story = {
             children: [],
           },
         ],
+        chatRoomId: 1,
       },
     ],
   },

diff --git a/frontend/src/pages/Moim/MoimDetailPage/MoimDetailPage.tsx b/frontend/src/pages/Moim/MoimDetailPage/MoimDetailPage.tsx
@@ -46,8 +46,12 @@ const getButtonMessage = (moim: MoimInfo, role: Role) => {
     return '';
   }
   if (role === 'MOIMEE') {
-    if (moim.status === 'MOIMING') return '방장이 채팅방을 만들지 않았습니다';
-    if (moim.status === 'COMPLETED') return '채팅방으로 가기';
+    if (moim.status === 'MOIMING') return '모임을 모으고 있습니다';
+    if (moim.status === 'COMPLETED') {
+      if (moim.chatRoomId === null)
+        return '방장이 채팅방을 아직 열지 않았습니다';
+      return '채팅방으로 가기';
+    }
     return '';
   }
   return '';
@@ -68,7 +72,10 @@ const getButtonDisabled = (moim: MoimInfo, role: Role) => {
   }
   if (role === 'MOIMEE') {
     if (moim.status === 'MOIMING') return true;
-    if (moim.status === 'COMPLETED') return false;
+    if (moim.status === 'COMPLETED') {
+      if (moim.chatRoomId === null) return true;
+      return false;
+    }
     return true;
   }
   return true;
@@ -175,7 +182,11 @@ export default function MoimDetailPage() {
 
     if (role === 'MOIMER') {
       if (moim.status === 'MOIMING') return completeMoim(moimId);
-      if (moim.status === 'COMPLETED') return openChat(moimId);
+      if (moim.status === 'COMPLETED') {
+        if (moim.chatRoomId === null) return openChat(moimId);
+
+        return navigate(GET_ROUTES.nowDarakbang.chattingRoom(moim.chatRoomId));
+      }
       return;
     }
     if (role === 'NON_MOIMEE') {
@@ -185,8 +196,11 @@ export default function MoimDetailPage() {
     }
     if (role === 'MOIMEE') {
       if (moim.status === 'MOIMING') return;
-      if (moim.status === 'COMPLETED')
-        return navigate(GET_ROUTES.nowDarakbang.chattingRoom(moimId));
+      if (moim.status === 'COMPLETED') {
+        if (moim.chatRoomId === null) return;
+
+        return navigate(GET_ROUTES.nowDarakbang.chattingRoom(moim.chatRoomId));
+      }
       return;
     }
     return;

diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/CommentList/CommentCard/CommentCard.tsx b/frontend/src/pages/Moim/MoimDetailPage/components/CommentList/CommentCard/CommentCard.tsx
@@ -49,23 +49,32 @@ export default function CommentCard(props: CommentCardProps) {
         />
 
         <div css={S.commnetBox()}>
-          <div css={S.commentLeft}>
+          <div
+            css={S.commentLeft}
+            aria-label={
+              (isChild ? '답글 ' : '') +
+              '작성자 ' +
+              nickname +
+              ' 작성시간 ' +
+              getDateTimeAriaLabel(dateTime) +
+              ' 내용 ' +
+              content
+            }
+            tabIndex={0}
+          >
             <div css={S.commentLeftHeader}>
               <div
                 ref={nicknameRef}
                 css={[S.commentNickname, theme.typography.small]}
-                aria-label={nickname}
+                aria-hidden
               >
                 {formattedNickname}
               </div>
-              <div
-                css={S.timestamp({ theme })}
-                aria-label={getDateTimeAriaLabel(dateTime)}
-              >
+              <div css={S.timestamp({ theme })} aria-hidden>
                 {dateTime}
               </div>
             </div>
-            <div css={S.contentBox({ theme })} aria-label={content}>
+            <div css={S.contentBox({ theme })} aria-hidden>
               {content}
             </div>
           </div>

diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.tsx b/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.tsx
@@ -1,12 +1,12 @@
 import * as S from './ProfileCard.style';
 
+import { Fragment } from 'react';
 import { Participation } from '@_types/index';
 import ProfileFrame from '../../../../../../components/ProfileFrame/ProfileFrame';
-import useNicknameWidthEffect from '@_hooks/useNicknameWidthEffect';
-import { useTheme } from '@emotion/react';
-import { Fragment } from 'react';
 import useDarakbangMember from '@_hooks/queries/useDarakbangMember';
+import useNicknameWidthEffect from '@_hooks/useNicknameWidthEffect';
 import useProfileBottomSheet from '@_hooks/useProfileBottomSheet';
+import { useTheme } from '@emotion/react';
 
 interface ProfileCardProps {
   info: Participation;
@@ -41,7 +41,7 @@ export default function ProfileCard(props: ProfileCardProps) {
       <li
         css={S.profileCard}
         tabIndex={0}
-        aria-label={info.nickname}
+        aria-label={(info.role === 'MOIMER' ? '모임장' : '') + info.nickname}
         onClick={handleCardClick}
       >
         <ProfileFrame

diff --git a/frontend/src/pages/Mypage/MyPage.tsx b/frontend/src/pages/Mypage/MyPage.tsx
@@ -1,17 +1,19 @@
+import * as S from './MyPage.style';
+
+import { Fragment, useEffect } from 'react';
 import { css, useTheme } from '@emotion/react';
+
+import Edit from '@_common/assets/edit.svg';
+import GET_ROUTES from '@_common/getRoutes';
 import InformationLayout from '@_layouts/InformationLayout/InformationLayout';
 import MineInfoCard from './components/MineInfoCard/MineInfoCard';
+import MyInfoTabBar from './components/MyInfoTabBar/MyInfoTabBar';
 import NavigationBar from '@_components/NavigationBar/NavigationBar';
 import NavigationBarWrapper from '@_layouts/components/NavigationBarWrapper/NavigationBarWrapper';
-import { common } from '@_common/common.style';
-import * as S from './MyPage.style';
-import MyInfoTabBar from './components/MyInfoTabBar/MyInfoTabBar';
 import Setting from '@_common/assets/setting.svg';
-import Edit from '@_common/assets/edit.svg';
-import { Fragment } from 'react';
-import { useNavigate } from 'react-router-dom';
-import GET_ROUTES from '@_common/getRoutes';
+import { common } from '@_common/common.style';
 import useMyPage from './hook/useMyPage';
+import { useNavigate } from 'react-router-dom';
 
 export default function MyPage() {
   const navigate = useNavigate();
@@ -36,6 +38,9 @@ export default function MyPage() {
     handleCancel,
     handleDefaultProfile,
   } = useMyPage();
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
 
   return (
     <Fragment>

diff --git a/frontend/src/types/index.d.ts b/frontend/src/types/index.d.ts
@@ -16,6 +16,7 @@ export interface MoimInfo {
   status: MoimStatus;
   comments: Comment[];
   isZzimed: boolean;
+  chatRoomId: number | null;
 }
 
 export interface Participation {
@@ -46,6 +47,7 @@ export type MoimInputInfo = Omit<
   | 'comments'
   | 'authorNickname'
   | 'isZzimed'
+  | 'chatRoomId'
 >;
 
 export interface ChattingPreview {
-Original file line number
+Diff line change
@@ Expand Up / @@ -48,6 +48,7 @@ export const Default: Story = { @@
               children: [],
             },
           ],
+          chatRoomId: 1,
         },
       },
       render: (args) => <MoimCard {...args} />,
@@ Expand Down @@