From 2159401e0c2d68b4ee61468acf8574835db4d9a2 Mon Sep 17 00:00:00 2001
From: seokmin <soekmin1998@naver.com>
Date: Mon, 22 Jan 2024 14:58:29 +0900
Subject: [PATCH 01/57] =?UTF-8?q?Chore:=20useEffect=20=EC=9D=98=EC=A1=B4?=
 =?UTF-8?q?=EC=84=B1=20=EB=B0=B0=EC=97=B4=20eslint=20=EB=AC=B4=EC=8B=9C=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useOnClickOutside.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/hooks/useOnClickOutside.ts b/src/hooks/useOnClickOutside.ts
index 0ccd9f42..ab062f9a 100644
--- a/src/hooks/useOnClickOutside.ts
+++ b/src/hooks/useOnClickOutside.ts
@@ -42,6 +42,7 @@ const useOnClickOutside = ({
       document.removeEventListener("mousedown", listenerTwo);
       document.removeEventListener("touchstart", listenerTwo);
     };
+    // eslint-disable-next-line
   }, [ref, handler, refTwo, handlerTwo]);
 };
 

From 3235f95cc1f3772a23ae37af25ebb33e40f25cb0 Mon Sep 17 00:00:00 2001
From: seokmin <soekmin1998@naver.com>
Date: Mon, 22 Jan 2024 14:58:45 +0900
Subject: [PATCH 02/57] =?UTF-8?q?Fix:=20=EC=95=BC=EB=86=80=EC=9E=90=20?=
 =?UTF-8?q?=EC=97=B0=EB=8F=99=EC=9D=B4=20=EB=90=98=EC=A7=80=20=EC=95=8A?=
 =?UTF-8?q?=EC=9D=80=20=EC=82=AC=EC=9A=A9=EC=9E=90=EB=8A=94=20=EA=B3=84?=
 =?UTF-8?q?=EC=A2=8C=20=EC=84=A4=EC=A0=95=20=ED=83=AD=EC=9D=B4=20=EB=B3=B4?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=95=8A=EB=8F=84=EB=A1=9D=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/myPage/info/Info.tsx          |  1 -
 src/pages/myPage/manage/Manage.style.ts |  4 ++-
 src/pages/myPage/manage/Manage.tsx      | 35 +++++++++++++++++++++++--
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/pages/myPage/info/Info.tsx b/src/pages/myPage/info/Info.tsx
index 6a2b4d8f..288d383e 100644
--- a/src/pages/myPage/info/Info.tsx
+++ b/src/pages/myPage/info/Info.tsx
@@ -4,7 +4,6 @@ const Info = () => {
   const infoList = [
     { name: "문의하기", handler: () => alert("문의하기") },
     { name: "로그아웃", handler: () => alert("로그아웃") },
-    { name: "탈퇴하기", handler: () => alert("탈퇴하기") },
   ];
 
   return (
diff --git a/src/pages/myPage/manage/Manage.style.ts b/src/pages/myPage/manage/Manage.style.ts
index b90330e2..1c77e9a3 100644
--- a/src/pages/myPage/manage/Manage.style.ts
+++ b/src/pages/myPage/manage/Manage.style.ts
@@ -6,8 +6,10 @@ export const ManageListWrapper = styled.section`
   ${ListWrapper}
 `;
 
-export const ManageListElement = styled.div`
+export const ManageListElement = styled.div<{ $visible: boolean }>`
   ${ListElement}
+
+  display: ${({ $visible }) => ($visible ? "" : "none")};
 `;
 
 export const ManageLink = styled(Link)`
diff --git a/src/pages/myPage/manage/Manage.tsx b/src/pages/myPage/manage/Manage.tsx
index 101117ff..11b7c589 100644
--- a/src/pages/myPage/manage/Manage.tsx
+++ b/src/pages/myPage/manage/Manage.tsx
@@ -1,6 +1,10 @@
 import { PATH } from "@constants/path";
 import * as S from "./Manage.style";
 import rightArrow from "@assets/icons/RightArrow.svg";
+import useProfileApi from "@apis/useProfileApi";
+import { useEffect, useState } from "react";
+import type { ProfileData } from "./manageProfile/ManageProfile.type";
+import { END_POINTS } from "@constants/api";
 
 const Manage = () => {
   const manageList = [
@@ -8,12 +12,39 @@ const Manage = () => {
     { path: PATH.MANAGE_ACCOUNT, name: "정산 계좌 관리" },
   ];
 
+  // FIXME: 전역 상태로 야놀자 연동여부를 체크하도록 변경
+  const { getProfileData } = useProfileApi();
+  const [userProfile, setUserProfile] = useState<ProfileData>();
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  const fetchUserProfile = async () => {
+    try {
+      const res = await getProfileData(END_POINTS.USER_INFO);
+      setUserProfile(res);
+    } catch (err) {
+      console.log(err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchUserProfile();
+    // eslint-disable-next-line
+  }, []);
+
+  if (isLoading) return <div>Loading...</div>;
+
+  if (!userProfile) return <div>Data Fetching Error</div>;
+
   return (
     <S.ManageListWrapper>
       <h1>관리</h1>
-      {manageList.map((item) => {
+      {manageList.map((item, index) => {
+        const hideAccountManage =
+          index === 1 && userProfile.linkedToYanolja === false;
         return (
-          <S.ManageListElement key={item.name}>
+          <S.ManageListElement key={item.name} $visible={!hideAccountManage}>
             <S.ManageLink to={item.path}>
               <span>{item.name}</span>
               <img src={rightArrow} alt={`${item.name}으로 이동하기`} />

From 115aec10c30a88b31d0e6448aca936b2119d500b Mon Sep 17 00:00:00 2001
From: seokmin <soekmin1998@naver.com>
Date: Mon, 22 Jan 2024 15:14:18 +0900
Subject: [PATCH 03/57] =?UTF-8?q?Feat:=20url=EC=9D=84=20=ED=86=B5=ED=95=9C?=
 =?UTF-8?q?=20=EA=B3=84=EC=A2=8C=20=EC=84=A4=EC=A0=95=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=A0=91=EA=B7=BC=20=EB=B0=A9=EC=A7=80=EB=A1=9C?=
 =?UTF-8?q?=EC=A7=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/myPage/manage/manageAccount/ManageAccount.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/pages/myPage/manage/manageAccount/ManageAccount.tsx b/src/pages/myPage/manage/manageAccount/ManageAccount.tsx
index 6b3f999c..5373201f 100644
--- a/src/pages/myPage/manage/manageAccount/ManageAccount.tsx
+++ b/src/pages/myPage/manage/manageAccount/ManageAccount.tsx
@@ -7,11 +7,13 @@ import AccountInfo from "../accountInfo/AccountInfo";
 import { END_POINTS } from "@constants/api";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { PATH } from "@constants/path";
+import useToastConfig from "@hooks/common/useToastConfig";
 
 const ManageAccount = () => {
   const navigate = useNavigate();
   const [search] = useSearchParams();
   const { getProfileData } = useProfileApi();
+  const { handleToast } = useToastConfig();
   const [data, setData] = useState<ProfileData>();
   const noPrevAccount = !data?.accountNumber && !data?.bank;
   const [accountInfo, setAccountInfo] = useState<AccountProps>({
@@ -24,6 +26,11 @@ const ManageAccount = () => {
     setIsLoading(true);
     try {
       const res = await getProfileData(END_POINTS.USER_INFO);
+      if (!res.linkedToYanolja) {
+        handleToast(true, [<>잘못된 접근 방식입니다</>]);
+        navigate(PATH.SETTING, { replace: true });
+        return;
+      }
       setData(res);
       setAccountInfo({ accountNumber: res.accountNumber, bank: res.bank });
     } catch (error) {
@@ -40,7 +47,7 @@ const ManageAccount = () => {
     )
       return;
 
-    if (search.get("step") !== "first") {
+    if (search.get("step") && search.get("step") !== "first") {
       navigate(PATH.MANAGE_ACCOUNT, { replace: true });
     }
 

From 289a07d64253bfe31ffe5744b79a986ad17f53f7 Mon Sep 17 00:00:00 2001
From: seokmin <soekmin1998@naver.com>
Date: Mon, 22 Jan 2024 16:46:51 +0900
Subject: [PATCH 04/57] =?UTF-8?q?Feat:=20=EB=A1=9C=EA=B7=B8=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/logout.ts                            |  9 +++
 .../EnterAccountInfo.style.ts                 | 10 +--
 src/pages/myPage/info/Info.style.ts           | 67 +++++++++++++++++-
 src/pages/myPage/info/Info.tsx                | 69 +++++++++++++++----
 src/pages/myPage/manage/Manage.tsx            | 10 +--
 .../myPage/manage/editAccount/EditAccount.tsx | 12 +++-
 6 files changed, 145 insertions(+), 32 deletions(-)
 create mode 100644 src/apis/logout.ts

diff --git a/src/apis/logout.ts b/src/apis/logout.ts
new file mode 100644
index 00000000..03706d5a
--- /dev/null
+++ b/src/apis/logout.ts
@@ -0,0 +1,9 @@
+import { axiosInstance } from "@apis/axiosInstance";
+import { ACCESS_TOKEN, END_POINTS, REFRESH_TOKEN } from "@/constants/api";
+
+export const logout = async () => {
+  await axiosInstance.post(`${END_POINTS.USER_INFO}/logout`, {
+    accessToken: localStorage.getItem(ACCESS_TOKEN),
+    refreshToken: localStorage.getItem(REFRESH_TOKEN),
+  });
+};
diff --git a/src/components/account/enterAccountInfo/EnterAccountInfo.style.ts b/src/components/account/enterAccountInfo/EnterAccountInfo.style.ts
index 78b81feb..6d335e1b 100644
--- a/src/components/account/enterAccountInfo/EnterAccountInfo.style.ts
+++ b/src/components/account/enterAccountInfo/EnterAccountInfo.style.ts
@@ -1,5 +1,6 @@
 import styled, { css } from "styled-components";
 import { AnimationControls, motion } from "framer-motion";
+import { dimmedStyle } from "@pages/myPage/info/Info.style";
 
 interface BankInputProps {
   $bank: string | undefined;
@@ -90,16 +91,9 @@ export const BankInput = styled.div<BankInputProps>`
 `;
 
 export const BackgroundBlur = styled.div<{ $isVisible: boolean }>`
-  position: absolute;
-  top: 0;
-  left: 0;
+  ${dimmedStyle}
 
   display: ${({ $isVisible }) => ($isVisible ? "block" : "none")};
-
-  width: 100%;
-  height: 100%;
-
-  background-color: rgba(0, 0, 0, 0.45);
 `;
 
 export const BankListBottomSheet = styled(motion.div).attrs<{
diff --git a/src/pages/myPage/info/Info.style.ts b/src/pages/myPage/info/Info.style.ts
index 6c2b425d..10de6486 100644
--- a/src/pages/myPage/info/Info.style.ts
+++ b/src/pages/myPage/info/Info.style.ts
@@ -1,6 +1,71 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { ListElement, ListWrapper } from "../setting/Setting.style";
 
+export const dimmedStyle = css`
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 200;
+
+  width: 100%;
+  height: 100%;
+
+  background-color: rgba(0, 0, 0, 0.45);
+`;
+
+export const DimmedBackground = styled.div`
+  ${dimmedStyle}
+`;
+
+export const LogoutModal = styled.div`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  width: 66%;
+  min-width: 240px;
+  max-width: 400px;
+
+  background-color: white;
+
+  border-radius: 12px;
+`;
+
+export const ModalText = styled.div`
+  ${({ theme }) => theme.typo.body6}
+  color: ${({ theme }) => theme.color.black};
+  line-height: 40px;
+  text-align: center;
+`;
+export const ModalButtonWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  height: 40px;
+`;
+const Button = styled.button`
+  width: 50%;
+  line-height: 40px;
+
+  ${({ theme }) => theme.typo.body6}
+`;
+export const ConfirmButton = styled(Button)`
+  color: ${({ theme }) => theme.color.white};
+
+  background-color: ${({ theme }) => theme.color.percentOrange};
+
+  -webkit-border-bottom-left-radius: 12px;
+  border-bottom-left-radius: 12px;
+`;
+export const CancelButton = styled(Button)`
+  background-color: ${({ theme }) => theme.color.greyScale6};
+
+  -webkit-border-bottom-right-radius: 12px;
+  border-bottom-right-radius: 12px;
+`;
+
 export const InfoListWrapper = styled.section`
   ${ListWrapper}
 `;
diff --git a/src/pages/myPage/info/Info.tsx b/src/pages/myPage/info/Info.tsx
index 288d383e..b0285a09 100644
--- a/src/pages/myPage/info/Info.tsx
+++ b/src/pages/myPage/info/Info.tsx
@@ -1,24 +1,67 @@
+import { useState } from "react";
 import * as S from "./Info.style";
+import { useNavigate } from "react-router-dom";
+import { PATH } from "@constants/path";
+import { logout } from "@apis/logout";
+import useToastConfig from "@hooks/common/useToastConfig";
 
 const Info = () => {
+  const navigate = useNavigate();
+  const { handleToast } = useToastConfig();
+  const [showLogoutModal, setShowLogoutModal] = useState<boolean>(false);
   const infoList = [
     { name: "문의하기", handler: () => alert("문의하기") },
-    { name: "로그아웃", handler: () => alert("로그아웃") },
+    { name: "로그아웃", handler: () => setShowLogoutModal(true) },
   ];
 
+  const logoutCancelHandler = () => {
+    setShowLogoutModal(false);
+  };
+
+  const logoutConfirmHandler = async () => {
+    try {
+      await logout();
+      localStorage.clear();
+      handleToast(false, ["로그아웃 성공"]);
+      navigate(PATH.ROOT);
+    } catch (err) {
+      handleToast(true, [<>로그아웃 실패. 잠시 후 다시 시도해 주세요</>]);
+    } finally {
+      setShowLogoutModal(false);
+    }
+  };
+
   return (
-    <S.InfoListWrapper>
-      <h1>정보</h1>
-      {infoList.map((item) => {
-        return (
-          <S.InfoListElement key={item.name}>
-            <button onClick={item.handler}>
-              <span>{item.name}</span>
-            </button>
-          </S.InfoListElement>
-        );
-      })}
-    </S.InfoListWrapper>
+    <>
+      {showLogoutModal && (
+        <S.DimmedBackground>
+          <S.LogoutModal>
+            <S.ModalText>로그아웃 하시겠습니까?</S.ModalText>
+            <S.ModalButtonWrapper>
+              <S.ConfirmButton onClick={logoutConfirmHandler}>
+                확인
+              </S.ConfirmButton>
+              <S.CancelButton onClick={logoutCancelHandler}>
+                취소
+              </S.CancelButton>
+            </S.ModalButtonWrapper>
+          </S.LogoutModal>
+        </S.DimmedBackground>
+      )}
+
+      <S.InfoListWrapper>
+        <h1>정보</h1>
+        {infoList.map((item) => {
+          return (
+            <S.InfoListElement key={item.name}>
+              <button onClick={item.handler}>
+                <span>{item.name}</span>
+              </button>
+            </S.InfoListElement>
+          );
+        })}
+      </S.InfoListWrapper>
+    </>
   );
 };
 
diff --git a/src/pages/myPage/manage/Manage.tsx b/src/pages/myPage/manage/Manage.tsx
index 11b7c589..2ec7d576 100644
--- a/src/pages/myPage/manage/Manage.tsx
+++ b/src/pages/myPage/manage/Manage.tsx
@@ -11,11 +11,9 @@ const Manage = () => {
     { path: PATH.MANAGE_PROFILE, name: "프로필 변경" },
     { path: PATH.MANAGE_ACCOUNT, name: "정산 계좌 관리" },
   ];
-
   // FIXME: 전역 상태로 야놀자 연동여부를 체크하도록 변경
   const { getProfileData } = useProfileApi();
   const [userProfile, setUserProfile] = useState<ProfileData>();
-  const [isLoading, setIsLoading] = useState<boolean>(true);
 
   const fetchUserProfile = async () => {
     try {
@@ -23,8 +21,6 @@ const Manage = () => {
       setUserProfile(res);
     } catch (err) {
       console.log(err);
-    } finally {
-      setIsLoading(false);
     }
   };
 
@@ -33,16 +29,12 @@ const Manage = () => {
     // eslint-disable-next-line
   }, []);
 
-  if (isLoading) return <div>Loading...</div>;
-
-  if (!userProfile) return <div>Data Fetching Error</div>;
-
   return (
     <S.ManageListWrapper>
       <h1>관리</h1>
       {manageList.map((item, index) => {
         const hideAccountManage =
-          index === 1 && userProfile.linkedToYanolja === false;
+          index === 1 && userProfile?.linkedToYanolja === false;
         return (
           <S.ManageListElement key={item.name} $visible={!hideAccountManage}>
             <S.ManageLink to={item.path}>
diff --git a/src/pages/myPage/manage/editAccount/EditAccount.tsx b/src/pages/myPage/manage/editAccount/EditAccount.tsx
index 085d510d..828c8089 100644
--- a/src/pages/myPage/manage/editAccount/EditAccount.tsx
+++ b/src/pages/myPage/manage/editAccount/EditAccount.tsx
@@ -1,8 +1,18 @@
 import EnterAccountInfo from "@components/account/enterAccountInfo/EnterAccountInfo";
-import { useLocation } from "react-router-dom";
+import { PATH } from "@constants/path";
+import useToastConfig from "@hooks/common/useToastConfig";
+import { useLocation, useNavigate } from "react-router-dom";
 
 const EditAccount = () => {
   const { state } = useLocation();
+  const { handleToast } = useToastConfig();
+  const navigate = useNavigate();
+
+  if (!state) {
+    handleToast(true, [<>잘못된 접근 방식입니다.</>]);
+    navigate(PATH.SETTING, { replace: true });
+    return;
+  }
 
   return <EnterAccountInfo accountInfo={state} />;
 };

From 751f1c91f3b837fcb6606a4a3224955673ce779b Mon Sep 17 00:00:00 2001
From: seokmin <soekmin1998@naver.com>
Date: Mon, 22 Jan 2024 17:18:58 +0900
Subject: [PATCH 05/57] =?UTF-8?q?Refactor:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?=
 =?UTF-8?q?=20=ED=9B=84=20=EC=9D=B4=EC=A0=84=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=EB=A1=9C=20=EB=A6=AC=EB=8B=A4=EC=9D=B4=EB=A0=89=EC=85=98=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/axiosInstance.ts       |  4 ++--
 src/pages/signInPage/SignIn.tsx | 32 ++++++++++++++------------------
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/apis/axiosInstance.ts b/src/apis/axiosInstance.ts
index 99b63574..9c24bae6 100644
--- a/src/apis/axiosInstance.ts
+++ b/src/apis/axiosInstance.ts
@@ -19,11 +19,11 @@ const addToken = (config: InternalAxiosRequestConfig) => {
   if (!config.headers || config.headers.Authorization) return config;
 
   const accessToken = localStorage.getItem(ACCESS_TOKEN);
-  console.log(accessToken);
 
   if (!accessToken) {
     alert("다시 로그인 해 주세요."); // or 로그인
-    window.location.href = PATH.ROOT;
+    window.location.href = `${PATH.LOGIN}?redirect=${window.location.pathname}`;
+    return;
   }
 
   config.headers.Authorization = `${accessToken}`;
diff --git a/src/pages/signInPage/SignIn.tsx b/src/pages/signInPage/SignIn.tsx
index b2c0ead4..5a0756ad 100644
--- a/src/pages/signInPage/SignIn.tsx
+++ b/src/pages/signInPage/SignIn.tsx
@@ -1,8 +1,9 @@
 import * as S from "./SignIn.style";
 import { useForm } from "react-hook-form";
 import axios from "axios";
-import { useNavigate } from "react-router-dom";
-import { useToastStore } from "@/store/store";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import useToastConfig from "@hooks/common/useToastConfig";
+import { PATH } from "@constants/path";
 
 type FormValues = {
   email: string;
@@ -11,7 +12,9 @@ type FormValues = {
 
 const SignIn = () => {
   const navigate = useNavigate();
-  const setToastConfig = useToastStore((state) => state.setToastConfig);
+  const [searchParams] = useSearchParams();
+  const redirectUrl = searchParams.get("redirect");
+  const { handleToast } = useToastConfig();
 
   const {
     register,
@@ -45,23 +48,16 @@ const SignIn = () => {
           localStorage.setItem("accessToken", accessToken);
           localStorage.setItem("refreshToken", refreshToken);
 
-          navigate("/");
+          if (redirectUrl) {
+            navigate(redirectUrl);
+            return;
+          }
+
+          navigate(PATH.ROOT);
         },
       )
-      .catch(({ response }) => {
-        console.log(response);
-        setToastConfig({
-          isShow: true,
-          isError: false,
-          strings: [[<>아이디 혹은 비밀번호를 확인해주세요</>]],
-        });
-        setTimeout(() => {
-          setToastConfig({
-            isShow: false,
-            isError: false,
-            strings: [[<>아이디 혹은 비밀번호를 확인해주세요</>]],
-          });
-        }, 6000);
+      .catch(() => {
+        handleToast(false, [<>아이디 혹은 비밀번호를 확인해주세요</>]);
       });
   };
 

From 302b159c81b95253fb69bed64b9c4982dc171ea9 Mon Sep 17 00:00:00 2001
From: seokmin <soekmin1998@naver.com>
Date: Mon, 22 Jan 2024 17:23:28 +0900
Subject: [PATCH 06/57] =?UTF-8?q?Chore:=20return=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/axiosInstance.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/apis/axiosInstance.ts b/src/apis/axiosInstance.ts
index 9c24bae6..26f3c162 100644
--- a/src/apis/axiosInstance.ts
+++ b/src/apis/axiosInstance.ts
@@ -23,7 +23,6 @@ const addToken = (config: InternalAxiosRequestConfig) => {
   if (!accessToken) {
     alert("다시 로그인 해 주세요."); // or 로그인
     window.location.href = `${PATH.LOGIN}?redirect=${window.location.pathname}`;
-    return;
   }
 
   config.headers.Authorization = `${accessToken}`;

From ec3e365b58dde630c183a9103238f34dc881bcad Mon Sep 17 00:00:00 2001
From: seokmin <soekmin1998@naver.com>
Date: Mon, 22 Jan 2024 17:32:03 +0900
Subject: [PATCH 07/57] =?UTF-8?q?Chore:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=ED=9B=84=20=EC=9D=B4=EC=A0=84=20=ED=9E=88=EC=8A=A4=ED=86=A0?=
 =?UTF-8?q?=EB=A6=AC=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

replace: true 옵션 추가
---
 src/pages/signInPage/SignIn.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/signInPage/SignIn.tsx b/src/pages/signInPage/SignIn.tsx
index 5a0756ad..56573c10 100644
--- a/src/pages/signInPage/SignIn.tsx
+++ b/src/pages/signInPage/SignIn.tsx
@@ -49,11 +49,11 @@ const SignIn = () => {
           localStorage.setItem("refreshToken", refreshToken);
 
           if (redirectUrl) {
-            navigate(redirectUrl);
+            navigate(redirectUrl, { replace: true });
             return;
           }
 
-          navigate(PATH.ROOT);
+          navigate(PATH.ROOT, { replace: true });
         },
       )
       .catch(() => {

From e4cc4f8d722e8b545cfa3e3cb126322e9cb7dca0 Mon Sep 17 00:00:00 2001
From: seokmin <soekmin1998@naver.com>
Date: Mon, 22 Jan 2024 18:08:33 +0900
Subject: [PATCH 08/57] =?UTF-8?q?Feat:=20=EB=A7=88=EC=9D=B4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=82=B4=20=EC=95=BC=EB=86=80=EC=9E=90=20?=
 =?UTF-8?q?=EC=97=B0=EB=8F=99=20=EB=B2=84=ED=8A=BC=20=ED=99=9C=EC=84=B1?=
 =?UTF-8?q?=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/myPage/MyPage.style.ts |  7 ++++--
 src/pages/myPage/MyPage.tsx      | 38 +++++++++++++++++++++++++++++---
 2 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/src/pages/myPage/MyPage.style.ts b/src/pages/myPage/MyPage.style.ts
index 0eec31f9..2e0d3d9f 100644
--- a/src/pages/myPage/MyPage.style.ts
+++ b/src/pages/myPage/MyPage.style.ts
@@ -9,11 +9,14 @@ export const ProfileSection = styled.section`
 
   border-bottom: 10px solid ${({ theme }) => theme.color.greyScale7};
 
-  span {
+  h3 {
     ${({ theme }) => theme.typo.body1}
     color: ${({ theme }) => theme.color.black};
+  }
 
-    margin-bottom: 16px;
+  span {
+    ${({ theme }) => theme.typo.body4}
+    color: ${({ theme }) => theme.color.percentOrange};
   }
 
   button {
diff --git a/src/pages/myPage/MyPage.tsx b/src/pages/myPage/MyPage.tsx
index 32445d13..668e550e 100644
--- a/src/pages/myPage/MyPage.tsx
+++ b/src/pages/myPage/MyPage.tsx
@@ -1,14 +1,46 @@
-import { Outlet } from "react-router-dom";
+import { Outlet, useNavigate } from "react-router-dom";
 import MyPageNav from "./components/myPageNav/MyPageNav";
 
 import * as S from "./MyPage.style";
+import useProfileApi from "@apis/useProfileApi";
+import { useEffect, useState } from "react";
+import { ProfileData } from "./manage/manageProfile/ManageProfile.type";
+import { END_POINTS } from "@constants/api";
+import { PATH } from "@constants/path";
 
 const MyPage = () => {
+  const navigate = useNavigate();
+  // FIXME: 전역상태로 야놀자 연동 여부 확인하도록 수정
+  const { getProfileData } = useProfileApi();
+  const [userProfile, setUserProfile] = useState<ProfileData>();
+
+  const fetchUserProfile = async () => {
+    try {
+      const res = await getProfileData(END_POINTS.USER_INFO);
+      setUserProfile(res);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  useEffect(() => {
+    fetchUserProfile();
+    // eslint-disable-next-line
+  }, []);
+
+  const connectToYanolja = () => {
+    navigate(PATH.YANOLJA_ACCOUNT);
+  };
+
   return (
     <>
       <S.ProfileSection>
-        <span>kimyangdo82@gmail.com</span>
-        <button>야놀자 계정 연동하기</button>
+        <h3>{userProfile?.email} 님</h3>
+        {!userProfile?.linkedToYanolja ? (
+          <span>야놀자와 연동된 계정입니다</span>
+        ) : (
+          <button onClick={connectToYanolja}>야놀자 계정 연동하기</button>
+        )}
       </S.ProfileSection>
       <MyPageNav />
       <Outlet />

From c3d8428ea8bd5b4767bfa794b693f213104b2070 Mon Sep 17 00:00:00 2001
From: seokmin <soekmin1998@naver.com>
Date: Mon, 22 Jan 2024 18:16:40 +0900
Subject: [PATCH 09/57] =?UTF-8?q?Chore:=20=EC=9E=84=EC=8B=9C=20=EC=A1=B0?=
 =?UTF-8?q?=EA=B1=B4=EB=AC=B8=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/myPage/MyPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/myPage/MyPage.tsx b/src/pages/myPage/MyPage.tsx
index 668e550e..6b3e4bb5 100644
--- a/src/pages/myPage/MyPage.tsx
+++ b/src/pages/myPage/MyPage.tsx
@@ -36,7 +36,7 @@ const MyPage = () => {
     <>
       <S.ProfileSection>
         <h3>{userProfile?.email} 님</h3>
-        {!userProfile?.linkedToYanolja ? (
+        {userProfile?.linkedToYanolja ? (
           <span>야놀자와 연동된 계정입니다</span>
         ) : (
           <button onClick={connectToYanolja}>야놀자 계정 연동하기</button>

From 4adf262a08ca3e2284d0d6f5b983698184f882bf Mon Sep 17 00:00:00 2001
From: seokmin <soekmin1998@naver.com>
Date: Mon, 22 Jan 2024 18:23:45 +0900
Subject: [PATCH 10/57] =?UTF-8?q?Fix:=20=EC=95=BC=EB=86=80=EC=9E=90=20?=
 =?UTF-8?q?=EC=97=B0=EB=8F=99=20=EB=B2=84=ED=8A=BC=20=EC=A1=B0=EA=B1=B4?=
 =?UTF-8?q?=EB=AC=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/myPage/MyPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/myPage/MyPage.tsx b/src/pages/myPage/MyPage.tsx
index 6b3e4bb5..0cdfdee7 100644
--- a/src/pages/myPage/MyPage.tsx
+++ b/src/pages/myPage/MyPage.tsx
@@ -36,7 +36,7 @@ const MyPage = () => {
     <>
       <S.ProfileSection>
         <h3>{userProfile?.email} 님</h3>
-        {userProfile?.linkedToYanolja ? (
+        {userProfile?.linkedToYanolja === true ? (
           <span>야놀자와 연동된 계정입니다</span>
         ) : (
           <button onClick={connectToYanolja}>야놀자 계정 연동하기</button>

From 5696b53acecaf119f4f391b3f105d81fdd03c9e6 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Wed, 10 Jan 2024 11:43:29 +0900
Subject: [PATCH 11/57] =?UTF-8?q?refactor:=20rel=3D"noopener"=20=EC=86=8D?=
 =?UTF-8?q?=EC=84=B1=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/roomDetailPage/components/roomInfo/RoomInfo.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/roomDetailPage/components/roomInfo/RoomInfo.tsx b/src/pages/roomDetailPage/components/roomInfo/RoomInfo.tsx
index 6d8d2763..03cb040f 100644
--- a/src/pages/roomDetailPage/components/roomInfo/RoomInfo.tsx
+++ b/src/pages/roomDetailPage/components/roomInfo/RoomInfo.tsx
@@ -88,6 +88,7 @@ const RoomInfo = ({ room }: RoomInfoProps) => {
           <a
             href={room.hotelInfoUrl}
             target="_blank"
+            rel="noopener"
             aria-label="상세 정보 보기"
           >
             <S.MoreInfoWrapper>

From 4fbc629331686f3435e5b6edcc0cd632e0bbbc05 Mon Sep 17 00:00:00 2001
From: seokmin <soekmin1998@naver.com>
Date: Mon, 22 Jan 2024 18:31:11 +0900
Subject: [PATCH 12/57] =?UTF-8?q?Fix:=20=EC=97=B0=EB=8F=99=20=EC=97=AC?=
 =?UTF-8?q?=EB=B6=80=20=EB=B3=80=EC=88=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/myPage/MyPage.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/myPage/MyPage.tsx b/src/pages/myPage/MyPage.tsx
index 0cdfdee7..8d41aa6f 100644
--- a/src/pages/myPage/MyPage.tsx
+++ b/src/pages/myPage/MyPage.tsx
@@ -13,6 +13,7 @@ const MyPage = () => {
   // FIXME: 전역상태로 야놀자 연동 여부 확인하도록 수정
   const { getProfileData } = useProfileApi();
   const [userProfile, setUserProfile] = useState<ProfileData>();
+  const isConnected = userProfile?.linkedToYanolja;
 
   const fetchUserProfile = async () => {
     try {
@@ -36,7 +37,7 @@ const MyPage = () => {
     <>
       <S.ProfileSection>
         <h3>{userProfile?.email} 님</h3>
-        {userProfile?.linkedToYanolja === true ? (
+        {isConnected === true ? (
           <span>야놀자와 연동된 계정입니다</span>
         ) : (
           <button onClick={connectToYanolja}>야놀자 계정 연동하기</button>

From 165238631ade3d2b164311bcc47ded5c150462c2 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Fri, 12 Jan 2024 15:33:08 +0900
Subject: [PATCH 13/57] =?UTF-8?q?design:=20=EC=83=81=ED=92=88=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=83=80=EC=9D=B4?=
 =?UTF-8?q?=ED=8B=80=20=EB=A7=90=EC=A4=84=EC=9E=84=ED=91=9C=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../roomDetailPage/components/roomHeader/RoomHeader.style.ts     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/roomDetailPage/components/roomHeader/RoomHeader.style.ts b/src/pages/roomDetailPage/components/roomHeader/RoomHeader.style.ts
index e850c2bb..a86be054 100644
--- a/src/pages/roomDetailPage/components/roomHeader/RoomHeader.style.ts
+++ b/src/pages/roomDetailPage/components/roomHeader/RoomHeader.style.ts
@@ -61,6 +61,7 @@ export const TitleWrapper = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
   text-align: center;
+  width: 100%;
 `;
 
 export const Title = styled.p<{ $visible: boolean }>`

From 3c9d4192ef146163978ba745108e7369dcaf5864 Mon Sep 17 00:00:00 2001
From: seokmin <soekmin1998@naver.com>
Date: Mon, 22 Jan 2024 18:40:35 +0900
Subject: [PATCH 14/57] =?UTF-8?q?Chore:=20=EB=B0=B0=ED=8F=AC=20=EC=82=AC?=
 =?UTF-8?q?=EC=9D=B4=ED=8A=B8=20=EC=98=A4=EB=A5=98=20=EB=94=94=EB=B2=84?=
 =?UTF-8?q?=EA=B9=85=EC=9D=84=20=EC=9C=84=ED=95=9C=20console=20log=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/myPage/MyPage.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/myPage/MyPage.tsx b/src/pages/myPage/MyPage.tsx
index 8d41aa6f..49bd98f2 100644
--- a/src/pages/myPage/MyPage.tsx
+++ b/src/pages/myPage/MyPage.tsx
@@ -33,6 +33,8 @@ const MyPage = () => {
     navigate(PATH.YANOLJA_ACCOUNT);
   };
 
+  console.log(isConnected);
+
   return (
     <>
       <S.ProfileSection>

From 6939006fe46f69853668cd5126b0ce6cbdf0c7a8 Mon Sep 17 00:00:00 2001
From: seokmin <soekmin1998@naver.com>
Date: Mon, 22 Jan 2024 19:36:27 +0900
Subject: [PATCH 15/57] =?UTF-8?q?Fix:=20=EC=95=BC=EB=86=80=EC=9E=90=20?=
 =?UTF-8?q?=EC=97=B0=EB=8F=99=20=EC=97=90=EB=9F=AC=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=A0=95=EB=B3=B4=20fetch=20=EC=9D=B4=EC=A0=84?=
 =?UTF-8?q?=EC=97=90=20=EB=B3=B4=EC=97=AC=EC=A7=80=EB=8A=94=20=EB=B9=88=20?=
 =?UTF-8?q?div=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/myPage/MyPage.style.ts | 7 +++++++
 src/pages/myPage/MyPage.tsx      | 6 +++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/pages/myPage/MyPage.style.ts b/src/pages/myPage/MyPage.style.ts
index 2e0d3d9f..3bd63c22 100644
--- a/src/pages/myPage/MyPage.style.ts
+++ b/src/pages/myPage/MyPage.style.ts
@@ -17,6 +17,9 @@ export const ProfileSection = styled.section`
   span {
     ${({ theme }) => theme.typo.body4}
     color: ${({ theme }) => theme.color.percentOrange};
+
+    display: block;
+    height: 32px;
   }
 
   button {
@@ -34,3 +37,7 @@ export const ProfileSection = styled.section`
     background-color: ${({ theme }) => theme.color.percentOrange};
   }
 `;
+
+export const EmptyDiv = styled.div`
+  height: 32px;
+`;
diff --git a/src/pages/myPage/MyPage.tsx b/src/pages/myPage/MyPage.tsx
index 49bd98f2..5f2458f5 100644
--- a/src/pages/myPage/MyPage.tsx
+++ b/src/pages/myPage/MyPage.tsx
@@ -33,13 +33,13 @@ const MyPage = () => {
     navigate(PATH.YANOLJA_ACCOUNT);
   };
 
-  console.log(isConnected);
-
   return (
     <>
       <S.ProfileSection>
         <h3>{userProfile?.email} 님</h3>
-        {isConnected === true ? (
+        {!userProfile ? (
+          <S.EmptyDiv />
+        ) : isConnected ? (
           <span>야놀자와 연동된 계정입니다</span>
         ) : (
           <button onClick={connectToYanolja}>야놀자 계정 연동하기</button>

From b010691e6846080ad0d469e09cfff2317f039008 Mon Sep 17 00:00:00 2001
From: Bumang-Cyber <jove0729@naver.com>
Date: Tue, 23 Jan 2024 10:14:39 +0900
Subject: [PATCH 16/57] =?UTF-8?q?fix:=20date-fns=20=ED=83=80=EC=9E=85?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.tsx                                   |  8 ++++----
 src/mocks/handler.ts                           | 18 +++++++++---------
 src/pages/homePage/Home.tsx                    | 17 ++++++++---------
 .../itemCarousel/ItemCarousel.style.ts         |  0
 .../homePage}/itemCarousel/ItemCarousel.tsx    |  0
 .../itemCarouselUnit/ItemCarouselUnit.style.ts |  0
 .../itemCarouselUnit/ItemCarouselUnit.tsx      | 10 +++++-----
 .../weekendCarouselUnit/WeekendUnit.tsx        |  5 +++--
 8 files changed, 29 insertions(+), 29 deletions(-)
 rename src/{components => pages/homePage}/itemCarousel/ItemCarousel.style.ts (100%)
 rename src/{components => pages/homePage}/itemCarousel/ItemCarousel.tsx (100%)
 rename src/{components => pages/homePage}/itemCarousel/itemCarouselUnit/ItemCarouselUnit.style.ts (100%)
 rename src/{components => pages/homePage}/itemCarousel/itemCarouselUnit/ItemCarouselUnit.tsx (86%)

diff --git a/src/main.tsx b/src/main.tsx
index 857ae0d2..6a7aac38 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -4,15 +4,15 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import ReactDOM from "react-dom/client";
 import { RouterProvider } from "react-router-dom";
 import { ThemeProvider } from "styled-components";
-import { worker } from "./mocks/broswer.ts";
+// import { worker } from "./mocks/broswer.ts";
 import { router } from "./routes/router";
 import { GlobalStyle } from "./styles/globalStyle";
 import { theme } from "./styles/theme";
 
 const queryClient = new QueryClient();
-if (process.env.NODE_ENV === "development") {
-  worker.start();
-}
+// if (process.env.NODE_ENV === "development") {
+//   worker.start();
+// }
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
diff --git a/src/mocks/handler.ts b/src/mocks/handler.ts
index c361c89f..b5658340 100644
--- a/src/mocks/handler.ts
+++ b/src/mocks/handler.ts
@@ -25,15 +25,6 @@ export const handlers = [
   http.get("/v1/products/10", () => {
     return HttpResponse.json(dummyPurchaseDetail);
   }),
-
-  /*
-    warning 없애기용.
-    cdn에 폰트 요청하는걸 가로채지 못했다고 warning 띄우길래 적용했습니다.
-  */
-  http.get("*", (req) => {
-    console.log(req);
-  }),
-
   http.get("/v1/members/purchased-history", () => {
     return HttpResponse.json(dummyPurchaseList);
   }),
@@ -43,4 +34,13 @@ export const handlers = [
   http.get("/v1/products", () => {
     return HttpResponse.json(dummySearchList);
   }),
+
+  /*
+    warning 없애기용.
+    cdn에 폰트 요청하는걸 가로채지 못했다고 warning 띄우길래 적용했습니다.
+  */
+  http.get("*", (req) => {
+    console.log(req);
+    return;
+  }),
 ];
diff --git a/src/pages/homePage/Home.tsx b/src/pages/homePage/Home.tsx
index 28a10f9c..41427e43 100644
--- a/src/pages/homePage/Home.tsx
+++ b/src/pages/homePage/Home.tsx
@@ -1,4 +1,4 @@
-import ItemCarousel from "@components/itemCarousel/ItemCarousel";
+import ItemCarousel from "./itemCarousel/ItemCarousel";
 import { useState } from "react";
 import * as S from "./Home.style";
 import TitleSection from "./titleSection/TitleSection";
@@ -9,20 +9,19 @@ import {
   WeekendItemsType,
   WeekendItem,
 } from "@type/saleSection";
-// import { fetchMainItem } from "@apis/fetchMainItems";
+import { fetchMainItem } from "@apis/fetchMainItems";
 
 import { locale } from "@constants/locale";
 import WeekendCarousel from "./weekendCarousel/WeekendCarousel";
-// import { useSuspenseQuery } from "@tanstack/react-query";
+import { useSuspenseQuery } from "@tanstack/react-query";
 
 const Home = () => {
-  // const { data: MainData } = useSuspenseQuery({
-  //   queryKey: ["main"],
-  //   queryFn: fetchMainItem,
-  // });
-
-  // console.log(MainData);
+  const { data: MainData } = useSuspenseQuery({
+    queryKey: ["main"],
+    queryFn: fetchMainItem,
+  });
 
+  console.log(MainData);
   const weekendProds: WeekendItemsType = {
     weekend: [
       {
diff --git a/src/components/itemCarousel/ItemCarousel.style.ts b/src/pages/homePage/itemCarousel/ItemCarousel.style.ts
similarity index 100%
rename from src/components/itemCarousel/ItemCarousel.style.ts
rename to src/pages/homePage/itemCarousel/ItemCarousel.style.ts
diff --git a/src/components/itemCarousel/ItemCarousel.tsx b/src/pages/homePage/itemCarousel/ItemCarousel.tsx
similarity index 100%
rename from src/components/itemCarousel/ItemCarousel.tsx
rename to src/pages/homePage/itemCarousel/ItemCarousel.tsx
diff --git a/src/components/itemCarousel/itemCarouselUnit/ItemCarouselUnit.style.ts b/src/pages/homePage/itemCarousel/itemCarouselUnit/ItemCarouselUnit.style.ts
similarity index 100%
rename from src/components/itemCarousel/itemCarouselUnit/ItemCarouselUnit.style.ts
rename to src/pages/homePage/itemCarousel/itemCarouselUnit/ItemCarouselUnit.style.ts
diff --git a/src/components/itemCarousel/itemCarouselUnit/ItemCarouselUnit.tsx b/src/pages/homePage/itemCarousel/itemCarouselUnit/ItemCarouselUnit.tsx
similarity index 86%
rename from src/components/itemCarousel/itemCarouselUnit/ItemCarouselUnit.tsx
rename to src/pages/homePage/itemCarousel/itemCarouselUnit/ItemCarouselUnit.tsx
index 0be958d6..5699dc65 100644
--- a/src/components/itemCarousel/itemCarouselUnit/ItemCarouselUnit.tsx
+++ b/src/pages/homePage/itemCarousel/itemCarouselUnit/ItemCarouselUnit.tsx
@@ -1,4 +1,4 @@
-import { format } from "date-fns";
+import { format, parseISO } from "date-fns";
 import * as S from "./ItemCarouselUnit.style";
 import { LocaleItem } from "@type/saleSection";
 import { useNavigate } from "react-router-dom";
@@ -11,10 +11,10 @@ interface UnitProps {
 const ItemCarouselUnit = ({ item }: UnitProps) => {
   const navigate = useNavigate();
   const [, , hotel] = item;
-  const CHKIN0 = format(hotel[0].checkInDate, "mm.dd");
-  const CHKOUT0 = format(hotel[0].checkOutDate, "mm.dd");
-  const CHKIN1 = format(hotel[1].checkInDate, "mm.dd");
-  const CHKOUT1 = format(hotel[1].checkOutDate, "mm.dd");
+  const CHKIN0 = format(parseISO(hotel[0].checkInDate), "MM.dd");
+  const CHKOUT0 = format(parseISO(hotel[0].checkOutDate), "MM.dd");
+  const CHKIN1 = format(parseISO(hotel[1].checkInDate), "MM.dd");
+  const CHKOUT1 = format(parseISO(hotel[1].checkOutDate), "MM.dd");
 
   const onClickHandler = (num: number) => {
     navigate(PATH.DETAIL_ROOM + "/" + hotel[num].id);
diff --git a/src/pages/homePage/weekendCarousel/weekendCarouselUnit/WeekendUnit.tsx b/src/pages/homePage/weekendCarousel/weekendCarouselUnit/WeekendUnit.tsx
index 305f87ce..398ec6f1 100644
--- a/src/pages/homePage/weekendCarousel/weekendCarouselUnit/WeekendUnit.tsx
+++ b/src/pages/homePage/weekendCarousel/weekendCarouselUnit/WeekendUnit.tsx
@@ -4,6 +4,7 @@ import { WeekendItem } from "@type/saleSection";
 import { format } from "date-fns";
 import { useNavigate } from "react-router-dom";
 import { PATH } from "@constants/path";
+import { parseISO } from "date-fns";
 
 interface UnitProps {
   item: [number, WeekendItem];
@@ -11,8 +12,8 @@ interface UnitProps {
 
 const WeekendlUnit = ({ item }: UnitProps) => {
   const navigate = useNavigate();
-  const CHKIN = format(item[1].checkInDate, "MM.dd");
-  const CHKOUT = format(item[1].checkOutDate, "MM.dd");
+  const CHKIN = format(parseISO(item[1].checkInDate), "MM.dd");
+  const CHKOUT = format(parseISO(item[1].checkOutDate), "MM.dd");
 
   const onClickHandler = () => {
     navigate(PATH.DETAIL_ROOM + "/" + item[1].id);

From 9af13086b21bf13ed5c5400fe876d1bfa8934a4a Mon Sep 17 00:00:00 2001
From: Bumang-Cyber <jove0729@naver.com>
Date: Tue, 23 Jan 2024 12:55:52 +0900
Subject: [PATCH 17/57] =?UTF-8?q?feat:=20=EC=95=8C=EB=9E=8C=20=EB=82=B4?=
 =?UTF-8?q?=EC=97=AD=20=EC=97=B0=EB=8F=99,=20=EC=8B=A0=EA=B7=9C=20?=
 =?UTF-8?q?=EC=95=8C=EB=9E=8C=20=EC=97=AC=EB=B6=80=20api=20=EC=97=B0?=
 =?UTF-8?q?=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/fetchAlarm.ts                       | 15 +++++++
 src/apis/fetchHasAlarm.ts                    | 11 +++++
 src/constants/api.ts                         |  2 +
 src/pages/homePage/Home.tsx                  | 12 +++---
 src/pages/homePage/mainHeader/MainHeader.tsx | 12 ++++--
 src/pages/noticePage/NoticePage.tsx          | 44 ++++++++++++++------
 src/pages/signInPage/SignIn.tsx              | 19 +++------
 7 files changed, 78 insertions(+), 37 deletions(-)
 create mode 100644 src/apis/fetchAlarm.ts
 create mode 100644 src/apis/fetchHasAlarm.ts

diff --git a/src/apis/fetchAlarm.ts b/src/apis/fetchAlarm.ts
new file mode 100644
index 00000000..64ff8ecf
--- /dev/null
+++ b/src/apis/fetchAlarm.ts
@@ -0,0 +1,15 @@
+import { END_POINTS } from "@constants/api";
+import { axiosInstance } from "./axiosInstance";
+
+export interface AlarmProps {
+  id: number;
+  title: string;
+  content: string;
+  date: string;
+  isRead: boolean;
+}
+
+export const fetchAlarm = async (): Promise<AlarmProps[]> => {
+  const { data } = await axiosInstance.get(END_POINTS.ALARM);
+  return data.data;
+};
diff --git a/src/apis/fetchHasAlarm.ts b/src/apis/fetchHasAlarm.ts
new file mode 100644
index 00000000..f95cc167
--- /dev/null
+++ b/src/apis/fetchHasAlarm.ts
@@ -0,0 +1,11 @@
+import { END_POINTS } from "@constants/api";
+import { axiosInstance } from "./axiosInstance";
+
+export interface ReadProps {
+  hasNonReadAlarm: boolean;
+}
+
+export const fetchHasAlarm = async (): Promise<ReadProps> => {
+  const { data } = await axiosInstance.get(END_POINTS.HASALARM);
+  return data.data;
+};
diff --git a/src/constants/api.ts b/src/constants/api.ts
index 4bee132c..98e4297c 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -4,6 +4,8 @@ export const END_POINTS = {
   LOGIN: "/v1/members/signin",
   LOGOUT: "/v1/members/logout",
   SIGNUP: "/v1/members/signup",
+  ALARM: "v1/alarms",
+  HASALARM: "v1/alarms/status",
   ROOM: (roomId: string) => `/v1/products/${roomId}`,
   RESERVATION: "/v1/reservations",
   MAIN: "/v1/products/main",
diff --git a/src/pages/homePage/Home.tsx b/src/pages/homePage/Home.tsx
index 41427e43..3df6f49c 100644
--- a/src/pages/homePage/Home.tsx
+++ b/src/pages/homePage/Home.tsx
@@ -9,19 +9,17 @@ import {
   WeekendItemsType,
   WeekendItem,
 } from "@type/saleSection";
-import { fetchMainItem } from "@apis/fetchMainItems";
 
 import { locale } from "@constants/locale";
 import WeekendCarousel from "./weekendCarousel/WeekendCarousel";
-import { useSuspenseQuery } from "@tanstack/react-query";
+// import { useSuspenseQuery } from "@tanstack/react-query";
 
 const Home = () => {
-  const { data: MainData } = useSuspenseQuery({
-    queryKey: ["main"],
-    queryFn: fetchMainItem,
-  });
+  // const { data: mainData } = useSuspenseQuery({
+  //   queryKey: ["main"],
+  //   queryFn: fetchMainItem,
+  // });
 
-  console.log(MainData);
   const weekendProds: WeekendItemsType = {
     weekend: [
       {
diff --git a/src/pages/homePage/mainHeader/MainHeader.tsx b/src/pages/homePage/mainHeader/MainHeader.tsx
index 799ead65..e1dfd34a 100644
--- a/src/pages/homePage/mainHeader/MainHeader.tsx
+++ b/src/pages/homePage/mainHeader/MainHeader.tsx
@@ -1,15 +1,19 @@
 import { useNavigate } from "react-router-dom";
 import * as S from "./MainHeader.style";
 import MainLogo from "@assets/logos/main_logo.svg?react";
-import { useState } from "react";
 import { PATH } from "@constants/path";
+import { fetchHasAlarm } from "@apis/fetchHasAlarm";
+import { useSuspenseQuery } from "@tanstack/react-query";
 
 const MainHeader = () => {
-  const [isAlarmOn, setIsAlarmOn] = useState(false);
+  const { data: hasAlarmData } = useSuspenseQuery({
+    queryKey: ["hasAlarm"],
+    queryFn: fetchHasAlarm,
+  });
+
   const navigate = useNavigate();
 
   const alertHandler = () => {
-    setIsAlarmOn(false);
     navigate(PATH.NOTICE);
   };
 
@@ -19,7 +23,7 @@ const MainHeader = () => {
         <MainLogo />
         <section>
           <S.bellIcon onClick={alertHandler} />
-          <S.bellAlertOn $isAlarmOn={isAlarmOn} />
+          <S.bellAlertOn $isAlarmOn={hasAlarmData.hasNonReadAlarm} />
         </section>
       </S.HeaderWrapper>
     </S.HeaderContainer>
diff --git a/src/pages/noticePage/NoticePage.tsx b/src/pages/noticePage/NoticePage.tsx
index 45602091..0f1fcc81 100644
--- a/src/pages/noticePage/NoticePage.tsx
+++ b/src/pages/noticePage/NoticePage.tsx
@@ -1,27 +1,47 @@
 import { useState } from "react";
 import * as S from "./NoticePage.style";
+import { useQuery } from "@tanstack/react-query";
+import { fetchAlarm, AlarmProps } from "@apis/fetchAlarm";
+import { format, parseISO } from "date-fns";
+import { fetchUserInfo } from "@apis/fetchUserInfo";
+fetchUserInfo;
 
 const NoticePage = () => {
-  const [messages] = useState([1, 2, 3, 4, 5]);
+  const { data: userData } = useQuery({
+    queryKey: ["UserInfo"],
+    queryFn: fetchUserInfo,
+  });
+
+  const { data: alarmData } = useQuery({
+    queryKey: ["alarm", userData?.id],
+    queryFn: fetchAlarm,
+    enabled: !!userData?.id,
+  });
+
+  console.log(alarmData);
+  const [messages] = useState<AlarmProps[] | undefined>(alarmData);
 
   return (
     <S.Container>
-      {messages.map((item) =>
-        item !== 5 ? (
-          <S.NewMessage>
-            <h1>‘호텔 인 나인 강남’의 판매가 완료 되었어요!</h1>
+      {messages?.map((item) =>
+        item.isRead ? (
+          <S.OldMessage key={item.id}>
+            <S.OldMessage>
+              <h1>{item.content}</h1>
+              <h3>{format(parseISO(item.date), "yyyy. MM. dd. HH:mm")}</h3>
+            </S.OldMessage>
+          </S.OldMessage>
+        ) : (
+          <S.NewMessage key={item.id}>
+            <h1>{item.content}</h1>
             <div>
-              <section />
-              <h3>2023. 12. 30. 17:00</h3>
+              {!item.isRead && <section />}
+              <h3>{format(parseISO(item.date), "yyyy. MM. dd. HH:mm")}</h3>
             </div>
           </S.NewMessage>
-        ) : (
-          <S.OldMessage>
-            <h1>‘호텔 인 나인 강남’의 판매가 완료 되었어요!</h1>
-            <h3>2023. 12. 30. 17:00</h3>
-          </S.OldMessage>
         ),
       )}
+      {!messages && <div>no result</div>}
     </S.Container>
   );
 };
diff --git a/src/pages/signInPage/SignIn.tsx b/src/pages/signInPage/SignIn.tsx
index c9c7c14e..ff65daa9 100644
--- a/src/pages/signInPage/SignIn.tsx
+++ b/src/pages/signInPage/SignIn.tsx
@@ -1,9 +1,10 @@
 import * as S from "./SignIn.style";
 import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
-import { useToastStore, useUserInfoStore } from "@/store/store";
+import { useUserInfoStore } from "@/store/store";
 import { postLogin } from "@apis/fetchLogin";
 import { getMessaging, getToken } from "firebase/messaging";
+import useToastConfig from "@hooks/common/useToastConfig";
 
 type FormValues = {
   email: string;
@@ -12,7 +13,7 @@ type FormValues = {
 
 const SignIn = () => {
   const navigate = useNavigate();
-  const setToastConfig = useToastStore((state) => state.setToastConfig);
+  const { handleToast } = useToastConfig();
 
   const {
     register,
@@ -57,18 +58,8 @@ const SignIn = () => {
       })
       .catch(({ response }) => {
         console.log(response);
-        setToastConfig({
-          isShow: true,
-          isError: false,
-          strings: [[<>아이디 혹은 비밀번호를 확인해주세요</>]],
-        });
-        setTimeout(() => {
-          setToastConfig({
-            isShow: false,
-            isError: false,
-            strings: [[<>아이디 혹은 비밀번호를 확인해주세요</>]],
-          });
-        }, 6000);
+        // FIXME: USETOAST로 변경
+        handleToast(false, [<>아이디 혹은 비밀번호를 확인해주세요</>]);
       });
   };
 

From eac10a98c06564bf36b626bf46c1648f995d7aa4 Mon Sep 17 00:00:00 2001
From: Bumang-Cyber <jove0729@naver.com>
Date: Tue, 23 Jan 2024 13:03:28 +0900
Subject: [PATCH 18/57] =?UTF-8?q?feat:=20=ED=8F=B4=EB=8D=94,=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=AA=85=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/path.ts                                       | 2 +-
 .../NoticePage.style.ts => alarmPage/AlarmPage.style.ts}    | 0
 .../{noticePage/NoticePage.tsx => alarmPage/AlarmPage.tsx}  | 6 +++---
 src/pages/homePage/mainHeader/MainHeader.tsx                | 2 +-
 src/routes/router.tsx                                       | 6 +++---
 5 files changed, 8 insertions(+), 8 deletions(-)
 rename src/pages/{noticePage/NoticePage.style.ts => alarmPage/AlarmPage.style.ts} (100%)
 rename src/pages/{noticePage/NoticePage.tsx => alarmPage/AlarmPage.tsx} (93%)

diff --git a/src/constants/path.ts b/src/constants/path.ts
index da11c808..41dae19b 100644
--- a/src/constants/path.ts
+++ b/src/constants/path.ts
@@ -1,6 +1,6 @@
 export const PATH = {
   ROOT: "/",
-  NOTICE: "/notice",
+  ALARM: "/alarm",
   SEARCHLIST: "/search",
   SEARCH_FILTER: "/search/filter",
   CREATE_TRIP: "/trip-new",
diff --git a/src/pages/noticePage/NoticePage.style.ts b/src/pages/alarmPage/AlarmPage.style.ts
similarity index 100%
rename from src/pages/noticePage/NoticePage.style.ts
rename to src/pages/alarmPage/AlarmPage.style.ts
diff --git a/src/pages/noticePage/NoticePage.tsx b/src/pages/alarmPage/AlarmPage.tsx
similarity index 93%
rename from src/pages/noticePage/NoticePage.tsx
rename to src/pages/alarmPage/AlarmPage.tsx
index 0f1fcc81..97ffa927 100644
--- a/src/pages/noticePage/NoticePage.tsx
+++ b/src/pages/alarmPage/AlarmPage.tsx
@@ -1,12 +1,12 @@
 import { useState } from "react";
-import * as S from "./NoticePage.style";
+import * as S from "./AlarmPage.style";
 import { useQuery } from "@tanstack/react-query";
 import { fetchAlarm, AlarmProps } from "@apis/fetchAlarm";
 import { format, parseISO } from "date-fns";
 import { fetchUserInfo } from "@apis/fetchUserInfo";
 fetchUserInfo;
 
-const NoticePage = () => {
+const AlarmPage = () => {
   const { data: userData } = useQuery({
     queryKey: ["UserInfo"],
     queryFn: fetchUserInfo,
@@ -46,4 +46,4 @@ const NoticePage = () => {
   );
 };
 
-export default NoticePage;
+export default AlarmPage;
diff --git a/src/pages/homePage/mainHeader/MainHeader.tsx b/src/pages/homePage/mainHeader/MainHeader.tsx
index e1dfd34a..4e9465c4 100644
--- a/src/pages/homePage/mainHeader/MainHeader.tsx
+++ b/src/pages/homePage/mainHeader/MainHeader.tsx
@@ -14,7 +14,7 @@ const MainHeader = () => {
   const navigate = useNavigate();
 
   const alertHandler = () => {
-    navigate(PATH.NOTICE);
+    navigate(PATH.ALARM);
   };
 
   return (
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index a95a11d9..9d52375d 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -26,7 +26,7 @@ import PurchaseDetail from "@/pages/purchaseDetailPage/PurchaseDetail";
 import SearchFilter from "@/pages/searchFilterPage/SearchFilter";
 import TransferWritingPrice from "@/pages/transferWritingPricePage/TransferWritingPrice";
 import LocalErrorBoundary from "@components/errorBoundary/LocalErrorBoundary";
-import Notice from "@pages/noticePage/NoticePage";
+import Alarm from "@pages/alarmPage/AlarmPage";
 import Payment from "@pages/paymentPage/Payment";
 import TransferWritingSuccess from "@/pages/transferWritingSuccessPage/TransferWritingSuccess";
 import PaymentSuccess from "@pages/paymentSuccessPage/PaymentSuccess";
@@ -123,11 +123,11 @@ export const router = createBrowserRouter([
         ),
       },
       {
-        path: PATH.NOTICE,
+        path: PATH.ALARM,
         element: (
           <LocalErrorBoundary>
             <Suspense>
-              <Notice />
+              <Alarm />
             </Suspense>
           </LocalErrorBoundary>
         ),

From c538c3f37672c361f0681a4c503ea12289301046 Mon Sep 17 00:00:00 2001
From: Bumang-Cyber <jove0729@naver.com>
Date: Tue, 23 Jan 2024 13:10:38 +0900
Subject: [PATCH 19/57] =?UTF-8?q?fix:=20=EC=98=A4=ED=83=80=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/header/HeaderTop.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/layout/header/HeaderTop.tsx b/src/components/layout/header/HeaderTop.tsx
index b7da4571..de60cf9a 100644
--- a/src/components/layout/header/HeaderTop.tsx
+++ b/src/components/layout/header/HeaderTop.tsx
@@ -80,7 +80,7 @@ const Header = () => {
       title = "정산계좌 관리";
       undo = true;
       break;
-    case PATH.NOTICE:
+    case PATH.ALARM:
       alarmIC = false;
       settingIC = false;
       title = "알림";

From 90b70ce8180a56fd85ec32b53fde803ec4fa4142 Mon Sep 17 00:00:00 2001
From: Bumang-Cyber <jove0729@naver.com>
Date: Tue, 23 Jan 2024 13:21:13 +0900
Subject: [PATCH 20/57] =?UTF-8?q?fix:=20postTransferItem=20api=EC=97=90=20?=
 =?UTF-8?q?=EC=95=BD=EA=B4=80=20=EC=97=AC=EB=B6=80=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/postTransferItems.ts                             | 8 ++++++++
 .../transferWritingPricePage/TransferWritingPrice.tsx     | 4 ++++
 src/types/postTransferItem.ts                             | 4 ++++
 3 files changed, 16 insertions(+)

diff --git a/src/apis/postTransferItems.ts b/src/apis/postTransferItems.ts
index 11730b0a..020b9071 100644
--- a/src/apis/postTransferItems.ts
+++ b/src/apis/postTransferItems.ts
@@ -11,6 +11,10 @@ export const postTransferItems = async ({
   accountNumber,
   secondGrantPeriod,
   isRegistered,
+  standardTimeSellingPolicy,
+  totalAmountPolicy,
+  sellingModificationPolicy,
+  productAgreement,
 }: PostTransferProps) => {
   const { data } = await axiosInstance.post(END_POINTS.ROOM(pathVariable), {
     firstPrice,
@@ -19,6 +23,10 @@ export const postTransferItems = async ({
     accountNumber,
     secondGrantPeriod,
     isRegistered,
+    standardTimeSellingPolicy,
+    totalAmountPolicy,
+    sellingModificationPolicy,
+    productAgreement,
   });
   return data;
 };
diff --git a/src/pages/transferWritingPricePage/TransferWritingPrice.tsx b/src/pages/transferWritingPricePage/TransferWritingPrice.tsx
index a249b0fd..cd92f923 100644
--- a/src/pages/transferWritingPricePage/TransferWritingPrice.tsx
+++ b/src/pages/transferWritingPricePage/TransferWritingPrice.tsx
@@ -135,6 +135,10 @@ const TransferWritingPrice = () => {
         accountNumber: accountNumber as string,
         secondGrantPeriod: Number(downTimeAfter),
         isRegistered: is2ndChecked,
+        standardTimeSellingPolicy: opt1,
+        totalAmountPolicy: opt2,
+        sellingModificationPolicy: opt3,
+        productAgreement: optFinal,
       }),
     onSuccess: () => {
       alert("판매 게시물이 성공적으로 등록되었습니다!");
diff --git a/src/types/postTransferItem.ts b/src/types/postTransferItem.ts
index 14054ef1..9218cc8a 100644
--- a/src/types/postTransferItem.ts
+++ b/src/types/postTransferItem.ts
@@ -6,4 +6,8 @@ export interface PostTransferProps {
   accountNumber: string;
   secondGrantPeriod: number;
   isRegistered: boolean;
+  standardTimeSellingPolicy: boolean;
+  totalAmountPolicy: boolean;
+  sellingModificationPolicy: boolean;
+  productAgreement: boolean;
 }

From bfa0f589061edc5ecea5fe677e97f274dcb0520c Mon Sep 17 00:00:00 2001
From: Bumang-Cyber <jove0729@naver.com>
Date: Tue, 23 Jan 2024 15:42:53 +0900
Subject: [PATCH 21/57] =?UTF-8?q?refactor:=20api=EC=99=80=20=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/fetchAlarm.ts            | 11 ++---------
 src/apis/fetchHasAlarm.ts         |  7 ++-----
 src/pages/alarmPage/AlarmPage.tsx | 15 ++++++++-------
 src/types/alarm.ts                | 11 +++++++++++
 4 files changed, 23 insertions(+), 21 deletions(-)
 create mode 100644 src/types/alarm.ts

diff --git a/src/apis/fetchAlarm.ts b/src/apis/fetchAlarm.ts
index 64ff8ecf..acdd60fc 100644
--- a/src/apis/fetchAlarm.ts
+++ b/src/apis/fetchAlarm.ts
@@ -1,15 +1,8 @@
 import { END_POINTS } from "@constants/api";
 import { axiosInstance } from "./axiosInstance";
+import { AlarmType } from "@type/alarm";
 
-export interface AlarmProps {
-  id: number;
-  title: string;
-  content: string;
-  date: string;
-  isRead: boolean;
-}
-
-export const fetchAlarm = async (): Promise<AlarmProps[]> => {
+export const fetchAlarm = async (): Promise<AlarmType[]> => {
   const { data } = await axiosInstance.get(END_POINTS.ALARM);
   return data.data;
 };
diff --git a/src/apis/fetchHasAlarm.ts b/src/apis/fetchHasAlarm.ts
index f95cc167..0bffb2a1 100644
--- a/src/apis/fetchHasAlarm.ts
+++ b/src/apis/fetchHasAlarm.ts
@@ -1,11 +1,8 @@
 import { END_POINTS } from "@constants/api";
 import { axiosInstance } from "./axiosInstance";
+import { ReadType } from "@type/alarm";
 
-export interface ReadProps {
-  hasNonReadAlarm: boolean;
-}
-
-export const fetchHasAlarm = async (): Promise<ReadProps> => {
+export const fetchHasAlarm = async (): Promise<ReadType> => {
   const { data } = await axiosInstance.get(END_POINTS.HASALARM);
   return data.data;
 };
diff --git a/src/pages/alarmPage/AlarmPage.tsx b/src/pages/alarmPage/AlarmPage.tsx
index 97ffa927..0b4299d0 100644
--- a/src/pages/alarmPage/AlarmPage.tsx
+++ b/src/pages/alarmPage/AlarmPage.tsx
@@ -1,13 +1,14 @@
 import { useState } from "react";
 import * as S from "./AlarmPage.style";
-import { useQuery } from "@tanstack/react-query";
-import { fetchAlarm, AlarmProps } from "@apis/fetchAlarm";
-import { format, parseISO } from "date-fns";
+import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
+import { fetchAlarm } from "@apis/fetchAlarm";
+import { format } from "date-fns";
 import { fetchUserInfo } from "@apis/fetchUserInfo";
+import { AlarmType } from "@type/alarm";
 fetchUserInfo;
 
 const AlarmPage = () => {
-  const { data: userData } = useQuery({
+  const { data: userData } = useSuspenseQuery({
     queryKey: ["UserInfo"],
     queryFn: fetchUserInfo,
   });
@@ -19,7 +20,7 @@ const AlarmPage = () => {
   });
 
   console.log(alarmData);
-  const [messages] = useState<AlarmProps[] | undefined>(alarmData);
+  const [messages] = useState<AlarmType[] | undefined>(alarmData);
 
   return (
     <S.Container>
@@ -28,7 +29,7 @@ const AlarmPage = () => {
           <S.OldMessage key={item.id}>
             <S.OldMessage>
               <h1>{item.content}</h1>
-              <h3>{format(parseISO(item.date), "yyyy. MM. dd. HH:mm")}</h3>
+              <h3>{format(item.date, "yyyy. MM. dd. HH:mm")}</h3>
             </S.OldMessage>
           </S.OldMessage>
         ) : (
@@ -36,7 +37,7 @@ const AlarmPage = () => {
             <h1>{item.content}</h1>
             <div>
               {!item.isRead && <section />}
-              <h3>{format(parseISO(item.date), "yyyy. MM. dd. HH:mm")}</h3>
+              <h3>{format(item.date, "yyyy. MM. dd. HH:mm")}</h3>
             </div>
           </S.NewMessage>
         ),
diff --git a/src/types/alarm.ts b/src/types/alarm.ts
new file mode 100644
index 00000000..c2f88cd2
--- /dev/null
+++ b/src/types/alarm.ts
@@ -0,0 +1,11 @@
+export interface AlarmType {
+  id: number;
+  title: string;
+  content: string;
+  date: string;
+  isRead: boolean;
+}
+
+export interface ReadType {
+  hasNonReadAlarm: boolean;
+}

From 729f904e90c55d68fc37a82f97da49b4b28cbc81 Mon Sep 17 00:00:00 2001
From: Bumang-Cyber <jove0729@naver.com>
Date: Tue, 23 Jan 2024 16:49:08 +0900
Subject: [PATCH 22/57] =?UTF-8?q?fix:=20ParseISO=EB=A5=BC=20=ED=86=B5?=
 =?UTF-8?q?=ED=95=98=EC=97=AC=20string=20->=20date=20=ED=83=80=EC=9E=85=20?=
 =?UTF-8?q?=EB=B3=80=ED=99=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/alarmPage/AlarmPage.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/pages/alarmPage/AlarmPage.tsx b/src/pages/alarmPage/AlarmPage.tsx
index 0b4299d0..bb294ba1 100644
--- a/src/pages/alarmPage/AlarmPage.tsx
+++ b/src/pages/alarmPage/AlarmPage.tsx
@@ -2,10 +2,9 @@ import { useState } from "react";
 import * as S from "./AlarmPage.style";
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 import { fetchAlarm } from "@apis/fetchAlarm";
-import { format } from "date-fns";
+import { format, parseISO } from "date-fns";
 import { fetchUserInfo } from "@apis/fetchUserInfo";
 import { AlarmType } from "@type/alarm";
-fetchUserInfo;
 
 const AlarmPage = () => {
   const { data: userData } = useSuspenseQuery({
@@ -29,7 +28,7 @@ const AlarmPage = () => {
           <S.OldMessage key={item.id}>
             <S.OldMessage>
               <h1>{item.content}</h1>
-              <h3>{format(item.date, "yyyy. MM. dd. HH:mm")}</h3>
+              <h3>{format(parseISO(item.date), "yyyy. MM. dd. HH:mm")}</h3>
             </S.OldMessage>
           </S.OldMessage>
         ) : (
@@ -37,7 +36,7 @@ const AlarmPage = () => {
             <h1>{item.content}</h1>
             <div>
               {!item.isRead && <section />}
-              <h3>{format(item.date, "yyyy. MM. dd. HH:mm")}</h3>
+              <h3>{format(parseISO(item.date), "yyyy. MM. dd. HH:mm")}</h3>
             </div>
           </S.NewMessage>
         ),

From 2b0d173f12fc8c62992f0d959f7a4cca8fc626d6 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Tue, 23 Jan 2024 17:04:34 +0900
Subject: [PATCH 23/57] =?UTF-8?q?fix:=20Gobal=20Suspense=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.tsx | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/main.tsx b/src/main.tsx
index 857ae0d2..b2fe260a 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,9 @@
-import React, { Suspense } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import ReactDOM from "react-dom/client";
 import { RouterProvider } from "react-router-dom";
 import { ThemeProvider } from "styled-components";
-import { worker } from "./mocks/broswer.ts";
+import { worker } from "./mocks/broswer";
 import { router } from "./routes/router";
 import { GlobalStyle } from "./styles/globalStyle";
 import { theme } from "./styles/theme";
@@ -15,15 +14,11 @@ if (process.env.NODE_ENV === "development") {
 }
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <ThemeProvider theme={theme}>
-        <GlobalStyle />
-        <Suspense fallback={<div>{/* Global Loading... */}</div>}>
-          <RouterProvider router={router} />
-        </Suspense>
-      </ThemeProvider>
-      <ReactQueryDevtools initialIsOpen={false} />
-    </QueryClientProvider>
-  </React.StrictMode>,
+  <QueryClientProvider client={queryClient}>
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      <RouterProvider router={router} />
+    </ThemeProvider>
+    <ReactQueryDevtools initialIsOpen={false} />
+  </QueryClientProvider>,
 );

From 38633316d931a53be306809a17db4dc9c4b4491c Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Tue, 23 Jan 2024 17:04:58 +0900
Subject: [PATCH 24/57] =?UTF-8?q?refactor:=20=EB=9D=BC=EC=9A=B0=ED=84=B0?=
 =?UTF-8?q?=20=EA=B5=AC=EC=A1=B0=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index da781463..b3f6fb02 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -162,11 +162,11 @@ export const router = createBrowserRouter([
         element: <Outlet />,
         children: [
           {
-            index: true,
+            path: ":productId",
             element: <Payment />,
           },
           {
-            path: "success",
+            path: "success/:productId",
             element: <PaymentSuccess />,
           },
         ],

From 7a0f28988fb849c342e87952d638fedc35e02e7b Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Tue, 23 Jan 2024 17:05:29 +0900
Subject: [PATCH 25/57] =?UTF-8?q?fix:=20room=20=ED=83=80=EC=9E=85=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/fetchRoom.ts               | 8 ++++++--
 src/mocks/data/dummyRoomDetail.json | 3 ++-
 src/types/room.ts                   | 5 +++--
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/apis/fetchRoom.ts b/src/apis/fetchRoom.ts
index 5afe5a57..c4ee6b71 100644
--- a/src/apis/fetchRoom.ts
+++ b/src/apis/fetchRoom.ts
@@ -1,7 +1,11 @@
 import { axiosInstance } from "@apis/axiosInstance";
 import { END_POINTS } from "@constants/api";
+import type { ResponseData } from "@type/responseType";
+import type { RoomData } from "@type/room";
 
-export const getRoom = async (roomId: string) => {
-  const { data } = await axiosInstance.get(END_POINTS.ROOM(roomId));
+export const getRoom = async (roomId: string): Promise<RoomData> => {
+  const { data } = await axiosInstance.get<ResponseData<RoomData>>(
+    END_POINTS.ROOM(roomId),
+  );
   return data.data;
 };
diff --git a/src/mocks/data/dummyRoomDetail.json b/src/mocks/data/dummyRoomDetail.json
index 23e03027..263b10e7 100644
--- a/src/mocks/data/dummyRoomDetail.json
+++ b/src/mocks/data/dummyRoomDetail.json
@@ -21,7 +21,8 @@
     },
     "hotelAddress": "서울특별시 강남구 테헤란로 99길 9",
     "hotelInfoUrl": "https://place-site.yanolja.com/places/3001615",
-    "saleStatus": false
+    "saleStatus": false,
+    "isSeller": true
   },
   "message": "상품 조회에 성공했습니다."
 }
diff --git a/src/types/room.ts b/src/types/room.ts
index 5616a5bb..947a7722 100644
--- a/src/types/room.ts
+++ b/src/types/room.ts
@@ -1,7 +1,7 @@
 export type RoomData = {
   hotelName: string;
   roomName: string;
-  hotelImageUrl: string[];
+  hotelImageUrlList: string[];
   checkIn: string;
   checkOut: string;
   originalPrice: number;
@@ -13,6 +13,7 @@ export type RoomData = {
   hotelAddress: string;
   hotelInfoUrl: string;
   saleStatus: boolean;
+  isSeller: boolean;
 };
 type RoomTheme = {
   parkingZone: boolean;
@@ -23,5 +24,5 @@ type RoomTheme = {
 
 export type RoomNavBarData = Pick<
   RoomData,
-  "originalPrice" | "sellingPrice" | "saleStatus"
+  "originalPrice" | "sellingPrice" | "saleStatus" | "isSeller"
 >;

From 4671ad4f76c6a3e5b8cdba43bc5a32cffd999c8d Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Tue, 23 Jan 2024 17:05:44 +0900
Subject: [PATCH 26/57] =?UTF-8?q?fix:=20=EC=BA=90=EB=A1=9C=EC=85=80=20widt?=
 =?UTF-8?q?h=20=EA=B0=92=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/carousel/Carousel.style.ts | 2 --
 src/components/carousel/Carousel.tsx      | 4 +---
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/carousel/Carousel.style.ts b/src/components/carousel/Carousel.style.ts
index 0820b746..3595b001 100644
--- a/src/components/carousel/Carousel.style.ts
+++ b/src/components/carousel/Carousel.style.ts
@@ -3,11 +3,9 @@ import styled, { css } from "styled-components";
 
 export const CarouselContainer = styled.div<{
   $height: number;
-  $width: number;
 }>`
   position: relative;
 
-  width: ${(props) => `${props.$width}px`};
   min-height: ${(props) => `${props.$height}px`};
   height: ${(props) => `${props.$height}px`};
 
diff --git a/src/components/carousel/Carousel.tsx b/src/components/carousel/Carousel.tsx
index 61ea6f3c..f7d102e5 100644
--- a/src/components/carousel/Carousel.tsx
+++ b/src/components/carousel/Carousel.tsx
@@ -4,7 +4,6 @@ import * as S from "./Carousel.style.ts";
 
 interface CarouselProps {
   images: string[];
-  width?: number;
   height?: number;
   arrows?: boolean;
   infinite?: boolean;
@@ -14,7 +13,6 @@ interface CarouselProps {
 
 const Carousel = ({
   height = 300,
-  width = 300,
   images,
   arrows = true,
   infinite = false,
@@ -41,7 +39,7 @@ const Carousel = ({
   });
 
   return (
-    <S.CarouselContainer $height={height} $width={width}>
+    <S.CarouselContainer $height={height}>
       <S.SliderWrapper>
         <S.SliderContainer
           ref={sliderRef}

From 6ce5eb21fcabd32cb670e092501ac483b5dbd4b5 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Tue, 23 Jan 2024 17:06:34 +0900
Subject: [PATCH 27/57] =?UTF-8?q?refactor:=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=A1=B0=ED=9A=8C=20=EC=BF=BC?=
 =?UTF-8?q?=EB=A6=AC=20=ED=9B=85=EC=9C=BC=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/api/useRoomQuery.ts | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/hooks/api/useRoomQuery.ts

diff --git a/src/hooks/api/useRoomQuery.ts b/src/hooks/api/useRoomQuery.ts
new file mode 100644
index 00000000..a846728c
--- /dev/null
+++ b/src/hooks/api/useRoomQuery.ts
@@ -0,0 +1,28 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { getRoom } from "@apis/fetchRoom";
+import { calculateDiscount } from "@utils/calculator";
+
+import type { RoomData } from "@type/room";
+import type { AxiosError } from "axios";
+
+interface RoomQueryData {
+  rawData: RoomData;
+  discountRate: string;
+}
+
+export const useRoomQuery = (roomId: string) => {
+  return useSuspenseQuery<RoomData, AxiosError, RoomQueryData>({
+    queryKey: ["room", roomId],
+    queryFn: () => getRoom(roomId),
+    select: (data) => {
+      const discountRate = calculateDiscount(
+        data.originalPrice,
+        data.sellingPrice,
+      );
+      return {
+        rawData: data,
+        discountRate,
+      };
+    },
+  });
+};

From 882ae3d9473d688269e38b316702eb383eb7ab3c Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Tue, 23 Jan 2024 17:07:53 +0900
Subject: [PATCH 28/57] =?UTF-8?q?refactor:=20=EA=B2=B0=EC=A0=9C=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20Params=EB=A1=9C=20product=20id=20?=
 =?UTF-8?q?=EA=B0=80=EC=A0=B8=EC=98=A4=EB=8F=84=EB=A1=9D=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/paymentPage/Payment.tsx                      | 10 +++++-----
 .../components/paymentButton/PaymentButton.tsx         |  7 +++----
 src/pages/paymentSuccessPage/PaymentSuccess.tsx        | 10 +++++-----
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/pages/paymentPage/Payment.tsx b/src/pages/paymentPage/Payment.tsx
index 26d81629..1d762265 100644
--- a/src/pages/paymentPage/Payment.tsx
+++ b/src/pages/paymentPage/Payment.tsx
@@ -4,17 +4,17 @@ import PaymentMethodSection from "@/pages/paymentPage/components/paymentMethodSe
 import TermsAgreementSection from "@/pages/paymentPage/components/termsAgreementSection/TermsAgreementSection";
 import UserInfoSection from "@/pages/paymentPage/components/userInfoSection/UserInfoSection";
 import { usePaymentQuery } from "@hooks/api/query/usePaymentQuery";
-import { useSearchParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import PaymentButton from "./components/paymentButton/PaymentButton";
 
 import { FormProvider, useForm } from "react-hook-form";
 import Caption from "@components/caption/Caption";
 
 const Payment = () => {
-  const [searchParams] = useSearchParams();
-  const product = searchParams.get("product") ?? "";
+  const { productId } = useParams();
+  if (!productId) throw Error("존재하지 않는 productId 입니다.");
 
-  const { data } = usePaymentQuery(product);
+  const { data } = usePaymentQuery(productId);
 
   const methods = useForm({
     mode: "onChange",
@@ -47,7 +47,7 @@ const Payment = () => {
           </Caption>
         </S.CaptionWrapper>
         <S.BottomWrapper>
-          <PaymentButton productId={product} payment={data} />
+          <PaymentButton productId={productId} price={data.salePrice} />
         </S.BottomWrapper>
       </FormProvider>
     </S.PaymentContainer>
diff --git a/src/pages/paymentPage/components/paymentButton/PaymentButton.tsx b/src/pages/paymentPage/components/paymentButton/PaymentButton.tsx
index 6f968af7..b90473d5 100644
--- a/src/pages/paymentPage/components/paymentButton/PaymentButton.tsx
+++ b/src/pages/paymentPage/components/paymentButton/PaymentButton.tsx
@@ -2,14 +2,13 @@ import { useFormContext } from "react-hook-form";
 import { usePaymentMutation } from "@hooks/api/mutation/usePaymentMutation";
 
 import * as S from "./PaymentButton.style";
-import type { PaymentData } from "@type/payment";
 
 interface PaymentButtonProps {
   productId: string;
-  payment: Pick<PaymentData, "salePrice">;
+  price: number;
 }
 
-const PaymentButton = ({ productId, payment }: PaymentButtonProps) => {
+const PaymentButton = ({ productId, price }: PaymentButtonProps) => {
   const {
     handleSubmit,
     getValues,
@@ -55,7 +54,7 @@ const PaymentButton = ({ productId, payment }: PaymentButtonProps) => {
       data-disabled={isValid ? null : ""}
       aria-label="결제하기"
     >
-      {payment.salePrice.toLocaleString("ko-KR")}원 결제하기
+      {price.toLocaleString("ko-KR")}원 결제하기
     </S.Button>
   );
 };
diff --git a/src/pages/paymentSuccessPage/PaymentSuccess.tsx b/src/pages/paymentSuccessPage/PaymentSuccess.tsx
index 93a52337..9f0667a0 100644
--- a/src/pages/paymentSuccessPage/PaymentSuccess.tsx
+++ b/src/pages/paymentSuccessPage/PaymentSuccess.tsx
@@ -1,4 +1,4 @@
-import { useSearchParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { usePurchaseDetailQuery } from "@hooks/api/query/usePurchaseQuery";
 
 import PaymentSuccessInfo from "@pages/paymentSuccessPage/components/PaymentSuccessInfo/PaymentSuccessInfo";
@@ -9,10 +9,10 @@ import CardItem from "@components/cardItem/CardItem";
 import * as S from "./PaymentSuccess.style";
 
 const PaymentSuccess = () => {
-  const [searchParams] = useSearchParams();
-  const product = searchParams.get("product") ?? "";
+  const { productId } = useParams();
+  if (!productId) throw Error("존재하지 않는 productId 입니다.");
 
-  const { data } = usePurchaseDetailQuery(product);
+  const { data } = usePurchaseDetailQuery(productId);
 
   return (
     <S.PurchasedContainer>
@@ -63,7 +63,7 @@ const PaymentSuccess = () => {
         </S.BottomCardWrapper>
       </S.PurchasedWrapper>
       <S.BottomWrapper>
-        <PaymentSuccessButton productId={product} />
+        <PaymentSuccessButton productId={productId} />
       </S.BottomWrapper>
     </S.PurchasedContainer>
   );

From 10ac7a9cd44774bc28aade50939e84e1bda602c9 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Tue, 23 Jan 2024 17:08:18 +0900
Subject: [PATCH 29/57] =?UTF-8?q?design:=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20fixed=EB=A1=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/toast/Toast.style.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/toast/Toast.style.ts b/src/components/toast/Toast.style.ts
index da782af1..74c1b9a4 100644
--- a/src/components/toast/Toast.style.ts
+++ b/src/components/toast/Toast.style.ts
@@ -16,7 +16,7 @@ export const ToastContainer = styled(motion.div)<{ $isError: boolean }>`
   justify-content: center;
   align-items: center;
 
-  position: absolute;
+  position: fixed;
   left: 0;
   right: 0;
   top: 80px;

From edaae88b3d9c413d61cc809a2021a3387c5aa845 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Tue, 23 Jan 2024 17:09:00 +0900
Subject: [PATCH 30/57] =?UTF-8?q?fix:=20=EC=9D=B4=EB=A9=94=EC=9D=BC=20?=
 =?UTF-8?q?=ED=99=95=EC=9D=B8=EC=9A=94=EC=B2=AD=20=ED=9B=85=20throwOnError?=
 =?UTF-8?q?=EC=97=90=20=EC=A1=B0=EA=B1=B4=20=EA=B1=B8=EC=96=B4=EC=84=9C=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=20=EB=8D=98=EC=A7=80=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/api/mutation/useValidateEmailMutation.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/hooks/api/mutation/useValidateEmailMutation.ts b/src/hooks/api/mutation/useValidateEmailMutation.ts
index 8bebda67..5d11f5db 100644
--- a/src/hooks/api/mutation/useValidateEmailMutation.ts
+++ b/src/hooks/api/mutation/useValidateEmailMutation.ts
@@ -1,10 +1,13 @@
 import { postValidateEmail } from "@apis/fetchLogin";
 import { useMutation } from "@tanstack/react-query";
+import { isAxiosError } from "axios";
 
 export const useValidateEmailMutation = () => {
   const validateEmailMutation = useMutation({
     mutationFn: ({ email }: { email: string }) => postValidateEmail(email),
-    throwOnError: true,
+    throwOnError: (error) => {
+      return !(isAxiosError(error) && error.response);
+    },
   });
 
   return validateEmailMutation;

From c4923e9445f8f89c0116a62f59a99724cef9aaa4 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Tue, 23 Jan 2024 17:09:20 +0900
Subject: [PATCH 31/57] =?UTF-8?q?design:=20=EC=B2=B4=ED=81=AC=EB=B0=95?=
 =?UTF-8?q?=EC=8A=A4=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/checkbox/Checkbox.style.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/checkbox/Checkbox.style.ts b/src/components/checkbox/Checkbox.style.ts
index 81958ef4..b7b1d892 100644
--- a/src/components/checkbox/Checkbox.style.ts
+++ b/src/components/checkbox/Checkbox.style.ts
@@ -1,4 +1,4 @@
-import styled, { DefaultTheme } from "styled-components";
+import styled, { DefaultTheme, css } from "styled-components";
 
 export interface CheckboxStyleProps {
   size?: "sm" | "md" | "lg";
@@ -117,11 +117,11 @@ export const StyledCheckbox = styled.span<CheckboxStyleProps>`
 `;
 
 const labelStyles = {
-  title: (theme: DefaultTheme) => `
+  title: (theme: DefaultTheme) => css`
     color: ${theme.color.greyScale1};
     }
   `,
-  caption: (theme: DefaultTheme) => `
+  caption: (theme: DefaultTheme) => css`
     color: ${theme.color.greyScale3};
     }
   `,
@@ -140,8 +140,6 @@ export const LabelText = styled.span.withConfig({
 
   ${({ theme }) => theme.typo.caption1}
 
-  ${({ variant, theme }) => variant && labelStyles[variant](theme)};
-
   margin-inline-start: 0.5rem;
   user-select: none;
 
@@ -150,4 +148,6 @@ export const LabelText = styled.span.withConfig({
     text-underline-offset: 2px;
     color: inherit;
   }
+
+  ${({ variant, theme }) => variant && labelStyles[variant](theme)};
 `;

From 251e62861e227085a3ff27f8d616a827d8e49384 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Tue, 23 Jan 2024 17:09:44 +0900
Subject: [PATCH 32/57] =?UTF-8?q?feat:=20=EC=83=81=EC=84=B8=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B5=AC=EB=A7=A4=EC=97=B0=EA=B2=B0,=20?=
 =?UTF-8?q?=ED=97=A4=EB=8D=94=20=EB=92=A4=EB=A1=9C=EA=B0=80=EA=B8=B0=20?=
 =?UTF-8?q?=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/roomDetailPage/RoomDetail.tsx       | 32 ++++++++++-------
 .../components/roomHeader/RoomHeader.style.ts | 13 ++++---
 .../components/roomHeader/RoomHeader.tsx      | 13 +++++--
 .../components/roomInfo/RoomInfo.tsx          | 11 +++---
 .../components/roomNavBar/RoomNavBar.style.ts |  3 +-
 .../components/roomNavBar/RoomNavBar.tsx      | 35 +++++++++++++++----
 6 files changed, 72 insertions(+), 35 deletions(-)

diff --git a/src/pages/roomDetailPage/RoomDetail.tsx b/src/pages/roomDetailPage/RoomDetail.tsx
index ffdc7931..de7b00f0 100644
--- a/src/pages/roomDetailPage/RoomDetail.tsx
+++ b/src/pages/roomDetailPage/RoomDetail.tsx
@@ -1,38 +1,44 @@
-import { getRoom } from "@apis/fetchRoom";
-
 import Carousel from "@components/carousel/Carousel";
 import RoomHeader from "@pages/roomDetailPage/components/roomHeader/RoomHeader";
 import RoomInfo from "@pages/roomDetailPage/components/roomInfo/RoomInfo";
 import RoomNavBar from "@pages/roomDetailPage/components/roomNavBar/RoomNavBar";
-import { useSuspenseQuery } from "@tanstack/react-query";
-import type { RoomData } from "@type/room";
-import type { AxiosError } from "axios";
+
+import useToastConfig from "@hooks/common/useToastConfig";
+import { useRoomQuery } from "@hooks/api/useRoomQuery";
 import { useParams } from "react-router-dom";
 
 import * as S from "./RoomDetail.style";
+import { useEffect } from "react";
 
 const RoomDetail = () => {
   const { roomId } = useParams();
   if (!roomId) throw new Error("존재하지 않는 roomId 입니다.");
 
-  const { data } = useSuspenseQuery<RoomData, AxiosError>({
-    queryKey: ["room"],
-    queryFn: () => getRoom(roomId),
-  });
+  const { data } = useRoomQuery(roomId);
+  const { rawData, discountRate } = data;
+
+  const { handleToast } = useToastConfig();
+
+  useEffect(() => {
+    if (rawData.isSeller) {
+      handleToast(false, ["내가 판매 중인 상품입니다"]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rawData.isSeller]);
 
   return (
     <S.Container>
-      <RoomHeader title={data.hotelName} />
+      <RoomHeader title={rawData.hotelName} />
       <Carousel
-        images={data.hotelImageUrl}
+        images={rawData.hotelImageUrlList}
         height={300}
         arrows={true}
         infinite={false}
         innerShadow={true}
         draggable={true}
       />
-      <RoomInfo room={data} />
-      <RoomNavBar room={data} />
+      <RoomInfo room={rawData} discount={discountRate} />
+      <RoomNavBar room={rawData} discount={discountRate} roomId={roomId} />
     </S.Container>
   );
 };
diff --git a/src/pages/roomDetailPage/components/roomHeader/RoomHeader.style.ts b/src/pages/roomDetailPage/components/roomHeader/RoomHeader.style.ts
index a86be054..5471ab90 100644
--- a/src/pages/roomDetailPage/components/roomHeader/RoomHeader.style.ts
+++ b/src/pages/roomDetailPage/components/roomHeader/RoomHeader.style.ts
@@ -8,22 +8,25 @@ export const ScrollObserver = styled.div`
 `;
 
 export const HeaderContainer = styled.header<{ $visible: boolean }>`
-  display: flex;
-  align-items: center;
   position: fixed;
   top: 0;
+
+  display: flex;
+  align-items: center;
   width: 100%;
   max-width: 768px;
   height: 56px;
-  z-index: 2;
+
   background-color: ${({ $visible, theme }) =>
-    $visible ? "unset" : theme.color.white};
+    $visible ? "transparent" : theme.color.white};
   border-bottom: ${({ $visible, theme }) =>
-    $visible ? "none" : `1px solid ${theme.color.greyScale7}`};
+    $visible ? "0" : `1px solid ${theme.color.greyScale7}`};
 
   transition:
     border-bottom,
     background-color 0.5s ease-in;
+
+  z-index: 2;
 `;
 
 export const Wrapper = styled.div`
diff --git a/src/pages/roomDetailPage/components/roomHeader/RoomHeader.tsx b/src/pages/roomDetailPage/components/roomHeader/RoomHeader.tsx
index 02413f20..7bea78ee 100644
--- a/src/pages/roomDetailPage/components/roomHeader/RoomHeader.tsx
+++ b/src/pages/roomDetailPage/components/roomHeader/RoomHeader.tsx
@@ -1,5 +1,7 @@
 import useIsVisible from "@hooks/common/useIsVisible";
+
 import * as S from "./RoomHeader.style";
+import { useNavigate } from "react-router-dom";
 
 interface RoomHeaderProps {
   title: string;
@@ -11,15 +13,22 @@ const RoomHeader = ({ title }: RoomHeaderProps) => {
       rootMargin: "0px",
       threshold: 1.0,
     },
-    initialVisible: false,
+    initialVisible: true,
   });
 
+  const navigate = useNavigate();
+
   return (
     <>
       <S.HeaderContainer $visible={isVisible}>
         <S.Wrapper>
           <div className="wrap-left">
-            <button type="button" className="btn-back" aria-label="뒤로가기">
+            <button
+              type="button"
+              className="btn-back"
+              aria-label="뒤로가기"
+              onClick={() => navigate(-1)}
+            >
               <S.BackIcon $visible={isVisible} />
             </button>
           </div>
diff --git a/src/pages/roomDetailPage/components/roomInfo/RoomInfo.tsx b/src/pages/roomDetailPage/components/roomInfo/RoomInfo.tsx
index 03cb040f..199e38e5 100644
--- a/src/pages/roomDetailPage/components/roomInfo/RoomInfo.tsx
+++ b/src/pages/roomDetailPage/components/roomInfo/RoomInfo.tsx
@@ -1,19 +1,18 @@
 import RoomThemeOption from "@pages/roomDetailPage/components/roomThemeOption/RoomThemeOption";
-import * as S from "@pages/roomDetailPage/RoomDetail.style";
 import type { RoomData } from "@type/room";
-import { calculateDiscount } from "@utils/calculator";
 import { formatDate } from "@utils/dateFormatter";
 import IconBed from "@assets/icons/ic_bed.svg?react";
 import IconCaretRight from "@assets/icons/ic_caret_right.svg?react";
 import IconUser from "@assets/icons/ic_users.svg?react";
 
+import * as S from "@pages/roomDetailPage/RoomDetail.style";
+
 interface RoomInfoProps {
   room: RoomData;
+  discount: string;
 }
 
-const RoomInfo = ({ room }: RoomInfoProps) => {
-  const discountRate = calculateDiscount(room.originalPrice, room.sellingPrice);
-
+const RoomInfo = ({ room, discount }: RoomInfoProps) => {
   const checkInDate = formatDate(room.checkIn);
   const checkOutDate = formatDate(room.checkOut);
   return (
@@ -35,7 +34,7 @@ const RoomInfo = ({ room }: RoomInfoProps) => {
               <S.Text>판매가</S.Text>
               <S.Row>
                 <S.Text variant="title2" color="percentBlue">
-                  {discountRate}%
+                  {discount}%
                 </S.Text>
                 <S.Text variant="title2">
                   {room.sellingPrice.toLocaleString()}원
diff --git a/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.style.ts b/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.style.ts
index 6d56ed74..b895cc6b 100644
--- a/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.style.ts
+++ b/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.style.ts
@@ -33,7 +33,6 @@ export const Row2 = styled(Flex)`
   gap: 0.5rem;
 `;
 
-// FIXME: Button 컴포넌트 만들기
 export const Button = styled.button<{ $status: boolean }>`
   ${({ theme }) => theme.typo.button2}
   padding: 0.7rem 3rem;
@@ -41,7 +40,7 @@ export const Button = styled.button<{ $status: boolean }>`
   border-radius: 8px;
   background-color: ${({ $status, theme }) =>
     $status ? theme.color.percentOrange : theme.color.greyScale5};
-  transition: background-color 0.5s ease-in;
+  transition: background-color 0.2s ease-in;
 
   &:hover {
     background-color: ${({ $status, theme }) =>
diff --git a/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.tsx b/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.tsx
index 831d2dc5..59ddd833 100644
--- a/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.tsx
+++ b/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.tsx
@@ -1,14 +1,30 @@
-import { RoomNavBarData } from "@type/room";
-import { calculateDiscount } from "@utils/calculator";
+import { useNavigate } from "react-router-dom";
+import type { RoomNavBarData } from "@type/room";
+import { PATH } from "@constants/path";
+import useToastConfig from "@hooks/common/useToastConfig";
+
 import * as S from "./RoomNavBar.style";
 
 interface RoomNavBarProps {
   room: RoomNavBarData;
+  roomId: string;
+  discount: string;
 }
 
-const RoomNavBar = ({ room }: RoomNavBarProps) => {
-  // FIXME: 패칭 후 가공단계에서 할인율 계산
-  const discountRate = calculateDiscount(room.originalPrice, room.sellingPrice);
+const RoomNavBar = ({ room, roomId, discount }: RoomNavBarProps) => {
+  const navigate = useNavigate();
+  const { handleToast } = useToastConfig();
+
+  const handlePurchaseClick = () => {
+    if (room.isSeller) {
+      handleToast(true, [<>내가 판매하는 상품은 구매가 불가합니다</>]);
+      return;
+    } else if (!room.saleStatus) {
+      return;
+    }
+
+    navigate(`${PATH.PAYMENT}/${roomId}`);
+  };
 
   return (
     <S.Wrapper>
@@ -18,14 +34,19 @@ const RoomNavBar = ({ room }: RoomNavBarProps) => {
         </S.Text>
         <S.Row2>
           <S.Text variant="title2" color="percentBlue">
-            {discountRate}%
+            {discount}%
           </S.Text>
           <S.Text variant="title2">
             {room.sellingPrice.toLocaleString()}원
           </S.Text>
         </S.Row2>
       </S.ColWrapper>
-      <S.Button $status={room.saleStatus} aria-label="구매하기">
+      <S.Button
+        type="button"
+        $status={room.saleStatus}
+        aria-label="구매하기"
+        onClick={handlePurchaseClick}
+      >
         구매하기
       </S.Button>
     </S.Wrapper>

From a51184aa3b888d79275032781dab49676c6ac115 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Tue, 23 Jan 2024 17:10:32 +0900
Subject: [PATCH 33/57] =?UTF-8?q?fix:=20useIsVisible=20=ED=9B=85=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20isVisible=EC=83=81=ED=83=9C=EA=B0=80=20=EB=B0=94?=
 =?UTF-8?q?=EB=80=94=20=EB=95=8C=EB=A7=8C=20observer=EA=B0=80=20=ED=99=9C?=
 =?UTF-8?q?=EC=84=B1=ED=99=94=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/common/useIsVisible.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/hooks/common/useIsVisible.ts b/src/hooks/common/useIsVisible.ts
index f0d6a7a5..582ebfb9 100644
--- a/src/hooks/common/useIsVisible.ts
+++ b/src/hooks/common/useIsVisible.ts
@@ -17,12 +17,13 @@ const useIsVisible = (props: UseIsVisibleProps): UseIsVisibleReturnType => {
 
   useEffect(() => {
     const observer = new IntersectionObserver(([entry]) => {
-      setIsVisible(entry.isIntersecting);
+      if (entry.isIntersecting !== isVisible) {
+        setIsVisible(entry.isIntersecting);
+      }
     }, options);
 
     if (visibleRef) {
       observer.observe(visibleRef);
-      return;
     }
 
     return () => {
@@ -30,7 +31,7 @@ const useIsVisible = (props: UseIsVisibleProps): UseIsVisibleReturnType => {
         observer.unobserve(visibleRef);
       }
     };
-  }, [options, visibleRef]);
+  }, [options, visibleRef, isVisible]);
 
   const setRefCallback: RefCallback<HTMLDivElement> = (node) => {
     setVisibleRef(node);

From 2e3299bd7af864982646d44139c3febfc3244663 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Wed, 10 Jan 2024 11:43:29 +0900
Subject: [PATCH 34/57] =?UTF-8?q?refactor:=20rel=3D"noopener"=20=EC=86=8D?=
 =?UTF-8?q?=EC=84=B1=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/roomDetailPage/components/roomInfo/RoomInfo.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/roomDetailPage/components/roomInfo/RoomInfo.tsx b/src/pages/roomDetailPage/components/roomInfo/RoomInfo.tsx
index 6d8d2763..03cb040f 100644
--- a/src/pages/roomDetailPage/components/roomInfo/RoomInfo.tsx
+++ b/src/pages/roomDetailPage/components/roomInfo/RoomInfo.tsx
@@ -88,6 +88,7 @@ const RoomInfo = ({ room }: RoomInfoProps) => {
           <a
             href={room.hotelInfoUrl}
             target="_blank"
+            rel="noopener"
             aria-label="상세 정보 보기"
           >
             <S.MoreInfoWrapper>

From 3c699267c684b5dfa5e70dceb9ddb77ea1d6479b Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Fri, 12 Jan 2024 15:33:08 +0900
Subject: [PATCH 35/57] =?UTF-8?q?design:=20=EC=83=81=ED=92=88=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=83=80=EC=9D=B4?=
 =?UTF-8?q?=ED=8B=80=20=EB=A7=90=EC=A4=84=EC=9E=84=ED=91=9C=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../roomDetailPage/components/roomHeader/RoomHeader.style.ts     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/roomDetailPage/components/roomHeader/RoomHeader.style.ts b/src/pages/roomDetailPage/components/roomHeader/RoomHeader.style.ts
index e850c2bb..a86be054 100644
--- a/src/pages/roomDetailPage/components/roomHeader/RoomHeader.style.ts
+++ b/src/pages/roomDetailPage/components/roomHeader/RoomHeader.style.ts
@@ -61,6 +61,7 @@ export const TitleWrapper = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
   text-align: center;
+  width: 100%;
 `;
 
 export const Title = styled.p<{ $visible: boolean }>`

From 7d56f64e82591e3575f2c40b83d8bacb0fc30524 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Tue, 23 Jan 2024 17:04:34 +0900
Subject: [PATCH 36/57] =?UTF-8?q?fix:=20Gobal=20Suspense=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.tsx | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/main.tsx b/src/main.tsx
index 857ae0d2..b2fe260a 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,9 @@
-import React, { Suspense } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import ReactDOM from "react-dom/client";
 import { RouterProvider } from "react-router-dom";
 import { ThemeProvider } from "styled-components";
-import { worker } from "./mocks/broswer.ts";
+import { worker } from "./mocks/broswer";
 import { router } from "./routes/router";
 import { GlobalStyle } from "./styles/globalStyle";
 import { theme } from "./styles/theme";
@@ -15,15 +14,11 @@ if (process.env.NODE_ENV === "development") {
 }
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <ThemeProvider theme={theme}>
-        <GlobalStyle />
-        <Suspense fallback={<div>{/* Global Loading... */}</div>}>
-          <RouterProvider router={router} />
-        </Suspense>
-      </ThemeProvider>
-      <ReactQueryDevtools initialIsOpen={false} />
-    </QueryClientProvider>
-  </React.StrictMode>,
+  <QueryClientProvider client={queryClient}>
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      <RouterProvider router={router} />
+    </ThemeProvider>
+    <ReactQueryDevtools initialIsOpen={false} />
+  </QueryClientProvider>,
 );

From ddf17344bd56915589a649408d9bface477c672f Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Tue, 23 Jan 2024 17:04:58 +0900
Subject: [PATCH 37/57] =?UTF-8?q?refactor:=20=EB=9D=BC=EC=9A=B0=ED=84=B0?=
 =?UTF-8?q?=20=EA=B5=AC=EC=A1=B0=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index f49438f3..bc06de3d 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -180,11 +180,11 @@ export const router = createBrowserRouter([
         ),
         children: [
           {
-            index: true,
+            path: ":productId",
             element: <Payment />,
           },
           {
-            path: "success",
+            path: "success/:productId",
             element: <PaymentSuccess />,
           },
         ],

From 71b182777bb09b66d142eb225a4f508b204725d8 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Tue, 23 Jan 2024 17:05:29 +0900
Subject: [PATCH 38/57] =?UTF-8?q?fix:=20room=20=ED=83=80=EC=9E=85=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/fetchRoom.ts               | 8 ++++++--
 src/mocks/data/dummyRoomDetail.json | 3 ++-
 src/types/room.ts                   | 5 +++--
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/apis/fetchRoom.ts b/src/apis/fetchRoom.ts
index 5afe5a57..c4ee6b71 100644
--- a/src/apis/fetchRoom.ts
+++ b/src/apis/fetchRoom.ts
@@ -1,7 +1,11 @@
 import { axiosInstance } from "@apis/axiosInstance";
 import { END_POINTS } from "@constants/api";
+import type { ResponseData } from "@type/responseType";
+import type { RoomData } from "@type/room";
 
-export const getRoom = async (roomId: string) => {
-  const { data } = await axiosInstance.get(END_POINTS.ROOM(roomId));
+export const getRoom = async (roomId: string): Promise<RoomData> => {
+  const { data } = await axiosInstance.get<ResponseData<RoomData>>(
+    END_POINTS.ROOM(roomId),
+  );
   return data.data;
 };
diff --git a/src/mocks/data/dummyRoomDetail.json b/src/mocks/data/dummyRoomDetail.json
index 23e03027..263b10e7 100644
--- a/src/mocks/data/dummyRoomDetail.json
+++ b/src/mocks/data/dummyRoomDetail.json
@@ -21,7 +21,8 @@
     },
     "hotelAddress": "서울특별시 강남구 테헤란로 99길 9",
     "hotelInfoUrl": "https://place-site.yanolja.com/places/3001615",
-    "saleStatus": false
+    "saleStatus": false,
+    "isSeller": true
   },
   "message": "상품 조회에 성공했습니다."
 }
diff --git a/src/types/room.ts b/src/types/room.ts
index 5616a5bb..947a7722 100644
--- a/src/types/room.ts
+++ b/src/types/room.ts
@@ -1,7 +1,7 @@
 export type RoomData = {
   hotelName: string;
   roomName: string;
-  hotelImageUrl: string[];
+  hotelImageUrlList: string[];
   checkIn: string;
   checkOut: string;
   originalPrice: number;
@@ -13,6 +13,7 @@ export type RoomData = {
   hotelAddress: string;
   hotelInfoUrl: string;
   saleStatus: boolean;
+  isSeller: boolean;
 };
 type RoomTheme = {
   parkingZone: boolean;
@@ -23,5 +24,5 @@ type RoomTheme = {
 
 export type RoomNavBarData = Pick<
   RoomData,
-  "originalPrice" | "sellingPrice" | "saleStatus"
+  "originalPrice" | "sellingPrice" | "saleStatus" | "isSeller"
 >;

From 98d661c6b7565534346479383d25a9c639ae6201 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Tue, 23 Jan 2024 17:05:44 +0900
Subject: [PATCH 39/57] =?UTF-8?q?fix:=20=EC=BA=90=EB=A1=9C=EC=85=80=20widt?=
 =?UTF-8?q?h=20=EA=B0=92=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/carousel/Carousel.style.ts | 2 --
 src/components/carousel/Carousel.tsx      | 4 +---
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/carousel/Carousel.style.ts b/src/components/carousel/Carousel.style.ts
index 0820b746..3595b001 100644
--- a/src/components/carousel/Carousel.style.ts
+++ b/src/components/carousel/Carousel.style.ts
@@ -3,11 +3,9 @@ import styled, { css } from "styled-components";
 
 export const CarouselContainer = styled.div<{
   $height: number;
-  $width: number;
 }>`
   position: relative;
 
-  width: ${(props) => `${props.$width}px`};
   min-height: ${(props) => `${props.$height}px`};
   height: ${(props) => `${props.$height}px`};
 
diff --git a/src/components/carousel/Carousel.tsx b/src/components/carousel/Carousel.tsx
index 61ea6f3c..f7d102e5 100644
--- a/src/components/carousel/Carousel.tsx
+++ b/src/components/carousel/Carousel.tsx
@@ -4,7 +4,6 @@ import * as S from "./Carousel.style.ts";
 
 interface CarouselProps {
   images: string[];
-  width?: number;
   height?: number;
   arrows?: boolean;
   infinite?: boolean;
@@ -14,7 +13,6 @@ interface CarouselProps {
 
 const Carousel = ({
   height = 300,
-  width = 300,
   images,
   arrows = true,
   infinite = false,
@@ -41,7 +39,7 @@ const Carousel = ({
   });
 
   return (
-    <S.CarouselContainer $height={height} $width={width}>
+    <S.CarouselContainer $height={height}>
       <S.SliderWrapper>
         <S.SliderContainer
           ref={sliderRef}

From 9d6f3fcc75b8599750c9888ab48e4d10ff95822e Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Tue, 23 Jan 2024 17:06:34 +0900
Subject: [PATCH 40/57] =?UTF-8?q?refactor:=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=A1=B0=ED=9A=8C=20=EC=BF=BC?=
 =?UTF-8?q?=EB=A6=AC=20=ED=9B=85=EC=9C=BC=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/api/useRoomQuery.ts | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/hooks/api/useRoomQuery.ts

diff --git a/src/hooks/api/useRoomQuery.ts b/src/hooks/api/useRoomQuery.ts
new file mode 100644
index 00000000..a846728c
--- /dev/null
+++ b/src/hooks/api/useRoomQuery.ts
@@ -0,0 +1,28 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { getRoom } from "@apis/fetchRoom";
+import { calculateDiscount } from "@utils/calculator";
+
+import type { RoomData } from "@type/room";
+import type { AxiosError } from "axios";
+
+interface RoomQueryData {
+  rawData: RoomData;
+  discountRate: string;
+}
+
+export const useRoomQuery = (roomId: string) => {
+  return useSuspenseQuery<RoomData, AxiosError, RoomQueryData>({
+    queryKey: ["room", roomId],
+    queryFn: () => getRoom(roomId),
+    select: (data) => {
+      const discountRate = calculateDiscount(
+        data.originalPrice,
+        data.sellingPrice,
+      );
+      return {
+        rawData: data,
+        discountRate,
+      };
+    },
+  });
+};

From 7a53c802e55c1ecb2172c2db59fada7e5f9cbaea Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Tue, 23 Jan 2024 17:07:53 +0900
Subject: [PATCH 41/57] =?UTF-8?q?refactor:=20=EA=B2=B0=EC=A0=9C=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20Params=EB=A1=9C=20product=20id=20?=
 =?UTF-8?q?=EA=B0=80=EC=A0=B8=EC=98=A4=EB=8F=84=EB=A1=9D=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/paymentPage/Payment.tsx                      | 10 +++++-----
 .../components/paymentButton/PaymentButton.tsx         |  7 +++----
 src/pages/paymentSuccessPage/PaymentSuccess.tsx        | 10 +++++-----
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/pages/paymentPage/Payment.tsx b/src/pages/paymentPage/Payment.tsx
index 26d81629..1d762265 100644
--- a/src/pages/paymentPage/Payment.tsx
+++ b/src/pages/paymentPage/Payment.tsx
@@ -4,17 +4,17 @@ import PaymentMethodSection from "@/pages/paymentPage/components/paymentMethodSe
 import TermsAgreementSection from "@/pages/paymentPage/components/termsAgreementSection/TermsAgreementSection";
 import UserInfoSection from "@/pages/paymentPage/components/userInfoSection/UserInfoSection";
 import { usePaymentQuery } from "@hooks/api/query/usePaymentQuery";
-import { useSearchParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import PaymentButton from "./components/paymentButton/PaymentButton";
 
 import { FormProvider, useForm } from "react-hook-form";
 import Caption from "@components/caption/Caption";
 
 const Payment = () => {
-  const [searchParams] = useSearchParams();
-  const product = searchParams.get("product") ?? "";
+  const { productId } = useParams();
+  if (!productId) throw Error("존재하지 않는 productId 입니다.");
 
-  const { data } = usePaymentQuery(product);
+  const { data } = usePaymentQuery(productId);
 
   const methods = useForm({
     mode: "onChange",
@@ -47,7 +47,7 @@ const Payment = () => {
           </Caption>
         </S.CaptionWrapper>
         <S.BottomWrapper>
-          <PaymentButton productId={product} payment={data} />
+          <PaymentButton productId={productId} price={data.salePrice} />
         </S.BottomWrapper>
       </FormProvider>
     </S.PaymentContainer>
diff --git a/src/pages/paymentPage/components/paymentButton/PaymentButton.tsx b/src/pages/paymentPage/components/paymentButton/PaymentButton.tsx
index 6f968af7..b90473d5 100644
--- a/src/pages/paymentPage/components/paymentButton/PaymentButton.tsx
+++ b/src/pages/paymentPage/components/paymentButton/PaymentButton.tsx
@@ -2,14 +2,13 @@ import { useFormContext } from "react-hook-form";
 import { usePaymentMutation } from "@hooks/api/mutation/usePaymentMutation";
 
 import * as S from "./PaymentButton.style";
-import type { PaymentData } from "@type/payment";
 
 interface PaymentButtonProps {
   productId: string;
-  payment: Pick<PaymentData, "salePrice">;
+  price: number;
 }
 
-const PaymentButton = ({ productId, payment }: PaymentButtonProps) => {
+const PaymentButton = ({ productId, price }: PaymentButtonProps) => {
   const {
     handleSubmit,
     getValues,
@@ -55,7 +54,7 @@ const PaymentButton = ({ productId, payment }: PaymentButtonProps) => {
       data-disabled={isValid ? null : ""}
       aria-label="결제하기"
     >
-      {payment.salePrice.toLocaleString("ko-KR")}원 결제하기
+      {price.toLocaleString("ko-KR")}원 결제하기
     </S.Button>
   );
 };
diff --git a/src/pages/paymentSuccessPage/PaymentSuccess.tsx b/src/pages/paymentSuccessPage/PaymentSuccess.tsx
index 93a52337..9f0667a0 100644
--- a/src/pages/paymentSuccessPage/PaymentSuccess.tsx
+++ b/src/pages/paymentSuccessPage/PaymentSuccess.tsx
@@ -1,4 +1,4 @@
-import { useSearchParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { usePurchaseDetailQuery } from "@hooks/api/query/usePurchaseQuery";
 
 import PaymentSuccessInfo from "@pages/paymentSuccessPage/components/PaymentSuccessInfo/PaymentSuccessInfo";
@@ -9,10 +9,10 @@ import CardItem from "@components/cardItem/CardItem";
 import * as S from "./PaymentSuccess.style";
 
 const PaymentSuccess = () => {
-  const [searchParams] = useSearchParams();
-  const product = searchParams.get("product") ?? "";
+  const { productId } = useParams();
+  if (!productId) throw Error("존재하지 않는 productId 입니다.");
 
-  const { data } = usePurchaseDetailQuery(product);
+  const { data } = usePurchaseDetailQuery(productId);
 
   return (
     <S.PurchasedContainer>
@@ -63,7 +63,7 @@ const PaymentSuccess = () => {
         </S.BottomCardWrapper>
       </S.PurchasedWrapper>
       <S.BottomWrapper>
-        <PaymentSuccessButton productId={product} />
+        <PaymentSuccessButton productId={productId} />
       </S.BottomWrapper>
     </S.PurchasedContainer>
   );

From 8c619257dedf64f0f657d590f45c29a352eaffa5 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Tue, 23 Jan 2024 17:08:18 +0900
Subject: [PATCH 42/57] =?UTF-8?q?design:=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20fixed=EB=A1=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/toast/Toast.style.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/toast/Toast.style.ts b/src/components/toast/Toast.style.ts
index da782af1..74c1b9a4 100644
--- a/src/components/toast/Toast.style.ts
+++ b/src/components/toast/Toast.style.ts
@@ -16,7 +16,7 @@ export const ToastContainer = styled(motion.div)<{ $isError: boolean }>`
   justify-content: center;
   align-items: center;
 
-  position: absolute;
+  position: fixed;
   left: 0;
   right: 0;
   top: 80px;

From c32b047eaeda3df2217e8ff642661ea56d9daa59 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Tue, 23 Jan 2024 17:09:00 +0900
Subject: [PATCH 43/57] =?UTF-8?q?fix:=20=EC=9D=B4=EB=A9=94=EC=9D=BC=20?=
 =?UTF-8?q?=ED=99=95=EC=9D=B8=EC=9A=94=EC=B2=AD=20=ED=9B=85=20throwOnError?=
 =?UTF-8?q?=EC=97=90=20=EC=A1=B0=EA=B1=B4=20=EA=B1=B8=EC=96=B4=EC=84=9C=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=20=EB=8D=98=EC=A7=80=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/api/mutation/useValidateEmailMutation.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/hooks/api/mutation/useValidateEmailMutation.ts b/src/hooks/api/mutation/useValidateEmailMutation.ts
index 8bebda67..5d11f5db 100644
--- a/src/hooks/api/mutation/useValidateEmailMutation.ts
+++ b/src/hooks/api/mutation/useValidateEmailMutation.ts
@@ -1,10 +1,13 @@
 import { postValidateEmail } from "@apis/fetchLogin";
 import { useMutation } from "@tanstack/react-query";
+import { isAxiosError } from "axios";
 
 export const useValidateEmailMutation = () => {
   const validateEmailMutation = useMutation({
     mutationFn: ({ email }: { email: string }) => postValidateEmail(email),
-    throwOnError: true,
+    throwOnError: (error) => {
+      return !(isAxiosError(error) && error.response);
+    },
   });
 
   return validateEmailMutation;

From 9dbbebef5fe4233fcb678f890029b517ab6796e4 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Tue, 23 Jan 2024 17:09:20 +0900
Subject: [PATCH 44/57] =?UTF-8?q?design:=20=EC=B2=B4=ED=81=AC=EB=B0=95?=
 =?UTF-8?q?=EC=8A=A4=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/checkbox/Checkbox.style.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/checkbox/Checkbox.style.ts b/src/components/checkbox/Checkbox.style.ts
index 81958ef4..b7b1d892 100644
--- a/src/components/checkbox/Checkbox.style.ts
+++ b/src/components/checkbox/Checkbox.style.ts
@@ -1,4 +1,4 @@
-import styled, { DefaultTheme } from "styled-components";
+import styled, { DefaultTheme, css } from "styled-components";
 
 export interface CheckboxStyleProps {
   size?: "sm" | "md" | "lg";
@@ -117,11 +117,11 @@ export const StyledCheckbox = styled.span<CheckboxStyleProps>`
 `;
 
 const labelStyles = {
-  title: (theme: DefaultTheme) => `
+  title: (theme: DefaultTheme) => css`
     color: ${theme.color.greyScale1};
     }
   `,
-  caption: (theme: DefaultTheme) => `
+  caption: (theme: DefaultTheme) => css`
     color: ${theme.color.greyScale3};
     }
   `,
@@ -140,8 +140,6 @@ export const LabelText = styled.span.withConfig({
 
   ${({ theme }) => theme.typo.caption1}
 
-  ${({ variant, theme }) => variant && labelStyles[variant](theme)};
-
   margin-inline-start: 0.5rem;
   user-select: none;
 
@@ -150,4 +148,6 @@ export const LabelText = styled.span.withConfig({
     text-underline-offset: 2px;
     color: inherit;
   }
+
+  ${({ variant, theme }) => variant && labelStyles[variant](theme)};
 `;

From 2e32aab8cd2ea49b3d562b633ec147e834aa7ea1 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Tue, 23 Jan 2024 17:09:44 +0900
Subject: [PATCH 45/57] =?UTF-8?q?feat:=20=EC=83=81=EC=84=B8=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B5=AC=EB=A7=A4=EC=97=B0=EA=B2=B0,=20?=
 =?UTF-8?q?=ED=97=A4=EB=8D=94=20=EB=92=A4=EB=A1=9C=EA=B0=80=EA=B8=B0=20?=
 =?UTF-8?q?=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/roomDetailPage/RoomDetail.tsx       | 32 ++++++++++-------
 .../components/roomHeader/RoomHeader.style.ts | 13 ++++---
 .../components/roomHeader/RoomHeader.tsx      | 13 +++++--
 .../components/roomInfo/RoomInfo.tsx          | 11 +++---
 .../components/roomNavBar/RoomNavBar.style.ts |  3 +-
 .../components/roomNavBar/RoomNavBar.tsx      | 35 +++++++++++++++----
 6 files changed, 72 insertions(+), 35 deletions(-)

diff --git a/src/pages/roomDetailPage/RoomDetail.tsx b/src/pages/roomDetailPage/RoomDetail.tsx
index ffdc7931..de7b00f0 100644
--- a/src/pages/roomDetailPage/RoomDetail.tsx
+++ b/src/pages/roomDetailPage/RoomDetail.tsx
@@ -1,38 +1,44 @@
-import { getRoom } from "@apis/fetchRoom";
-
 import Carousel from "@components/carousel/Carousel";
 import RoomHeader from "@pages/roomDetailPage/components/roomHeader/RoomHeader";
 import RoomInfo from "@pages/roomDetailPage/components/roomInfo/RoomInfo";
 import RoomNavBar from "@pages/roomDetailPage/components/roomNavBar/RoomNavBar";
-import { useSuspenseQuery } from "@tanstack/react-query";
-import type { RoomData } from "@type/room";
-import type { AxiosError } from "axios";
+
+import useToastConfig from "@hooks/common/useToastConfig";
+import { useRoomQuery } from "@hooks/api/useRoomQuery";
 import { useParams } from "react-router-dom";
 
 import * as S from "./RoomDetail.style";
+import { useEffect } from "react";
 
 const RoomDetail = () => {
   const { roomId } = useParams();
   if (!roomId) throw new Error("존재하지 않는 roomId 입니다.");
 
-  const { data } = useSuspenseQuery<RoomData, AxiosError>({
-    queryKey: ["room"],
-    queryFn: () => getRoom(roomId),
-  });
+  const { data } = useRoomQuery(roomId);
+  const { rawData, discountRate } = data;
+
+  const { handleToast } = useToastConfig();
+
+  useEffect(() => {
+    if (rawData.isSeller) {
+      handleToast(false, ["내가 판매 중인 상품입니다"]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rawData.isSeller]);
 
   return (
     <S.Container>
-      <RoomHeader title={data.hotelName} />
+      <RoomHeader title={rawData.hotelName} />
       <Carousel
-        images={data.hotelImageUrl}
+        images={rawData.hotelImageUrlList}
         height={300}
         arrows={true}
         infinite={false}
         innerShadow={true}
         draggable={true}
       />
-      <RoomInfo room={data} />
-      <RoomNavBar room={data} />
+      <RoomInfo room={rawData} discount={discountRate} />
+      <RoomNavBar room={rawData} discount={discountRate} roomId={roomId} />
     </S.Container>
   );
 };
diff --git a/src/pages/roomDetailPage/components/roomHeader/RoomHeader.style.ts b/src/pages/roomDetailPage/components/roomHeader/RoomHeader.style.ts
index a86be054..5471ab90 100644
--- a/src/pages/roomDetailPage/components/roomHeader/RoomHeader.style.ts
+++ b/src/pages/roomDetailPage/components/roomHeader/RoomHeader.style.ts
@@ -8,22 +8,25 @@ export const ScrollObserver = styled.div`
 `;
 
 export const HeaderContainer = styled.header<{ $visible: boolean }>`
-  display: flex;
-  align-items: center;
   position: fixed;
   top: 0;
+
+  display: flex;
+  align-items: center;
   width: 100%;
   max-width: 768px;
   height: 56px;
-  z-index: 2;
+
   background-color: ${({ $visible, theme }) =>
-    $visible ? "unset" : theme.color.white};
+    $visible ? "transparent" : theme.color.white};
   border-bottom: ${({ $visible, theme }) =>
-    $visible ? "none" : `1px solid ${theme.color.greyScale7}`};
+    $visible ? "0" : `1px solid ${theme.color.greyScale7}`};
 
   transition:
     border-bottom,
     background-color 0.5s ease-in;
+
+  z-index: 2;
 `;
 
 export const Wrapper = styled.div`
diff --git a/src/pages/roomDetailPage/components/roomHeader/RoomHeader.tsx b/src/pages/roomDetailPage/components/roomHeader/RoomHeader.tsx
index 02413f20..7bea78ee 100644
--- a/src/pages/roomDetailPage/components/roomHeader/RoomHeader.tsx
+++ b/src/pages/roomDetailPage/components/roomHeader/RoomHeader.tsx
@@ -1,5 +1,7 @@
 import useIsVisible from "@hooks/common/useIsVisible";
+
 import * as S from "./RoomHeader.style";
+import { useNavigate } from "react-router-dom";
 
 interface RoomHeaderProps {
   title: string;
@@ -11,15 +13,22 @@ const RoomHeader = ({ title }: RoomHeaderProps) => {
       rootMargin: "0px",
       threshold: 1.0,
     },
-    initialVisible: false,
+    initialVisible: true,
   });
 
+  const navigate = useNavigate();
+
   return (
     <>
       <S.HeaderContainer $visible={isVisible}>
         <S.Wrapper>
           <div className="wrap-left">
-            <button type="button" className="btn-back" aria-label="뒤로가기">
+            <button
+              type="button"
+              className="btn-back"
+              aria-label="뒤로가기"
+              onClick={() => navigate(-1)}
+            >
               <S.BackIcon $visible={isVisible} />
             </button>
           </div>
diff --git a/src/pages/roomDetailPage/components/roomInfo/RoomInfo.tsx b/src/pages/roomDetailPage/components/roomInfo/RoomInfo.tsx
index 03cb040f..199e38e5 100644
--- a/src/pages/roomDetailPage/components/roomInfo/RoomInfo.tsx
+++ b/src/pages/roomDetailPage/components/roomInfo/RoomInfo.tsx
@@ -1,19 +1,18 @@
 import RoomThemeOption from "@pages/roomDetailPage/components/roomThemeOption/RoomThemeOption";
-import * as S from "@pages/roomDetailPage/RoomDetail.style";
 import type { RoomData } from "@type/room";
-import { calculateDiscount } from "@utils/calculator";
 import { formatDate } from "@utils/dateFormatter";
 import IconBed from "@assets/icons/ic_bed.svg?react";
 import IconCaretRight from "@assets/icons/ic_caret_right.svg?react";
 import IconUser from "@assets/icons/ic_users.svg?react";
 
+import * as S from "@pages/roomDetailPage/RoomDetail.style";
+
 interface RoomInfoProps {
   room: RoomData;
+  discount: string;
 }
 
-const RoomInfo = ({ room }: RoomInfoProps) => {
-  const discountRate = calculateDiscount(room.originalPrice, room.sellingPrice);
-
+const RoomInfo = ({ room, discount }: RoomInfoProps) => {
   const checkInDate = formatDate(room.checkIn);
   const checkOutDate = formatDate(room.checkOut);
   return (
@@ -35,7 +34,7 @@ const RoomInfo = ({ room }: RoomInfoProps) => {
               <S.Text>판매가</S.Text>
               <S.Row>
                 <S.Text variant="title2" color="percentBlue">
-                  {discountRate}%
+                  {discount}%
                 </S.Text>
                 <S.Text variant="title2">
                   {room.sellingPrice.toLocaleString()}원
diff --git a/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.style.ts b/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.style.ts
index 6d56ed74..b895cc6b 100644
--- a/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.style.ts
+++ b/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.style.ts
@@ -33,7 +33,6 @@ export const Row2 = styled(Flex)`
   gap: 0.5rem;
 `;
 
-// FIXME: Button 컴포넌트 만들기
 export const Button = styled.button<{ $status: boolean }>`
   ${({ theme }) => theme.typo.button2}
   padding: 0.7rem 3rem;
@@ -41,7 +40,7 @@ export const Button = styled.button<{ $status: boolean }>`
   border-radius: 8px;
   background-color: ${({ $status, theme }) =>
     $status ? theme.color.percentOrange : theme.color.greyScale5};
-  transition: background-color 0.5s ease-in;
+  transition: background-color 0.2s ease-in;
 
   &:hover {
     background-color: ${({ $status, theme }) =>
diff --git a/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.tsx b/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.tsx
index 831d2dc5..59ddd833 100644
--- a/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.tsx
+++ b/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.tsx
@@ -1,14 +1,30 @@
-import { RoomNavBarData } from "@type/room";
-import { calculateDiscount } from "@utils/calculator";
+import { useNavigate } from "react-router-dom";
+import type { RoomNavBarData } from "@type/room";
+import { PATH } from "@constants/path";
+import useToastConfig from "@hooks/common/useToastConfig";
+
 import * as S from "./RoomNavBar.style";
 
 interface RoomNavBarProps {
   room: RoomNavBarData;
+  roomId: string;
+  discount: string;
 }
 
-const RoomNavBar = ({ room }: RoomNavBarProps) => {
-  // FIXME: 패칭 후 가공단계에서 할인율 계산
-  const discountRate = calculateDiscount(room.originalPrice, room.sellingPrice);
+const RoomNavBar = ({ room, roomId, discount }: RoomNavBarProps) => {
+  const navigate = useNavigate();
+  const { handleToast } = useToastConfig();
+
+  const handlePurchaseClick = () => {
+    if (room.isSeller) {
+      handleToast(true, [<>내가 판매하는 상품은 구매가 불가합니다</>]);
+      return;
+    } else if (!room.saleStatus) {
+      return;
+    }
+
+    navigate(`${PATH.PAYMENT}/${roomId}`);
+  };
 
   return (
     <S.Wrapper>
@@ -18,14 +34,19 @@ const RoomNavBar = ({ room }: RoomNavBarProps) => {
         </S.Text>
         <S.Row2>
           <S.Text variant="title2" color="percentBlue">
-            {discountRate}%
+            {discount}%
           </S.Text>
           <S.Text variant="title2">
             {room.sellingPrice.toLocaleString()}원
           </S.Text>
         </S.Row2>
       </S.ColWrapper>
-      <S.Button $status={room.saleStatus} aria-label="구매하기">
+      <S.Button
+        type="button"
+        $status={room.saleStatus}
+        aria-label="구매하기"
+        onClick={handlePurchaseClick}
+      >
         구매하기
       </S.Button>
     </S.Wrapper>

From 82f2c6effc57c99fcfc41d48abcccfb168b47c7c Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Tue, 23 Jan 2024 17:10:32 +0900
Subject: [PATCH 46/57] =?UTF-8?q?fix:=20useIsVisible=20=ED=9B=85=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20isVisible=EC=83=81=ED=83=9C=EA=B0=80=20=EB=B0=94?=
 =?UTF-8?q?=EB=80=94=20=EB=95=8C=EB=A7=8C=20observer=EA=B0=80=20=ED=99=9C?=
 =?UTF-8?q?=EC=84=B1=ED=99=94=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/common/useIsVisible.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/hooks/common/useIsVisible.ts b/src/hooks/common/useIsVisible.ts
index f0d6a7a5..582ebfb9 100644
--- a/src/hooks/common/useIsVisible.ts
+++ b/src/hooks/common/useIsVisible.ts
@@ -17,12 +17,13 @@ const useIsVisible = (props: UseIsVisibleProps): UseIsVisibleReturnType => {
 
   useEffect(() => {
     const observer = new IntersectionObserver(([entry]) => {
-      setIsVisible(entry.isIntersecting);
+      if (entry.isIntersecting !== isVisible) {
+        setIsVisible(entry.isIntersecting);
+      }
     }, options);
 
     if (visibleRef) {
       observer.observe(visibleRef);
-      return;
     }
 
     return () => {
@@ -30,7 +31,7 @@ const useIsVisible = (props: UseIsVisibleProps): UseIsVisibleReturnType => {
         observer.unobserve(visibleRef);
       }
     };
-  }, [options, visibleRef]);
+  }, [options, visibleRef, isVisible]);
 
   const setRefCallback: RefCallback<HTMLDivElement> = (node) => {
     setVisibleRef(node);

From c94856a484bd0a9028c7f28174bf4b3d5ba1b388 Mon Sep 17 00:00:00 2001
From: Bumang-Cyber <jove0729@naver.com>
Date: Tue, 23 Jan 2024 19:36:30 +0900
Subject: [PATCH 47/57] =?UTF-8?q?feat:=20=EC=95=8C=EB=A6=BC=20api=20endpoi?=
 =?UTF-8?q?nt=20=EC=95=9E=EC=97=90=20'/'=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/api.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/constants/api.ts b/src/constants/api.ts
index 98e4297c..7c647fe9 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -4,8 +4,8 @@ export const END_POINTS = {
   LOGIN: "/v1/members/signin",
   LOGOUT: "/v1/members/logout",
   SIGNUP: "/v1/members/signup",
-  ALARM: "v1/alarms",
-  HASALARM: "v1/alarms/status",
+  ALARM: "/v1/alarms",
+  HASALARM: "/v1/alarms/status",
   ROOM: (roomId: string) => `/v1/products/${roomId}`,
   RESERVATION: "/v1/reservations",
   MAIN: "/v1/products/main",

From dc625efcaa4b89abdab958aed64feb05a4494565 Mon Sep 17 00:00:00 2001
From: Bumang-Cyber <jove0729@naver.com>
Date: Wed, 24 Jan 2024 11:13:57 +0900
Subject: [PATCH 48/57] =?UTF-8?q?feat:=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=9C=84=EB=A1=9C=20=EC=98=AC=EB=9D=BC=EA=B0=80=EA=B8=B0=20?=
 =?UTF-8?q?=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/itemCarousel/ItemCarousel.tsx  |  12 +-
 src/hooks/common/useAnimateCarousel.ts        | 142 ++++++++++++++++++
 src/main.tsx                                  |   8 +-
 src/pages/homePage/Home.style.ts              |  12 +-
 src/pages/homePage/Home.tsx                   |  33 ++--
 .../percentAnimator/PercentAnimator.style.ts  |  26 ++++
 .../percentAnimator/PercentAnimator.tsx       |  69 +++++++++
 .../textAnimator/TextAnimator.style.ts        |  25 +++
 .../homePage/textAnimator/TextAnimator.tsx    |  53 +++++++
 9 files changed, 350 insertions(+), 30 deletions(-)
 create mode 100644 src/hooks/common/useAnimateCarousel.ts
 create mode 100644 src/pages/homePage/percentAnimator/PercentAnimator.style.ts
 create mode 100644 src/pages/homePage/percentAnimator/PercentAnimator.tsx
 create mode 100644 src/pages/homePage/textAnimator/TextAnimator.style.ts
 create mode 100644 src/pages/homePage/textAnimator/TextAnimator.tsx

diff --git a/src/components/itemCarousel/ItemCarousel.tsx b/src/components/itemCarousel/ItemCarousel.tsx
index d4b0dca1..2545752e 100644
--- a/src/components/itemCarousel/ItemCarousel.tsx
+++ b/src/components/itemCarousel/ItemCarousel.tsx
@@ -1,4 +1,4 @@
-import { useCarousel } from "@hooks/common/useCarousel";
+import { useAnimateCarousel } from "@hooks/common/useAnimateCarousel";
 import { useCarouselSize } from "@hooks/common/useCarouselSize";
 import * as S from "./ItemCarousel.style.ts";
 import { LocaleItem } from "@type/saleSection.ts";
@@ -10,6 +10,7 @@ interface CarouselProps {
   onChangeLocale: React.Dispatch<
     React.SetStateAction<[number, string, LocaleItem[]]>
   >;
+  currentLocale: [number, string, LocaleItem[]];
   height?: number;
   arrows?: boolean;
   infinite?: boolean;
@@ -35,7 +36,8 @@ const ItemCarousel = ({
     handleSliderTransitionEnd,
     handlerSliderMoueDown,
     handleSliderTouchStart,
-  } = useCarousel({
+    setIsPlay,
+  } = useAnimateCarousel({
     slideLength: localeAndHotel.length,
     infinite,
     slideWidth,
@@ -52,7 +54,11 @@ const ItemCarousel = ({
   }, [currentIndex]);
 
   return (
-    <S.CarouselContainer $height={height}>
+    <S.CarouselContainer
+      $height={height}
+      onMouseEnter={() => setIsPlay(false)}
+      onMouseLeave={() => setIsPlay(true)}
+    >
       <S.SliderWrapper>
         <S.SliderContainer
           ref={sliderRef}
diff --git a/src/hooks/common/useAnimateCarousel.ts b/src/hooks/common/useAnimateCarousel.ts
new file mode 100644
index 00000000..7892d730
--- /dev/null
+++ b/src/hooks/common/useAnimateCarousel.ts
@@ -0,0 +1,142 @@
+import { useEffect, useState } from "react";
+
+interface CarouselProps {
+  slideLength: number;
+  slideWidth: number;
+  infinite?: boolean;
+}
+
+const inrange = (v: number, min: number, max: number) => {
+  // v는 current number?
+  if (v < min) return min;
+  if (v > max) return max;
+  return v;
+};
+
+export const useAnimateCarousel = ({
+  slideLength,
+  infinite,
+  slideWidth,
+}: CarouselProps) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [transX, setTransX] = useState(0);
+  const [animate, setAnimate] = useState(false);
+  const [isPlay, setIsPlay] = useState(true);
+
+  useEffect(() => {
+    if (!isPlay) return;
+
+    const interval = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % slideLength);
+      setAnimate(true);
+      setTransX(0);
+    }, 3000);
+
+    return () => clearInterval(interval);
+  }, [isPlay]);
+
+  const handleDragChange = (deltaX: number) => {
+    setTransX(inrange(deltaX, -slideWidth, slideWidth));
+  };
+
+  const handleDragEnd = (deltaX: number) => {
+    const maxIndex = slideLength - 1;
+
+    if (deltaX < -50) setCurrentIndex(inrange(currentIndex + 1, 0, maxIndex));
+    if (deltaX > 50) setCurrentIndex(inrange(currentIndex - 1, 0, maxIndex));
+
+    setAnimate(true);
+    setTransX(0);
+  };
+
+  const handleSliderNavigationClick =
+    (index: number) => (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.stopPropagation();
+
+      if (index < 0 || index >= slideLength) return;
+
+      setCurrentIndex(index);
+      setAnimate(true);
+      setTransX(0);
+    };
+
+  // FIXME: touch 이벤트 후 발생하는 mouse 이벤트 무시하기
+  const handleSliderTouchStart = (
+    touchEvent: React.TouchEvent<HTMLDivElement>,
+  ) => {
+    const handleTouchMove = (moveEvent: globalThis.TouchEvent) => {
+      if (moveEvent.cancelable) moveEvent.preventDefault();
+
+      const delta = moveEvent.touches[0].pageX - touchEvent.touches[0].pageX;
+      handleDragChange(delta);
+    };
+
+    const handleTouchEnd = (moveEvent: globalThis.TouchEvent) => {
+      if (moveEvent.cancelable) moveEvent.preventDefault();
+      const delta =
+        moveEvent.changedTouches[0].pageX - touchEvent.changedTouches[0].pageX;
+      handleDragEnd(delta);
+
+      document.removeEventListener("touchmove", handleTouchMove);
+    };
+
+    document.addEventListener("touchmove", handleTouchMove, {
+      passive: false,
+    });
+    document.addEventListener("touchend", handleTouchEnd, {
+      once: true,
+    });
+  };
+
+  const handlerSliderMoueDown = (
+    clickEvent: React.MouseEvent<HTMLDivElement, MouseEvent>,
+  ) => {
+    clickEvent.preventDefault();
+
+    const handleMouseMove = (moveEvent: MouseEvent) => {
+      const deltaX = moveEvent.pageX - clickEvent.pageX;
+      handleDragChange(deltaX);
+    };
+
+    const handleMouseUp = (moveEvent: MouseEvent) => {
+      const deltaX = moveEvent.pageX - clickEvent.pageX;
+      handleDragEnd(deltaX);
+
+      document.removeEventListener("mousemove", handleMouseMove);
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp, {
+      once: true,
+    });
+  };
+
+  const getSliderStyle = () => {
+    return {
+      transform: `translateX(${-currentIndex * slideWidth + transX}px)`,
+      transition: `transform ${animate ? 300 : 0}ms ease-in-out 0s`,
+    };
+  };
+
+  const handleSliderTransitionEnd = () => {
+    setAnimate(false);
+
+    if (!infinite) return;
+    if (currentIndex === 0) {
+      setCurrentIndex(slideLength - 2);
+    } else if (currentIndex === slideLength - 1) {
+      setCurrentIndex(1);
+    }
+  };
+
+  return {
+    currentIndex,
+    handleSliderNavigationClick,
+    handleSliderTouchStart,
+    handlerSliderMoueDown,
+    handleSliderTransitionEnd,
+    getSliderStyle,
+    setCurrentIndex,
+    setIsPlay,
+  };
+};
diff --git a/src/main.tsx b/src/main.tsx
index 857ae0d2..6a7aac38 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -4,15 +4,15 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import ReactDOM from "react-dom/client";
 import { RouterProvider } from "react-router-dom";
 import { ThemeProvider } from "styled-components";
-import { worker } from "./mocks/broswer.ts";
+// import { worker } from "./mocks/broswer.ts";
 import { router } from "./routes/router";
 import { GlobalStyle } from "./styles/globalStyle";
 import { theme } from "./styles/theme";
 
 const queryClient = new QueryClient();
-if (process.env.NODE_ENV === "development") {
-  worker.start();
-}
+// if (process.env.NODE_ENV === "development") {
+//   worker.start();
+// }
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
diff --git a/src/pages/homePage/Home.style.ts b/src/pages/homePage/Home.style.ts
index a5f88e66..f90695c8 100644
--- a/src/pages/homePage/Home.style.ts
+++ b/src/pages/homePage/Home.style.ts
@@ -38,16 +38,14 @@ export const TextSlider = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 16px;
 
   ${({ theme }) => theme.typo.title5}
-
-  & strong {
-    font-size: 18px;
-    font-weight: 800;
+  & span {
+    margin-left: 8px;
+    margin-right: 16px;
   }
-  & strong.percentage {
-    color: ${({ theme }) => theme.color.percentBlue};
+  & span:last-child {
+    margin-right: 0px;
   }
 `;
 
diff --git a/src/pages/homePage/Home.tsx b/src/pages/homePage/Home.tsx
index 28a10f9c..46e28718 100644
--- a/src/pages/homePage/Home.tsx
+++ b/src/pages/homePage/Home.tsx
@@ -9,19 +9,21 @@ import {
   WeekendItemsType,
   WeekendItem,
 } from "@type/saleSection";
-// import { fetchMainItem } from "@apis/fetchMainItems";
+import { fetchMainItem } from "@apis/fetchMainItems";
 
 import { locale } from "@constants/locale";
 import WeekendCarousel from "./weekendCarousel/WeekendCarousel";
-// import { useSuspenseQuery } from "@tanstack/react-query";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import TextLocaleAnimator from "./textAnimator/TextAnimator";
+import PercentAnimator from "./percentAnimator/PercentAnimator";
 
 const Home = () => {
-  // const { data: MainData } = useSuspenseQuery({
-  //   queryKey: ["main"],
-  //   queryFn: fetchMainItem,
-  // });
+  const { data: MainData } = useSuspenseQuery({
+    queryKey: ["main"],
+    queryFn: fetchMainItem,
+  });
 
-  // console.log(MainData);
+  console.log(MainData);
 
   const weekendProds: WeekendItemsType = {
     weekend: [
@@ -256,18 +258,17 @@ const Home = () => {
 
       <S.SaleCarouselContainer>
         <S.TextSlider>
-          <span>
-            <strong>{locale[currentLocale[1]]}</strong> 지역
-          </span>
-          <span>
-            <strong className="percentage">
-              최대 {currentLocale[2][0].salePercentage * 100}%
-            </strong>{" "}
-            할인 호텔
-          </span>
+          <TextLocaleAnimator text={locale[currentLocale[1]]} />
+          <span>지역</span>
+          <PercentAnimator
+            percent={currentLocale[2][0].salePercentage}
+            localeAndHotel={localeAndHotel}
+          />
+          <span>할인 호텔</span>
         </S.TextSlider>
         <div className="divider"></div>
         <ItemCarousel
+          currentLocale={currentLocale}
           localeAndHotel={localeAndHotel}
           onChangeLocale={setCurrentLocale}
           height={312}
diff --git a/src/pages/homePage/percentAnimator/PercentAnimator.style.ts b/src/pages/homePage/percentAnimator/PercentAnimator.style.ts
new file mode 100644
index 00000000..40d887a5
--- /dev/null
+++ b/src/pages/homePage/percentAnimator/PercentAnimator.style.ts
@@ -0,0 +1,26 @@
+import { motion } from "framer-motion";
+import styled from "styled-components";
+
+export const Container = styled.div`
+  height: 30px;
+  width: 80px;
+  color: ${({ theme }) => theme.color.percentBlue};
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+
+  position: relative;
+`;
+
+export const PercentDiv = styled(motion.div)`
+  font-size: 18px;
+  font-weight: 800;
+  position: absolute;
+
+  & .percentage {
+    color: ${({ theme }) => theme.color.percentBlue};
+  }
+`;
diff --git a/src/pages/homePage/percentAnimator/PercentAnimator.tsx b/src/pages/homePage/percentAnimator/PercentAnimator.tsx
new file mode 100644
index 00000000..e056bfff
--- /dev/null
+++ b/src/pages/homePage/percentAnimator/PercentAnimator.tsx
@@ -0,0 +1,69 @@
+import { AnimatePresence } from "framer-motion";
+import * as S from "./PercentAnimator.style";
+import { LocaleItem } from "@type/saleSection";
+
+const PercentAnimator = ({
+  percent,
+  localeAndHotel,
+}: {
+  percent: number;
+  localeAndHotel: [number, string, LocaleItem[]][];
+}) => {
+  return (
+    <S.Container>
+      {localeAndHotel.map((item) => (
+        <AnimatePresence>
+          {item[2][0].salePercentage === percent && (
+            <S.PercentDiv animate={{ y: [30, 0] }} exit={{ y: [0, -30] }}>
+              최대 {percent * 100}%
+            </S.PercentDiv>
+          )}
+        </AnimatePresence>
+      ))}
+      {/* <AnimatePresence>
+        {percent === "서울" && (
+          <S.PercentDiv animate={{ y: [30, 0] }} exit={{ y: [0, -30] }}>
+            서울
+          </S.PercentDiv>
+        )}
+      </AnimatePresence>
+      <AnimatePresence>
+        {percent === "부산" && (
+          <S.PercentDiv animate={{ y: [30, 0] }} exit={{ y: [0, -30] }}>
+            부산
+          </S.PercentDiv>
+        )}
+      </AnimatePresence>
+      <AnimatePresence>
+        {percent === "제주" && (
+          <S.PercentDiv animate={{ y: [30, 0] }} exit={{ y: [0, -30] }}>
+            제주
+          </S.PercentDiv>
+        )}
+      </AnimatePresence>
+      <AnimatePresence>
+        {percent === "강원" && (
+          <S.PercentDiv animate={{ y: [30, 0] }} exit={{ y: [0, -30] }}>
+            강원
+          </S.PercentDiv>
+        )}
+      </AnimatePresence>
+      <AnimatePresence>
+        {percent === "전라" && (
+          <S.PercentDiv animate={{ y: [30, 0] }} exit={{ y: [0, -30] }}>
+            전라
+          </S.PercentDiv>
+        )}
+      </AnimatePresence>
+      <AnimatePresence>
+        {percent === "경상" && (
+          <S.PercentDiv animate={{ y: [30, 0] }} exit={{ y: [0, -30] }}>
+            경상
+          </S.PercentDiv>
+        )}
+      </AnimatePresence> */}
+    </S.Container>
+  );
+};
+
+export default PercentAnimator;
diff --git a/src/pages/homePage/textAnimator/TextAnimator.style.ts b/src/pages/homePage/textAnimator/TextAnimator.style.ts
new file mode 100644
index 00000000..45403a7e
--- /dev/null
+++ b/src/pages/homePage/textAnimator/TextAnimator.style.ts
@@ -0,0 +1,25 @@
+import { motion } from "framer-motion";
+import styled from "styled-components";
+
+export const Container = styled.div`
+  height: 30px;
+  width: 40px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+
+  position: relative;
+`;
+
+export const LocaleDiv = styled(motion.div)`
+  font-size: 18px;
+  font-weight: 800;
+  position: absolute;
+
+  & .percentage {
+    color: ${({ theme }) => theme.color.percentBlue};
+  }
+`;
diff --git a/src/pages/homePage/textAnimator/TextAnimator.tsx b/src/pages/homePage/textAnimator/TextAnimator.tsx
new file mode 100644
index 00000000..6db71164
--- /dev/null
+++ b/src/pages/homePage/textAnimator/TextAnimator.tsx
@@ -0,0 +1,53 @@
+import { AnimatePresence } from "framer-motion";
+import * as S from "./TextAnimator.style";
+
+const TextAnimator = ({ text }: { text: string }) => {
+  return (
+    <S.Container>
+      <AnimatePresence>
+        {text === "서울" && (
+          <S.LocaleDiv animate={{ y: [30, 0] }} exit={{ y: [0, -30] }}>
+            서울
+          </S.LocaleDiv>
+        )}
+      </AnimatePresence>
+      <AnimatePresence>
+        {text === "부산" && (
+          <S.LocaleDiv animate={{ y: [30, 0] }} exit={{ y: [0, -30] }}>
+            부산
+          </S.LocaleDiv>
+        )}
+      </AnimatePresence>
+      <AnimatePresence>
+        {text === "제주" && (
+          <S.LocaleDiv animate={{ y: [30, 0] }} exit={{ y: [0, -30] }}>
+            제주
+          </S.LocaleDiv>
+        )}
+      </AnimatePresence>
+      <AnimatePresence>
+        {text === "강원" && (
+          <S.LocaleDiv animate={{ y: [30, 0] }} exit={{ y: [0, -30] }}>
+            강원
+          </S.LocaleDiv>
+        )}
+      </AnimatePresence>
+      <AnimatePresence>
+        {text === "전라" && (
+          <S.LocaleDiv animate={{ y: [30, 0] }} exit={{ y: [0, -30] }}>
+            전라
+          </S.LocaleDiv>
+        )}
+      </AnimatePresence>
+      <AnimatePresence>
+        {text === "경상" && (
+          <S.LocaleDiv animate={{ y: [30, 0] }} exit={{ y: [0, -30] }}>
+            경상
+          </S.LocaleDiv>
+        )}
+      </AnimatePresence>
+    </S.Container>
+  );
+};
+
+export default TextAnimator;

From 8960525d603335c8d2573351bd2f658fc08cd045 Mon Sep 17 00:00:00 2001
From: Bumang-Cyber <jove0729@naver.com>
Date: Wed, 24 Jan 2024 12:15:04 +0900
Subject: [PATCH 49/57] =?UTF-8?q?feat:=20firebase=ED=82=A4=20=EB=85=B8?=
 =?UTF-8?q?=EC=B6=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/firebase.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/firebase.ts b/src/firebase.ts
index 4acdfc54..281e4ca1 100644
--- a/src/firebase.ts
+++ b/src/firebase.ts
@@ -2,13 +2,13 @@ import { initializeApp } from "firebase/app";
 
 // firebase
 const firebaseConfig = {
-  apiKey: import.meta.env.VITE_APIKEY,
-  authDomain: import.meta.env.VITE_AUTH_DOMAIN,
-  projectId: import.meta.env.VITE_PROJECT_ID,
-  storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
-  messagingSenderId: import.meta.env.VITE_MESSAGING_SENDERID,
-  appId: import.meta.env.VITE_APPID,
-  measurementId: import.meta.env.VITE_MEASUREMENT_ID,
+  apiKey: "AIzaSyAc4XrxZs2G1EVp-NbpCh5rw9rVgnUG284",
+  authDomain: "scbj-af2e3.firebaseapp.com",
+  projectId: "scbj-af2e3",
+  storageBucket: "scbj-af2e3.appspot.com",
+  messagingSenderId: "177564796245",
+  appId: "1:177564796245:web:6b27b878cbc2ccacf39bdc",
+  measurementId: "G-1YD7ZEM9HM",
 };
 
 initializeApp(firebaseConfig);

From c39277b9394a3b7978cab928fd0f6ea44893df7a Mon Sep 17 00:00:00 2001
From: wowba <leeyuwk54@gmail.com>
Date: Wed, 24 Jan 2024 12:16:24 +0900
Subject: [PATCH 50/57] =?UTF-8?q?feat=20:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A1=9C=EA=B3=A0=20=EB=A7=81?=
 =?UTF-8?q?=ED=81=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/signInPage/SignIn.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/signInPage/SignIn.tsx b/src/pages/signInPage/SignIn.tsx
index 325c419b..36932623 100644
--- a/src/pages/signInPage/SignIn.tsx
+++ b/src/pages/signInPage/SignIn.tsx
@@ -1,6 +1,6 @@
 import * as S from "./SignIn.style";
 import { useForm } from "react-hook-form";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import useToastConfig from "@hooks/common/useToastConfig";
 import { PATH } from "@constants/path";
 import { useUserInfoStore } from "@/store/store";
@@ -71,7 +71,9 @@ const SignIn = () => {
 
   return (
     <S.SignInContainer onSubmit={handleSubmit(handleOnSubmit)}>
-      <S.SignInLogo />
+      <Link to="/">
+        <S.SignInLogo />
+      </Link>
 
       <S.SignInInputContainer>
         <S.SignInInputWrapper>

From 9ebdcd0cf065f07cf237b7039c548df351a9a9ab Mon Sep 17 00:00:00 2001
From: Bumang-Cyber <jove0729@naver.com>
Date: Wed, 24 Jan 2024 12:28:37 +0900
Subject: [PATCH 51/57] =?UTF-8?q?fix:=20eslint=20useEffect=EC=9D=98?=
 =?UTF-8?q?=EC=A1=B4=EC=84=B1=EB=B0=B0=EC=97=B4=20=EC=98=88=EC=99=B8?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/common/useAnimateCarousel.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/hooks/common/useAnimateCarousel.ts b/src/hooks/common/useAnimateCarousel.ts
index 7892d730..68501fe7 100644
--- a/src/hooks/common/useAnimateCarousel.ts
+++ b/src/hooks/common/useAnimateCarousel.ts
@@ -33,6 +33,7 @@ export const useAnimateCarousel = ({
     }, 3000);
 
     return () => clearInterval(interval);
+    // eslint-disable-next-line
   }, [isPlay]);
 
   const handleDragChange = (deltaX: number) => {

From 62d694c16c8a5a1a20673fe8e01abd95d569d5c9 Mon Sep 17 00:00:00 2001
From: Bumang-Cyber <jove0729@naver.com>
Date: Wed, 24 Jan 2024 14:55:09 +0900
Subject: [PATCH 52/57] =?UTF-8?q?fix:=20api=20=EC=97=B0=EB=8F=99=20?=
 =?UTF-8?q?=ED=9B=84=20=EC=A7=80=EC=97=AD=20=EC=BA=90=EB=A1=9C=EC=85=80=20?=
 =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EB=9D=BC=EB=B2=A8=EB=A7=81=20?=
 =?UTF-8?q?=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/fetchMainItems.ts                    |  11 +-
 src/components/itemCarousel/ItemCarousel.tsx  |   9 +-
 .../ItemCarouselUnit.style.ts                 |   4 +
 .../itemCarouselUnit/ItemCarouselUnit.tsx     |  29 +-
 src/pages/homePage/Home.tsx                   | 432 +++++++++---------
 .../percentAnimator/PercentAnimator.tsx       |  63 +--
 src/types/saleSection.ts                      |   8 +-
 7 files changed, 264 insertions(+), 292 deletions(-)

diff --git a/src/apis/fetchMainItems.ts b/src/apis/fetchMainItems.ts
index eb55f848..b89ca34b 100644
--- a/src/apis/fetchMainItems.ts
+++ b/src/apis/fetchMainItems.ts
@@ -1,12 +1,17 @@
+import { LocaleItemsType, WeekendItem } from "./../types/saleSection";
 import { axiosInstance } from "@apis/axiosInstance";
 import { END_POINTS } from "@/constants/api";
 
 // 유저 정보를 불러오는 api입니다.
-export const fetchMainItem = async () => {
+export const fetchMainItem = async (): Promise<
+  [LocaleItemsType, WeekendItem[]]
+> => {
   const { data } = await axiosInstance.get(
     END_POINTS.MAIN +
       "?cityNames=서울&cityNames=강원&cityNames=부산&cityNames=제주&cityNames=경상&cityNames=전라",
   );
-  console.log(data.data);
-  return data.data;
+  const { weekend, ...locale } = data.data;
+  const temp = weekend.content;
+
+  return [locale, temp];
 };
diff --git a/src/components/itemCarousel/ItemCarousel.tsx b/src/components/itemCarousel/ItemCarousel.tsx
index 2545752e..20b67ad9 100644
--- a/src/components/itemCarousel/ItemCarousel.tsx
+++ b/src/components/itemCarousel/ItemCarousel.tsx
@@ -69,9 +69,12 @@ const ItemCarousel = ({
           onTransitionEnd={draggable ? handleSliderTransitionEnd : undefined}
         >
           {innerShadow && <S.ImageShadowWrapper />}
-          {localeAndHotel.map((item) => (
-            <ItemCarouselUnit key={item[2][0].id} item={item} />
-          ))}
+          {localeAndHotel.map(
+            (item) =>
+              item[2].length && (
+                <ItemCarouselUnit key={item[2][0]?.id} item={item} />
+              ),
+          )}
         </S.SliderContainer>
       </S.SliderWrapper>
       {arrows && (
diff --git a/src/components/itemCarousel/itemCarouselUnit/ItemCarouselUnit.style.ts b/src/components/itemCarousel/itemCarouselUnit/ItemCarouselUnit.style.ts
index 70a2161c..73fd10bb 100644
--- a/src/components/itemCarousel/itemCarouselUnit/ItemCarouselUnit.style.ts
+++ b/src/components/itemCarousel/itemCarouselUnit/ItemCarouselUnit.style.ts
@@ -64,6 +64,10 @@ export const ItemUnit = styled.div`
       object-fit: cover;
     }
   }
+
+  & h1 span {
+    margin-left: 8px;
+  }
 `;
 
 export const Sticker = styled.div`
diff --git a/src/components/itemCarousel/itemCarouselUnit/ItemCarouselUnit.tsx b/src/components/itemCarousel/itemCarouselUnit/ItemCarouselUnit.tsx
index 0be958d6..365790c9 100644
--- a/src/components/itemCarousel/itemCarouselUnit/ItemCarouselUnit.tsx
+++ b/src/components/itemCarousel/itemCarouselUnit/ItemCarouselUnit.tsx
@@ -1,8 +1,9 @@
-import { format } from "date-fns";
+import { format, parseISO } from "date-fns";
 import * as S from "./ItemCarouselUnit.style";
 import { LocaleItem } from "@type/saleSection";
 import { useNavigate } from "react-router-dom";
 import { PATH } from "@constants/path";
+import priceFormat from "@utils/priceFormat";
 
 interface UnitProps {
   item: [number, string, LocaleItem[]];
@@ -11,10 +12,16 @@ interface UnitProps {
 const ItemCarouselUnit = ({ item }: UnitProps) => {
   const navigate = useNavigate();
   const [, , hotel] = item;
-  const CHKIN0 = format(hotel[0].checkInDate, "mm.dd");
-  const CHKOUT0 = format(hotel[0].checkOutDate, "mm.dd");
-  const CHKIN1 = format(hotel[1].checkInDate, "mm.dd");
-  const CHKOUT1 = format(hotel[1].checkOutDate, "mm.dd");
+
+  const CHKIN0 = format(parseISO(hotel[0].checkInDate), "MM.dd");
+  const CHKOUT0 = format(parseISO(hotel[0].checkOutDate), "MM.dd");
+
+  const CHKIN1 = hotel[1]
+    ? format(parseISO(hotel[1].checkInDate), "MM.dd")
+    : "";
+  const CHKOUT1 = hotel[1]
+    ? format(parseISO(hotel[1].checkOutDate), "MM.dd")
+    : "";
 
   const onClickHandler = (num: number) => {
     navigate(PATH.DETAIL_ROOM + "/" + hotel[num].id);
@@ -27,7 +34,7 @@ const ItemCarouselUnit = ({ item }: UnitProps) => {
           <img src={hotel[0].imageUrl} />
           <div className="item-info">
             <div className="hotel_title">
-              <h1>{hotel[0].name}</h1>
+              <h1>{hotel[0].hotelName}</h1>
               <h3>{hotel[0].roomType}</h3>
               <S.Sticker>
                 {CHKIN0} ~ {CHKOUT0}
@@ -36,8 +43,8 @@ const ItemCarouselUnit = ({ item }: UnitProps) => {
             <div className="hotel_price">
               <h5>{hotel[0].originalPrice}</h5>
               <h1>
-                {hotel[0].salePrice}{" "}
-                <span>{hotel[0].salePercentage * 100}%</span>
+                {priceFormat(hotel[0].salePrice)}원
+                <span>{Math.floor(hotel[0].salePercentage * 100)}%</span>
               </h1>
             </div>
           </div>
@@ -48,7 +55,7 @@ const ItemCarouselUnit = ({ item }: UnitProps) => {
           <img src={hotel[1].imageUrl} />
           <div className="item-info">
             <div className="hotel_title">
-              <h1>{hotel[1].name}</h1>
+              <h1>{hotel[1].hotelName}</h1>
               <h3>{hotel[1].roomType}</h3>
               <S.Sticker>
                 {CHKIN1} ~ {CHKOUT1}
@@ -57,8 +64,8 @@ const ItemCarouselUnit = ({ item }: UnitProps) => {
             <div className="hotel_price">
               <h5>{hotel[1].originalPrice}</h5>
               <h1>
-                {hotel[1].salePrice}{" "}
-                <span>{hotel[1].salePercentage * 100}%</span>
+                {priceFormat(hotel[1].salePrice)} 원
+                <span>{Math.floor(hotel[1].salePercentage * 100)}%</span>
               </h1>
             </div>
           </div>
diff --git a/src/pages/homePage/Home.tsx b/src/pages/homePage/Home.tsx
index 46e28718..63277a0e 100644
--- a/src/pages/homePage/Home.tsx
+++ b/src/pages/homePage/Home.tsx
@@ -3,12 +3,7 @@ import { useState } from "react";
 import * as S from "./Home.style";
 import TitleSection from "./titleSection/TitleSection";
 import NavToSearchSection from "./navToSearchSection/NavToSearchSection";
-import {
-  LocaleItemsType,
-  LocaleItem,
-  WeekendItemsType,
-  WeekendItem,
-} from "@type/saleSection";
+import { LocaleItem, WeekendItem } from "@type/saleSection";
 import { fetchMainItem } from "@apis/fetchMainItems";
 
 import { locale } from "@constants/locale";
@@ -18,217 +13,217 @@ import TextLocaleAnimator from "./textAnimator/TextAnimator";
 import PercentAnimator from "./percentAnimator/PercentAnimator";
 
 const Home = () => {
-  const { data: MainData } = useSuspenseQuery({
+  const { data: mainData } = useSuspenseQuery({
     queryKey: ["main"],
     queryFn: fetchMainItem,
   });
+  const [localeProds, weekendProds] = mainData;
 
-  console.log(MainData);
-
-  const weekendProds: WeekendItemsType = {
-    weekend: [
-      {
-        id: 103,
-        name: "시그니엘 레지던스",
-        roomType: "스탠다드 더블",
-        imageUrl:
-          "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
-        originalPrice: 2400000,
-        salePrice: 1200000,
-        salePercentage: 0.5,
-        checkInDate: "2023-11-12",
-        checkOutDate: "2023-11-14",
-        brunch: true,
-        pool: true,
-        oceanView: true,
-      },
-      {
-        id: 104,
-        name: "시그니엘 레지던스 강릉",
-        roomType: "스탠다드 더블",
-        imageUrl:
-          "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
-        originalPrice: 2400000,
-        salePrice: 1200000,
-        salePercentage: 0.5,
-        checkInDate: "2023-11-12",
-        checkOutDate: "2023-11-14",
-        brunch: true,
-        pool: true,
-        oceanView: true,
-      },
-    ],
-  };
-  const localeProds: LocaleItemsType = {
-    seoul: [
-      {
-        id: 101,
-        city: "부산",
-        name: "시그니엘 레지던스",
-        roomType: "스탠다드 더블",
-        imageUrl:
-          "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
-        originalPrice: 2400000,
-        salePrice: 1200000,
-        salePercentage: 0.3,
-        checkInDate: "2023-11-12",
-        checkOutDate: "2023-11-14",
-      },
-      {
-        id: 102,
-        city: "부산",
-        name: "시그니엘 레지던스",
-        roomType: "스탠다드 더블",
-        imageUrl:
-          "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
-        originalPrice: 2400000,
-        salePrice: 1200000,
-        salePercentage: 0.2,
-        checkInDate: "2023-11-12",
-        checkOutDate: "2023-11-14",
-      },
-    ],
-    gangwon: [
-      {
-        id: 103,
-        city: "부산",
-        name: "시그니엘 레지던스",
-        roomType: "스탠다드 더블",
-        imageUrl:
-          "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
-        originalPrice: 2400000,
-        salePrice: 1200000,
-        salePercentage: 0.2,
-        checkInDate: "2023-11-12",
-        checkOutDate: "2023-11-14",
-      },
-      {
-        id: 104,
-        city: "부산",
-        name: "시그니엘 레지던스",
-        roomType: "스탠다드 더블",
-        imageUrl:
-          "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
-        originalPrice: 2400000,
-        salePrice: 1200000,
-        salePercentage: 0.1,
-        checkInDate: "2023-11-12",
-        checkOutDate: "2023-11-14",
-      },
-    ],
-    busan: [
-      {
-        id: 105,
-        city: "부산",
-        name: "시그니엘 레지던스",
-        roomType: "스탠다드 더블",
-        imageUrl:
-          "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
-        originalPrice: 2400000,
-        salePrice: 1200000,
-        salePercentage: 0.53,
-        checkInDate: "2023-11-12",
-        checkOutDate: "2023-11-14",
-      },
-      {
-        id: 106,
-        city: "부산",
-        name: "시그니엘 레지던스",
-        roomType: "스탠다드 더블",
-        imageUrl:
-          "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
-        originalPrice: 2400000,
-        salePrice: 1200000,
-        salePercentage: 0.45,
-        checkInDate: "2023-11-12",
-        checkOutDate: "2023-11-14",
-      },
-    ],
-    jeju: [
-      {
-        id: 107,
-        city: "부산",
-        name: "시그니엘 레지던스",
-        roomType: "스탠다드 더블",
-        imageUrl:
-          "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
-        originalPrice: 2400000,
-        salePrice: 1200000,
-        salePercentage: 0.45,
-        checkInDate: "2023-11-12",
-        checkOutDate: "2023-11-14",
-      },
-      {
-        id: 108,
-        city: "부산",
-        name: "시그니엘 레지던스",
-        roomType: "스탠다드 더블",
-        imageUrl:
-          "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
-        originalPrice: 2400000,
-        salePrice: 1200000,
-        salePercentage: 0.4,
-        checkInDate: "2023-11-12",
-        checkOutDate: "2023-11-14",
-      },
-    ],
-    gyeongsang: [
-      {
-        id: 109,
-        city: "부산",
-        name: "시그니엘 레지던스",
-        roomType: "스탠다드 더블",
-        imageUrl:
-          "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
-        originalPrice: 2400000,
-        salePrice: 1200000,
-        salePercentage: 0.5,
-        checkInDate: "2023-11-12",
-        checkOutDate: "2023-11-14",
-      },
-      {
-        id: 110,
-        city: "부산",
-        name: "시그니엘 레지던스",
-        roomType: "스탠다드 더블",
-        imageUrl:
-          "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
-        originalPrice: 2400000,
-        salePrice: 1200000,
-        salePercentage: 0.1,
-        checkInDate: "2023-11-12",
-        checkOutDate: "2023-11-14",
-      },
-    ],
-    jeolla: [
-      {
-        id: 111,
-        city: "부산",
-        name: "시그니엘 레지던스",
-        roomType: "스탠다드 더블",
-        imageUrl:
-          "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
-        originalPrice: 2400000,
-        salePrice: 1200000,
-        salePercentage: 0.34,
-        checkInDate: "2023-11-12",
-        checkOutDate: "2023-11-14",
-      },
-      {
-        id: 112,
-        city: "부산",
-        name: "시그니엘 레지던스",
-        roomType: "스탠다드 더블",
-        imageUrl:
-          "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
-        originalPrice: 2400000,
-        salePrice: 1200000,
-        salePercentage: 0.2,
-        checkInDate: "2023-11-12",
-        checkOutDate: "2023-11-14",
-      },
-    ],
-  };
+  console.log(mainData, "api");
+  // const weekendProds: WeekendItemsType = {
+  //   weekend: [
+  //     {
+  //       id: 103,
+  //       name: "시그니엘 레지던스",
+  //       roomType: "스탠다드 더블",
+  //       imageUrl:
+  //         "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
+  //       originalPrice: 2400000,
+  //       salePrice: 1200000,
+  //       salePercentage: 0.5,
+  //       checkInDate: "2023-11-12",
+  //       checkOutDate: "2023-11-14",
+  //       brunch: true,
+  //       pool: true,
+  //       oceanView: true,
+  //     },
+  //     {
+  //       id: 104,
+  //       name: "시그니엘 레지던스 강릉",
+  //       roomType: "스탠다드 더블",
+  //       imageUrl:
+  //         "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
+  //       originalPrice: 2400000,
+  //       salePrice: 1200000,
+  //       salePercentage: 0.5,
+  //       checkInDate: "2023-11-12",
+  //       checkOutDate: "2023-11-14",
+  //       brunch: true,
+  //       pool: true,
+  //       oceanView: true,
+  //     },
+  //   ],
+  // };
+  // const localeProds: LocaleItemsType = {
+  //   seoul: [
+  //     {
+  //       id: 101,
+  //       city: "부산",
+  //       name: "시그니엘 레지던스",
+  //       roomType: "스탠다드 더블",
+  //       imageUrl:
+  //         "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
+  //       originalPrice: 2400000,
+  //       salePrice: 1200000,
+  //       salePercentage: 0.3,
+  //       checkInDate: "2023-11-12",
+  //       checkOutDate: "2023-11-14",
+  //     },
+  //     {
+  //       id: 102,
+  //       city: "부산",
+  //       name: "시그니엘 레지던스",
+  //       roomType: "스탠다드 더블",
+  //       imageUrl:
+  //         "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
+  //       originalPrice: 2400000,
+  //       salePrice: 1200000,
+  //       salePercentage: 0.2,
+  //       checkInDate: "2023-11-12",
+  //       checkOutDate: "2023-11-14",
+  //     },
+  //   ],
+  //   gangwon: [
+  //     {
+  //       id: 103,
+  //       city: "부산",
+  //       name: "시그니엘 레지던스",
+  //       roomType: "스탠다드 더블",
+  //       imageUrl:
+  //         "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
+  //       originalPrice: 2400000,
+  //       salePrice: 1200000,
+  //       salePercentage: 0.2,
+  //       checkInDate: "2023-11-12",
+  //       checkOutDate: "2023-11-14",
+  //     },
+  //     {
+  //       id: 104,
+  //       city: "부산",
+  //       name: "시그니엘 레지던스",
+  //       roomType: "스탠다드 더블",
+  //       imageUrl:
+  //         "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
+  //       originalPrice: 2400000,
+  //       salePrice: 1200000,
+  //       salePercentage: 0.1,
+  //       checkInDate: "2023-11-12",
+  //       checkOutDate: "2023-11-14",
+  //     },
+  //   ],
+  //   busan: [
+  //     {
+  //       id: 105,
+  //       city: "부산",
+  //       name: "시그니엘 레지던스",
+  //       roomType: "스탠다드 더블",
+  //       imageUrl:
+  //         "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
+  //       originalPrice: 2400000,
+  //       salePrice: 1200000,
+  //       salePercentage: 0.53,
+  //       checkInDate: "2023-11-12",
+  //       checkOutDate: "2023-11-14",
+  //     },
+  //     {
+  //       id: 106,
+  //       city: "부산",
+  //       name: "시그니엘 레지던스",
+  //       roomType: "스탠다드 더블",
+  //       imageUrl:
+  //         "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
+  //       originalPrice: 2400000,
+  //       salePrice: 1200000,
+  //       salePercentage: 0.45,
+  //       checkInDate: "2023-11-12",
+  //       checkOutDate: "2023-11-14",
+  //     },
+  //   ],
+  //   jeju: [
+  //     {
+  //       id: 107,
+  //       city: "부산",
+  //       name: "시그니엘 레지던스",
+  //       roomType: "스탠다드 더블",
+  //       imageUrl:
+  //         "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
+  //       originalPrice: 2400000,
+  //       salePrice: 1200000,
+  //       salePercentage: 0.45,
+  //       checkInDate: "2023-11-12",
+  //       checkOutDate: "2023-11-14",
+  //     },
+  //     {
+  //       id: 108,
+  //       city: "부산",
+  //       name: "시그니엘 레지던스",
+  //       roomType: "스탠다드 더블",
+  //       imageUrl:
+  //         "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
+  //       originalPrice: 2400000,
+  //       salePrice: 1200000,
+  //       salePercentage: 0.4,
+  //       checkInDate: "2023-11-12",
+  //       checkOutDate: "2023-11-14",
+  //     },
+  //   ],
+  //   gyeongsang: [
+  //     {
+  //       id: 109,
+  //       city: "부산",
+  //       name: "시그니엘 레지던스",
+  //       roomType: "스탠다드 더블",
+  //       imageUrl:
+  //         "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
+  //       originalPrice: 2400000,
+  //       salePrice: 1200000,
+  //       salePercentage: 0.5,
+  //       checkInDate: "2023-11-12",
+  //       checkOutDate: "2023-11-14",
+  //     },
+  //     {
+  //       id: 110,
+  //       city: "부산",
+  //       name: "시그니엘 레지던스",
+  //       roomType: "스탠다드 더블",
+  //       imageUrl:
+  //         "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
+  //       originalPrice: 2400000,
+  //       salePrice: 1200000,
+  //       salePercentage: 0.1,
+  //       checkInDate: "2023-11-12",
+  //       checkOutDate: "2023-11-14",
+  //     },
+  //   ],
+  //   jeolla: [
+  //     {
+  //       id: 111,
+  //       city: "부산",
+  //       name: "시그니엘 레지던스",
+  //       roomType: "스탠다드 더블",
+  //       imageUrl:
+  //         "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
+  //       originalPrice: 2400000,
+  //       salePrice: 1200000,
+  //       salePercentage: 0.34,
+  //       checkInDate: "2023-11-12",
+  //       checkOutDate: "2023-11-14",
+  //     },
+  //     {
+  //       id: 112,
+  //       city: "부산",
+  //       name: "시그니엘 레지던스",
+  //       roomType: "스탠다드 더블",
+  //       imageUrl:
+  //         "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
+  //       originalPrice: 2400000,
+  //       salePrice: 1200000,
+  //       salePercentage: 0.2,
+  //       checkInDate: "2023-11-12",
+  //       checkOutDate: "2023-11-14",
+  //     },
+  //   ],
+  // };
 
   // 지역 별 할인 관련 데이터
   const localeEntries: [number, string, LocaleItem[]][] = Object.entries(
@@ -238,6 +233,8 @@ const Home = () => {
     .map((v, i) => [i, v[0], v[1]]);
 
   const [localeAndHotel] = useState(localeEntries);
+
+  console.log(localeAndHotel, "LAH");
   const [currentLocale, setCurrentLocale] = useState<
     [number, string, LocaleItem[]]
   >(localeAndHotel[0]);
@@ -246,9 +243,10 @@ const Home = () => {
     .map((_, i) => i);
 
   // 주말 특가 관련 데이터
-  const WeekendMapped: [number, WeekendItem][] = weekendProds["weekend"].map(
-    (v, i) => [i, v],
-  );
+  const WeekendMapped: [number, WeekendItem][] = weekendProds.map((v, i) => [
+    i,
+    v,
+  ]);
   const [weekendHotels] = useState(WeekendMapped);
 
   return (
@@ -261,7 +259,7 @@ const Home = () => {
           <TextLocaleAnimator text={locale[currentLocale[1]]} />
           <span>지역</span>
           <PercentAnimator
-            percent={currentLocale[2][0].salePercentage}
+            percent={currentLocale[2][0]?.salePercentage}
             localeAndHotel={localeAndHotel}
           />
           <span>할인 호텔</span>
diff --git a/src/pages/homePage/percentAnimator/PercentAnimator.tsx b/src/pages/homePage/percentAnimator/PercentAnimator.tsx
index e056bfff..81f73009 100644
--- a/src/pages/homePage/percentAnimator/PercentAnimator.tsx
+++ b/src/pages/homePage/percentAnimator/PercentAnimator.tsx
@@ -11,57 +11,18 @@ const PercentAnimator = ({
 }) => {
   return (
     <S.Container>
-      {localeAndHotel.map((item) => (
-        <AnimatePresence>
-          {item[2][0].salePercentage === percent && (
-            <S.PercentDiv animate={{ y: [30, 0] }} exit={{ y: [0, -30] }}>
-              최대 {percent * 100}%
-            </S.PercentDiv>
-          )}
-        </AnimatePresence>
-      ))}
-      {/* <AnimatePresence>
-        {percent === "서울" && (
-          <S.PercentDiv animate={{ y: [30, 0] }} exit={{ y: [0, -30] }}>
-            서울
-          </S.PercentDiv>
-        )}
-      </AnimatePresence>
-      <AnimatePresence>
-        {percent === "부산" && (
-          <S.PercentDiv animate={{ y: [30, 0] }} exit={{ y: [0, -30] }}>
-            부산
-          </S.PercentDiv>
-        )}
-      </AnimatePresence>
-      <AnimatePresence>
-        {percent === "제주" && (
-          <S.PercentDiv animate={{ y: [30, 0] }} exit={{ y: [0, -30] }}>
-            제주
-          </S.PercentDiv>
-        )}
-      </AnimatePresence>
-      <AnimatePresence>
-        {percent === "강원" && (
-          <S.PercentDiv animate={{ y: [30, 0] }} exit={{ y: [0, -30] }}>
-            강원
-          </S.PercentDiv>
-        )}
-      </AnimatePresence>
-      <AnimatePresence>
-        {percent === "전라" && (
-          <S.PercentDiv animate={{ y: [30, 0] }} exit={{ y: [0, -30] }}>
-            전라
-          </S.PercentDiv>
-        )}
-      </AnimatePresence>
-      <AnimatePresence>
-        {percent === "경상" && (
-          <S.PercentDiv animate={{ y: [30, 0] }} exit={{ y: [0, -30] }}>
-            경상
-          </S.PercentDiv>
-        )}
-      </AnimatePresence> */}
+      {localeAndHotel.map(
+        (item) =>
+          item[2].length && (
+            <AnimatePresence key={item[2][0]?.id}>
+              {item[2][0]?.salePercentage === percent && (
+                <S.PercentDiv animate={{ y: [30, 0] }} exit={{ y: [0, -30] }}>
+                  최대 {Math.floor(percent * 100)}%
+                </S.PercentDiv>
+              )}
+            </AnimatePresence>
+          ),
+      )}
     </S.Container>
   );
 };
diff --git a/src/types/saleSection.ts b/src/types/saleSection.ts
index 88cb4dcb..1c3c578d 100644
--- a/src/types/saleSection.ts
+++ b/src/types/saleSection.ts
@@ -2,7 +2,7 @@ import { Nullable } from "@type/nullable";
 export interface LocaleItem {
   id: number;
   city: string;
-  name: string;
+  hotelName: string;
   roomType: string;
   imageUrl: string;
   originalPrice: number;
@@ -26,9 +26,3 @@ export type WeekendItem = Omit<LocaleItem, "city"> & {
   pool: boolean;
   oceanView: boolean;
 };
-
-export interface WeekendItemsType {
-  [weekend: string]: WeekendItem[];
-}
-
-export type MainApiType = LocaleItemsType & WeekendItemsType;

From 6790cc4728df89b4902bb2f5efa6915a3728c114 Mon Sep 17 00:00:00 2001
From: Bumang-Cyber <jove0729@naver.com>
Date: Wed, 24 Jan 2024 15:11:37 +0900
Subject: [PATCH 53/57] =?UTF-8?q?fix:=20=EC=A3=BC=EB=A7=90=20=ED=8A=B9?=
 =?UTF-8?q?=EA=B0=80=20=EB=B6=80=EB=B6=84=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?=
 =?UTF-8?q?=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../itemCarouselUnit/ItemCarouselUnit.tsx     |  2 +-
 .../weekendCarouselUnit/WeekendUnit.tsx       | 22 +++++++++++++------
 src/types/saleSection.ts                      |  6 ++---
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/itemCarousel/itemCarouselUnit/ItemCarouselUnit.tsx b/src/components/itemCarousel/itemCarouselUnit/ItemCarouselUnit.tsx
index 365790c9..6fdde52d 100644
--- a/src/components/itemCarousel/itemCarouselUnit/ItemCarouselUnit.tsx
+++ b/src/components/itemCarousel/itemCarouselUnit/ItemCarouselUnit.tsx
@@ -43,7 +43,7 @@ const ItemCarouselUnit = ({ item }: UnitProps) => {
             <div className="hotel_price">
               <h5>{hotel[0].originalPrice}</h5>
               <h1>
-                {priceFormat(hotel[0].salePrice)}원
+                {priceFormat(hotel[0].salePrice)} 원
                 <span>{Math.floor(hotel[0].salePercentage * 100)}%</span>
               </h1>
             </div>
diff --git a/src/pages/homePage/weekendCarousel/weekendCarouselUnit/WeekendUnit.tsx b/src/pages/homePage/weekendCarousel/weekendCarouselUnit/WeekendUnit.tsx
index 305f87ce..4476aeb6 100644
--- a/src/pages/homePage/weekendCarousel/weekendCarouselUnit/WeekendUnit.tsx
+++ b/src/pages/homePage/weekendCarousel/weekendCarouselUnit/WeekendUnit.tsx
@@ -22,20 +22,28 @@ const WeekendlUnit = ({ item }: UnitProps) => {
     <S.LocaleWrapper onClick={onClickHandler}>
       <img src={item[1].imageUrl} alt="" />
       <S.Stickers>
-        <section>{item[1].brunch && "조식제공"}</section>
-        <section>{item[1].pool && "수영장"}</section>
-        <section>{item[1].oceanView && "오션뷰"}</section>
+        {item[1].isBrunchIncluded && (
+          <section>{item[1].isBrunchIncluded && "조식제공"}</section>
+        )}
+        {item[1].isPoolIncluded && (
+          <section>{item[1].isPoolIncluded && "수영장"}</section>
+        )}
+        {item[1].isOceanViewIncluded && (
+          <section>{item[1].isOceanViewIncluded && "오션뷰"}</section>
+        )}
       </S.Stickers>
       <S.Titles>
-        <h1>{item[1].name}</h1>
+        <h1>{item[1].hotelName}</h1>
         <h3>{item[1].roomType}</h3>
       </S.Titles>
       <S.Price>
-        <h4>{priceFormat(item[1].originalPrice)}</h4>
+        <h4>{priceFormat(item[1].originalPrice)}원</h4>
         <section>
           <S.Discounted>
-            <h1>{priceFormat(item[1].salePrice)}원</h1>
-            <h1 className="percentage">{item[1].salePercentage * 100}%</h1>
+            <h1>{priceFormat(item[1].salePrice)} 원</h1>
+            <h1 className="percentage">
+              {Math.floor(item[1].salePercentage * 100)}%
+            </h1>
           </S.Discounted>
           <S.Period>
             {CHKIN} ~ {CHKOUT}
diff --git a/src/types/saleSection.ts b/src/types/saleSection.ts
index 1c3c578d..56a042ef 100644
--- a/src/types/saleSection.ts
+++ b/src/types/saleSection.ts
@@ -22,7 +22,7 @@ export interface LocaleItemsType {
 }
 
 export type WeekendItem = Omit<LocaleItem, "city"> & {
-  brunch: boolean;
-  pool: boolean;
-  oceanView: boolean;
+  isBrunchIncluded: boolean;
+  isPoolIncluded: boolean;
+  isOceanViewIncluded: boolean;
 };

From fa039a0e2fe6a837cadfdd0cb04fa2096fca7de1 Mon Sep 17 00:00:00 2001
From: Bumang-Cyber <jove0729@naver.com>
Date: Wed, 24 Jan 2024 15:16:16 +0900
Subject: [PATCH 54/57] =?UTF-8?q?feat:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/homePage/Home.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/pages/homePage/Home.tsx b/src/pages/homePage/Home.tsx
index 63277a0e..2802dced 100644
--- a/src/pages/homePage/Home.tsx
+++ b/src/pages/homePage/Home.tsx
@@ -19,10 +19,6 @@ const Home = () => {
   });
   const [localeProds, weekendProds] = mainData;
 
-  console.log(mainData, "api");
-  // const weekendProds: WeekendItemsType = {
-  //   weekend: [
-  //     {
   //       id: 103,
   //       name: "시그니엘 레지던스",
   //       roomType: "스탠다드 더블",

From aafa9b9fbca581b2653aac88471b91c5cf7b73cc Mon Sep 17 00:00:00 2001
From: Bumang-Cyber <jove0729@naver.com>
Date: Wed, 24 Jan 2024 15:17:03 +0900
Subject: [PATCH 55/57] =?UTF-8?q?fix:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/homePage/Home.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/homePage/Home.tsx b/src/pages/homePage/Home.tsx
index 2802dced..c5abde64 100644
--- a/src/pages/homePage/Home.tsx
+++ b/src/pages/homePage/Home.tsx
@@ -230,7 +230,6 @@ const Home = () => {
 
   const [localeAndHotel] = useState(localeEntries);
 
-  console.log(localeAndHotel, "LAH");
   const [currentLocale, setCurrentLocale] = useState<
     [number, string, LocaleItem[]]
   >(localeAndHotel[0]);

From 8086735155c6db49f7507edd4ec4d16b8af89c6d Mon Sep 17 00:00:00 2001
From: Bumang-Cyber <jove0729@naver.com>
Date: Wed, 24 Jan 2024 15:33:09 +0900
Subject: [PATCH 56/57] =?UTF-8?q?fix:=20duplicate=20Identifier=20=ED=95=B4?=
 =?UTF-8?q?=EC=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/signInPage/SignIn.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/signInPage/SignIn.tsx b/src/pages/signInPage/SignIn.tsx
index d50b3ad7..36932623 100644
--- a/src/pages/signInPage/SignIn.tsx
+++ b/src/pages/signInPage/SignIn.tsx
@@ -6,7 +6,6 @@ import { PATH } from "@constants/path";
 import { useUserInfoStore } from "@/store/store";
 import { postLogin } from "@apis/fetchLogin";
 import { getMessaging, getToken } from "firebase/messaging";
-import useToastConfig from "@hooks/common/useToastConfig";
 
 type FormValues = {
   email: string;

From 998ed6b1513bf0e2621f504a6489966bde97f093 Mon Sep 17 00:00:00 2001
From: Bumang-Cyber <jove0729@naver.com>
Date: Wed, 24 Jan 2024 16:27:14 +0900
Subject: [PATCH 57/57] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=ED=95=84?=
 =?UTF-8?q?=ED=84=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EB=9D=BC?=
 =?UTF-8?q?=EC=9A=B0=ED=8C=85=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/homePage/navToSearchSection/NavToSearchSection.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/homePage/navToSearchSection/NavToSearchSection.tsx b/src/pages/homePage/navToSearchSection/NavToSearchSection.tsx
index ec4a0a25..22ffd18d 100644
--- a/src/pages/homePage/navToSearchSection/NavToSearchSection.tsx
+++ b/src/pages/homePage/navToSearchSection/NavToSearchSection.tsx
@@ -6,7 +6,7 @@ const NavToSearchSection = () => {
   const navigate = useNavigate();
 
   return (
-    <S.Container onClick={() => navigate(PATH.SEARCHLIST)}>
+    <S.Container onClick={() => navigate(PATH.SEARCH_FILTER)}>
       <h4>어떤 호텔을 찾으세요?</h4>
       <S.SearchIcon />
     </S.Container>