채팅 기능 구현

next.config.js

@@ -10,6 +10,7 @@ const nextConfig = {
         MATITTING_HOST_URL: process.env.MATITTING_HOST_URL,
         NAVER_CLIENT_ID: process.env.NAVER_CLIENT_ID, //ClientID
         SNS_CALLBACK_URL: process.env.SNS_CALLBACK_URL, // Callback URL
+        WEB_SOCKET_URL: process.env.WEB_SOCKET_URL,
     },
     images: {
         domains: [

pages/chat/[id].tsx

@@ -1,51 +1,27 @@
-import BottomInputGroup from "@components/chat/BottomInputGroup";
-import HeaderBtnGroup from "@components/chat/HeaderBtnGroup";
-import MessageList from "@components/chat/MessageList";
-import styled from "@emotion/styled";
-import { ReactElement, MouseEvent, useState } from "react";
-
-const Wrapper = styled.div({
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "space-between",
-  height: "100vh",
-});
-
-const Contents = styled.main({
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "flex-end",
-});
-
-const ChattingRoom = () => {
-  const [isOpenUserList, setIsOpenUserList] = useState(false);
-
-  const handleCloseUserList = (e: MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation();
-    setIsOpenUserList(false);
-  };
-
-  const handleOpenUserList = (e: MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-    setIsOpenUserList(true);
-  };
-
-  return (
-    <Wrapper onClick={handleCloseUserList}>
-      <HeaderBtnGroup
-        isOpenUserList={isOpenUserList}
-        handleOpenUserList={handleOpenUserList}
-      />
-      <Contents>
-        <MessageList />
-        <BottomInputGroup />
-      </Contents>
-    </Wrapper>
-  );
-};
-
-ChattingRoom.getLayout = (page: ReactElement) => {
-  return <>{page}</>;
+import { GetServerSideProps } from 'next';
+import QuerySuspenseErrorBoundary from '@components/hoc/QuerySuspenseErrorBoundary';
+import ChatRoom from '@components/chat/room/ChatRoom';
+import ProfileLoading from '@components/profile/ProfileLoading';
+import ChatProvider from '@contexts/ChatProvider';
+
+interface ChatRoomPageProps {
+    roomId: number;
+}
+
+const ChatRoomPage = ({ roomId }: ChatRoomPageProps) => (
+    <ChatProvider roomId={roomId}>
+        <QuerySuspenseErrorBoundary suspenseFallback={<ProfileLoading />}>
+            <ChatRoom />
+        </QuerySuspenseErrorBoundary>
+    </ChatProvider>
+);
+
+export default ChatRoomPage;
+
+export const getServerSideProps: GetServerSideProps = async ({ params }) => {
+    const { id: roomId } = params as { id: string };
+
+    return {
+        props: { roomId: Number(roomId) },
+    };
 };
-
-export default ChattingRoom;

pages/chat/index.tsx

@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+import { NextPage } from 'next';
+import { DefaultHeader } from '@components/common/DefaultHeader';
+import { DefaultText } from '@components/common/DefaultText';
+import QuerySuspenseErrorBoundary from '@components/hoc/QuerySuspenseErrorBoundary';
+import ChatList from '@components/chat/list/ChatList';
+
+const Wrapper = styled.div`
+    margin: 0 auto;
+    padding: 45px 0 75px 0;
+    height: 100%;
+    min-height: calc(100vh);
+    max-width: 760px;
+    min-width: 320px;
+`;
+
+const NotList = styled.div`
+    text-align: center;
+    padding: 10rem;
+    font-size: 3vw;
+`;
+
+const ChatListPage: NextPage = () => (
+    <Wrapper>
+        <DefaultHeader centerArea={<DefaultText text="채팅방" size={17} weight={700} />} />
+        <QuerySuspenseErrorBoundary
+            errorFallback={() => <NotList>참여중인 방이 없습니다.</NotList>}
+        >
+            <ChatList />
+        </QuerySuspenseErrorBoundary>
+    </Wrapper>
+);
+
+export default ChatListPage;