채팅방 버그 수정

frontend/package.json

@@ -83,6 +83,7 @@
     "typescript": "^5.5.3",
     "undici": "^6.19.5",
     "webpack": "^5.92.1",
+    "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4"
   },

frontend/src/App.tsx

@@ -15,9 +15,10 @@ export default function App() {
 
   useEffect(() => {
     window.addEventListener('beforeunload', removeInviteCode);
-
-    return window.removeEventListener('beforeunload', removeInviteCode);
-  });
+    return () => {
+      window.removeEventListener('beforeunload', removeInviteCode);
+    };
+  }, []);
 
   return (
     <ThemeProvider theme={theme}>

frontend/src/common/font.style.ts

@@ -8,7 +8,6 @@ import pretendardMediumWoff2 from './assets/fonts/woff2-subset/Pretendard-Medium
 import pretendardRegularWoff2 from './assets/fonts/woff2-subset/Pretendard-Regular.subset.woff2';
 import pretendardSemiboldWoff2 from './assets/fonts/woff2-subset/Pretendard-SemiBold.subset.woff2';
 import pretendardThinWoff2 from './assets/fonts/woff2-subset/Pretendard-Thin.subset.woff2';
-import pretendardVariableWoff2 from './assets/fonts/woff2/PretendardVariable.woff2';
 
 const fonts = css`
   @font-face {
@@ -76,14 +75,6 @@ const fonts = css`
     font-display: swap;
     src: url(${pretendardThinWoff2}) format('woff2');
   }
-
-  @font-face {
-    font-family: 'Pretendard Variable';
-    font-weight: 45 920;
-    font-style: normal;
-    font-display: swap;
-    src: url(${pretendardVariableWoff2}) format('woff2-variations');
-  }
 `;
 
 export default fonts;

frontend/src/components/MissingFallback/MissingFallback.tsx

@@ -2,7 +2,7 @@ import * as S from './MissingFallback.style';
 
 import { SerializedStyles, useTheme } from '@emotion/react';
 
-import regretCat from '@_common/assets/regret_cat.png';
+import regretCat from '@_common/assets/regret_cat.webp';
 
 interface MissingFallbackProps {
   text: string;

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import defaultProfile from '@_common/assets/default_profile.png';
+import defaultProfile from '@_common/assets/empty_profile.svg?url';
 
 export const preview = ({
   imageUrl,

frontend/src/custom.d.ts

@@ -2,6 +2,7 @@ declare module '*.png';
 declare module '*.jpg';
 declare module '*.jpeg';
 declare module '*.gif';
+declare module '*.webp';
 declare module '*.woff2' {
   const src: string;
   export default src;

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/index.tsx

@@ -27,22 +27,28 @@ if (process.env.NODE_ENV === 'production' && process.env.SENTRY_DSN) {
   });
 }
 
-async function enableMocking() {
-  if (process.env.MSW !== 'true') {
-    return;
+const enableMocking = async () => {
+  if (process.env.NODE_ENV === 'development' && process.env.MSW === 'true') {
+    const { worker } = await import('./mocks/browser');
+    await worker.start();
   }
+};
 
-  const { worker } = await import('./mocks/browser');
-
-  return worker.start();
-}
-
-enableMocking().then(() => {
+const renderApp = () => {
   const rootElement = document.getElementById('root') as HTMLElement;
   const root = createRoot(rootElement);
+
   root.render(
     <React.StrictMode>
       <App />
     </React.StrictMode>,
   );
-});
+};
+
+// MSW가 개발 환경에서만 동작하도록 설정하고, 앱을 렌더링
+const init = async () => {
+  await enableMocking();
+  renderApp();
+};
+
+init();

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%);