From 8c8393cad90e62e7c766048d7c8a1874a033508d Mon Sep 17 00:00:00 2001
From: 0ev <andyye.jongcye@gmail.com>
Date: Mon, 3 Apr 2023 23:08:02 +0900
Subject: [PATCH 01/43] Fix: weird text when no userId

---
 src/components/Skeleton/index.tsx | 17 +++++++++++++----
 src/pages/Home/InfoSection.tsx    |  6 +++++-
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx
index 719da9d6b..f91bf26e2 100644
--- a/src/components/Skeleton/index.tsx
+++ b/src/components/Skeleton/index.tsx
@@ -1,5 +1,5 @@
 import { ReactNode, useEffect, useState } from "react";
-import { Redirect, useLocation } from "react-router-dom";
+import { useLocation, Redirect } from "react-router-dom";
 
 import { useAxios } from "hooks/useTaxiAPI";
 
@@ -17,7 +17,6 @@ import myRoomAtom from "atoms/myRoom";
 import notificationOptionsAtom from "atoms/notificationOptions";
 import taxiLocationAtom from "atoms/taxiLocation";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
-
 type ContainerProps = {
   children: ReactNode;
 };
@@ -118,7 +117,15 @@ const Skeleton = ({ children }: SkeletonProps) => {
       </Container>
     );
   }
