feat: 채팅 관련 페이지 스켈레톤 구현 (#387)

- 채팅 목록 페이지는 코드 스플리팅 적용 해제
- 채팅 페이지는 스켈레톤 구현

src/pages/ChattingPage/ChattingPageSkeleton/ChattingPageSkeleton.styles.ts

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+import { Flex } from '@components/shared/Flex';
+
+export const TitleSkeletonWrapper = styled(Flex)`
+  height: 100%;
+`;

src/pages/ChattingPage/ChattingPageSkeleton/ChattingPageSkeleton.tsx

@@ -0,0 +1,38 @@
+import Hamburger from '@/assets/hamburger.svg?react';
+
+import { Header } from '@components/Header';
+import { Skeleton } from '@components/Skeleton';
+import { Input } from '@components/shared/Input';
+
+import { theme } from '@styles/theme';
+
+import { InputWrapper, SendButton } from '../ChattingPage.style';
+import { TitleSkeletonWrapper } from './ChattingPageSkeleton.styles';
+
+export const ChattingPageSkeleton = () => {
+  return (
+    <Skeleton
+      width="100px"
+      height="14px"
+      radius="5px"
+      defaultColor={theme.PALETTE.GRAY_100}
+      gradientColor={theme.PALETTE.GRAY_200}
+    >
+      <Header
+        isLogo={false}
+        title={
+          <TitleSkeletonWrapper justify="center" align="center">
+            <Skeleton.Item />
+          </TitleSkeletonWrapper>
+        }
+        isRightContainer={true}
+        rightElement={<Hamburger />}
+      />
+      <InputWrapper>
+        <Input height="48px" backgroundColor={theme.PALETTE.GRAY_200}>
+          <SendButton>전송</SendButton>
+        </Input>
+      </InputWrapper>
+    </Skeleton>
+  );
+};

src/pages/ChattingPage/ChattingPageSkeleton/index.ts

@@ -0,0 +1 @@
+export * from './ChattingPageSkeleton';

src/pages/ChattingPage/index.ts

@@ -1 +1,2 @@
 export * from './ChattingPage';
+export * from './ChattingPageSkeleton';

src/routes/lazyPages.ts

@@ -1,8 +1,5 @@
 import { lazy } from 'react';
 
-export const ChatRoomListPage = lazy(async () => ({
-  default: (await import('@pages/ChatRoomListPage')).ChatRoomListPage,
-}));
 export const ChattingPage = lazy(async () => ({
   default: (await import('@pages/ChattingPage')).ChattingPage,
 }));

src/routes/router.tsx

@@ -4,6 +4,8 @@ import { createBrowserRouter } from 'react-router-dom';
 
 import { AllServicesPage } from '@pages/AllServicesPage';
 import { AuthErrorPage } from '@pages/AuthErrorPage';
+import { ChatRoomListPage } from '@pages/ChatRoomListPage';
+import { ChattingPageSkeleton } from '@pages/ChattingPage';
 import { CreateCrewPageSkeleton } from '@pages/CreateCrewPage';
 import { CreateGamePageSkeleton } from '@pages/CreateGamePage';
 import { CreatePage } from '@pages/CreatePage';
@@ -24,7 +26,6 @@ import { ManagePageSkeleton } from '@pages/__components__/ManagePageSkeleton';
 import { LoginRequireBoundary } from './LoginRequireBoundary';
 import { ScrollTop } from './ScrollTop';
 import {
-  ChatRoomListPage,
   ChattingPage,
   CreateCrewPage,
   CreateGamePage,
@@ -204,15 +205,17 @@ export const router = createBrowserRouter([
         path: 'map',
         element: <MapPage />,
       },
-      /** TODO 스켈레톤 만들어야 함 */
       {
         path: 'chat',
         element: <ChatRoomListPage />,
       },
-      /** TODO 스켈레톤 만들어야 함 */
       {
         path: 'chat/:id',
-        element: <ChattingPage />,
+        element: (
+          <Suspense fallback={<ChattingPageSkeleton />}>
+            <ChattingPage />
+          </Suspense>
+        ),
       },
       {
         path: 'notification',