diff --git a/package-lock.json b/package-lock.json
index 2b50f9510..701f2f74b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,6 +33,7 @@
         "react-dom": "^17.0.1",
         "react-ga4": "^1.4.1",
         "react-i18next": "^12.0.0",
+        "react-qr-code": "^2.0.11",
         "react-router-dom": "^5.2.0",
         "recoil": "^0.7.5",
         "socket.io-client": "^4.3.2",
@@ -20408,6 +20409,11 @@
         "teleport": ">=0.2.0"
       }
     },
+    "node_modules/qr.js": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz",
+      "integrity": "sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ=="
+    },
     "node_modules/qs": {
       "version": "6.11.1",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.1.tgz",
@@ -20760,6 +20766,24 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "peer": true
     },
+    "node_modules/react-qr-code": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.11.tgz",
+      "integrity": "sha512-P7mvVM5vk9NjGdHMt4Z0KWeeJYwRAtonHTghZT2r+AASinLUUKQ9wfsGH2lPKsT++gps7hXmaiMGRvwTDEL9OA==",
+      "dependencies": {
+        "prop-types": "^15.8.1",
+        "qr.js": "0.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x",
+        "react-native-svg": "*"
+      },
+      "peerDependenciesMeta": {
+        "react-native-svg": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -43116,6 +43140,11 @@
       "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==",
       "peer": true
     },
+    "qr.js": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz",
+      "integrity": "sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ=="
+    },
     "qs": {
       "version": "6.11.1",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.1.tgz",
@@ -43381,6 +43410,15 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "peer": true
     },
+    "react-qr-code": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.11.tgz",
+      "integrity": "sha512-P7mvVM5vk9NjGdHMt4Z0KWeeJYwRAtonHTghZT2r+AASinLUUKQ9wfsGH2lPKsT++gps7hXmaiMGRvwTDEL9OA==",
+      "requires": {
+        "prop-types": "^15.8.1",
+        "qr.js": "0.0.0"
+      }
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
diff --git a/package.json b/package.json
index 33519711c..1edcda604 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "react-dom": "^17.0.1",
     "react-ga4": "^1.4.1",
     "react-i18next": "^12.0.0",
+    "react-qr-code": "^2.0.11",
     "react-router-dom": "^5.2.0",
     "recoil": "^0.7.5",
     "socket.io-client": "^4.3.2",
diff --git a/public/graph.png b/public/graph.png
new file mode 100644
index 000000000..23a7ed284
Binary files /dev/null and b/public/graph.png differ
diff --git a/public/index.html b/public/index.html
index 37045b15f..25d39a181 100644
--- a/public/index.html
+++ b/public/index.html
@@ -33,7 +33,32 @@
     />
     <!-- <link rel="apple-touch-startup-image" href="/startup.png" /> -->
 
+    <!-- Open Graph : Web -->
+    <meta property="og:url" content="%PUBLIC_URL%" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Taxi" />
+    <meta
+      property="og:description"
+      content="KAIST 구성원들의 택시 동승 인원 모집을 위한 서비스"
+    />
+    <meta property="og:image" content="%PUBLIC_URL%/graph.png" />
+    <meta property="og:locale" content="ko_KR" />
+    <meta property="og:locale:alternate" content="en_US" />
+    <!-- TODO : Open Graph : iOS -->
+    <!-- <meta property="al:ios:url" content=" ios 앱 URL" />
+    <meta property="al:ios:app_store_id" content="ios 앱스토어 ID" /> 
+    <meta property="al:ios:app_name" content="ios 앱 이름" />  -->
+    <!-- TODO : Open Graph : Android -->
+    <!-- <meta property="al:android:url" content="안드로이드 앱 URL" />
+    <meta property="al:android:app_name" content="안드로이드 앱 이름" />
+    <meta property="al:android:package" content="안드로이드 패키지 이름" /> 
+    <meta property="al:web:url" content="안드로이드 앱 URL" /> -->
+
     <!-- Script -->