-  if (!userId && !pathname.startsWith("/login")) {
+  // when pathname is /, /home, /search, dont redirect
+  if (
+    !userId &&
+    !pathname.startsWith("/login") &&
+    pathname !== "/" &&
+    !pathname.startsWith("/search") &&
+    !pathname.startsWith("/home") &&
+    !pathname.startsWith("/logout")
+  ) {
     return (
       <Redirect to={`/login?redirect=${encodeURIComponent(currentPath)}`} />
     );
@@ -140,7 +147,9 @@ const Skeleton = ({ children }: SkeletonProps) => {
       <HeaderBar />
       {children}
       <Footer />
-      <PopupPolicy isOpen={!loginInfoDetail?.agreeOnTermsOfService} />
+      <PopupPolicy
+        isOpen={!loginInfoDetail?.agreeOnTermsOfService && !!userId}
+      />
     </Container>
   );
 };
diff --git a/src/pages/Home/InfoSection.tsx b/src/pages/Home/InfoSection.tsx
index 482fec1ee..6e08d4b62 100644
--- a/src/pages/Home/InfoSection.tsx
+++ b/src/pages/Home/InfoSection.tsx
@@ -97,7 +97,11 @@ const InfoSection = () => {
       <RLayout.R1>
         <div style={{ padding: "25px 0 32px" }}>
           <TaxiLogoWhite />
-          <div style={styleName}>안녕하세요, {loginInfo?.nickname}님!</div>
+          <div style={styleName}>
+            {loginInfo?.nickname
+              ? `안녕하세요, ${loginInfo?.nickname}님!`
+              : "안녕하세요!"}
+          </div>
           <div style={{ ...theme.font14, color: theme.white }}>{message}</div>
           {room ? (
             <Link to={`/myroom/${room._id}`} style={{ textDecoration: "none" }}>

From e8c374e51671a6d01ad4bcb4d819a3ce68aebfb5 Mon Sep 17 00:00:00 2001
From: 0ev <andyye.jongcye@gmail.com>
Date: Wed, 5 Apr 2023 01:15:23 +0900
Subject: [PATCH 02/43] Add: Login and Loginbutton component

---
 src/App.js                              |  7 ++-
 src/components/Button.tsx               |  2 +-
 src/components/Login.tsx                | 33 ++++++++++
 src/components/LoginButton.tsx          | 26 ++++++++
 src/components/Skeleton/index.tsx       | 32 +++++-----
 src/pages/Addroom/index.tsx             | 82 ++++++++++++++-----------
 src/pages/Home/InfoSection.tsx          | 10 ++-
 src/pages/Home/RoomList.tsx             | 21 ++++++-
 src/pages/Home/RoomSection.tsx          |  9 ++-
 src/pages/Home/index.tsx                |  5 +-
 src/pages/Mypage/index.tsx              |  2 +-
 src/pages/Myroom/index.jsx              | 16 ++++-
 src/pages/Search/RoomSelectionModal.jsx | 12 +++-
 13 files changed, 191 insertions(+), 66 deletions(-)
 create mode 100644 src/components/Login.tsx
 create mode 100644 src/components/LoginButton.tsx

diff --git a/src/App.js b/src/App.js
index f36932de4..95aa523d8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -14,7 +14,7 @@ import Addroom from "pages/Addroom";
 import WrapChat from "pages/Chatting/WrapChat";
 import PageNotFound from "pages/Error/PageNotFound";
 import Home from "pages/Home";
-import Login from "pages/Login";
+// import Login from "pages/Login";
 import LoginFail from "pages/Login/LoginFail";
 import Logout from "pages/Login/Logout";
 import Mypage from "pages/Mypage";
@@ -41,12 +41,13 @@ const App = () => {
           <CSSVariablesProvider />
           <Skeleton>
             <Switch>
-              <Route exact path="/login" component={Login} />
-              <Route exact path="/login/privacyPolicy" component={Login} />
+              {/* <Route exact path="/login" component={Login} /> */}
+              {/* <Route exact path="/login/privacyPolicy" component={Login} /> */}
               <Route exact path="/login/fail" component={LoginFail} />
               <Route exact path="/logout" component={Logout} />
               <Route exact path="/" component={Home} />
               <Route exact path="/home" component={Home} />
+              <Route exact path="/home/:roomId" component={Home} />
               <Route exact path="/search" component={Search} />
               <Route exact path="/addroom" component={Addroom} />
               <Route exact path="/myroom" component={Myroom} />
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index e6d521e6e..ee77b2448 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -5,7 +5,7 @@ import theme, { Font } from "tools/theme";
 
 type ButtonType = "purple" | "purple_inset" | "gray" | "white";
 
-type ButtonProps = {
+export type ButtonProps = {
   type?: ButtonType;
   disabled?: boolean;
   width?: string;
diff --git a/src/components/Login.tsx b/src/components/Login.tsx
new file mode 100644
index 000000000..15e06332a
--- /dev/null
+++ b/src/components/Login.tsx
@@ -0,0 +1,33 @@
+import LoginButton from "./LoginButton";
+import theme from "tools/theme";
+type LoginProps = {
+  redirect: string;
+};
+
+const Login = (props: LoginProps) => {
+  return (
+    <div>
+      <div
+        style={{
+          color: theme.purple,
+          ...theme.font14,
+          marginBottom: 12,
+        }}
+      >
+        로그인이 필요한 서비스입니다
+      </div>
+      <LoginButton
+        type="purple"
+        padding="14px 0 13px"
+        radius={12}
+        font={theme.font16_bold}
+        isLogin={false}
+        redirect={props.redirect}
+      >
+        로그인
+      </LoginButton>
+    </div>
+  );
+};
+
+export default Login;
diff --git a/src/components/LoginButton.tsx b/src/components/LoginButton.tsx
new file mode 100644
index 000000000..bf0ba1cf9
--- /dev/null
+++ b/src/components/LoginButton.tsx
@@ -0,0 +1,26 @@
+import Button from "components/Button";
+import { backServer } from "loadenv";
+import { ButtonProps } from "components/Button";
+
+type LoginButtonProps = ButtonProps & { isLogin?: boolean; redirect: string };
+
+const LoginButton = (props: LoginButtonProps) => {
+  const { isLogin, redirect, ...buttonProps } = props;
+
+  console.log(redirect);
+
+  return isLogin ? (
+    <Button {...buttonProps}>{props.children}</Button>
+  ) : (
+    <a
+      href={`${backServer}/auth/sparcssso?redirect=${encodeURIComponent(
+        redirect
+      )}`}
+      style={{ textDecoration: "none" }}
+    >
+      <Button {...buttonProps}>{props.children}</Button>
+    </a>
+  );
+};
+
+export default LoginButton;
diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx
index f91bf26e2..545b3aa1b 100644
--- a/src/components/Skeleton/index.tsx
+++ b/src/components/Skeleton/index.tsx
@@ -1,5 +1,6 @@
 import { ReactNode, useEffect, useState } from "react";
-import { useLocation, Redirect } from "react-router-dom";
+// import { useLocation, Redirect } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 
 import { useAxios } from "hooks/useTaxiAPI";
 
@@ -57,8 +58,9 @@ const Skeleton = ({ children }: SkeletonProps) => {
   const setNotificationOptions = useSetRecoilState(notificationOptionsAtom);
 
   const location = useLocation();
-  const { pathname, search } = location;
-  const currentPath = pathname + search;
+  // const { pathname, search } = location;
+  const { pathname } = location;
+  // const currentPath = pathname + search;
 
   useEffect(() => {
     // userId 초기화
@@ -118,18 +120,18 @@ const Skeleton = ({ children }: SkeletonProps) => {
     );
   }
   // when pathname is /, /home, /search, dont redirect
-  if (
-    !userId &&
-    !pathname.startsWith("/login") &&
-    pathname !== "/" &&
-    !pathname.startsWith("/search") &&
-    !pathname.startsWith("/home") &&
-    !pathname.startsWith("/logout")
-  ) {
-    return (
-      <Redirect to={`/login?redirect=${encodeURIComponent(currentPath)}`} />
-    );
-  }
+  // if (
+  //   !userId &&
+  //   !pathname.startsWith("/login") &&
+  //   pathname !== "/" &&
+  //   !pathname.startsWith("/search") &&
+  //   !pathname.startsWith("/home") &&
+  //   !pathname.startsWith("/logout")
+  // ) {
+  //   return (
+  //     <Redirect to={`/login?redirect=${encodeURIComponent(currentPath)}`} />
+  //   );
+  // }
   if (pathname.startsWith("/login") || pathname.startsWith("/logout")) {
     return <Container>{children}</Container>;
   }
diff --git a/src/pages/Addroom/index.tsx b/src/pages/Addroom/index.tsx
index 16f171d71..269479063 100644
--- a/src/pages/Addroom/index.tsx
+++ b/src/pages/Addroom/index.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { useCookies } from "react-cookie";
-import { useHistory } from "react-router-dom";
+import { useHistory, useLocation } from "react-router-dom";
 
 import { useAxios } from "hooks/useTaxiAPI";
 
@@ -20,12 +20,15 @@ import FullParticipation from "./FullParticipation";
 
 import alertAtom from "atoms/alert";
 import myRoomAtom from "atoms/myRoom";
-import { useRecoilState, useSetRecoilState } from "recoil";
+import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 
 import { date2str, getToday, getToday10 } from "tools/moment";
 import theme from "tools/theme";
 
 import randomRoomName from "static/randomRoomName";
+import loginInfoDetailAtom from "atoms/loginInfoDetail";
+import LoginButton from "components/LoginButton";
+import Login from "components/Login";
 
 const AddRoom = () => {
   const axios = useAxios();
@@ -50,6 +53,8 @@ const AddRoom = () => {
   const [calculatedTime, setCalculatedTime] = useState<Date | null>(null);
   const setAlert = useSetRecoilState(alertAtom);
   const [myRoom, setMyRoom] = useRecoilState(myRoomAtom);
+  const isLogin = !!useRecoilValue(loginInfoDetailAtom)?.id;
+  const location = useLocation();
 
   useEffect(() => {
     const expirationDate = new Date();
@@ -118,45 +123,52 @@ const AddRoom = () => {
       onCall.current = false;
     }
   };
+  console.log(isLogin);
 
   return (myRoom?.ongoing.length ?? 0) < MAX_PARTICIPATION ? (
     <div>
       <Title icon="add" header marginAuto>
         방 개설하기
       </Title>
-      <RLayout.R1>
-        <OptionPlace value={valuePlace} handler={setPlace} />
-        <OptionDate value={valueDate} handler={setDate} />
-        <OptionName
-          value={valueName}
-          handler={setName}
-          placeholder={randomRoomName}
-        />
-        <OptionTime value={valueTime} handler={setTime} page="add" />
-        <OptionMaxPeople value={valueMaxPeople} handler={setMaxPeople} />
-        <Button
-          type="purple"
-          disabled={validatedMsg ? true : false}
-          padding="14px 0 13px"
-          radius={12}
-          font={theme.font16_bold}
-          onClick={onClickAdd}
-          className="scroll-to-button"
-        >
-          {validatedMsg
-            ? validatedMsg
-            : `${date2str(
-                new Date(
-                  valueDate[0]!,
-                  valueDate[1]! - 1,
-                  valueDate[2]!,
-                  valueTime[0],
-                  valueTime[1]
-                ),
-                "MMM Do [(]dd[)] a h[시] m[분]"
-              )} 방 개설하기`}
-        </Button>
-      </RLayout.R1>
+      {isLogin ? (
+        <RLayout.R1>
+          <OptionPlace value={valuePlace} handler={setPlace} />
+          <OptionDate value={valueDate} handler={setDate} />
+          <OptionName
+            value={valueName}
+            handler={setName}
+            placeholder={randomRoomName}
+          />
+          <OptionTime value={valueTime} handler={setTime} page="add" />
+          <OptionMaxPeople value={valueMaxPeople} handler={setMaxPeople} />
+          <Button
+            type="purple"
+            disabled={validatedMsg ? true : false}
+            padding="14px 0 13px"
+            radius={12}
+            font={theme.font16_bold}
+            onClick={onClickAdd}
+            className="scroll-to-button"
+          >
+            {validatedMsg
+              ? validatedMsg
+              : `${date2str(
+                  new Date(
+                    valueDate[0]!,
+                    valueDate[1]! - 1,
+                    valueDate[2]!,
+                    valueTime[0],
+                    valueTime[1]
+                  ),
+                  "MMM Do [(]dd[)] a h[시] m[분]"
+                )} 방 개설하기`}
+          </Button>
+        </RLayout.R1>
+      ) : (
+        <RLayout.R1>
+          <Login redirect={location.pathname} />
+        </RLayout.R1>
+      )}
     </div>
   ) : (
     <FullParticipation />
diff --git a/src/pages/Home/InfoSection.tsx b/src/pages/Home/InfoSection.tsx
index 6e08d4b62..776af373f 100644
--- a/src/pages/Home/InfoSection.tsx
+++ b/src/pages/Home/InfoSection.tsx
@@ -16,6 +16,7 @@ import BackgroundImage from "static/assets/BackgroundImage.jpg";
 import BackgroundImageDesktop from "static/assets/BackgroundImageDesktop.webp";
 import BackgroundImageMobile from "static/assets/BackgroundImageMobile.webp";
 import { ReactComponent as TaxiLogoWhite } from "static/assets/TaxiLogoWhite.svg";
+import LoginButton from "components/LoginButton";
 
 const InfoSection = () => {
   const styleContainer: CSS = {
@@ -43,6 +44,7 @@ const InfoSection = () => {
   };
 
   const loginInfo = useRecoilValue(loginInfoDetailAtom);
+  const isLogin = !!loginInfo?.id;
   const myRoom = useRecoilValue(myRoomAtom);
 
   const { message, room } = useMemo(() => {
@@ -112,14 +114,16 @@ const InfoSection = () => {
               style={{ marginTop: "32px", display: "flex", columnGap: "10px" }}
             >
               <Link to="/addroom" style={{ textDecoration: "none" }}>
-                <Button
+                <LoginButton
                   type="purple"
                   padding="12px 20px 11px"
                   radius={8}
                   font={theme.font16_bold}
+                  isLogin={isLogin}
+                  redirect="/"
                 >
-                  방 개설하기
-                </Button>
+                  {isLogin ? "방 개설하기" : "로그인하기"}
+                </LoginButton>
               </Link>
               <Link to="/search" style={{ textDecoration: "none" }}>
                 <Button
diff --git a/src/pages/Home/RoomList.tsx b/src/pages/Home/RoomList.tsx
index 73db0886a..72a53a807 100644
--- a/src/pages/Home/RoomList.tsx
+++ b/src/pages/Home/RoomList.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import usePageFromSearchParams from "hooks/usePageFromSearchParams";
 
@@ -6,23 +6,42 @@ import Empty from "components/Empty";
 import Pagination, { PAGE_MAX_ITEMS } from "components/Pagination";
 import Room from "components/Room";
 import RoomSelectionModal from "pages/Search/RoomSelectionModal";
+import { useRecoilValue } from "recoil";
+import loginInfoDetailAtom from "atoms/loginInfoDetail";
+import { useHistory } from "react-router-dom";
 
 type RoomListProps = {
   rooms: Nullable<Array<any>>;
+  roomId: Nullable<any>;
 };
 
 const RoomList = (props: RoomListProps) => {
+  console.log(props.roomId);
+
   const [selectedRoom, setSelectedRoom] = useState(null);
   const totalPages = Math.ceil((props.rooms ?? []).length / PAGE_MAX_ITEMS);
   const currentPage = usePageFromSearchParams(totalPages);
+  const isLogin = !!useRecoilValue(loginInfoDetailAtom)?.id;
+  const history = useHistory();
+
+  useEffect(() => {
+    setSelectedRoom(
+      props.roomId && props.rooms?.find((room) => room._id === props.roomId)
+    );
+  }, [props.roomId, props.rooms]);
+
   return (
     <>
       <RoomSelectionModal
         isOpen={!!selectedRoom}
         onClose={() => {
+          if (props.roomId) {
+            history.push("/");
+          }
           setSelectedRoom(null);
         }}
         roomInfo={selectedRoom}
+        isLogin={isLogin}
       />
       {props.rooms?.length ? (
         <>
diff --git a/src/pages/Home/RoomSection.tsx b/src/pages/Home/RoomSection.tsx
index 2afea9af3..9011017eb 100644
--- a/src/pages/Home/RoomSection.tsx
+++ b/src/pages/Home/RoomSection.tsx
@@ -11,7 +11,12 @@ import SelectDate from "./SelectDate";
 
 import moment, { getToday } from "tools/moment";
 
-const RoomSection = () => {
+type RoomSectionProps = {
+  roomId: Nullable<any>;
+};
+
+const RoomSection = (props: RoomSectionProps) => {
+  console.log(props.roomId);
   const today = getToday().subtract(1, "day");
   const [allRoomsToken, fetchAllRooms] = useDateToken();
   const [, allRooms] = useQuery.get("/rooms/search", {}, [allRoomsToken]);
@@ -52,7 +57,7 @@ const RoomSection = () => {
         selectedDate={selectedDate}
         onClick={([year, month, date]) => setSelectedDate([year, month, date])}
       />
-      <RoomList rooms={rooms} />
+      <RoomList {...props} rooms={rooms} />
     </RLayout.R1>
   );
 };
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index f290fc3fc..d0e8d54ba 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,11 +1,14 @@
+import { useParams } from "react-router-dom";
 import InfoSection from "./InfoSection";
 import RoomSection from "./RoomSection";
 
 const Home = () => {
+  const { roomId } = useParams<{ roomId: string }>();
+  console.log(roomId);
   return (
     <>
       <InfoSection />
-      <RoomSection />
+      <RoomSection roomId={roomId || null} />
     </>
   );
 };
diff --git a/src/pages/Mypage/index.tsx b/src/pages/Mypage/index.tsx
index 1102b2972..f7ebadec7 100644
--- a/src/pages/Mypage/index.tsx
+++ b/src/pages/Mypage/index.tsx
@@ -128,7 +128,7 @@ const Mypage = () => {
         </div>
         <div css={infoType} className="selectable">
           {t("student_id")}
-          <div css={infoContent}>{userInfoDetail?.subinfo.kaist}</div>
+          <div css={infoContent}>{userInfoDetail?.subinfo?.kaist}</div>
         </div>
         <div css={infoType} className="selectable">
           {t("email")}
diff --git a/src/pages/Myroom/index.jsx b/src/pages/Myroom/index.jsx
index 23ae5cc5c..1bb8b18b2 100644
--- a/src/pages/Myroom/index.jsx
+++ b/src/pages/Myroom/index.jsx
@@ -11,6 +11,10 @@ import R2Myroom from "./R2Myroom";
 
 import myRoomAtom from "atoms/myRoom";
 import { useRecoilValue } from "recoil";
+import loginInfoDetailAtom from "atoms/loginInfoDetail";
+import RLayout from "components/RLayout";
+import Login from "components/Login";
+import Title from "components/Title";
 
 export const MAX_PARTICIPATION = 5;
 
@@ -21,6 +25,7 @@ const Myroom = () => {
   const myRoom = useRecoilValue(myRoomAtom);
   const totalPages = Math.ceil((myRoom?.done?.length ?? 0) / PAGE_MAX_ITEMS);
   const currentPage = usePageFromSearchParams(totalPages);
+  const isLogin = !!useRecoilValue(loginInfoDetailAtom)?.id;
 
   useEffect(() => {
     if (reactiveState == 3 && roomId) {
@@ -28,7 +33,16 @@ const Myroom = () => {
     }
   }, [reactiveState, roomId, history]);
 
-  return reactiveState === 3 ? (
+  return !isLogin ? (
+    <div>
+      <Title icon="add" header marginAuto>
+        참여 중인 방
+      </Title>
+      <RLayout.R1>
+        <Login redirect={location.pathname} />
+      </RLayout.R1>
+    </div>
+  ) : reactiveState === 3 ? (
     <R1Myroom
       roomId={roomId}
       ongoing={myRoom?.ongoing}
diff --git a/src/pages/Search/RoomSelectionModal.jsx b/src/pages/Search/RoomSelectionModal.jsx
index 2502b8e92..3b0912b05 100644
--- a/src/pages/Search/RoomSelectionModal.jsx
+++ b/src/pages/Search/RoomSelectionModal.jsx
@@ -22,6 +22,7 @@ import { getLocationName } from "tools/trans";
 
 import ArrowRightAltRoundedIcon from "@mui/icons-material/ArrowRightAltRounded";
 import Tooltip from "@mui/material/Tooltip";
+import LoginButton from "components/LoginButton";
 
 const PlaceSection = (props) => {
   const style = {
@@ -249,22 +250,26 @@ const RoomSelectionModal = (props) => {
         leaveTouchDelay={2000}
       >
         <div>
-          <Button
+          <LoginButton
             type="purple"
             disabled={isRoomFull || disableJoinBtn || fullParticipation}
             padding="10px 0 9px"
             radius={8}
             font={theme.font14_bold}
             onClick={requestJoin}
+            isLogin={props.isLogin}
+            redirect={`/home/${roomInfo?._id}`}
           >
-            {disableJoinBtn
+            {!props.isLogin
+              ? "로그인해서 참여하기"
+              : disableJoinBtn
               ? "이미 참여 중입니다"
               : isRoomFull
               ? "인원이 0명인 방은 참여할 수 없습니다"
               : fullParticipation
               ? "현재 5개의 방에 참여 중입니다"
               : "참여 신청"}
-          </Button>
+          </LoginButton>
         </div>
       </Tooltip>
     </Modal>
@@ -274,6 +279,7 @@ RoomSelectionModal.propTypes = {
   isOpen: PropTypes.bool,
   onClose: PropTypes.func,
   roomInfo: PropTypes.object,
+  isLogin: PropTypes.bool,
 };
 
 export default RoomSelectionModal;

From a36c877a6358dbb80d61c6bef37e81b92fbd3a77 Mon Sep 17 00:00:00 2001
From: 0ev <andyye.jongcye@gmail.com>
Date: Wed, 5 Apr 2023 01:23:23 +0900
Subject: [PATCH 03/43] Fix: remove unused components

---
 src/pages/Addroom/index.tsx             | 1 -
 src/pages/Search/RoomSelectionModal.jsx | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/pages/Addroom/index.tsx b/src/pages/Addroom/index.tsx
index 269479063..d71066871 100644
--- a/src/pages/Addroom/index.tsx
+++ b/src/pages/Addroom/index.tsx
@@ -27,7 +27,6 @@ import theme from "tools/theme";
 
 import randomRoomName from "static/randomRoomName";
 import loginInfoDetailAtom from "atoms/loginInfoDetail";
-import LoginButton from "components/LoginButton";
 import Login from "components/Login";
 
 const AddRoom = () => {
diff --git a/src/pages/Search/RoomSelectionModal.jsx b/src/pages/Search/RoomSelectionModal.jsx
index 3b0912b05..76fcba780 100644
--- a/src/pages/Search/RoomSelectionModal.jsx
+++ b/src/pages/Search/RoomSelectionModal.jsx
@@ -5,7 +5,6 @@ import { useHistory } from "react-router-dom";
 
 import { useAxios } from "hooks/useTaxiAPI";
 
-import Button from "components/Button";
 import DottedLine from "components/DottedLine";
 import MiniCircle from "components/MiniCircle";
 import Modal from "components/Modal";

From 6625fb4cde8712f0192969affd9c22a3a9a28d3d Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Wed, 5 Apr 2023 01:31:49 +0900
Subject: [PATCH 04/43] Refactor: Skeleton

---
 src/components/Skeleton/index.tsx | 26 ++++----------------------
 1 file changed, 4 insertions(+), 22 deletions(-)

diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx
index 545b3aa1b..1d2f58a3d 100644
--- a/src/components/Skeleton/index.tsx
+++ b/src/components/Skeleton/index.tsx
@@ -18,6 +18,7 @@ import myRoomAtom from "atoms/myRoom";
 import notificationOptionsAtom from "atoms/notificationOptions";
 import taxiLocationAtom from "atoms/taxiLocation";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
+
 type ContainerProps = {
   children: ReactNode;
 };
@@ -51,16 +52,15 @@ const Skeleton = ({ children }: SkeletonProps) => {
     useRecoilState(loginInfoDetailAtom);
   const deviceToken = useRecoilValue(deviceTokenAtom);
   const error = useRecoilValue(errorAtom);
-  const { id: userId } = loginInfoDetail || {};
+  const { id: userId, agreeOnTermsOfService: isAgreeOnTermsOfService } =
+    loginInfoDetail || {};
 
   const setTaxiLocation = useSetRecoilState(taxiLocationAtom);
   const setMyRoom = useSetRecoilState(myRoomAtom);
   const setNotificationOptions = useSetRecoilState(notificationOptionsAtom);
 
   const location = useLocation();
-  // const { pathname, search } = location;
   const { pathname } = location;
-  // const currentPath = pathname + search;
 
   useEffect(() => {
     // userId 초기화
@@ -119,22 +119,6 @@ const Skeleton = ({ children }: SkeletonProps) => {
       </Container>
     );
   }
-  // when pathname is /, /home, /search, dont redirect
-  // if (
-  //   !userId &&
-  //   !pathname.startsWith("/login") &&
-  //   pathname !== "/" &&
-  //   !pathname.startsWith("/search") &&
-  //   !pathname.startsWith("/home") &&
-  //   !pathname.startsWith("/logout")
-  // ) {
-  //   return (
-  //     <Redirect to={`/login?redirect=${encodeURIComponent(currentPath)}`} />
-  //   );
-  // }
-  if (pathname.startsWith("/login") || pathname.startsWith("/logout")) {
-    return <Container>{children}</Container>;
-  }
   if (pathname.startsWith("/chatting")) {
     return (
       <Container>
@@ -149,9 +133,7 @@ const Skeleton = ({ children }: SkeletonProps) => {
       <HeaderBar />
       {children}
       <Footer />
-      <PopupPolicy
-        isOpen={!loginInfoDetail?.agreeOnTermsOfService && !!userId}
-      />
+      <PopupPolicy isOpen={!!userId && !isAgreeOnTermsOfService} />
     </Container>
   );
 };

From ca2733e3ef0d17b07be6d859b9e032a7323313ef Mon Sep 17 00:00:00 2001
From: 0ev <andyye.jongcye@gmail.com>
Date: Wed, 5 Apr 2023 01:42:50 +0900
Subject: [PATCH 05/43] Refactor: SuggestLogin

---
 .../{Login.tsx => SuggestLogin.tsx}           | 15 ++--
 src/pages/Addroom/index.tsx                   | 82 +++++++++----------
 src/pages/Myroom/index.jsx                    |  4 +-
 3 files changed, 51 insertions(+), 50 deletions(-)
 rename src/components/{Login.tsx => SuggestLogin.tsx} (65%)

diff --git a/src/components/Login.tsx b/src/components/SuggestLogin.tsx
similarity index 65%
rename from src/components/Login.tsx
rename to src/components/SuggestLogin.tsx
index 15e06332a..1e14a5acf 100644
--- a/src/components/Login.tsx
+++ b/src/components/SuggestLogin.tsx
@@ -1,10 +1,13 @@
 import LoginButton from "./LoginButton";
 import theme from "tools/theme";
-type LoginProps = {
-  redirect: string;
-};
+import { useLocation } from "react-router-dom";
+
+type LoginProps = {};
+
+const SuggestLogin = ({}: LoginProps) => {
+  const { pathname, search } = useLocation();
+  const currentPath = pathname + search;
 
-const Login = (props: LoginProps) => {
   return (
     <div>
       <div
@@ -22,7 +25,7 @@ const Login = (props: LoginProps) => {
         radius={12}
         font={theme.font16_bold}
         isLogin={false}
-        redirect={props.redirect}
+        redirect={currentPath}
       >
         로그인
       </LoginButton>
@@ -30,4 +33,4 @@ const Login = (props: LoginProps) => {
   );
 };
 
-export default Login;
+export default SuggestLogin;
diff --git a/src/pages/Addroom/index.tsx b/src/pages/Addroom/index.tsx
index d71066871..a89fae410 100644
--- a/src/pages/Addroom/index.tsx
+++ b/src/pages/Addroom/index.tsx
@@ -27,7 +27,7 @@ import theme from "tools/theme";
 
 import randomRoomName from "static/randomRoomName";
 import loginInfoDetailAtom from "atoms/loginInfoDetail";
-import Login from "components/Login";
+import SuggestLogin from "components/SuggestLogin";
 
 const AddRoom = () => {
   const axios = useAxios();
@@ -53,7 +53,6 @@ const AddRoom = () => {
   const setAlert = useSetRecoilState(alertAtom);
   const [myRoom, setMyRoom] = useRecoilState(myRoomAtom);
   const isLogin = !!useRecoilValue(loginInfoDetailAtom)?.id;
-  const location = useLocation();
 
   useEffect(() => {
     const expirationDate = new Date();
@@ -122,52 +121,51 @@ const AddRoom = () => {
       onCall.current = false;
     }
   };
-  console.log(isLogin);
 
   return (myRoom?.ongoing.length ?? 0) < MAX_PARTICIPATION ? (
     <div>
       <Title icon="add" header marginAuto>
         방 개설하기
       </Title>
-      {isLogin ? (
-        <RLayout.R1>
-          <OptionPlace value={valuePlace} handler={setPlace} />
-          <OptionDate value={valueDate} handler={setDate} />
-          <OptionName
-            value={valueName}
-            handler={setName}
-            placeholder={randomRoomName}
-          />
-          <OptionTime value={valueTime} handler={setTime} page="add" />
-          <OptionMaxPeople value={valueMaxPeople} handler={setMaxPeople} />
-          <Button
-            type="purple"
-            disabled={validatedMsg ? true : false}
-            padding="14px 0 13px"
-            radius={12}
-            font={theme.font16_bold}
-            onClick={onClickAdd}
-            className="scroll-to-button"
-          >
-            {validatedMsg
-              ? validatedMsg
-              : `${date2str(
-                  new Date(
-                    valueDate[0]!,
-                    valueDate[1]! - 1,
-                    valueDate[2]!,
-                    valueTime[0],
-                    valueTime[1]
-                  ),
-                  "MMM Do [(]dd[)] a h[시] m[분]"
-                )} 방 개설하기`}
-          </Button>
-        </RLayout.R1>
-      ) : (
-        <RLayout.R1>
-          <Login redirect={location.pathname} />
-        </RLayout.R1>
-      )}
+      <RLayout.R1>
+        {isLogin ? (
+          <>
+            <OptionPlace value={valuePlace} handler={setPlace} />
+            <OptionDate value={valueDate} handler={setDate} />
+            <OptionName
+              value={valueName}
+              handler={setName}
+              placeholder={randomRoomName}
+            />
+            <OptionTime value={valueTime} handler={setTime} page="add" />
+            <OptionMaxPeople value={valueMaxPeople} handler={setMaxPeople} />
+            <Button
+              type="purple"
+              disabled={validatedMsg ? true : false}
+              padding="14px 0 13px"
+              radius={12}
+              font={theme.font16_bold}
+              onClick={onClickAdd}
+              className="scroll-to-button"
+            >
+              {validatedMsg
+                ? validatedMsg
+                : `${date2str(
+                    new Date(
+                      valueDate[0]!,
+                      valueDate[1]! - 1,
+                      valueDate[2]!,
+                      valueTime[0],
+                      valueTime[1]
+                    ),
+                    "MMM Do [(]dd[)] a h[시] m[분]"
+                  )} 방 개설하기`}
+            </Button>
+          </>
+        ) : (
+          <SuggestLogin />
+        )}
+      </RLayout.R1>
     </div>
   ) : (
     <FullParticipation />
diff --git a/src/pages/Myroom/index.jsx b/src/pages/Myroom/index.jsx
index 1bb8b18b2..2db3cb41b 100644
--- a/src/pages/Myroom/index.jsx
+++ b/src/pages/Myroom/index.jsx
@@ -13,7 +13,7 @@ import myRoomAtom from "atoms/myRoom";
 import { useRecoilValue } from "recoil";
 import loginInfoDetailAtom from "atoms/loginInfoDetail";
 import RLayout from "components/RLayout";
-import Login from "components/Login";
+import SuggestLogin from "components/SuggestLogin";
 import Title from "components/Title";
 
 export const MAX_PARTICIPATION = 5;
@@ -39,7 +39,7 @@ const Myroom = () => {
         참여 중인 방
       </Title>
       <RLayout.R1>
-        <Login redirect={location.pathname} />
+        <SuggestLogin />
       </RLayout.R1>
     </div>
   ) : reactiveState === 3 ? (

From c1b222aa390354f84627f25f94b47827d1eeb3e3 Mon Sep 17 00:00:00 2001
From: 0ev <andyye.jongcye@gmail.com>
Date: Wed, 5 Apr 2023 01:44:34 +0900
Subject: [PATCH 06/43] Fix: compile and ts errors

---
 src/components/SuggestLogin.tsx | 4 +---
 src/pages/Addroom/index.tsx     | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/SuggestLogin.tsx b/src/components/SuggestLogin.tsx
index 1e14a5acf..c0be3b705 100644
--- a/src/components/SuggestLogin.tsx
+++ b/src/components/SuggestLogin.tsx
@@ -2,9 +2,7 @@ import LoginButton from "./LoginButton";
 import theme from "tools/theme";
 import { useLocation } from "react-router-dom";
 
-type LoginProps = {};
-
-const SuggestLogin = ({}: LoginProps) => {
+const SuggestLogin = () => {
   const { pathname, search } = useLocation();
   const currentPath = pathname + search;
 
diff --git a/src/pages/Addroom/index.tsx b/src/pages/Addroom/index.tsx
index a89fae410..a649055d6 100644
--- a/src/pages/Addroom/index.tsx
+++ b/src/pages/Addroom/index.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { useCookies } from "react-cookie";
-import { useHistory, useLocation } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 
 import { useAxios } from "hooks/useTaxiAPI";
 

From 1c0a218aa4b14f23ea8f8a57a0aad4d3e95d3642 Mon Sep 17 00:00:00 2001
From: 0ev <andyye.jongcye@gmail.com>
Date: Wed, 5 Apr 2023 02:23:01 +0900
Subject: [PATCH 07/43] Refactor: move home roomselection state to url

---
 src/App.js                              |  3 ---
 src/components/LoginButton.tsx          |  2 --
 src/pages/Home/RoomList.tsx             | 31 +------------------------
 src/pages/Home/RoomSection.tsx          | 22 +++++++++++++-----
 src/pages/Home/index.tsx                |  4 ++--
 src/pages/Search/RoomSelectionModal.jsx |  6 ++---
 src/pages/Search/SideResult.jsx         |  4 ++--
 7 files changed, 24 insertions(+), 48 deletions(-)

diff --git a/src/App.js b/src/App.js
index 95aa523d8..417507cda 100644
--- a/src/App.js
+++ b/src/App.js
@@ -14,7 +14,6 @@ import Addroom from "pages/Addroom";
 import WrapChat from "pages/Chatting/WrapChat";
 import PageNotFound from "pages/Error/PageNotFound";
 import Home from "pages/Home";
-// import Login from "pages/Login";
 import LoginFail from "pages/Login/LoginFail";
 import Logout from "pages/Login/Logout";
 import Mypage from "pages/Mypage";
@@ -41,8 +40,6 @@ const App = () => {
           <CSSVariablesProvider />
           <Skeleton>
             <Switch>
-              {/* <Route exact path="/login" component={Login} /> */}
-              {/* <Route exact path="/login/privacyPolicy" component={Login} /> */}
               <Route exact path="/login/fail" component={LoginFail} />
               <Route exact path="/logout" component={Logout} />
               <Route exact path="/" component={Home} />
diff --git a/src/components/LoginButton.tsx b/src/components/LoginButton.tsx
index bf0ba1cf9..f18496bee 100644
--- a/src/components/LoginButton.tsx
+++ b/src/components/LoginButton.tsx
@@ -7,8 +7,6 @@ type LoginButtonProps = ButtonProps & { isLogin?: boolean; redirect: string };
 const LoginButton = (props: LoginButtonProps) => {
   const { isLogin, redirect, ...buttonProps } = props;
 
-  console.log(redirect);
-
   return isLogin ? (
     <Button {...buttonProps}>{props.children}</Button>
   ) : (
diff --git a/src/pages/Home/RoomList.tsx b/src/pages/Home/RoomList.tsx
index 72a53a807..571fc2d46 100644
--- a/src/pages/Home/RoomList.tsx
+++ b/src/pages/Home/RoomList.tsx
@@ -1,48 +1,21 @@
-import { useEffect, useState } from "react";
-
 import usePageFromSearchParams from "hooks/usePageFromSearchParams";
 
 import Empty from "components/Empty";
 import Pagination, { PAGE_MAX_ITEMS } from "components/Pagination";
 import Room from "components/Room";
-import RoomSelectionModal from "pages/Search/RoomSelectionModal";
-import { useRecoilValue } from "recoil";
-import loginInfoDetailAtom from "atoms/loginInfoDetail";
 import { useHistory } from "react-router-dom";
 
 type RoomListProps = {
   rooms: Nullable<Array<any>>;
-  roomId: Nullable<any>;
 };
 
 const RoomList = (props: RoomListProps) => {
-  console.log(props.roomId);
-
-  const [selectedRoom, setSelectedRoom] = useState(null);
   const totalPages = Math.ceil((props.rooms ?? []).length / PAGE_MAX_ITEMS);
   const currentPage = usePageFromSearchParams(totalPages);
-  const isLogin = !!useRecoilValue(loginInfoDetailAtom)?.id;
   const history = useHistory();
 
-  useEffect(() => {
-    setSelectedRoom(
-      props.roomId && props.rooms?.find((room) => room._id === props.roomId)
-    );
-  }, [props.roomId, props.rooms]);
-
   return (
     <>
-      <RoomSelectionModal
-        isOpen={!!selectedRoom}
-        onClose={() => {
-          if (props.roomId) {
-            history.push("/");
-          }
-          setSelectedRoom(null);
-        }}
-        roomInfo={selectedRoom}
-        isLogin={isLogin}
-      />
       {props.rooms?.length ? (
         <>
           {props.rooms
@@ -55,9 +28,7 @@ const RoomList = (props: RoomListProps) => {
                 key={room._id}
                 data={room}
                 marginBottom="15px"
-                onClick={() => {
-                  setSelectedRoom(room);
-                }}
+                onClick={() => history.replace(`/home/${room._id}`)}
               />
             ))}
           {props.rooms.length > PAGE_MAX_ITEMS && (
diff --git a/src/pages/Home/RoomSection.tsx b/src/pages/Home/RoomSection.tsx
index 9011017eb..54a0252c3 100644
--- a/src/pages/Home/RoomSection.tsx
+++ b/src/pages/Home/RoomSection.tsx
@@ -1,8 +1,8 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import useDateToken from "hooks/useDateToken";
 import { useQuery } from "hooks/useTaxiAPI";
-
+import { useHistory } from "react-router-dom";
 import RLayout from "components/RLayout";
 import Title from "components/Title";
 
@@ -10,13 +10,14 @@ import RoomList from "./RoomList";
 import SelectDate from "./SelectDate";
 
 import moment, { getToday } from "tools/moment";
+import RoomSelectionModal from "pages/Search/RoomSelectionModal";
 
 type RoomSectionProps = {
-  roomId: Nullable<any>;
+  roomId: Nullable<string>;
 };
 
-const RoomSection = (props: RoomSectionProps) => {
-  console.log(props.roomId);
+const RoomSection = ({ roomId }: RoomSectionProps) => {
+  const history = useHistory();
   const today = getToday().subtract(1, "day");
   const [allRoomsToken, fetchAllRooms] = useDateToken();
   const [, allRooms] = useQuery.get("/rooms/search", {}, [allRoomsToken]);
@@ -26,6 +27,10 @@ const RoomSection = (props: RoomSectionProps) => {
     today.month(),
     today.date(),
   ]);
+  const roomInfo = useMemo(
+    () => allRooms?.find((room: any) => room._id == roomId),
+    [allRooms, roomId]
+  );
 
   useEffect(() => {
     // 5분 간격으로 allRoms(요일 별 출발하는 방)을 갱신합니다.
@@ -50,6 +55,11 @@ const RoomSection = (props: RoomSectionProps) => {
 
   return (
     <RLayout.R1>
+      <RoomSelectionModal
+        isOpen={!!roomInfo}
+        onClose={() => history.replace("/home")}
+        roomInfo={roomInfo}
+      />
       <div style={{ margin: "20px 0" }}>
         <Title icon="taxi">요일별 출발하는 방</Title>
       </div>
@@ -57,7 +67,7 @@ const RoomSection = (props: RoomSectionProps) => {
         selectedDate={selectedDate}
         onClick={([year, month, date]) => setSelectedDate([year, month, date])}
       />
-      <RoomList {...props} rooms={rooms} />
+      <RoomList rooms={rooms} />
     </RLayout.R1>
   );
 };
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index d0e8d54ba..d96b82f70 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -4,11 +4,11 @@ import RoomSection from "./RoomSection";
 
 const Home = () => {
   const { roomId } = useParams<{ roomId: string }>();
-  console.log(roomId);
+
   return (
     <>
       <InfoSection />
-      <RoomSection roomId={roomId || null} />
+      <RoomSection roomId={roomId} />
     </>
   );
 };
diff --git a/src/pages/Search/RoomSelectionModal.jsx b/src/pages/Search/RoomSelectionModal.jsx
index 76fcba780..005880db9 100644
--- a/src/pages/Search/RoomSelectionModal.jsx
+++ b/src/pages/Search/RoomSelectionModal.jsx
@@ -122,6 +122,7 @@ const RoomSelectionModal = (props) => {
     ? roomInfo.maxPartLength - roomInfo.part.length === 0
     : false;
   const fullParticipation = myRoom?.ongoing.length >= MAX_PARTICIPATION;
+  const isLogin = !!useRecoilValue(loginInfoDetailAtom)?.id;
 
   useEffect(() => {
     if (props.isOpen) setRoomInfo(props.roomInfo);
@@ -256,10 +257,10 @@ const RoomSelectionModal = (props) => {
             radius={8}
             font={theme.font14_bold}
             onClick={requestJoin}
-            isLogin={props.isLogin}
+            isLogin={!!isLogin}
             redirect={`/home/${roomInfo?._id}`}
           >
-            {!props.isLogin
+            {!isLogin
               ? "로그인해서 참여하기"
               : disableJoinBtn
               ? "이미 참여 중입니다"
@@ -278,7 +279,6 @@ RoomSelectionModal.propTypes = {
   isOpen: PropTypes.bool,
   onClose: PropTypes.func,
   roomInfo: PropTypes.object,
-  isLogin: PropTypes.bool,
 };
 
 export default RoomSelectionModal;
diff --git a/src/pages/Search/SideResult.jsx b/src/pages/Search/SideResult.jsx
index c65531081..ee265d639 100644
--- a/src/pages/Search/SideResult.jsx
+++ b/src/pages/Search/SideResult.jsx
@@ -168,7 +168,7 @@ const SideResult = (props) => {
           onClose={() => {
             setSelectedRoomInfo(null);
           }}
-          roomInfo={selectedRoomInfo}
+          roomId={selectedRoomInfo}
         />
         <WhiteContainer padding="20px 20px 22px">
           <Title icon="search_result">검색 결과</Title>
@@ -215,7 +215,7 @@ const SideResult = (props) => {
           onClose={() => {
             setSelectedRoomInfo(null);
           }}
-          roomInfo={selectedRoomInfo}
+          roomId={selectedRoomInfo}
         />
         <SearchOptions
           isIncludeFullRoom={isIncludeFullRoom}

From f733675482e34d2a94403c5e609c604c278d1526 Mon Sep 17 00:00:00 2001
From: 0ev <andyye.jongcye@gmail.com>
Date: Wed, 5 Apr 2023 02:35:52 +0900
Subject: [PATCH 08/43] Add: suggestLogin to mypage

---
 src/pages/Addroom/index.tsx |   5 +-
 src/pages/Mypage/index.tsx  | 136 ++++++++++++++++++++----------------
 src/pages/Myroom/index.jsx  |   9 +--
 3 files changed, 84 insertions(+), 66 deletions(-)

diff --git a/src/pages/Addroom/index.tsx b/src/pages/Addroom/index.tsx
index a649055d6..e89476ee3 100644
--- a/src/pages/Addroom/index.tsx
+++ b/src/pages/Addroom/index.tsx
@@ -28,6 +28,7 @@ import theme from "tools/theme";
 import randomRoomName from "static/randomRoomName";
 import loginInfoDetailAtom from "atoms/loginInfoDetail";
 import SuggestLogin from "components/SuggestLogin";
+import WhiteContainer from "components/WhiteContainer";
 
 const AddRoom = () => {
   const axios = useAxios();
@@ -163,7 +164,9 @@ const AddRoom = () => {
             </Button>
           </>
         ) : (
-          <SuggestLogin />
+          <WhiteContainer>
+            <SuggestLogin />
+          </WhiteContainer>
         )}
       </RLayout.R1>
     </div>
diff --git a/src/pages/Mypage/index.tsx b/src/pages/Mypage/index.tsx
index f7ebadec7..b021cf1a9 100644
--- a/src/pages/Mypage/index.tsx
+++ b/src/pages/Mypage/index.tsx
@@ -23,17 +23,19 @@ import { useRecoilValue } from "recoil";
 import theme from "tools/theme";
 
 import { nodeEnv } from "loadenv";
+import SuggestLogin from "components/SuggestLogin";
 
 const Mypage = () => {
   const { t, i18n } = useTranslation("mypage");
   const [profImgToken, refreshProfImgToken] = useDateToken();
-  const userInfoDetail = useRecoilValue(loginInfoDetailAtom);
+  const loginInfoDetail = useRecoilValue(loginInfoDetailAtom);
   const notificationOptions = useRecoilValue(notificationOptionsAtom);
   const isOnNotification =
     // notificationOptions?.advertisement ||
     // notificationOptions?.beforeDepart ||
     notificationOptions?.chatting || notificationOptions?.notice;
   // notificationOptions?.keywords?.length;
+  const { id: userId } = loginInfoDetail || {};
 
   const [isOpenProfileModify, setIsOpenProfileModify] = useState(false);
   const [isOpenNotification, setIsOpenNotification] = useState(false);
@@ -106,63 +108,77 @@ const Mypage = () => {
       <Title icon="mypage" header marginAuto>
         {t("my_page")}
       </Title>
-      <WhiteContainer marginAuto padding="16px 24px 24px">
-        <div css={{ display: "flex", alignItems: "center" }}>
-          <div css={styleProfImg}>
-            {userInfoDetail?.profileImgUrl && (
-              <ProfileImg
-                path={userInfoDetail.profileImgUrl}
-                token={profImgToken}
-              />
-            )}
-          </div>
-          <div css={theme.font16_bold} className="selectable">
-            {userInfoDetail?.name}
-          </div>
-        </div>
-        <div css={infoTitle}>
-          <div css={theme.font14_bold}>{t("my_information")}</div>
-          <div css={infoModify} onClick={onClickProfileModify}>
-            {t("revise")}
-          </div>
-        </div>
-        <div css={infoType} className="selectable">
-          {t("student_id")}
-          <div css={infoContent}>{userInfoDetail?.subinfo?.kaist}</div>
-        </div>
-        <div css={infoType} className="selectable">
-          {t("email")}
-          <div css={infoContent}>{userInfoDetail?.email}</div>
-        </div>
-        <div css={infoType} className="selectable">
-          {t("nickname")}
-          <div css={infoContent}>{userInfoDetail?.nickname}</div>
-        </div>
-        <div css={infoType} className="selectable">
-          {t("account")}
-          <div css={infoContent}>{userInfoDetail?.account}</div>
-        </div>
-      </WhiteContainer>
+      {userId ? (
+        <>
+          <WhiteContainer marginAuto padding="16px 24px 24px">
+            <div css={{ display: "flex", alignItems: "center" }}>
+              <div css={styleProfImg}>
+                {loginInfoDetail?.profileImgUrl && (
+                  <ProfileImg
+                    path={loginInfoDetail.profileImgUrl}
+                    token={profImgToken}
+                  />
+                )}
+              </div>
+              <div css={theme.font16_bold} className="selectable">
+                {loginInfoDetail?.name}
+              </div>
+            </div>
+            <div css={infoTitle}>
+              <div css={theme.font14_bold}>{t("my_information")}</div>
+              <div css={infoModify} onClick={onClickProfileModify}>
+                {t("revise")}
+              </div>
+            </div>
+            <div css={infoType} className="selectable">
+              {t("student_id")}
+              <div css={infoContent}>{loginInfoDetail?.subinfo?.kaist}</div>
+            </div>
+            <div css={infoType} className="selectable">
+              {t("email")}
+              <div css={infoContent}>{loginInfoDetail?.email}</div>
+            </div>
+            <div css={infoType} className="selectable">
+              {t("nickname")}
+              <div css={infoContent}>{loginInfoDetail?.nickname}</div>
+            </div>
+            <div css={infoType} className="selectable">
+              {t("account")}
+              <div css={infoContent}>{loginInfoDetail?.account}</div>
+            </div>
+          </WhiteContainer>
+          <WhiteContainer marginAuto>
+            <div css={{ display: "grid", rowGap: "16px" }}>
+              {nodeEnv === "development" && (
+                <Menu icon="lang" onClick={onClickTranslation}>
+                  {t("translation")}
+                </Menu>
+              )}
+              <Menu
+                icon={`notification-${isOnNotification ? "on" : "off"}`}
+                onClick={onClickNotification}
+              >
+                {t("notification")}
+              </Menu>
+            </div>
+          </WhiteContainer>
+          <PopupReport
+            isOpen={isOpenReport}
+            onClose={() => setIsOpenReport(false)}
+          />
+        </>
+      ) : (
+        <WhiteContainer marginAuto>
+          <SuggestLogin />
+        </WhiteContainer>
+      )}
       <WhiteContainer marginAuto>
         <div css={{ display: "grid", rowGap: "16px" }}>
-          {nodeEnv === "development" && (
-            <Menu icon="lang" onClick={onClickTranslation}>
-              {t("translation")}
+          {userId && (
+            <Menu icon="report" onClick={onClickReport}>
+              {t("report_record")}
             </Menu>
           )}
-          <Menu
-            icon={`notification-${isOnNotification ? "on" : "off"}`}
-            onClick={onClickNotification}
-          >
-            {t("notification")}
-          </Menu>
-        </div>
-      </WhiteContainer>
-      <WhiteContainer marginAuto>
-        <div css={{ display: "grid", rowGap: "16px" }}>
-          <Menu icon="report" onClick={onClickReport}>
-            {t("report_record")}
-          </Menu>
           <a className="popup-channeltalk">
             <Menu icon="ask">{t("contact")}</Menu>
           </a>
@@ -175,9 +191,11 @@ const Mypage = () => {
           <Menu icon="credit" onClick={onClickMembers}>
             {t("credit")}
           </Menu>
-          <Menu icon="logout" onClick={onClickLogout}>
-            {t("logout")}
-          </Menu>
+          {userId && (
+            <Menu icon="logout" onClick={onClickLogout}>
+              {t("logout")}
+            </Menu>
+          )}
         </div>
       </WhiteContainer>
       <PopupModify
@@ -190,10 +208,6 @@ const Mypage = () => {
         isOpen={isOpenNotification}
         onChangeIsOpen={setIsOpenNotification}
       />
-      <PopupReport
-        isOpen={isOpenReport}
-        onClose={() => setIsOpenReport(false)}
-      />
       <PopupPolicy
         isOpen={isOpenPolicy}
         onClose={() => setIsOpenPolicy(false)}
diff --git a/src/pages/Myroom/index.jsx b/src/pages/Myroom/index.jsx
index 2db3cb41b..b0a907f78 100644
--- a/src/pages/Myroom/index.jsx
+++ b/src/pages/Myroom/index.jsx
@@ -15,6 +15,7 @@ import loginInfoDetailAtom from "atoms/loginInfoDetail";
 import RLayout from "components/RLayout";
 import SuggestLogin from "components/SuggestLogin";
 import Title from "components/Title";
+import WhiteContainer from "components/WhiteContainer";
 
 export const MAX_PARTICIPATION = 5;
 
@@ -34,14 +35,14 @@ const Myroom = () => {
   }, [reactiveState, roomId, history]);
 
   return !isLogin ? (
-    <div>
+    <>
       <Title icon="add" header marginAuto>
         참여 중인 방
       </Title>
-      <RLayout.R1>
+      <WhiteContainer marginAuto>
         <SuggestLogin />
-      </RLayout.R1>
-    </div>
+      </WhiteContainer>
+    </>
   ) : reactiveState === 3 ? (
     <R1Myroom
       roomId={roomId}

From 59d8e951da51be5b7b226b17a00d2c7dab5cfd2f Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Thu, 6 Apr 2023 04:13:18 +0900
Subject: [PATCH 09/43] Fix: error when auth middleware

---
 src/App.js                                    |   2 +
 .../Skeleton/ChannelTalkProvider/index.tsx    |   7 +-
 src/components/Skeleton/index.tsx             |   6 +-
 src/hooks/useTaxiAPI/useAxios.tsx             |   8 +-
 src/pages/Error/PageNotFound.tsx              |   2 +-
 src/pages/Home/RoomSection.tsx                |   5 +-
 src/pages/Login/Logout.tsx                    |  15 +--
 src/pages/Login/index.jsx                     | 101 +++++++++---------
 src/pages/Search/RoomSelectionModal.jsx       |   2 +-
 9 files changed, 81 insertions(+), 67 deletions(-)

diff --git a/src/App.js b/src/App.js
index ba912dfab..7d8293653 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,6 +15,7 @@ import Addroom from "pages/Addroom";
 import WrapChat from "pages/Chatting/WrapChat";
 import PageNotFound from "pages/Error/PageNotFound";
 import Home from "pages/Home";
+import Login from "pages/Login";
 import LoginFail from "pages/Login/LoginFail";
 import Logout from "pages/Login/Logout";
 import Mypage from "pages/Mypage";
@@ -42,6 +43,7 @@ const App = () => {
           <CSSVariablesProvider />
           <Skeleton>
             <Switch>
+              <Route exact path="/login" component={Login} />
               <Route exact path="/login/fail" component={LoginFail} />
               <Route exact path="/logout" component={Logout} />
               <Route exact path="/" component={Home} />
diff --git a/src/components/Skeleton/ChannelTalkProvider/index.tsx b/src/components/Skeleton/ChannelTalkProvider/index.tsx
index fcb4334d7..9ec793844 100644
--- a/src/components/Skeleton/ChannelTalkProvider/index.tsx
+++ b/src/components/Skeleton/ChannelTalkProvider/index.tsx
@@ -3,6 +3,7 @@ import { useLocation } from "react-router-dom";
 
 import ChannelService from "./channelService";
 
+import errorAtom from "atoms/error";
 import loginInfoDetailAtom from "atoms/loginInfoDetail";
 import { useRecoilValue } from "recoil";
 
@@ -12,6 +13,7 @@ const ChannelTalkProvider = () => {
   const location = useLocation();
   const pathname = location.pathname;
   const loginInfoDetail = useRecoilValue(loginInfoDetailAtom);
+  const error = useRecoilValue(errorAtom);
 
   useEffect(() => {
     if (loginInfoDetail) {
@@ -27,10 +29,11 @@ const ChannelTalkProvider = () => {
   useEffect(() => {
     ChannelService.boot({
       pluginKey: channelTalkPluginKey,
-      hideChannelButtonOnBoot: !pathname.startsWith("/login"),
+      // login 페이지와 error 페이지에서는 채널톡 버튼을 띄웁니다.
+      hideChannelButtonOnBoot: !pathname.startsWith("/login") && !error,
       customLauncherSelector: ".popup-channeltalk",
     });
-  }, [pathname]);
+  }, [pathname, error]);
   return null;
 };
 
diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx
index 1d2f58a3d..3ebf2adb2 100644
--- a/src/components/Skeleton/index.tsx
+++ b/src/components/Skeleton/index.tsx
@@ -119,7 +119,11 @@ const Skeleton = ({ children }: SkeletonProps) => {
       </Container>
     );
   }
-  if (pathname.startsWith("/chatting")) {
+  if (
+    pathname.startsWith("/login") ||
+    pathname.startsWith("/logout") ||
+    pathname.startsWith("/chatting")
+  ) {
     return (
       <Container>
         <HeaderBar />
diff --git a/src/hooks/useTaxiAPI/useAxios.tsx b/src/hooks/useTaxiAPI/useAxios.tsx
index 8de795cf5..6936b28ea 100644
--- a/src/hooks/useTaxiAPI/useAxios.tsx
+++ b/src/hooks/useTaxiAPI/useAxios.tsx
@@ -28,7 +28,9 @@ const useAxios = () => {
         const res = await axios({ url, method, data, params });
         if (res?.status === 403 && res.data?.error === "not logged in") {
           history.replace(
-            `/logout?redirect=${encodeURIComponent(currentPath)}`
+            `/logout?redirect=${encodeURIComponent(
+              `/login?redirect=${encodeURIComponent(currentPath)}`
+            )}`
           );
         } else if (res.status !== 200) {
           throw new Error("Status is not 200!");
@@ -43,7 +45,9 @@ const useAxios = () => {
           e?.response?.data?.error === "not logged in"
         ) {
           history.replace(
-            `/logout?redirect=${encodeURIComponent(currentPath)}`
+            `/logout?redirect=${encodeURIComponent(
+              `/login?redirect=${encodeURIComponent(currentPath)}`
+            )}`
           );
         } else if (onError) {
           onError(e);
diff --git a/src/pages/Error/PageNotFound.tsx b/src/pages/Error/PageNotFound.tsx
index bc5efded2..eb9442f30 100644
--- a/src/pages/Error/PageNotFound.tsx
+++ b/src/pages/Error/PageNotFound.tsx
@@ -8,7 +8,7 @@ const PageNotFound = () => {
 
   useEffect(() => {
     setError({
-      title: "페이지를 찾을 수 없습니다,",
+      title: "페이지를 찾을 수 없습니다.",
       message: "요청하신 URL이 올바른지 확인해주세요.",
       record: null,
     });
diff --git a/src/pages/Home/RoomSection.tsx b/src/pages/Home/RoomSection.tsx
index 54a0252c3..5cc514f14 100644
--- a/src/pages/Home/RoomSection.tsx
+++ b/src/pages/Home/RoomSection.tsx
@@ -1,16 +1,17 @@
 import { useEffect, useMemo, useState } from "react";
+import { useHistory } from "react-router-dom";
 
 import useDateToken from "hooks/useDateToken";
 import { useQuery } from "hooks/useTaxiAPI";
-import { useHistory } from "react-router-dom";
+
 import RLayout from "components/RLayout";
 import Title from "components/Title";
+import RoomSelectionModal from "pages/Search/RoomSelectionModal";
 
 import RoomList from "./RoomList";
 import SelectDate from "./SelectDate";
 
 import moment, { getToday } from "tools/moment";
-import RoomSelectionModal from "pages/Search/RoomSelectionModal";
 
 type RoomSectionProps = {
   roomId: Nullable<string>;
diff --git a/src/pages/Login/Logout.tsx b/src/pages/Login/Logout.tsx
index a43487815..a62509d46 100644
--- a/src/pages/Login/Logout.tsx
+++ b/src/pages/Login/Logout.tsx
@@ -8,14 +8,15 @@ import { useSetRecoilState } from "recoil";
 
 const Logout = () => {
   const { search } = useLocation();
-  const redirectPath = useMemo(() => {
-    const searchParams = new URLSearchParams(search);
-    return searchParams.get("redirect");
-  }, [search]);
+  const redirectPath =
+    useMemo(() => {
+      const searchParams = new URLSearchParams(search);
+      return searchParams.get("redirect");
+    }, [search]) || "/";
 
-  const [error, response, isLoading] = useQuery.get("/auth/logout", {
-    redirect: redirectPath,
-  });
+  const [error, response, isLoading] = useQuery.get(
+    `/auth/logout?redirect=${redirectPath}`
+  );
   const setError = useSetRecoilState(errorAtom);
 
   useEffect(() => {
diff --git a/src/pages/Login/index.jsx b/src/pages/Login/index.jsx
index e49115b97..f09e7283d 100644
--- a/src/pages/Login/index.jsx
+++ b/src/pages/Login/index.jsx
@@ -1,9 +1,8 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect } from "react";
 import { useHistory, useLocation } from "react-router-dom";
 
 import Button from "components/Button";
 import HeaderBar from "components/HeaderBar";
-import PopupPrivacyPolicy from "pages/Mypage/PopupPrivacyPolicy";
 
 import loginInfoDetailAtom from "atoms/loginInfoDetail";
 import { useRecoilValue } from "recoil";
@@ -11,16 +10,12 @@ import { useRecoilValue } from "recoil";
 import theme from "tools/theme";
 
 import { backServer } from "loadenv";
-import { ReactComponent as SparcsLogo } from "static/assets/SparcsLogoWithText.svg";
 import { ReactComponent as TaxiLogo } from "static/assets/TaxiLogo.svg";
 
 const Login = () => {
   const history = useHistory();
-  const { pathname, search } = useLocation();
+  const { search } = useLocation();
   const { id: userId } = useRecoilValue(loginInfoDetailAtom);
-  const [isOpenPrivacyPolicy, setOpenPrivacyPolicy] = useState(
-    pathname.includes("privacyPolicy")
-  );
 
   useEffect(() => {
     const searchParams = new URLSearchParams(search);
@@ -30,56 +25,60 @@ const Login = () => {
     if (userId) history.replace(redirectPath || "/");
   }, [userId, search]);
 
+  const onClickBack = useCallback(() => {
+    history.goBack();
+  }, [history]);
+
+  const style = {
+    display: "flex",
+    alignItems: "center",
+    textAlign: "center",
+    justifyContent: "center",
+    flexDirection: "column",
+    height: "100%",
+  };
+  const styleLogo = { height: 54, marginBottom: 16 };
+  const styleTitle = { ...theme.font20, marginBottom: 12 };
+  const styleMessage = {
+    ...theme.font12,
+    color: theme.gray_text,
+    marginBottom: 24,
+  };
+
   return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        width: "100%",
-        height: "100%",
-      }}
-    >
-      <PopupPrivacyPolicy
-        isOpen={isOpenPrivacyPolicy}
-        onClose={() => setOpenPrivacyPolicy(false)}
-      />
-      <HeaderBar />
-      <TaxiLogo style={{ height: "54px", marginBottom: "10px" }} />
-      <a
-        href={`${backServer}/auth/sparcssso`}
-        style={{ textDecoration: "none" }}
-      >
+    <div css={style}>
+      <TaxiLogo style={styleLogo} />
+      <div style={styleTitle}>로그인 후 이용 가능한 서비스입니다.</div>
+      <div style={styleMessage}>
+        세션 만료로 로그아웃이 되었거나, 잘못된 페이지 접근입니다.
+        <br />
+        로그인 이후 다시 시도해주세요.
+      </div>
+      <div style={{ display: "flex", columnGap: "12px" }}>
         <Button
-          type="purple"
-          width="250px"
-          padding="10px 0 11px"
+          type="white"
+          padding="13px 24px 14px"
           radius={12}
-          font={theme.font16_bold}
+          font={theme.font14}
+          onClick={onClickBack}
         >
-          로그인
+          이전 페이지
         </Button>
-      </a>
-      <div
-        style={{
-          position: "absolute",
-          display: "flex",
-          alignItems: "center",
-          gap: "8px",
-          left: "12px",
-          bottom: "max(16px, env(safe-area-inset-bottom))",
-        }}
-      >
-        <a href="https://sparcs.org/" target="_blank" rel="noreferrer">
-          <SparcsLogo style={{ height: "27px" }} />
-        </a>
-        <div
-          style={{ ...theme.font12, cursor: "pointer" }}
-          onClick={() => setOpenPrivacyPolicy(true)}
+        <a
+          href={`${backServer}/auth/sparcssso?redirect=${encodeURIComponent(
+            new URLSearchParams(search).get("redirect") || "/"
+          )}`}
+          style={{ textDecoration: "none" }}
         >
-          개인정보 처리방침
-        </div>
+          <Button
+            type="purple"
+            padding="13px 24px 14px"
+            radius={12}
+            font={theme.font14_bold}
+          >
+            로그인
+          </Button>
+        </a>
       </div>
     </div>
   );
diff --git a/src/pages/Search/RoomSelectionModal.jsx b/src/pages/Search/RoomSelectionModal.jsx
index 632aa6f0f..09ecd6a11 100644
--- a/src/pages/Search/RoomSelectionModal.jsx
+++ b/src/pages/Search/RoomSelectionModal.jsx
@@ -6,6 +6,7 @@ import { useHistory } from "react-router-dom";
 import { useAxios } from "hooks/useTaxiAPI";
 
 import DottedLine from "components/DottedLine";
+import LoginButton from "components/LoginButton";
 import MiniCircle from "components/MiniCircle";
 import Modal from "components/Modal";
 import { MAX_PARTICIPATION } from "pages/Myroom";
@@ -21,7 +22,6 @@ import { getLocationName } from "tools/trans";
 
 import ArrowRightAltRoundedIcon from "@mui/icons-material/ArrowRightAltRounded";
 import Tooltip from "@mui/material/Tooltip";
-import LoginButton from "components/LoginButton";
 
 const PlaceSection = (props) => {
   const style = {

From 8bd373752a1b72d4fef596fdce0dbe3ec75491d9 Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Thu, 6 Apr 2023 04:18:02 +0900
Subject: [PATCH 10/43] Add: PopupPrivacyPolicy

---
 src/pages/Home/index.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index d96b82f70..cf82f7222 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,12 +1,23 @@
-import { useParams } from "react-router-dom";
+import { useCallback } from "react";
+import { useHistory, useParams } from "react-router-dom";
+
+import PopupPrivacyPolicy from "pages/Mypage/PopupPrivacyPolicy";
+
 import InfoSection from "./InfoSection";
 import RoomSection from "./RoomSection";
 
 const Home = () => {
+  const history = useHistory();
   const { roomId } = useParams<{ roomId: string }>();
 
+  const onCloseModal = useCallback(() => history.replace("/home"), [history]);
+
   return (
     <>
+      <PopupPrivacyPolicy
+        isOpen={roomId === "privacyPolicy"}
+        onClose={onCloseModal}
+      />
       <InfoSection />
       <RoomSection roomId={roomId} />
     </>

From f3a22f718bfec56e6e0e00e288aa8168a209aad4 Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Thu, 6 Apr 2023 04:26:15 +0900
Subject: [PATCH 11/43] Revert "Add: PopupPrivacyPolicy"

This reverts commit 8bd373752a1b72d4fef596fdce0dbe3ec75491d9.
---
 src/pages/Home/index.tsx | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index cf82f7222..d96b82f70 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,23 +1,12 @@
-import { useCallback } from "react";
-import { useHistory, useParams } from "react-router-dom";
-
-import PopupPrivacyPolicy from "pages/Mypage/PopupPrivacyPolicy";
-
+import { useParams } from "react-router-dom";
 import InfoSection from "./InfoSection";
 import RoomSection from "./RoomSection";
 
 const Home = () => {
-  const history = useHistory();
   const { roomId } = useParams<{ roomId: string }>();
 
-  const onCloseModal = useCallback(() => history.replace("/home"), [history]);
-
   return (
     <>
-      <PopupPrivacyPolicy
-        isOpen={roomId === "privacyPolicy"}
-        onClose={onCloseModal}
-      />
       <InfoSection />
       <RoomSection roomId={roomId} />
     </>

From 6bee01f3c67ebb5ca81efa82b3d987c675b8ac9d Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Thu, 6 Apr 2023 04:26:19 +0900
Subject: [PATCH 12/43] Revert "Fix: error when auth middleware"

This reverts commit 59d8e951da51be5b7b226b17a00d2c7dab5cfd2f.
---
 src/App.js                                    |   2 -
 .../Skeleton/ChannelTalkProvider/index.tsx    |   7 +-
 src/components/Skeleton/index.tsx             |   6 +-
 src/hooks/useTaxiAPI/useAxios.tsx             |   8 +-
 src/pages/Error/PageNotFound.tsx              |   2 +-
 src/pages/Home/RoomSection.tsx                |   5 +-
 src/pages/Login/Logout.tsx                    |  15 ++-
 src/pages/Login/index.jsx                     | 101 +++++++++---------
 src/pages/Search/RoomSelectionModal.jsx       |   2 +-
 9 files changed, 67 insertions(+), 81 deletions(-)

diff --git a/src/App.js b/src/App.js
index 7d8293653..ba912dfab 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,7 +15,6 @@ import Addroom from "pages/Addroom";
 import WrapChat from "pages/Chatting/WrapChat";
 import PageNotFound from "pages/Error/PageNotFound";
 import Home from "pages/Home";
-import Login from "pages/Login";
 import LoginFail from "pages/Login/LoginFail";
 import Logout from "pages/Login/Logout";
 import Mypage from "pages/Mypage";
@@ -43,7 +42,6 @@ const App = () => {
           <CSSVariablesProvider />
           <Skeleton>
             <Switch>
-              <Route exact path="/login" component={Login} />
               <Route exact path="/login/fail" component={LoginFail} />
               <Route exact path="/logout" component={Logout} />
               <Route exact path="/" component={Home} />
diff --git a/src/components/Skeleton/ChannelTalkProvider/index.tsx b/src/components/Skeleton/ChannelTalkProvider/index.tsx
index 9ec793844..fcb4334d7 100644
--- a/src/components/Skeleton/ChannelTalkProvider/index.tsx
+++ b/src/components/Skeleton/ChannelTalkProvider/index.tsx
@@ -3,7 +3,6 @@ import { useLocation } from "react-router-dom";
 
 import ChannelService from "./channelService";
 
-import errorAtom from "atoms/error";
 import loginInfoDetailAtom from "atoms/loginInfoDetail";
 import { useRecoilValue } from "recoil";
 
@@ -13,7 +12,6 @@ const ChannelTalkProvider = () => {
   const location = useLocation();
   const pathname = location.pathname;
   const loginInfoDetail = useRecoilValue(loginInfoDetailAtom);
-  const error = useRecoilValue(errorAtom);
 
   useEffect(() => {
     if (loginInfoDetail) {
@@ -29,11 +27,10 @@ const ChannelTalkProvider = () => {
   useEffect(() => {
     ChannelService.boot({
       pluginKey: channelTalkPluginKey,
-      // login 페이지와 error 페이지에서는 채널톡 버튼을 띄웁니다.
-      hideChannelButtonOnBoot: !pathname.startsWith("/login") && !error,
+      hideChannelButtonOnBoot: !pathname.startsWith("/login"),
       customLauncherSelector: ".popup-channeltalk",
     });
-  }, [pathname, error]);
+  }, [pathname]);
   return null;
 };
 
diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx
index 3ebf2adb2..1d2f58a3d 100644
--- a/src/components/Skeleton/index.tsx
+++ b/src/components/Skeleton/index.tsx
@@ -119,11 +119,7 @@ const Skeleton = ({ children }: SkeletonProps) => {
       </Container>
     );
   }
-  if (
-    pathname.startsWith("/login") ||
-    pathname.startsWith("/logout") ||
-    pathname.startsWith("/chatting")
-  ) {
+  if (pathname.startsWith("/chatting")) {
     return (
       <Container>
         <HeaderBar />
diff --git a/src/hooks/useTaxiAPI/useAxios.tsx b/src/hooks/useTaxiAPI/useAxios.tsx
index 6936b28ea..8de795cf5 100644
--- a/src/hooks/useTaxiAPI/useAxios.tsx
+++ b/src/hooks/useTaxiAPI/useAxios.tsx
@@ -28,9 +28,7 @@ const useAxios = () => {
         const res = await axios({ url, method, data, params });
         if (res?.status === 403 && res.data?.error === "not logged in") {
           history.replace(
-            `/logout?redirect=${encodeURIComponent(
-              `/login?redirect=${encodeURIComponent(currentPath)}`
-            )}`
+            `/logout?redirect=${encodeURIComponent(currentPath)}`
           );
         } else if (res.status !== 200) {
           throw new Error("Status is not 200!");
@@ -45,9 +43,7 @@ const useAxios = () => {
           e?.response?.data?.error === "not logged in"
         ) {
           history.replace(
-            `/logout?redirect=${encodeURIComponent(
-              `/login?redirect=${encodeURIComponent(currentPath)}`
-            )}`
+            `/logout?redirect=${encodeURIComponent(currentPath)}`
           );
         } else if (onError) {
           onError(e);
diff --git a/src/pages/Error/PageNotFound.tsx b/src/pages/Error/PageNotFound.tsx
index eb9442f30..bc5efded2 100644
--- a/src/pages/Error/PageNotFound.tsx
+++ b/src/pages/Error/PageNotFound.tsx
@@ -8,7 +8,7 @@ const PageNotFound = () => {
 
   useEffect(() => {
     setError({
-      title: "페이지를 찾을 수 없습니다.",
+      title: "페이지를 찾을 수 없습니다,",
       message: "요청하신 URL이 올바른지 확인해주세요.",
       record: null,
     });
diff --git a/src/pages/Home/RoomSection.tsx b/src/pages/Home/RoomSection.tsx
index 5cc514f14..54a0252c3 100644
--- a/src/pages/Home/RoomSection.tsx
+++ b/src/pages/Home/RoomSection.tsx
@@ -1,17 +1,16 @@
 import { useEffect, useMemo, useState } from "react";
-import { useHistory } from "react-router-dom";
 
 import useDateToken from "hooks/useDateToken";
 import { useQuery } from "hooks/useTaxiAPI";
-
+import { useHistory } from "react-router-dom";
 import RLayout from "components/RLayout";
 import Title from "components/Title";
-import RoomSelectionModal from "pages/Search/RoomSelectionModal";
 
 import RoomList from "./RoomList";
 import SelectDate from "./SelectDate";
 
 import moment, { getToday } from "tools/moment";
+import RoomSelectionModal from "pages/Search/RoomSelectionModal";
 
 type RoomSectionProps = {
   roomId: Nullable<string>;
diff --git a/src/pages/Login/Logout.tsx b/src/pages/Login/Logout.tsx
index a62509d46..a43487815 100644
--- a/src/pages/Login/Logout.tsx
+++ b/src/pages/Login/Logout.tsx
@@ -8,15 +8,14 @@ import { useSetRecoilState } from "recoil";
 
 const Logout = () => {
   const { search } = useLocation();
-  const redirectPath =
-    useMemo(() => {
-      const searchParams = new URLSearchParams(search);
-      return searchParams.get("redirect");
-    }, [search]) || "/";
+  const redirectPath = useMemo(() => {
+    const searchParams = new URLSearchParams(search);
+    return searchParams.get("redirect");
+  }, [search]);
 
-  const [error, response, isLoading] = useQuery.get(
-    `/auth/logout?redirect=${redirectPath}`
-  );
+  const [error, response, isLoading] = useQuery.get("/auth/logout", {
+    redirect: redirectPath,
+  });
   const setError = useSetRecoilState(errorAtom);
 
   useEffect(() => {
diff --git a/src/pages/Login/index.jsx b/src/pages/Login/index.jsx
index f09e7283d..e49115b97 100644
--- a/src/pages/Login/index.jsx
+++ b/src/pages/Login/index.jsx
@@ -1,8 +1,9 @@
-import { useCallback, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useHistory, useLocation } from "react-router-dom";
 
 import Button from "components/Button";
 import HeaderBar from "components/HeaderBar";
+import PopupPrivacyPolicy from "pages/Mypage/PopupPrivacyPolicy";
 
 import loginInfoDetailAtom from "atoms/loginInfoDetail";
 import { useRecoilValue } from "recoil";
@@ -10,12 +11,16 @@ import { useRecoilValue } from "recoil";
 import theme from "tools/theme";
 
 import { backServer } from "loadenv";
+import { ReactComponent as SparcsLogo } from "static/assets/SparcsLogoWithText.svg";
 import { ReactComponent as TaxiLogo } from "static/assets/TaxiLogo.svg";
 
 const Login = () => {
   const history = useHistory();
-  const { search } = useLocation();
+  const { pathname, search } = useLocation();
   const { id: userId } = useRecoilValue(loginInfoDetailAtom);
+  const [isOpenPrivacyPolicy, setOpenPrivacyPolicy] = useState(
+    pathname.includes("privacyPolicy")
+  );
 
   useEffect(() => {
     const searchParams = new URLSearchParams(search);
@@ -25,60 +30,56 @@ const Login = () => {
     if (userId) history.replace(redirectPath || "/");
   }, [userId, search]);
 
-  const onClickBack = useCallback(() => {
-    history.goBack();
-  }, [history]);
-
-  const style = {
-    display: "flex",
-    alignItems: "center",
-    textAlign: "center",
-    justifyContent: "center",
-    flexDirection: "column",
-    height: "100%",
-  };
-  const styleLogo = { height: 54, marginBottom: 16 };
-  const styleTitle = { ...theme.font20, marginBottom: 12 };
-  const styleMessage = {
-    ...theme.font12,
-    color: theme.gray_text,
-    marginBottom: 24,
-  };
-
   return (
-    <div css={style}>
-      <TaxiLogo style={styleLogo} />
-      <div style={styleTitle}>로그인 후 이용 가능한 서비스입니다.</div>
-      <div style={styleMessage}>
-        세션 만료로 로그아웃이 되었거나, 잘못된 페이지 접근입니다.
-        <br />
-        로그인 이후 다시 시도해주세요.
-      </div>
-      <div style={{ display: "flex", columnGap: "12px" }}>
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        width: "100%",
+        height: "100%",
+      }}
+    >
+      <PopupPrivacyPolicy
+        isOpen={isOpenPrivacyPolicy}
+        onClose={() => setOpenPrivacyPolicy(false)}
+      />
+      <HeaderBar />
+      <TaxiLogo style={{ height: "54px", marginBottom: "10px" }} />
+      <a
+        href={`${backServer}/auth/sparcssso`}
+        style={{ textDecoration: "none" }}
+      >
         <Button
-          type="white"
-          padding="13px 24px 14px"
+          type="purple"
+          width="250px"
+          padding="10px 0 11px"
           radius={12}
-          font={theme.font14}
-          onClick={onClickBack}
+          font={theme.font16_bold}
         >
-          이전 페이지
+          로그인
         </Button>
-        <a
-          href={`${backServer}/auth/sparcssso?redirect=${encodeURIComponent(
-            new URLSearchParams(search).get("redirect") || "/"
-          )}`}
-          style={{ textDecoration: "none" }}
-        >
-          <Button
-            type="purple"
-            padding="13px 24px 14px"
-            radius={12}
-            font={theme.font14_bold}
-          >
-            로그인
-          </Button>
+      </a>
+      <div
+        style={{
+          position: "absolute",
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          left: "12px",
+          bottom: "max(16px, env(safe-area-inset-bottom))",
+        }}
+      >
+        <a href="https://sparcs.org/" target="_blank" rel="noreferrer">
+          <SparcsLogo style={{ height: "27px" }} />
         </a>
+        <div
+          style={{ ...theme.font12, cursor: "pointer" }}
+          onClick={() => setOpenPrivacyPolicy(true)}
+        >
+          개인정보 처리방침
+        </div>
       </div>
     </div>
   );
diff --git a/src/pages/Search/RoomSelectionModal.jsx b/src/pages/Search/RoomSelectionModal.jsx
index 09ecd6a11..632aa6f0f 100644
--- a/src/pages/Search/RoomSelectionModal.jsx
+++ b/src/pages/Search/RoomSelectionModal.jsx
@@ -6,7 +6,6 @@ import { useHistory } from "react-router-dom";
 import { useAxios } from "hooks/useTaxiAPI";
 
 import DottedLine from "components/DottedLine";
-import LoginButton from "components/LoginButton";
 import MiniCircle from "components/MiniCircle";
 import Modal from "components/Modal";
 import { MAX_PARTICIPATION } from "pages/Myroom";
@@ -22,6 +21,7 @@ import { getLocationName } from "tools/trans";
 
 import ArrowRightAltRoundedIcon from "@mui/icons-material/ArrowRightAltRounded";
 import Tooltip from "@mui/material/Tooltip";
+import LoginButton from "components/LoginButton";
 
 const PlaceSection = (props) => {
   const style = {

From 4f43278fd850d983715fd04936b9a51bda030f3c Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Thu, 6 Apr 2023 04:29:41 +0900
Subject: [PATCH 13/43] Revert "Revert "Fix: error when auth middleware""

This reverts commit 6bee01f3c67ebb5ca81efa82b3d987c675b8ac9d.
---
 src/App.js                                    |   2 +
 .../Skeleton/ChannelTalkProvider/index.tsx    |   7 +-
 src/components/Skeleton/index.tsx             |   6 +-
 src/hooks/useTaxiAPI/useAxios.tsx             |   8 +-
 src/pages/Error/PageNotFound.tsx              |   2 +-
 src/pages/Home/RoomSection.tsx                |   5 +-
 src/pages/Login/Logout.tsx                    |  15 +--
 src/pages/Login/index.jsx                     | 101 +++++++++---------
 src/pages/Search/RoomSelectionModal.jsx       |   2 +-
 9 files changed, 81 insertions(+), 67 deletions(-)

diff --git a/src/App.js b/src/App.js
index ba912dfab..7d8293653 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,6 +15,7 @@ import Addroom from "pages/Addroom";
 import WrapChat from "pages/Chatting/WrapChat";
 import PageNotFound from "pages/Error/PageNotFound";
 import Home from "pages/Home";
+import Login from "pages/Login";
 import LoginFail from "pages/Login/LoginFail";
 import Logout from "pages/Login/Logout";
 import Mypage from "pages/Mypage";
@@ -42,6 +43,7 @@ const App = () => {
           <CSSVariablesProvider />
           <Skeleton>
             <Switch>
+              <Route exact path="/login" component={Login} />
               <Route exact path="/login/fail" component={LoginFail} />
               <Route exact path="/logout" component={Logout} />
               <Route exact path="/" component={Home} />
diff --git a/src/components/Skeleton/ChannelTalkProvider/index.tsx b/src/components/Skeleton/ChannelTalkProvider/index.tsx
index fcb4334d7..9ec793844 100644
--- a/src/components/Skeleton/ChannelTalkProvider/index.tsx
+++ b/src/components/Skeleton/ChannelTalkProvider/index.tsx
@@ -3,6 +3,7 @@ import { useLocation } from "react-router-dom";
 
 import ChannelService from "./channelService";
 
+import errorAtom from "atoms/error";
 import loginInfoDetailAtom from "atoms/loginInfoDetail";
 import { useRecoilValue } from "recoil";
 
@@ -12,6 +13,7 @@ const ChannelTalkProvider = () => {
   const location = useLocation();
   const pathname = location.pathname;
   const loginInfoDetail = useRecoilValue(loginInfoDetailAtom);
+  const error = useRecoilValue(errorAtom);
 
   useEffect(() => {
     if (loginInfoDetail) {
@@ -27,10 +29,11 @@ const ChannelTalkProvider = () => {
   useEffect(() => {
     ChannelService.boot({
       pluginKey: channelTalkPluginKey,
-      hideChannelButtonOnBoot: !pathname.startsWith("/login"),
+      // login 페이지와 error 페이지에서는 채널톡 버튼을 띄웁니다.
+      hideChannelButtonOnBoot: !pathname.startsWith("/login") && !error,
       customLauncherSelector: ".popup-channeltalk",
     });
-  }, [pathname]);
+  }, [pathname, error]);
   return null;
 };
 
diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx
index 1d2f58a3d..3ebf2adb2 100644
--- a/src/components/Skeleton/index.tsx
+++ b/src/components/Skeleton/index.tsx
@@ -119,7 +119,11 @@ const Skeleton = ({ children }: SkeletonProps) => {
       </Container>
     );
   }
-  if (pathname.startsWith("/chatting")) {
+  if (
+    pathname.startsWith("/login") ||
+    pathname.startsWith("/logout") ||
+    pathname.startsWith("/chatting")
+  ) {
     return (
       <Container>
         <HeaderBar />
diff --git a/src/hooks/useTaxiAPI/useAxios.tsx b/src/hooks/useTaxiAPI/useAxios.tsx
index 8de795cf5..6936b28ea 100644
--- a/src/hooks/useTaxiAPI/useAxios.tsx
+++ b/src/hooks/useTaxiAPI/useAxios.tsx
@@ -28,7 +28,9 @@ const useAxios = () => {
         const res = await axios({ url, method, data, params });
         if (res?.status === 403 && res.data?.error === "not logged in") {
           history.replace(
-            `/logout?redirect=${encodeURIComponent(currentPath)}`
+            `/logout?redirect=${encodeURIComponent(
+              `/login?redirect=${encodeURIComponent(currentPath)}`
+            )}`
           );
         } else if (res.status !== 200) {
           throw new Error("Status is not 200!");
@@ -43,7 +45,9 @@ const useAxios = () => {
           e?.response?.data?.error === "not logged in"
         ) {
           history.replace(
-            `/logout?redirect=${encodeURIComponent(currentPath)}`
+            `/logout?redirect=${encodeURIComponent(
+              `/login?redirect=${encodeURIComponent(currentPath)}`
+            )}`
           );
         } else if (onError) {
           onError(e);
diff --git a/src/pages/Error/PageNotFound.tsx b/src/pages/Error/PageNotFound.tsx
index bc5efded2..eb9442f30 100644
--- a/src/pages/Error/PageNotFound.tsx
+++ b/src/pages/Error/PageNotFound.tsx
@@ -8,7 +8,7 @@ const PageNotFound = () => {
 
   useEffect(() => {
     setError({
-      title: "페이지를 찾을 수 없습니다,",
+      title: "페이지를 찾을 수 없습니다.",
       message: "요청하신 URL이 올바른지 확인해주세요.",
       record: null,
     });
diff --git a/src/pages/Home/RoomSection.tsx b/src/pages/Home/RoomSection.tsx
index 54a0252c3..5cc514f14 100644
--- a/src/pages/Home/RoomSection.tsx
+++ b/src/pages/Home/RoomSection.tsx
@@ -1,16 +1,17 @@
 import { useEffect, useMemo, useState } from "react";
+import { useHistory } from "react-router-dom";
 
 import useDateToken from "hooks/useDateToken";
 import { useQuery } from "hooks/useTaxiAPI";
-import { useHistory } from "react-router-dom";
+
 import RLayout from "components/RLayout";
 import Title from "components/Title";
+import RoomSelectionModal from "pages/Search/RoomSelectionModal";
 
 import RoomList from "./RoomList";
 import SelectDate from "./SelectDate";
 
 import moment, { getToday } from "tools/moment";
-import RoomSelectionModal from "pages/Search/RoomSelectionModal";
 
 type RoomSectionProps = {
   roomId: Nullable<string>;
diff --git a/src/pages/Login/Logout.tsx b/src/pages/Login/Logout.tsx
index a43487815..a62509d46 100644
--- a/src/pages/Login/Logout.tsx
+++ b/src/pages/Login/Logout.tsx
@@ -8,14 +8,15 @@ import { useSetRecoilState } from "recoil";
 
 const Logout = () => {
   const { search } = useLocation();
-  const redirectPath = useMemo(() => {
-    const searchParams = new URLSearchParams(search);
-    return searchParams.get("redirect");
-  }, [search]);
+  const redirectPath =
+    useMemo(() => {
+      const searchParams = new URLSearchParams(search);
+      return searchParams.get("redirect");
+    }, [search]) || "/";
 
-  const [error, response, isLoading] = useQuery.get("/auth/logout", {
-    redirect: redirectPath,
-  });
+  const [error, response, isLoading] = useQuery.get(
+    `/auth/logout?redirect=${redirectPath}`
+  );
   const setError = useSetRecoilState(errorAtom);
 
   useEffect(() => {
diff --git a/src/pages/Login/index.jsx b/src/pages/Login/index.jsx
index e49115b97..f09e7283d 100644
--- a/src/pages/Login/index.jsx
+++ b/src/pages/Login/index.jsx
@@ -1,9 +1,8 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect } from "react";
 import { useHistory, useLocation } from "react-router-dom";
 
 import Button from "components/Button";
 import HeaderBar from "components/HeaderBar";
-import PopupPrivacyPolicy from "pages/Mypage/PopupPrivacyPolicy";
 
 import loginInfoDetailAtom from "atoms/loginInfoDetail";
 import { useRecoilValue } from "recoil";
@@ -11,16 +10,12 @@ import { useRecoilValue } from "recoil";
 import theme from "tools/theme";
 
 import { backServer } from "loadenv";
-import { ReactComponent as SparcsLogo } from "static/assets/SparcsLogoWithText.svg";
 import { ReactComponent as TaxiLogo } from "static/assets/TaxiLogo.svg";
 
 const Login = () => {
   const history = useHistory();
-  const { pathname, search } = useLocation();
+  const { search } = useLocation();
   const { id: userId } = useRecoilValue(loginInfoDetailAtom);
-  const [isOpenPrivacyPolicy, setOpenPrivacyPolicy] = useState(
-    pathname.includes("privacyPolicy")
-  );
 
   useEffect(() => {
     const searchParams = new URLSearchParams(search);
@@ -30,56 +25,60 @@ const Login = () => {
     if (userId) history.replace(redirectPath || "/");
   }, [userId, search]);
 
+  const onClickBack = useCallback(() => {
+    history.goBack();
+  }, [history]);
+
+  const style = {
+    display: "flex",
+    alignItems: "center",
+    textAlign: "center",
+    justifyContent: "center",
+    flexDirection: "column",
+    height: "100%",
+  };
+  const styleLogo = { height: 54, marginBottom: 16 };
+  const styleTitle = { ...theme.font20, marginBottom: 12 };
+  const styleMessage = {
+    ...theme.font12,
+    color: theme.gray_text,
+    marginBottom: 24,
+  };
+
   return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        width: "100%",
-        height: "100%",
-      }}
-    >
-      <PopupPrivacyPolicy
-        isOpen={isOpenPrivacyPolicy}
-        onClose={() => setOpenPrivacyPolicy(false)}
-      />
-      <HeaderBar />
-      <TaxiLogo style={{ height: "54px", marginBottom: "10px" }} />
-      <a
-        href={`${backServer}/auth/sparcssso`}
-        style={{ textDecoration: "none" }}
-      >
+    <div css={style}>
+      <TaxiLogo style={styleLogo} />
+      <div style={styleTitle}>로그인 후 이용 가능한 서비스입니다.</div>
+      <div style={styleMessage}>
+        세션 만료로 로그아웃이 되었거나, 잘못된 페이지 접근입니다.
+        <br />
+        로그인 이후 다시 시도해주세요.
+      </div>
+      <div style={{ display: "flex", columnGap: "12px" }}>
         <Button
-          type="purple"
-          width="250px"
-          padding="10px 0 11px"
+          type="white"
+          padding="13px 24px 14px"
           radius={12}
-          font={theme.font16_bold}
+          font={theme.font14}
+          onClick={onClickBack}
         >
-          로그인
+          이전 페이지
         </Button>
-      </a>
-      <div
-        style={{
-          position: "absolute",
-          display: "flex",
-          alignItems: "center",
-          gap: "8px",
-          left: "12px",
-          bottom: "max(16px, env(safe-area-inset-bottom))",
-        }}
-      >
-        <a href="https://sparcs.org/" target="_blank" rel="noreferrer">
-          <SparcsLogo style={{ height: "27px" }} />
-        </a>
-        <div
-          style={{ ...theme.font12, cursor: "pointer" }}
-          onClick={() => setOpenPrivacyPolicy(true)}
+        <a
+          href={`${backServer}/auth/sparcssso?redirect=${encodeURIComponent(
+            new URLSearchParams(search).get("redirect") || "/"
+          )}`}
+          style={{ textDecoration: "none" }}
         >
-          개인정보 처리방침
-        </div>
+          <Button
+            type="purple"
+            padding="13px 24px 14px"
+            radius={12}
+            font={theme.font14_bold}
+          >
+            로그인
+          </Button>
+        </a>
       </div>
     </div>
   );
diff --git a/src/pages/Search/RoomSelectionModal.jsx b/src/pages/Search/RoomSelectionModal.jsx
index 632aa6f0f..09ecd6a11 100644
--- a/src/pages/Search/RoomSelectionModal.jsx
+++ b/src/pages/Search/RoomSelectionModal.jsx
@@ -6,6 +6,7 @@ import { useHistory } from "react-router-dom";
 import { useAxios } from "hooks/useTaxiAPI";
 
 import DottedLine from "components/DottedLine";
+import LoginButton from "components/LoginButton";
 import MiniCircle from "components/MiniCircle";
 import Modal from "components/Modal";
 import { MAX_PARTICIPATION } from "pages/Myroom";
@@ -21,7 +22,6 @@ import { getLocationName } from "tools/trans";
 
 import ArrowRightAltRoundedIcon from "@mui/icons-material/ArrowRightAltRounded";
 import Tooltip from "@mui/material/Tooltip";
-import LoginButton from "components/LoginButton";
 
 const PlaceSection = (props) => {
   const style = {

From a32d17632c98309e165ab208053ec7a9519eebb0 Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Thu, 6 Apr 2023 04:29:45 +0900
Subject: [PATCH 14/43] Revert "Revert "Add: PopupPrivacyPolicy""

This reverts commit f3a22f718bfec56e6e0e00e288aa8168a209aad4.
---
 src/pages/Home/index.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index d96b82f70..cf82f7222 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,12 +1,23 @@
-import { useParams } from "react-router-dom";
+import { useCallback } from "react";
+import { useHistory, useParams } from "react-router-dom";
+
+import PopupPrivacyPolicy from "pages/Mypage/PopupPrivacyPolicy";
+
 import InfoSection from "./InfoSection";
 import RoomSection from "./RoomSection";
 
 const Home = () => {
+  const history = useHistory();
   const { roomId } = useParams<{ roomId: string }>();
 
+  const onCloseModal = useCallback(() => history.replace("/home"), [history]);
+
   return (
     <>
+      <PopupPrivacyPolicy
+        isOpen={roomId === "privacyPolicy"}
+        onClose={onCloseModal}
+      />
       <InfoSection />
       <RoomSection roomId={roomId} />
     </>

From 9c2d93e31e43caaa72d7c91e95b69dabc1cbd135 Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Thu, 6 Apr 2023 04:39:27 +0900
Subject: [PATCH 15/43] Add: home and addroom to ScrollRestoration

---
 src/components/Skeleton/ScrollRestoration/index.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/Skeleton/ScrollRestoration/index.tsx b/src/components/Skeleton/ScrollRestoration/index.tsx
index 745ad872f..b772a75bc 100644
--- a/src/components/Skeleton/ScrollRestoration/index.tsx
+++ b/src/components/Skeleton/ScrollRestoration/index.tsx
@@ -30,6 +30,16 @@ const ScrollRestoration = () => {
           location.pathname,
           prevLocation.current.pathname,
           "/search"
+        ) &&
+        !isBothStartsWith(
+          location.pathname,
+          prevLocation.current.pathname,
+          "/home"
+        ) &&
+        !isBothStartsWith(
+          location.pathname,
+          prevLocation.current.pathname,
+          "/addroom"
         )
       ) {
         if (history.action === "POP") {

From da9127119ccac1fcb8fbc37b8d8b95a00aeb6355 Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Thu, 6 Apr 2023 05:12:17 +0900
Subject: [PATCH 16/43] Refactor: SelectDate

---
 src/pages/Home/Date.tsx       | 53 ++++++++++++++++++++++++-----------
 src/pages/Home/SelectDate.tsx |  3 +-
 2 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/src/pages/Home/Date.tsx b/src/pages/Home/Date.tsx
index 48c0119c7..11c74b0f0 100644
--- a/src/pages/Home/Date.tsx
+++ b/src/pages/Home/Date.tsx
@@ -3,23 +3,39 @@ import { useState } from "react";
 import MiniCircle from "components/MiniCircle";
 
 import hoverEventSet from "tools/hoverEventSet";
+import moment from "tools/moment";
 import theme from "tools/theme";
 
 type DateProps = {
   index: number;
   date: [number, number, number];
   type: Nullable<"today" | "all">;
+  width: PixelValue;
   selected: boolean;
   onClick: (date: [number, number, number]) => void;
 };
 
 const Date = (props: DateProps) => {
   const [isHover, setHover] = useState(false);
+  const week = moment(props.date).day();
+  const koWeek = ["일", "월", "화", "수", "목", "금", "토"];
 
-  const styleBox: CSS = {
-    width: "calc((100% - 42px) / 8)",
+  const style = {
+    width: props.width,
+  };
+  const styleKey = {
+    marginBottom: "4px",
+    ...theme.font10,
+    opacity: 0.632,
+    color:
+      week == 0 ? theme.red_text : week == 6 ? theme.blue_text : theme.black,
+    textAlign: "center" as any,
+  };
+  const styleBox = {
+    width: props.width,
+    height: props.width,
     borderRadius: "8px",
-    position: "relative",
+    position: "relative" as any,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -47,27 +63,30 @@ const Date = (props: DateProps) => {
       ? theme.blue_text
       : theme.black,
   };
-  const styleToday: CSS = {
-    position: "absolute",
+  const styleToday = {
+    position: "absolute" as any,
     top: "calc(50% + 8px)",
     left: "calc(50% - 2px)",
   };
 
   if (!props.date) return <div style={styleBox} />;
   return (
-    <div
-      style={styleBox}
-      onClick={() => props.onClick(props.date)}
-      {...hoverEventSet(setHover)}
-    >
-      <div style={styleDate}>
-        {props.type === "all" ? "전체" : props.date[2]}
-      </div>
-      {props.type === "today" && (
-        <div style={styleToday}>
-          <MiniCircle type="date" isSelected={props.selected} />
+    <div css={style}>
+      <div css={styleKey}>{props.type !== "all" && koWeek[week]}</div>
+      <div
+        css={styleBox}
+        onClick={() => props.onClick(props.date)}
+        {...hoverEventSet(setHover)}
+      >
+        <div css={styleDate}>
+          {props.type === "all" ? "전체" : props.date[2]}
         </div>
-      )}
+        {props.type === "today" && (
+          <div css={styleToday}>
+            <MiniCircle type="date" isSelected={props.selected} />
+          </div>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/src/pages/Home/SelectDate.tsx b/src/pages/Home/SelectDate.tsx
index fcb7d816e..c3d665b95 100644
--- a/src/pages/Home/SelectDate.tsx
+++ b/src/pages/Home/SelectDate.tsx
@@ -57,7 +57,7 @@ const SelectDate = (props: SelectDateProps) => {
     <>
       <div
         className="select-week"
-        style={{ display: "flex", columnGap: "6px", height: weekHeight }}
+        css={{ display: "flex", columnGap: "6px", alignItems: "end" }}
       >
         {week.map((day, index) => (
           <Date
@@ -65,6 +65,7 @@ const SelectDate = (props: SelectDateProps) => {
             index={day.index}
             date={[day.year, day.month, day.date]}
             type={day.type}
+            width={weekHeight as PixelValue}
             selected={day.date === props.selectedDate[2]}
             onClick={props.onClick}
           />

From fa11cb656cad93ebb868fc7bfd45f9441a402f6b Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Thu, 6 Apr 2023 05:31:15 +0900
Subject: [PATCH 17/43] Fix: InfoSection

---
 src/pages/Home/InfoSection.tsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/pages/Home/InfoSection.tsx b/src/pages/Home/InfoSection.tsx
index 776af373f..426c16cec 100644
--- a/src/pages/Home/InfoSection.tsx
+++ b/src/pages/Home/InfoSection.tsx
@@ -2,6 +2,7 @@ import { useMemo } from "react";
 import { Link } from "react-router-dom";
 
 import Button from "components/Button";
+import LoginButton from "components/LoginButton";
 import RLayout from "components/RLayout";
 import Room from "components/Room";
 
@@ -16,7 +17,6 @@ import BackgroundImage from "static/assets/BackgroundImage.jpg";
 import BackgroundImageDesktop from "static/assets/BackgroundImageDesktop.webp";
 import BackgroundImageMobile from "static/assets/BackgroundImageMobile.webp";
 import { ReactComponent as TaxiLogoWhite } from "static/assets/TaxiLogoWhite.svg";
-import LoginButton from "components/LoginButton";
 
 const InfoSection = () => {
   const styleContainer: CSS = {
@@ -37,11 +37,12 @@ const InfoSection = () => {
     inset: "0px",
     objectFit: "cover",
   };
-  const styleName: CSS = {
+  const styleTitle = {
     ...theme.font28,
     color: theme.white,
-    margin: "32px 0 12px",
+    margin: "0 0 12px",
   };
+  const styleSubTitle = { ...theme.font14, color: theme.white };
 
   const loginInfo = useRecoilValue(loginInfoDetailAtom);
   const isLogin = !!loginInfo?.id;
@@ -99,12 +100,17 @@ const InfoSection = () => {
       <RLayout.R1>
         <div style={{ padding: "25px 0 32px" }}>
           <TaxiLogoWhite />
-          <div style={styleName}>
-            {loginInfo?.nickname
+          <div css={{ height: "32px" }} />
+          <div css={styleTitle}>
+            {isLogin
               ? `안녕하세요, ${loginInfo?.nickname}님!`
-              : "안녕하세요!"}
+              : "카이스트 구성원 간 택시 동승자 모집 서비스, Taxi 입니다!"}
+          </div>
+          <div css={styleSubTitle}>
+            {isLogin
+              ? message
+              : "택시 동승으로 돈을 절약하고, 친구들과 더욱 가까워지세요."}
           </div>
-          <div style={{ ...theme.font14, color: theme.white }}>{message}</div>
           {room ? (
             <Link to={`/myroom/${room._id}`} style={{ textDecoration: "none" }}>
               <Room data={room} marginTop="24px" />

From 38e4a07b4122013a74df771126a53cd3b89f2f7e Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Thu, 6 Apr 2023 05:37:35 +0900
Subject: [PATCH 18/43] Fix: transition in Date

---
 src/pages/Home/Date.tsx       | 2 +-
 src/pages/Home/SelectDate.tsx | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/Home/Date.tsx b/src/pages/Home/Date.tsx
index 11c74b0f0..eeeedf1f5 100644
--- a/src/pages/Home/Date.tsx
+++ b/src/pages/Home/Date.tsx
@@ -48,7 +48,7 @@ const Date = (props: DateProps) => {
       : theme.white,
     boxShadow: theme.shadow,
     ...theme.cursor(),
-    transitionDuration: theme.duration,
+    transition: `background ${theme.duration}`,
   };
   const styleDate = {
     ...theme.font12,
diff --git a/src/pages/Home/SelectDate.tsx b/src/pages/Home/SelectDate.tsx
index c3d665b95..b2d7a7d48 100644
--- a/src/pages/Home/SelectDate.tsx
+++ b/src/pages/Home/SelectDate.tsx
@@ -38,6 +38,8 @@ type SelectDateProps = {
 
 const SelectDate = (props: SelectDateProps) => {
   const [weekHeight, setWeekHeight] = useState("30px");
+  const week = getWeekDates();
+
   const resizeEvent = () => {
     const week = document.querySelector<HTMLElement>(".select-week");
     if (!week) return;
@@ -51,7 +53,6 @@ const SelectDate = (props: SelectDateProps) => {
       window.removeEventListener("resize", resizeEvent);
     };
   }, []);
-  const week = getWeekDates();
 
   return (
     <>

From 8bbe703199266bec717d6f6748ce4df3852f1bd4 Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Thu, 6 Apr 2023 16:30:19 +0900
Subject: [PATCH 19/43] Add: randomTaxiSloganGenerator

---
 src/pages/Addroom/index.tsx                    | 12 ++++++------
 src/pages/Home/InfoSection.tsx                 | 18 ++++++++----------
 src/tools/random/index.ts                      |  8 ++++++++
 .../random/roomNames.js}                       |  4 ++--
 src/tools/random/taxiSlogans.ts                |  7 +++++++
 5 files changed, 31 insertions(+), 18 deletions(-)
 create mode 100644 src/tools/random/index.ts
 rename src/{static/randomRoomName.js => tools/random/roomNames.js} (96%)
 create mode 100644 src/tools/random/taxiSlogans.ts

diff --git a/src/pages/Addroom/index.tsx b/src/pages/Addroom/index.tsx
index e89476ee3..122aea3f3 100644
--- a/src/pages/Addroom/index.tsx
+++ b/src/pages/Addroom/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useCookies } from "react-cookie";
 import { useHistory } from "react-router-dom";
 
@@ -13,23 +13,22 @@ import {
   OptionPlace,
   OptionTime,
 } from "components/RoomOptions";
+import SuggestLogin from "components/SuggestLogin";
 import Title from "components/Title";
+import WhiteContainer from "components/WhiteContainer";
 import { MAX_PARTICIPATION } from "pages/Myroom";
 
 import FullParticipation from "./FullParticipation";
 
 import alertAtom from "atoms/alert";
+import loginInfoDetailAtom from "atoms/loginInfoDetail";
 import myRoomAtom from "atoms/myRoom";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 
 import { date2str, getToday, getToday10 } from "tools/moment";
+import { randomRoomNameGenerator } from "tools/random";
 import theme from "tools/theme";
 
-import randomRoomName from "static/randomRoomName";
-import loginInfoDetailAtom from "atoms/loginInfoDetail";
-import SuggestLogin from "components/SuggestLogin";
-import WhiteContainer from "components/WhiteContainer";
-
 const AddRoom = () => {
   const axios = useAxios();
   const onCall = useRef(false);
@@ -51,6 +50,7 @@ const AddRoom = () => {
   const [valueMaxPeople, setMaxPeople] = useState(4);
   const [valueTime, setTime] = useState([today10.hour(), today10.minute()]);
   const [calculatedTime, setCalculatedTime] = useState<Date | null>(null);
+  const randomRoomName = useMemo(randomRoomNameGenerator, []);
   const setAlert = useSetRecoilState(alertAtom);
   const [myRoom, setMyRoom] = useRecoilState(myRoomAtom);
   const isLogin = !!useRecoilValue(loginInfoDetailAtom)?.id;
diff --git a/src/pages/Home/InfoSection.tsx b/src/pages/Home/InfoSection.tsx
index 426c16cec..b84d8af67 100644
--- a/src/pages/Home/InfoSection.tsx
+++ b/src/pages/Home/InfoSection.tsx
@@ -11,6 +11,7 @@ import myRoomAtom from "atoms/myRoom";
 import { useRecoilValue } from "recoil";
 
 import moment, { getToday } from "tools/moment";
+import { randomTaxiSloganGenerator } from "tools/random";
 import theme from "tools/theme";
 
 import BackgroundImage from "static/assets/BackgroundImage.jpg";
@@ -19,6 +20,11 @@ import BackgroundImageMobile from "static/assets/BackgroundImageMobile.webp";
 import { ReactComponent as TaxiLogoWhite } from "static/assets/TaxiLogoWhite.svg";
 
 const InfoSection = () => {
+  const loginInfoDetail = useRecoilValue(loginInfoDetailAtom);
+  const isLogin = !!loginInfoDetail?.id;
+  const myRoom = useRecoilValue(myRoomAtom);
+  const randomTaxiSlogan = useMemo(randomTaxiSloganGenerator, []);
+
   const styleContainer: CSS = {
     position: "relative",
     height: "fit-content",
@@ -44,10 +50,6 @@ const InfoSection = () => {
   };
   const styleSubTitle = { ...theme.font14, color: theme.white };
 
-  const loginInfo = useRecoilValue(loginInfoDetailAtom);
-  const isLogin = !!loginInfo?.id;
-  const myRoom = useRecoilValue(myRoomAtom);
-
   const { message, room } = useMemo(() => {
     const sortedMyRoom =
       myRoom?.ongoing.slice().sort((a, b) => (a.time > b.time ? 1 : -1)) ?? [];
@@ -103,14 +105,10 @@ const InfoSection = () => {
           <div css={{ height: "32px" }} />
           <div css={styleTitle}>
             {isLogin
-              ? `안녕하세요, ${loginInfo?.nickname}님!`
+              ? `안녕하세요, ${loginInfoDetail?.nickname}님!`
               : "카이스트 구성원 간 택시 동승자 모집 서비스, Taxi 입니다!"}
           </div>
-          <div css={styleSubTitle}>
-            {isLogin
-              ? message
-              : "택시 동승으로 돈을 절약하고, 친구들과 더욱 가까워지세요."}
-          </div>
+          <div css={styleSubTitle}>{isLogin ? message : randomTaxiSlogan}</div>
           {room ? (
             <Link to={`/myroom/${room._id}`} style={{ textDecoration: "none" }}>
               <Room data={room} marginTop="24px" />
diff --git a/src/tools/random/index.ts b/src/tools/random/index.ts
new file mode 100644
index 000000000..7b8de10ee
--- /dev/null
+++ b/src/tools/random/index.ts
@@ -0,0 +1,8 @@
+import roomNames from "./roomNames";
+import taxiSlogans from "./taxiSlogans";
+
+const randomGenerator = (array: Array<string>) => () =>
+  array[Math.floor(Math.random() * array.length)];
+
+export const randomRoomNameGenerator = randomGenerator(roomNames);
+export const randomTaxiSloganGenerator = randomGenerator(taxiSlogans);
diff --git a/src/static/randomRoomName.js b/src/tools/random/roomNames.js
similarity index 96%
rename from src/static/randomRoomName.js
rename to src/tools/random/roomNames.js
index d6ead4019..ecb1101d1 100644
--- a/src/static/randomRoomName.js
+++ b/src/tools/random/roomNames.js
@@ -101,6 +101,6 @@ const roomNames = [
   "함께 타는 택시의 여유",
   "택시 동승, 새로운 경험",
 ];
-const randomRoomName = roomNames[Math.floor(Math.random() * roomNames.length)];
+// const randomRoomName = roomNames[Math.floor(Math.random() * roomNames.length)];
 
-export default randomRoomName;
+export default roomNames;
diff --git a/src/tools/random/taxiSlogans.ts b/src/tools/random/taxiSlogans.ts
new file mode 100644
index 000000000..d1024aa2c
--- /dev/null
+++ b/src/tools/random/taxiSlogans.ts
@@ -0,0 +1,7 @@
+const taxiSlogans = [
+  "택시 동승으로 돈을 절약하고, 더욱 가까워지세요.",
+  "함께 더 멀리, 함께 더 효율적으로!",
+  "동승의 힘, 더 빠르게, 더 저렴하게",
+];
+
+export default taxiSlogans;

From b2611b8c84c1d6bf56b45b65066d027ec5a28dd4 Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Thu, 6 Apr 2023 23:40:17 +0900
Subject: [PATCH 20/43] Remove: comment

---
 src/tools/random/roomNames.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/tools/random/roomNames.js b/src/tools/random/roomNames.js
index ecb1101d1..2a449e29b 100644
--- a/src/tools/random/roomNames.js
+++ b/src/tools/random/roomNames.js
@@ -101,6 +101,5 @@ const roomNames = [
   "함께 타는 택시의 여유",
   "택시 동승, 새로운 경험",
 ];
-// const randomRoomName = roomNames[Math.floor(Math.random() * roomNames.length)];
 
 export default roomNames;

From bccbbd662c5fa7c0654d716d3d97b1f363ddfa87 Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Sun, 9 Apr 2023 20:51:43 +0900
Subject: [PATCH 21/43] Add: "break-all" to InfoSection

---
 src/components/SuggestLogin.tsx | 6 ++++--
 src/pages/Home/InfoSection.tsx  | 1 +
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/SuggestLogin.tsx b/src/components/SuggestLogin.tsx
index c0be3b705..52063965f 100644
--- a/src/components/SuggestLogin.tsx
+++ b/src/components/SuggestLogin.tsx
@@ -1,6 +1,8 @@
+import { useLocation } from "react-router-dom";
+
 import LoginButton from "./LoginButton";
+
 import theme from "tools/theme";
-import { useLocation } from "react-router-dom";
 
 const SuggestLogin = () => {
   const { pathname, search } = useLocation();
@@ -10,7 +12,7 @@ const SuggestLogin = () => {
     <div>
       <div
         style={{
-          color: theme.purple,
+          color: theme.black,
           ...theme.font14,
           marginBottom: 12,
         }}
diff --git a/src/pages/Home/InfoSection.tsx b/src/pages/Home/InfoSection.tsx
index b84d8af67..86cea0565 100644
--- a/src/pages/Home/InfoSection.tsx
+++ b/src/pages/Home/InfoSection.tsx
@@ -45,6 +45,7 @@ const InfoSection = () => {
   };
   const styleTitle = {
     ...theme.font28,
+    wordBreak: "break-all" as any,
     color: theme.white,
     margin: "0 0 12px",
   };

From 8eb947b81d13e48a89c05748cb58c5d4e59b0210 Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Mon, 10 Apr 2023 14:41:41 +0900
Subject: [PATCH 22/43] Remove: color on SuggestLogin

---
 src/components/SuggestLogin.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/SuggestLogin.tsx b/src/components/SuggestLogin.tsx
index 52063965f..7ef1530d3 100644
--- a/src/components/SuggestLogin.tsx
+++ b/src/components/SuggestLogin.tsx
@@ -11,8 +11,7 @@ const SuggestLogin = () => {
   return (
     <div>
       <div
-        style={{
-          color: theme.black,
+        css={{
           ...theme.font14,
           marginBottom: 12,
         }}

From 73823c0da729d95dacfe472307ff357481936462 Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Mon, 10 Apr 2023 18:21:15 +0900
Subject: [PATCH 23/43] Fix: Terms

---
 src/components/ModalPopup/Terms.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/ModalPopup/Terms.tsx b/src/components/ModalPopup/Terms.tsx
index 3c51ddfaa..d1c57dce1 100644
--- a/src/components/ModalPopup/Terms.tsx
+++ b/src/components/ModalPopup/Terms.tsx
@@ -154,7 +154,8 @@ const Terms = () => {
         <br />- 개인정보의 수집 및 이용 목적 : 홈페이지 회원가입 및 관리
         <br />- 수집 및 이용되는 개인정보의 항목 : 이메일, 이름, 접속 로그, 접속
         IP 정보, 학번
-        <br />- 개인정보의 보유 및 이용 기간 : 탈퇴일로부터 1년
+        <br />- 개인정보의 보유 및 이용 기간 : 개인정보 수집.이용 동의일로부터,
+        탈퇴일 이후 1년까지
         <br />
         3. 개인정보 수집 및 이용을 거부하실 수 있으나, 이는 서비스 제공에
         필수적으로 제공되어지는 정보이므로, 동의를 거부하실 경우 택시 서비스를

From 71431c104d44be8fc3c052c1a1dbe1b2247997eb Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Tue, 11 Apr 2023 02:45:10 +0900
Subject: [PATCH 24/43] Remove: meaningless zIndex

---
 src/components/Room/index.jsx                 |  1 -
 src/pages/Chatting/Header/FullChatHeader.jsx  |  2 +-
 src/pages/Chatting/Header/SideChatHeader.jsx  |  1 -
 src/pages/Chatting/MessagesBody/ChatSet.jsx   | 20 +++++--------------
 .../Chatting/MessagesBody/ImageFullscreen.jsx |  2 +-
 src/pages/Myroom/R2Myroom.jsx                 |  2 +-
 src/pages/Search/ScrollButton.tsx             |  2 +-
 src/tools/theme.ts                            |  4 +---
 8 files changed, 10 insertions(+), 24 deletions(-)

diff --git a/src/components/Room/index.jsx b/src/components/Room/index.jsx
index dca5098ac..dae77af77 100644
--- a/src/components/Room/index.jsx
+++ b/src/components/Room/index.jsx
@@ -92,7 +92,6 @@ const Room = (props) => {
       theme.shadow +
       (props.selected ? `, inset 0 0 0 0.5px ${theme.purple}` : ""),
     ...theme.cursor(),
-    zIndex: 0,
   };
   const styleTop = {
     display: "flex",
diff --git a/src/pages/Chatting/Header/FullChatHeader.jsx b/src/pages/Chatting/Header/FullChatHeader.jsx
index a5fac8358..e7ccc6e31 100644
--- a/src/pages/Chatting/Header/FullChatHeader.jsx
+++ b/src/pages/Chatting/Header/FullChatHeader.jsx
@@ -40,7 +40,7 @@ const Header = (props) => {
     overflow: "hidden",
     background: theme.white,
     boxShadow: theme.shadow_3,
-    zIndex: theme.zIndex_header,
+    zIndex: theme.zIndex_nav,
     height: `${64 + (isOpen ? bodyHeight : 0)}px`,
     paddingTop: "calc(env(safe-area-inset-top) - 5px)",
     transition: "height 0.3s",
diff --git a/src/pages/Chatting/Header/SideChatHeader.jsx b/src/pages/Chatting/Header/SideChatHeader.jsx
index f046da0c6..fafbcd60a 100644
--- a/src/pages/Chatting/Header/SideChatHeader.jsx
+++ b/src/pages/Chatting/Header/SideChatHeader.jsx
@@ -16,7 +16,6 @@ const SideChatHeader = (props) => {
     alignItems: "center",
     justifyContent: "space-between",
     padding: "12px 20px",
-    zIndex: 1,
   };
   const styleIcon = { color: theme.white, ...theme.cursor() };
   const styleInfoWrap = {
diff --git a/src/pages/Chatting/MessagesBody/ChatSet.jsx b/src/pages/Chatting/MessagesBody/ChatSet.jsx
index b6c5ba668..50e77c479 100644
--- a/src/pages/Chatting/MessagesBody/ChatSet.jsx
+++ b/src/pages/Chatting/MessagesBody/ChatSet.jsx
@@ -106,7 +106,6 @@ const ChatAccount = (props) => {
             </div>
           </div>
         )}
-
         <div
           style={{
             boxShadow: theme.shadow_gray_button_inset,
@@ -124,17 +123,9 @@ const ChatAccount = (props) => {
           {...hoverEventSet(() => {}, setIsClicked)}
         >
           {isCopied ? (
-            <CheckIcon
-              style={{
-                fontSize: "16px",
-              }}
-            />
+            <CheckIcon style={{ fontSize: "16px" }} />
           ) : (
-            <ContentCopyIcon
-              style={{
-                fontSize: "16px",
-              }}
-            />
+            <ContentCopyIcon style={{ fontSize: "16px" }} />
           )}
         </div>
       </div>
@@ -143,11 +134,10 @@ const ChatAccount = (props) => {
           ...theme.overlay(isClicked),
           position: "relative",
           width: "210px",
-          height: "90px",
-          top: "-90px",
-          zIndex: theme.zIndex_modal,
+          height: "58px",
+          top: "-58px",
         }}
-      ></div>
+      />
     </div>
   );
 };
diff --git a/src/pages/Chatting/MessagesBody/ImageFullscreen.jsx b/src/pages/Chatting/MessagesBody/ImageFullscreen.jsx
index dc9302f41..8effdf74b 100644
--- a/src/pages/Chatting/MessagesBody/ImageFullscreen.jsx
+++ b/src/pages/Chatting/MessagesBody/ImageFullscreen.jsx
@@ -12,7 +12,7 @@ const ImageFullscreen = (props) => {
     width: "100vw",
     height: "100vh",
     backgroundColor: theme.black_40,
-    zIndex: theme.zIndex_fullimage,
+    zIndex: theme.zIndex_background,
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
diff --git a/src/pages/Myroom/R2Myroom.jsx b/src/pages/Myroom/R2Myroom.jsx
index 0f12ec79a..95721fbdd 100644
--- a/src/pages/Myroom/R2Myroom.jsx
+++ b/src/pages/Myroom/R2Myroom.jsx
@@ -177,7 +177,7 @@ const R2Myroom = (props) => {
             )}
           </WhiteContainer>
           <div style={{ height: "100%", minHeight: 0 }}>
-            <WhiteContainer padding="0px" style={{ height: "100%", zIndex: 0 }}>
+            <WhiteContainer padding="0px" style={{ height: "100%" }}>
               <SideChat roomId={props.roomId} />
             </WhiteContainer>
           </div>
diff --git a/src/pages/Search/ScrollButton.tsx b/src/pages/Search/ScrollButton.tsx
index d4d8d96e0..df94677ff 100644
--- a/src/pages/Search/ScrollButton.tsx
+++ b/src/pages/Search/ScrollButton.tsx
@@ -9,7 +9,7 @@ const ScrollButton = () => {
         position: "fixed",
         bottom: 72,
         right: 16,
-        zIndex: theme.zIndex_modal,
+        zIndex: theme.zIndex_nav,
         height: 48,
         width: 48,
         borderRadius: "50%",
diff --git a/src/tools/theme.ts b/src/tools/theme.ts
index e4034927b..7c26488e1 100644
--- a/src/tools/theme.ts
+++ b/src/tools/theme.ts
@@ -121,11 +121,9 @@ const theme = {
 
   // zIndex
   zIndex_nav: 10,
+  zIndex_background: 20,
   zIndex_headerBar: 40,
   zIndex_modal: 50,
-  zIndex_background: 10,
-  zIndex_header: 20,
-  zIndex_fullimage: 20,
   zIndex_alert: 60,
 };
 

From 618390534103e6f0ef26c7a6cacacc52af48c19a Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Tue, 11 Apr 2023 02:55:46 +0900
Subject: [PATCH 25/43] Refactor: CSSVariablesProvider

---
 .../Skeleton/CSSVariablesProvider.tsx         | 27 ++++++++++++++-----
 src/pages/Chatting/Header/FullChatHeader.jsx  |  2 +-
 .../Chatting/MessageForm/MessageForm.tsx      |  1 +
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/components/Skeleton/CSSVariablesProvider.tsx b/src/components/Skeleton/CSSVariablesProvider.tsx
index fb7323d5d..62cc369a6 100644
--- a/src/components/Skeleton/CSSVariablesProvider.tsx
+++ b/src/components/Skeleton/CSSVariablesProvider.tsx
@@ -1,16 +1,29 @@
 import { useEffect } from "react";
 
+const syncHeight = () => {
+  const innerHeight = window.innerHeight || 0;
+  const visualHeight = visualViewport?.height || innerHeight;
+
+  document.documentElement.style.setProperty(
+    "--window-inner-height",
+    `${innerHeight}px`
+  );
+  document.documentElement.style.setProperty(
+    "--window-visual-height",
+    `${visualHeight}px`
+  );
+};
+
 const CSSVariablesProvider = () => {
   useEffect(() => {
-    const syncHeight = () =>
-      document.documentElement.style.setProperty(
-        "--window-inner-height",
-        `${window.innerHeight}px`
-      );
-
     syncHeight();
     window.addEventListener("resize", syncHeight);
-    return () => window.removeEventListener("resize", syncHeight);
+    visualViewport?.addEventListener("resize", syncHeight);
+
+    return () => {
+      window.removeEventListener("resize", syncHeight);
+      visualViewport?.removeEventListener("resize", syncHeight);
+    };
   }, []);
   return null;
 };
diff --git a/src/pages/Chatting/Header/FullChatHeader.jsx b/src/pages/Chatting/Header/FullChatHeader.jsx
index e7ccc6e31..d3a93d1e9 100644
--- a/src/pages/Chatting/Header/FullChatHeader.jsx
+++ b/src/pages/Chatting/Header/FullChatHeader.jsx
@@ -28,7 +28,7 @@ const Header = (props) => {
     width: "100%",
     height: "100%",
     background: theme.black_40,
-    zIndex: theme.zIndex_background,
+    zIndex: theme.zIndex_nav - 1,
     pointerEvents: isOpen ? "auto" : "none",
     opacity: isOpen ? 1 : 0,
     transition: "opacity 0.3s",
diff --git a/src/pages/Chatting/MessageForm/MessageForm.tsx b/src/pages/Chatting/MessageForm/MessageForm.tsx
index 4f26db553..c2ce000fa 100644
--- a/src/pages/Chatting/MessageForm/MessageForm.tsx
+++ b/src/pages/Chatting/MessageForm/MessageForm.tsx
@@ -32,6 +32,7 @@ const MessageForm = (props: MessageFormProps) => {
         width: "100%",
         height: contHeight,
         position: props.isSideChat ? "absolute" : "fixed",
+        zIndex: theme.zIndex_nav - 2,
         left: "0px",
         bottom: "0px",
         display: "flex",

From ebf52a1703d5b7c524e19edb6fe02249c0491099 Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Tue, 11 Apr 2023 02:58:42 +0900
Subject: [PATCH 26/43] Add: tools/isMobile

---
 .../Skeleton/VirtualKeyboardDetector.tsx           | 12 +++---------
 src/tools/isMobile.ts                              | 14 ++++++++++++++
 2 files changed, 17 insertions(+), 9 deletions(-)
 create mode 100644 src/tools/isMobile.ts

diff --git a/src/components/Skeleton/VirtualKeyboardDetector.tsx b/src/components/Skeleton/VirtualKeyboardDetector.tsx
index 60c1051bb..f0b350c5f 100644
--- a/src/components/Skeleton/VirtualKeyboardDetector.tsx
+++ b/src/components/Skeleton/VirtualKeyboardDetector.tsx
@@ -3,17 +3,11 @@ import { useEffect } from "react";
 import isVirtualKeyboardDetectedAtom from "atoms/isVirtualKeyboardDetected";
 import { useSetRecoilState } from "recoil";
 
+import isMobile from "tools/isMobile";
+
 const VirtualKeyboardDetector = () => {
   const setIsVKDetected = useSetRecoilState(isVirtualKeyboardDetectedAtom);
-
-  const userAgent = navigator.userAgent.toLowerCase();
-  const maxTouchPoints = navigator.maxTouchPoints || 0;
-  const isAndroid = userAgent.includes("android");
-  const isIOS =
-    userAgent.includes("iphone") ||
-    userAgent.includes("ipad") ||
-    userAgent.includes("ipod") ||
-    (userAgent.includes("macintosh") && maxTouchPoints > 1);
+  const [isAndroid, isIOS] = isMobile();
 
   useEffect(() => {
     /*
diff --git a/src/tools/isMobile.ts b/src/tools/isMobile.ts
new file mode 100644
index 000000000..51ed634c5
--- /dev/null
+++ b/src/tools/isMobile.ts
@@ -0,0 +1,14 @@
+const isMobile = () => {
+  const userAgent = navigator.userAgent.toLowerCase();
+  const maxTouchPoints = navigator.maxTouchPoints || 0;
+  const isAndroid: boolean = userAgent.includes("android");
+  const isIOS: boolean =
+    userAgent.includes("iphone") ||
+    userAgent.includes("ipad") ||
+    userAgent.includes("ipod") ||
+    (userAgent.includes("macintosh") && maxTouchPoints > 1);
+
+  return [isAndroid, isIOS];
+};
+
+export default isMobile;

From 0b0e652733121bd23f1d41ece576a06dc6f0b70f Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Tue, 11 Apr 2023 13:47:19 +0900
Subject: [PATCH 27/43] Refactor: Chat scrolled container is "absolute", not
 "body"

---
 src/pages/Chatting/Container/index.tsx        | 22 ++++++++
 src/pages/Chatting/Header/FullChatHeader.jsx  | 28 +++++-----
 src/pages/Chatting/Header/Header.jsx          | 20 -------
 src/pages/Chatting/Header/SideChatHeader.jsx  | 17 +++---
 src/pages/Chatting/Header/index.tsx           | 17 ++++++
 .../MessageForm/FullChatMessageForm.tsx       | 11 ++++
 .../{MessageForm.tsx => index.tsx}            |  6 +--
 .../{MessagesBody.jsx => index.jsx}           | 52 ++++++++-----------
 src/pages/Chatting/index.jsx                  | 21 ++++----
 9 files changed, 108 insertions(+), 86 deletions(-)
 create mode 100644 src/pages/Chatting/Container/index.tsx
 delete mode 100644 src/pages/Chatting/Header/Header.jsx
 create mode 100644 src/pages/Chatting/Header/index.tsx
 rename src/pages/Chatting/MessageForm/{MessageForm.tsx => index.tsx} (92%)
 rename src/pages/Chatting/MessagesBody/{MessagesBody.jsx => index.jsx} (83%)

diff --git a/src/pages/Chatting/Container/index.tsx b/src/pages/Chatting/Container/index.tsx
new file mode 100644
index 000000000..6e614e022
--- /dev/null
+++ b/src/pages/Chatting/Container/index.tsx
@@ -0,0 +1,22 @@
+type ContainerProps = {
+  children: React.ReactNode;
+};
+
+const Container = ({ children }: ContainerProps) => (
+  <div
+    css={{
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      overflow: "hidden",
+      display: "flex",
+      flexDirection: "column",
+      top: "0px",
+      left: "0px",
+    }}
+  >
+    {children}
+  </div>
+);
+
+export default Container;
diff --git a/src/pages/Chatting/Header/FullChatHeader.jsx b/src/pages/Chatting/Header/FullChatHeader.jsx
index d3a93d1e9..928f7709f 100644
--- a/src/pages/Chatting/Header/FullChatHeader.jsx
+++ b/src/pages/Chatting/Header/FullChatHeader.jsx
@@ -22,6 +22,9 @@ const Header = (props) => {
   const history = useHistory();
   const reactiveState = useR2state();
 
+  const style = {
+    height: "calc(64px + max(5px, env(safe-area-inset-top)))",
+  };
   const styleBgd = {
     position: "fixed",
     top: "5px",
@@ -34,15 +37,14 @@ const Header = (props) => {
     transition: "opacity 0.3s",
   };
   const styleHeader = {
-    position: "fixed",
-    top: "5px",
+    position: "absolute",
     width: "100%",
     overflow: "hidden",
     background: theme.white,
     boxShadow: theme.shadow_3,
     zIndex: theme.zIndex_nav,
     height: `${64 + (isOpen ? bodyHeight : 0)}px`,
-    paddingTop: "calc(env(safe-area-inset-top) - 5px)",
+    paddingTop: "max(5px, env(safe-area-inset-top))",
     transition: "height 0.3s",
   };
   const styleHeaderTop = {
@@ -80,10 +82,10 @@ const Header = (props) => {
   }, [props.info]);
 
   return (
-    <>
-      <div style={styleBgd} onClick={() => setOpen(false)} />
-      <div style={styleHeader}>
-        <div style={styleHeaderTop}>
+    <div css={style}>
+      <div css={styleBgd} onClick={() => setOpen(false)} />
+      <div css={styleHeader}>
+        <div css={styleHeaderTop}>
           <ArrowBackRoundedIcon
             style={styleIcon}
             onClick={
@@ -92,12 +94,12 @@ const Header = (props) => {
                 : () => history.goBack()
             }
           />
-          <div style={styleInfo}>
-            <div style={{ ...theme.font18, color: theme.purple, ...styleText }}>
+          <div css={styleInfo}>
+            <div css={{ ...theme.font18, color: theme.purple, ...styleText }}>
               {props.info?.name}
             </div>
             <div
-              style={{ ...theme.font12, color: theme.gray_text, ...styleText }}
+              css={{ ...theme.font12, color: theme.gray_text, ...styleText }}
             >
               {props?.info?.from?.koName}&nbsp; → &nbsp;
               {props?.info?.to?.koName}
@@ -121,14 +123,14 @@ const Header = (props) => {
             />
           )}
         </div>
-        <div style={{ opacity: isOpen ? 1 : 0, transition: "opacity 0.3s" }}>
+        <div css={{ opacity: isOpen ? 1 : 0, transition: "opacity 0.3s" }}>
           <DottedLine direction="row" margin="0 16px" />
         </div>
-        <div ref={bodyRef} style={{ padding: "16px" }}>
+        <div ref={bodyRef} css={{ padding: "16px" }}>
           <HeaderBody info={props.info} recallEvent={props.recallEvent} />
         </div>
       </div>
-    </>
+    </div>
   );
 };
 Header.propTypes = {
diff --git a/src/pages/Chatting/Header/Header.jsx b/src/pages/Chatting/Header/Header.jsx
deleted file mode 100644
index c1d6ccb79..000000000
--- a/src/pages/Chatting/Header/Header.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import PropTypes from "prop-types";
-
-import FullChatHeader from "./FullChatHeader";
-import SideChatHeader from "./SideChatHeader";
-
-const Header = (props) => {
-  return props.isSideChat ? (
-    <SideChatHeader info={props.info} />
-  ) : (
-    <FullChatHeader info={props.info} recallEvent={props.recallEvent} />
-  );
-};
-
-Header.propTypes = {
-  isSideChat: PropTypes.bool,
-  info: PropTypes.any,
-  recallEvent: PropTypes.func,
-};
-
-export default Header;
diff --git a/src/pages/Chatting/Header/SideChatHeader.jsx b/src/pages/Chatting/Header/SideChatHeader.jsx
index fafbcd60a..66b383189 100644
--- a/src/pages/Chatting/Header/SideChatHeader.jsx
+++ b/src/pages/Chatting/Header/SideChatHeader.jsx
@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import { useHistory } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 
 import theme from "tools/theme";
 
@@ -34,21 +34,20 @@ const SideChatHeader = (props) => {
   };
 
   return (
-    <div style={styleBox}>
+    <div css={styleBox}>
       <ArrowBackRoundedIcon
         style={styleIcon}
         onClick={() => history.goBack()}
       />
-      <div style={styleInfoWrap}>
-        <div style={{ ...theme.font18, ...styleInfo }}>{props.info?.name}</div>
-        <div style={{ ...theme.font12, ...styleInfo }}>
+      <div css={styleInfoWrap}>
+        <div css={{ ...theme.font18, ...styleInfo }}>{props.info?.name}</div>
+        <div css={{ ...theme.font12, ...styleInfo }}>
           {props?.info?.from?.koName}&nbsp; → &nbsp;{props?.info?.to?.koName}
         </div>
       </div>
-      <OpenInFullRoundedIcon
-        style={{ ...styleIcon, fontSize: "22px" }}
-        onClick={() => history.replace(`/chatting/${props.info?._id}`)}
-      />
+      <Link to={`/chatting/${props.info?._id}`} replace>
+        <OpenInFullRoundedIcon style={{ ...styleIcon, fontSize: "22px" }} />
+      </Link>
     </div>
   );
 };
diff --git a/src/pages/Chatting/Header/index.tsx b/src/pages/Chatting/Header/index.tsx
new file mode 100644
index 000000000..226293c35
--- /dev/null
+++ b/src/pages/Chatting/Header/index.tsx
@@ -0,0 +1,17 @@
+import FullChatHeader from "./FullChatHeader";
+import SideChatHeader from "./SideChatHeader";
+
+type HeaderProps = {
+  layoutType: "sidechat" | "fullchat";
+  info: any; // fixme
+  recallEvent?: () => void; // fixme
+};
+
+const Header = ({ layoutType, info, recallEvent }: HeaderProps) =>
+  layoutType === "sidechat" ? (
+    <SideChatHeader info={info} />
+  ) : (
+    <FullChatHeader info={info} recallEvent={recallEvent} />
+  );
+
+export default Header;
diff --git a/src/pages/Chatting/MessageForm/FullChatMessageForm.tsx b/src/pages/Chatting/MessageForm/FullChatMessageForm.tsx
index 63958bd3f..f0d8b8842 100644
--- a/src/pages/Chatting/MessageForm/FullChatMessageForm.tsx
+++ b/src/pages/Chatting/MessageForm/FullChatMessageForm.tsx
@@ -133,6 +133,17 @@ const FullChatMessageForm = (props: FullChatMessageFormProps) => {
     textareaContRef.current.style.height = cacheHeight;
     setFormHeight(newHeight);
   };
+
+  // // REMOVE ME
+  // useEffect(() => {
+  //   const interval = setInterval(() => {
+  //     const innerHeight = window.innerHeight || 0;
+  //     const visualHeight = visualViewport?.height || innerHeight;
+  //     setMessage(`${innerHeight} ${visualHeight}`);
+  //   }, 100);
+  //   return () => clearInterval(interval);
+  // }, []);
+
   useEffect(() => {
     resizeEvent();
     window.addEventListener("resize", resizeEvent);
diff --git a/src/pages/Chatting/MessageForm/MessageForm.tsx b/src/pages/Chatting/MessageForm/index.tsx
similarity index 92%
rename from src/pages/Chatting/MessageForm/MessageForm.tsx
rename to src/pages/Chatting/MessageForm/index.tsx
index c2ce000fa..01d7af9b2 100644
--- a/src/pages/Chatting/MessageForm/MessageForm.tsx
+++ b/src/pages/Chatting/MessageForm/index.tsx
@@ -28,13 +28,9 @@ const MessageForm = (props: MessageFormProps) => {
 
   return (
     <div
-      style={{
-        width: "100%",
+      css={{
         height: contHeight,
-        position: props.isSideChat ? "absolute" : "fixed",
         zIndex: theme.zIndex_nav - 2,
-        left: "0px",
-        bottom: "0px",
         display: "flex",
         flexDirection: "column",
         justifyContent: "flex-end",
diff --git a/src/pages/Chatting/MessagesBody/MessagesBody.jsx b/src/pages/Chatting/MessagesBody/index.jsx
similarity index 83%
rename from src/pages/Chatting/MessagesBody/MessagesBody.jsx
rename to src/pages/Chatting/MessagesBody/index.jsx
index 6f9cbd96d..3da99cfaf 100644
--- a/src/pages/Chatting/MessagesBody/MessagesBody.jsx
+++ b/src/pages/Chatting/MessagesBody/index.jsx
@@ -39,7 +39,7 @@ const MessagesBody = (props) => {
       setPath,
       setName,
       setReportedId,
-      isSideChat: props.isSideChat,
+      isSideChat: props.layoutType === "sidechat",
     };
 
     props.chats.forEach((item) => {
@@ -140,32 +140,27 @@ const MessagesBody = (props) => {
   };
 
   return (
-    <div style={{ height: "100%", overflow: "auto" }}>
-      <div
-        className="chatting-body"
-        style={{
-          marginTop: props.isSideChat ? undefined : "69px",
-          marginBottom: props.marginBottom,
-          paddingBottom: "12px",
-          height: `calc(100% - ${props.marginBottom} - ${
-            props.isSideChat ? "0px" : "69px"
-          })`,
-          width: "100%",
-          overflow: "auto",
-          boxSizing: "border-box",
-        }}
-        ref={props.forwardedRef}
-        onScroll={props.handleScroll}
-      >
-        {chats}
-        <PopupReport
-          isOpen={isOpen}
-          onClose={onClose}
-          path={path}
-          name={name}
-          reportedId={reportedId}
-        />
-      </div>
+    <div
+      className="chatting-body"
+      css={{
+        flexBasis: "1px",
+        flexGrow: 1,
+        position: "relative",
+        overflow: "auto",
+        boxSizing: "border-box",
+        paddingBottom: "12px",
+      }}
+      ref={props.forwardedRef}
+      onScroll={props.handleScroll}
+    >
+      {chats}
+      <PopupReport
+        isOpen={isOpen}
+        onClose={onClose}
+        path={path}
+        name={name}
+        reportedId={reportedId}
+      />
     </div>
   );
 };
@@ -173,12 +168,11 @@ const MessagesBody = (props) => {
 MessagesBody.propTypes = {
   chats: PropTypes.array,
   user: PropTypes.object,
-  isSideChat: PropTypes.bool,
+  layoutType: PropTypes.string,
   forwardedRef: PropTypes.any,
   handleScroll: PropTypes.func,
   isBottomOnScroll: PropTypes.func,
   scrollToBottom: PropTypes.func,
-  marginBottom: PropTypes.string,
   setIsOpen: PropTypes.func,
 };
 
diff --git a/src/pages/Chatting/index.jsx b/src/pages/Chatting/index.jsx
index c1fd57a36..e03d7cf91 100644
--- a/src/pages/Chatting/index.jsx
+++ b/src/pages/Chatting/index.jsx
@@ -9,9 +9,10 @@ import useDateToken from "hooks/useDateToken";
 import { useR2state } from "hooks/useReactiveState";
 import { useAxios, useQuery } from "hooks/useTaxiAPI";
 
-import Header from "./Header/Header";
-import MessageForm from "./MessageForm/MessageForm";
-import MessagesBody from "./MessagesBody/MessagesBody";
+import Container from "./Container";
+import Header from "./Header";
+import MessageForm from "./MessageForm";
+import MessagesBody from "./MessagesBody";
 
 import loginInfoDetailAtom from "atoms/loginInfoDetail";
 import { useRecoilValue } from "recoil";
@@ -32,8 +33,7 @@ const Chatting = (props) => {
 
   const [chats, setChats] = useStateWithCallbackLazy([]);
   const [showNewMessage, setShowNewMessage] = useState(false);
-  const [messageFormHeight, setMessageFormHeight] =
-    useStateWithCallbackLazy("48px");
+  const [, setMessageFormHeight] = useStateWithCallbackLazy("48px");
 
   const socket = useRef(undefined);
   const reactiveState = useR2state();
@@ -260,22 +260,23 @@ const Chatting = (props) => {
     return false;
   };
 
+  const layoutType = props.isSideChat ? "sidechat" : "fullchat";
+
   return (
-    <>
+    <Container>
       <Header
-        isSideChat={props.isSideChat}
+        layoutType={layoutType}
         info={headerInfo}
         recallEvent={fetchHeaderInfo}
       />
       <MessagesBody
-        isSideChat={props.isSideChat}
+        layoutType={layoutType} // fixme : is required?
         chats={chats}
         user={userInfoDetail}
         forwardedRef={messagesBody}
         handleScroll={handleScroll}
         isBottomOnScroll={isBottomOnScroll}
         scrollToBottom={() => scrollToBottom(false)}
-        marginBottom={messageFormHeight}
       />
       <MessageForm
         isSideChat={props.isSideChat}
@@ -286,7 +287,7 @@ const Chatting = (props) => {
         onClickNewMessage={() => scrollToBottom(true)}
         setContHeight={handleMessageFormHeight}
       />
-    </>
+    </Container>
   );
 };
 

From 120196dcadf4e4213f5ba86900825213360e8603 Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Tue, 11 Apr 2023 14:38:57 +0900
Subject: [PATCH 28/43] Rename: FullChat

---
 src/pages/Chatting/FullChat.tsx          | 16 ++++++++++++++
 src/pages/Chatting/MessageForm/index.tsx |  4 ++--
 src/pages/Chatting/SideChat.jsx          | 28 ------------------------
 src/pages/Chatting/SideChat.tsx          | 25 +++++++++++++++++++++
 src/pages/Chatting/WrapChat.jsx          | 10 ---------
 src/pages/Chatting/index.jsx             | 11 ++++------
 src/routes.ts                            |  2 +-
 7 files changed, 48 insertions(+), 48 deletions(-)
 create mode 100644 src/pages/Chatting/FullChat.tsx
 delete mode 100644 src/pages/Chatting/SideChat.jsx
 create mode 100644 src/pages/Chatting/SideChat.tsx
 delete mode 100644 src/pages/Chatting/WrapChat.jsx

diff --git a/src/pages/Chatting/FullChat.tsx b/src/pages/Chatting/FullChat.tsx
new file mode 100644
index 000000000..df4b4b4a2
--- /dev/null
+++ b/src/pages/Chatting/FullChat.tsx
@@ -0,0 +1,16 @@
+import { useParams } from "react-router-dom";
+
+import useDisableScrollEffect from "hooks/useDisableScrollEffect";
+
+import Chatting from "./index";
+
+const FullChat = () => {
+  const { roomId } = useParams() as { roomId: string };
+
+  // 전체화면 챗에서는 body의 스크롤을 막습니다.
+  useDisableScrollEffect(true);
+
+  return <Chatting roomId={roomId} layoutType="fullchat" />;
+};
+
+export default FullChat;
diff --git a/src/pages/Chatting/MessageForm/index.tsx b/src/pages/Chatting/MessageForm/index.tsx
index 01d7af9b2..d4ea3379f 100644
--- a/src/pages/Chatting/MessageForm/index.tsx
+++ b/src/pages/Chatting/MessageForm/index.tsx
@@ -9,7 +9,7 @@ import { useRecoilValue } from "recoil";
 import theme from "tools/theme";
 
 type MessageFormProps = {
-  isSideChat: boolean;
+  layoutType: "sidechat" | "fullchat";
   showNewMessage: boolean;
   handleSendMessage: (message: string) => boolean;
   handleSendImage: (image: File) => void;
@@ -38,7 +38,7 @@ const MessageForm = (props: MessageFormProps) => {
         boxShadow: theme.shadow_clicked,
         backgroundColor: theme.white,
         paddingBottom:
-          props.isSideChat || isVKDetected
+          props.layoutType === "sidechat" || isVKDetected
             ? "0px"
             : "env(safe-area-inset-bottom)",
       }}
diff --git a/src/pages/Chatting/SideChat.jsx b/src/pages/Chatting/SideChat.jsx
deleted file mode 100644
index 8da1f5de1..000000000
--- a/src/pages/Chatting/SideChat.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import PropTypes from "prop-types";
-
-import Chatting from "pages/Chatting";
-
-import theme from "tools/theme";
-
-const SideChat = ({ roomId }) => {
-  const styleSideChat = {
-    display: "flex",
-    flexDirection: "column",
-    height: "100%",
-    borderRadius: "12px",
-    overflow: "hidden",
-    boxShadow: theme.shadow,
-    backgroundColor: theme.white,
-  };
-  return (
-    <div style={styleSideChat}>
-      <Chatting roomId={roomId} isSideChat />
-    </div>
-  );
-};
-
-SideChat.propTypes = {
-  roomId: PropTypes.string,
-};
-
-export default SideChat;
diff --git a/src/pages/Chatting/SideChat.tsx b/src/pages/Chatting/SideChat.tsx
new file mode 100644
index 000000000..afccf5580
--- /dev/null
+++ b/src/pages/Chatting/SideChat.tsx
@@ -0,0 +1,25 @@
+import Chatting from "./index";
+
+import theme from "tools/theme";
+
+type SideChatProps = {
+  roomId: string;
+};
+
+const SideChat = ({ roomId }: SideChatProps) => (
+  <div
+    css={{
+      display: "flex",
+      flexDirection: "column" as any,
+      height: "100%",
+      borderRadius: "12px",
+      overflow: "hidden",
+      boxShadow: theme.shadow,
+      backgroundColor: theme.white,
+    }}
+  >
+    <Chatting roomId={roomId} layoutType="sidechat" />
+  </div>
+);
+
+export default SideChat;
diff --git a/src/pages/Chatting/WrapChat.jsx b/src/pages/Chatting/WrapChat.jsx
deleted file mode 100644
index 33e81eeb1..000000000
--- a/src/pages/Chatting/WrapChat.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useParams } from "react-router-dom";
-
-import Chatting from "pages/Chatting";
-
-const WrapChat = () => {
-  const { roomId } = useParams();
-  return <Chatting roomId={roomId} isSideChat={false} />;
-};
-
-export default WrapChat;
diff --git a/src/pages/Chatting/index.jsx b/src/pages/Chatting/index.jsx
index e03d7cf91..fc2d4a01a 100644
--- a/src/pages/Chatting/index.jsx
+++ b/src/pages/Chatting/index.jsx
@@ -246,7 +246,6 @@ const Chatting = (props) => {
       }
     }
   };
-
   const handleSendAccount = (account) => {
     if (!sendingMessage.current) {
       sendingMessage.current = true;
@@ -260,17 +259,15 @@ const Chatting = (props) => {
     return false;
   };
 
-  const layoutType = props.isSideChat ? "sidechat" : "fullchat";
-
   return (
     <Container>
       <Header
-        layoutType={layoutType}
+        layoutType={props.layoutType}
         info={headerInfo}
         recallEvent={fetchHeaderInfo}
       />
       <MessagesBody
-        layoutType={layoutType} // fixme : is required?
+        layoutType={props.layoutType} // fixme : is required?
         chats={chats}
         user={userInfoDetail}
         forwardedRef={messagesBody}
@@ -279,7 +276,7 @@ const Chatting = (props) => {
         scrollToBottom={() => scrollToBottom(false)}
       />
       <MessageForm
-        isSideChat={props.isSideChat}
+        layoutType={props.layoutType}
         handleSendMessage={handleSendMessage}
         handleSendImage={handleSendImage}
         handleSendAccount={handleSendAccount}
@@ -292,7 +289,7 @@ const Chatting = (props) => {
 };
 
 Chatting.propTypes = {
-  isSideChat: PropTypes.bool,
+  layoutType: PropTypes.oneOf(["sidechat", "fullchat"]),
   roomId: PropTypes.string,
 };
 
diff --git a/src/routes.ts b/src/routes.ts
index ee1767144..9223474b0 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -44,7 +44,7 @@ const routes = [
   },
   {
     path: "/chatting/:roomId",
-    component: lazy(() => import("pages/Chatting/WrapChat")),
+    component: lazy(() => import("pages/Chatting/FullChat")),
     exact: true,
   },
   {

From 7321ae6f72b3a9c15012850bec7d0e52596d75d7 Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Tue, 11 Apr 2023 19:06:24 +0900
Subject: [PATCH 29/43] =?UTF-8?q?Fix:=20Container=20(IOS=20#254=20?=
 =?UTF-8?q?=EC=9D=B4=EC=8A=88=20=EB=8C=80=EC=9D=91=20=ED=81=AC=EB=A1=9C?=
 =?UTF-8?q?=EC=8A=A4=20=EB=B8=8C=EB=9D=BC=EC=9A=B0=EC=A7=95)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Chatting/Container/index.tsx        | 46 ++++++++++++-------
 .../MessageForm/FullChatMessageForm.tsx       | 10 ----
 src/pages/Chatting/index.jsx                  |  4 +-
 3 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/src/pages/Chatting/Container/index.tsx b/src/pages/Chatting/Container/index.tsx
index 6e614e022..0c782c28c 100644
--- a/src/pages/Chatting/Container/index.tsx
+++ b/src/pages/Chatting/Container/index.tsx
@@ -1,22 +1,36 @@
+import isMobile from "tools/isMobile";
+
 type ContainerProps = {
+  layoutType: "sidechat" | "fullchat";
   children: React.ReactNode;
 };
 
-const Container = ({ children }: ContainerProps) => (
-  <div
-    css={{
-      width: "100%",
-      height: "100%",
-      position: "absolute",
-      overflow: "hidden",
-      display: "flex",
-      flexDirection: "column",
-      top: "0px",
-      left: "0px",
-    }}
-  >
-    {children}
-  </div>
-);
+const Container = ({ layoutType, children }: ContainerProps) => {
+  const [, isIOS] = isMobile();
+  // const isVKDetected = useRecoilValue(isVirtualKeyboardDetectedAtom);
+
+  // IOS #254 이슈 대응 크로스 브라우징
+  const isIOSCrossBrowsing = isIOS && layoutType === "fullchat"; // && isVKDetected;
+  // isVKDetected 옵션 사용시 리랜더링 됨
+
+  return (
+    <div
+      css={{
+        width: "100%",
+        height: isIOSCrossBrowsing
+          ? "var(--window-visual-height)"
+          : "calc(100% - env(safe-area-inset-bottom))",
+        position: isIOSCrossBrowsing ? "fixed" : "absolute",
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+        bottom: "0px",
+        left: "0px",
+      }}
+    >
+      {children}
+    </div>
+  );
+};
 
 export default Container;
diff --git a/src/pages/Chatting/MessageForm/FullChatMessageForm.tsx b/src/pages/Chatting/MessageForm/FullChatMessageForm.tsx
index f0d8b8842..739daa83e 100644
--- a/src/pages/Chatting/MessageForm/FullChatMessageForm.tsx
+++ b/src/pages/Chatting/MessageForm/FullChatMessageForm.tsx
@@ -134,16 +134,6 @@ const FullChatMessageForm = (props: FullChatMessageFormProps) => {
     setFormHeight(newHeight);
   };
 
-  // // REMOVE ME
-  // useEffect(() => {
-  //   const interval = setInterval(() => {
-  //     const innerHeight = window.innerHeight || 0;
-  //     const visualHeight = visualViewport?.height || innerHeight;
-  //     setMessage(`${innerHeight} ${visualHeight}`);
-  //   }, 100);
-  //   return () => clearInterval(interval);
-  // }, []);
-
   useEffect(() => {
     resizeEvent();
     window.addEventListener("resize", resizeEvent);
diff --git a/src/pages/Chatting/index.jsx b/src/pages/Chatting/index.jsx
index fc2d4a01a..036150a00 100644
--- a/src/pages/Chatting/index.jsx
+++ b/src/pages/Chatting/index.jsx
@@ -188,8 +188,10 @@ const Chatting = (props) => {
   useEffect(() => {
     resizeEvent();
     window.addEventListener("resize", resizeEvent);
+    visualViewport?.addEventListener("resize", resizeEvent);
     return () => {
       window.removeEventListener("resize", resizeEvent);
+      visualViewport?.removeEventListener("resize", resizeEvent);
     };
   }, []);
 
@@ -260,7 +262,7 @@ const Chatting = (props) => {
   };
 
   return (
-    <Container>
+    <Container layoutType={props.layoutType}>
       <Header
         layoutType={props.layoutType}
         info={headerInfo}

From ad515dda94964f44641678781dcacb6c5e1cdf10 Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Wed, 12 Apr 2023 14:47:23 +0900
Subject: [PATCH 30/43] Remove: props named user

---
 src/pages/Chatting/MessagesBody/index.jsx |  9 ++++++---
 src/pages/Chatting/index.jsx              | 11 +++++------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/pages/Chatting/MessagesBody/index.jsx b/src/pages/Chatting/MessagesBody/index.jsx
index 3da99cfaf..352386272 100644
--- a/src/pages/Chatting/MessagesBody/index.jsx
+++ b/src/pages/Chatting/MessagesBody/index.jsx
@@ -6,6 +6,9 @@ import ChatInOut from "./ChatInOut";
 import ChatSet from "./ChatSet";
 import PopupReport from "./PopupReport";
 
+import loginInfoDetailAtom from "atoms/loginInfoDetail";
+import { useRecoilValue } from "recoil";
+
 import moment from "tools/moment";
 
 // Chat {
@@ -19,6 +22,7 @@ import moment from "tools/moment";
 // }
 
 const MessagesBody = (props) => {
+  const { oid: userOid } = useRecoilValue(loginInfoDetailAtom) || {};
   const [isOpen, setIsOpen] = useState(false);
   const [path, setPath] = useState("");
   const [name, setName] = useState("");
@@ -32,7 +36,7 @@ const MessagesBody = (props) => {
     const minFormat = "YYYY.MM.DD HH:mm";
 
     const chatSetCommonProps = {
-      authorId: props.user.oid,
+      authorId: userOid,
       isBottomOnScroll: props.isBottomOnScroll,
       scrollToBottom: props.scrollToBottom,
       setIsOpen,
@@ -133,7 +137,7 @@ const MessagesBody = (props) => {
       );
     }
     return list;
-  }, [props.chats, props.user]);
+  }, [props.chats, userOid]);
 
   const onClose = () => {
     setIsOpen(false);
@@ -167,7 +171,6 @@ const MessagesBody = (props) => {
 
 MessagesBody.propTypes = {
   chats: PropTypes.array,
-  user: PropTypes.object,
   layoutType: PropTypes.string,
   forwardedRef: PropTypes.any,
   handleScroll: PropTypes.func,
diff --git a/src/pages/Chatting/index.jsx b/src/pages/Chatting/index.jsx
index 036150a00..5fd250527 100644
--- a/src/pages/Chatting/index.jsx
+++ b/src/pages/Chatting/index.jsx
@@ -38,8 +38,8 @@ const Chatting = (props) => {
   const socket = useRef(undefined);
   const reactiveState = useR2state();
   const prevReactiveState = useRef(reactiveState);
+  const { oid: userOid } = useRecoilValue(loginInfoDetailAtom) || {};
   const [headerInfoToken, fetchHeaderInfo] = useDateToken();
-  const userInfoDetail = useRecoilValue(loginInfoDetailAtom);
   const [, headerInfo] = useQuery.get(`/rooms/info?id=${props.roomId}`, {}, [
     headerInfoToken,
   ]);
@@ -132,7 +132,7 @@ const Chatting = (props) => {
 
   // socket setting
   useEffect(() => {
-    if (headerInfo && userInfoDetail && roomIdCache.current !== props.roomId) {
+    if (headerInfo && userOid && roomIdCache.current !== props.roomId) {
       roomIdCache.current = props.roomId;
 
       socket.current?.disconnect();
@@ -150,11 +150,11 @@ const Chatting = (props) => {
 
       // when receive chat
       socket.current.on("chats-receive", (data) => {
-        if (data.chat.authorId === userInfoDetail.oid) {
+        if (data.chat.authorId === userOid) {
           sendingMessage.current = null;
         }
         const callback =
-          data.chat.authorId === userInfoDetail.oid || isBottomOnScroll()
+          data.chat.authorId === userOid || isBottomOnScroll()
             ? () => scrollToBottom(true)
             : () => setShowNewMessage(true);
 
@@ -179,7 +179,7 @@ const Chatting = (props) => {
     return () => {
       if (socket.current) socket.current.disconnect();
     };
-  }, [headerInfo, userInfoDetail]);
+  }, [headerInfo, userOid]);
 
   // resize event
   const resizeEvent = () => {
@@ -271,7 +271,6 @@ const Chatting = (props) => {
       <MessagesBody
         layoutType={props.layoutType} // fixme : is required?
         chats={chats}
-        user={userInfoDetail}
         forwardedRef={messagesBody}
         handleScroll={handleScroll}
         isBottomOnScroll={isBottomOnScroll}

From 2db59bb75a462c67c15785c76b22ea0fd3c97daf Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Wed, 12 Apr 2023 18:41:03 +0900
Subject: [PATCH 31/43] FIx: HeaderBar

---
 src/components/HeaderBar.tsx              | 30 ++++++++++++-----------
 src/pages/Chatting/Container/index.tsx    |  5 +++-
 src/pages/Chatting/MessagesBody/index.jsx |  3 +--
 3 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/components/HeaderBar.tsx b/src/components/HeaderBar.tsx
index 6379421a1..c6e507004 100644
--- a/src/components/HeaderBar.tsx
+++ b/src/components/HeaderBar.tsx
@@ -1,19 +1,21 @@
 import theme from "tools/theme";
 
-const HeaderBar = () => {
-  return (
-    <div
-      style={{
-        background: theme.purple,
-        width: "100%",
-        height: "max(5px, env(safe-area-inset-top))",
-        position: "fixed",
-        top: "0px",
-        left: "0px",
-        zIndex: theme.zIndex_headerBar,
-      }}
-    />
-  );
+type HeaderBarProps = {
+  position?: "fixed" | "absolute";
 };
 
+const HeaderBar = ({ position = "fixed" }: HeaderBarProps) => (
+  <div
+    style={{
+      background: theme.purple,
+      width: "100%",
+      height: "max(5px, env(safe-area-inset-top))",
+      position,
+      top: "0px",
+      left: "0px",
+      zIndex: theme.zIndex_headerBar,
+    }}
+  />
+);
+
 export default HeaderBar;
diff --git a/src/pages/Chatting/Container/index.tsx b/src/pages/Chatting/Container/index.tsx
index 0c782c28c..7c364eb85 100644
--- a/src/pages/Chatting/Container/index.tsx
+++ b/src/pages/Chatting/Container/index.tsx
@@ -1,3 +1,5 @@
+import HeaderBar from "components/HeaderBar";
+
 import isMobile from "tools/isMobile";
 
 type ContainerProps = {
@@ -19,7 +21,7 @@ const Container = ({ layoutType, children }: ContainerProps) => {
         width: "100%",
         height: isIOSCrossBrowsing
           ? "var(--window-visual-height)"
-          : "calc(100% - env(safe-area-inset-bottom))",
+          : "calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom))",
         position: isIOSCrossBrowsing ? "fixed" : "absolute",
         overflow: "hidden",
         display: "flex",
@@ -28,6 +30,7 @@ const Container = ({ layoutType, children }: ContainerProps) => {
         left: "0px",
       }}
     >
+      {isIOSCrossBrowsing && <HeaderBar position="absolute" />}
       {children}
     </div>
   );
diff --git a/src/pages/Chatting/MessagesBody/index.jsx b/src/pages/Chatting/MessagesBody/index.jsx
index 352386272..8962f99e8 100644
--- a/src/pages/Chatting/MessagesBody/index.jsx
+++ b/src/pages/Chatting/MessagesBody/index.jsx
@@ -170,13 +170,12 @@ const MessagesBody = (props) => {
 };
 
 MessagesBody.propTypes = {
-  chats: PropTypes.array,
   layoutType: PropTypes.string,
+  chats: PropTypes.array,
   forwardedRef: PropTypes.any,
   handleScroll: PropTypes.func,
   isBottomOnScroll: PropTypes.func,
   scrollToBottom: PropTypes.func,
-  setIsOpen: PropTypes.func,
 };
 
 MessagesBody.defaultProps = {

From 406799605a6486cae6f2dd1ff107b8697cf77944 Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Thu, 13 Apr 2023 03:14:18 +0900
Subject: [PATCH 32/43] Remove: deviceToken from noti api call

---
 src/components/Skeleton/index.tsx            | 1 -
 src/pages/Mypage/ModalNotification/index.tsx | 4 ----
 2 files changed, 5 deletions(-)

diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx
index 2eb00f8a6..733ee309d 100644
--- a/src/components/Skeleton/index.tsx
+++ b/src/components/Skeleton/index.tsx
@@ -96,7 +96,6 @@ const Skeleton = ({ children }: SkeletonProps) => {
       axios({
         url: "/notifications/options",
         method: "get",
-        params: { deviceToken },
         onSuccess: (data) => setNotificationOptions(data),
       });
     }
diff --git a/src/pages/Mypage/ModalNotification/index.tsx b/src/pages/Mypage/ModalNotification/index.tsx
index da39e058d..1e1cf2166 100644
--- a/src/pages/Mypage/ModalNotification/index.tsx
+++ b/src/pages/Mypage/ModalNotification/index.tsx
@@ -89,7 +89,6 @@ const ModalNotification = ({
         url: "/notifications/editOptions",
         method: "post",
         data: {
-          deviceToken,
           options: {
             [optionName]: value,
           },
@@ -99,7 +98,6 @@ const ModalNotification = ({
         await axios({
           url: "/notifications/options",
           method: "get",
-          params: { deviceToken },
         })
       );
       isAxiosCalled.current = false;
@@ -114,7 +112,6 @@ const ModalNotification = ({
         url: "/notifications/editOptions",
         method: "post",
         data: {
-          deviceToken,
           options: {
             beforeDepart: value,
             chatting: value,
@@ -126,7 +123,6 @@ const ModalNotification = ({
         await axios({
           url: "/notifications/options",
           method: "get",
-          params: { deviceToken },
         })
       );
       isAxiosCalled.current = false;

From fa3ed25d683968bf4e8931aef51abda82f5724f8 Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Fri, 14 Apr 2023 12:48:27 +0900
Subject: [PATCH 33/43] Fix: format

---
 src/components/Skeleton/index.tsx | 7 +++++--
 src/pages/Login/index.jsx         | 1 -
 src/pages/Myroom/index.jsx        | 9 ++++-----
 src/routes.ts                     | 7 +------
 4 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx
index 72bb444e4..22663ce28 100644
--- a/src/components/Skeleton/index.tsx
+++ b/src/components/Skeleton/index.tsx
@@ -51,8 +51,11 @@ const Skeleton = ({ children }: SkeletonProps) => {
   const [loginInfoDetail, setLoginInfoDetail] =
     useRecoilState(loginInfoDetailAtom);
   const error = useRecoilValue(errorAtom);
-  const { id: userId, agreeOnTermsOfService: isAgreeOnTermsOfService, deviceToken } =
-    loginInfoDetail || {};
+  const {
+    id: userId,
+    agreeOnTermsOfService: isAgreeOnTermsOfService,
+    deviceToken,
+  } = loginInfoDetail || {};
 
   const setTaxiLocation = useSetRecoilState(taxiLocationAtom);
   const setMyRoom = useSetRecoilState(myRoomAtom);
diff --git a/src/pages/Login/index.jsx b/src/pages/Login/index.jsx
index f09e7283d..fbaf146de 100644
--- a/src/pages/Login/index.jsx
+++ b/src/pages/Login/index.jsx
@@ -2,7 +2,6 @@ import { useCallback, useEffect } from "react";
 import { useHistory, useLocation } from "react-router-dom";
 
 import Button from "components/Button";
-import HeaderBar from "components/HeaderBar";
 
 import loginInfoDetailAtom from "atoms/loginInfoDetail";
 import { useRecoilValue } from "recoil";
diff --git a/src/pages/Myroom/index.jsx b/src/pages/Myroom/index.jsx
index b0a907f78..66e3b078a 100644
--- a/src/pages/Myroom/index.jsx
+++ b/src/pages/Myroom/index.jsx
@@ -5,17 +5,16 @@ import usePageFromSearchParams from "hooks/usePageFromSearchParams";
 import { useR2state } from "hooks/useReactiveState";
 
 import { PAGE_MAX_ITEMS } from "components/Pagination";
+import SuggestLogin from "components/SuggestLogin";
+import Title from "components/Title";
+import WhiteContainer from "components/WhiteContainer";
 
 import R1Myroom from "./R1Myroom";
 import R2Myroom from "./R2Myroom";
 
+import loginInfoDetailAtom from "atoms/loginInfoDetail";
 import myRoomAtom from "atoms/myRoom";
 import { useRecoilValue } from "recoil";
-import loginInfoDetailAtom from "atoms/loginInfoDetail";
-import RLayout from "components/RLayout";
-import SuggestLogin from "components/SuggestLogin";
-import Title from "components/Title";
-import WhiteContainer from "components/WhiteContainer";
 
 export const MAX_PARTICIPATION = 5;
 
diff --git a/src/routes.ts b/src/routes.ts
index 9223474b0..1580e34ee 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -2,11 +2,6 @@ import { lazy } from "react";
 
 const routes = [
   { path: "/login", component: lazy(() => import("pages/Login")), exact: true },
-  {
-    path: "/login/privacyPolicy",
-    component: lazy(() => import("pages/Login")),
-    exact: true,
-  },
   {
     path: "/login/fail",
     component: lazy(() => import("pages/Login/LoginFail")),
@@ -18,7 +13,7 @@ const routes = [
     exact: true,
   },
   {
-    path: ["/", "/home"],
+    path: ["/", "/home", "/home/:roomId"],
     component: lazy(() => import("pages/Home")),
     exact: true,
   },

From 611c83eb434a0da7f6c2675dbd8eb97f0dbb6376 Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Fri, 14 Apr 2023 13:49:22 +0900
Subject: [PATCH 34/43] Add: LinkLogin and LinkLogout

---
 .../{Button.tsx => Button/index.tsx}          |  2 +-
 src/components/Link/LinkLogin.tsx             | 25 +++++++++++
 src/components/Link/LinkLogout.tsx            | 25 +++++++++++
 src/components/LoginButton.tsx                | 24 -----------
 src/components/SuggestLogin.tsx               | 42 ++++++++-----------
 src/pages/Home/InfoSection.tsx                | 37 ++++++++++------
 src/pages/Mypage/index.tsx                    | 12 +++---
 src/pages/Search/RoomSelectionModal.jsx       | 29 ++++++++-----
 8 files changed, 117 insertions(+), 79 deletions(-)
 rename src/components/{Button.tsx => Button/index.tsx} (98%)
 create mode 100644 src/components/Link/LinkLogin.tsx
 create mode 100644 src/components/Link/LinkLogout.tsx
 delete mode 100644 src/components/LoginButton.tsx

diff --git a/src/components/Button.tsx b/src/components/Button/index.tsx
similarity index 98%
rename from src/components/Button.tsx
rename to src/components/Button/index.tsx
index ee77b2448..e6d521e6e 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button/index.tsx
@@ -5,7 +5,7 @@ import theme, { Font } from "tools/theme";
 
 type ButtonType = "purple" | "purple_inset" | "gray" | "white";
 
-export type ButtonProps = {
+type ButtonProps = {
   type?: ButtonType;
   disabled?: boolean;
   width?: string;
diff --git a/src/components/Link/LinkLogin.tsx b/src/components/Link/LinkLogin.tsx
new file mode 100644
index 000000000..ecc08cf8b
--- /dev/null
+++ b/src/components/Link/LinkLogin.tsx
@@ -0,0 +1,25 @@
+import { useLocation } from "react-router-dom";
+
+import { backServer } from "loadenv";
+
+type LinkLoginProps = {
+  children: React.ReactNode;
+  redirect?: string;
+};
+
+const LinkLogin = ({ children, redirect }: LinkLoginProps) => {
+  const { pathname, search } = useLocation();
+  const redirectPath = redirect || pathname + search;
+  return (
+    <a
+      href={`${backServer}/auth/sparcssso?redirect=${encodeURIComponent(
+        redirectPath
+      )}`}
+      css={{ textDecoration: "none" }}
+    >
+      {children}
+    </a>
+  );
+};
+
+export default LinkLogin;
diff --git a/src/components/Link/LinkLogout.tsx b/src/components/Link/LinkLogout.tsx
new file mode 100644
index 000000000..039da48dd
--- /dev/null
+++ b/src/components/Link/LinkLogout.tsx
@@ -0,0 +1,25 @@
+import { useCallback, useRef } from "react";
+import { useHistory, useLocation } from "react-router-dom";
+
+type LinkLogoutProps = {
+  children: React.ReactNode;
+  redirect?: string;
+};
+
+const LinkLogout = ({ children, redirect }: LinkLogoutProps) => {
+  const history = useHistory();
+  const { pathname, search } = useLocation();
+  const redirectPath = redirect || pathname + search;
+  const isClicked = useRef(false);
+
+  const onClickLogout = useCallback(async () => {
+    if (isClicked.current) return;
+    isClicked.current = true;
+    history.replace(`/logout?redirect=${encodeURIComponent(redirectPath)}`);
+    isClicked.current = false;
+  }, [history, redirectPath]);
+
+  return <div onClick={onClickLogout}>{children}</div>;
+};
+
+export default LinkLogout;
diff --git a/src/components/LoginButton.tsx b/src/components/LoginButton.tsx
deleted file mode 100644
index f18496bee..000000000
--- a/src/components/LoginButton.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import Button from "components/Button";
-import { backServer } from "loadenv";
-import { ButtonProps } from "components/Button";
-
-type LoginButtonProps = ButtonProps & { isLogin?: boolean; redirect: string };
-
-const LoginButton = (props: LoginButtonProps) => {
-  const { isLogin, redirect, ...buttonProps } = props;
-
-  return isLogin ? (
-    <Button {...buttonProps}>{props.children}</Button>
-  ) : (
-    <a
-      href={`${backServer}/auth/sparcssso?redirect=${encodeURIComponent(
-        redirect
-      )}`}
-      style={{ textDecoration: "none" }}
-    >
-      <Button {...buttonProps}>{props.children}</Button>
-    </a>
-  );
-};
-
-export default LoginButton;
diff --git a/src/components/SuggestLogin.tsx b/src/components/SuggestLogin.tsx
index 7ef1530d3..549d7334d 100644
--- a/src/components/SuggestLogin.tsx
+++ b/src/components/SuggestLogin.tsx
@@ -1,35 +1,29 @@
-import { useLocation } from "react-router-dom";
-
-import LoginButton from "./LoginButton";
+import Button from "./Button";
+import LinkLogin from "./Link/LinkLogin";
 
 import theme from "tools/theme";
 
-const SuggestLogin = () => {
-  const { pathname, search } = useLocation();
-  const currentPath = pathname + search;
-
-  return (
-    <div>
-      <div
-        css={{
-          ...theme.font14,
-          marginBottom: 12,
-        }}
-      >
-        로그인이 필요한 서비스입니다
-      </div>
-      <LoginButton
+const SuggestLogin = () => (
+  <div>
+    <div
+      css={{
+        ...theme.font14,
+        marginBottom: 12,
+      }}
+    >
+      로그인이 필요한 서비스입니다
+    </div>
+    <LinkLogin>
+      <Button
         type="purple"
         padding="14px 0 13px"
         radius={12}
         font={theme.font16_bold}
-        isLogin={false}
-        redirect={currentPath}
       >
         로그인
-      </LoginButton>
-    </div>
-  );
-};
+      </Button>
+    </LinkLogin>
+  </div>
+);
 
 export default SuggestLogin;
diff --git a/src/pages/Home/InfoSection.tsx b/src/pages/Home/InfoSection.tsx
index 86cea0565..5a1c43cbd 100644
--- a/src/pages/Home/InfoSection.tsx
+++ b/src/pages/Home/InfoSection.tsx
@@ -2,7 +2,7 @@ import { useMemo } from "react";
 import { Link } from "react-router-dom";
 
 import Button from "components/Button";
-import LoginButton from "components/LoginButton";
+import LinkLogin from "components/Link/LinkLogin";
 import RLayout from "components/RLayout";
 import Room from "components/Room";
 
@@ -118,18 +118,29 @@ const InfoSection = () => {
             <div
               style={{ marginTop: "32px", display: "flex", columnGap: "10px" }}
             >
-              <Link to="/addroom" style={{ textDecoration: "none" }}>
-                <LoginButton
-                  type="purple"
-                  padding="12px 20px 11px"
-                  radius={8}
-                  font={theme.font16_bold}
-                  isLogin={isLogin}
-                  redirect="/"
-                >
-                  {isLogin ? "방 개설하기" : "로그인하기"}
-                </LoginButton>
-              </Link>
+              {isLogin ? (
+                <Link to="/addroom" style={{ textDecoration: "none" }}>
+                  <Button
+                    type="purple"
+                    padding="12px 20px 11px"
+                    radius={8}
+                    font={theme.font16_bold}
+                  >
+                    방 개설하기
+                  </Button>
+                </Link>
+              ) : (
+                <LinkLogin>
+                  <Button
+                    type="purple"
+                    padding="12px 20px 11px"
+                    radius={8}
+                    font={theme.font16_bold}
+                  >
+                    로그인
+                  </Button>
+                </LinkLogin>
+              )}
               <Link to="/search" style={{ textDecoration: "none" }}>
                 <Button
                   type="white"
diff --git a/src/pages/Mypage/index.tsx b/src/pages/Mypage/index.tsx
index b021cf1a9..45f3376fc 100644
--- a/src/pages/Mypage/index.tsx
+++ b/src/pages/Mypage/index.tsx
@@ -1,9 +1,10 @@
 import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useHistory } from "react-router";
 
 import useDateToken from "hooks/useDateToken";
 
+import LinkLogout from "components/Link/LinkLogout";
+import SuggestLogin from "components/SuggestLogin";
 import Title from "components/Title";
 import WhiteContainer from "components/WhiteContainer";
 
@@ -23,7 +24,6 @@ import { useRecoilValue } from "recoil";
 import theme from "tools/theme";
 
 import { nodeEnv } from "loadenv";
-import SuggestLogin from "components/SuggestLogin";
 
 const Mypage = () => {
   const { t, i18n } = useTranslation("mypage");
@@ -43,7 +43,6 @@ const Mypage = () => {
   const [isOpenPolicy, setIsOpenPolicy] = useState(false);
   const [isOpenPrivacyPolicy, setIsOpenPrivacyPolicy] = useState(false);
   const [isOpenMembers, setOpenIsMembers] = useState(false);
-  const history = useHistory();
 
   const onClickProfileModify = useCallback(
     () => setIsOpenProfileModify(true),
@@ -73,7 +72,6 @@ const Mypage = () => {
     () => setOpenIsMembers(true),
     [setOpenIsMembers]
   );
-  const onClickLogout = useCallback(() => history.push("/logout"), [history]);
 
   const styleProfImg = {
     width: "50px",
@@ -192,9 +190,9 @@ const Mypage = () => {
             {t("credit")}
           </Menu>
           {userId && (
-            <Menu icon="logout" onClick={onClickLogout}>
-              {t("logout")}
-            </Menu>
+            <LinkLogout>
+              <Menu icon="logout">{t("logout")}</Menu>
+            </LinkLogout>
           )}
         </div>
       </WhiteContainer>
diff --git a/src/pages/Search/RoomSelectionModal.jsx b/src/pages/Search/RoomSelectionModal.jsx
index 09ecd6a11..d4a7fb841 100644
--- a/src/pages/Search/RoomSelectionModal.jsx
+++ b/src/pages/Search/RoomSelectionModal.jsx
@@ -5,8 +5,9 @@ import { useHistory } from "react-router-dom";
 
 import { useAxios } from "hooks/useTaxiAPI";
 
+import Button from "components/Button";
 import DottedLine from "components/DottedLine";
-import LoginButton from "components/LoginButton";
+import LinkLogin from "components/Link/LinkLogin";
 import MiniCircle from "components/MiniCircle";
 import Modal from "components/Modal";
 import { MAX_PARTICIPATION } from "pages/Myroom";
@@ -249,28 +250,36 @@ const RoomSelectionModal = (props) => {
         enterTouchDelay={0}
         leaveTouchDelay={2000}
       >
-        <div>
-          <LoginButton
+        {isLogin ? (
+          <Button
             type="purple"
             disabled={isRoomFull || disableJoinBtn || fullParticipation}
             padding="10px 0 9px"
             radius={8}
             font={theme.font14_bold}
             onClick={requestJoin}
-            isLogin={!!isLogin}
-            redirect={`/home/${roomInfo?._id}`}
           >
-            {!isLogin
-              ? "로그인해서 참여하기"
-              : disableJoinBtn
+            {disableJoinBtn
               ? "이미 참여 중입니다"
               : isRoomFull
               ? "인원이 0명인 방은 참여할 수 없습니다"
               : fullParticipation
               ? "현재 5개의 방에 참여 중입니다"
               : "참여 신청"}
-          </LoginButton>
-        </div>
+          </Button>
+        ) : (
+          /* redirect fixme */
+          <LinkLogin redirect={`/home/${roomInfo?._id}`}>
+            <Button
+              type="purple"
+              padding="10px 0 9px"
+              radius={8}
+              font={theme.font14_bold}
+            >
+              로그인 후 참여 신청
+            </Button>
+          </LinkLogin>
+        )}
       </Tooltip>
     </Modal>
   );

From 4341260bcbacb136d3bec3d0805745f9e60dcbd6 Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Fri, 14 Apr 2023 15:31:27 +0900
Subject: [PATCH 35/43] Refactor: from PR review

---
 src/components/Skeleton/index.tsx |  1 -
 src/pages/Home/RoomList.tsx       | 16 ++++++++------
 src/pages/Home/RoomSection.tsx    |  4 +++-
 src/pages/Mypage/index.tsx        | 36 ++++++++++++++++---------------
 src/pages/Myroom/index.jsx        |  4 ++--
 5 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx
index 22663ce28..5ccb1441a 100644
--- a/src/components/Skeleton/index.tsx
+++ b/src/components/Skeleton/index.tsx
@@ -1,5 +1,4 @@
 import { ReactNode, useEffect, useState } from "react";
-// import { useLocation, Redirect } from "react-router-dom";
 import { useLocation } from "react-router-dom";
 
 import { useAxios } from "hooks/useTaxiAPI";
diff --git a/src/pages/Home/RoomList.tsx b/src/pages/Home/RoomList.tsx
index 571fc2d46..4d59c44f3 100644
--- a/src/pages/Home/RoomList.tsx
+++ b/src/pages/Home/RoomList.tsx
@@ -1,9 +1,10 @@
+import { Link } from "react-router-dom";
+
 import usePageFromSearchParams from "hooks/usePageFromSearchParams";
 
 import Empty from "components/Empty";
 import Pagination, { PAGE_MAX_ITEMS } from "components/Pagination";
 import Room from "components/Room";
-import { useHistory } from "react-router-dom";
 
 type RoomListProps = {
   rooms: Nullable<Array<any>>;
@@ -12,7 +13,6 @@ type RoomListProps = {
 const RoomList = (props: RoomListProps) => {
   const totalPages = Math.ceil((props.rooms ?? []).length / PAGE_MAX_ITEMS);
   const currentPage = usePageFromSearchParams(totalPages);
-  const history = useHistory();
 
   return (
     <>
@@ -24,12 +24,14 @@ const RoomList = (props: RoomListProps) => {
               PAGE_MAX_ITEMS * currentPage
             )
             .map((room) => (
-              <Room
+              <Link
                 key={room._id}
-                data={room}
-                marginBottom="15px"
-                onClick={() => history.replace(`/home/${room._id}`)}
-              />
+                to={`/home/${room._id}`}
+                replace
+                style={{ textDecoration: "none" }}
+              >
+                <Room data={room} marginBottom="15px" />
+              </Link>
             ))}
           {props.rooms.length > PAGE_MAX_ITEMS && (
             <Pagination
diff --git a/src/pages/Home/RoomSection.tsx b/src/pages/Home/RoomSection.tsx
index 5cc514f14..c9307c29f 100644
--- a/src/pages/Home/RoomSection.tsx
+++ b/src/pages/Home/RoomSection.tsx
@@ -21,7 +21,9 @@ const RoomSection = ({ roomId }: RoomSectionProps) => {
   const history = useHistory();
   const today = getToday().subtract(1, "day");
   const [allRoomsToken, fetchAllRooms] = useDateToken();
-  const [, allRooms] = useQuery.get("/rooms/search", {}, [allRoomsToken]);
+  const [, allRooms] = useQuery.get("/rooms/search?isHome=true", {}, [
+    allRoomsToken,
+  ]);
   const [rooms, setRooms] = useState<Nullable<Array<any>>>(null);
   const [selectedDate, setSelectedDate] = useState<[number, number, number]>([
     today.year(),
diff --git a/src/pages/Mypage/index.tsx b/src/pages/Mypage/index.tsx
index 45f3376fc..2a5e0880e 100644
--- a/src/pages/Mypage/index.tsx
+++ b/src/pages/Mypage/index.tsx
@@ -160,10 +160,24 @@ const Mypage = () => {
               </Menu>
             </div>
           </WhiteContainer>
+          <PopupModify
+            isOpen={isOpenProfileModify}
+            onClose={() => setIsOpenProfileModify(false)}
+            onUpdate={refreshProfImgToken}
+            profToken={profImgToken}
+          />
           <PopupReport
             isOpen={isOpenReport}
             onClose={() => setIsOpenReport(false)}
           />
+          <ModalNotification
+            isOpen={isOpenNotification}
+            onChangeIsOpen={setIsOpenNotification}
+          />
+          <PopupPolicy
+            isOpen={isOpenPolicy}
+            onClose={() => setIsOpenPolicy(false)}
+          />
         </>
       ) : (
         <WhiteContainer marginAuto>
@@ -180,9 +194,11 @@ const Mypage = () => {
           <a className="popup-channeltalk">
             <Menu icon="ask">{t("contact")}</Menu>
           </a>
-          <Menu icon="policy" onClick={onClickPolicy}>
-            {t("terms")}
-          </Menu>
+          {userId && (
+            <Menu icon="policy" onClick={onClickPolicy}>
+              {t("terms")}
+            </Menu>
+          )}
           <Menu icon="policy" onClick={onClickPrivacyPolicy}>
             {t("privacy_policy")}
           </Menu>
@@ -196,20 +212,6 @@ const Mypage = () => {
           )}
         </div>
       </WhiteContainer>
-      <PopupModify
-        isOpen={isOpenProfileModify}
-        onClose={() => setIsOpenProfileModify(false)}
-        onUpdate={refreshProfImgToken}
-        profToken={profImgToken}
-      />
-      <ModalNotification
-        isOpen={isOpenNotification}
-        onChangeIsOpen={setIsOpenNotification}
-      />
-      <PopupPolicy
-        isOpen={isOpenPolicy}
-        onClose={() => setIsOpenPolicy(false)}
-      />
       <PopupPrivacyPolicy
         isOpen={isOpenPrivacyPolicy}
         onClose={() => setIsOpenPrivacyPolicy(false)}
diff --git a/src/pages/Myroom/index.jsx b/src/pages/Myroom/index.jsx
index 66e3b078a..0d1ca1ca7 100644
--- a/src/pages/Myroom/index.jsx
+++ b/src/pages/Myroom/index.jsx
@@ -35,8 +35,8 @@ const Myroom = () => {
 
   return !isLogin ? (
     <>
-      <Title icon="add" header marginAuto>
-        참여 중인 방
+      <Title icon="myroom" header marginAuto>
+        내 방 보기
       </Title>
       <WhiteContainer marginAuto>
         <SuggestLogin />

From 186069a802d54744475d377821404a94b121251f Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Fri, 14 Apr 2023 15:33:22 +0900
Subject: [PATCH 36/43] Refactor: SuggestLogin

---
 src/components/SuggestLogin.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/SuggestLogin.tsx b/src/components/SuggestLogin.tsx
index 549d7334d..3fcb97c9a 100644
--- a/src/components/SuggestLogin.tsx
+++ b/src/components/SuggestLogin.tsx
@@ -4,7 +4,7 @@ import LinkLogin from "./Link/LinkLogin";
 import theme from "tools/theme";
 
 const SuggestLogin = () => (
-  <div>
+  <>
     <div
       css={{
         ...theme.font14,
@@ -23,7 +23,7 @@ const SuggestLogin = () => (
         로그인
       </Button>
     </LinkLogin>
-  </div>
+  </>
 );
 
 export default SuggestLogin;

From 0aa3953f13ea6b63eb668130b48985f49b1d9bfd Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Fri, 14 Apr 2023 15:48:50 +0900
Subject: [PATCH 37/43] Fix: SideResult

---
 src/pages/Search/RoomSelectionModal.jsx | 1 -
 src/pages/Search/SideResult.jsx         | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/pages/Search/RoomSelectionModal.jsx b/src/pages/Search/RoomSelectionModal.jsx
index d4a7fb841..bdff14e4a 100644
--- a/src/pages/Search/RoomSelectionModal.jsx
+++ b/src/pages/Search/RoomSelectionModal.jsx
@@ -268,7 +268,6 @@ const RoomSelectionModal = (props) => {
               : "참여 신청"}
           </Button>
         ) : (
-          /* redirect fixme */
           <LinkLogin redirect={`/home/${roomInfo?._id}`}>
             <Button
               type="purple"
diff --git a/src/pages/Search/SideResult.jsx b/src/pages/Search/SideResult.jsx
index ee265d639..c65531081 100644
--- a/src/pages/Search/SideResult.jsx
+++ b/src/pages/Search/SideResult.jsx
@@ -168,7 +168,7 @@ const SideResult = (props) => {
           onClose={() => {
             setSelectedRoomInfo(null);
           }}
-          roomId={selectedRoomInfo}
+          roomInfo={selectedRoomInfo}
         />
         <WhiteContainer padding="20px 20px 22px">
           <Title icon="search_result">검색 결과</Title>
@@ -215,7 +215,7 @@ const SideResult = (props) => {
           onClose={() => {
             setSelectedRoomInfo(null);
           }}
-          roomId={selectedRoomInfo}
+          roomInfo={selectedRoomInfo}
         />
         <SearchOptions
           isIncludeFullRoom={isIncludeFullRoom}

From 7800139ae73cc633a44bf74430ec55e00551cfb3 Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Fri, 14 Apr 2023 16:51:01 +0900
Subject: [PATCH 38/43] Move: mypage Modal to "components/"

---
 .../ModalPopup/ModalCredit.jsx}               | 10 ++---
 .../ModalPopup/ModalModify.jsx}               | 22 ++++++-----
 .../ModalPopup/ModalNotification.tsx}         |  5 +--
 .../ModalPopup/ModalPrivacyPolicy.tsx}        | 11 ++++--
 .../ModalPopup/ModalReport}/ReportList.tsx    |  0
 .../ModalPopup/ModalReport}/ReportOption.tsx  |  0
 .../ModalPopup/ModalReport}/index.tsx         |  8 ++--
 .../ModalPopup/ModalTerms.jsx}                | 22 ++++++-----
 .../ModalPopup/NotificationGuide.tsx}         |  4 +-
 src/components/ModalPopup/index.tsx           | 15 +++++++
 .../Mypage => components}/ProfileImg.jsx      |  0
 src/components/Skeleton/index.tsx             |  4 +-
 src/pages/Chatting/Header/HeaderBody.jsx      |  2 +-
 src/pages/Chatting/MessagesBody/ChatSet.jsx   |  2 +-
 .../Chatting/MessagesBody/PopupReport.tsx     |  2 +-
 src/pages/Home/index.tsx                      |  6 +--
 src/pages/Mypage/index.tsx                    | 39 ++++++++-----------
 17 files changed, 84 insertions(+), 68 deletions(-)
 rename src/{pages/Mypage/PopupMembers.jsx => components/ModalPopup/ModalCredit.jsx} (95%)
 rename src/{pages/Mypage/PopupModify.jsx => components/ModalPopup/ModalModify.jsx} (95%)
 rename src/{pages/Mypage/ModalNotification/index.tsx => components/ModalPopup/ModalNotification.tsx} (98%)
 rename src/{pages/Mypage/PopupPrivacyPolicy.tsx => components/ModalPopup/ModalPrivacyPolicy.tsx} (79%)
 rename src/{pages/Mypage/PopupReport => components/ModalPopup/ModalReport}/ReportList.tsx (100%)
 rename src/{pages/Mypage/PopupReport => components/ModalPopup/ModalReport}/ReportOption.tsx (100%)
 rename src/{pages/Mypage/PopupReport => components/ModalPopup/ModalReport}/index.tsx (92%)
 rename src/{pages/Mypage/PopupPolicy.jsx => components/ModalPopup/ModalTerms.jsx} (86%)
 rename src/{pages/Mypage/ModalNotification/Guide.tsx => components/ModalPopup/NotificationGuide.tsx} (95%)
 create mode 100644 src/components/ModalPopup/index.tsx
 rename src/{pages/Mypage => components}/ProfileImg.jsx (100%)

diff --git a/src/pages/Mypage/PopupMembers.jsx b/src/components/ModalPopup/ModalCredit.jsx
similarity index 95%
rename from src/pages/Mypage/PopupMembers.jsx
rename to src/components/ModalPopup/ModalCredit.jsx
index e91a58410..ce680faaa 100644
--- a/src/pages/Mypage/PopupMembers.jsx
+++ b/src/components/ModalPopup/ModalCredit.jsx
@@ -60,7 +60,7 @@ Member.propTypes = {
   period: PropTypes.string,
 };
 
-const PopupMembers = (props) => {
+const ModalCredit = (props) => {
   const { t } = useTranslation("mypage");
 
   const styleTitle = {
@@ -95,7 +95,7 @@ const PopupMembers = (props) => {
   return (
     <Modal
       isOpen={props.isOpen}
-      onChangeIsOpen={props.onClose}
+      onChangeIsOpen={props.onChangeIsOpen}
       width={theme.modal_width_large}
       padding="16px 12px 12px"
     >
@@ -127,9 +127,9 @@ const PopupMembers = (props) => {
     </Modal>
   );
 };
-PopupMembers.propTypes = {
+ModalCredit.propTypes = {
   isOpen: PropTypes.bool,
-  onClose: PropTypes.func,
+  onChangeIsOpen: PropTypes.func,
 };
 
-export default PopupMembers;
+export default ModalCredit;
diff --git a/src/pages/Mypage/PopupModify.jsx b/src/components/ModalPopup/ModalModify.jsx
similarity index 95%
rename from src/pages/Mypage/PopupModify.jsx
rename to src/components/ModalPopup/ModalModify.jsx
index 19d3b28c9..ca9aa7c0b 100644
--- a/src/pages/Mypage/PopupModify.jsx
+++ b/src/components/ModalPopup/ModalModify.jsx
@@ -9,8 +9,7 @@ import AccountSelector from "components/AccountSelector";
 import Button from "components/Button";
 import DottedLine from "components/DottedLine";
 import Modal from "components/Modal";
-
-import ProfileImg from "./ProfileImg";
+import ProfileImg from "components/ProfileImg";
 
 import alertAtom from "atoms/alert";
 import loginInfoDetailAtom from "atoms/loginInfoDetail";
@@ -141,7 +140,7 @@ BtnProfImg.propTypes = {
   onClose: PropTypes.func,
 };
 
-const PopupModify = (props) => {
+const ModalModify = (props) => {
   const { t } = useTranslation("mypage");
   const axios = useAxios();
 
@@ -189,7 +188,7 @@ const PopupModify = (props) => {
         })
       );
     }
-    props.onClose();
+    props.onChangeIsOpen(false);
   };
 
   const styleName = {
@@ -228,7 +227,7 @@ const PopupModify = (props) => {
   return (
     <Modal
       isOpen={props.isOpen}
-      onChangeIsOpen={props.onClose}
+      onChangeIsOpen={props.onChangeIsOpen}
       padding="32px 10px 10px"
       onEnter={handleEditProfile}
     >
@@ -237,7 +236,10 @@ const PopupModify = (props) => {
         profileImgUrl={loginInfoDetail?.profileImgUrl}
         token={props.profToken}
       />
-      <BtnProfImg onClose={props.onClose} onUpdate={props.onUpdate} />
+      <BtnProfImg
+        onClose={() => props.onChangeIsOpen(false)}
+        onUpdate={props.onUpdate}
+      />
       <DottedLine direction="row" margin="0 2px" />
       <div style={{ rowGap: "10px", padding: "0px 20px" }}>
         <div style={{ ...styleTitle, marginTop: "24px" }}>
@@ -268,7 +270,7 @@ const PopupModify = (props) => {
           padding="10px 0 9px"
           radius={8}
           font={theme.font14}
-          onClick={props.onClose}
+          onClick={() => props.onChangeIsOpen(false)}
         >
           {t("page_modify.cancel")}
         </Button>
@@ -291,11 +293,11 @@ const PopupModify = (props) => {
     </Modal>
   );
 };
-PopupModify.propTypes = {
+ModalModify.propTypes = {
   profToken: PropTypes.any,
   isOpen: PropTypes.bool,
-  onClose: PropTypes.func,
+  onChangeIsOpen: PropTypes.func,
   onUpdate: PropTypes.func,
 };
 
-export default PopupModify;
+export default ModalModify;
diff --git a/src/pages/Mypage/ModalNotification/index.tsx b/src/components/ModalPopup/ModalNotification.tsx
similarity index 98%
rename from src/pages/Mypage/ModalNotification/index.tsx
rename to src/components/ModalPopup/ModalNotification.tsx
index 1e1cf2166..42516a748 100644
--- a/src/pages/Mypage/ModalNotification/index.tsx
+++ b/src/components/ModalPopup/ModalNotification.tsx
@@ -5,10 +5,9 @@ import { useAxios } from "hooks/useTaxiAPI";
 
 import DottedLine from "components/DottedLine";
 import Modal from "components/Modal";
+import NotificationGuide from "components/ModalPopup/NotificationGuide";
 import Toggle from "components/Toggle";
 
-import Guide from "./Guide";
-
 import loginInfoDetailAtom from "atoms/loginInfoDetail";
 import notificationOptionsAtom from "atoms/notificationOptions";
 import { useRecoilState, useRecoilValue } from "recoil";
@@ -186,7 +185,7 @@ const ModalNotification = ({
           </div>
         </>
       ) : (
-        <Guide />
+        <NotificationGuide />
       )}
     </Modal>
   );
diff --git a/src/pages/Mypage/PopupPrivacyPolicy.tsx b/src/components/ModalPopup/ModalPrivacyPolicy.tsx
similarity index 79%
rename from src/pages/Mypage/PopupPrivacyPolicy.tsx
rename to src/components/ModalPopup/ModalPrivacyPolicy.tsx
index b86f1754a..050f8d196 100644
--- a/src/pages/Mypage/PopupPrivacyPolicy.tsx
+++ b/src/components/ModalPopup/ModalPrivacyPolicy.tsx
@@ -9,10 +9,13 @@ import { ReactComponent as TaxiLogo } from "static/assets/TaxiLogo.svg";
 
 type PopupPrivacyPolicyProps = {
   isOpen: boolean;
-  onClose: () => void;
+  onChangeIsOpen: (isOpen: boolean) => void;
 };
 
-const PopupPrivacyPolicy = ({ isOpen, onClose }: PopupPrivacyPolicyProps) => {
+const ModalPrivacyPolicy = ({
+  isOpen,
+  onChangeIsOpen,
+}: PopupPrivacyPolicyProps) => {
   const { t } = useTranslation("mypage");
 
   const styleTop: CSS = {
@@ -26,7 +29,7 @@ const PopupPrivacyPolicy = ({ isOpen, onClose }: PopupPrivacyPolicyProps) => {
   return (
     <Modal
       isOpen={isOpen}
-      onChangeIsOpen={onClose}
+      onChangeIsOpen={onChangeIsOpen}
       width={theme.modal_width_large}
       padding="16px"
     >
@@ -39,4 +42,4 @@ const PopupPrivacyPolicy = ({ isOpen, onClose }: PopupPrivacyPolicyProps) => {
   );
 };
 
-export default PopupPrivacyPolicy;
+export default ModalPrivacyPolicy;
diff --git a/src/pages/Mypage/PopupReport/ReportList.tsx b/src/components/ModalPopup/ModalReport/ReportList.tsx
similarity index 100%
rename from src/pages/Mypage/PopupReport/ReportList.tsx
rename to src/components/ModalPopup/ModalReport/ReportList.tsx
diff --git a/src/pages/Mypage/PopupReport/ReportOption.tsx b/src/components/ModalPopup/ModalReport/ReportOption.tsx
similarity index 100%
rename from src/pages/Mypage/PopupReport/ReportOption.tsx
rename to src/components/ModalPopup/ModalReport/ReportOption.tsx
diff --git a/src/pages/Mypage/PopupReport/index.tsx b/src/components/ModalPopup/ModalReport/index.tsx
similarity index 92%
rename from src/pages/Mypage/PopupReport/index.tsx
rename to src/components/ModalPopup/ModalReport/index.tsx
index 771b4c750..89bb11a05 100644
--- a/src/pages/Mypage/PopupReport/index.tsx
+++ b/src/components/ModalPopup/ModalReport/index.tsx
@@ -19,10 +19,10 @@ import ErrorOutlineRoundedIcon from "@mui/icons-material/ErrorOutlineRounded";
 // };
 type RecordProps = {
   isOpen: boolean;
-  onClose: () => void;
+  onChangeIsOpen: (isOpen: boolean) => void;
 };
 
-const PopupReport = (props: RecordProps) => {
+const ModalReport = (props: RecordProps) => {
   const { t } = useTranslation("mypage");
   const [option, setOption] = useState<ReportOptionType>("Reporting");
   const [, reportHistory] = useQuery.get("/reports/searchByUser");
@@ -55,7 +55,7 @@ const PopupReport = (props: RecordProps) => {
   return (
     <Modal
       isOpen={props.isOpen}
-      onChangeIsOpen={props.onClose}
+      onChangeIsOpen={props.onChangeIsOpen}
       padding="16px 12px"
     >
       <div style={styleTitle}>
@@ -82,4 +82,4 @@ const PopupReport = (props: RecordProps) => {
   );
 };
 
-export default PopupReport;
+export default ModalReport;
diff --git a/src/pages/Mypage/PopupPolicy.jsx b/src/components/ModalPopup/ModalTerms.jsx
similarity index 86%
rename from src/pages/Mypage/PopupPolicy.jsx
rename to src/components/ModalPopup/ModalTerms.jsx
index de6703095..9627b1633 100644
--- a/src/pages/Mypage/PopupPolicy.jsx
+++ b/src/components/ModalPopup/ModalTerms.jsx
@@ -77,7 +77,7 @@ Agree.propTypes = {
   onAgree: PropTypes.func,
 };
 
-const PopupPolicy = (props) => {
+const ModalTerms = (props) => {
   const { t } = useTranslation("mypage");
   const history = useHistory();
   const loginInfoDetail = useRecoilValue(loginInfoDetailAtom);
@@ -86,10 +86,10 @@ const PopupPolicy = (props) => {
   const onClose = async () => {
     if (didAgree === null) return;
     if (didAgree === true) {
-      props.onClose();
+      props.onChangeIsOpen(false);
       return;
     }
-    history.push("/logout");
+    history.push("/logout"); // fixme : 로그아웃 로직 통합시켜야 함
   };
 
   const styleTop = {
@@ -113,17 +113,21 @@ const PopupPolicy = (props) => {
       </div>
       <Terms />
       <div data-cy="agreement-bottom">
-        <Agree didAgree={didAgree} onClose={onClose} onAgree={props.onClose} />
+        <Agree
+          didAgree={didAgree}
+          onClose={onClose}
+          onAgree={() => props.onChangeIsOpen(false)}
+        />
       </div>
     </Modal>
   );
 };
-PopupPolicy.propTypes = {
+ModalTerms.propTypes = {
   isOpen: PropTypes.bool,
-  onClose: PropTypes.func,
+  onChangeIsOpen: PropTypes.func,
 };
-PopupPolicy.defaultProps = {
-  onClose: () => {},
+ModalTerms.defaultProps = {
+  onChangeIsOpen: () => {},
 };
 
-export default PopupPolicy;
+export default ModalTerms;
diff --git a/src/pages/Mypage/ModalNotification/Guide.tsx b/src/components/ModalPopup/NotificationGuide.tsx
similarity index 95%
rename from src/pages/Mypage/ModalNotification/Guide.tsx
rename to src/components/ModalPopup/NotificationGuide.tsx
index f8501e847..19e126a33 100644
--- a/src/pages/Mypage/ModalNotification/Guide.tsx
+++ b/src/components/ModalPopup/NotificationGuide.tsx
@@ -1,6 +1,6 @@
 import theme from "tools/theme";
 
-const Guide = () => {
+const NotificationGuide = () => {
   const styleGuide = {
     ...theme.font12,
     color: theme.gray_text,
@@ -42,4 +42,4 @@ const Guide = () => {
   );
 };
 
-export default Guide;
+export default NotificationGuide;
diff --git a/src/components/ModalPopup/index.tsx b/src/components/ModalPopup/index.tsx
new file mode 100644
index 000000000..2ba709fb4
--- /dev/null
+++ b/src/components/ModalPopup/index.tsx
@@ -0,0 +1,15 @@
+import ModalCredit from "./ModalCredit";
+import ModalModify from "./ModalModify";
+import ModalNotification from "./ModalNotification";
+import ModalPrivacyPolicy from "./ModalPrivacyPolicy";
+import ModalReport from "./ModalReport";
+import ModalTerms from "./ModalTerms";
+
+export {
+  ModalCredit,
+  ModalModify,
+  ModalNotification,
+  ModalPrivacyPolicy,
+  ModalReport,
+  ModalTerms,
+};
diff --git a/src/pages/Mypage/ProfileImg.jsx b/src/components/ProfileImg.jsx
similarity index 100%
rename from src/pages/Mypage/ProfileImg.jsx
rename to src/components/ProfileImg.jsx
diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx
index 5ccb1441a..bcd43c3d6 100644
--- a/src/components/Skeleton/index.tsx
+++ b/src/components/Skeleton/index.tsx
@@ -5,8 +5,8 @@ import { useAxios } from "hooks/useTaxiAPI";
 
 import HeaderBar from "components/HeaderBar";
 import Loading from "components/Loading";
+import { ModalTerms } from "components/ModalPopup";
 import Error from "pages/Error";
-import PopupPolicy from "pages/Mypage/PopupPolicy";
 
 import Footer from "./Footer";
 import Navigation from "./Navigation";
@@ -138,7 +138,7 @@ const Skeleton = ({ children }: SkeletonProps) => {
       <HeaderBar />
       {children}
       <Footer />
-      <PopupPolicy isOpen={!!userId && !isAgreeOnTermsOfService} />
+      <ModalTerms isOpen={!!userId && !isAgreeOnTermsOfService} />
     </Container>
   );
 };
diff --git a/src/pages/Chatting/Header/HeaderBody.jsx b/src/pages/Chatting/Header/HeaderBody.jsx
index 39261c15b..2b6cf1483 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 "pages/Mypage/ProfileImg";
+import ProfileImg from "components/ProfileImg";
 
 import PopupCancel from "./Popup/PopupCancel";
 import PopupPay from "./Popup/PopupPay";
diff --git a/src/pages/Chatting/MessagesBody/ChatSet.jsx b/src/pages/Chatting/MessagesBody/ChatSet.jsx
index 50e77c479..646fb3b04 100644
--- a/src/pages/Chatting/MessagesBody/ChatSet.jsx
+++ b/src/pages/Chatting/MessagesBody/ChatSet.jsx
@@ -1,8 +1,8 @@
 import PropTypes from "prop-types";
 import { useEffect, useState } from "react";
 
+import ProfileImg from "components/ProfileImg";
 import ImageFullscreen from "pages/Chatting/MessagesBody/ImageFullscreen";
-import ProfileImg from "pages/Mypage/ProfileImg";
 
 import ChatPaySettle from "./ChatPaySettle";
 
diff --git a/src/pages/Chatting/MessagesBody/PopupReport.tsx b/src/pages/Chatting/MessagesBody/PopupReport.tsx
index b47f991e1..ea6419f4d 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 "pages/Mypage/ProfileImg";
+import ProfileImg from "components/ProfileImg";
 
 import alertAtom from "atoms/alert";
 import { useSetRecoilState } from "recoil";
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index cf82f7222..15405e7d5 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import { useHistory, useParams } from "react-router-dom";
 
-import PopupPrivacyPolicy from "pages/Mypage/PopupPrivacyPolicy";
+import { ModalPrivacyPolicy } from "components/ModalPopup";
 
 import InfoSection from "./InfoSection";
 import RoomSection from "./RoomSection";
@@ -14,9 +14,9 @@ const Home = () => {
 
   return (
     <>
-      <PopupPrivacyPolicy
+      <ModalPrivacyPolicy
         isOpen={roomId === "privacyPolicy"}
-        onClose={onCloseModal}
+        onChangeIsOpen={onCloseModal}
       />
       <InfoSection />
       <RoomSection roomId={roomId} />
diff --git a/src/pages/Mypage/index.tsx b/src/pages/Mypage/index.tsx
index 2a5e0880e..c06c18c93 100644
--- a/src/pages/Mypage/index.tsx
+++ b/src/pages/Mypage/index.tsx
@@ -4,18 +4,20 @@ import { useTranslation } from "react-i18next";
 import useDateToken from "hooks/useDateToken";
 
 import LinkLogout from "components/Link/LinkLogout";
+import {
+  ModalCredit,
+  ModalModify,
+  ModalNotification,
+  ModalPrivacyPolicy,
+  ModalReport,
+  ModalTerms,
+} from "components/ModalPopup";
+import ProfileImg from "components/ProfileImg";
 import SuggestLogin from "components/SuggestLogin";
 import Title from "components/Title";
 import WhiteContainer from "components/WhiteContainer";
 
 import Menu from "./Menu";
-import ModalNotification from "./ModalNotification";
-import PopupMembers from "./PopupMembers";
-import PopupModify from "./PopupModify";
-import PopupPolicy from "./PopupPolicy";
-import PopupPrivacyPolicy from "./PopupPrivacyPolicy";
-import PopupReport from "./PopupReport";
-import ProfileImg from "./ProfileImg";
 
 import loginInfoDetailAtom from "atoms/loginInfoDetail";
 import notificationOptionsAtom from "atoms/notificationOptions";
@@ -160,24 +162,18 @@ const Mypage = () => {
               </Menu>
             </div>
           </WhiteContainer>
-          <PopupModify
+          <ModalModify
             isOpen={isOpenProfileModify}
-            onClose={() => setIsOpenProfileModify(false)}
+            onChangeIsOpen={setIsOpenProfileModify}
             onUpdate={refreshProfImgToken}
             profToken={profImgToken}
           />
-          <PopupReport
-            isOpen={isOpenReport}
-            onClose={() => setIsOpenReport(false)}
-          />
+          <ModalReport isOpen={isOpenReport} onChangeIsOpen={setIsOpenReport} />
           <ModalNotification
             isOpen={isOpenNotification}
             onChangeIsOpen={setIsOpenNotification}
           />
-          <PopupPolicy
-            isOpen={isOpenPolicy}
-            onClose={() => setIsOpenPolicy(false)}
-          />
+          <ModalTerms isOpen={isOpenPolicy} onChangeIsOpen={setIsOpenPolicy} />
         </>
       ) : (
         <WhiteContainer marginAuto>
@@ -212,14 +208,11 @@ const Mypage = () => {
           )}
         </div>
       </WhiteContainer>
-      <PopupPrivacyPolicy
+      <ModalPrivacyPolicy
         isOpen={isOpenPrivacyPolicy}
-        onClose={() => setIsOpenPrivacyPolicy(false)}
-      />
-      <PopupMembers
-        isOpen={isOpenMembers}
-        onClose={() => setOpenIsMembers(false)}
+        onChangeIsOpen={setIsOpenPrivacyPolicy}
       />
+      <ModalCredit isOpen={isOpenMembers} onChangeIsOpen={setOpenIsMembers} />
     </>
   );
 };

From 3a5d7f30d96bfa8a9fa869cca27872321dbfa101 Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Sat, 15 Apr 2023 09:03:46 +0900
Subject: [PATCH 39/43] Rename: loginInfo, myRooms and taxiLocations

---
 .../{loginInfoDetail.ts => loginInfo.ts}      | 10 +++---
 src/atoms/myRoom.ts                           | 13 -------
 src/atoms/myRooms.ts                          | 13 +++++++
 src/atoms/taxiLocation.js                     |  8 -----
 src/atoms/taxiLocations.js                    |  8 +++++
 src/components/Link/LinkLogout.tsx            |  7 ++--
 src/components/ModalPopup/ModalModify.jsx     | 35 +++++++++----------
 .../ModalPopup/ModalNotification.tsx          |  7 ++--
 src/components/ModalPopup/ModalTerms.jsx      | 16 ++++-----
 src/components/ModalRoomOptions/Place.jsx     |  8 ++---
 src/components/Room/index.jsx                 |  8 ++---
 .../Skeleton/ChannelTalkProvider/index.tsx    | 12 +++----
 .../Skeleton/FirebaseMessagingProvider.tsx    |  8 ++---
 .../FlutterEventCommunicationProvider.tsx     |  4 +--
 .../Skeleton/GoogleAnalyticsProvier.tsx       |  6 ++--
 src/components/Skeleton/index.tsx             | 21 ++++++-----
 src/pages/Addroom/index.tsx                   | 14 ++++----
 src/pages/Chatting/Header/HeaderBody.jsx      | 10 +++---
 .../Chatting/Header/Popup/PopupCancel.jsx     |  6 ++--
 src/pages/Chatting/Header/Popup/PopupPay.jsx  |  6 ++--
 src/pages/Chatting/Header/Popup/PopupSend.jsx |  6 ++--
 .../MessageForm/Popup/PopupAccount.tsx        | 10 +++---
 src/pages/Chatting/MessagesBody/index.jsx     |  4 +--
 src/pages/Chatting/index.jsx                  |  4 +--
 src/pages/Home/InfoSection.tsx                | 16 ++++-----
 src/pages/Login/index.jsx                     |  4 +--
 src/pages/Mypage/index.tsx                    | 20 +++++------
 src/pages/Myroom/index.jsx                    | 18 +++++-----
 src/pages/Search/RoomSelectionModal.jsx       | 16 ++++-----
 29 files changed, 157 insertions(+), 161 deletions(-)
 rename src/atoms/{loginInfoDetail.ts => loginInfo.ts} (70%)
 delete mode 100644 src/atoms/myRoom.ts
 create mode 100644 src/atoms/myRooms.ts
 delete mode 100644 src/atoms/taxiLocation.js
 create mode 100644 src/atoms/taxiLocations.js

diff --git a/src/atoms/loginInfoDetail.ts b/src/atoms/loginInfo.ts
similarity index 70%
rename from src/atoms/loginInfoDetail.ts
rename to src/atoms/loginInfo.ts
index c1eafcecd..b6a6faadf 100644
--- a/src/atoms/loginInfoDetail.ts
+++ b/src/atoms/loginInfo.ts
@@ -1,6 +1,6 @@
 import { atom } from "recoil";
 
-export type LoginInfoDetailType = {
+export type LoginInfoType = Nullable<{
   agreeOnTermsOfService: boolean;
   ban: boolean;
   email: string;
@@ -15,11 +15,11 @@ export type LoginInfoDetailType = {
   account: string;
   deviceToken: Nullable<string>;
   deviceType: "web" | "app";
-};
+}>;
 
-const loginInfoDetailAtom = atom<Nullable<LoginInfoDetailType>>({
-  key: "loginInfoDetailAtom",
+const loginInfoAtom = atom<LoginInfoType>({
+  key: "loginInfoAtom",
   default: null,
 });
 
-export default loginInfoDetailAtom;
+export default loginInfoAtom;
diff --git a/src/atoms/myRoom.ts b/src/atoms/myRoom.ts
deleted file mode 100644
index c5360e462..000000000
--- a/src/atoms/myRoom.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { atom } from "recoil";
-
-export type MyRoomType = {
-  ongoing: Array<any>; // FIXME: 방의 타입 정의
-  done: Array<any>;
-};
-
-const myRoomAtom = atom<Nullable<MyRoomType>>({
-  key: "myRoomAtom",
-  default: null,
-});
-
-export default myRoomAtom;
diff --git a/src/atoms/myRooms.ts b/src/atoms/myRooms.ts
new file mode 100644
index 000000000..24d024e84
--- /dev/null
+++ b/src/atoms/myRooms.ts
@@ -0,0 +1,13 @@
+import { atom } from "recoil";
+
+export type MyRoomsType = Nullable<{
+  ongoing: Array<any>; // FIXME: 방의 타입 정의
+  done: Array<any>;
+}>;
+
+const myRoomsAtom = atom<MyRoomsType>({
+  key: "myRoomsAtom",
+  default: null,
+});
+
+export default myRoomsAtom;
diff --git a/src/atoms/taxiLocation.js b/src/atoms/taxiLocation.js
deleted file mode 100644
index 21427f2b1..000000000
--- a/src/atoms/taxiLocation.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { atom } from "recoil";
-
-const taxiLocationAtom = atom({
-  key: "taxiLocationAtom",
-  default: [],
-});
-
-export default taxiLocationAtom;
diff --git a/src/atoms/taxiLocations.js b/src/atoms/taxiLocations.js
new file mode 100644
index 000000000..9fef91c64
--- /dev/null
+++ b/src/atoms/taxiLocations.js
@@ -0,0 +1,8 @@
+import { atom } from "recoil";
+
+const taxiLocationsAtom = atom({
+  key: "taxiLocationsAtom",
+  default: [],
+});
+
+export default taxiLocationsAtom;
diff --git a/src/components/Link/LinkLogout.tsx b/src/components/Link/LinkLogout.tsx
index 039da48dd..260f73bc9 100644
--- a/src/components/Link/LinkLogout.tsx
+++ b/src/components/Link/LinkLogout.tsx
@@ -6,19 +6,22 @@ type LinkLogoutProps = {
   redirect?: string;
 };
 
-const LinkLogout = ({ children, redirect }: LinkLogoutProps) => {
+export const useOnClickLogout = (redirect?: string) => {
   const history = useHistory();
   const { pathname, search } = useLocation();
   const redirectPath = redirect || pathname + search;
   const isClicked = useRef(false);
 
-  const onClickLogout = useCallback(async () => {
+  return useCallback(async () => {
     if (isClicked.current) return;
     isClicked.current = true;
     history.replace(`/logout?redirect=${encodeURIComponent(redirectPath)}`);
     isClicked.current = false;
   }, [history, redirectPath]);
+};
 
+const LinkLogout = ({ children, redirect }: LinkLogoutProps) => {
+  const onClickLogout = useOnClickLogout(redirect);
   return <div onClick={onClickLogout}>{children}</div>;
 };
 
diff --git a/src/components/ModalPopup/ModalModify.jsx b/src/components/ModalPopup/ModalModify.jsx
index ca9aa7c0b..392b63298 100644
--- a/src/components/ModalPopup/ModalModify.jsx
+++ b/src/components/ModalPopup/ModalModify.jsx
@@ -12,7 +12,7 @@ import Modal from "components/Modal";
 import ProfileImg from "components/ProfileImg";
 
 import alertAtom from "atoms/alert";
-import loginInfoDetailAtom from "atoms/loginInfoDetail";
+import loginInfoAtom from "atoms/loginInfo";
 import { useRecoilState, useSetRecoilState } from "recoil";
 
 import convertImg from "tools/convertImg";
@@ -46,8 +46,7 @@ const BtnProfImg = (props) => {
 
   const inputImage = useRef(null);
   const [profileAlert, setProfileAlert] = useState(null);
-  const [loginInfoDetail, setLoginInfoDetail] =
-    useRecoilState(loginInfoDetailAtom);
+  const [loginInfo, setLoginInfo] = useRecoilState(loginInfoAtom);
 
   useEffect(() => {
     if (profileAlert === "LOADING") return;
@@ -80,8 +79,8 @@ const BtnProfImg = (props) => {
             method: "get",
           });
           if (data2?.result) {
-            setLoginInfoDetail({
-              ...loginInfoDetail,
+            setLoginInfo({
+              ...loginInfo,
               profileImgUrl: data2.profileImageUrl,
             });
             props.onUpdate();
@@ -147,14 +146,13 @@ const ModalModify = (props) => {
   const [nickname, setNickname] = useState("");
   const [account, setAccount] = useState("");
 
-  const [loginInfoDetail, setLoginInfoDetail] =
-    useRecoilState(loginInfoDetailAtom);
+  const [loginInfo, setLoginInfo] = useRecoilState(loginInfoAtom);
   const setAlert = useSetRecoilState(alertAtom);
 
   useEffect(() => {
-    setNickname(loginInfoDetail?.nickname || "");
-    setAccount(loginInfoDetail?.account || "");
-  }, [loginInfoDetail, props.isOpen]);
+    setNickname(loginInfo?.nickname || "");
+    setAccount(loginInfo?.account || "");
+  }, [loginInfo, props.isOpen]);
 
   const isEditable =
     regExpTest.account(account) && regExpTest.nickname(nickname);
@@ -162,7 +160,7 @@ const ModalModify = (props) => {
     let isNeedToUpdateLoginInfo = false;
     if (!isEditable) return;
 
-    if (nickname !== loginInfoDetail?.nickname) {
+    if (nickname !== loginInfo?.nickname) {
       isNeedToUpdateLoginInfo = true;
       await axios({
         url: "/users/editNickname",
@@ -171,7 +169,7 @@ const ModalModify = (props) => {
         onError: () => setAlert(t("page_modify.nickname_failed")),
       });
     }
-    if (account !== loginInfoDetail?.account) {
+    if (account !== loginInfo?.account) {
       isNeedToUpdateLoginInfo = true;
       await axios({
         url: "/users/editAccount",
@@ -181,7 +179,7 @@ const ModalModify = (props) => {
       });
     }
     if (isNeedToUpdateLoginInfo) {
-      setLoginInfoDetail(
+      setLoginInfo(
         await axios({
           url: "/logininfo",
           method: "get",
@@ -231,9 +229,9 @@ const ModalModify = (props) => {
       padding="32px 10px 10px"
       onEnter={handleEditProfile}
     >
-      <div style={styleName}>{loginInfoDetail?.name}</div>
+      <div style={styleName}>{loginInfo?.name}</div>
       <ProfImg
-        profileImgUrl={loginInfoDetail?.profileImgUrl}
+        profileImgUrl={loginInfo?.profileImgUrl}
         token={props.profToken}
       />
       <BtnProfImg
@@ -244,11 +242,11 @@ const ModalModify = (props) => {
       <div style={{ rowGap: "10px", padding: "0px 20px" }}>
         <div style={{ ...styleTitle, marginTop: "24px" }}>
           {t("student_id")}
-          <div style={styleContent}>{loginInfoDetail?.subinfo?.kaist}</div>
+          <div style={styleContent}>{loginInfo?.subinfo?.kaist}</div>
         </div>
         <div style={{ ...styleTitle, marginTop: "16px" }}>
           {t("email")}
-          <div style={styleContent}>{loginInfoDetail?.email}</div>
+          <div style={styleContent}>{loginInfo?.email}</div>
         </div>
         <div style={{ ...styleTitle, marginTop: "10px" }}>
           {t("nickname")}
@@ -278,8 +276,7 @@ const ModalModify = (props) => {
           type="purple_inset"
           disabled={
             !isEditable ||
-            (nickname === loginInfoDetail?.nickname &&
-              account === loginInfoDetail?.account)
+            (nickname === loginInfo?.nickname && account === loginInfo?.account)
           }
           width="calc(50% - 5px)"
           padding="10px 0 9px"
diff --git a/src/components/ModalPopup/ModalNotification.tsx b/src/components/ModalPopup/ModalNotification.tsx
index 42516a748..dd85378bb 100644
--- a/src/components/ModalPopup/ModalNotification.tsx
+++ b/src/components/ModalPopup/ModalNotification.tsx
@@ -5,10 +5,11 @@ import { useAxios } from "hooks/useTaxiAPI";
 
 import DottedLine from "components/DottedLine";
 import Modal from "components/Modal";
-import NotificationGuide from "components/ModalPopup/NotificationGuide";
 import Toggle from "components/Toggle";
 
-import loginInfoDetailAtom from "atoms/loginInfoDetail";
+import NotificationGuide from "./NotificationGuide";
+
+import loginInfoAtom from "atoms/loginInfo";
 import notificationOptionsAtom from "atoms/notificationOptions";
 import { useRecoilState, useRecoilValue } from "recoil";
 
@@ -51,7 +52,7 @@ const ModalNotification = ({
 }: ModalNotificationProps) => {
   const { t } = useTranslation("mypage");
   const axios = useAxios();
-  const { deviceToken } = useRecoilValue(loginInfoDetailAtom) || {};
+  const { deviceToken } = useRecoilValue(loginInfoAtom) || {};
   const [notificationOptions, setNotificationOptions] = useRecoilState(
     notificationOptionsAtom
   );
diff --git a/src/components/ModalPopup/ModalTerms.jsx b/src/components/ModalPopup/ModalTerms.jsx
index 9627b1633..a54814909 100644
--- a/src/components/ModalPopup/ModalTerms.jsx
+++ b/src/components/ModalPopup/ModalTerms.jsx
@@ -1,15 +1,15 @@
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
-import { useHistory } from "react-router";
 
 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 alertAtom from "atoms/alert";
-import loginInfoDetailAtom from "atoms/loginInfoDetail";
+import loginInfoAtom from "atoms/loginInfo";
 import { useRecoilValue, useSetRecoilState } from "recoil";
 
 import theme from "tools/theme";
@@ -19,7 +19,7 @@ import { ReactComponent as TaxiLogo } from "static/assets/TaxiLogo.svg";
 const Agree = (props) => {
   const axios = useAxios();
   const setAlert = useSetRecoilState(alertAtom);
-  const setLoginInfoDetail = useSetRecoilState(loginInfoDetailAtom);
+  const setLoginInfo = useSetRecoilState(loginInfoAtom);
 
   const onAgree = async () => {
     await axios({
@@ -27,7 +27,7 @@ const Agree = (props) => {
       method: "post",
       onError: () => setAlert("약관 동의에 실패하였습니다."),
     });
-    setLoginInfoDetail(
+    setLoginInfo(
       await axios({
         url: "/logininfo",
         method: "get",
@@ -79,9 +79,9 @@ Agree.propTypes = {
 
 const ModalTerms = (props) => {
   const { t } = useTranslation("mypage");
-  const history = useHistory();
-  const loginInfoDetail = useRecoilValue(loginInfoDetailAtom);
-  const didAgree = loginInfoDetail?.agreeOnTermsOfService ?? false;
+  const onClickLogout = useOnClickLogout();
+  const loginInfo = useRecoilValue(loginInfoAtom);
+  const didAgree = loginInfo?.agreeOnTermsOfService ?? false;
 
   const onClose = async () => {
     if (didAgree === null) return;
@@ -89,7 +89,7 @@ const ModalTerms = (props) => {
       props.onChangeIsOpen(false);
       return;
     }
-    history.push("/logout"); // fixme : 로그아웃 로직 통합시켜야 함
+    onClickLogout();
   };
 
   const styleTop = {
diff --git a/src/components/ModalRoomOptions/Place.jsx b/src/components/ModalRoomOptions/Place.jsx
index 9b4ac57de..bf4a4673e 100644
--- a/src/components/ModalRoomOptions/Place.jsx
+++ b/src/components/ModalRoomOptions/Place.jsx
@@ -9,7 +9,7 @@ import WhiteContainer from "components/WhiteContainer";
 
 import Picker from "./Picker";
 
-import taxiLocationAtom from "atoms/taxiLocation";
+import taxiLocationsAtom from "atoms/taxiLocations";
 import { useRecoilValue } from "recoil";
 
 import hoverEventSet from "tools/hoverEventSet";
@@ -150,17 +150,17 @@ PlaceElement.propTypes = {
 const Place = (props) => {
   const [isPopup1, setPopup1] = useState(false);
   const [isPopup2, setPopup2] = useState(false);
-  const taxiLocation = useRecoilValue(taxiLocationAtom);
+  const taxiLocations = useRecoilValue(taxiLocationsAtom);
   const taxiLocationWithName = useMemo(
     () =>
-      taxiLocation.reduce((acc, place) => {
+      taxiLocations.reduce((acc, place) => {
         acc.push({
           ...place,
           name: place.koName,
         });
         return acc;
       }, []),
-    [taxiLocation]
+    [taxiLocations]
   );
 
   const getPlaceName = (placeId) => {
diff --git a/src/components/Room/index.jsx b/src/components/Room/index.jsx
index dae77af77..309bbd522 100644
--- a/src/components/Room/index.jsx
+++ b/src/components/Room/index.jsx
@@ -6,7 +6,7 @@ import DottedLine from "components/DottedLine";
 
 import "./index.css";
 
-import loginInfoDetailAtom from "atoms/loginInfoDetail";
+import loginInfoAtom from "atoms/loginInfo";
 import { useRecoilValue } from "recoil";
 
 import { date2str } from "tools/moment";
@@ -77,10 +77,10 @@ const Room = (props) => {
   const { i18n } = useTranslation();
 
   const users = props.data?.part || [];
-  const loginInfoDetail = useRecoilValue(loginInfoDetailAtom);
+  const loginInfo = useRecoilValue(loginInfoAtom);
   const isSettlementForMe = useMemo(
-    () => users.find((user) => user._id === loginInfoDetail.oid)?.isSettlement,
-    [loginInfoDetail?.oid, JSON.stringify(users)]
+    () => users.find((user) => user._id === loginInfo.oid)?.isSettlement,
+    [loginInfo?.oid, JSON.stringify(users)]
   );
   const styleBox = {
     position: "relative",
diff --git a/src/components/Skeleton/ChannelTalkProvider/index.tsx b/src/components/Skeleton/ChannelTalkProvider/index.tsx
index 9ec793844..59b82bc46 100644
--- a/src/components/Skeleton/ChannelTalkProvider/index.tsx
+++ b/src/components/Skeleton/ChannelTalkProvider/index.tsx
@@ -4,7 +4,7 @@ import { useLocation } from "react-router-dom";
 import ChannelService from "./channelService";
 
 import errorAtom from "atoms/error";
-import loginInfoDetailAtom from "atoms/loginInfoDetail";
+import loginInfoAtom from "atoms/loginInfo";
 import { useRecoilValue } from "recoil";
 
 import { channelTalkPluginKey } from "loadenv";
@@ -12,19 +12,19 @@ import { channelTalkPluginKey } from "loadenv";
 const ChannelTalkProvider = () => {
   const location = useLocation();
   const pathname = location.pathname;
-  const loginInfoDetail = useRecoilValue(loginInfoDetailAtom);
+  const loginInfo = useRecoilValue(loginInfoAtom);
   const error = useRecoilValue(errorAtom);
 
   useEffect(() => {
-    if (loginInfoDetail) {
+    if (loginInfo) {
       ChannelService.updateUser({
         profile: {
-          name: loginInfoDetail?.name,
-          email: loginInfoDetail?.email,
+          name: loginInfo?.name,
+          email: loginInfo?.email,
         },
       });
     }
-  }, [loginInfoDetail]);
+  }, [loginInfo]);
 
   useEffect(() => {
     ChannelService.boot({
diff --git a/src/components/Skeleton/FirebaseMessagingProvider.tsx b/src/components/Skeleton/FirebaseMessagingProvider.tsx
index 0095db91e..f948713b0 100644
--- a/src/components/Skeleton/FirebaseMessagingProvider.tsx
+++ b/src/components/Skeleton/FirebaseMessagingProvider.tsx
@@ -4,7 +4,7 @@ import { useCallback, useEffect } from "react";
 
 import { useAxios } from "hooks/useTaxiAPI";
 
-import loginInfoDetailAtom from "atoms/loginInfoDetail";
+import loginInfoAtom from "atoms/loginInfo";
 import { useRecoilValue, useSetRecoilState } from "recoil";
 
 import { firebaseConfig } from "loadenv";
@@ -13,8 +13,8 @@ const firebaseApp = firebaseConfig && initializeApp(firebaseConfig);
 
 const FirebaseMessagingProvider = () => {
   const axios = useAxios();
-  const { id: userId, deviceToken } = useRecoilValue(loginInfoDetailAtom) || {};
-  const setLoginInfoDetail = useSetRecoilState(loginInfoDetailAtom);
+  const { id: userId, deviceToken } = useRecoilValue(loginInfoAtom) || {};
+  const setLoginInfo = useSetRecoilState(loginInfoAtom);
 
   const registerToken = useCallback(async (trial: number) => {
     // 토큰 등록 실패 시 10초 간격으로 최대 3회 시도
@@ -50,7 +50,7 @@ const FirebaseMessagingProvider = () => {
           axios({
             url: "/logininfo",
             method: "get",
-            onSuccess: (data) => setLoginInfoDetail(data),
+            onSuccess: (data) => setLoginInfo(data),
           }),
         onError: () => {},
       });
diff --git a/src/components/Skeleton/FlutterEventCommunicationProvider.tsx b/src/components/Skeleton/FlutterEventCommunicationProvider.tsx
index fb175f23b..76aa7ab07 100644
--- a/src/components/Skeleton/FlutterEventCommunicationProvider.tsx
+++ b/src/components/Skeleton/FlutterEventCommunicationProvider.tsx
@@ -2,7 +2,7 @@ import { useEffect } from "react";
 
 import { useAxios } from "hooks/useTaxiAPI";
 
-import loginInfoDetailAtom from "atoms/loginInfoDetail";
+import loginInfoAtom from "atoms/loginInfo";
 import { useSetRecoilState } from "recoil";
 
 // global flag variable to check if the webview is in Flutter
@@ -10,7 +10,7 @@ let isWebViewInFlutter: boolean = false;
 
 const FlutterEventCommunicationProvider = () => {
   const axios = useAxios();
-  const setLoginInfoDetail = useSetRecoilState(loginInfoDetailAtom);
+  const setLoginInfoDetail = useSetRecoilState(loginInfoAtom);
 
   useEffect(() => {
     const eventListeners: Array<{
diff --git a/src/components/Skeleton/GoogleAnalyticsProvier.tsx b/src/components/Skeleton/GoogleAnalyticsProvier.tsx
index cc14c79e2..5fe833189 100644
--- a/src/components/Skeleton/GoogleAnalyticsProvier.tsx
+++ b/src/components/Skeleton/GoogleAnalyticsProvier.tsx
@@ -2,7 +2,7 @@ import { useEffect, useRef } from "react";
 import reactGA from "react-ga4";
 import { useLocation } from "react-router-dom";
 
-import loginInfoDetailAtom from "atoms/loginInfoDetail";
+import loginInfoAtom from "atoms/loginInfo";
 import { useRecoilValue } from "recoil";
 
 import { gaTrackingId, nodeEnv } from "loadenv";
@@ -14,8 +14,8 @@ const GoogleAnalyticsProvier = () => {
   const { pathname, search } = location;
   const currentPath = pathname + search;
 
-  const loginInfoDetail = useRecoilValue(loginInfoDetailAtom);
-  const userId = loginInfoDetail?.id;
+  const loginInfo = useRecoilValue(loginInfoAtom);
+  const userId = loginInfo?.id;
 
   useEffect(() => {
     if (gaTrackingId) {
diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx
index bcd43c3d6..1833134fc 100644
--- a/src/components/Skeleton/index.tsx
+++ b/src/components/Skeleton/index.tsx
@@ -12,10 +12,10 @@ import Footer from "./Footer";
 import Navigation from "./Navigation";
 
 import errorAtom from "atoms/error";
-import loginInfoDetailAtom from "atoms/loginInfoDetail";
-import myRoomAtom from "atoms/myRoom";
+import loginInfoAtom from "atoms/loginInfo";
+import myRoomsAtom from "atoms/myRooms";
 import notificationOptionsAtom from "atoms/notificationOptions";
-import taxiLocationAtom from "atoms/taxiLocation";
+import taxiLocationsAtom from "atoms/taxiLocations";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 
 type ContainerProps = {
@@ -47,17 +47,16 @@ const Skeleton = ({ children }: SkeletonProps) => {
   const axios = useAxios();
   const [isLoading, setIsLoading] = useState(true);
 
-  const [loginInfoDetail, setLoginInfoDetail] =
-    useRecoilState(loginInfoDetailAtom);
+  const [loginInfo, setLoginInfo] = useRecoilState(loginInfoAtom);
   const error = useRecoilValue(errorAtom);
   const {
     id: userId,
     agreeOnTermsOfService: isAgreeOnTermsOfService,
     deviceToken,
-  } = loginInfoDetail || {};
+  } = loginInfo || {};
 
-  const setTaxiLocation = useSetRecoilState(taxiLocationAtom);
-  const setMyRoom = useSetRecoilState(myRoomAtom);
+  const setTaxiLocations = useSetRecoilState(taxiLocationsAtom);
+  const setMyRooms = useSetRecoilState(myRoomsAtom);
   const setNotificationOptions = useSetRecoilState(notificationOptionsAtom);
 
   const location = useLocation();
@@ -69,7 +68,7 @@ const Skeleton = ({ children }: SkeletonProps) => {
       url: "/logininfo",
       method: "get",
       onSuccess: (data) => {
-        setLoginInfoDetail(data);
+        setLoginInfo(data);
         setIsLoading(false);
       },
     });
@@ -78,7 +77,7 @@ const Skeleton = ({ children }: SkeletonProps) => {
     axios({
       url: "/locations",
       method: "get",
-      onSuccess: ({ locations }) => setTaxiLocation(locations),
+      onSuccess: ({ locations }) => setTaxiLocations(locations),
     });
   }, []);
 
@@ -88,7 +87,7 @@ const Skeleton = ({ children }: SkeletonProps) => {
       axios({
         url: "/rooms/searchByUser",
         method: "get",
-        onSuccess: (data) => setMyRoom(data),
+        onSuccess: (data) => setMyRooms(data),
       });
     }
   }, [userId]);
diff --git a/src/pages/Addroom/index.tsx b/src/pages/Addroom/index.tsx
index b60e671e8..a7520800b 100644
--- a/src/pages/Addroom/index.tsx
+++ b/src/pages/Addroom/index.tsx
@@ -12,8 +12,8 @@ import {
   OptionPlace,
   OptionTime,
 } from "components/ModalRoomOptions";
-import SuggestLogin from "components/SuggestLogin";
 import RLayout from "components/RLayout";
+import SuggestLogin from "components/SuggestLogin";
 import Title from "components/Title";
 import WhiteContainer from "components/WhiteContainer";
 import { MAX_PARTICIPATION } from "pages/Myroom";
@@ -21,8 +21,8 @@ import { MAX_PARTICIPATION } from "pages/Myroom";
 import FullParticipation from "./FullParticipation";
 
 import alertAtom from "atoms/alert";
-import loginInfoDetailAtom from "atoms/loginInfoDetail";
-import myRoomAtom from "atoms/myRoom";
+import loginInfoAtom from "atoms/loginInfo";
+import myRoomsAtom from "atoms/myRooms";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 
 import { date2str, getToday, getToday10 } from "tools/moment";
@@ -52,8 +52,8 @@ const AddRoom = () => {
   const [calculatedTime, setCalculatedTime] = useState<Date | null>(null);
   const randomRoomName = useMemo(randomRoomNameGenerator, []);
   const setAlert = useSetRecoilState(alertAtom);
-  const [myRoom, setMyRoom] = useRecoilState(myRoomAtom);
-  const isLogin = !!useRecoilValue(loginInfoDetailAtom)?.id;
+  const [myRooms, setMyRooms] = useRecoilState(myRoomsAtom);
+  const isLogin = !!useRecoilValue(loginInfoAtom)?.id;
 
   useEffect(() => {
     const expirationDate = new Date();
@@ -108,7 +108,7 @@ const AddRoom = () => {
           maxPartLength: valueMaxPeople,
         },
         onSuccess: async () =>
-          setMyRoom(
+          setMyRooms(
             await axios({
               url: "/rooms/searchByUser",
               method: "get",
@@ -123,7 +123,7 @@ const AddRoom = () => {
     }
   };
 
-  return (myRoom?.ongoing.length ?? 0) < MAX_PARTICIPATION ? (
+  return (myRooms?.ongoing.length ?? 0) < MAX_PARTICIPATION ? (
     <div>
       <Title icon="add" header marginAuto>
         방 개설하기
diff --git a/src/pages/Chatting/Header/HeaderBody.jsx b/src/pages/Chatting/Header/HeaderBody.jsx
index 2b6cf1483..1cbb09714 100644
--- a/src/pages/Chatting/Header/HeaderBody.jsx
+++ b/src/pages/Chatting/Header/HeaderBody.jsx
@@ -7,7 +7,7 @@ import PopupCancel from "./Popup/PopupCancel";
 import PopupPay from "./Popup/PopupPay";
 import PopupSend from "./Popup/PopupSend";
 
-import loginInfoDetailAtom from "atoms/loginInfoDetail";
+import loginInfoAtom from "atoms/loginInfo";
 import { useRecoilValue } from "recoil";
 
 import { date2str } from "tools/moment";
@@ -183,13 +183,11 @@ Button.propTypes = {
 };
 
 const HeaderBody = (props) => {
-  const userInfoDetail = useRecoilValue(loginInfoDetailAtom);
+  const userInfo = useRecoilValue(loginInfoAtom);
   const users = props.info?.part ?? [];
   const isSettlementForMe = useMemo(
-    () =>
-      users.filter((user) => user._id === userInfoDetail?.oid)?.[0]
-        ?.isSettlement,
-    [userInfoDetail?.oid, JSON.stringify(users)]
+    () => users.filter((user) => user._id === userInfo?.oid)?.[0]?.isSettlement,
+    [userInfo?.oid, JSON.stringify(users)]
   );
 
   return (
diff --git a/src/pages/Chatting/Header/Popup/PopupCancel.jsx b/src/pages/Chatting/Header/Popup/PopupCancel.jsx
index ae276bc21..79c7501da 100644
--- a/src/pages/Chatting/Header/Popup/PopupCancel.jsx
+++ b/src/pages/Chatting/Header/Popup/PopupCancel.jsx
@@ -6,7 +6,7 @@ import { useAxios } from "hooks/useTaxiAPI";
 import PopupContainer from "./PopupContainer";
 
 import alertAtom from "atoms/alert";
-import myRoomAtom from "atoms/myRoom";
+import myRoomsAtom from "atoms/myRooms";
 import { useSetRecoilState } from "recoil";
 
 const PopupCancel = (props) => {
@@ -38,7 +38,7 @@ const PopupCancel = (props) => {
 
   const history = useHistory();
   const setAlert = useSetRecoilState(alertAtom);
-  const setMyRoom = useSetRecoilState(myRoomAtom);
+  const setMyRooms = useSetRecoilState(myRoomsAtom);
   const onClick = () =>
     axios({
       url: "/rooms/abort",
@@ -47,7 +47,7 @@ const PopupCancel = (props) => {
         roomId: props.roomId,
       },
       onSuccess: async () => {
-        setMyRoom(
+        setMyRooms(
           await axios({
             url: "/rooms/searchByUser",
             method: "get",
diff --git a/src/pages/Chatting/Header/Popup/PopupPay.jsx b/src/pages/Chatting/Header/Popup/PopupPay.jsx
index 8e27925ba..4e6bed5a1 100644
--- a/src/pages/Chatting/Header/Popup/PopupPay.jsx
+++ b/src/pages/Chatting/Header/Popup/PopupPay.jsx
@@ -5,7 +5,7 @@ import { useAxios } from "hooks/useTaxiAPI";
 import PopupContainer from "./PopupContainer";
 
 import alertAtom from "atoms/alert";
-import myRoomAtom from "atoms/myRoom";
+import myRoomsAtom from "atoms/myRooms";
 import { useSetRecoilState } from "recoil";
 
 const PopupPay = (props) => {
@@ -36,7 +36,7 @@ const PopupPay = (props) => {
   };
 
   const setAlert = useSetRecoilState(alertAtom);
-  const setMyRoom = useSetRecoilState(myRoomAtom);
+  const setMyRooms = useSetRecoilState(myRoomsAtom);
   const onClick = () => {
     axios({
       url: "/rooms/commitPayment",
@@ -45,7 +45,7 @@ const PopupPay = (props) => {
         roomId: props.roomId,
       },
       onSuccess: async () => {
-        setMyRoom(
+        setMyRooms(
           await axios({
             url: "/rooms/searchByUser",
             method: "get",
diff --git a/src/pages/Chatting/Header/Popup/PopupSend.jsx b/src/pages/Chatting/Header/Popup/PopupSend.jsx
index 3c805d95b..366f7fbc6 100644
--- a/src/pages/Chatting/Header/Popup/PopupSend.jsx
+++ b/src/pages/Chatting/Header/Popup/PopupSend.jsx
@@ -5,7 +5,7 @@ import { useAxios } from "hooks/useTaxiAPI";
 import PopupContainer from "./PopupContainer";
 
 import alertAtom from "atoms/alert";
-import myRoomAtom from "atoms/myRoom";
+import myRoomsAtom from "atoms/myRooms";
 import { useSetRecoilState } from "recoil";
 
 const PopupSend = (props) => {
@@ -36,7 +36,7 @@ const PopupSend = (props) => {
   };
 
   const setAlert = useSetRecoilState(alertAtom);
-  const setMyRoom = useSetRecoilState(myRoomAtom);
+  const setMyRooms = useSetRecoilState(myRoomsAtom);
   const onClick = () => {
     axios({
       url: "/rooms/commitSettlement",
@@ -45,7 +45,7 @@ const PopupSend = (props) => {
         roomId: props.roomId,
       },
       onSuccess: async () => {
-        setMyRoom(
+        setMyRooms(
           await axios({
             url: "/rooms/searchByUser",
             method: "get",
diff --git a/src/pages/Chatting/MessageForm/Popup/PopupAccount.tsx b/src/pages/Chatting/MessageForm/Popup/PopupAccount.tsx
index ea52d13e0..d21c13184 100644
--- a/src/pages/Chatting/MessageForm/Popup/PopupAccount.tsx
+++ b/src/pages/Chatting/MessageForm/Popup/PopupAccount.tsx
@@ -6,7 +6,7 @@ import Button from "components/Button";
 import DottedLine from "components/DottedLine";
 import Modal from "components/Modal";
 
-import loginInfoDetailAtom from "atoms/loginInfoDetail";
+import loginInfoAtom from "atoms/loginInfo";
 import { useRecoilValue } from "recoil";
 
 import regExpTest from "tools/regExpTest";
@@ -21,10 +21,8 @@ type SendAccoundModalProps = {
 };
 
 const PopupAccount = (props: SendAccoundModalProps) => {
-  const loginInfoDetail = useRecoilValue(loginInfoDetailAtom);
-  const [accountNumber, setAccountNumber] = useState(
-    loginInfoDetail?.account || ""
-  );
+  const loginInfo = useRecoilValue(loginInfoAtom);
+  const [accountNumber, setAccountNumber] = useState(loginInfo?.account || "");
 
   const styleTitle = {
     display: "flex",
@@ -44,7 +42,7 @@ const PopupAccount = (props: SendAccoundModalProps) => {
 
   useEffect(() => {
     if (!props.popup) {
-      setAccountNumber(loginInfoDetail?.account || "");
+      setAccountNumber(loginInfo?.account || "");
     }
   }, [props.popup]);
 
diff --git a/src/pages/Chatting/MessagesBody/index.jsx b/src/pages/Chatting/MessagesBody/index.jsx
index 8962f99e8..cc8dba61c 100644
--- a/src/pages/Chatting/MessagesBody/index.jsx
+++ b/src/pages/Chatting/MessagesBody/index.jsx
@@ -6,7 +6,7 @@ import ChatInOut from "./ChatInOut";
 import ChatSet from "./ChatSet";
 import PopupReport from "./PopupReport";
 
-import loginInfoDetailAtom from "atoms/loginInfoDetail";
+import loginInfoAtom from "atoms/loginInfo";
 import { useRecoilValue } from "recoil";
 
 import moment from "tools/moment";
@@ -22,7 +22,7 @@ import moment from "tools/moment";
 // }
 
 const MessagesBody = (props) => {
-  const { oid: userOid } = useRecoilValue(loginInfoDetailAtom) || {};
+  const { oid: userOid } = useRecoilValue(loginInfoAtom) || {};
   const [isOpen, setIsOpen] = useState(false);
   const [path, setPath] = useState("");
   const [name, setName] = useState("");
diff --git a/src/pages/Chatting/index.jsx b/src/pages/Chatting/index.jsx
index 5fd250527..e4232ee15 100644
--- a/src/pages/Chatting/index.jsx
+++ b/src/pages/Chatting/index.jsx
@@ -14,7 +14,7 @@ import Header from "./Header";
 import MessageForm from "./MessageForm";
 import MessagesBody from "./MessagesBody";
 
-import loginInfoDetailAtom from "atoms/loginInfoDetail";
+import loginInfoAtom from "atoms/loginInfo";
 import { useRecoilValue } from "recoil";
 
 import convertImg from "tools/convertImg";
@@ -38,7 +38,7 @@ const Chatting = (props) => {
   const socket = useRef(undefined);
   const reactiveState = useR2state();
   const prevReactiveState = useRef(reactiveState);
-  const { oid: userOid } = useRecoilValue(loginInfoDetailAtom) || {};
+  const { oid: userOid } = useRecoilValue(loginInfoAtom) || {};
   const [headerInfoToken, fetchHeaderInfo] = useDateToken();
   const [, headerInfo] = useQuery.get(`/rooms/info?id=${props.roomId}`, {}, [
     headerInfoToken,
diff --git a/src/pages/Home/InfoSection.tsx b/src/pages/Home/InfoSection.tsx
index 5a1c43cbd..312cd71a9 100644
--- a/src/pages/Home/InfoSection.tsx
+++ b/src/pages/Home/InfoSection.tsx
@@ -6,8 +6,8 @@ import LinkLogin from "components/Link/LinkLogin";
 import RLayout from "components/RLayout";
 import Room from "components/Room";
 
-import loginInfoDetailAtom from "atoms/loginInfoDetail";
-import myRoomAtom from "atoms/myRoom";
+import loginInfoAtom from "atoms/loginInfo";
+import myRoomsAtom from "atoms/myRooms";
 import { useRecoilValue } from "recoil";
 
 import moment, { getToday } from "tools/moment";
@@ -20,9 +20,9 @@ import BackgroundImageMobile from "static/assets/BackgroundImageMobile.webp";
 import { ReactComponent as TaxiLogoWhite } from "static/assets/TaxiLogoWhite.svg";
 
 const InfoSection = () => {
-  const loginInfoDetail = useRecoilValue(loginInfoDetailAtom);
-  const isLogin = !!loginInfoDetail?.id;
-  const myRoom = useRecoilValue(myRoomAtom);
+  const loginInfo = useRecoilValue(loginInfoAtom);
+  const isLogin = !!loginInfo?.id;
+  const myRooms = useRecoilValue(myRoomsAtom);
   const randomTaxiSlogan = useMemo(randomTaxiSloganGenerator, []);
 
   const styleContainer: CSS = {
@@ -53,7 +53,7 @@ const InfoSection = () => {
 
   const { message, room } = useMemo(() => {
     const sortedMyRoom =
-      myRoom?.ongoing.slice().sort((a, b) => (a.time > b.time ? 1 : -1)) ?? [];
+      myRooms?.ongoing.slice().sort((a, b) => (a.time > b.time ? 1 : -1)) ?? [];
     const notDeparted = sortedMyRoom.find((room) => !room.isDeparted);
     const notOver = sortedMyRoom.find(
       (room) => !room.isOver && room.isDeparted
@@ -87,7 +87,7 @@ const InfoSection = () => {
       };
     }
     return { message: "", room: null };
-  }, [JSON.stringify(myRoom)]);
+  }, [JSON.stringify(myRooms)]);
 
   return (
     <div className="info-section" style={styleContainer}>
@@ -106,7 +106,7 @@ const InfoSection = () => {
           <div css={{ height: "32px" }} />
           <div css={styleTitle}>
             {isLogin
-              ? `안녕하세요, ${loginInfoDetail?.nickname}님!`
+              ? `안녕하세요, ${loginInfo?.nickname}님!`
               : "카이스트 구성원 간 택시 동승자 모집 서비스, Taxi 입니다!"}
           </div>
           <div css={styleSubTitle}>{isLogin ? message : randomTaxiSlogan}</div>
diff --git a/src/pages/Login/index.jsx b/src/pages/Login/index.jsx
index fbaf146de..8db69a226 100644
--- a/src/pages/Login/index.jsx
+++ b/src/pages/Login/index.jsx
@@ -3,7 +3,7 @@ import { useHistory, useLocation } from "react-router-dom";
 
 import Button from "components/Button";
 
-import loginInfoDetailAtom from "atoms/loginInfoDetail";
+import loginInfoAtom from "atoms/loginInfo";
 import { useRecoilValue } from "recoil";
 
 import theme from "tools/theme";
@@ -14,7 +14,7 @@ import { ReactComponent as TaxiLogo } from "static/assets/TaxiLogo.svg";
 const Login = () => {
   const history = useHistory();
   const { search } = useLocation();
-  const { id: userId } = useRecoilValue(loginInfoDetailAtom);
+  const { id: userId } = useRecoilValue(loginInfoAtom);
 
   useEffect(() => {
     const searchParams = new URLSearchParams(search);
diff --git a/src/pages/Mypage/index.tsx b/src/pages/Mypage/index.tsx
index c06c18c93..88e7a8552 100644
--- a/src/pages/Mypage/index.tsx
+++ b/src/pages/Mypage/index.tsx
@@ -19,7 +19,7 @@ import WhiteContainer from "components/WhiteContainer";
 
 import Menu from "./Menu";
 
-import loginInfoDetailAtom from "atoms/loginInfoDetail";
+import loginInfoAtom from "atoms/loginInfo";
 import notificationOptionsAtom from "atoms/notificationOptions";
 import { useRecoilValue } from "recoil";
 
@@ -30,14 +30,14 @@ import { nodeEnv } from "loadenv";
 const Mypage = () => {
   const { t, i18n } = useTranslation("mypage");
   const [profImgToken, refreshProfImgToken] = useDateToken();
-  const loginInfoDetail = useRecoilValue(loginInfoDetailAtom);
+  const loginInfo = useRecoilValue(loginInfoAtom);
   const notificationOptions = useRecoilValue(notificationOptionsAtom);
   const isOnNotification =
     // notificationOptions?.advertisement ||
     // notificationOptions?.beforeDepart ||
     notificationOptions?.chatting || notificationOptions?.notice;
   // notificationOptions?.keywords?.length;
-  const { id: userId } = loginInfoDetail || {};
+  const { id: userId } = loginInfo || {};
 
   const [isOpenProfileModify, setIsOpenProfileModify] = useState(false);
   const [isOpenNotification, setIsOpenNotification] = useState(false);
@@ -113,15 +113,15 @@ const Mypage = () => {
           <WhiteContainer marginAuto padding="16px 24px 24px">
             <div css={{ display: "flex", alignItems: "center" }}>
               <div css={styleProfImg}>
-                {loginInfoDetail?.profileImgUrl && (
+                {loginInfo?.profileImgUrl && (
                   <ProfileImg
-                    path={loginInfoDetail.profileImgUrl}
+                    path={loginInfo.profileImgUrl}
                     token={profImgToken}
                   />
                 )}
               </div>
               <div css={theme.font16_bold} className="selectable">
-                {loginInfoDetail?.name}
+                {loginInfo?.name}
               </div>
             </div>
             <div css={infoTitle}>
@@ -132,19 +132,19 @@ const Mypage = () => {
             </div>
             <div css={infoType} className="selectable">
               {t("student_id")}
-              <div css={infoContent}>{loginInfoDetail?.subinfo?.kaist}</div>
+              <div css={infoContent}>{loginInfo?.subinfo?.kaist}</div>
             </div>
             <div css={infoType} className="selectable">
               {t("email")}
-              <div css={infoContent}>{loginInfoDetail?.email}</div>
+              <div css={infoContent}>{loginInfo?.email}</div>
             </div>
             <div css={infoType} className="selectable">
               {t("nickname")}
-              <div css={infoContent}>{loginInfoDetail?.nickname}</div>
+              <div css={infoContent}>{loginInfo?.nickname}</div>
             </div>
             <div css={infoType} className="selectable">
               {t("account")}
-              <div css={infoContent}>{loginInfoDetail?.account}</div>
+              <div css={infoContent}>{loginInfo?.account}</div>
             </div>
           </WhiteContainer>
           <WhiteContainer marginAuto>
diff --git a/src/pages/Myroom/index.jsx b/src/pages/Myroom/index.jsx
index 0d1ca1ca7..31c4f00ea 100644
--- a/src/pages/Myroom/index.jsx
+++ b/src/pages/Myroom/index.jsx
@@ -12,8 +12,8 @@ import WhiteContainer from "components/WhiteContainer";
 import R1Myroom from "./R1Myroom";
 import R2Myroom from "./R2Myroom";
 
-import loginInfoDetailAtom from "atoms/loginInfoDetail";
-import myRoomAtom from "atoms/myRoom";
+import loginInfoAtom from "atoms/loginInfo";
+import myRoomsAtom from "atoms/myRooms";
 import { useRecoilValue } from "recoil";
 
 export const MAX_PARTICIPATION = 5;
@@ -22,10 +22,10 @@ const Myroom = () => {
   const history = useHistory();
   const { roomId } = useParams();
   const reactiveState = useR2state();
-  const myRoom = useRecoilValue(myRoomAtom);
-  const totalPages = Math.ceil((myRoom?.done?.length ?? 0) / PAGE_MAX_ITEMS);
+  const myRooms = useRecoilValue(myRoomsAtom);
+  const totalPages = Math.ceil((myRooms?.done?.length ?? 0) / PAGE_MAX_ITEMS);
   const currentPage = usePageFromSearchParams(totalPages);
-  const isLogin = !!useRecoilValue(loginInfoDetailAtom)?.id;
+  const isLogin = !!useRecoilValue(loginInfoAtom)?.id;
 
   useEffect(() => {
     if (reactiveState == 3 && roomId) {
@@ -45,15 +45,15 @@ const Myroom = () => {
   ) : reactiveState === 3 ? (
     <R1Myroom
       roomId={roomId}
-      ongoing={myRoom?.ongoing}
-      done={myRoom?.done}
+      ongoing={myRooms?.ongoing}
+      done={myRooms?.done}
       donePageInfo={{ totalPages, currentPage }}
     />
   ) : (
     <R2Myroom
       roomId={roomId}
-      ongoing={myRoom?.ongoing}
-      done={myRoom?.done}
+      ongoing={myRooms?.ongoing}
+      done={myRooms?.done}
       donePageInfo={{ totalPages, currentPage }}
     />
   );
diff --git a/src/pages/Search/RoomSelectionModal.jsx b/src/pages/Search/RoomSelectionModal.jsx
index bdff14e4a..86b255242 100644
--- a/src/pages/Search/RoomSelectionModal.jsx
+++ b/src/pages/Search/RoomSelectionModal.jsx
@@ -13,8 +13,8 @@ import Modal from "components/Modal";
 import { MAX_PARTICIPATION } from "pages/Myroom";
 
 import alertAtom from "atoms/alert";
-import loginInfoDetailAtom from "atoms/loginInfoDetail";
-import myRoomAtom from "atoms/myRoom";
+import loginInfoAtom from "atoms/loginInfo";
+import myRoomsAtom from "atoms/myRooms";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 
 import { date2str } from "tools/moment";
@@ -114,16 +114,16 @@ const RoomSelectionModal = (props) => {
   const onCall = useRef(false);
   const [roomInfo, setRoomInfo] = useState(null);
   const history = useHistory();
-  const [myRoom, setMyRoom] = useRecoilState(myRoomAtom);
-  const loginInfoDetail = useRecoilValue(loginInfoDetailAtom);
+  const [myRooms, setMyRooms] = useRecoilState(myRoomsAtom);
+  const loginInfo = useRecoilValue(loginInfoAtom);
   const setAlert = useSetRecoilState(alertAtom);
   const disableJoinBtn =
-    roomInfo?.part.some((user) => user._id === loginInfoDetail?.oid) ?? true;
+    roomInfo?.part.some((user) => user._id === loginInfo?.oid) ?? true;
   const isRoomFull = roomInfo
     ? roomInfo.maxPartLength - roomInfo.part.length === 0
     : false;
-  const fullParticipation = myRoom?.ongoing.length >= MAX_PARTICIPATION;
-  const isLogin = !!useRecoilValue(loginInfoDetailAtom)?.id;
+  const fullParticipation = myRooms?.ongoing.length >= MAX_PARTICIPATION;
+  const isLogin = !!loginInfo?.id;
 
   useEffect(() => {
     if (props.isOpen) setRoomInfo(props.roomInfo);
@@ -165,7 +165,7 @@ const RoomSelectionModal = (props) => {
           roomId: roomInfo._id,
         },
         onSuccess: async () => {
-          setMyRoom(
+          setMyRooms(
             await axios({
               url: "/rooms/searchByUser",
               method: "get",

From 7e6856b360a4a07a50fb1c301a47f31cf8abdf10 Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Sat, 15 Apr 2023 20:13:31 +0900
Subject: [PATCH 40/43] Add: useFetchRecoilState

---
 src/atoms/notificationOptions.ts              |   6 +-
 .../{taxiLocations.js => taxiLocations.ts}    |   4 +-
 src/components/ModalPopup/ModalModify.jsx     |  28 ++---
 .../ModalPopup/ModalNotification.tsx          |  31 ++----
 src/components/ModalPopup/ModalTerms.jsx      |  10 +-
 src/components/ModalRoomOptions/Place.jsx     |  15 ++-
 .../Skeleton/FirebaseMessagingProvider.tsx    |  13 +--
 .../FlutterEventCommunicationProvider.tsx     |   2 +-
 src/components/Skeleton/index.tsx             |  72 +++----------
 src/hooks/useFetchRecoilState/index.tsx       | 100 ++++++++++++++++++
 .../useFetchRecoilState/useFetchLoginInfo.tsx |  26 +++++
 .../useFetchRecoilState/useFetchMyRooms.tsx   |  28 +++++
 .../useFetchNotificationOptions.tsx           |  32 ++++++
 .../useFetchTaxiLocations.tsx                 |  23 ++++
 src/hooks/useTaxiAPI/useAxios.tsx             |   2 +-
 src/pages/Chatting/Header/HeaderBody.jsx      |   7 +-
 src/pages/Mypage/index.tsx                    |  12 +--
 17 files changed, 280 insertions(+), 131 deletions(-)
 rename src/atoms/{taxiLocations.js => taxiLocations.ts} (54%)
 create mode 100644 src/hooks/useFetchRecoilState/index.tsx
 create mode 100644 src/hooks/useFetchRecoilState/useFetchLoginInfo.tsx
 create mode 100644 src/hooks/useFetchRecoilState/useFetchMyRooms.tsx
 create mode 100644 src/hooks/useFetchRecoilState/useFetchNotificationOptions.tsx
 create mode 100644 src/hooks/useFetchRecoilState/useFetchTaxiLocations.tsx

diff --git a/src/atoms/notificationOptions.ts b/src/atoms/notificationOptions.ts
index 89b5bece9..246216f76 100644
--- a/src/atoms/notificationOptions.ts
+++ b/src/atoms/notificationOptions.ts
@@ -1,14 +1,14 @@
 import { atom } from "recoil";
 
-export type notificationOptionsType = {
+export type notificationOptionsType = Nullable<{
   advertisement: boolean;
   beforeDepart: boolean;
   chatting: boolean;
   notice: boolean;
   keywords: [string];
-};
+}>;
 
-const notificationOptionsAtom = atom<Nullable<notificationOptionsType>>({
+const notificationOptionsAtom = atom<notificationOptionsType>({
   key: "notificationOptionsAtom",
   default: null,
 });
diff --git a/src/atoms/taxiLocations.js b/src/atoms/taxiLocations.ts
similarity index 54%
rename from src/atoms/taxiLocations.js
rename to src/atoms/taxiLocations.ts
index 9fef91c64..00cbf754b 100644
--- a/src/atoms/taxiLocations.js
+++ b/src/atoms/taxiLocations.ts
@@ -1,6 +1,8 @@
 import { atom } from "recoil";
 
-const taxiLocationsAtom = atom({
+export type TaxiLocationsType = Array<any>;
+
+const taxiLocationsAtom = atom<TaxiLocationsType>({
   key: "taxiLocationsAtom",
   default: [],
 });
diff --git a/src/components/ModalPopup/ModalModify.jsx b/src/components/ModalPopup/ModalModify.jsx
index 392b63298..ee1583f73 100644
--- a/src/components/ModalPopup/ModalModify.jsx
+++ b/src/components/ModalPopup/ModalModify.jsx
@@ -3,6 +3,10 @@ import PropTypes from "prop-types";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import {
+  useFetchRecoilState,
+  useValueRecoilState,
+} from "hooks/useFetchRecoilState";
 import { useAxios } from "hooks/useTaxiAPI";
 
 import AccountSelector from "components/AccountSelector";
@@ -46,7 +50,8 @@ const BtnProfImg = (props) => {
 
   const inputImage = useRef(null);
   const [profileAlert, setProfileAlert] = useState(null);
-  const [loginInfo, setLoginInfo] = useRecoilState(loginInfoAtom);
+  const loginInfo = useValueRecoilState("loginInfo");
+  const fetchLoginInfo = useFetchRecoilState("loginInfo");
 
   useEffect(() => {
     if (profileAlert === "LOADING") return;
@@ -79,10 +84,7 @@ const BtnProfImg = (props) => {
             method: "get",
           });
           if (data2?.result) {
-            setLoginInfo({
-              ...loginInfo,
-              profileImgUrl: data2.profileImageUrl,
-            });
+            fetchLoginInfo();
             props.onUpdate();
             setProfileAlert("SUCCESS");
             return;
@@ -146,12 +148,15 @@ const ModalModify = (props) => {
   const [nickname, setNickname] = useState("");
   const [account, setAccount] = useState("");
 
-  const [loginInfo, setLoginInfo] = useRecoilState(loginInfoAtom);
+  const loginInfo = useValueRecoilState("loginInfo");
+  const fetchLoginInfo = useFetchRecoilState("loginInfo");
   const setAlert = useSetRecoilState(alertAtom);
 
   useEffect(() => {
-    setNickname(loginInfo?.nickname || "");
-    setAccount(loginInfo?.account || "");
+    if (props.isOpen) {
+      setNickname(loginInfo?.nickname || "");
+      setAccount(loginInfo?.account || "");
+    }
   }, [loginInfo, props.isOpen]);
 
   const isEditable =
@@ -179,12 +184,7 @@ const ModalModify = (props) => {
       });
     }
     if (isNeedToUpdateLoginInfo) {
-      setLoginInfo(
-        await axios({
-          url: "/logininfo",
-          method: "get",
-        })
-      );
+      fetchLoginInfo();
     }
     props.onChangeIsOpen(false);
   };
diff --git a/src/components/ModalPopup/ModalNotification.tsx b/src/components/ModalPopup/ModalNotification.tsx
index dd85378bb..f79e06db6 100644
--- a/src/components/ModalPopup/ModalNotification.tsx
+++ b/src/components/ModalPopup/ModalNotification.tsx
@@ -1,6 +1,10 @@
 import { useCallback, useRef } from "react";
 import { useTranslation } from "react-i18next";
 
+import {
+  useFetchRecoilState,
+  useValueRecoilState,
+} from "hooks/useFetchRecoilState";
 import { useAxios } from "hooks/useTaxiAPI";
 
 import DottedLine from "components/DottedLine";
@@ -9,10 +13,6 @@ import Toggle from "components/Toggle";
 
 import NotificationGuide from "./NotificationGuide";
 
-import loginInfoAtom from "atoms/loginInfo";
-import notificationOptionsAtom from "atoms/notificationOptions";
-import { useRecoilState, useRecoilValue } from "recoil";
-
 import theme from "tools/theme";
 
 import AlarmOffRoundedIcon from "@mui/icons-material/AlarmOffRounded";
@@ -52,10 +52,11 @@ const ModalNotification = ({
 }: ModalNotificationProps) => {
   const { t } = useTranslation("mypage");
   const axios = useAxios();
-  const { deviceToken } = useRecoilValue(loginInfoAtom) || {};
-  const [notificationOptions, setNotificationOptions] = useRecoilState(
-    notificationOptionsAtom
-  );
+
+  const { deviceToken } = useValueRecoilState("loginInfo") || {};
+  const notificationOptions = useValueRecoilState("notificationOptions");
+  const fetchNotificationOptions = useFetchRecoilState("notificationOptions");
+
   const isOnNotification =
     // notificationOptions?.advertisement ||
     // notificationOptions?.beforeDepart ||
@@ -94,12 +95,7 @@ const ModalNotification = ({
           },
         },
       });
-      setNotificationOptions(
-        await axios({
-          url: "/notifications/options",
-          method: "get",
-        })
-      );
+      fetchNotificationOptions();
       isAxiosCalled.current = false;
     },
     [deviceToken]
@@ -119,12 +115,7 @@ const ModalNotification = ({
           },
         },
       });
-      setNotificationOptions(
-        await axios({
-          url: "/notifications/options",
-          method: "get",
-        })
-      );
+      fetchNotificationOptions();
       isAxiosCalled.current = false;
     },
     [deviceToken]
diff --git a/src/components/ModalPopup/ModalTerms.jsx b/src/components/ModalPopup/ModalTerms.jsx
index a54814909..bddfe3710 100644
--- a/src/components/ModalPopup/ModalTerms.jsx
+++ b/src/components/ModalPopup/ModalTerms.jsx
@@ -1,6 +1,7 @@
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 
+import { useFetchRecoilState } from "hooks/useFetchRecoilState";
 import { useAxios } from "hooks/useTaxiAPI";
 
 import Button from "components/Button";
@@ -19,7 +20,7 @@ import { ReactComponent as TaxiLogo } from "static/assets/TaxiLogo.svg";
 const Agree = (props) => {
   const axios = useAxios();
   const setAlert = useSetRecoilState(alertAtom);
-  const setLoginInfo = useSetRecoilState(loginInfoAtom);
+  const fetchLoginInfo = useFetchRecoilState("loginInfo");
 
   const onAgree = async () => {
     await axios({
@@ -27,12 +28,7 @@ const Agree = (props) => {
       method: "post",
       onError: () => setAlert("약관 동의에 실패하였습니다."),
     });
-    setLoginInfo(
-      await axios({
-        url: "/logininfo",
-        method: "get",
-      })
-    );
+    fetchLoginInfo();
     props.onAgree();
   };
   const styleBottom = {
diff --git a/src/components/ModalRoomOptions/Place.jsx b/src/components/ModalRoomOptions/Place.jsx
index bf4a4673e..9dad2cb4f 100644
--- a/src/components/ModalRoomOptions/Place.jsx
+++ b/src/components/ModalRoomOptions/Place.jsx
@@ -1,6 +1,8 @@
 import PropTypes from "prop-types";
 import { memo, useMemo, useState } from "react";
 
+import { useValueRecoilState } from "hooks/useFetchRecoilState";
+
 import Button from "components/Button";
 import DottedLine from "components/DottedLine";
 import MiniCircle from "components/MiniCircle";
@@ -9,9 +11,6 @@ import WhiteContainer from "components/WhiteContainer";
 
 import Picker from "./Picker";
 
-import taxiLocationsAtom from "atoms/taxiLocations";
-import { useRecoilValue } from "recoil";
-
 import hoverEventSet from "tools/hoverEventSet";
 import theme from "tools/theme";
 import { getLocationName } from "tools/trans";
@@ -150,8 +149,8 @@ PlaceElement.propTypes = {
 const Place = (props) => {
   const [isPopup1, setPopup1] = useState(false);
   const [isPopup2, setPopup2] = useState(false);
-  const taxiLocations = useRecoilValue(taxiLocationsAtom);
-  const taxiLocationWithName = useMemo(
+  const taxiLocations = useValueRecoilState("taxiLocations");
+  const taxiLocationsWithName = useMemo(
     () =>
       taxiLocations.reduce((acc, place) => {
         acc.push({
@@ -164,7 +163,7 @@ const Place = (props) => {
   );
 
   const getPlaceName = (placeId) => {
-    const place = taxiLocationWithName.find(
+    const place = taxiLocationsWithName.find(
       (location) => location._id === placeId
     );
     return place && getLocationName(place, "ko");
@@ -190,14 +189,14 @@ const Place = (props) => {
         onClose={() => setPopup1(false)}
         value={getPlaceName(props.value[0])}
         handler={(x) => props.handler([x, props.value[1]])}
-        placeOptions={taxiLocationWithName}
+        placeOptions={taxiLocationsWithName}
       />
       <PopupInput
         isOpen={isPopup2}
         onClose={() => setPopup2(false)}
         value={getPlaceName(props.value[1])}
         handler={(x) => props.handler([props.value[0], x])}
-        placeOptions={taxiLocationWithName}
+        placeOptions={taxiLocationsWithName}
       />
     </WhiteContainer>
   );
diff --git a/src/components/Skeleton/FirebaseMessagingProvider.tsx b/src/components/Skeleton/FirebaseMessagingProvider.tsx
index f948713b0..98df99ed4 100644
--- a/src/components/Skeleton/FirebaseMessagingProvider.tsx
+++ b/src/components/Skeleton/FirebaseMessagingProvider.tsx
@@ -2,19 +2,20 @@ import { initializeApp } from "firebase/app";
 import { getMessaging, getToken, isSupported } from "firebase/messaging";
 import { useCallback, useEffect } from "react";
 
+import {
+  useFetchRecoilState,
+  useValueRecoilState,
+} from "hooks/useFetchRecoilState";
 import { useAxios } from "hooks/useTaxiAPI";
 
-import loginInfoAtom from "atoms/loginInfo";
-import { useRecoilValue, useSetRecoilState } from "recoil";
-
 import { firebaseConfig } from "loadenv";
 
 const firebaseApp = firebaseConfig && initializeApp(firebaseConfig);
 
 const FirebaseMessagingProvider = () => {
   const axios = useAxios();
-  const { id: userId, deviceToken } = useRecoilValue(loginInfoAtom) || {};
-  const setLoginInfo = useSetRecoilState(loginInfoAtom);
+  const { id: userId, deviceToken } = useValueRecoilState("loginInfo") || {};
+  const fetchLoginInfo = useFetchRecoilState("loginInfo");
 
   const registerToken = useCallback(async (trial: number) => {
     // 토큰 등록 실패 시 10초 간격으로 최대 3회 시도
@@ -50,7 +51,7 @@ const FirebaseMessagingProvider = () => {
           axios({
             url: "/logininfo",
             method: "get",
-            onSuccess: (data) => setLoginInfo(data),
+            onSuccess: fetchLoginInfo,
           }),
         onError: () => {},
       });
diff --git a/src/components/Skeleton/FlutterEventCommunicationProvider.tsx b/src/components/Skeleton/FlutterEventCommunicationProvider.tsx
index 76aa7ab07..e0def9771 100644
--- a/src/components/Skeleton/FlutterEventCommunicationProvider.tsx
+++ b/src/components/Skeleton/FlutterEventCommunicationProvider.tsx
@@ -10,7 +10,7 @@ let isWebViewInFlutter: boolean = false;
 
 const FlutterEventCommunicationProvider = () => {
   const axios = useAxios();
-  const setLoginInfoDetail = useSetRecoilState(loginInfoAtom);
+  const setLoginInfoDetail = useSetRecoilState(loginInfoAtom); // fixme
 
   useEffect(() => {
     const eventListeners: Array<{
diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx
index 1833134fc..bf6f4391a 100644
--- a/src/components/Skeleton/index.tsx
+++ b/src/components/Skeleton/index.tsx
@@ -1,7 +1,10 @@
-import { ReactNode, useEffect, useState } from "react";
+import { ReactNode } from "react";
 import { useLocation } from "react-router-dom";
 
-import { useAxios } from "hooks/useTaxiAPI";
+import {
+  useSyncRecoilStateEffect,
+  useValueRecoilState,
+} from "hooks/useFetchRecoilState";
 
 import HeaderBar from "components/HeaderBar";
 import Loading from "components/Loading";
@@ -12,11 +15,7 @@ import Footer from "./Footer";
 import Navigation from "./Navigation";
 
 import errorAtom from "atoms/error";
-import loginInfoAtom from "atoms/loginInfo";
-import myRoomsAtom from "atoms/myRooms";
-import notificationOptionsAtom from "atoms/notificationOptions";
-import taxiLocationsAtom from "atoms/taxiLocations";
-import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
+import { useRecoilValue } from "recoil";
 
 type ContainerProps = {
   children: ReactNode;
@@ -44,64 +43,17 @@ const Container = ({ children }: ContainerProps) => {
 };
 
 const Skeleton = ({ children }: SkeletonProps) => {
-  const axios = useAxios();
-  const [isLoading, setIsLoading] = useState(true);
-
-  const [loginInfo, setLoginInfo] = useRecoilState(loginInfoAtom);
+  const loginInfo = useValueRecoilState("loginInfo");
   const error = useRecoilValue(errorAtom);
-  const {
-    id: userId,
-    agreeOnTermsOfService: isAgreeOnTermsOfService,
-    deviceToken,
-  } = loginInfo || {};
-
-  const setTaxiLocations = useSetRecoilState(taxiLocationsAtom);
-  const setMyRooms = useSetRecoilState(myRoomsAtom);
-  const setNotificationOptions = useSetRecoilState(notificationOptionsAtom);
+  const { id: userId, agreeOnTermsOfService: isAgreeOnTermsOfService } =
+    loginInfo || {};
+  const isLoading = userId === null;
 
   const location = useLocation();
   const { pathname } = location;
 
-  useEffect(() => {
-    // userId 초기화
-    axios({
-      url: "/logininfo",
-      method: "get",
-      onSuccess: (data) => {
-        setLoginInfo(data);
-        setIsLoading(false);
-      },
-    });
-
-    // locations 초기화
-    axios({
-      url: "/locations",
-      method: "get",
-      onSuccess: ({ locations }) => setTaxiLocations(locations),
-    });
-  }, []);
-
-  useEffect(() => {
-    if (userId) {
-      // roomlist 초기화
-      axios({
-        url: "/rooms/searchByUser",
-        method: "get",
-        onSuccess: (data) => setMyRooms(data),
-      });
-    }
-  }, [userId]);
-
-  useEffect(() => {
-    if (deviceToken) {
-      // notificationOptions 초기화
-      axios({
-        url: "/notifications/options",
-        method: "get",
-        onSuccess: (data) => setNotificationOptions(data),
-      });
-    }
-  }, [deviceToken]);
+  // loginIngo, taxiLocations, myRooms, notificationOptions 초기화 및 동기화
+  useSyncRecoilStateEffect();
 
   if (error) {
     return (
diff --git a/src/hooks/useFetchRecoilState/index.tsx b/src/hooks/useFetchRecoilState/index.tsx
new file mode 100644
index 000000000..199b37e5a
--- /dev/null
+++ b/src/hooks/useFetchRecoilState/index.tsx
@@ -0,0 +1,100 @@
+import { useEffect } from "react";
+
+import {
+  useFetchLoginInfo,
+  useSetLoginInfo,
+  useValueLoginInfo,
+} from "./useFetchLoginInfo";
+import {
+  useFetchMyRooms,
+  useSetMyRooms,
+  useValueMyRooms,
+} from "./useFetchMyRooms";
+import {
+  useFetchNotificationOptions,
+  useSetNotificationOptions,
+  useValueNotificationOptions,
+} from "./useFetchNotificationOptions";
+import {
+  useFetchTaxiLocations,
+  useSetTaxiLocations,
+  useValueTaxiLocations,
+} from "./useFetchTaxiLocations";
+
+import { LoginInfoType } from "atoms/loginInfo";
+import { MyRoomsType } from "atoms/myRooms";
+import { notificationOptionsType } from "atoms/notificationOptions";
+import { TaxiLocationsType } from "atoms/taxiLocations";
+
+export type AtomName =
+  | "loginInfo"
+  | "taxiLocations"
+  | "myRooms"
+  | "notificationOptions";
+
+type useValueRecoilStateType = {
+  (atomName: "loginInfo"): LoginInfoType;
+  (atomName: "taxiLocations"): TaxiLocationsType;
+  (atomName: "myRooms"): MyRoomsType;
+  (atomName: "notificationOptions"): notificationOptionsType;
+};
+const _useValueRecoilState = (atomName: AtomName) => {
+  switch (atomName) {
+    case "loginInfo":
+      return useValueLoginInfo();
+    case "taxiLocations":
+      return useValueTaxiLocations();
+    case "myRooms":
+      return useValueMyRooms();
+    case "notificationOptions":
+      return useValueNotificationOptions();
+  }
+};
+export const useValueRecoilState =
+  _useValueRecoilState as useValueRecoilStateType;
+
+export const useSetRecoilState = (atomName: AtomName) => {
+  switch (atomName) {
+    case "loginInfo":
+      return useSetLoginInfo();
+    case "taxiLocations":
+      return useSetTaxiLocations();
+    case "myRooms":
+      return useSetMyRooms();
+    case "notificationOptions":
+      return useSetNotificationOptions();
+  }
+};
+
+export const useFetchRecoilState = (atomName: AtomName) => {
+  switch (atomName) {
+    case "loginInfo":
+      return useFetchLoginInfo();
+    case "taxiLocations":
+      return useFetchTaxiLocations();
+    case "myRooms":
+      return useFetchMyRooms();
+    case "notificationOptions":
+      return useFetchNotificationOptions();
+  }
+};
+
+export const useSyncRecoilStateEffect = () => {
+  const { id: userId, deviceToken } = useValueRecoilState("loginInfo") || {};
+
+  // userId 초기화 및 동기화
+  const fetchLoginInfo = useFetchRecoilState("loginInfo");
+  useEffect(fetchLoginInfo, []);
+
+  // taxiLocations 초기화 및 동기화
+  const fetchTaxiLocations = useFetchRecoilState("taxiLocations");
+  useEffect(fetchTaxiLocations, []);
+
+  // myRooms 초기화 및 동기화
+  const fetchMyRooms = useFetchRecoilState("myRooms");
+  useEffect(fetchMyRooms, [userId]);
+
+  // notificationOptions 초기화 및 동기화
+  const fetchNotificationOptions = useFetchRecoilState("notificationOptions");
+  useEffect(fetchNotificationOptions, [deviceToken]);
+};
diff --git a/src/hooks/useFetchRecoilState/useFetchLoginInfo.tsx b/src/hooks/useFetchRecoilState/useFetchLoginInfo.tsx
new file mode 100644
index 000000000..82e97e725
--- /dev/null
+++ b/src/hooks/useFetchRecoilState/useFetchLoginInfo.tsx
@@ -0,0 +1,26 @@
+import { useCallback } from "react";
+
+import { useAxios } from "hooks/useTaxiAPI";
+import { AxiosOption } from "hooks/useTaxiAPI/useAxios";
+
+import loginInfoAtom from "atoms/loginInfo";
+import { useRecoilValue, useSetRecoilState } from "recoil";
+
+export const useValueLoginInfo = () => useRecoilValue(loginInfoAtom);
+export const useSetLoginInfo = () => useSetRecoilState(loginInfoAtom);
+export const useFetchLoginInfo = () => {
+  const setLoginInfo = useSetLoginInfo();
+  const axios = useAxios();
+
+  return useCallback(
+    (onError?: AxiosOption["onError"]) => {
+      axios({
+        url: "/logininfo",
+        method: "get",
+        onSuccess: (data) => setLoginInfo(data),
+        onError: onError,
+      });
+    },
+    [setLoginInfo, axios]
+  );
+};
diff --git a/src/hooks/useFetchRecoilState/useFetchMyRooms.tsx b/src/hooks/useFetchRecoilState/useFetchMyRooms.tsx
new file mode 100644
index 000000000..02abf6c47
--- /dev/null
+++ b/src/hooks/useFetchRecoilState/useFetchMyRooms.tsx
@@ -0,0 +1,28 @@
+import { useCallback } from "react";
+
+import { useAxios } from "hooks/useTaxiAPI";
+import { AxiosOption } from "hooks/useTaxiAPI/useAxios";
+
+import { useValueRecoilState } from ".";
+
+import myRoomsAtom from "atoms/myRooms";
+import { useRecoilValue, useSetRecoilState } from "recoil";
+
+export const useValueMyRooms = () => useRecoilValue(myRoomsAtom);
+export const useSetMyRooms = () => useSetRecoilState(myRoomsAtom);
+export const useFetchMyRooms = (onError?: AxiosOption["onError"]) => {
+  const setMyrooms = useSetMyRooms();
+  const axios = useAxios();
+  const { id: userId } = useValueRecoilState("loginInfo") || {};
+
+  return useCallback(() => {
+    if (userId) {
+      axios({
+        url: "/rooms/searchByUser",
+        method: "get",
+        onSuccess: (data) => setMyrooms(data),
+        onError: onError,
+      });
+    } else setMyrooms(null);
+  }, [userId, setMyrooms, axios]);
+};
diff --git a/src/hooks/useFetchRecoilState/useFetchNotificationOptions.tsx b/src/hooks/useFetchRecoilState/useFetchNotificationOptions.tsx
new file mode 100644
index 000000000..6f8ef30bb
--- /dev/null
+++ b/src/hooks/useFetchRecoilState/useFetchNotificationOptions.tsx
@@ -0,0 +1,32 @@
+import { useCallback } from "react";
+
+import { useAxios } from "hooks/useTaxiAPI";
+import { AxiosOption } from "hooks/useTaxiAPI/useAxios";
+
+import { useValueRecoilState } from ".";
+
+import notificationOptionsAtom from "atoms/notificationOptions";
+import { useRecoilValue, useSetRecoilState } from "recoil";
+
+export const useValueNotificationOptions = () =>
+  useRecoilValue(notificationOptionsAtom);
+export const useSetNotificationOptions = () =>
+  useSetRecoilState(notificationOptionsAtom);
+export const useFetchNotificationOptions = (
+  onError?: AxiosOption["onError"]
+) => {
+  const setNotificationOptions = useSetNotificationOptions();
+  const axios = useAxios();
+  const { deviceToken } = useValueRecoilState("loginInfo") || {};
+
+  return useCallback(() => {
+    if (deviceToken) {
+      axios({
+        url: "/notifications/options",
+        method: "get",
+        onSuccess: (data) => setNotificationOptions(data),
+        onError: onError,
+      });
+    } else setNotificationOptions(null);
+  }, [deviceToken, setNotificationOptions, axios]);
+};
diff --git a/src/hooks/useFetchRecoilState/useFetchTaxiLocations.tsx b/src/hooks/useFetchRecoilState/useFetchTaxiLocations.tsx
new file mode 100644
index 000000000..e88ee277b
--- /dev/null
+++ b/src/hooks/useFetchRecoilState/useFetchTaxiLocations.tsx
@@ -0,0 +1,23 @@
+import { useCallback } from "react";
+
+import { useAxios } from "hooks/useTaxiAPI";
+import { AxiosOption } from "hooks/useTaxiAPI/useAxios";
+
+import taxiLocationsAtom from "atoms/taxiLocations";
+import { useRecoilValue, useSetRecoilState } from "recoil";
+
+export const useValueTaxiLocations = () => useRecoilValue(taxiLocationsAtom);
+export const useSetTaxiLocations = () => useSetRecoilState(taxiLocationsAtom);
+export const useFetchTaxiLocations = (onError?: AxiosOption["onError"]) => {
+  const setTaxiLocations = useSetTaxiLocations();
+  const axios = useAxios();
+
+  return useCallback(() => {
+    axios({
+      url: "/locations",
+      method: "get",
+      onSuccess: ({ locations }) => setTaxiLocations(locations),
+      onError: onError,
+    });
+  }, [setTaxiLocations, axios]);
+};
diff --git a/src/hooks/useTaxiAPI/useAxios.tsx b/src/hooks/useTaxiAPI/useAxios.tsx
index 6936b28ea..ee8be4810 100644
--- a/src/hooks/useTaxiAPI/useAxios.tsx
+++ b/src/hooks/useTaxiAPI/useAxios.tsx
@@ -7,7 +7,7 @@ import axios from "./axios";
 import errorAtom from "atoms/error";
 import { useSetRecoilState } from "recoil";
 
-type AxiosOption = {
+export type AxiosOption = {
   url: string;
   method: "get" | "post";
   data?: any;
diff --git a/src/pages/Chatting/Header/HeaderBody.jsx b/src/pages/Chatting/Header/HeaderBody.jsx
index 1cbb09714..674fb0a63 100644
--- a/src/pages/Chatting/Header/HeaderBody.jsx
+++ b/src/pages/Chatting/Header/HeaderBody.jsx
@@ -183,11 +183,12 @@ Button.propTypes = {
 };
 
 const HeaderBody = (props) => {
-  const userInfo = useRecoilValue(loginInfoAtom);
+  const loginInfo = useRecoilValue(loginInfoAtom);
   const users = props.info?.part ?? [];
   const isSettlementForMe = useMemo(
-    () => users.filter((user) => user._id === userInfo?.oid)?.[0]?.isSettlement,
-    [userInfo?.oid, JSON.stringify(users)]
+    () =>
+      users.filter((user) => user._id === loginInfo?.oid)?.[0]?.isSettlement,
+    [loginInfo?.oid, JSON.stringify(users)]
   );
 
   return (
diff --git a/src/pages/Mypage/index.tsx b/src/pages/Mypage/index.tsx
index 88e7a8552..9cac46974 100644
--- a/src/pages/Mypage/index.tsx
+++ b/src/pages/Mypage/index.tsx
@@ -2,6 +2,7 @@ import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import useDateToken from "hooks/useDateToken";
+import { useValueRecoilState } from "hooks/useFetchRecoilState";
 
 import LinkLogout from "components/Link/LinkLogout";
 import {
@@ -19,10 +20,6 @@ import WhiteContainer from "components/WhiteContainer";
 
 import Menu from "./Menu";
 
-import loginInfoAtom from "atoms/loginInfo";
-import notificationOptionsAtom from "atoms/notificationOptions";
-import { useRecoilValue } from "recoil";
-
 import theme from "tools/theme";
 
 import { nodeEnv } from "loadenv";
@@ -30,14 +27,15 @@ import { nodeEnv } from "loadenv";
 const Mypage = () => {
   const { t, i18n } = useTranslation("mypage");
   const [profImgToken, refreshProfImgToken] = useDateToken();
-  const loginInfo = useRecoilValue(loginInfoAtom);
-  const notificationOptions = useRecoilValue(notificationOptionsAtom);
+  const loginInfo = useValueRecoilState("loginInfo");
+  const notificationOptions = useValueRecoilState("notificationOptions");
+
+  const { id: userId } = loginInfo || {};
   const isOnNotification =
     // notificationOptions?.advertisement ||
     // notificationOptions?.beforeDepart ||
     notificationOptions?.chatting || notificationOptions?.notice;
   // notificationOptions?.keywords?.length;
-  const { id: userId } = loginInfo || {};
 
   const [isOpenProfileModify, setIsOpenProfileModify] = useState(false);
   const [isOpenNotification, setIsOpenNotification] = useState(false);

From da1e2bf88967319516ed354cf97ade7ba575a85c Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Sat, 15 Apr 2023 21:38:52 +0900
Subject: [PATCH 41/43] Fix: useFetchRecoilState

---
 src/atoms/myRooms.ts                          |  9 ++++--
 src/components/ModalPopup/ModalModify.jsx     |  4 +--
 .../Skeleton/FirebaseMessagingProvider.tsx    |  7 +----
 .../useFetchRecoilState/useFetchMyRooms.tsx   | 30 ++++++++++++-------
 .../useFetchNotificationOptions.tsx           | 27 +++++++++--------
 .../useFetchTaxiLocations.tsx                 | 21 +++++++------
 src/pages/Addroom/index.tsx                   | 28 ++++++++---------
 .../Chatting/Header/Popup/PopupCancel.jsx     | 14 ++++-----
 src/pages/Chatting/Header/Popup/PopupPay.jsx  | 14 ++++-----
 src/pages/Chatting/Header/Popup/PopupSend.jsx | 12 +++-----
 .../MessageForm/Popup/PopupAccount.tsx        |  2 +-
 src/tools/regExpTest.js                       |  2 +-
 12 files changed, 82 insertions(+), 88 deletions(-)

diff --git a/src/atoms/myRooms.ts b/src/atoms/myRooms.ts
index 24d024e84..36bde6176 100644
--- a/src/atoms/myRooms.ts
+++ b/src/atoms/myRooms.ts
@@ -1,13 +1,16 @@
 import { atom } from "recoil";
 
-export type MyRoomsType = Nullable<{
+export type MyRoomsType = {
   ongoing: Array<any>; // FIXME: 방의 타입 정의
   done: Array<any>;
-}>;
+};
 
 const myRoomsAtom = atom<MyRoomsType>({
   key: "myRoomsAtom",
-  default: null,
+  default: {
+    ongoing: [],
+    done: [],
+  },
 });
 
 export default myRoomsAtom;
diff --git a/src/components/ModalPopup/ModalModify.jsx b/src/components/ModalPopup/ModalModify.jsx
index ee1583f73..432115fa5 100644
--- a/src/components/ModalPopup/ModalModify.jsx
+++ b/src/components/ModalPopup/ModalModify.jsx
@@ -16,8 +16,7 @@ import Modal from "components/Modal";
 import ProfileImg from "components/ProfileImg";
 
 import alertAtom from "atoms/alert";
-import loginInfoAtom from "atoms/loginInfo";
-import { useRecoilState, useSetRecoilState } from "recoil";
+import { useSetRecoilState } from "recoil";
 
 import convertImg from "tools/convertImg";
 import regExpTest from "tools/regExpTest";
@@ -50,7 +49,6 @@ const BtnProfImg = (props) => {
 
   const inputImage = useRef(null);
   const [profileAlert, setProfileAlert] = useState(null);
-  const loginInfo = useValueRecoilState("loginInfo");
   const fetchLoginInfo = useFetchRecoilState("loginInfo");
 
   useEffect(() => {
diff --git a/src/components/Skeleton/FirebaseMessagingProvider.tsx b/src/components/Skeleton/FirebaseMessagingProvider.tsx
index 98df99ed4..3cf379afc 100644
--- a/src/components/Skeleton/FirebaseMessagingProvider.tsx
+++ b/src/components/Skeleton/FirebaseMessagingProvider.tsx
@@ -47,12 +47,7 @@ const FirebaseMessagingProvider = () => {
         url: "/notifications/registerDeviceToken",
         method: "post",
         data: { deviceToken: newDeviceToken },
-        onSuccess: () =>
-          axios({
-            url: "/logininfo",
-            method: "get",
-            onSuccess: fetchLoginInfo,
-          }),
+        onSuccess: fetchLoginInfo,
         onError: () => {},
       });
     } catch (error) {
diff --git a/src/hooks/useFetchRecoilState/useFetchMyRooms.tsx b/src/hooks/useFetchRecoilState/useFetchMyRooms.tsx
index 02abf6c47..b7fe3df18 100644
--- a/src/hooks/useFetchRecoilState/useFetchMyRooms.tsx
+++ b/src/hooks/useFetchRecoilState/useFetchMyRooms.tsx
@@ -10,19 +10,27 @@ import { useRecoilValue, useSetRecoilState } from "recoil";
 
 export const useValueMyRooms = () => useRecoilValue(myRoomsAtom);
 export const useSetMyRooms = () => useSetRecoilState(myRoomsAtom);
-export const useFetchMyRooms = (onError?: AxiosOption["onError"]) => {
+export const useFetchMyRooms = () => {
   const setMyrooms = useSetMyRooms();
   const axios = useAxios();
   const { id: userId } = useValueRecoilState("loginInfo") || {};
 
-  return useCallback(() => {
-    if (userId) {
-      axios({
-        url: "/rooms/searchByUser",
-        method: "get",
-        onSuccess: (data) => setMyrooms(data),
-        onError: onError,
-      });
-    } else setMyrooms(null);
-  }, [userId, setMyrooms, axios]);
+  return useCallback(
+    (onError?: AxiosOption["onError"]) => {
+      if (userId) {
+        axios({
+          url: "/rooms/searchByUser",
+          method: "get",
+          onSuccess: (data) => setMyrooms(data),
+          onError: onError,
+        });
+      } else {
+        setMyrooms({
+          ongoing: [],
+          done: [],
+        });
+      }
+    },
+    [userId, setMyrooms, axios]
+  );
 };
diff --git a/src/hooks/useFetchRecoilState/useFetchNotificationOptions.tsx b/src/hooks/useFetchRecoilState/useFetchNotificationOptions.tsx
index 6f8ef30bb..fa0d79770 100644
--- a/src/hooks/useFetchRecoilState/useFetchNotificationOptions.tsx
+++ b/src/hooks/useFetchRecoilState/useFetchNotificationOptions.tsx
@@ -12,21 +12,22 @@ export const useValueNotificationOptions = () =>
   useRecoilValue(notificationOptionsAtom);
 export const useSetNotificationOptions = () =>
   useSetRecoilState(notificationOptionsAtom);
-export const useFetchNotificationOptions = (
-  onError?: AxiosOption["onError"]
-) => {
+export const useFetchNotificationOptions = () => {
   const setNotificationOptions = useSetNotificationOptions();
   const axios = useAxios();
   const { deviceToken } = useValueRecoilState("loginInfo") || {};
 
-  return useCallback(() => {
-    if (deviceToken) {
-      axios({
-        url: "/notifications/options",
-        method: "get",
-        onSuccess: (data) => setNotificationOptions(data),
-        onError: onError,
-      });
-    } else setNotificationOptions(null);
-  }, [deviceToken, setNotificationOptions, axios]);
+  return useCallback(
+    (onError?: AxiosOption["onError"]) => {
+      if (deviceToken) {
+        axios({
+          url: "/notifications/options",
+          method: "get",
+          onSuccess: (data) => setNotificationOptions(data),
+          onError: onError,
+        });
+      } else setNotificationOptions(null);
+    },
+    [deviceToken, setNotificationOptions, axios]
+  );
 };
diff --git a/src/hooks/useFetchRecoilState/useFetchTaxiLocations.tsx b/src/hooks/useFetchRecoilState/useFetchTaxiLocations.tsx
index e88ee277b..baacf0714 100644
--- a/src/hooks/useFetchRecoilState/useFetchTaxiLocations.tsx
+++ b/src/hooks/useFetchRecoilState/useFetchTaxiLocations.tsx
@@ -8,16 +8,19 @@ import { useRecoilValue, useSetRecoilState } from "recoil";
 
 export const useValueTaxiLocations = () => useRecoilValue(taxiLocationsAtom);
 export const useSetTaxiLocations = () => useSetRecoilState(taxiLocationsAtom);
-export const useFetchTaxiLocations = (onError?: AxiosOption["onError"]) => {
+export const useFetchTaxiLocations = () => {
   const setTaxiLocations = useSetTaxiLocations();
   const axios = useAxios();
 
-  return useCallback(() => {
-    axios({
-      url: "/locations",
-      method: "get",
-      onSuccess: ({ locations }) => setTaxiLocations(locations),
-      onError: onError,
-    });
-  }, [setTaxiLocations, axios]);
+  return useCallback(
+    (onError?: AxiosOption["onError"]) => {
+      axios({
+        url: "/locations",
+        method: "get",
+        onSuccess: ({ locations }) => setTaxiLocations(locations),
+        onError: onError,
+      });
+    },
+    [setTaxiLocations, axios]
+  );
 };
diff --git a/src/pages/Addroom/index.tsx b/src/pages/Addroom/index.tsx
index a7520800b..d44d950ce 100644
--- a/src/pages/Addroom/index.tsx
+++ b/src/pages/Addroom/index.tsx
@@ -2,6 +2,10 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { useCookies } from "react-cookie";
 import { useHistory } from "react-router-dom";
 
+import {
+  useFetchRecoilState,
+  useValueRecoilState,
+} from "hooks/useFetchRecoilState";
 import { useAxios } from "hooks/useTaxiAPI";
 
 import Button from "components/Button";
@@ -21,9 +25,7 @@ import { MAX_PARTICIPATION } from "pages/Myroom";
 import FullParticipation from "./FullParticipation";
 
 import alertAtom from "atoms/alert";
-import loginInfoAtom from "atoms/loginInfo";
-import myRoomsAtom from "atoms/myRooms";
-import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
+import { useSetRecoilState } from "recoil";
 
 import { date2str, getToday, getToday10 } from "tools/moment";
 import { randomRoomNameGenerator } from "tools/random";
@@ -52,8 +54,10 @@ const AddRoom = () => {
   const [calculatedTime, setCalculatedTime] = useState<Date | null>(null);
   const randomRoomName = useMemo(randomRoomNameGenerator, []);
   const setAlert = useSetRecoilState(alertAtom);
-  const [myRooms, setMyRooms] = useRecoilState(myRoomsAtom);
-  const isLogin = !!useRecoilValue(loginInfoAtom)?.id;
+
+  const isLogin = !!useValueRecoilState("loginInfo")?.id;
+  const myRooms = useValueRecoilState("myRooms");
+  const fetchMyRooms = useFetchRecoilState("myRooms");
 
   useEffect(() => {
     const expirationDate = new Date();
@@ -107,16 +111,10 @@ const AddRoom = () => {
           time: calculatedTime!.toISOString(),
           maxPartLength: valueMaxPeople,
         },
-        onSuccess: async () =>
-          setMyRooms(
-            await axios({
-              url: "/rooms/searchByUser",
-              method: "get",
-              onSuccess: () => history.push("/myroom"),
-              onError: () =>
-                setAlert("예상치 못한 오류가 발생했습니다. 새로고침 해주세요."),
-            })
-          ),
+        onSuccess: () => {
+          fetchMyRooms();
+          history.push("/myroom");
+        },
         onError: () => setAlert("방 개설에 실패하였습니다."),
       });
       onCall.current = false;
diff --git a/src/pages/Chatting/Header/Popup/PopupCancel.jsx b/src/pages/Chatting/Header/Popup/PopupCancel.jsx
index 79c7501da..4efe883f1 100644
--- a/src/pages/Chatting/Header/Popup/PopupCancel.jsx
+++ b/src/pages/Chatting/Header/Popup/PopupCancel.jsx
@@ -1,12 +1,12 @@
 import PropTypes from "prop-types";
 import { useHistory } from "react-router-dom";
 
+import { useFetchRecoilState } from "hooks/useFetchRecoilState";
 import { useAxios } from "hooks/useTaxiAPI";
 
 import PopupContainer from "./PopupContainer";
 
 import alertAtom from "atoms/alert";
-import myRoomsAtom from "atoms/myRooms";
 import { useSetRecoilState } from "recoil";
 
 const PopupCancel = (props) => {
@@ -38,7 +38,8 @@ const PopupCancel = (props) => {
 
   const history = useHistory();
   const setAlert = useSetRecoilState(alertAtom);
-  const setMyRooms = useSetRecoilState(myRoomsAtom);
+  const fetchMyrooms = useFetchRecoilState("myRooms");
+
   const onClick = () =>
     axios({
       url: "/rooms/abort",
@@ -46,13 +47,8 @@ const PopupCancel = (props) => {
       data: {
         roomId: props.roomId,
       },
-      onSuccess: async () => {
-        setMyRooms(
-          await axios({
-            url: "/rooms/searchByUser",
-            method: "get",
-          })
-        );
+      onSuccess: () => {
+        fetchMyrooms();
         history.replace("/myroom");
       },
       onError: () => setAlert("탑승 취소에 실패하였습니다"),
diff --git a/src/pages/Chatting/Header/Popup/PopupPay.jsx b/src/pages/Chatting/Header/Popup/PopupPay.jsx
index 4e6bed5a1..1c182d571 100644
--- a/src/pages/Chatting/Header/Popup/PopupPay.jsx
+++ b/src/pages/Chatting/Header/Popup/PopupPay.jsx
@@ -1,11 +1,11 @@
 import PropTypes from "prop-types";
 
+import { useFetchRecoilState } from "hooks/useFetchRecoilState";
 import { useAxios } from "hooks/useTaxiAPI";
 
 import PopupContainer from "./PopupContainer";
 
 import alertAtom from "atoms/alert";
-import myRoomsAtom from "atoms/myRooms";
 import { useSetRecoilState } from "recoil";
 
 const PopupPay = (props) => {
@@ -36,7 +36,8 @@ const PopupPay = (props) => {
   };
 
   const setAlert = useSetRecoilState(alertAtom);
-  const setMyRooms = useSetRecoilState(myRoomsAtom);
+  const fetchMyRooms = useFetchRecoilState("myRooms");
+
   const onClick = () => {
     axios({
       url: "/rooms/commitPayment",
@@ -44,13 +45,8 @@ const PopupPay = (props) => {
       data: {
         roomId: props.roomId,
       },
-      onSuccess: async () => {
-        setMyRooms(
-          await axios({
-            url: "/rooms/searchByUser",
-            method: "get",
-          })
-        );
+      onSuccess: () => {
+        fetchMyRooms();
         props.recallEvent();
         props.onClickClose();
       },
diff --git a/src/pages/Chatting/Header/Popup/PopupSend.jsx b/src/pages/Chatting/Header/Popup/PopupSend.jsx
index 366f7fbc6..0140e30cf 100644
--- a/src/pages/Chatting/Header/Popup/PopupSend.jsx
+++ b/src/pages/Chatting/Header/Popup/PopupSend.jsx
@@ -1,11 +1,11 @@
 import PropTypes from "prop-types";
 
+import { useFetchRecoilState } from "hooks/useFetchRecoilState";
 import { useAxios } from "hooks/useTaxiAPI";
 
 import PopupContainer from "./PopupContainer";
 
 import alertAtom from "atoms/alert";
-import myRoomsAtom from "atoms/myRooms";
 import { useSetRecoilState } from "recoil";
 
 const PopupSend = (props) => {
@@ -36,7 +36,8 @@ const PopupSend = (props) => {
   };
 
   const setAlert = useSetRecoilState(alertAtom);
-  const setMyRooms = useSetRecoilState(myRoomsAtom);
+  const fetchMyRooms = useFetchRecoilState("myRooms");
+
   const onClick = () => {
     axios({
       url: "/rooms/commitSettlement",
@@ -45,12 +46,7 @@ const PopupSend = (props) => {
         roomId: props.roomId,
       },
       onSuccess: async () => {
-        setMyRooms(
-          await axios({
-            url: "/rooms/searchByUser",
-            method: "get",
-          })
-        );
+        fetchMyRooms();
         props.recallEvent();
         props.onClickClose();
       },
diff --git a/src/pages/Chatting/MessageForm/Popup/PopupAccount.tsx b/src/pages/Chatting/MessageForm/Popup/PopupAccount.tsx
index d21c13184..ed86a3ab1 100644
--- a/src/pages/Chatting/MessageForm/Popup/PopupAccount.tsx
+++ b/src/pages/Chatting/MessageForm/Popup/PopupAccount.tsx
@@ -44,7 +44,7 @@ const PopupAccount = (props: SendAccoundModalProps) => {
     if (!props.popup) {
       setAccountNumber(loginInfo?.account || "");
     }
-  }, [props.popup]);
+  }, [props.popup, loginInfo?.account]);
 
   return (
     <Modal
diff --git a/src/tools/regExpTest.js b/src/tools/regExpTest.js
index 36ce639c8..c45f9a0a4 100644
--- a/src/tools/regExpTest.js
+++ b/src/tools/regExpTest.js
@@ -20,7 +20,7 @@ const reportMsg = (x) => {
 };
 
 const account = (x) => {
-  return RegExp("^[A-Za-z가-힣]{2,7} [0-9]{10,14}$").test(x);
+  return RegExp("^[A-Za-z가-힣]{2,7} ([0-9]{10,14}|)$").test(x);
 };
 
 export default { chatMsg, nickname, name, fromTo, reportMsg, account };

From e21c3935ea7a4d9ccab9a04590643256167b5d12 Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Sat, 15 Apr 2023 21:41:33 +0900
Subject: [PATCH 42/43] Add: onEnter to AlertProvider

---
 src/components/Skeleton/AlertProvider.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Skeleton/AlertProvider.tsx b/src/components/Skeleton/AlertProvider.tsx
index 756b95d78..14c8cc1f0 100644
--- a/src/components/Skeleton/AlertProvider.tsx
+++ b/src/components/Skeleton/AlertProvider.tsx
@@ -22,6 +22,7 @@ const AlertProvider = () => {
     <ModalElem
       isOpen={!!message}
       onChangeIsOpen={closeHandler}
+      onEnter={closeHandler}
       width={theme.modal_width_alert}
       padding="10px"
       displayCloseBtn={false}

From ab0c09c724657c6a92609b9b075fda84587da4c1 Mon Sep 17 00:00:00 2001
From: 14Kgun <geon6757@kaist.ac.kr>
Date: Sat, 15 Apr 2023 22:07:40 +0900
Subject: [PATCH 43/43] Fix: AccountSelector

---
 src/components/AccountSelector.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/AccountSelector.tsx b/src/components/AccountSelector.tsx
index 07f53e160..2ee792101 100644
--- a/src/components/AccountSelector.tsx
+++ b/src/components/AccountSelector.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import regExpTest from "tools/regExpTest";
 import theme from "tools/theme";
 
 import bankNames from "static/bankNames";
@@ -12,20 +11,22 @@ type AccountSelectorProps = {
 };
 
 const AccountSelector = (props: AccountSelectorProps) => {
+  const initializeAccountState = () => {
+    const account = props.accountNumber.split(" ");
+    return [account?.[0] || bankNames[0], account?.[1] || ""];
+  };
+
   const { t } = useTranslation("mypage");
-  const [bankNumber, setBankNumber] = useState("");
-  const [bankName, setBankName] = useState(bankNames[0]);
+  const [bankName, setBankName] = useState(initializeAccountState()[0]);
+  const [bankNumber, setBankNumber] = useState(initializeAccountState()[1]);
 
   useEffect(() => {
     props.setAccountNumber(bankName + " " + bankNumber);
   }, [bankName, bankNumber]);
 
   useEffect(() => {
-    if (regExpTest.account(props.accountNumber)) {
-      const account = props.accountNumber.split(" ");
-      setBankName(account[0]);
-      setBankNumber(account[1]);
-    }
+    setBankName(initializeAccountState()[0]);
+    setBankNumber(initializeAccountState()[1]);
   }, [props.accountNumber]);
 
   const styleTitle: CSS = {