Merge pull request #575 from woowacourse-teams/feat/#565

채팅방 버그 수정

frontend/src/index.html

@@ -15,6 +15,10 @@
     <meta property="og:site_name" content="모우다" />
 
     <meta name="apple-mobile-web-app-title" content="모우다" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale= 1.0, viewport-fit=cover"
+    />
     <meta property="al:android:app_name" content="모우다" />
     <meta http-equiv="Cache-Control" content="no-cache" />
   </head>

frontend/src/layouts/ChattingRoomLayout/ChattingRoomLayout.tsx

@@ -3,7 +3,6 @@ import * as S from './ChattingRoomLayout.style';
 import ChattingRoomFooter from './ChattingRoomFooter/ChattingRoomFooter';
 import { PropsWithChildren } from 'react';
 import StickyTriSectionHeader from '@_layouts/components/StickyTriSectionHeader/StickyTriSectionHeader';
-import { useTheme } from '@emotion/react';
 
 function ChattingRoomLayout(props: PropsWithChildren) {
   const { children } = props;
@@ -19,15 +18,7 @@ function Header(props: PropsWithChildren) {
 
 Header.Left = StickyTriSectionHeader.Left;
 Header.Right = StickyTriSectionHeader.Right;
-Header.Center = function Center(props: PropsWithChildren) {
-  const { children } = props;
-  const theme = useTheme();
-  return (
-    <StickyTriSectionHeader.Center>
-      <div css={S.headerCenter({ theme })}>{children}</div>
-    </StickyTriSectionHeader.Center>
-  );
-};
+Header.Center = StickyTriSectionHeader.Center;
 
 ChattingRoomLayout.Header = Header;
 ChattingRoomLayout.Footer = ChattingRoomFooter;

frontend/src/pages/Chatting/ChatPage/components/ChatMenuItem/ChatMenuItem.style.ts

@@ -4,7 +4,9 @@ export const item = css`
   display: flex;
   flex-direction: column;
   align-items: center;
+
   width: 7rem;
+  height: 100%;
 `;
 
 export const button = ({ theme }: { theme: Theme }) => {

frontend/src/pages/Chatting/ChatPage/components/ChattingFooter/ChattingFooter.style.ts

@@ -6,6 +6,10 @@ export const footer = ({ theme }: { theme: Theme }) => css`
   justify-content: space-around;
 
   padding: 1.3rem 0;
+  /* stylelint-disable */
+  padding-bottom: constant(safe-area-inset-bottom);
+  /* stylelint-enable */
+  padding-bottom: env(safe-area-inset-bottom);
 
   background-color: ${theme.colorPalette.white[100]};
   box-shadow: 0 -10px 15px rgb(0 0 0 / 20%);

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

@@ -1,25 +1,26 @@
 import { useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import Back from '@_common/assets/back.svg';
 import CalenderClock from '@_components/Icons/CalenderClock';
+import ChatBottomMenu from '../ChatPage/components/ChatBottomMenu/ChatBottomMenu';
+import ChatList from '../ChatPage/components/ChatList/ChatList';
+import ChatMenuItem from '../ChatPage/components/ChatMenuItem/ChatMenuItem';
+import ChattingFooter from '../ChatPage/components/ChattingFooter/ChattingFooter';
+import ChattingRoomLayout from '@_layouts/ChattingRoomLayout/ChattingRoomLayout';
+import DarakbangNameWrapper from '@_components/DarakbangNameWrapper/DarakbangNameWrapper';
+import DateTimeModalContent from '../ChatPage/components/DateTimeModalContent/DateTimeModalContent';
 import MissingFallback from '@_components/MissingFallback/MissingFallback';
 import Modal from '@_components/Modal/Modal';
 import Picker from '@_components/Icons/Picker';
+import PlaceModalContent from './components/PlaceModalContent/PlaceModalContent';
+import SolidArrow from '@_components/Icons/SolidArrow';
 import useChamyoMine from '@_hooks/queries/useChamyoMine';
 import useChats from '@_hooks/queries/useChats';
 import useConfirmDateTime from '@_hooks/mutaions/useConfirmDatetime';
 import useConfirmPlace from '@_hooks/mutaions/useConfirmPlace';
-import useMoims from '@_hooks/queries/useMoims';
+import useMoim from '@_hooks/queries/useMoim';
 import useSendMessage from '@_hooks/mutaions/useSendMessage';
 import { useTheme } from '@emotion/react';
-import PlaceModalContent from './components/PlaceModalContent/PlaceModalContent';
-import DateTimeModalContent from '../ChatPage/components/DateTimeModalContent/DateTimeModalContent';
-import ChatBottomMenu from '../ChatPage/components/ChatBottomMenu/ChatBottomMenu';
-import ChattingRoomLayout from '@_layouts/ChattingRoomLayout/ChattingRoomLayout';
-import ChatMenuItem from '../ChatPage/components/ChatMenuItem/ChatMenuItem';
-import ChatList from '../ChatPage/components/ChatList/ChatList';
-import ChattingFooter from '../ChatPage/components/ChattingFooter/ChattingFooter';
 
 type ModalContent = 'place' | 'datetime';
 
@@ -30,9 +31,9 @@ export default function ChattingRoomPage() {
 
   const moimId = +(params.moimId || '0');
 
-  const { moims } = useMoims();
   const { chats } = useChats(moimId);
   const { role } = useChamyoMine(moimId);
+  const { moim } = useMoim(moimId);
 
   const { mutate: confirmDateTime, isPending: isPendingConfirmDateTime } =
     useConfirmDateTime();
@@ -44,11 +45,6 @@ export default function ChattingRoomPage() {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [nowModalContent, setNowModalContent] = useState<ModalContent>('place');
 
-  const moimTitle = useMemo(
-    () => moims?.find((moim) => moim.moimId === moimId)?.title,
-    [moims, moimId],
-  );
-
   const modal = useMemo(() => {
     if (nowModalContent === 'datetime')
       return (
@@ -121,12 +117,12 @@ export default function ChattingRoomPage() {
     <ChattingRoomLayout>
       <ChattingRoomLayout.Header>
         <ChattingRoomLayout.Header.Left>
-          <div onClick={() => navigate(-1)}>
-            <Back />
-          </div>
+          <SolidArrow direction="left" onClick={() => navigate(-1)} />
         </ChattingRoomLayout.Header.Left>
         <ChattingRoomLayout.Header.Center>
-          <h2 css={theme.typography.s1}>{moimTitle}</h2>
+          <DarakbangNameWrapper font={theme.typography.s1}>
+            {moim?.title}
+          </DarakbangNameWrapper>
         </ChattingRoomLayout.Header.Center>
       </ChattingRoomLayout.Header>
       <ChatList chats={chats} />