+    <script
+      async
+      src="https://t1.kakaocdn.net/kakao_js_sdk/2.1.0/kakao.min.js"
+    ></script>
     <script src="/env.js"></script>
     <script>
       document.documentElement.addEventListener(
diff --git a/src/components/Link/LinkCopy.tsx b/src/components/Link/LinkCopy.tsx
new file mode 100644
index 000000000..d5a2217e2
--- /dev/null
+++ b/src/components/Link/LinkCopy.tsx
@@ -0,0 +1,25 @@
+import { useCallback } from "react";
+
+import alertAtom from "atoms/alert";
+import { useSetRecoilState } from "recoil";
+
+type LinkCopyProps = {
+  children: React.ReactNode;
+  value: string;
+  onCopy?: (value: string) => void;
+};
+
+const LinkCopy = ({ children, value, onCopy }: LinkCopyProps) => {
+  const setAlert = useSetRecoilState(alertAtom);
+  const onClick = useCallback(() => {
+    if (!navigator.clipboard) {
+      setAlert("복사를 지원하지 않는 브라우저입니다.");
+      return;
+    }
+    navigator.clipboard.writeText(value);
+    if (onCopy) onCopy(value);
+  }, [value, setAlert, onCopy]);
+  return <a onClick={onClick}>{children}</a>;
+};
+
+export default LinkCopy;
diff --git a/src/components/Link/LinkKakaotalkShare.tsx b/src/components/Link/LinkKakaotalkShare.tsx
new file mode 100644
index 000000000..e37ff11a7
--- /dev/null
+++ b/src/components/Link/LinkKakaotalkShare.tsx
@@ -0,0 +1,65 @@
+import { useCallback } from "react";
+import { useLocation } from "react-router-dom";
+
+import { kakaoSDKKey } from "loadenv";
+
+type LinkKakaotalkShareProps = {
+  children: React.ReactNode;
+  title?: string;
+  description?: string;
+  buttonText?: string;
+  buttonTo?: string;
+  partNum?: number;
+};
+
+const LinkKakaotalkShare = ({
+  children,
+  title = "Taxi",
+  description = "KAIST 구성원들의 택시 동승 인원 모집을 위한 서비스",
+  buttonText = "사이트로 이동",
+  buttonTo: _buttonTo,
+  partNum,
+}: LinkKakaotalkShareProps) => {
+  const { pathname, search } = useLocation();
+  const buttonTo = _buttonTo ?? pathname + search;
+
+  const onClick = useCallback(() => {
+    const kakao = window.Kakao;
+    const { origin: webUrl } = window.location;
+    if (!kakao) {
+      console.error("Kakao SDK is not loaded.");
+      return;
+    }
+    if (!kakaoSDKKey) {
+      console.error("Kakao SDK key is not set.");
+      return;
+    }
+    if (!kakao.isInitialized()) {
+      kakao.init(kakaoSDKKey);
+    }
+    kakao.Share.sendDefault({
+      objectType: "feed",
+      content: {
+        title,
+        description,
+        imageUrl: `${webUrl}/graph.png`,
+        imageWidth: 1024,
+        imageHeight: 500,
+        link: { webUrl, mobileWebUrl: webUrl },
+      },
+      social: { subscriberCount: partNum ?? 0 },
+      buttons: [
+        {
+          title: buttonText,
+          link: {
+            mobileWebUrl: `${webUrl}${buttonTo}`,
+            webUrl: `${webUrl}${buttonTo}`,
+          },
+        },
+      ],
+    });
+  }, [title, description, buttonText, buttonTo, partNum]);
+  return <a onClick={onClick}>{children}</a>;
+};
+
+export default LinkKakaotalkShare;
diff --git a/src/components/ModalPopup/NotificationGuide.tsx b/src/components/ModalPopup/Body/BodyNotificationGuide.tsx
similarity index 95%
rename from src/components/ModalPopup/NotificationGuide.tsx
rename to src/components/ModalPopup/Body/BodyNotificationGuide.tsx
index 19e126a33..045706931 100644
--- a/src/components/ModalPopup/NotificationGuide.tsx
+++ b/src/components/ModalPopup/Body/BodyNotificationGuide.tsx
@@ -1,6 +1,6 @@
 import theme from "tools/theme";
 
-const NotificationGuide = () => {
+const BodyNotificationGuide = () => {
   const styleGuide = {
     ...theme.font12,
     color: theme.gray_text,
@@ -42,4 +42,4 @@ const NotificationGuide = () => {
   );
 };
 
-export default NotificationGuide;
+export default BodyNotificationGuide;
diff --git a/src/components/ModalPopup/PrivacyPolicy.tsx b/src/components/ModalPopup/Body/BodyPrivacyPolicy.tsx
similarity index 99%
rename from src/components/ModalPopup/PrivacyPolicy.tsx
rename to src/components/ModalPopup/Body/BodyPrivacyPolicy.tsx
index b739b533d..4b734936d 100644
--- a/src/components/ModalPopup/PrivacyPolicy.tsx
+++ b/src/components/ModalPopup/Body/BodyPrivacyPolicy.tsx
@@ -1,6 +1,6 @@
 import theme from "tools/theme";
 
-const PrivacyPolicy = () => {
+const BodyPrivacyPolicy = () => {
   const styleBox = {
     padding: "0 24px 0 16px",
     borderRadius: "10px",
@@ -230,4 +230,4 @@ const PrivacyPolicy = () => {
   );
 };
 
-export default PrivacyPolicy;
+export default BodyPrivacyPolicy;
diff --git a/src/components/ModalPopup/ModalReport/ReportList.tsx b/src/components/ModalPopup/Body/BodyReport.tsx
similarity index 76%
rename from src/components/ModalPopup/ModalReport/ReportList.tsx
rename to src/components/ModalPopup/Body/BodyReport.tsx
index d742c1e46..7c9c7793f 100644
--- a/src/components/ModalPopup/ModalReport/ReportList.tsx
+++ b/src/components/ModalPopup/Body/BodyReport.tsx
@@ -3,30 +3,38 @@ import { useTranslation } from "react-i18next";
 import DottedLine from "components/DottedLine";
 import Empty from "components/Empty";
 
-import { ReportOptionType } from "./ReportOption";
-
 import { date2str } from "tools/moment";
 import theme from "tools/theme";
 
-type ReportListProps = {
-  option: ReportOptionType;
+type BodyReportProps = {
+  option: "Reporting" | "Reported";
   selectedReportHistory: Array<any>;
 };
 
-const ReportList = (props: ReportListProps) => {
+const ReportList = (props: BodyReportProps) => {
   const { t } = useTranslation("mypage");
-  const styleBox: CSS = {
+
+  const styleContainer = {
+    display: "flex",
+    flexDirection: "column" as any,
+    overflow: "auto",
+    borderRadius: "12px",
+    minHeight: "240px",
+    height: "calc(100vh - 480px)",
+    rowGap: "8px",
+  };
+  const styleBox = {
     display: "flex",
-    flexDirection: "column",
+    flexDirection: "column" as any,
     padding: "10px 12px",
     borderRadius: "12px",
     rowGap: "6px",
     boxShadow: theme.shadow_gray_button_inset,
     backgroundColor: theme.gray_background,
   };
-  const styleRow: CSS = {
+  const styleRow = {
     display: "flex",
-    flexWrap: "nowrap",
+    flexWrap: "nowrap" as any,
     columnGap: "8px",
   };
   const styleProperty = {
@@ -34,7 +42,7 @@ const ReportList = (props: ReportListProps) => {
     color: theme.gray_text,
     minWidth: "58px",
   };
-  const styleInfo: CSS = {
+  const styleInfo = {
     ...theme.font12,
   };
   const getTypeText = (type: string) => {
@@ -54,11 +62,11 @@ const ReportList = (props: ReportListProps) => {
     );
   }
   return (
-    <>
+    <div css={styleContainer}>
       {props.selectedReportHistory.map((report) => {
         return (
-          <div key={report._id} style={styleBox}>
-            <div style={styleRow}>
+          <div key={report._id} css={styleBox}>
+            <div css={styleRow}>
               <div style={styleProperty}>{t("page_report.reason")}</div>
               <div style={{ ...styleInfo, color: theme.purple }}>
                 {getTypeText(report.type)}
@@ -66,17 +74,17 @@ const ReportList = (props: ReportListProps) => {
             </div>
             <DottedLine direction="row" margin="2px 0" />
             {props.option === "Reporting" && (
-              <div style={styleRow}>
+              <div css={styleRow}>
                 <div style={styleProperty}>{t("nickname")}</div>
                 <div style={styleInfo}>{report.reportedId.nickname}</div>
               </div>
             )}
-            <div style={styleRow}>
+            <div css={styleRow}>
               <div style={styleProperty}>{t("page_report.date")}</div>
               <div style={styleInfo}>{date2str(report.time)}</div>
             </div>
             {report.type === "etc-reason" && (
-              <div style={styleRow}>
+              <div css={styleRow}>
                 <div style={styleProperty}>{t("page_report.etc_reason")}</div>
                 <div style={styleInfo}>{report.etcDetail}</div>
               </div>
@@ -84,7 +92,7 @@ const ReportList = (props: ReportListProps) => {
           </div>
         );
       })}
-    </>
+    </div>
   );
 };
 
diff --git a/src/components/ModalPopup/Body/BodyRoomSelection.tsx b/src/components/ModalPopup/Body/BodyRoomSelection.tsx
new file mode 100644
index 000000000..fefd7f5a6
--- /dev/null
+++ b/src/components/ModalPopup/Body/BodyRoomSelection.tsx
@@ -0,0 +1,234 @@
+import { useCallback, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { useHistory } from "react-router-dom";
+
+import {
+  useFetchRecoilState,
+  useValueRecoilState,
+} from "hooks/useFetchRecoilState";
+import { useAxios } from "hooks/useTaxiAPI";
+
+import Button from "components/Button";
+import DottedLine from "components/DottedLine";
+import LinkLogin from "components/Link/LinkLogin";
+import MiniCircle from "components/MiniCircle";
+import Users from "components/User/Users";
+import { MAX_PARTICIPATION } from "pages/Myroom";
+
+import alertAtom from "atoms/alert";
+import { useSetRecoilState } from "recoil";
+
+import { date2str } from "tools/moment";
+import theme from "tools/theme";
+import { getLocationName } from "tools/trans";
+
+import ArrowRightAltRoundedIcon from "@mui/icons-material/ArrowRightAltRounded";
+
+type PlaceSectionProps = {
+  type: "from" | "to";
+  name: string;
+};
+type InfoSectionProps = {
+  title: string;
+  alignDirection: "left" | "right";
+  children: React.ReactNode;
+};
+export type BodyRoomSelectionProps = {
+  roomInfo: any; // FIXME
+};
+
+const PlaceSection = ({ type, name }: PlaceSectionProps) => (
+  <div
+    css={{
+      display: "flex",
+      flexDirection: "column" as any,
+      justifyContent: "center",
+      alignItems: "center",
+      margin: "16px 12px 10px",
+      flex: "1 1 0",
+    }}
+  >
+    <MiniCircle type={type} />
+    <p
+      css={{
+        ...theme.font12,
+        color: theme.gray_text,
+        margin: "5px 0 1px",
+      }}
+    >
+      {type === "from" ? "출발지" : "도착지"}
+    </p>
+    <div
+      css={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "39px",
+        width: "100%",
+      }}
+    >
+      <p
+        css={{
+          ...theme.font16_bold,
+          color: theme.purple,
+          textAlign: "center" as any,
+          wordBreak: "keep-all" as any,
+        }}
+      >
+        {name}
+      </p>
+    </div>
+  </div>
+);
+
+const InfoSection = ({ title, alignDirection, children }: InfoSectionProps) => (
+  <div>
+    <p
+      css={{
+        ...theme.font12,
+        color: theme.gray_text,
+        marginBottom: "5px",
+        textAlign: alignDirection,
+      }}
+    >
+      {title}
+    </p>
+    {children}
+  </div>
+);
+
+const BodyRoomSelection = ({ roomInfo }: BodyRoomSelectionProps) => {
+  const { i18n } = useTranslation();
+  const axios = useAxios();
+  const history = useHistory();
+
+  const onCall = useRef(false);
+  const loginInfo = useValueRecoilState("loginInfo");
+  const myRooms = useValueRecoilState("myRooms");
+  const fetchMyRooms = useFetchRecoilState("myRooms");
+  const setAlert = useSetRecoilState(alertAtom);
+
+  const isLogin = !!loginInfo?.id; // 로그인 여부
+  const isRoomFull = roomInfo && roomInfo.part.length >= roomInfo.maxPartLength; // 방이 꽉 찼는지 여부
+  const isAlreadyPart =
+    isLogin &&
+    roomInfo &&
+    (roomInfo.part.some(
+      (user: BodyRoomSelectionProps["roomInfo"]["part"]) =>
+        user._id === loginInfo.oid
+    ) ??
+      true); // 이미 참여 중인지 여부
+  const isMaxPart =
+    isLogin && myRooms && myRooms.ongoing.length >= MAX_PARTICIPATION; // 최대 참여 가능한 방 개수를 초과했는지 여부
+
+  const requestJoin = useCallback(async () => {
+    if (onCall.current) return;
+    onCall.current = true;
+    await axios({
+      url: "/rooms/join",
+      method: "post",
+      data: { roomId: roomInfo._id },
+      onSuccess: () => {
+        fetchMyRooms();
+        history.push(`/myroom/${roomInfo._id}`);
+      },
+      onError: () => setAlert("방 참여에 실패하였습니다."),
+    });
+    onCall.current = false;
+  }, [roomInfo?._id, history]);
+
+  const stylePlace = {
+    width: "100%",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+  };
+  const styleArrow = {
+    fontSize: "24px",
+    color: theme.gray_text,
+  };
+  const styleInfoSectionWrapper = {
+    padding: "16px 14px",
+    display: "grid",
+    rowGap: "16px",
+  };
+  const styleMultipleInfo = {
+    display: "flex",
+    overflow: "hidden",
+    columnGap: "12px",
+    justifyContent: "space-between",
+  };
+
+  return (
+    <>
+      <DottedLine />
+      <div css={stylePlace}>
+        <PlaceSection
+          type="from"
+          name={getLocationName(roomInfo.from, i18n.language)}
+        />
+        <ArrowRightAltRoundedIcon style={styleArrow} />
+        <PlaceSection
+          type="to"
+          name={getLocationName(roomInfo.to, i18n.language)}
+        />
+      </div>
+      <DottedLine />
+      <div css={styleInfoSectionWrapper}>
+        <InfoSection title="출발 시각 & 날짜" alignDirection="left">
+          <p css={theme.font14_bold}>{date2str(roomInfo.time) ?? ""}</p>
+        </InfoSection>
+        <div css={styleMultipleInfo}>
+          <div css={{ minWidth: 0 }}>
+            <InfoSection title="탑승자" alignDirection="left">
+              <Users values={roomInfo.part} />
+            </InfoSection>
+          </div>
+          <div css={{ minWidth: "fit-content" }}>
+            <InfoSection title="참여 / 최대 인원" alignDirection="right">
+              <div css={{ display: "flex", justifyContent: "end" }}>
+                <p
+                  css={{ ...theme.font14_bold, color: theme.purple }}
+                >{`${roomInfo?.part?.length}명`}</p>
+                <p css={theme.font14}>
+                  &nbsp;{`/ ${roomInfo?.maxPartLength}명`}
+                </p>
+              </div>
+            </InfoSection>
+          </div>
+        </div>
+      </div>
+      {isLogin ? (
+        <Button
+          type="purple"
+          disabled={isRoomFull || isAlreadyPart || isMaxPart}
+          padding="10px 0 9px"
+          radius={8}
+          font={theme.font14_bold}
+          onClick={requestJoin}
+        >
+          {isAlreadyPart
+            ? "이미 참여 중입니다"
+            : isRoomFull
+            ? "남은 인원이 0명인 방은 참여할 수 없습니다"
+            : isMaxPart
+            ? "현재 5개의 방에 참여 중입니다"
+            : "참여 신청"}
+        </Button>
+      ) : (
+        <LinkLogin redirect={`/home/${roomInfo?._id}`}>
+          <Button
+            type="purple"
+            padding="10px 0 9px"
+            radius={8}
+            font={theme.font14_bold}
+          >
+            로그인 후 참여 신청
+          </Button>
+        </LinkLogin>
+      )}
+    </>
+  );
+};
+
+export default BodyRoomSelection;
diff --git a/src/components/ModalPopup/Body/BodyRoomShare.tsx b/src/components/ModalPopup/Body/BodyRoomShare.tsx
new file mode 100644
index 000000000..44b5cd530
--- /dev/null
+++ b/src/components/ModalPopup/Body/BodyRoomShare.tsx
@@ -0,0 +1,150 @@
+import { useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import QRCode from "react-qr-code";
+
+import DottedLine from "components/DottedLine";
+import LinkCopy from "components/Link/LinkCopy";
+import LinkKakaotalkShare from "components/Link/LinkKakaotalkShare";
+
+import { date2str } from "tools/moment";
+import theme from "tools/theme";
+import { getLocationName } from "tools/trans";
+
+import CheckIcon from "@mui/icons-material/Check";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import { ReactComponent as KakaoTalkLogo } from "static/assets/KakaoTalkLogo.svg";
+
+type ButtonShareProps = {
+  text: string;
+  icon: React.ReactNode;
+  background: string;
+  onClick?: () => void;
+};
+export type BodyRoomShareProps = {
+  roomInfo: any; // fixme
+  height?: number;
+};
+
+const ButtonShare = ({ text, icon, background, onClick }: ButtonShareProps) => (
+  <div
+    css={{
+      width: "45px",
+      cursor: "pointer",
+    }}
+    onClick={onClick}
+  >
+    <div
+      css={{
+        width: "45px",
+        height: "45px",
+        borderRadius: "6px",
+        backgroundColor: background,
+        boxShadow: theme.shadow_gray_button_inset,
+        color: theme.gray_text,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      {icon}
+    </div>
+    <div
+      css={{
+        ...theme.font10,
+        color: theme.gray_text,
+        textAlign: "center",
+        paddingTop: "4px",
+      }}
+    >
+      {text}
+    </div>
+  </div>
+);
+
+const BodyRoomShare = ({ roomInfo, height }: BodyRoomShareProps) => {
+  const { i18n } = useTranslation();
+  const { origin: host } = window.location;
+  const pathForShare = `/invite/${roomInfo?._id}`;
+
+  const [isCopied, setIsCopied] = useState(false);
+  const onCopy = useCallback(() => setIsCopied(true), [setIsCopied]);
+
+  useEffect(() => {
+    if (isCopied) {
+      const timer = setTimeout(() => setIsCopied(false), 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [isCopied]);
+
+  const styleWrapper = height
+    ? {
+        height,
+        display: "flex",
+        flexDirection: "column" as any,
+      }
+    : {};
+  const styleGuide = {
+    ...theme.font12,
+    color: theme.gray_text,
+    margin: "0 8px 12px",
+  };
+  const styleQRSection = {
+    marginTop: "12px",
+    position: "relative" as any,
+    overflow: "hidden",
+    textAlign: "center" as any,
+  };
+  const styleButtonSection = {
+    display: "flex",
+    justifyContent: "center",
+    gap: "10px",
+    margin: "12px 0px 0",
+  };
+
+  return (
+    <div css={styleWrapper}>
+      <div css={styleGuide}>방을 여러 사람들에게 공유할 수 있습니다.</div>
+      <DottedLine />
+      <div css={{ flexGrow: 1 }} />
+      <div css={styleQRSection}>
+        <QRCode value={host + pathForShare} size={120} bgColor="none" />
+      </div>
+      <div css={{ flexGrow: 1 }} />
+      <div css={styleButtonSection}>
+        <LinkKakaotalkShare
+          title={roomInfo.name}
+          description={`${getLocationName(
+            roomInfo.from,
+            i18n.language
+          )} → ${getLocationName(roomInfo.to, i18n.language)}, ${date2str(
+            roomInfo.time
+          )}`}
+          buttonText="확인하기"
+          buttonTo={pathForShare}
+          partNum={roomInfo.part.length}
+        >
+          <ButtonShare
+            text="카카오톡"
+            icon={<KakaoTalkLogo css={{ width: "22px" }} />}
+            background="#FFE812"
+          />
+        </LinkKakaotalkShare>
+        <LinkCopy value={host + pathForShare} onCopy={onCopy}>
+          <ButtonShare
+            text="링크복사"
+            icon={
+              isCopied ? (
+                <CheckIcon style={{ fontSize: "16px" }} />
+              ) : (
+                <ContentCopyIcon style={{ fontSize: "16px" }} />
+              )
+            }
+            background={theme.gray_background}
+          />
+        </LinkCopy>
+      </div>
+    </div>
+  );
+};
+
+export default BodyRoomShare;
diff --git a/src/components/ModalPopup/Terms.tsx b/src/components/ModalPopup/Body/BodyTerms.tsx
similarity index 99%
rename from src/components/ModalPopup/Terms.tsx
rename to src/components/ModalPopup/Body/BodyTerms.tsx
index d1c57dce1..04ee28dd6 100644
--- a/src/components/ModalPopup/Terms.tsx
+++ b/src/components/ModalPopup/Body/BodyTerms.tsx
@@ -2,7 +2,7 @@ import { Link } from "react-router-dom";
 
 import theme from "tools/theme";
 
-const Terms = () => {
+const BodyTerms = () => {
   const styleBox = {
     padding: "0 24px 0 16px",
     borderRadius: "10px",
@@ -170,4 +170,4 @@ const Terms = () => {
   );
 };
 
-export default Terms;
+export default BodyTerms;
diff --git a/src/components/ModalPopup/ModalModify.jsx b/src/components/ModalPopup/ModalModify.jsx
index 432115fa5..705bd5fa6 100644
--- a/src/components/ModalPopup/ModalModify.jsx
+++ b/src/components/ModalPopup/ModalModify.jsx
@@ -13,7 +13,7 @@ import AccountSelector from "components/AccountSelector";
 import Button from "components/Button";
 import DottedLine from "components/DottedLine";
 import Modal from "components/Modal";
-import ProfileImg from "components/ProfileImg";
+import ProfileImg from "components/User/ProfileImg";
 
 import alertAtom from "atoms/alert";
 import { useSetRecoilState } from "recoil";
diff --git a/src/components/ModalPopup/ModalNotification.tsx b/src/components/ModalPopup/ModalNotification.tsx
index f79e06db6..c9d6b51b4 100644
--- a/src/components/ModalPopup/ModalNotification.tsx
+++ b/src/components/ModalPopup/ModalNotification.tsx
@@ -11,7 +11,7 @@ import DottedLine from "components/DottedLine";
 import Modal from "components/Modal";
 import Toggle from "components/Toggle";
 
-import NotificationGuide from "./NotificationGuide";
+import BodyNotificationGuide from "./Body/BodyNotificationGuide";
 
 import theme from "tools/theme";
 
@@ -177,7 +177,7 @@ const ModalNotification = ({
           </div>
         </>
       ) : (
-        <NotificationGuide />
+        <BodyNotificationGuide />
       )}
     </Modal>
   );
diff --git a/src/components/ModalPopup/ModalPrivacyPolicy.tsx b/src/components/ModalPopup/ModalPrivacyPolicy.tsx
index 050f8d196..f164ec361 100644
--- a/src/components/ModalPopup/ModalPrivacyPolicy.tsx
+++ b/src/components/ModalPopup/ModalPrivacyPolicy.tsx
@@ -1,7 +1,8 @@
 import { useTranslation } from "react-i18next";
 
 import Modal from "components/Modal";
-import PrivacyPolicy from "components/ModalPopup/PrivacyPolicy";
+
+import BodyPrivacyPolicy from "./Body/BodyPrivacyPolicy";
 
 import theme from "tools/theme";
 
@@ -37,7 +38,7 @@ const ModalPrivacyPolicy = ({
         <TaxiLogo style={{ height: "27px" }} />
         {t("privacy_policy")}
       </div>
-      <PrivacyPolicy />
+      <BodyPrivacyPolicy />
     </Modal>
   );
 };
diff --git a/src/components/ModalPopup/ModalReport/index.tsx b/src/components/ModalPopup/ModalReport.tsx
similarity index 55%
rename from src/components/ModalPopup/ModalReport/index.tsx
rename to src/components/ModalPopup/ModalReport.tsx
index 89bb11a05..de9e95e26 100644
--- a/src/components/ModalPopup/ModalReport/index.tsx
+++ b/src/components/ModalPopup/ModalReport.tsx
@@ -1,13 +1,13 @@
-import { useState } from "react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
 import { useQuery } from "hooks/useTaxiAPI";
 
 import DottedLine from "components/DottedLine";
 import Modal from "components/Modal";
+import Navigation from "components/Navigation";
 
-import ReportList from "./ReportList";
-import ReportOption, { ReportOptionType } from "./ReportOption";
+import BodyReport from "./Body/BodyReport";
 
 import theme from "tools/theme";
 
@@ -24,7 +24,6 @@ type RecordProps = {
 
 const ModalReport = (props: RecordProps) => {
   const { t } = useTranslation("mypage");
-  const [option, setOption] = useState<ReportOptionType>("Reporting");
   const [, reportHistory] = useQuery.get("/reports/searchByUser");
 
   const styleTitle = {
@@ -33,51 +32,57 @@ const ModalReport = (props: RecordProps) => {
     alignItems: "center",
     marginBottom: "12px",
   };
-  const styleGuide: CSS = {
+  const styleGuide = {
     ...theme.font12,
     color: theme.gray_text,
-    wordBreak: "keep-all",
+    wordBreak: "keep-all" as any,
     padding: "0 8px 12px",
   };
   const styleLogo = {
     fontSize: "21px",
     margin: "0 4px 0 8px",
   };
-  const styleContainer: CSS = {
-    display: "flex",
-    flexDirection: "column",
-    overflow: "auto",
-    borderRadius: "12px",
-    minHeight: "240px",
-    height: "calc(100vh - 480px)",
-    rowGap: "8px",
-  };
+
+  const pages = useMemo(
+    () => [
+      {
+        key: "Reporting",
+        name: t("page_report.reported"),
+        body: (
+          <BodyReport
+            option="Reporting"
+            selectedReportHistory={reportHistory?.reporting}
+          />
+        ),
+      },
+      {
+        key: "Reported",
+        name: t("page_report.received"),
+        body: (
+          <BodyReport
+            option="Reported"
+            selectedReportHistory={reportHistory?.reported}
+          />
+        ),
+      },
+    ],
+    [reportHistory]
+  );
+
   return (
     <Modal
       isOpen={props.isOpen}
       onChangeIsOpen={props.onChangeIsOpen}
       padding="16px 12px"
     >
-      <div style={styleTitle}>
+      <div css={styleTitle}>
         <ErrorOutlineRoundedIcon style={styleLogo} />
         {t("report_record")}
       </div>
-      <div style={styleGuide}>{t("page_report.inquiry")}</div>
-      <DottedLine direction="row" />
-      <ReportOption
-        option={option}
-        onClick={(option: ReportOptionType) => setOption(option)}
-      />
-      <div style={styleContainer}>
-        <ReportList
-          option={option}
-          selectedReportHistory={
-            option === "Reporting"
-              ? reportHistory?.reporting
-              : reportHistory?.reported
-          }
-        />
-      </div>
+      <div css={styleGuide}>{t("page_report.inquiry")}</div>
+      <DottedLine />
+      <div css={{ height: "12px" }} />
+      <Navigation pages={pages} />
     </Modal>
   );
 };
diff --git a/src/components/ModalPopup/ModalReport/ReportOption.tsx b/src/components/ModalPopup/ModalReport/ReportOption.tsx
deleted file mode 100644
index 6f0c7f369..000000000
--- a/src/components/ModalPopup/ModalReport/ReportOption.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { useTranslation } from "react-i18next";
-
-import theme from "tools/theme";
-
-export type ReportOptionType = "Reporting" | "Reported";
-
-type ReportOptionProps = {
-  option: ReportOptionType;
-  onClick: (option: ReportOptionType) => void;
-};
-
-const ReportOption = (props: ReportOptionProps) => {
-  const { t } = useTranslation("mypage");
-  const styleContainer = {
-    display: "flex",
-    columnGap: "8px",
-    padding: "10px 0 12px 8px",
-  };
-  const styleButton = (isSelected: boolean) => {
-    return {
-      display: "flex",
-      ...theme.font10,
-      borderRadius: "4px",
-      padding: "3px 6px 3px",
-      ...theme.cursor(),
-      color: isSelected ? theme.white : theme.gray_text,
-      backgroundColor: isSelected ? theme.purple : theme.gray_background,
-      boxShadow: isSelected
-        ? theme.shadow_purple_button_inset
-        : theme.shadow_gray_input_inset,
-    };
-  };
-  return (
-    <div style={styleContainer}>
-      <div
-        style={styleButton(props.option === "Reporting")}
-        onClick={() => props.onClick("Reporting")}
-      >
-        {t("page_report.reported")}
-      </div>
-      <div
-        style={styleButton(props.option === "Reported")}
-        onClick={() => props.onClick("Reported")}
-      >
-        {t("page_report.received")}
-      </div>
-    </div>
-  );
-};
-
-export default ReportOption;
diff --git a/src/components/ModalPopup/ModalRoomSelect.jsx b/src/components/ModalPopup/ModalRoomSelect.jsx
deleted file mode 100644
index 16ace4083..000000000
--- a/src/components/ModalPopup/ModalRoomSelect.jsx
+++ /dev/null
@@ -1,292 +0,0 @@
-import PropTypes from "prop-types";
-import { useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useHistory } from "react-router-dom";
-
-import { useAxios } from "hooks/useTaxiAPI";
-
-import Button from "components/Button";
-import DottedLine from "components/DottedLine";
-import LinkLogin from "components/Link/LinkLogin";
-import MiniCircle from "components/MiniCircle";
-import Modal from "components/Modal";
-import { MAX_PARTICIPATION } from "pages/Myroom";
-
-import alertAtom from "atoms/alert";
-import loginInfoAtom from "atoms/loginInfo";
-import myRoomsAtom from "atoms/myRooms";
-import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
-
-import { date2str } from "tools/moment";
-import theme from "tools/theme";
-import { getLocationName } from "tools/trans";
-
-import ArrowRightAltRoundedIcon from "@mui/icons-material/ArrowRightAltRounded";
-import Tooltip from "@mui/material/Tooltip";
-
-const PlaceSection = (props) => {
-  const style = {
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    margin: "16px 12px 10px",
-    flex: "1 1 0",
-  };
-  const stylePlaceType = {
-    ...theme.font12,
-    color: theme.gray_text,
-    margin: "5px 0 1px",
-  };
-  const stylePlaceNameWrapper = {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    height: "39px",
-    width: "100%",
-  };
-  const stylePlaceName = {
-    ...theme.font16_bold,
-    color: theme.purple,
-    textAlign: "center",
-    wordBreak: "keep-all",
-  };
-
-  return (
-    <div style={style}>
-      <MiniCircle type={props.type} />
-      <p style={stylePlaceType}>
-        {props.type === "from" ? "출발지" : "도착지"}
-      </p>
-      <div style={stylePlaceNameWrapper}>
-        <p style={stylePlaceName}>{props.name}</p>
-      </div>
-    </div>
-  );
-};
-PlaceSection.propTypes = {
-  type: PropTypes.oneOf(["from", "to"]),
-  name: PropTypes.string.isRequired,
-};
-
-const InfoSection = (props) => {
-  const style = {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: props.isAlignLeft ? "flex-start" : "flex-end",
-    rowGap: "5px",
-    maxWidth: "fit-content",
-    flex: props.isBold || props.isColored ? "1 0" : "1 1",
-  };
-  const styleTitle = {
-    ...theme.font12,
-    color: theme.gray_text,
-  };
-  const styleText = {
-    ...theme.font14,
-    color: props.isColored ? theme.purple : undefined,
-    fontWeight: props.isBold || props.isColored ? 500 : undefined,
-  };
-
-  return (
-    <div style={style}>
-      <p style={styleTitle}>{props.title}</p>
-      <p style={styleText}>{props.text}</p>
-    </div>
-  );
-};
-InfoSection.propTypes = {
-  title: PropTypes.string.isRequired,
-  text: PropTypes.string.isRequired,
-  isBold: PropTypes.bool,
-  isColored: PropTypes.bool,
-  isAlignLeft: PropTypes.bool,
-};
-InfoSection.defaultProps = {
-  isBold: false,
-  isColored: false,
-  isAlignLeft: true,
-};
-
-const ModalRoomSelection = (props) => {
-  const { i18n } = useTranslation();
-  const axios = useAxios();
-  const onCall = useRef(false);
-  const [roomInfo, setRoomInfo] = useState(null);
-  const history = useHistory();
-  const [myRooms, setMyRooms] = useRecoilState(myRoomsAtom);
-  const loginInfo = useRecoilValue(loginInfoAtom);
-  const setAlert = useSetRecoilState(alertAtom);
-  const disableJoinBtn =
-    roomInfo?.part.some((user) => user._id === loginInfo?.oid) ?? true;
-  const isRoomFull = roomInfo
-    ? roomInfo.maxPartLength - roomInfo.part.length === 0
-    : false;
-  const fullParticipation = myRooms?.ongoing.length >= MAX_PARTICIPATION;
-  const isLogin = !!loginInfo?.id;
-
-  useEffect(() => {
-    if (props.isOpen) setRoomInfo(props.roomInfo);
-  }, [props.isOpen]);
-
-  const styleTitle = {
-    ...theme.font18,
-    padding: "10px 26px 18px 14px",
-  };
-  const stylePlace = {
-    width: "100%",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-  };
-  const styleArrow = {
-    fontSize: "24px",
-    color: theme.gray_text,
-  };
-  const styleInfoSectionWrapper = {
-    padding: "16px 14px",
-    display: "grid",
-    rowGap: "16px",
-  };
-  const styleMultipleInfo = {
-    display: "flex",
-    justifyContent: "space-between",
-    columnGap: "12px",
-  };
-
-  const requestJoin = async () => {
-    if (!onCall.current) {
-      onCall.current = true;
-      // FIXME: "/rooms/join" API가 myRoom을 반환하도록 수정
-      await axios({
-        url: "/rooms/join",
-        method: "post",
-        data: {
-          roomId: roomInfo._id,
-        },
-        onSuccess: async () => {
-          setMyRooms(
-            await axios({
-              url: "/rooms/searchByUser",
-              method: "get",
-              onError: () =>
-                setAlert("예상치 못한 오류가 발생했습니다. 새로고침 해주세요."),
-            })
-          );
-          history.push(`/myroom/${roomInfo._id}`);
-        },
-        onError: () => setAlert("방 참여에 실패하였습니다."),
-      });
-      onCall.current = false;
-    }
-  };
-
-  return (
-    <Modal isOpen={props.isOpen} onChangeIsOpen={props.onClose} padding="10px">
-      <div style={styleTitle}>{roomInfo?.name ?? ""}</div>
-      <DottedLine margin="0 2px" />
-      <div style={stylePlace}>
-        <PlaceSection
-          type="from"
-          name={getLocationName(roomInfo?.from, i18n.language)}
-        />
-        <ArrowRightAltRoundedIcon style={styleArrow} />
-        <PlaceSection
-          type="to"
-          name={getLocationName(roomInfo?.to, i18n.language)}
-        />
-      </div>
-      <DottedLine margin="0 2px" />
-      <div style={styleInfoSectionWrapper}>
-        <InfoSection
-          title="출발 시각 & 날짜"
-          text={date2str(roomInfo?.time) ?? ""}
-          isBold
-        />
-        <div style={styleMultipleInfo}>
-          <InfoSection
-            title="탑승자"
-            text={
-              roomInfo?.part
-                .reduce((acc, user) => {
-                  acc.push(user.nickname);
-                  return acc;
-                }, [])
-                .join(", ") ?? ""
-            }
-          />
-          <InfoSection
-            title="남은 인원"
-            text={
-              roomInfo
-                ? `${roomInfo.maxPartLength - roomInfo.part.length}명`
-                : ""
-            }
-            isAlignLeft={false}
-            isColored
-          />
-        </div>
-      </div>
-      <Tooltip
-        title={"참여할 수 있는 방 개수는 최대 5개입니다."}
-        componentsProps={{
-          tooltip: {
-            sx: {
-              display: fullParticipation ? undefined : "none",
-              ...theme.font12,
-              color: theme.black,
-              padding: "8px 10px 7px",
-              marginTop: "20px !important",
-              width: "148px",
-              boxShadow: theme.shadow,
-              backgroundColor: theme.white,
-              textAlign: "center",
-              whiteSpace: "normal",
-              borderRadius: "8px",
-              cursor: "default",
-            },
-          },
-        }}
-        enterTouchDelay={0}
-        leaveTouchDelay={2000}
-      >
-        {isLogin ? (
-          <Button
-            type="purple"
-            disabled={isRoomFull || disableJoinBtn || fullParticipation}
-            padding="10px 0 9px"
-            radius={8}
-            font={theme.font14_bold}
-            onClick={requestJoin}
-          >
-            {disableJoinBtn
-              ? "이미 참여 중입니다"
-              : isRoomFull
-              ? "인원이 0명인 방은 참여할 수 없습니다"
-              : fullParticipation
-              ? "현재 5개의 방에 참여 중입니다"
-              : "참여 신청"}
-          </Button>
-        ) : (
-          <LinkLogin redirect={`/home/${roomInfo?._id}`}>
-            <Button
-              type="purple"
-              padding="10px 0 9px"
-              radius={8}
-              font={theme.font14_bold}
-            >
-              로그인 후 참여 신청
-            </Button>
-          </LinkLogin>
-        )}
-      </Tooltip>
-    </Modal>
-  );
-};
-ModalRoomSelection.propTypes = {
-  isOpen: PropTypes.bool,
-  onClose: PropTypes.func,
-  roomInfo: PropTypes.object,
-};
-
-export default ModalRoomSelection;
diff --git a/src/components/ModalPopup/ModalRoomSelection.tsx b/src/components/ModalPopup/ModalRoomSelection.tsx
new file mode 100644
index 000000000..7efdc32ec
--- /dev/null
+++ b/src/components/ModalPopup/ModalRoomSelection.tsx
@@ -0,0 +1,95 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import Modal from "components/Modal";
+import Navigation from "components/Navigation";
+
+import BodyRoomSelection, {
+  BodyRoomSelectionProps,
+} from "./Body/BodyRoomSelection";
+import { BodyRoomShare } from "./ModalRoomShare";
+
+import theme from "tools/theme";
+
+type HeightFixWrapperProps = {
+  children: React.ReactNode;
+  onChangeHeight?: (height: number) => void;
+};
+type ModalRoomSelectionProps = {
+  isOpen: boolean;
+  onChangeIsOpen: (isOpen: boolean) => void;
+  roomInfo: Nullable<BodyRoomSelectionProps["roomInfo"]>; // FIXME
+};
+
+const HeightFixWrapper = ({
+  children,
+  onChangeHeight,
+}: HeightFixWrapperProps) => {
+  const body = useRef<HTMLDivElement>(null);
+
+  // resize observer
+  useEffect(() => {
+    if (!body.current) return;
+    const observer = new ResizeObserver(() => {
+      if (!body.current) return;
+      if (onChangeHeight) onChangeHeight(body.current.offsetHeight);
+    });
+    observer.observe(body.current);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div css={{ height: "0px", overflow: "hidden" }}>
+      <div ref={body}>{children}</div>
+    </div>
+  );
+};
+
+const ModalRoomSelection = ({
+  isOpen,
+  onChangeIsOpen,
+  roomInfo: _roomInfo,
+}: ModalRoomSelectionProps) => {
+  const [roomInfo, setRoomInfo] = useState(_roomInfo);
+  const [bodyHeight, setBodyHeight] = useState(0);
+  const pages = useMemo(
+    () =>
+      roomInfo && [
+        {
+          key: "info",
+          name: "방 정보",
+          body: <BodyRoomSelection roomInfo={roomInfo} />,
+        },
+        {
+          key: "share",
+          name: "공유하기",
+          body: <BodyRoomShare roomInfo={roomInfo} height={bodyHeight} />,
+        },
+      ],
+    [roomInfo, bodyHeight]
+  );
+
+  useEffect(() => {
+    if (_roomInfo) setRoomInfo(_roomInfo);
+  }, [_roomInfo]);
+
+  const styleTitle = {
+    ...theme.font18,
+    padding: "10px 8px 12px",
+  };
+
+  return (
+    <Modal isOpen={isOpen} onChangeIsOpen={onChangeIsOpen} padding="10px">
+      {roomInfo && (
+        <>
+          <div css={styleTitle}>{roomInfo.name}</div>
+          <Navigation pages={pages} />
+          <HeightFixWrapper onChangeHeight={setBodyHeight}>
+            <BodyRoomSelection roomInfo={roomInfo} />
+          </HeightFixWrapper>
+        </>
+      )}
+    </Modal>
+  );
+};
+
+export default ModalRoomSelection;
diff --git a/src/components/ModalPopup/ModalRoomShare.tsx b/src/components/ModalPopup/ModalRoomShare.tsx
new file mode 100644
index 000000000..29935dd82
--- /dev/null
+++ b/src/components/ModalPopup/ModalRoomShare.tsx
@@ -0,0 +1,46 @@
+import Modal from "components/Modal";
+
+import BodyRoomShare, { BodyRoomShareProps } from "./Body/BodyRoomShare";
+
+import theme from "tools/theme";
+
+import ShareIcon from "@mui/icons-material/Share";
+
+type ModalRoomShareProps = {
+  isOpen: boolean;
+  onChangeIsOpen?: (isOpen: boolean) => void;
+  roomInfo: BodyRoomShareProps["roomInfo"];
+};
+
+const ModalRoomShare = ({
+  isOpen,
+  onChangeIsOpen,
+  roomInfo,
+}: ModalRoomShareProps) => {
+  const styleTitle = {
+    ...theme.font18,
+    display: "flex",
+    alignItems: "center",
+    margin: "0 8px 12px",
+  };
+  const styleIcon = {
+    fontSize: "21px",
+    margin: "0 4px 0 0",
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onChangeIsOpen={onChangeIsOpen}
+      padding="16px 12px 12px"
+    >
+      <div css={styleTitle}>
+        <ShareIcon style={styleIcon} />방 공유하기
+      </div>
+      <BodyRoomShare roomInfo={roomInfo} />
+    </Modal>
+  );
+};
+
+export default ModalRoomShare;
+export { BodyRoomShare };
diff --git a/src/components/ModalPopup/ModalTerms.jsx b/src/components/ModalPopup/ModalTerms.jsx
index bddfe3710..eadb664ac 100644
--- a/src/components/ModalPopup/ModalTerms.jsx
+++ b/src/components/ModalPopup/ModalTerms.jsx
@@ -7,7 +7,8 @@ import { useAxios } from "hooks/useTaxiAPI";
 import Button from "components/Button";
 import { useOnClickLogout } from "components/Link/LinkLogout";
 import Modal from "components/Modal";
-import Terms from "components/ModalPopup/Terms";
+
+import BodyTerms from "./Body/BodyTerms";
 
 import alertAtom from "atoms/alert";
 import loginInfoAtom from "atoms/loginInfo";
@@ -107,7 +108,7 @@ const ModalTerms = (props) => {
         <TaxiLogo alt="taxi-logo" style={{ height: "27px" }} />
         {t("terms")}
       </div>
-      <Terms />
+      <BodyTerms />
       <div data-cy="agreement-bottom">
         <Agree
           didAgree={didAgree}
diff --git a/src/components/ModalPopup/index.tsx b/src/components/ModalPopup/index.tsx
index 2ba709fb4..86a2add0d 100644
--- a/src/components/ModalPopup/index.tsx
+++ b/src/components/ModalPopup/index.tsx
@@ -3,6 +3,8 @@ import ModalModify from "./ModalModify";
 import ModalNotification from "./ModalNotification";
 import ModalPrivacyPolicy from "./ModalPrivacyPolicy";
 import ModalReport from "./ModalReport";
+import ModalRoomSelection from "./ModalRoomSelection";
+import ModalRoomShare from "./ModalRoomShare";
 import ModalTerms from "./ModalTerms";
 
 export {
@@ -11,5 +13,7 @@ export {
   ModalNotification,
   ModalPrivacyPolicy,
   ModalReport,
+  ModalRoomSelection,
+  ModalRoomShare,
   ModalTerms,
 };
diff --git a/src/components/ModalRoomOptions/Picker.css b/src/components/ModalRoomOptions/Picker.css
index f33fd316b..6bb4aff76 100644
--- a/src/components/ModalRoomOptions/Picker.css
+++ b/src/components/ModalRoomOptions/Picker.css
@@ -8,7 +8,7 @@
   display: flex;
   justify-content: center;
   height: 100%;
-  -webkit-mask-box-image: linear-gradient(
+  mask-image: linear-gradient(
     to bottom,
     transparent 0% 24px,
     white 96px 125px,
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
new file mode 100644
index 000000000..35ebdbd6b
--- /dev/null
+++ b/src/components/Navigation.tsx
@@ -0,0 +1,69 @@
+import { useState } from "react";
+
+import theme from "tools/theme";
+
+type Page = {
+  key: string;
+  name?: string;
+  body: React.ReactNode;
+};
+type ButtonNavigationProps = {
+  name: string;
+  isSelected: boolean;
+  onClick: () => void;
+};
+type NavigationProps = {
+  pages: Array<Page>;
+};
+
+const OptionNavigation = ({
+  name,
+  isSelected,
+  onClick,
+}: ButtonNavigationProps) => (
+  <div
+    css={{
+      ...theme.font12,
+      borderRadius: "6px",
+      padding: "5px 8px",
+      ...theme.cursor(),
+      color: isSelected ? theme.white : theme.gray_text,
+      backgroundColor: isSelected ? theme.purple : theme.gray_background,
+      boxShadow: isSelected
+        ? theme.shadow_purple_button_inset
+        : theme.shadow_gray_input_inset,
+      transition: `all ${theme.duration} ease-in-out`,
+    }}
+    onClick={onClick}
+  >
+    {name}
+  </div>
+);
+
+const Navigation = ({ pages }: NavigationProps) => {
+  const [selected, setSelected] = useState(pages?.[0]?.key || "");
+  return (
+    <>
+      <div
+        css={{
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "8px",
+          margin: "0 8px 12px",
+        }}
+      >
+        {pages.map(({ key, name }) => (
+          <OptionNavigation
+            key={key}
+            name={name ?? key}
+            isSelected={selected === key}
+            onClick={() => setSelected(key)}
+          />
+        ))}
+      </div>
+      {pages.find(({ key }) => key === selected)?.body}
+    </>
+  );
+};
+
+export default Navigation;
diff --git a/src/components/ProfileImg.jsx b/src/components/User/ProfileImg.jsx
similarity index 100%
rename from src/components/ProfileImg.jsx
rename to src/components/User/ProfileImg.jsx
diff --git a/src/components/User/Users.tsx b/src/components/User/Users.tsx
new file mode 100644
index 000000000..b3f216034
--- /dev/null
+++ b/src/components/User/Users.tsx
@@ -0,0 +1,22 @@
+import User from ".";
+
+type UsersProps = {
+  values: Array<User>;
+};
+
+const Users = ({ values }: UsersProps) => (
+  <div
+    css={{
+      display: "flex",
+      flexWrap: "wrap",
+      gap: "6px 8px",
+      overflow: "hidden",
+    }}
+  >
+    {values.map((value) => (
+      <User key={value._id} value={value} />
+    ))}
+  </div>
+);
+
+export default Users;
diff --git a/src/components/User/index.tsx b/src/components/User/index.tsx
new file mode 100644
index 000000000..321546546
--- /dev/null
+++ b/src/components/User/index.tsx
@@ -0,0 +1,48 @@
+import ProfileImg from "./ProfileImg";
+
+import theme from "tools/theme";
+
+type UserProps = {
+  value: User;
+  //   type?: "defalut" | "settlement" | "departed";
+};
+
+const User = ({ value }: UserProps) => (
+  <div
+    css={{
+      display: "flex",
+      alignItems: "center",
+      gap: "4px",
+      maxWidth: "100%",
+    }}
+  >
+    <div
+      css={{
+        minWidth: "21px",
+        height: "21px",
+        overflow: "hidden",
+        borderRadius: "50%",
+        background: theme.gray_line,
+      }}
+    >
+      <ProfileImg path={value.profileImageUrl} />
+    </div>
+    <div
+      css={{
+        ...theme.font10,
+        borderRadius: "6px",
+        padding: "4px 6px 3px",
+        boxShadow: theme.shadow_gray_input_inset,
+        color: theme.gray_text,
+        background: theme.gray_background,
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        textOverflow: "ellipsis",
+      }}
+    >
+      {value.nickname}
+    </div>
+  </div>
+);
+
+export default User;
diff --git a/src/loadenv.js b/src/loadenv.js
index dd9b9358b..8936ef4e8 100644
--- a/src/loadenv.js
+++ b/src/loadenv.js
@@ -9,6 +9,7 @@ const backServer = env.REACT_APP_BACK_URL;
 const ioServer = env.REACT_APP_IO_URL ?? backServer;
 const s3BaseUrl = env.REACT_APP_S3_URL;
 const channelTalkPluginKey = env.REACT_APP_CHANNELTALK_PLUGIN_KEY;
+const kakaoSDKKey = env.REACT_APP_KAKAO_SDK_KEY;
 const gaTrackingId = env.REACT_APP_GA_TRACKING_ID;
 const firebaseConfig =
   env.REACT_APP_FIREBASE_CONFIG && JSON.parse(env.REACT_APP_FIREBASE_CONFIG);
@@ -19,6 +20,7 @@ export {
   ioServer,
   s3BaseUrl,
   channelTalkPluginKey,
+  kakaoSDKKey,
   gaTrackingId,
   firebaseConfig,
 };
diff --git a/src/pages/Chatting/Header/FullChatHeader.jsx b/src/pages/Chatting/Header/FullChatHeader.jsx
index 928f7709f..05bcb443f 100644
--- a/src/pages/Chatting/Header/FullChatHeader.jsx
+++ b/src/pages/Chatting/Header/FullChatHeader.jsx
@@ -5,6 +5,7 @@ import { useHistory } from "react-router";
 import { useR2state } from "hooks/useReactiveState";
 
 import DottedLine from "components/DottedLine";
+import { ModalRoomShare } from "components/ModalPopup";
 
 import HeaderBody from "./HeaderBody";
 
@@ -12,12 +13,14 @@ import theme from "tools/theme";
 
 import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
 import CloseFullscreenRoundedIcon from "@mui/icons-material/CloseFullscreenRounded";
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
-import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
+import ShareIcon from "@mui/icons-material/Share";
+import UnfoldLessRoundedIcon from "@mui/icons-material/UnfoldLessRounded";
+import UnfoldMoreRoundedIcon from "@mui/icons-material/UnfoldMoreRounded";
 
 const Header = (props) => {
   const bodyRef = useRef();
   const [isOpen, setOpen] = useState(false);
+  const [isOpenShare, setIsOpenShare] = useState(false);
   const [bodyHeight, setBodyHeight] = useState(0);
   const history = useHistory();
   const reactiveState = useR2state();
@@ -105,6 +108,10 @@ const Header = (props) => {
               {props?.info?.to?.koName}
             </div>
           </div>
+          <ShareIcon
+            style={{ ...styleIcon, marginRight: "18px", fontSize: "20px" }}
+            onClick={() => setIsOpenShare(true)}
+          />
           {reactiveState !== 3 && (
             <CloseFullscreenRoundedIcon
               style={{ ...styleIcon, marginRight: "12px", fontSize: "20px" }}
@@ -112,12 +119,12 @@ const Header = (props) => {
             />
           )}
           {isOpen ? (
-            <CloseRoundedIcon
+            <UnfoldLessRoundedIcon
               style={styleIcon}
               onClick={() => setOpen(!isOpen)}
             />
           ) : (
-            <MenuRoundedIcon
+            <UnfoldMoreRoundedIcon
               style={styleIcon}
               onClick={() => setOpen(!isOpen)}
             />
@@ -130,6 +137,11 @@ const Header = (props) => {
           <HeaderBody info={props.info} recallEvent={props.recallEvent} />
         </div>
       </div>
+      <ModalRoomShare
+        isOpen={isOpenShare}
+        onChangeIsOpen={setIsOpenShare}
+        roomInfo={props.info}
+      />
     </div>
   );
 };
diff --git a/src/pages/Chatting/Header/HeaderBody.jsx b/src/pages/Chatting/Header/HeaderBody.jsx
index 674fb0a63..f40e02849 100644
--- a/src/pages/Chatting/Header/HeaderBody.jsx
+++ b/src/pages/Chatting/Header/HeaderBody.jsx
@@ -1,7 +1,7 @@
 import PropTypes from "prop-types";
 import { useMemo, useState } from "react";
 
-import ProfileImg from "components/ProfileImg";
+import ProfileImg from "components/User/ProfileImg";
 
 import PopupCancel from "./Popup/PopupCancel";
 import PopupPay from "./Popup/PopupPay";
@@ -17,25 +17,26 @@ import SendRoundedIcon from "@material-ui/icons/SendRounded";
 import LogoutRoundedIcon from "@mui/icons-material/LogoutRounded";
 import PaymentRoundedIcon from "@mui/icons-material/PaymentRounded";
 
-const Info = (props) => {
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        rowGap: "4px",
-        width: "fit-content",
-      }}
-    >
-      <div style={{ ...theme.font10_bold, color: theme.gray_text }}>
-        {props.title}
-      </div>
-      <div style={{ ...theme.font12 }}>{props.children}</div>
+const Info = (props) => (
+  <div
+    css={{
+      display: "flex",
+      flexDirection: "column",
+      rowGap: "4px",
+      width: "fit-content",
+    }}
+  >
+    <div css={{ ...theme.font10_bold, color: theme.gray_text }}>
+      {props.title}
     </div>
-  );
-};
+    <div css={{ ...theme.font12, textAlign: props.alignDirection }}>
+      {props.children}
+    </div>
+  </div>
+);
 Info.propTypes = {
   title: PropTypes.string,
+  alignDirection: PropTypes.oneOf(["left", "right"]),
   children: PropTypes.node,
 };
 
@@ -194,8 +195,10 @@ const HeaderBody = (props) => {
   return (
     <div>
       <div style={{ display: "flex", justifyContent: "space-between" }}>
-        <Info title="출발 시각 & 날짜">{date2str(props.info?.time)}</Info>
-        <Info title="탑승 및 최대 인원">
+        <Info title="출발 시각 & 날짜" alignDirection="left">
+          {date2str(props.info?.time)}
+        </Info>
+        <Info title="참여 / 최대 인원" alignDirection="right">
           <b>{props.info?.part.length}명</b> / {props.info?.maxPartLength}명
         </Info>
       </div>
diff --git a/src/pages/Chatting/MessageForm/Popup/PopupAccount.tsx b/src/pages/Chatting/MessageForm/Popup/PopupAccount.tsx
index ed86a3ab1..7265991dd 100644
--- a/src/pages/Chatting/MessageForm/Popup/PopupAccount.tsx
+++ b/src/pages/Chatting/MessageForm/Popup/PopupAccount.tsx
@@ -25,10 +25,14 @@ const PopupAccount = (props: SendAccoundModalProps) => {
   const [accountNumber, setAccountNumber] = useState(loginInfo?.account || "");
 
   const styleTitle = {
+    ...theme.font18,
     display: "flex",
     alignItems: "center",
   };
-
+  const styleIcon = {
+    fontSize: "21px",
+    margin: "0 4px 0 0",
+  };
   const styleText = {
     ...theme.font14,
     color: theme.gray_text,
@@ -62,7 +66,7 @@ const PopupAccount = (props: SendAccoundModalProps) => {
         }}
       >
         <div style={styleTitle}>
-          <WalletIcon />
+          <WalletIcon style={styleIcon} />
           계좌 보내기
         </div>
         <div style={styleText}>
diff --git a/src/pages/Chatting/MessagesBody/ChatSet.jsx b/src/pages/Chatting/MessagesBody/ChatSet.jsx
index 646fb3b04..6c21ebd23 100644
--- a/src/pages/Chatting/MessagesBody/ChatSet.jsx
+++ b/src/pages/Chatting/MessagesBody/ChatSet.jsx
@@ -1,14 +1,12 @@
 import PropTypes from "prop-types";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
-import ProfileImg from "components/ProfileImg";
+import LinkCopy from "components/Link/LinkCopy";
+import ProfileImg from "components/User/ProfileImg";
 import ImageFullscreen from "pages/Chatting/MessagesBody/ImageFullscreen";
 
 import ChatPaySettle from "./ChatPaySettle";
 
-import alertAtom from "atoms/alert";
-import { useSetRecoilState } from "recoil";
-
 import hoverEventSet from "tools/hoverEventSet";
 import moment from "tools/moment";
 import theme from "tools/theme";
@@ -21,10 +19,10 @@ import WalletIcon from "@mui/icons-material/Wallet";
 const ChatAccount = (props) => {
   const bankName = props.account.split(" ")[0];
   const accounNumber = props.account.split(" ")[1];
+
   const [isClicked, setIsClicked] = useState(false);
   const [isCopied, setIsCopied] = useState(false);
-  const setAlert = useSetRecoilState(alertAtom);
-
+  const onCopy = useCallback(() => setIsCopied(true), [setIsCopied]);
   useEffect(() => {
     if (isCopied) {
       const timer = setTimeout(() => setIsCopied(false), 1000);
@@ -39,14 +37,6 @@ const ChatAccount = (props) => {
     display: "flex",
     gap: "6px",
   };
-  const handleCopy = () => {
-    if (!navigator.clipboard) {
-      setAlert("복사를 지원하지 않는 브라우저입니다.");
-      return;
-    }
-    navigator.clipboard.writeText(props.account);
-    setIsCopied(true);
-  };
 
   return (
     <div
@@ -106,28 +96,29 @@ const ChatAccount = (props) => {
             </div>
           </div>
         )}
-        <div
-          style={{
-            boxShadow: theme.shadow_gray_button_inset,
-            color: theme.gray_text,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: "30px",
-            height: "30px",
-            borderRadius: "6px",
-            backgroundColor: theme.gray_background,
-            cursor: "pointer",
-          }}
-          onClick={handleCopy}
-          {...hoverEventSet(() => {}, setIsClicked)}
-        >
-          {isCopied ? (
-            <CheckIcon style={{ fontSize: "16px" }} />
-          ) : (
-            <ContentCopyIcon style={{ fontSize: "16px" }} />
-          )}
-        </div>
+        <LinkCopy value={props.account} onCopy={onCopy}>
+          <div
+            style={{
+              boxShadow: theme.shadow_gray_button_inset,
+              color: theme.gray_text,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "30px",
+              height: "30px",
+              borderRadius: "6px",
+              backgroundColor: theme.gray_background,
+              cursor: "pointer",
+            }}
+            {...hoverEventSet(() => {}, setIsClicked)}
+          >
+            {isCopied ? (
+              <CheckIcon style={{ fontSize: "16px" }} />
+            ) : (
+              <ContentCopyIcon style={{ fontSize: "16px" }} />
+            )}
+          </div>
+        </LinkCopy>
       </div>
       <div
         style={{
diff --git a/src/pages/Chatting/MessagesBody/PopupReport.tsx b/src/pages/Chatting/MessagesBody/PopupReport.tsx
index ea6419f4d..48dc49452 100644
--- a/src/pages/Chatting/MessagesBody/PopupReport.tsx
+++ b/src/pages/Chatting/MessagesBody/PopupReport.tsx
@@ -4,7 +4,7 @@ import { useAxios } from "hooks/useTaxiAPI";
 
 import Button from "components/Button";
 import Modal from "components/Modal";
-import ProfileImg from "components/ProfileImg";
+import ProfileImg from "components/User/ProfileImg";
 
 import alertAtom from "atoms/alert";
 import { useSetRecoilState } from "recoil";
diff --git a/src/pages/Home/RoomSection.tsx b/src/pages/Home/RoomSection.tsx
index 91563efc5..c2c1a87d1 100644
--- a/src/pages/Home/RoomSection.tsx
+++ b/src/pages/Home/RoomSection.tsx
@@ -4,7 +4,7 @@ import { useHistory } from "react-router-dom";
 import useDateToken from "hooks/useDateToken";
 import { useQuery } from "hooks/useTaxiAPI";
 
-import ModalRoomSelection from "components/ModalPopup/ModalRoomSelect";
+import { ModalRoomSelection } from "components/ModalPopup";
 import RLayout from "components/RLayout";
 import Title from "components/Title";
 
@@ -60,7 +60,7 @@ const RoomSection = ({ roomId }: RoomSectionProps) => {
     <RLayout.R1>
       <ModalRoomSelection
         isOpen={!!roomInfo}
-        onClose={() => history.replace("/home")}
+        onChangeIsOpen={() => history.replace("/home")}
         roomInfo={roomInfo}
       />
       <Title icon="taxi" header>
diff --git a/src/pages/Mypage/index.tsx b/src/pages/Mypage/index.tsx
index 0dc7999ad..0f7b4f19e 100644
--- a/src/pages/Mypage/index.tsx
+++ b/src/pages/Mypage/index.tsx
@@ -14,9 +14,9 @@ import {
   ModalReport,
   ModalTerms,
 } from "components/ModalPopup";
-import ProfileImg from "components/ProfileImg";
 import SuggestLogin from "components/SuggestLogin";
 import Title from "components/Title";
+import ProfileImg from "components/User/ProfileImg";
 import WhiteContainer from "components/WhiteContainer";
 
 import Menu from "./Menu";
diff --git a/src/pages/Myroom/R2Myroom.jsx b/src/pages/Myroom/R2Myroom.jsx
index 95721fbdd..6ea0efc0f 100644
--- a/src/pages/Myroom/R2Myroom.jsx
+++ b/src/pages/Myroom/R2Myroom.jsx
@@ -7,6 +7,7 @@ import { useQuery } from "hooks/useTaxiAPI";
 
 import DottedLine from "components/DottedLine";
 import Empty from "components/Empty";
+import { ModalRoomShare } from "components/ModalPopup";
 import Pagination, { PAGE_MAX_ITEMS } from "components/Pagination";
 import RLayout from "components/RLayout";
 import Room from "components/Room";
@@ -17,16 +18,64 @@ import SideChat from "pages/Chatting/SideChat";
 
 import theme from "tools/theme";
 
+import ShareIcon from "@mui/icons-material/Share";
 import UnfoldLessRoundedIcon from "@mui/icons-material/UnfoldLessRounded";
 import UnfoldMoreRoundedIcon from "@mui/icons-material/UnfoldMoreRounded";
 
 const ChatHeader = (props) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isOpenShare, setIsOpenShare] = useState(false);
   const [headerInfoToken, fetchHeaderInfo] = useDateToken();
   const [, headerInfo] = useQuery.get(`/rooms/info?id=${props.roomId}`, {}, [
     headerInfoToken,
   ]);
 
-  return <ChatHeaderBody info={headerInfo} recallEvent={fetchHeaderInfo} />;
+  return (
+    <WhiteContainer padding="16px" style={{ flex: "0 0 auto" }}>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          padding: "0 4px 0 8px",
+        }}
+      >
+        <Title icon="chat">채팅 창</Title>
+        <ShareIcon
+          style={{
+            color: theme.purple,
+            marginLeft: "auto",
+            marginRight: "12px",
+            ...theme.cursor(),
+            fontSize: "20px",
+          }}
+          onClick={() => setIsOpenShare(true)}
+        />
+        {isOpen ? (
+          <UnfoldLessRoundedIcon
+            style={{ color: theme.purple, ...theme.cursor() }}
+            onClick={() => setIsOpen(false)}
+          />
+        ) : (
+          <UnfoldMoreRoundedIcon
+            style={{ color: theme.purple, ...theme.cursor() }}
+            onClick={() => setIsOpen(true)}
+          />
+        )}
+      </div>
+      {isOpen && (
+        <>
+          <DottedLine direction="row" margin="16px 0" />
+          <ChatHeaderBody info={headerInfo} recallEvent={fetchHeaderInfo} />
+        </>
+      )}
+      <ModalRoomShare
+        isOpen={isOpenShare}
+        onChangeIsOpen={setIsOpenShare}
+        roomInfo={headerInfo}
+      />
+    </WhiteContainer>
+  );
 };
 
 ChatHeader.propTypes = {
@@ -56,134 +105,104 @@ LinkRoom.propTypes = {
 };
 
 const R2Myroom = (props) => {
-  const [isHeaderOpen, setHeaderOpen] = useState(true);
-
   return (
-    <>
-      <RLayout.R2
-        left={
-          <>
-            <Title
-              icon="myroom"
-              header
-              marginAuto
-              R2={props.roomId !== undefined}
-            >
-              내 방 보기
-            </Title>
-            <div style={{ margin: "0 -4px", padding: "0 4px" }}>
-              <WhiteContainer padding="20px 20px 22px">
-                <Title icon="current">참여 중인 방</Title>
-                <div style={{ height: "19px" }} />
-                <DottedLine direction="row" />
-                {props.ongoing.length === 0 ? (
-                  <Empty screen="pc">참여 중인 방이 없습니다</Empty>
-                ) : (
-                  props.ongoing.map((item) => (
-                    <LinkRoom
-                      key={item._id}
-                      currentId={props.roomId}
-                      id={item._id}
-                    >
-                      <Room
-                        data={item}
-                        selected={props.roomId === item._id}
-                        theme="purple"
-                        marginTop="15px"
-                      />
-                    </LinkRoom>
-                  ))
-                )}
-              </WhiteContainer>
-              <WhiteContainer padding="20px 20px 22px" margin="0px 0px -17px">
-                <Title icon="past">과거 참여 방</Title>
-                <div style={{ height: "19px" }} />
-                <DottedLine direction="row" />
-                {props.done.length === 0 ? (
-                  <Empty screen="pc">과거 참여했던 방이 없습니다</Empty>
-                ) : (
-                  <div>
-                    {props.done
-                      .slice(
-                        PAGE_MAX_ITEMS * (props.donePageInfo.currentPage - 1),
-                        PAGE_MAX_ITEMS * props.donePageInfo.currentPage
-                      )
-                      .map((item) => (
-                        <LinkRoom
-                          key={item._id}
-                          currentId={props.roomId}
-                          id={item._id}
-                        >
-                          <Room
-                            data={item}
-                            selected={props.roomId === item._id}
-                            theme="purple"
-                            marginTop="15px"
-                          />
-                        </LinkRoom>
-                      ))}
-                    <Pagination
-                      totalPages={props.donePageInfo.totalPages}
-                      currentPage={props.donePageInfo.currentPage}
+    <RLayout.R2
+      left={
+        <>
+          <Title
+            icon="myroom"
+            header
+            marginAuto
+            R2={props.roomId !== undefined}
+          >
+            내 방 보기
+          </Title>
+          <div style={{ margin: "0 -4px", padding: "0 4px" }}>
+            <WhiteContainer padding="20px 20px 22px">
+              <Title icon="current">참여 중인 방</Title>
+              <div style={{ height: "19px" }} />
+              <DottedLine direction="row" />
+              {props.ongoing.length === 0 ? (
+                <Empty screen="pc">참여 중인 방이 없습니다</Empty>
+              ) : (
+                props.ongoing.map((item) => (
+                  <LinkRoom
+                    key={item._id}
+                    currentId={props.roomId}
+                    id={item._id}
+                  >
+                    <Room
+                      data={item}
+                      selected={props.roomId === item._id}
+                      theme="purple"
+                      marginTop="15px"
                     />
-                  </div>
-                )}
-              </WhiteContainer>
-            </div>
-          </>
-        }
-        right={props.roomId ? <></> : null}
-      />
-      {props.roomId ? (
-        <div
-          style={{
-            position: "fixed",
-            width: "min(390px, calc(50% - 27.5px))",
-            top: 20,
-            left: "calc(50% + 7.5px)",
-            height:
-              "calc(var(--window-inner-height) - 20px - 56px - 15px - env(safe-area-inset-bottom))",
-            display: "flex",
-            flexDirection: "column",
-            zIndex: theme.zIndex_nav - 1,
-          }}
-        >
-          <WhiteContainer padding="16px" style={{ flex: "0 0 auto" }}>
-            <div
-              style={{
-                display: "flex",
-                justifyContent: "space-between",
-                padding: "0 4px 0 8px",
-              }}
-            >
-              <Title icon="chat">채팅 창</Title>
-              {isHeaderOpen ? (
-                <UnfoldLessRoundedIcon
-                  style={{ color: theme.purple, ...theme.cursor() }}
-                  onClick={() => setHeaderOpen(false)}
-                />
+                  </LinkRoom>
+                ))
+              )}
+            </WhiteContainer>
+            <WhiteContainer padding="20px 20px 22px" margin="0px 0px -17px">
+              <Title icon="past">과거 참여 방</Title>
+              <div style={{ height: "19px" }} />
+              <DottedLine direction="row" />
+              {props.done.length === 0 ? (
+                <Empty screen="pc">과거 참여했던 방이 없습니다</Empty>
               ) : (
-                <UnfoldMoreRoundedIcon
-                  style={{ color: theme.purple, ...theme.cursor() }}
-                  onClick={() => setHeaderOpen(true)}
-                />
+                <div>
+                  {props.done
+                    .slice(
+                      PAGE_MAX_ITEMS * (props.donePageInfo.currentPage - 1),
+                      PAGE_MAX_ITEMS * props.donePageInfo.currentPage
+                    )
+                    .map((item) => (
+                      <LinkRoom
+                        key={item._id}
+                        currentId={props.roomId}
+                        id={item._id}
+                      >
+                        <Room
+                          data={item}
+                          selected={props.roomId === item._id}
+                          theme="purple"
+                          marginTop="15px"
+                        />
+                      </LinkRoom>
+                    ))}
+                  <Pagination
+                    totalPages={props.donePageInfo.totalPages}
+                    currentPage={props.donePageInfo.currentPage}
+                  />
+                </div>
               )}
-            </div>
-            {isHeaderOpen && (
-              <>
-                <DottedLine direction="row" margin="16px 0" />
-                <ChatHeader roomId={props.roomId} />
-              </>
-            )}
-          </WhiteContainer>
-          <div style={{ height: "100%", minHeight: 0 }}>
-            <WhiteContainer padding="0px" style={{ height: "100%" }}>
-              <SideChat roomId={props.roomId} />
             </WhiteContainer>
           </div>
-        </div>
-      ) : null}
-    </>
+        </>
+      }
+      right={
+        props.roomId ? (
+          <div
+            style={{
+              position: "fixed",
+              width: "min(390px, calc(50% - 27.5px))",
+              top: 20,
+              left: "calc(50% + 7.5px)",
+              height:
+                "calc(var(--window-inner-height) - 20px - 56px - 15px - env(safe-area-inset-bottom))",
+              display: "flex",
+              flexDirection: "column",
+              zIndex: theme.zIndex_nav - 1,
+            }}
+          >
+            <ChatHeader roomId={props.roomId} />
+            <div style={{ height: "100%", minHeight: 0 }}>
+              <WhiteContainer padding="0px" style={{ height: "100%" }}>
+                <SideChat roomId={props.roomId} />
+              </WhiteContainer>
+            </div>
+          </div>
+        ) : null
+      }
+    />
   );
 };
 
diff --git a/src/pages/Search/SideResult.jsx b/src/pages/Search/SideResult.jsx
index 025eecf64..8bdda373c 100644
--- a/src/pages/Search/SideResult.jsx
+++ b/src/pages/Search/SideResult.jsx
@@ -5,7 +5,7 @@ import usePageFromSearchParams from "hooks/usePageFromSearchParams";
 
 import DottedLine from "components/DottedLine";
 import Empty from "components/Empty";
-import ModalRoomSelection from "components/ModalPopup/ModalRoomSelect";
+import { ModalRoomSelection } from "components/ModalPopup";
 import Pagination, { PAGE_MAX_ITEMS } from "components/Pagination";
 import Room from "components/Room";
 import Title from "components/Title";
@@ -164,9 +164,7 @@ const SideResult = (props) => {
       <div style={{ marginTop: 26 }}>
         <ModalRoomSelection
           isOpen={!!selectedRoomInfo}
-          onClose={() => {
-            setSelectedRoomInfo(null);
-          }}
+          onChangeIsOpen={() => setSelectedRoomInfo(null)}
           roomInfo={selectedRoomInfo}
         />
         <WhiteContainer padding="20px 20px 22px">
@@ -211,9 +209,7 @@ const SideResult = (props) => {
       <>
         <ModalRoomSelection
           isOpen={!!selectedRoomInfo}
-          onClose={() => {
-            setSelectedRoomInfo(null);
-          }}
+          onChangeIsOpen={() => setSelectedRoomInfo(null)}
           roomInfo={selectedRoomInfo}
         />
         <SearchOptions
diff --git a/src/routes.ts b/src/routes.ts
index 28c1bbb3f..672e74f9c 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -13,7 +13,7 @@ const routes = [
     exact: true,
   },
   {
-    path: ["/", "/home", "/home/:roomId"],
+    path: ["/", "/home", "/home/:roomId", "/invite/:roomId"],
     component: lazy(() => import("pages/Home")),
     exact: true,
   },
diff --git a/src/static/assets/KakaoTalkLogo.svg b/src/static/assets/KakaoTalkLogo.svg
new file mode 100644
index 000000000..3676f494e
--- /dev/null
+++ b/src/static/assets/KakaoTalkLogo.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+<!-- <path fill="#FFE812" d="M256 236c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20V20C0 8.954 8.954 0 20 0h216c11.046 0 20 8.954 20 20v216z"/> -->
+<path d="M128 36C70.562 36 24 72.713 24 118c0 29.279 19.466 54.97 48.748 69.477-1.593 5.494-10.237 35.344-10.581 37.689 0 0-.207 1.762.934 2.434s2.483.15 2.483.15c3.272-.457 37.943-24.811 43.944-29.04 5.995.849 12.168 1.29 18.472 1.29 57.438 0 104-36.712 104-82 0-45.287-46.562-82-104-82z"/>
+<path fill="#FFE812" d="M70.5 146.625c-3.309 0-6-2.57-6-5.73V105.25h-9.362c-3.247 0-5.888-2.636-5.888-5.875s2.642-5.875 5.888-5.875h30.724c3.247 0 5.888 2.636 5.888 5.875s-2.642 5.875-5.888 5.875H76.5v35.645c0 3.16-2.691 5.73-6 5.73zM123.112 146.547c-2.502 0-4.416-1.016-4.993-2.65l-2.971-7.778-18.296-.001-2.973 7.783c-.575 1.631-2.488 2.646-4.99 2.646a9.155 9.155 0 0 1-3.814-.828c-1.654-.763-3.244-2.861-1.422-8.52l14.352-37.776c1.011-2.873 4.082-5.833 7.99-5.922 3.919.088 6.99 3.049 8.003 5.928l14.346 37.759c1.826 5.672.236 7.771-1.418 8.532a9.176 9.176 0 0 1-3.814.827c-.001 0 0 0 0 0zm-11.119-21.056L106 108.466l-5.993 17.025h11.986zM138 145.75c-3.171 0-5.75-2.468-5.75-5.5V99.5c0-3.309 2.748-6 6.125-6s6.125 2.691 6.125 6v35.25h12.75c3.171 0 5.75 2.468 5.75 5.5s-2.579 5.5-5.75 5.5H138zM171.334 146.547c-3.309 0-6-2.691-6-6V99.5c0-3.309 2.691-6 6-6s6 2.691 6 6v12.896l16.74-16.74c.861-.861 2.044-1.335 3.328-1.335 1.498 0 3.002.646 4.129 1.772 1.051 1.05 1.678 2.401 1.764 3.804.087 1.415-.384 2.712-1.324 3.653l-13.673 13.671 14.769 19.566a5.951 5.951 0 0 1 1.152 4.445 5.956 5.956 0 0 1-2.328 3.957 5.94 5.94 0 0 1-3.609 1.211 5.953 5.953 0 0 1-4.793-2.385l-14.071-18.644-2.082 2.082v13.091a6.01 6.01 0 0 1-6.002 6.003z"/>
+</svg>
\ No newline at end of file
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index ca0f589c4..c2a13ab7f 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -23,6 +23,12 @@ declare global {
     enName: string;
     koName: string;
   };
+  type User = {
+    _id: string;
+    name: string;
+    nickname: string;
+    profileImageUrl: string;
+  };
   type Room = {
     name: string;
     from: Location;
@@ -46,5 +52,6 @@ declare global {
     flutter_inappwebview: {
       callHandler: (name: string, ...args: any[]) => Promise<any>;
     };
+    Kakao: any;
   }
 }