From e7d2a4ef7d8eafebc1e2d7770652759c56be6b86 Mon Sep 17 00:00:00 2001
From: juyeong-chungbuk <happyu9986@gmail.com>
Date: Sun, 25 Sep 2022 02:07:31 +0900
Subject: [PATCH 01/13] =?UTF-8?q?delete=20:=20=ED=95=84=EC=9A=94=EC=97=86?=
 =?UTF-8?q?=EB=8A=94=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RegisterMeeting/RequestedItem/index.tsx   | 76 -------------------
 .../RequestedItem/style.module.scss           | 41 ----------
 .../MyMeeting/RegisterMeeting/index.tsx       | 50 ------------
 .../RegisterMeeting/style.module.scss         | 42 ----------
 4 files changed, 209 deletions(-)
 delete mode 100644 src/components/MyMeeting/RegisterMeeting/RequestedItem/index.tsx
 delete mode 100644 src/components/MyMeeting/RegisterMeeting/RequestedItem/style.module.scss
 delete mode 100644 src/components/MyMeeting/RegisterMeeting/index.tsx
 delete mode 100644 src/components/MyMeeting/RegisterMeeting/style.module.scss

diff --git a/src/components/MyMeeting/RegisterMeeting/RequestedItem/index.tsx b/src/components/MyMeeting/RegisterMeeting/RequestedItem/index.tsx
deleted file mode 100644
index ed9aee8f..00000000
--- a/src/components/MyMeeting/RegisterMeeting/RequestedItem/index.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { memo, useMemo, useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
-import MutiProfile from 'src/components/shared/MultiProfile';
-import { useIntersectObserver } from 'src/hooks';
-import { MyMeetingRequestType } from 'src/types/myMeeting';
-
-import $ from './style.module.scss';
-
-function RequestedItem({ comment, requestedInfo, date }: MyMeetingRequestType) {
-  const navigate = useNavigate();
-  const requestedMeetingRef = useRef<HTMLLIElement | null>(null);
-  const imgRefs = useRef<HTMLImageElement[]>([]);
-  const profileList = useMemo(
-    () =>
-      requestedInfo
-        .map(({ nickName, src }) => ({ alt: nickName, src: src }))
-        .slice(0, 3),
-    []
-  );
-
-  const lazyLoadCallback = (
-    entries: IntersectionObserverEntry[],
-    observer: IntersectionObserver
-  ) => {
-    const targetBox = entries[0];
-    if (targetBox.isIntersecting) {
-      imgRefs.current.forEach((img) => {
-        if (img && img.dataset.src) img.src = img.dataset.src;
-      });
-      observer.unobserve(targetBox.target);
-    }
-  };
-
-  useIntersectObserver<HTMLLIElement>(
-    { threshold: 0.1 },
-    requestedMeetingRef,
-    lazyLoadCallback
-  );
-
-  const getProfileInfo = () => {
-    navigate('/home/detail');
-  };
-
-  const clickAcceptBtn = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-  };
-  const clickRefuseBtn = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-  };
-
-  return (
-    <li
-      className={$['requested-info']}
-      ref={requestedMeetingRef}
-      onClick={getProfileInfo}
-    >
-      <MutiProfile profileList={profileList} parentRef={requestedMeetingRef} />
-
-      <div className={$['info']}>
-        <span className={$['comment']}>{comment}</span>
-        <span className={$['date']}>{date}</span>
-      </div>
-
-      <div className={$['request-btn-wrapper']}>
-        <button className={$['accept-btn']} onClick={clickAcceptBtn}>
-          수락
-        </button>
-        <button className={$['refuse-btn']} onClick={clickRefuseBtn}>
-          거절
-        </button>
-      </div>
-    </li>
-  );
-}
-
-export default memo(RequestedItem);
diff --git a/src/components/MyMeeting/RegisterMeeting/RequestedItem/style.module.scss b/src/components/MyMeeting/RegisterMeeting/RequestedItem/style.module.scss
deleted file mode 100644
index 0dfc98c7..00000000
--- a/src/components/MyMeeting/RegisterMeeting/RequestedItem/style.module.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-@import 'src/styles/main';
-
-.requested-info {
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid $gray-250;
-  padding: 10px;
-  cursor: pointer;
-
-  .info {
-    display: flex;
-    flex-direction: column;
-    margin-left: 10px;
-    width: 35%;
-
-    .comment {
-      @include textOverFlow;
-      font-size: 14px;
-      margin-bottom: 5px;
-    }
-    .date {
-      font-size: 12px;
-      color: $gray-600;
-    }
-  }
-
-  .request-btn-wrapper {
-    margin-left: auto;
-    button {
-      @include button(70px, 2px solid $primary, $primary, $white, 15px, 35px);
-      cursor: pointer;
-      &:first-child {
-        margin-right: 5px;
-      }
-      &:hover {
-        background-color: $white;
-        color: $black;
-      }
-    }
-  }
-}
diff --git a/src/components/MyMeeting/RegisterMeeting/index.tsx b/src/components/MyMeeting/RegisterMeeting/index.tsx
deleted file mode 100644
index 8daca534..00000000
--- a/src/components/MyMeeting/RegisterMeeting/index.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { memo, useMemo, useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
-import MutiProfile from 'src/components/shared/MultiProfile';
-import { MyMeetingType } from 'src/types/myMeeting';
-
-import Badge from '../Badge';
-import $ from './style.module.scss';
-
-function RegisterMeeting({
-  kind,
-  title,
-  content,
-  friends,
-  date,
-}: MyMeetingType) {
-  const navigate = useNavigate();
-  const myMeetingRef = useRef<HTMLLIElement | null>(null);
-  const profileList = useMemo(
-    () =>
-      friends
-        .map(({ src, nickName }) => ({
-          src,
-          alt: nickName,
-        }))
-        .slice(0, 3),
-    []
-  );
-
-  const getRequestList = () => {
-    // 요청 리스트 fetch
-    navigate('/mymeeting/register/detail');
-  };
-
-  return (
-    <li className={$['my-meeting']} onClick={getRequestList} ref={myMeetingRef}>
-      <MutiProfile profileList={profileList} parentRef={myMeetingRef} />
-
-      <div className={$['my-meeting-info']}>
-        <div className={$['info-heading']}>
-          <Badge text={kind} />
-          <span className={$.date}>{date}</span>
-        </div>
-        <span className={$.title}>{title}</span>
-        <span className={$.content}>{content}</span>
-      </div>
-    </li>
-  );
-}
-
-export default memo(RegisterMeeting);
diff --git a/src/components/MyMeeting/RegisterMeeting/style.module.scss b/src/components/MyMeeting/RegisterMeeting/style.module.scss
deleted file mode 100644
index de9bf21c..00000000
--- a/src/components/MyMeeting/RegisterMeeting/style.module.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@import 'src/styles/main.scss';
-
-.my-meeting {
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid $gray-250;
-  padding: 10px;
-  cursor: pointer;
-
-  .my-meeting-info {
-    width: calc(100% - 70px);
-    display: flex;
-    flex-direction: column;
-    margin-left: 10px;
-    > :not(:last-child) {
-      margin-bottom: 5px;
-    }
-
-    .info-heading {
-      display: flex;
-      align-items: center;
-
-      .date {
-        font-size: 12px;
-        color: $gray-600;
-        white-space: nowrap;
-        margin-left: auto;
-      }
-    }
-
-    .title {
-      @include textOverFlow;
-      font-size: 15px;
-      font-weight: 700;
-    }
-
-    .content {
-      @include textOverFlow;
-      font-size: 14px;
-    }
-  }
-}

From e5f8f172060d835467474fa7bd918f9cf20968e9 Mon Sep 17 00:00:00 2001
From: juyeong-chungbuk <happyu9986@gmail.com>
Date: Sun, 25 Sep 2022 02:08:19 +0900
Subject: [PATCH 02/13] =?UTF-8?q?fix=20:=20mymeeting=20=EC=97=90=EB=9F=AC?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/__mocks__/myMeeting.ts                    |  2 +-
 .../MyMeeting/RequestedItem/index.tsx         | 76 +++++++++++++++++++
 .../MyMeeting/RequestedItem/style.module.scss | 41 ++++++++++
 src/components/MyMeeting/index.ts             |  3 +-
 .../MyMeetingPages/RegisterDetailPage.tsx     |  4 +-
 5 files changed, 121 insertions(+), 5 deletions(-)
 create mode 100644 src/components/MyMeeting/RequestedItem/index.tsx
 create mode 100644 src/components/MyMeeting/RequestedItem/style.module.scss

diff --git a/src/__mocks__/myMeeting.ts b/src/__mocks__/myMeeting.ts
index 7570db5e..9d864a44 100644
--- a/src/__mocks__/myMeeting.ts
+++ b/src/__mocks__/myMeeting.ts
@@ -149,7 +149,7 @@ export const registerMeetingMocks = [
   },
 ];
 
-export const requestListMocks = [
+export const requestedListMocks = [
   {
     comment: '공대도 받아주세요! ~~~~~~~~~~~~~~',
     requestedInfo: [
diff --git a/src/components/MyMeeting/RequestedItem/index.tsx b/src/components/MyMeeting/RequestedItem/index.tsx
new file mode 100644
index 00000000..ed9aee8f
--- /dev/null
+++ b/src/components/MyMeeting/RequestedItem/index.tsx
@@ -0,0 +1,76 @@
+import { memo, useMemo, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import MutiProfile from 'src/components/shared/MultiProfile';
+import { useIntersectObserver } from 'src/hooks';
+import { MyMeetingRequestType } from 'src/types/myMeeting';
+
+import $ from './style.module.scss';
+
+function RequestedItem({ comment, requestedInfo, date }: MyMeetingRequestType) {
+  const navigate = useNavigate();
+  const requestedMeetingRef = useRef<HTMLLIElement | null>(null);
+  const imgRefs = useRef<HTMLImageElement[]>([]);
+  const profileList = useMemo(
+    () =>
+      requestedInfo
+        .map(({ nickName, src }) => ({ alt: nickName, src: src }))
+        .slice(0, 3),
+    []
+  );
+
+  const lazyLoadCallback = (
+    entries: IntersectionObserverEntry[],
+    observer: IntersectionObserver
+  ) => {
+    const targetBox = entries[0];
+    if (targetBox.isIntersecting) {
+      imgRefs.current.forEach((img) => {
+        if (img && img.dataset.src) img.src = img.dataset.src;
+      });
+      observer.unobserve(targetBox.target);
+    }
+  };
+
+  useIntersectObserver<HTMLLIElement>(
+    { threshold: 0.1 },
+    requestedMeetingRef,
+    lazyLoadCallback
+  );
+
+  const getProfileInfo = () => {
+    navigate('/home/detail');
+  };
+
+  const clickAcceptBtn = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+  };
+  const clickRefuseBtn = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+  };
+
+  return (
+    <li
+      className={$['requested-info']}
+      ref={requestedMeetingRef}
+      onClick={getProfileInfo}
+    >
+      <MutiProfile profileList={profileList} parentRef={requestedMeetingRef} />
+
+      <div className={$['info']}>
+        <span className={$['comment']}>{comment}</span>
+        <span className={$['date']}>{date}</span>
+      </div>
+
+      <div className={$['request-btn-wrapper']}>
+        <button className={$['accept-btn']} onClick={clickAcceptBtn}>
+          수락
+        </button>
+        <button className={$['refuse-btn']} onClick={clickRefuseBtn}>
+          거절
+        </button>
+      </div>
+    </li>
+  );
+}
+
+export default memo(RequestedItem);
diff --git a/src/components/MyMeeting/RequestedItem/style.module.scss b/src/components/MyMeeting/RequestedItem/style.module.scss
new file mode 100644
index 00000000..0dfc98c7
--- /dev/null
+++ b/src/components/MyMeeting/RequestedItem/style.module.scss
@@ -0,0 +1,41 @@
+@import 'src/styles/main';
+
+.requested-info {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid $gray-250;
+  padding: 10px;
+  cursor: pointer;
+
+  .info {
+    display: flex;
+    flex-direction: column;
+    margin-left: 10px;
+    width: 35%;
+
+    .comment {
+      @include textOverFlow;
+      font-size: 14px;
+      margin-bottom: 5px;
+    }
+    .date {
+      font-size: 12px;
+      color: $gray-600;
+    }
+  }
+
+  .request-btn-wrapper {
+    margin-left: auto;
+    button {
+      @include button(70px, 2px solid $primary, $primary, $white, 15px, 35px);
+      cursor: pointer;
+      &:first-child {
+        margin-right: 5px;
+      }
+      &:hover {
+        background-color: $white;
+        color: $black;
+      }
+    }
+  }
+}
diff --git a/src/components/MyMeeting/index.ts b/src/components/MyMeeting/index.ts
index e24172ca..3d595645 100644
--- a/src/components/MyMeeting/index.ts
+++ b/src/components/MyMeeting/index.ts
@@ -1,4 +1,3 @@
 export { default as PostCard } from './PostCard';
-export { default as RegisterMeeting } from './RegisterMeeting';
-export { default as RequestedList } from './RegisterMeeting/RequestedItem';
+export { default as RequestedList } from './RequestedItem';
 export { default as RequestMeeting } from './RequestMeeting';
diff --git a/src/pages/MyMeetingPages/RegisterDetailPage.tsx b/src/pages/MyMeetingPages/RegisterDetailPage.tsx
index 8d000d87..e8e4fe14 100644
--- a/src/pages/MyMeetingPages/RegisterDetailPage.tsx
+++ b/src/pages/MyMeetingPages/RegisterDetailPage.tsx
@@ -2,7 +2,7 @@ import { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
   registerMeetingMocks,
-  requestListMocks,
+  requestedListMocks,
 } from 'src/__mocks__/myMeeting';
 import { PostCard, RequestedList } from 'src/components/MyMeeting';
 import { InfiniteScroll } from 'src/components/shared/Layout';
@@ -29,7 +29,7 @@ export default function RegisterDetailPage() {
   );
 
   const fetchMoreMeetingFeeds = () => {
-    setRegisterMeeting([...requestedMeeting, ...requestListMocks]);
+    setRegisterMeeting([...requestedMeeting, ...requestedListMocks]);
   };
 
   const getProfileInfo = () => {

From d23f01afe21bab9244b5c9355c5f1c2b2645484a Mon Sep 17 00:00:00 2001
From: juyeong-chungbuk <happyu9986@gmail.com>
Date: Sun, 25 Sep 2022 02:09:49 +0900
Subject: [PATCH 03/13] =?UTF-8?q?chore=20:=20=EC=9A=94=EC=B2=AD=20?=
 =?UTF-8?q?=EB=AF=B8=ED=8C=85=20=EB=84=A4=EC=9D=B4=EB=B0=8D=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MyMeeting/{RequestMeeting => RequestItem}/index.tsx       | 4 ++--
 .../{RequestMeeting => RequestItem}/style.module.scss         | 0
 src/components/MyMeeting/index.ts                             | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)
 rename src/components/MyMeeting/{RequestMeeting => RequestItem}/index.tsx (96%)
 rename src/components/MyMeeting/{RequestMeeting => RequestItem}/style.module.scss (100%)

diff --git a/src/components/MyMeeting/RequestMeeting/index.tsx b/src/components/MyMeeting/RequestItem/index.tsx
similarity index 96%
rename from src/components/MyMeeting/RequestMeeting/index.tsx
rename to src/components/MyMeeting/RequestItem/index.tsx
index 6af2bedb..91322070 100644
--- a/src/components/MyMeeting/RequestMeeting/index.tsx
+++ b/src/components/MyMeeting/RequestItem/index.tsx
@@ -7,7 +7,7 @@ import { MyMeetingRequestType } from 'src/types/myMeeting';
 import StateBadge from '../StateBadge';
 import $ from './style.module.scss';
 
-function RequestMeeting({
+function RequestItem({
   comment,
   requestedInfo,
   date,
@@ -77,4 +77,4 @@ function RequestMeeting({
   );
 }
 
-export default memo(RequestMeeting);
+export default memo(RequestItem);
diff --git a/src/components/MyMeeting/RequestMeeting/style.module.scss b/src/components/MyMeeting/RequestItem/style.module.scss
similarity index 100%
rename from src/components/MyMeeting/RequestMeeting/style.module.scss
rename to src/components/MyMeeting/RequestItem/style.module.scss
diff --git a/src/components/MyMeeting/index.ts b/src/components/MyMeeting/index.ts
index 3d595645..c48318a6 100644
--- a/src/components/MyMeeting/index.ts
+++ b/src/components/MyMeeting/index.ts
@@ -1,3 +1,3 @@
 export { default as PostCard } from './PostCard';
 export { default as RequestedList } from './RequestedItem';
-export { default as RequestMeeting } from './RequestMeeting';
+export { default as RequestMeeting } from './RequestItem';

From 12b89b7917926f04de6299f71cb6e56b7d01acf0 Mon Sep 17 00:00:00 2001
From: juyeong-chungbuk <happyu9986@gmail.com>
Date: Sun, 25 Sep 2022 21:25:30 +0900
Subject: [PATCH 04/13] =?UTF-8?q?feat=20:=20=EC=B1=84=ED=8C=85=EB=B0=A9=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EC=86=8C=EC=BC=93=20=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  1 +
 src/__mocks__/myMeeting.ts                    | 67 +++++--------------
 src/common/actionTypes.ts                     |  1 +
 src/common/socket.ts                          |  3 +
 .../MyMeeting/RequestItem/index.tsx           |  1 +
 .../MyMeeting/RequestedItem/index.tsx         | 17 +++--
 .../MyMeetingPages/RegisterDetailPage.tsx     | 14 ++--
 src/pages/MyMeetingPages/RequestPage.tsx      |  4 +-
 src/types/myMeeting.ts                        |  1 +
 yarn.lock                                     | 51 +++++++++++++-
 10 files changed, 96 insertions(+), 64 deletions(-)
 create mode 100644 src/common/actionTypes.ts
 create mode 100644 src/common/socket.ts

diff --git a/package.json b/package.json
index 5809d3bc..1ce8bcda 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "react-hook-form": "^7.27.1",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
+    "socket.io-client": "^4.5.2",
     "typescript": "~4.1.5",
     "yup": "^0.32.11",
     "zustand": "^4.0.0-rc.1"
diff --git a/src/__mocks__/myMeeting.ts b/src/__mocks__/myMeeting.ts
index 9d864a44..27101ae7 100644
--- a/src/__mocks__/myMeeting.ts
+++ b/src/__mocks__/myMeeting.ts
@@ -151,6 +151,7 @@ export const registerMeetingMocks = [
 
 export const requestedListMocks = [
   {
+    boardId: 1,
     comment: '공대도 받아주세요! ~~~~~~~~~~~~~~',
     requestedInfo: [
       {
@@ -169,6 +170,7 @@ export const requestedListMocks = [
     date: '27초 전',
   },
   {
+    boardId: 2,
     comment: '공대도 받아주세요! ~~~~~~~~~~~~~~',
     requestedInfo: [
       {
@@ -187,6 +189,7 @@ export const requestedListMocks = [
     date: '27초 전',
   },
   {
+    boardId: 3,
     comment: '공대도 받아주세요! ~~~~~~~~~~~~~~',
     requestedInfo: [
       {
@@ -205,6 +208,7 @@ export const requestedListMocks = [
     date: '27초 전',
   },
   {
+    boardId: 4,
     comment: '공대도 받아주세요! ~~~~~~~~~~~~~~',
     requestedInfo: [
       {
@@ -223,6 +227,7 @@ export const requestedListMocks = [
     date: '27초 전',
   },
   {
+    boardId: 5,
     comment: '술 잘 먹어요 ㅎㅎ',
     requestedInfo: [
       {
@@ -237,6 +242,7 @@ export const requestedListMocks = [
     date: '30분 전',
   },
   {
+    boardId: 6,
     comment: '전정대랑 과팅합시다앙',
     requestedInfo: [
       {
@@ -247,6 +253,7 @@ export const requestedListMocks = [
     date: '2일 전',
   },
   {
+    boardId: 7,
     comment: '공대도 받아주세요 !',
     requestedInfo: [
       {
@@ -257,6 +264,7 @@ export const requestedListMocks = [
     date: '27초 전',
   },
   {
+    boardId: 8,
     comment: '술 잘 먹어요 ㅎㅎ',
     requestedInfo: [
       {
@@ -266,67 +274,20 @@ export const requestedListMocks = [
     ],
     date: '30분 전',
   },
-  {
-    comment: '전정대랑 과팅합시다앙',
-    requestedInfo: [
-      {
-        nickName: '라이언',
-        src: 'https://thumb.mt.co.kr/06/2021/12/2021122022255032493_1.jpg/dims/optimize/',
-      },
-    ],
-    date: '2일 전',
-  },
-  {
-    comment: '공대도 받아주세요 !',
-    requestedInfo: [
-      {
-        nickName: '라이언',
-        src: 'https://thumb.mt.co.kr/06/2021/12/2021122022255032493_1.jpg/dims/optimize/',
-      },
-    ],
-    date: '27초 전',
-  },
-  {
-    comment: '술 잘 먹어요 ㅎㅎ',
-    requestedInfo: [
-      {
-        nickName: '라이언',
-        src: 'https://thumb.mt.co.kr/06/2021/12/2021122022255032493_1.jpg/dims/optimize/',
-      },
-    ],
-    date: '30분 전',
-  },
-  {
-    comment: '전정대랑 과팅합시다앙',
-    requestedInfo: [
-      {
-        nickName: '라이언',
-        src: 'https://thumb.mt.co.kr/06/2021/12/2021122022255032493_1.jpg/dims/optimize/',
-      },
-    ],
-    date: '2일 전',
-  },
-  {
-    comment: '전정대랑 과팅합시다앙',
-    requestedInfo: [
-      {
-        nickName: '라이언',
-        src: 'https://thumb.mt.co.kr/06/2021/12/2021122022255032493_1.jpg/dims/optimize/',
-      },
-    ],
-    date: '2일 전',
-  },
 ];
 
 export const requestMeetingMocks = [
   {
+    boardId: 1,
     comment: '내가 신청함~~~~~~~~~~~~~~~~~~~~~~~~~~~~~',
     requestedInfo: [
       {
+        id: 1,
         nickName: '라이언',
         src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
       },
       {
+        id: 2,
         nickName: '라이언',
         src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
       },
@@ -335,9 +296,11 @@ export const requestMeetingMocks = [
     state: true,
   },
   {
+    boardId: 2,
     comment: '신청2',
     requestedInfo: [
       {
+        id: 1,
         nickName: '라이언',
         src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
       },
@@ -346,9 +309,11 @@ export const requestMeetingMocks = [
     state: false,
   },
   {
+    boardId: 3,
     comment: '내가 신청함',
     requestedInfo: [
       {
+        id: 1,
         nickName: '라이언',
         src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
       },
@@ -357,9 +322,11 @@ export const requestMeetingMocks = [
     state: true,
   },
   {
+    boardId: 4,
     comment: '신청2',
     requestedInfo: [
       {
+        id: 1,
         nickName: '라이언',
         src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
       },
diff --git a/src/common/actionTypes.ts b/src/common/actionTypes.ts
new file mode 100644
index 00000000..1b84bdbc
--- /dev/null
+++ b/src/common/actionTypes.ts
@@ -0,0 +1 @@
+export const ROOM_CHAT = 'room';
diff --git a/src/common/socket.ts b/src/common/socket.ts
new file mode 100644
index 00000000..93be08b5
--- /dev/null
+++ b/src/common/socket.ts
@@ -0,0 +1,3 @@
+import io from 'socket.io-client';
+const socket = io('http://localhost:5000');
+export default socket;
diff --git a/src/components/MyMeeting/RequestItem/index.tsx b/src/components/MyMeeting/RequestItem/index.tsx
index 91322070..5e901d4c 100644
--- a/src/components/MyMeeting/RequestItem/index.tsx
+++ b/src/components/MyMeeting/RequestItem/index.tsx
@@ -8,6 +8,7 @@ import StateBadge from '../StateBadge';
 import $ from './style.module.scss';
 
 function RequestItem({
+  boardId,
   comment,
   requestedInfo,
   date,
diff --git a/src/components/MyMeeting/RequestedItem/index.tsx b/src/components/MyMeeting/RequestedItem/index.tsx
index ed9aee8f..300d3c6d 100644
--- a/src/components/MyMeeting/RequestedItem/index.tsx
+++ b/src/components/MyMeeting/RequestedItem/index.tsx
@@ -1,12 +1,18 @@
 import { memo, useMemo, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
+import socket from 'src/common/socket';
 import MutiProfile from 'src/components/shared/MultiProfile';
 import { useIntersectObserver } from 'src/hooks';
 import { MyMeetingRequestType } from 'src/types/myMeeting';
 
 import $ from './style.module.scss';
 
-function RequestedItem({ comment, requestedInfo, date }: MyMeetingRequestType) {
+function RequestedItem({
+  boardId,
+  comment,
+  requestedInfo,
+  date,
+}: MyMeetingRequestType) {
   const navigate = useNavigate();
   const requestedMeetingRef = useRef<HTMLLIElement | null>(null);
   const imgRefs = useRef<HTMLImageElement[]>([]);
@@ -41,10 +47,11 @@ function RequestedItem({ comment, requestedInfo, date }: MyMeetingRequestType) {
     navigate('/home/detail');
   };
 
-  const clickAcceptBtn = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const handleAcceptBtn = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
+    socket.emit('room', boardId);
   };
-  const clickRefuseBtn = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const handleRefuseBtn = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
   };
 
@@ -62,10 +69,10 @@ function RequestedItem({ comment, requestedInfo, date }: MyMeetingRequestType) {
       </div>
 
       <div className={$['request-btn-wrapper']}>
-        <button className={$['accept-btn']} onClick={clickAcceptBtn}>
+        <button className={$['accept-btn']} onClick={handleAcceptBtn}>
           수락
         </button>
-        <button className={$['refuse-btn']} onClick={clickRefuseBtn}>
+        <button className={$['refuse-btn']} onClick={handleRefuseBtn}>
           거절
         </button>
       </div>
diff --git a/src/pages/MyMeetingPages/RegisterDetailPage.tsx b/src/pages/MyMeetingPages/RegisterDetailPage.tsx
index e8e4fe14..30446162 100644
--- a/src/pages/MyMeetingPages/RegisterDetailPage.tsx
+++ b/src/pages/MyMeetingPages/RegisterDetailPage.tsx
@@ -47,12 +47,14 @@ export default function RegisterDetailPage() {
 
       <InfiniteScroll trigger={fetchMoreMeetingFeeds}>
         <ul>
-          {requestedMeeting.map(({ comment, requestedInfo, date }, index) => (
-            <RequestedList
-              key={`requested-list-${index}`}
-              {...{ comment, requestedInfo, date }}
-            />
-          ))}
+          {requestedMeeting.map(
+            ({ boardId, comment, requestedInfo, date }, index) => (
+              <RequestedList
+                key={`requested-list-${index}`}
+                {...{ boardId, comment, requestedInfo, date }}
+              />
+            )
+          )}
         </ul>
       </InfiniteScroll>
     </>
diff --git a/src/pages/MyMeetingPages/RequestPage.tsx b/src/pages/MyMeetingPages/RequestPage.tsx
index a00447ae..150a2340 100644
--- a/src/pages/MyMeetingPages/RequestPage.tsx
+++ b/src/pages/MyMeetingPages/RequestPage.tsx
@@ -17,10 +17,10 @@ export default function RequestPage() {
     <InfiniteScroll trigger={fetchMoreMeetingFeeds}>
       <ul>
         {requestMeeting.map(
-          ({ comment, requestedInfo, date, state }, index) => (
+          ({ boardId, comment, requestedInfo, date, state }, index) => (
             <RequestMeeting
               key={`${date}-${index}`}
-              {...{ comment, requestedInfo, date, state }}
+              {...{ boardId, comment, requestedInfo, date, state }}
             />
           )
         )}
diff --git a/src/types/myMeeting.ts b/src/types/myMeeting.ts
index eba2ad45..f8884ffd 100644
--- a/src/types/myMeeting.ts
+++ b/src/types/myMeeting.ts
@@ -9,6 +9,7 @@ export type MyMeetingType = {
 };
 
 export type MyMeetingRequestType = {
+  boardId: number;
   comment: string;
   requestedInfo: { nickName: string; src: string }[];
   date: string;
diff --git a/yarn.lock b/yarn.lock
index 2b6da093..14bc42c9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1673,6 +1673,11 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@socket.io/component-emitter@~3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553"
+  integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==
+
 "@surma/rollup-plugin-off-main-thread@^2.2.3":
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz#ee34985952ca21558ab0d952f00298ad2190c053"
@@ -3644,7 +3649,7 @@ debug@2.6.9, debug@^2.6.0, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
+debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -3958,6 +3963,22 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
 
+engine.io-client@~6.2.1:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-6.2.2.tgz#c6c5243167f5943dcd9c4abee1bfc634aa2cbdd0"
+  integrity sha512-8ZQmx0LQGRTYkHuogVZuGSpDqYZtCM/nv8zQ68VZ+JkOpazJ7ICdsSpaO6iXwvaU30oFg5QJOJWj8zWqhbKjkQ==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+    engine.io-parser "~5.0.3"
+    ws "~8.2.3"
+    xmlhttprequest-ssl "~2.0.0"
+
+engine.io-parser@~5.0.3:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.0.4.tgz#0b13f704fa9271b3ec4f33112410d8f3f41d0fc0"
+  integrity sha512-+nVFp+5z1E3HcToEnO7ZIj3g+3k9389DvWtvJZz0T6/eOCPIyyxehFcedoYrZQrp0LgQbD9pPXhpMBKMd5QURg==
+
 enhanced-resolve@^5.0.0, enhanced-resolve@^5.10.0:
   version "5.10.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz#0dc579c3bb2a1032e357ac45b8f3a6f3ad4fb1e6"
@@ -8390,6 +8411,24 @@ slash@^4.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
   integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
 
+socket.io-client@^4.5.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.5.2.tgz#9481518c560388c980c88b01e3cf62f367f04c96"
+  integrity sha512-naqYfFu7CLDiQ1B7AlLhRXKX3gdeaIMfgigwavDzgJoIUYulc1qHH5+2XflTsXTPY7BlPH5rppJyUjhjrKQKLg==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.2"
+    engine.io-client "~6.2.1"
+    socket.io-parser "~4.2.0"
+
+socket.io-parser@~4.2.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.1.tgz#01c96efa11ded938dcb21cbe590c26af5eff65e5"
+  integrity sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+
 sockjs@^0.3.24:
   version "0.3.24"
   resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.24.tgz#c9bc8995f33a111bea0395ec30aa3206bdb5ccce"
@@ -9637,6 +9676,11 @@ ws@^8.4.2:
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.8.1.tgz#5dbad0feb7ade8ecc99b830c1d77c913d4955ff0"
   integrity sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA==
 
+ws@~8.2.3:
+  version "8.2.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.2.3.tgz#63a56456db1b04367d0b721a0b80cae6d8becbba"
+  integrity sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==
+
 xml-name-validator@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
@@ -9647,6 +9691,11 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
+xmlhttprequest-ssl@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67"
+  integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==
+
 xtend@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"

From eb272584a361f086419b4bdcc75762423ddb1ac0 Mon Sep 17 00:00:00 2001
From: juyeong-chungbuk <happyu9986@gmail.com>
Date: Sun, 25 Sep 2022 22:24:08 +0900
Subject: [PATCH 05/13] =?UTF-8?q?feat=20:=20=EC=B1=84=ED=8C=85=20=ED=97=A4?=
 =?UTF-8?q?=EB=8D=94=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/headerMenus.tsx     | 15 ++++++++++++++-
 src/pages/Chat/ChatList/index.tsx |  2 +-
 src/pages/Chat/ChatRoom/index.tsx |  2 +-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/constants/headerMenus.tsx b/src/constants/headerMenus.tsx
index c58de013..a5a7c8c8 100644
--- a/src/constants/headerMenus.tsx
+++ b/src/constants/headerMenus.tsx
@@ -49,6 +49,15 @@ const menusLeft: MenuType[] = [
     url: '/mymeeting/detail',
     isPathBeIncluded: true,
   },
+  {
+    icon: <Logo />,
+    url: '/chat',
+    isPathBeIncluded: false,
+  },
+  {
+    icon: <IoChevronBackOutline />,
+    url: '/chat/room',
+  },
   {
     icon: <IoChevronBack />,
     text: '내 정보',
@@ -93,9 +102,13 @@ const menusRight: MenuType[] = [
     url: '/mypage',
   },
   {
-    icon: <IoReorderThreeOutline />,
+    icon: <IoNotificationsOutline />,
     url: '/chat',
   },
+  {
+    icon: <IoReorderThreeOutline />,
+    url: '/chat/room',
+  },
   {
     icon: <IoSettingsOutline />,
     url: '/mypage',
diff --git a/src/pages/Chat/ChatList/index.tsx b/src/pages/Chat/ChatList/index.tsx
index 87117255..7a7f25d2 100644
--- a/src/pages/Chat/ChatList/index.tsx
+++ b/src/pages/Chat/ChatList/index.tsx
@@ -4,7 +4,7 @@ import { PageLayout } from 'src/components/shared/Layout';
 
 export default function ChatListPage() {
   return (
-    <PageLayout isNeedFooter={true}>
+    <PageLayout isNeedFooter={true} headerHeight={44}>
       <ul>
         {chatListMocks.map(
           ({ roomImage, title, content, time, count }, index) => (
diff --git a/src/pages/Chat/ChatRoom/index.tsx b/src/pages/Chat/ChatRoom/index.tsx
index 098cf401..756e8a89 100644
--- a/src/pages/Chat/ChatRoom/index.tsx
+++ b/src/pages/Chat/ChatRoom/index.tsx
@@ -116,7 +116,7 @@ export default function ChatRoomPage() {
   });
 
   return (
-    <PageLayout isNeedFooter={false}>
+    <PageLayout isNeedFooter={false} headerHeight={44}>
       {isClickProfile && (
         <div
           className={cx($['profile-active'], isOverHalf && $['profile-hidden'])}

From 863ecaeeaaed0a4731c64cbae7f1af3364632bfd Mon Sep 17 00:00:00 2001
From: juyeong-chungbuk <happyu9986@gmail.com>
Date: Mon, 26 Sep 2022 01:23:09 +0900
Subject: [PATCH 06/13] =?UTF-8?q?uiux=20:=20=EC=B1=84=ED=8C=85=20=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Chat/{ChatList => ChatItem}/index.tsx |  8 ++++----
 .../Chat/{ChatList => ChatItem}/style.module.scss    | 12 +++++++-----
 src/components/Chat/index.ts                         |  2 +-
 src/pages/Chat/ChatList/index.tsx                    |  4 ++--
 4 files changed, 14 insertions(+), 12 deletions(-)
 rename src/components/Chat/{ChatList => ChatItem}/index.tsx (83%)
 rename src/components/Chat/{ChatList => ChatItem}/style.module.scss (88%)

diff --git a/src/components/Chat/ChatList/index.tsx b/src/components/Chat/ChatItem/index.tsx
similarity index 83%
rename from src/components/Chat/ChatList/index.tsx
rename to src/components/Chat/ChatItem/index.tsx
index 5df7309f..5e38d8eb 100644
--- a/src/components/Chat/ChatList/index.tsx
+++ b/src/components/Chat/ChatItem/index.tsx
@@ -15,7 +15,7 @@ interface Props {
   count: string;
 }
 
-export default function ChatList({
+export default function ChatItem({
   roomImage,
   title,
   content,
@@ -23,7 +23,7 @@ export default function ChatList({
   count,
 }: Props) {
   const navigate = useNavigate();
-  const chatListRef = useRef<HTMLLIElement | null>(null);
+  const chatItemRef = useRef<HTMLLIElement | null>(null);
   const profileList = useMemo(
     () =>
       roomImage
@@ -41,8 +41,8 @@ export default function ChatList({
     navigate('./room');
   };
   return (
-    <li className={$['chat-list']} onClick={() => fetchChatRoom()}>
-      <MutiProfile profileList={profileList} parentRef={chatListRef} />
+    <li className={$['chat-item']} onClick={() => fetchChatRoom()}>
+      <MutiProfile profileList={profileList} parentRef={chatItemRef} />
       <div className={$['chat-info']}>
         <div className={$['main-info']}>
           <strong>{title}</strong>
diff --git a/src/components/Chat/ChatList/style.module.scss b/src/components/Chat/ChatItem/style.module.scss
similarity index 88%
rename from src/components/Chat/ChatList/style.module.scss
rename to src/components/Chat/ChatItem/style.module.scss
index 5dd03b6f..705aa562 100644
--- a/src/components/Chat/ChatList/style.module.scss
+++ b/src/components/Chat/ChatItem/style.module.scss
@@ -1,18 +1,19 @@
 @import 'src/styles/_color.scss';
 @import 'src/styles/_mixin.scss';
 
-.chat-list {
+.chat-item {
   display: flex;
   align-items: center;
-  height: 70px;
   border-bottom: 1px solid $gray-250;
-  padding: 0 5px;
+  padding: 10px;
   cursor: pointer;
 
   .chat-info {
-    width: calc(100% - 45px);
+    width: 100%;
     display: flex;
+    margin-left: 10px;
     overflow: hidden;
+
     & > .main-info,
     .more-info {
       display: flex;
@@ -20,7 +21,8 @@
     }
 
     .main-info {
-      max-width: 70%;
+      max-width: calc(100% - #{$boardDesktopImage + 15px});
+
       strong {
         font-size: 16px;
         font-weight: 700;
diff --git a/src/components/Chat/index.ts b/src/components/Chat/index.ts
index 7da7c299..7f77b418 100644
--- a/src/components/Chat/index.ts
+++ b/src/components/Chat/index.ts
@@ -1,4 +1,4 @@
 export { default as ChatCard } from './ChatCard';
-export { default as ChatList } from './ChatList';
+export { default as ChatItem } from './ChatItem';
 export { default as Message } from './Message';
 export { default as MessageInput } from './MessageInput';
diff --git a/src/pages/Chat/ChatList/index.tsx b/src/pages/Chat/ChatList/index.tsx
index 7a7f25d2..5cbb1315 100644
--- a/src/pages/Chat/ChatList/index.tsx
+++ b/src/pages/Chat/ChatList/index.tsx
@@ -1,5 +1,5 @@
 import { chatListMocks } from 'src/__mocks__/chat';
-import { ChatList } from 'src/components/Chat';
+import { ChatItem } from 'src/components/Chat';
 import { PageLayout } from 'src/components/shared/Layout';
 
 export default function ChatListPage() {
@@ -8,7 +8,7 @@ export default function ChatListPage() {
       <ul>
         {chatListMocks.map(
           ({ roomImage, title, content, time, count }, index) => (
-            <ChatList
+            <ChatItem
               key={title + index}
               {...{ roomImage, title, content, time, count }}
             />

From 9dec1c988ce35306083c0b75679aa2e23205ff5b Mon Sep 17 00:00:00 2001
From: juyeong-chungbuk <happyu9986@gmail.com>
Date: Mon, 26 Sep 2022 03:31:32 +0900
Subject: [PATCH 07/13] =?UTF-8?q?feat=20:=20=EC=B1=84=ED=8C=85=EB=B0=A9=20?=
 =?UTF-8?q?=EC=9E=85=EC=9E=A5=20=EC=8B=9C=20=EC=86=8C=EC=BC=93=20=EC=97=B0?=
 =?UTF-8?q?=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/__mocks__/chat.ts                            | 4 ++++
 src/common/actionTypes.ts                        | 2 +-
 src/components/Chat/ChatItem/index.tsx           | 5 ++++-
 src/components/MyMeeting/RequestedItem/index.tsx | 3 +--
 src/constants/headerMenus.tsx                    | 2 ++
 src/pages/Chat/ChatList/index.tsx                | 4 ++--
 src/pages/Chat/ChatRoom/index.tsx                | 8 ++++++++
 src/routes/ChatRoute.tsx                         | 2 +-
 8 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/__mocks__/chat.ts b/src/__mocks__/chat.ts
index 3747dc49..74da8eab 100644
--- a/src/__mocks__/chat.ts
+++ b/src/__mocks__/chat.ts
@@ -60,6 +60,7 @@ export const messageInfoMocks = [
 
 export const chatListMocks = [
   {
+    boardId: 1,
     roomImage: profileList,
     title:
       '소프트웨어학과 남자 3명 소프트웨어학과 남자 3명소프트웨어학과 남자 3명소프트웨어학과 남자 3명소프트웨어학과 남자 3명',
@@ -69,6 +70,7 @@ export const chatListMocks = [
     count: '26',
   },
   {
+    boardId: 2,
     roomImage: profileList,
     title:
       '심리학과 여자 4명 심리학과 여자 4명 심리학과 여자 4명 심리학과 여자 4명 심리학과 여자 4명 심리학과 여자 4명',
@@ -77,6 +79,7 @@ export const chatListMocks = [
     count: '38',
   },
   {
+    boardId: 3,
     roomImage: profileList,
     title: '간호학과 여자 3명 간호학과 여자 3명',
     content: '안녕하세용',
@@ -84,6 +87,7 @@ export const chatListMocks = [
     count: '5',
   },
   {
+    boardId: 4,
     roomImage: profileList,
     title: '화학과 남자 3명',
     content: ':):D',
diff --git a/src/common/actionTypes.ts b/src/common/actionTypes.ts
index 1b84bdbc..ffa44325 100644
--- a/src/common/actionTypes.ts
+++ b/src/common/actionTypes.ts
@@ -1 +1 @@
-export const ROOM_CHAT = 'room';
+export const CONNECT_CHAT_ROOM = 'CONNECT_CHAT_ROOM';
diff --git a/src/components/Chat/ChatItem/index.tsx b/src/components/Chat/ChatItem/index.tsx
index 5e38d8eb..56dbd8ef 100644
--- a/src/components/Chat/ChatItem/index.tsx
+++ b/src/components/Chat/ChatItem/index.tsx
@@ -5,6 +5,7 @@ import MutiProfile from 'src/components/shared/MultiProfile';
 import $ from './style.module.scss';
 
 interface Props {
+  boardId: number;
   roomImage: {
     name: string;
     imageUrl: string;
@@ -16,6 +17,7 @@ interface Props {
 }
 
 export default function ChatItem({
+  boardId,
   roomImage,
   title,
   content,
@@ -38,8 +40,9 @@ export default function ChatItem({
   );
 
   const fetchChatRoom = () => {
-    navigate('./room');
+    navigate(`./room/${boardId}`);
   };
+
   return (
     <li className={$['chat-item']} onClick={() => fetchChatRoom()}>
       <MutiProfile profileList={profileList} parentRef={chatItemRef} />
diff --git a/src/components/MyMeeting/RequestedItem/index.tsx b/src/components/MyMeeting/RequestedItem/index.tsx
index 300d3c6d..5a8aaa7b 100644
--- a/src/components/MyMeeting/RequestedItem/index.tsx
+++ b/src/components/MyMeeting/RequestedItem/index.tsx
@@ -1,6 +1,5 @@
 import { memo, useMemo, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
-import socket from 'src/common/socket';
 import MutiProfile from 'src/components/shared/MultiProfile';
 import { useIntersectObserver } from 'src/hooks';
 import { MyMeetingRequestType } from 'src/types/myMeeting';
@@ -49,7 +48,7 @@ function RequestedItem({
 
   const handleAcceptBtn = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
-    socket.emit('room', boardId);
+    navigate(`/chat/room/${boardId}`);
   };
   const handleRefuseBtn = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
diff --git a/src/constants/headerMenus.tsx b/src/constants/headerMenus.tsx
index a5a7c8c8..dac39321 100644
--- a/src/constants/headerMenus.tsx
+++ b/src/constants/headerMenus.tsx
@@ -57,6 +57,7 @@ const menusLeft: MenuType[] = [
   {
     icon: <IoChevronBackOutline />,
     url: '/chat/room',
+    isPathBeIncluded: true,
   },
   {
     icon: <IoChevronBack />,
@@ -108,6 +109,7 @@ const menusRight: MenuType[] = [
   {
     icon: <IoReorderThreeOutline />,
     url: '/chat/room',
+    isPathBeIncluded: true,
   },
   {
     icon: <IoSettingsOutline />,
diff --git a/src/pages/Chat/ChatList/index.tsx b/src/pages/Chat/ChatList/index.tsx
index 5cbb1315..1d2f6f9a 100644
--- a/src/pages/Chat/ChatList/index.tsx
+++ b/src/pages/Chat/ChatList/index.tsx
@@ -7,10 +7,10 @@ export default function ChatListPage() {
     <PageLayout isNeedFooter={true} headerHeight={44}>
       <ul>
         {chatListMocks.map(
-          ({ roomImage, title, content, time, count }, index) => (
+          ({ boardId, roomImage, title, content, time, count }, index) => (
             <ChatItem
               key={title + index}
-              {...{ roomImage, title, content, time, count }}
+              {...{ boardId, roomImage, title, content, time, count }}
             />
           )
         )}
diff --git a/src/pages/Chat/ChatRoom/index.tsx b/src/pages/Chat/ChatRoom/index.tsx
index 017dfc6b..4d68bd49 100644
--- a/src/pages/Chat/ChatRoom/index.tsx
+++ b/src/pages/Chat/ChatRoom/index.tsx
@@ -1,6 +1,9 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import cx from 'classnames';
+import { useParams } from 'react-router-dom';
 import { messageInfoMocks } from 'src/__mocks__/chat';
+import { CONNECT_CHAT_ROOM } from 'src/common/actionTypes';
+import socket from 'src/common/socket';
 import { MessageInput } from 'src/components/Chat';
 import { ChatCard } from 'src/components/Chat';
 import { PageLayout } from 'src/components/shared/Layout';
@@ -117,6 +120,11 @@ export default function ChatRoomPage() {
     }
   });
 
+  const { boardId } = useParams();
+  useEffect(() => {
+    socket.emit(CONNECT_CHAT_ROOM, boardId);
+  }, []);
+
   return (
     <PageLayout isNeedFooter={false} headerHeight={44}>
       {isClickProfile && (
diff --git a/src/routes/ChatRoute.tsx b/src/routes/ChatRoute.tsx
index a9bbd0aa..93f6c9bd 100644
--- a/src/routes/ChatRoute.tsx
+++ b/src/routes/ChatRoute.tsx
@@ -6,7 +6,7 @@ function ChatRoute() {
   return (
     <Routes>
       <Route index element={<ChatListPage />} />
-      <Route path="room" element={<ChatRoomPage />} />
+      <Route path="room/:boardId" element={<ChatRoomPage />} />
     </Routes>
   );
 }

From a057cf3b2fb2ce642b9f0831ad1021021dd9d516 Mon Sep 17 00:00:00 2001
From: juyeong-chungbuk <happyu9986@gmail.com>
Date: Sat, 1 Oct 2022 17:01:58 +0900
Subject: [PATCH 08/13] =?UTF-8?q?feat=20:=20=EC=9E=84=EC=8B=9C=20=EC=B1=84?=
 =?UTF-8?q?=ED=8C=85=EB=B0=A9=20=EC=83=9D=EC=84=B1=20api=20=EC=97=B0?=
 =?UTF-8?q?=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/__mocks__/myMeeting.ts                    | 76 +++++--------------
 src/api/chat.ts                               | 10 +++
 src/common/http.ts                            |  9 +++
 .../MyMeeting/RequestItem/index.tsx           |  4 +-
 .../MyMeeting/RequestedItem/index.tsx         | 14 +++-
 .../MyMeeting/RequestedItem/style.module.scss |  2 +-
 .../MyMeetingPages/RegisterDetailPage.tsx     |  4 +-
 src/pages/MyMeetingPages/RequestPage.tsx      |  4 +-
 src/services/chat.ts                          |  9 +++
 src/types/apiTypes/chat.d.ts                  |  6 ++
 src/types/myMeeting.ts                        |  4 +-
 tsconfig.json                                 |  1 +
 12 files changed, 75 insertions(+), 68 deletions(-)
 create mode 100644 src/api/chat.ts
 create mode 100644 src/common/http.ts
 create mode 100644 src/services/chat.ts
 create mode 100644 src/types/apiTypes/chat.d.ts

diff --git a/src/__mocks__/myMeeting.ts b/src/__mocks__/myMeeting.ts
index 27101ae7..5a5f58e7 100644
--- a/src/__mocks__/myMeeting.ts
+++ b/src/__mocks__/myMeeting.ts
@@ -152,17 +152,20 @@ export const registerMeetingMocks = [
 export const requestedListMocks = [
   {
     boardId: 1,
-    comment: '공대도 받아주세요! ~~~~~~~~~~~~~~',
+    title: '공대도 받아주세요! ~~~~~~~~~~~~~~',
     requestedInfo: [
       {
+        id: 1,
         nickName: '라이언',
         src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
       },
       {
+        id: 2,
         nickName: '라이언',
         src: 'http://cdn.ksilbo.co.kr/news/photo/201911/736241_408290_1458.jpg',
       },
       {
+        id: 3,
         nickName: '라이언',
         src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
       },
@@ -171,17 +174,20 @@ export const requestedListMocks = [
   },
   {
     boardId: 2,
-    comment: '공대도 받아주세요! ~~~~~~~~~~~~~~',
+    title: '공대도 받아주세요! ~~~~~~~~~~~~~~',
     requestedInfo: [
       {
+        id: 4,
         nickName: '라이언',
         src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
       },
       {
+        id: 5,
         nickName: '라이언',
         src: 'http://cdn.ksilbo.co.kr/news/photo/201911/736241_408290_1458.jpg',
       },
       {
+        id: 6,
         nickName: '라이언',
         src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
       },
@@ -190,17 +196,20 @@ export const requestedListMocks = [
   },
   {
     boardId: 3,
-    comment: '공대도 받아주세요! ~~~~~~~~~~~~~~',
+    title: '공대도 받아주세요! ~~~~~~~~~~~~~~',
     requestedInfo: [
       {
+        id: 7,
         nickName: '라이언',
         src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
       },
       {
+        id: 8,
         nickName: '라이언',
         src: 'http://cdn.ksilbo.co.kr/news/photo/201911/736241_408290_1458.jpg',
       },
       {
+        id: 9,
         nickName: '라이언',
         src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
       },
@@ -209,77 +218,32 @@ export const requestedListMocks = [
   },
   {
     boardId: 4,
-    comment: '공대도 받아주세요! ~~~~~~~~~~~~~~',
+    title: '공대도 받아주세요! ~~~~~~~~~~~~~~',
     requestedInfo: [
       {
+        id: 10,
         nickName: '라이언',
         src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
       },
       {
+        id: 11,
         nickName: '라이언',
         src: 'http://cdn.ksilbo.co.kr/news/photo/201911/736241_408290_1458.jpg',
       },
       {
+        id: 12,
         nickName: '라이언',
         src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
       },
     ],
     date: '27초 전',
   },
-  {
-    boardId: 5,
-    comment: '술 잘 먹어요 ㅎㅎ',
-    requestedInfo: [
-      {
-        nickName: '라이언',
-        src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
-      },
-      {
-        nickName: '라이언',
-        src: 'http://cdn.ksilbo.co.kr/news/photo/201911/736241_408290_1458.jpg',
-      },
-    ],
-    date: '30분 전',
-  },
-  {
-    boardId: 6,
-    comment: '전정대랑 과팅합시다앙',
-    requestedInfo: [
-      {
-        nickName: '라이언',
-        src: 'https://thumb.mt.co.kr/06/2021/12/2021122022255032493_1.jpg/dims/optimize/',
-      },
-    ],
-    date: '2일 전',
-  },
-  {
-    boardId: 7,
-    comment: '공대도 받아주세요 !',
-    requestedInfo: [
-      {
-        nickName: '라이언',
-        src: 'https://thumb.mt.co.kr/06/2021/12/2021122022255032493_1.jpg/dims/optimize/',
-      },
-    ],
-    date: '27초 전',
-  },
-  {
-    boardId: 8,
-    comment: '술 잘 먹어요 ㅎㅎ',
-    requestedInfo: [
-      {
-        nickName: '라이언',
-        src: 'https://thumb.mt.co.kr/06/2021/12/2021122022255032493_1.jpg/dims/optimize/',
-      },
-    ],
-    date: '30분 전',
-  },
 ];
 
 export const requestMeetingMocks = [
   {
     boardId: 1,
-    comment: '내가 신청함~~~~~~~~~~~~~~~~~~~~~~~~~~~~~',
+    title: '내가 신청함~~~~~~~~~~~~~~~~~~~~~~~~~~~~~',
     requestedInfo: [
       {
         id: 1,
@@ -297,7 +261,7 @@ export const requestMeetingMocks = [
   },
   {
     boardId: 2,
-    comment: '신청2',
+    title: '신청2',
     requestedInfo: [
       {
         id: 1,
@@ -310,7 +274,7 @@ export const requestMeetingMocks = [
   },
   {
     boardId: 3,
-    comment: '내가 신청함',
+    title: '내가 신청함',
     requestedInfo: [
       {
         id: 1,
@@ -323,7 +287,7 @@ export const requestMeetingMocks = [
   },
   {
     boardId: 4,
-    comment: '신청2',
+    title: '신청2',
     requestedInfo: [
       {
         id: 1,
diff --git a/src/api/chat.ts b/src/api/chat.ts
new file mode 100644
index 00000000..b16e1577
--- /dev/null
+++ b/src/api/chat.ts
@@ -0,0 +1,10 @@
+import ChatService from 'src/services/chat';
+
+const createChatRoom = async (boardId: number, boardInfo: res.BoardInfo) => {
+  return await ChatService.createChatRoom(boardId, boardInfo);
+};
+
+const ChatApi = {
+  createChatRoom,
+};
+export default ChatApi;
diff --git a/src/common/http.ts b/src/common/http.ts
new file mode 100644
index 00000000..1d6ad791
--- /dev/null
+++ b/src/common/http.ts
@@ -0,0 +1,9 @@
+import axios from 'axios';
+
+const http = axios.create({
+  baseURL: 'http://localhost:5000',
+  headers: {
+    'Content-type': 'application/json',
+  },
+});
+export default http;
diff --git a/src/components/MyMeeting/RequestItem/index.tsx b/src/components/MyMeeting/RequestItem/index.tsx
index db5f4bcc..00508e11 100644
--- a/src/components/MyMeeting/RequestItem/index.tsx
+++ b/src/components/MyMeeting/RequestItem/index.tsx
@@ -9,7 +9,7 @@ import $ from './style.module.scss';
 
 function RequestItem({
   boardId,
-  comment,
+  title,
   requestedInfo,
   date,
   state,
@@ -65,7 +65,7 @@ function RequestItem({
 
       <div className={$.info}>
         {state && <StateBadge />}
-        <strong className={$.comment}>{comment}</strong>
+        <strong className={$.title}>{title}</strong>
         <span className={$.date}>{date}</span>
       </div>
 
diff --git a/src/components/MyMeeting/RequestedItem/index.tsx b/src/components/MyMeeting/RequestedItem/index.tsx
index b1cb0723..eb741ab3 100644
--- a/src/components/MyMeeting/RequestedItem/index.tsx
+++ b/src/components/MyMeeting/RequestedItem/index.tsx
@@ -1,5 +1,6 @@
 import { memo, useMemo, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
+import ChatApi from 'src/api/chat';
 import MutiProfile from 'src/components/shared/MultiProfile';
 import { useIntersectObserver } from 'src/hooks';
 import { MyMeetingRequestType } from 'src/types/myMeeting';
@@ -8,7 +9,7 @@ import $ from './style.module.scss';
 
 function RequestedItem({
   boardId,
-  comment,
+  title,
   requestedInfo,
   date,
 }: MyMeetingRequestType) {
@@ -48,7 +49,14 @@ function RequestedItem({
 
   const handleAcceptBtn = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
-    navigate(`/chat/room/${boardId}`);
+    const boardInfo = {
+      name: title,
+      participants: requestedInfo.map(({ id }) => id),
+    };
+    console.log(boardInfo);
+    ChatApi.createChatRoom(boardId, boardInfo).then((data) => {
+      navigate(`/chat/room/${boardId}`);
+    });
   };
   const handleRefuseBtn = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
@@ -63,7 +71,7 @@ function RequestedItem({
       <MutiProfile profileList={profileList} parentRef={requestedMeetingRef} />
 
       <div className={$.info}>
-        <span className={$.comment}>{comment}</span>
+        <span className={$.title}>{title}</span>
         <span className={$.date}>{date}</span>
       </div>
 
diff --git a/src/components/MyMeeting/RequestedItem/style.module.scss b/src/components/MyMeeting/RequestedItem/style.module.scss
index 0dfc98c7..42136361 100644
--- a/src/components/MyMeeting/RequestedItem/style.module.scss
+++ b/src/components/MyMeeting/RequestedItem/style.module.scss
@@ -13,7 +13,7 @@
     margin-left: 10px;
     width: 35%;
 
-    .comment {
+    .title {
       @include textOverFlow;
       font-size: 14px;
       margin-bottom: 5px;
diff --git a/src/pages/MyMeetingPages/RegisterDetailPage.tsx b/src/pages/MyMeetingPages/RegisterDetailPage.tsx
index 30446162..bf89c7b9 100644
--- a/src/pages/MyMeetingPages/RegisterDetailPage.tsx
+++ b/src/pages/MyMeetingPages/RegisterDetailPage.tsx
@@ -48,10 +48,10 @@ export default function RegisterDetailPage() {
       <InfiniteScroll trigger={fetchMoreMeetingFeeds}>
         <ul>
           {requestedMeeting.map(
-            ({ boardId, comment, requestedInfo, date }, index) => (
+            ({ boardId, title, requestedInfo, date }, index) => (
               <RequestedList
                 key={`requested-list-${index}`}
-                {...{ boardId, comment, requestedInfo, date }}
+                {...{ boardId, title, requestedInfo, date }}
               />
             )
           )}
diff --git a/src/pages/MyMeetingPages/RequestPage.tsx b/src/pages/MyMeetingPages/RequestPage.tsx
index 150a2340..c371d707 100644
--- a/src/pages/MyMeetingPages/RequestPage.tsx
+++ b/src/pages/MyMeetingPages/RequestPage.tsx
@@ -17,10 +17,10 @@ export default function RequestPage() {
     <InfiniteScroll trigger={fetchMoreMeetingFeeds}>
       <ul>
         {requestMeeting.map(
-          ({ boardId, comment, requestedInfo, date, state }, index) => (
+          ({ boardId, title, requestedInfo, date, state }, index) => (
             <RequestMeeting
               key={`${date}-${index}`}
-              {...{ boardId, comment, requestedInfo, date, state }}
+              {...{ boardId, title, requestedInfo, date, state }}
             />
           )
         )}
diff --git a/src/services/chat.ts b/src/services/chat.ts
new file mode 100644
index 00000000..6781eeb9
--- /dev/null
+++ b/src/services/chat.ts
@@ -0,0 +1,9 @@
+import http from 'src/common/http';
+
+const createChatRoom = (boardId: number, boardInfo: res.BoardInfo) =>
+  http.post(`board/${boardId}/chat`, boardInfo);
+
+const ChatService = {
+  createChatRoom,
+};
+export default ChatService;
diff --git a/src/types/apiTypes/chat.d.ts b/src/types/apiTypes/chat.d.ts
new file mode 100644
index 00000000..81d3ea84
--- /dev/null
+++ b/src/types/apiTypes/chat.d.ts
@@ -0,0 +1,6 @@
+declare namespace res {
+  export type BoardInfo = {
+    name: string;
+    participants: number[];
+  };
+}
diff --git a/src/types/myMeeting.ts b/src/types/myMeeting.ts
index e344f850..5c91af00 100644
--- a/src/types/myMeeting.ts
+++ b/src/types/myMeeting.ts
@@ -8,8 +8,8 @@ export type MyMeetingType = {
 
 export type MyMeetingRequestType = {
   boardId: number;
-  comment: string;
-  requestedInfo: { nickName: string; src: string }[];
+  title: string;
+  requestedInfo: { id: number; nickName: string; src: string }[];
   date: string;
   state?: boolean;
 };
diff --git a/tsconfig.json b/tsconfig.json
index 79351332..b22a8d83 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,5 +23,6 @@
     "noEmit": false,
     "jsx": "react-jsx"
   },
+  "typeRoots": ["./src/types/apiTypes"],
   "include": ["src", "styles"]
 }

From 9b38fffc304516a5d71039b41cb6dd674f3f71b0 Mon Sep 17 00:00:00 2001
From: juyeong-chungbuk <happyu9986@gmail.com>
Date: Sat, 29 Oct 2022 20:42:11 +0900
Subject: [PATCH 09/13] =?UTF-8?q?fix=20:=20=ED=97=A4=EB=8D=94=20=EB=9D=BC?=
 =?UTF-8?q?=EC=9A=B0=ED=8C=85=20&=20=ED=94=84=EB=A1=9C=ED=95=84=20?=
 =?UTF-8?q?=EB=AD=89=EA=B0=9C=EC=A7=90=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared/PersonalProfileImage/style.module.scss      |  1 +
 src/constants/headerMenus.tsx                          | 10 ----------
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/components/shared/PersonalProfileImage/style.module.scss b/src/components/shared/PersonalProfileImage/style.module.scss
index a6dfd849..feb65406 100644
--- a/src/components/shared/PersonalProfileImage/style.module.scss
+++ b/src/components/shared/PersonalProfileImage/style.module.scss
@@ -1,6 +1,7 @@
 @import 'src/styles/_color.scss';
 
 .profile-img {
+  min-width: 35px;
   box-shadow: 0 0 2px 1px $shadow;
   border-radius: 50%;
   overflow: hidden;
diff --git a/src/constants/headerMenus.tsx b/src/constants/headerMenus.tsx
index 651fd9d9..7a022db3 100644
--- a/src/constants/headerMenus.tsx
+++ b/src/constants/headerMenus.tsx
@@ -49,16 +49,6 @@ const menusLeft: MenuType[] = [
     url: '/mymeeting/detail',
     isPathBeIncluded: true,
   },
-  {
-    icon: <Logo />,
-    url: '/chat',
-    isPathBeIncluded: false,
-  },
-  {
-    icon: <IoChevronBackOutline />,
-    url: '/chat/room',
-    isPathBeIncluded: true,
-  },
   {
     icon: <IoChevronBack />,
     text: '내 정보',

From e1894316184df11dbb13f29f048926ca239e6e09 Mon Sep 17 00:00:00 2001
From: juyeong-chungbuk <happyu9986@gmail.com>
Date: Sat, 29 Oct 2022 20:45:05 +0900
Subject: [PATCH 10/13] =?UTF-8?q?delete=20:=20=EC=9D=B4=EC=A0=84=20?=
 =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/chat.ts                                  | 10 ----------
 src/common/actionTypes.ts                        |  1 -
 src/common/http.ts                               |  9 ---------
 src/common/socket.ts                             |  3 ---
 src/components/MyMeeting/RequestedItem/index.tsx |  4 ----
 src/pages/Chat/ChatRoom/index.tsx                |  5 -----
 src/services/chat.ts                             |  9 ---------
 7 files changed, 41 deletions(-)
 delete mode 100644 src/api/chat.ts
 delete mode 100644 src/common/actionTypes.ts
 delete mode 100644 src/common/http.ts
 delete mode 100644 src/common/socket.ts
 delete mode 100644 src/services/chat.ts

diff --git a/src/api/chat.ts b/src/api/chat.ts
deleted file mode 100644
index b16e1577..00000000
--- a/src/api/chat.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import ChatService from 'src/services/chat';
-
-const createChatRoom = async (boardId: number, boardInfo: res.BoardInfo) => {
-  return await ChatService.createChatRoom(boardId, boardInfo);
-};
-
-const ChatApi = {
-  createChatRoom,
-};
-export default ChatApi;
diff --git a/src/common/actionTypes.ts b/src/common/actionTypes.ts
deleted file mode 100644
index ffa44325..00000000
--- a/src/common/actionTypes.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const CONNECT_CHAT_ROOM = 'CONNECT_CHAT_ROOM';
diff --git a/src/common/http.ts b/src/common/http.ts
deleted file mode 100644
index 1d6ad791..00000000
--- a/src/common/http.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import axios from 'axios';
-
-const http = axios.create({
-  baseURL: 'http://localhost:5000',
-  headers: {
-    'Content-type': 'application/json',
-  },
-});
-export default http;
diff --git a/src/common/socket.ts b/src/common/socket.ts
deleted file mode 100644
index 93be08b5..00000000
--- a/src/common/socket.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import io from 'socket.io-client';
-const socket = io('http://localhost:5000');
-export default socket;
diff --git a/src/components/MyMeeting/RequestedItem/index.tsx b/src/components/MyMeeting/RequestedItem/index.tsx
index eb741ab3..8bd727d1 100644
--- a/src/components/MyMeeting/RequestedItem/index.tsx
+++ b/src/components/MyMeeting/RequestedItem/index.tsx
@@ -1,6 +1,5 @@
 import { memo, useMemo, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
-import ChatApi from 'src/api/chat';
 import MutiProfile from 'src/components/shared/MultiProfile';
 import { useIntersectObserver } from 'src/hooks';
 import { MyMeetingRequestType } from 'src/types/myMeeting';
@@ -54,9 +53,6 @@ function RequestedItem({
       participants: requestedInfo.map(({ id }) => id),
     };
     console.log(boardInfo);
-    ChatApi.createChatRoom(boardId, boardInfo).then((data) => {
-      navigate(`/chat/room/${boardId}`);
-    });
   };
   const handleRefuseBtn = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
diff --git a/src/pages/Chat/ChatRoom/index.tsx b/src/pages/Chat/ChatRoom/index.tsx
index 4d68bd49..e269377f 100644
--- a/src/pages/Chat/ChatRoom/index.tsx
+++ b/src/pages/Chat/ChatRoom/index.tsx
@@ -2,8 +2,6 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import cx from 'classnames';
 import { useParams } from 'react-router-dom';
 import { messageInfoMocks } from 'src/__mocks__/chat';
-import { CONNECT_CHAT_ROOM } from 'src/common/actionTypes';
-import socket from 'src/common/socket';
 import { MessageInput } from 'src/components/Chat';
 import { ChatCard } from 'src/components/Chat';
 import { PageLayout } from 'src/components/shared/Layout';
@@ -121,9 +119,6 @@ export default function ChatRoomPage() {
   });
 
   const { boardId } = useParams();
-  useEffect(() => {
-    socket.emit(CONNECT_CHAT_ROOM, boardId);
-  }, []);
 
   return (
     <PageLayout isNeedFooter={false} headerHeight={44}>
diff --git a/src/services/chat.ts b/src/services/chat.ts
deleted file mode 100644
index 6781eeb9..00000000
--- a/src/services/chat.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import http from 'src/common/http';
-
-const createChatRoom = (boardId: number, boardInfo: res.BoardInfo) =>
-  http.post(`board/${boardId}/chat`, boardInfo);
-
-const ChatService = {
-  createChatRoom,
-};
-export default ChatService;

From a32c0172d40b4e5610673bb4a52747e048d8cf83 Mon Sep 17 00:00:00 2001
From: juyeong-chungbuk <happyu9986@gmail.com>
Date: Sat, 29 Oct 2022 21:08:20 +0900
Subject: [PATCH 11/13] =?UTF-8?q?feat=20:=20=EC=B1=84=ED=8C=85=EB=B0=A9=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=ED=95=98=EA=B8=B0=20API=20=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/chat/index.ts                         | 11 ++++++
 .../MyMeeting/RequestedItem/index.tsx         |  4 ++
 src/hooks/api/chat/index.ts                   | 21 ++++++++++
 src/types/apiTypes/chat.d.ts                  | 39 +++++++++++++++++--
 tsconfig.json                                 |  1 -
 5 files changed, 72 insertions(+), 4 deletions(-)
 create mode 100644 src/api/chat/index.ts
 create mode 100644 src/hooks/api/chat/index.ts

diff --git a/src/api/chat/index.ts b/src/api/chat/index.ts
new file mode 100644
index 00000000..1dd0bee6
--- /dev/null
+++ b/src/api/chat/index.ts
@@ -0,0 +1,11 @@
+import { http } from 'src/api/core';
+
+const createChatRoom = async ({
+  boardId,
+  body,
+}: req.CreateChatRoom): Promise<res.CreateChatRoom> => {
+  const response = await http.post(`/board/${boardId}/chat`, body);
+  return response.data;
+};
+
+export { createChatRoom };
diff --git a/src/components/MyMeeting/RequestedItem/index.tsx b/src/components/MyMeeting/RequestedItem/index.tsx
index 8bd727d1..4b06a1ed 100644
--- a/src/components/MyMeeting/RequestedItem/index.tsx
+++ b/src/components/MyMeeting/RequestedItem/index.tsx
@@ -2,6 +2,7 @@ import { memo, useMemo, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import MutiProfile from 'src/components/shared/MultiProfile';
 import { useIntersectObserver } from 'src/hooks';
+import { useCreateChatRoom } from 'src/hooks/api/chat';
 import { MyMeetingRequestType } from 'src/types/myMeeting';
 
 import $ from './style.module.scss';
@@ -46,6 +47,8 @@ function RequestedItem({
     navigate('/home/detail');
   };
 
+  const { mutate } = useCreateChatRoom();
+
   const handleAcceptBtn = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
     const boardInfo = {
@@ -53,6 +56,7 @@ function RequestedItem({
       participants: requestedInfo.map(({ id }) => id),
     };
     console.log(boardInfo);
+    mutate({ boardId, body: boardInfo });
   };
   const handleRefuseBtn = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
diff --git a/src/hooks/api/chat/index.ts b/src/hooks/api/chat/index.ts
new file mode 100644
index 00000000..3222ea1b
--- /dev/null
+++ b/src/hooks/api/chat/index.ts
@@ -0,0 +1,21 @@
+import { createChatRoom } from 'src/api/chat';
+import { isAxiosError } from 'src/api/core';
+import { toastError, toastSuccess } from 'src/utils/toaster';
+
+import { useCoreMutation } from '../core';
+
+export const useCreateChatRoom = () => {
+  return useCoreMutation(createChatRoom, {
+    onSuccess: (data) => {
+      const message =
+        '미팅 신청을 수락했습니다. 채팅방에서 자유롭게 대화해보세요!';
+      toastSuccess({ message });
+    },
+    onError: (error) => {
+      if (isAxiosError<res.AuthError>(error) && !!error.response) {
+        const message = '미팅 신청 오류입니다.\n다시 시도해주세요.';
+        toastError({ message });
+      }
+    },
+  });
+};
diff --git a/src/types/apiTypes/chat.d.ts b/src/types/apiTypes/chat.d.ts
index 81d3ea84..f9f91132 100644
--- a/src/types/apiTypes/chat.d.ts
+++ b/src/types/apiTypes/chat.d.ts
@@ -1,6 +1,39 @@
+declare namespace req {
+  export type CreateChatRoom = {
+    boardId: number;
+    body: {
+      name: string;
+      participants: number[];
+    };
+  };
+}
+
 declare namespace res {
-  export type BoardInfo = {
-    name: string;
-    participants: number[];
+  export type UserInfoDto = {
+    id: number;
+    nickname: string;
+    birth: string;
+    profileImage: string;
+    university: string;
+    studentId: string;
+    physicalInfo: {
+      height: string;
+      weight: string;
+    };
+    otherInfo: {
+      gender: res.GENDERType;
+      mbti: res.MBTIType;
+      amountOfAlchol: number;
+    };
+  };
+
+  export type CreateChatRoom = {
+    status: string;
+    message: string;
+    data: {
+      id: string;
+      name: string;
+      participants: UserInfoDto[];
+    };
   };
 }
diff --git a/tsconfig.json b/tsconfig.json
index b22a8d83..79351332 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,6 +23,5 @@
     "noEmit": false,
     "jsx": "react-jsx"
   },
-  "typeRoots": ["./src/types/apiTypes"],
   "include": ["src", "styles"]
 }

From 5e53f4c260d8a5d8da46f981f2b5e4088b5a6ca8 Mon Sep 17 00:00:00 2001
From: juyeong-chungbuk <happyu9986@gmail.com>
Date: Mon, 31 Oct 2022 00:56:31 +0900
Subject: [PATCH 12/13] =?UTF-8?q?refactor=20:=20UserInfoDto=20=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/apiTypes/chat.d.ts | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/types/apiTypes/chat.d.ts b/src/types/apiTypes/chat.d.ts
index f9f91132..109ab643 100644
--- a/src/types/apiTypes/chat.d.ts
+++ b/src/types/apiTypes/chat.d.ts
@@ -12,19 +12,7 @@ declare namespace res {
   export type UserInfoDto = {
     id: number;
     nickname: string;
-    birth: string;
     profileImage: string;
-    university: string;
-    studentId: string;
-    physicalInfo: {
-      height: string;
-      weight: string;
-    };
-    otherInfo: {
-      gender: res.GENDERType;
-      mbti: res.MBTIType;
-      amountOfAlchol: number;
-    };
   };
 
   export type CreateChatRoom = {

From b419dd41284be85accbf49b8b4ff8270897248c8 Mon Sep 17 00:00:00 2001
From: juyeong-chungbuk <happyu9986@gmail.com>
Date: Sun, 13 Nov 2022 00:16:53 +0900
Subject: [PATCH 13/13] =?UTF-8?q?feat=20:=20=EC=B1=84=ED=8C=85=EB=B0=A9=20?=
 =?UTF-8?q?=EC=9D=B4=EB=8F=99=20navigate=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/api/chat/index.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/hooks/api/chat/index.ts b/src/hooks/api/chat/index.ts
index 3222ea1b..980d0f8c 100644
--- a/src/hooks/api/chat/index.ts
+++ b/src/hooks/api/chat/index.ts
@@ -1,3 +1,4 @@
+import { useNavigate } from 'react-router-dom';
 import { createChatRoom } from 'src/api/chat';
 import { isAxiosError } from 'src/api/core';
 import { toastError, toastSuccess } from 'src/utils/toaster';
@@ -5,14 +6,19 @@ import { toastError, toastSuccess } from 'src/utils/toaster';
 import { useCoreMutation } from '../core';
 
 export const useCreateChatRoom = () => {
+  const navigate = useNavigate();
   return useCoreMutation(createChatRoom, {
     onSuccess: (data) => {
+      const {
+        data: { id },
+      } = data;
       const message =
         '미팅 신청을 수락했습니다. 채팅방에서 자유롭게 대화해보세요!';
       toastSuccess({ message });
+      navigate(`/chat/room/${id}`);
     },
     onError: (error) => {
-      if (isAxiosError<res.AuthError>(error) && !!error.response) {
+      if (isAxiosError<res.Error>(error) && !!error.response) {
         const message = '미팅 신청 오류입니다.\n다시 시도해주세요.';
         toastError({ message });
       }