From b21afb8fe340d3cf1cc1ac4127a1cbb72cc42b50 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Wed, 24 Jan 2024 14:58:35 +0900
Subject: [PATCH 01/14] =?UTF-8?q?fix:=20=ED=97=A4=EB=8D=94,=20=EB=84=A4?=
 =?UTF-8?q?=EB=B9=84=EB=B0=94=20=EB=B6=84=EB=A6=AC=ED=95=B4=EC=84=9C=20?=
 =?UTF-8?q?=EC=82=AC=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx           |  4 ++--
 src/routes/router.tsx | 44 ++++++++++++++++++++++++++++++++++++-------
 2 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 2135aea4..4fcff87f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,11 +12,11 @@ function App() {
   const toastConfig = useToastStore((state) => state.config);
 
   return (
-    <Layout>
+    <>
       <ScrollToTop />
       <AnimatePresence>{toastConfig.isShow && <Toast />}</AnimatePresence>
       <Outlet />
-    </Layout>
+    </>
   );
 }
 
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index b8a57bc4..c180f511 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -32,6 +32,7 @@ import PaymentSuccess from "@pages/paymentSuccessPage/PaymentSuccess";
 import EditAccount from "@pages/myPage/manage/editAccount/EditAccount";
 import Loading from "@components/loading/Loading";
 import SaleDetail from "@pages/saleDetailPage/SaleDetail";
+import Layout from "@components/layout/Layout";
 
 export const router = createBrowserRouter([
   {
@@ -47,10 +48,42 @@ export const router = createBrowserRouter([
         path: "",
         element: <Home />,
       },
-
       {
-        path: PATH.SEARCHLIST,
-        element: <Search />,
+        element: (
+          <Layout>
+            <Outlet />
+          </Layout>
+        ),
+        children: [
+          {
+            path: PATH.SEARCHLIST,
+            element: <Search />,
+          },
+          {
+            path: PATH.WRITE_TRANSFER,
+            element: (
+              <LocalErrorBoundary>
+                <Suspense fallback={<div>{/* loading */}</div>}>
+                  <TransferWriting />
+                </Suspense>
+              </LocalErrorBoundary>
+            ),
+          },
+          {
+            path: PATH.PURCAHSE_DEATAIL,
+            element: (
+              <LocalErrorBoundary>
+                <Suspense fallback={<div>LOADING</div>}>
+                  <PurchaseDetail />
+                </Suspense>
+              </LocalErrorBoundary>
+            ),
+          },
+          {
+            path: PATH.SETTING,
+            element: <Setting />,
+          },
+        ],
       },
       {
         path: PATH.SIGNUP,
@@ -75,10 +108,7 @@ export const router = createBrowserRouter([
           },
         ],
       },
-      {
-        path: PATH.SETTING,
-        element: <Setting />,
-      },
+
       {
         path: PATH.MANAGE_PROFILE,
         element: <ManageProfile />,

From ae2be85ca5e44771721bc13b872b50e6bc022818 Mon Sep 17 00:00:00 2001
From: wowba <leeyuwk54@gmail.com>
Date: Wed, 24 Jan 2024 18:27:06 +0900
Subject: [PATCH 02/14] =?UTF-8?q?Feat=20:=20TestLayout=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/TestLayout.tsx | 39 ++++++++++++++++++++++++++++
 src/routes/router.tsx                | 19 ++++++++++++--
 2 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 src/components/layout/TestLayout.tsx

diff --git a/src/components/layout/TestLayout.tsx b/src/components/layout/TestLayout.tsx
new file mode 100644
index 00000000..63f62f61
--- /dev/null
+++ b/src/components/layout/TestLayout.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import Header from "./header/HeaderTop";
+import * as S from "./Layout.style";
+import BottomNav from "./navBottom/NavBottom";
+import TransferPricingHeader from "./transferWritingPriceHeader/TransferPricingHeaderTop";
+import MainHeader from "@pages/homePage/mainHeader/MainHeader";
+
+interface ChildrenProps {
+  children: React.ReactNode;
+  isHeaderOn: boolean;
+  isMainHeaderOn: boolean;
+  isTransferPricingHeaderOn: boolean;
+  isBottomNavOn: boolean;
+}
+
+const TestLayout = ({
+  children,
+  isHeaderOn,
+  isMainHeaderOn,
+  isTransferPricingHeaderOn,
+  isBottomNavOn,
+}: ChildrenProps) => {
+  return (
+    <S.Container>
+      {isHeaderOn && <Header />}
+      {isMainHeaderOn && <MainHeader />}
+      {isTransferPricingHeaderOn && <TransferPricingHeader />}
+      <S.Wrapper
+        $isHeaderOn={isHeaderOn} //
+        $isBottomNavOn={isBottomNavOn}
+      >
+        {children}
+      </S.Wrapper>
+      {isBottomNavOn && <BottomNav />}
+    </S.Container>
+  );
+};
+
+export default TestLayout;
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index c180f511..c2d6654b 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -33,6 +33,7 @@ import EditAccount from "@pages/myPage/manage/editAccount/EditAccount";
 import Loading from "@components/loading/Loading";
 import SaleDetail from "@pages/saleDetailPage/SaleDetail";
 import Layout from "@components/layout/Layout";
+import TestLayout from "@components/layout/TestLayout";
 
 export const router = createBrowserRouter([
   {
@@ -45,8 +46,22 @@ export const router = createBrowserRouter([
     errorElement: <NotFound />,
     children: [
       {
-        path: "",
-        element: <Home />,
+        element: (
+          <TestLayout
+            isHeaderOn={false}
+            isMainHeaderOn={false}
+            isTransferPricingHeaderOn={false}
+            isBottomNavOn={true}
+          >
+            <Outlet />
+          </TestLayout>
+        ),
+        children: [
+          {
+            path: "",
+            element: <Home />,
+          },
+        ],
       },
       {
         element: (

From 20affad23f5f38c583fc7c45708ab2780962785f Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Fri, 26 Jan 2024 16:52:09 +0900
Subject: [PATCH 03/14] =?UTF-8?q?refactor:=20=EA=B3=B5=ED=86=B5=20?=
 =?UTF-8?q?=ED=97=A4=EB=8D=94,=20=EB=84=A4=EB=B9=84=EB=B0=94=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                                   |   1 -
 src/components/layout/Layout.style.ts         |   9 +-
 src/components/layout/Layout.tsx              |   2 +-
 src/components/layout/TestLayout.tsx          |  24 +-
 .../layout/header/HeaderTop.style.ts          |  13 +-
 src/components/layout/header/HeaderTop.tsx    |  18 +-
 .../layout/navBottom/NavBottom.style.ts       |  26 +-
 src/constants/path.ts                         |   4 +-
 src/pages/alarmPage/AlarmPage.style.ts        |   2 +
 .../successPage/SuccessPage.tsx               |  10 +-
 src/pages/myPage/MyPage.style.ts              |   7 +
 src/pages/myPage/MyPage.tsx                   |   4 +-
 .../manage/accountInfo/AccountInfo.style.ts   |   2 +-
 src/pages/myPage/setting/Setting.style.ts     |   6 +-
 .../passwordResetPage/PasswordReset.style.ts  |   7 +-
 src/pages/passwordResetPage/PasswordReset.tsx |   2 +-
 src/pages/paymentPage/Payment.style.ts        |   3 +-
 .../PaymentSuccess.style.ts                   |   3 +-
 src/pages/roomDetailPage/RoomDetail.style.ts  |   2 +-
 .../components/roomNavBar/RoomNavBar.style.ts |   2 +-
 src/pages/saleDetailPage/SaleDetail.style.ts  |   7 +-
 src/pages/saleDetailPage/SaleDetail.tsx       |   4 +-
 src/pages/searchPage/Search.style.ts          |   6 +-
 src/pages/searchPage/Search.tsx               |  13 +-
 src/pages/signUpPage/SignUp.style.ts          |  19 +-
 src/pages/signUpPage/SignUp.tsx               |   6 +-
 .../TransferWriting.style.ts                  |   7 +-
 .../transferWritingPage/TransferWriting.tsx   |   4 +-
 .../TransferWritingPrice.style.ts             |   3 +-
 .../TransferWritingPrice.tsx                  |   2 +
 .../TransferPricingHeaderTop.style.ts         |   3 +-
 .../TransferPricingHeaderTop.tsx              |   0
 .../TransferWritingSuccess.style.ts           | 161 ++++++++++++-
 .../TransferWritingSuccess.tsx                |  22 +-
 src/routes/router.tsx                         | 227 ++++++++++--------
 35 files changed, 402 insertions(+), 229 deletions(-)
 rename src/{components/layout => pages/transferWritingPricePage}/transferWritingPriceHeader/TransferPricingHeaderTop.style.ts (98%)
 rename src/{components/layout => pages/transferWritingPricePage}/transferWritingPriceHeader/TransferPricingHeaderTop.tsx (100%)

diff --git a/src/App.tsx b/src/App.tsx
index 4fcff87f..439fe09d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,4 @@
 import { Outlet } from "react-router-dom";
-import Layout from "./components/layout/Layout";
 import ScrollToTop from "@components/scrollToTop/ScrollToTop";
 import Toast from "./components/toast/Toast";
 import "./firebase.ts";
diff --git a/src/components/layout/Layout.style.ts b/src/components/layout/Layout.style.ts
index dc07b4e4..91a1bff7 100644
--- a/src/components/layout/Layout.style.ts
+++ b/src/components/layout/Layout.style.ts
@@ -9,19 +9,12 @@ export const Container = styled.div`
   align-items: center;
 `;
 
-export const Wrapper = styled.div<{
-  $isHeaderOn?: boolean;
-  $isBottomNavOn: boolean;
-}>`
+export const Wrapper = styled.div`
   max-width: 768px;
   min-width: 360px;
   width: 100%;
   height: 100%;
 
-  padding-top: ${({ $isHeaderOn }) => ($isHeaderOn ? "56px" : "0")};
-  padding-bottom: ${({ $isBottomNavOn }) => ($isBottomNavOn ? "80px" : "0")};
-
   position: relative;
-
   background-color: white;
 `;
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index 80d80c03..92971562 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -4,7 +4,7 @@ import * as S from "./Layout.style";
 import BottomNav from "./navBottom/NavBottom";
 import { useLocation, useParams } from "react-router-dom";
 import { PATH } from "@/constants/path";
-import TransferPricingHeader from "./transferWritingPriceHeader/TransferPricingHeaderTop";
+import TransferPricingHeader from "../../pages/transferWritingPricePage/transferWritingPriceHeader/TransferPricingHeaderTop";
 import MainHeader from "@pages/homePage/mainHeader/MainHeader";
 
 interface ChildrenProps {
diff --git a/src/components/layout/TestLayout.tsx b/src/components/layout/TestLayout.tsx
index 63f62f61..23f6a2aa 100644
--- a/src/components/layout/TestLayout.tsx
+++ b/src/components/layout/TestLayout.tsx
@@ -2,36 +2,20 @@ import React from "react";
 import Header from "./header/HeaderTop";
 import * as S from "./Layout.style";
 import BottomNav from "./navBottom/NavBottom";
-import TransferPricingHeader from "./transferWritingPriceHeader/TransferPricingHeaderTop";
-import MainHeader from "@pages/homePage/mainHeader/MainHeader";
-
 interface ChildrenProps {
   children: React.ReactNode;
   isHeaderOn: boolean;
-  isMainHeaderOn: boolean;
-  isTransferPricingHeaderOn: boolean;
   isBottomNavOn: boolean;
 }
 
-const TestLayout = ({
-  children,
-  isHeaderOn,
-  isMainHeaderOn,
-  isTransferPricingHeaderOn,
-  isBottomNavOn,
-}: ChildrenProps) => {
+const TestLayout = ({ children, isHeaderOn, isBottomNavOn }: ChildrenProps) => {
   return (
     <S.Container>
-      {isHeaderOn && <Header />}
-      {isMainHeaderOn && <MainHeader />}
-      {isTransferPricingHeaderOn && <TransferPricingHeader />}
-      <S.Wrapper
-        $isHeaderOn={isHeaderOn} //
-        $isBottomNavOn={isBottomNavOn}
-      >
+      <S.Wrapper>
+        {isHeaderOn && <Header />}
         {children}
+        {isBottomNavOn && <BottomNav />}
       </S.Wrapper>
-      {isBottomNavOn && <BottomNav />}
     </S.Container>
   );
 };
diff --git a/src/components/layout/header/HeaderTop.style.ts b/src/components/layout/header/HeaderTop.style.ts
index e0b48d34..b8e2fd89 100644
--- a/src/components/layout/header/HeaderTop.style.ts
+++ b/src/components/layout/header/HeaderTop.style.ts
@@ -1,8 +1,9 @@
 import { styled } from "styled-components";
 import { PiCaretLeftBold, PiBellBold, PiGearBold } from "react-icons/pi";
 
-export const HeaderContainer = styled.section`
+export const HeaderContainer = styled.header`
   width: 100%;
+  max-width: 768px;
   height: 56px;
 
   display: flex;
@@ -10,19 +11,11 @@ export const HeaderContainer = styled.section`
 
   position: fixed;
   top: 0;
-  z-index: 10;
+  z-index: 1;
 
   background-color: white;
 `;
 
-export const HeaderWrapper = styled.div`
-  max-width: 768px;
-  width: 100%;
-  height: 100%;
-
-  display: flex;
-`;
-
 export const HeaderCell = styled.div`
   width: 25%;
   height: 100%;
diff --git a/src/components/layout/header/HeaderTop.tsx b/src/components/layout/header/HeaderTop.tsx
index d7fe4d02..d0edda43 100644
--- a/src/components/layout/header/HeaderTop.tsx
+++ b/src/components/layout/header/HeaderTop.tsx
@@ -106,16 +106,14 @@ const Header = () => {
 
   return (
     <S.HeaderContainer>
-      <S.HeaderWrapper>
-        <S.HeaderCell>
-          {undo && <S.UndoIcon onClick={undoHandler} />}
-        </S.HeaderCell>
-        <S.HeaderCell>{title}</S.HeaderCell>
-        <S.HeaderCell>
-          {settingIC && <S.AlarmIcon onClick={alarmHandler} />}
-          {alarmIC && <S.SettingIcon onClick={settingHandler} />}
-        </S.HeaderCell>
-      </S.HeaderWrapper>
+      <S.HeaderCell>
+        {undo && <S.UndoIcon onClick={undoHandler} />}
+      </S.HeaderCell>
+      <S.HeaderCell>{title}</S.HeaderCell>
+      <S.HeaderCell>
+        {settingIC && <S.AlarmIcon onClick={alarmHandler} />}
+        {alarmIC && <S.SettingIcon onClick={settingHandler} />}
+      </S.HeaderCell>
     </S.HeaderContainer>
   );
 };
diff --git a/src/components/layout/navBottom/NavBottom.style.ts b/src/components/layout/navBottom/NavBottom.style.ts
index 423a04f3..b7a16755 100644
--- a/src/components/layout/navBottom/NavBottom.style.ts
+++ b/src/components/layout/navBottom/NavBottom.style.ts
@@ -1,4 +1,3 @@
-// icons
 import {
   PiListMagnifyingGlassFill,
   PiNewspaperClippingFill,
@@ -6,28 +5,28 @@ import {
 } from "react-icons/pi";
 import { NavLink } from "react-router-dom";
 import styled from "styled-components";
-import NavIconHome from "../../../assets/icons/NavHome";
+import NavIconHome from "@/assets/icons/NavHome";
 
 export const BottomNavContainer = styled.section`
-  width: 100%;
-  height: 80px;
-
   display: flex;
-  justify-content: center;
-
   position: fixed;
   bottom: 0;
+  width: 100%;
+  max-width: 768px;
+  z-index: 1;
+  height: 60px;
+  justify-content: center;
+  align-items: center;
 
   background-color: ${({ theme }) => theme.color.black};
-
-  z-index: 100;
+  box-shadow: 0 0 10px 0 rgba(5, 44, 82, 0.1);
 `;
 
 export const BottomNavWrapper = styled.div`
   max-width: 768px;
   width: 100%;
-  height: 100%;
 
+  align-items: center;
   display: flex;
 `;
 
@@ -37,7 +36,6 @@ export const BottomNavCell = styled(NavLink)`
 
   display: flex;
   flex-direction: column;
-  margin-top: 10px;
   align-items: center;
   gap: 2px;
 
@@ -52,14 +50,14 @@ export const BottomNavCell = styled(NavLink)`
 export const NavIconHomes = styled(NavIconHome)``;
 
 export const NavIconTransfer = styled(PiNewspaperClippingFill)`
-  font-size: 32px;
+  font-size: 2rem;
 `;
 
 export const NavIconSearch = styled(PiListMagnifyingGlassFill)`
-  font-size: 32px;
+  font-size: 2rem;
   transform: translateY(-1px);
 `;
 
 export const NavIconMy = styled(PiUserFill)`
-  font-size: 32px;
+  font-size: 2rem;
 `;
diff --git a/src/constants/path.ts b/src/constants/path.ts
index eae68783..4d774dd4 100644
--- a/src/constants/path.ts
+++ b/src/constants/path.ts
@@ -5,8 +5,7 @@ export const PATH = {
   SEARCH_FILTER: "/search/filter",
   CREATE_TRIP: "/trip-new",
   SALE_LIST: "/my-page/sale-list",
-  PURCHASE_LIST: "/my-page/purchase-list",
-  PURCHASE_DEATAIL: "/my-page/purchase-detail",
+  PURCAHSE_DEATAIL: "/my-page/purchase-detail",
   SALE_DETAIL: "/my-page/sale-detail",
   DETAIL_ROOM: (productId: string | number) => `/room/${productId}`,
   WRITE_TRANSFER: "/transfer/new",
@@ -22,6 +21,7 @@ export const PATH = {
   REDIRECT: "/auth/:provider",
   PASSWORD_RESET: "/password-reset",
   YANOLJA_ACCOUNT: "/account/yanolja",
+  YANOLJA_ACCOUNT_VERIFICATION: "/account/yanolja/verify",
   RELOAD: 0,
   PAYMENT: (productId: string) => `/payment/${productId}`,
   PAYMENT_SUCCESS: (productId: string) => `/payment/${productId}/success`,
diff --git a/src/pages/alarmPage/AlarmPage.style.ts b/src/pages/alarmPage/AlarmPage.style.ts
index c144e3fc..afbcf431 100644
--- a/src/pages/alarmPage/AlarmPage.style.ts
+++ b/src/pages/alarmPage/AlarmPage.style.ts
@@ -3,6 +3,8 @@ import styled from "styled-components";
 export const Container = styled.section`
   width: 100%;
   height: 100%;
+
+  padding: 56px 1.25rem 80px;
   background-color: white;
 `;
 
diff --git a/src/pages/connectYanoljaPage/successPage/SuccessPage.tsx b/src/pages/connectYanoljaPage/successPage/SuccessPage.tsx
index fba480d4..bb874826 100644
--- a/src/pages/connectYanoljaPage/successPage/SuccessPage.tsx
+++ b/src/pages/connectYanoljaPage/successPage/SuccessPage.tsx
@@ -10,11 +10,11 @@ const SuccessPage = () => {
   const navigate = useNavigate();
   const location = useLocation();
 
-  useEffect(() => {
-    if (!location.state?.success) {
-      navigate("/");
-    }
-  }, [navigate, location.state]);
+  // useEffect(() => {
+  //   if (!location.state?.success) {
+  //     navigate("/");
+  //   }
+  // }, [navigate, location.state]);
 
   return (
     <S.PageContainer>
diff --git a/src/pages/myPage/MyPage.style.ts b/src/pages/myPage/MyPage.style.ts
index 3bd63c22..b9823640 100644
--- a/src/pages/myPage/MyPage.style.ts
+++ b/src/pages/myPage/MyPage.style.ts
@@ -1,5 +1,12 @@
 import styled from "styled-components";
 
+export const Container = styled.main`
+  padding-top: 56px;
+  padding-bottom: 62px;
+
+  background-color: ${({ theme }) => theme.color.white};
+`;
+
 export const ProfileSection = styled.section`
   padding: 25px 20px 24px;
 
diff --git a/src/pages/myPage/MyPage.tsx b/src/pages/myPage/MyPage.tsx
index 96e708b8..5eeba589 100644
--- a/src/pages/myPage/MyPage.tsx
+++ b/src/pages/myPage/MyPage.tsx
@@ -34,7 +34,7 @@ const MyPage = () => {
   };
 
   return (
-    <>
+    <S.Container>
       <S.ProfileSection>
         <h3>{userProfile?.email} 님</h3>
         {!userProfile ? (
@@ -47,7 +47,7 @@ const MyPage = () => {
       </S.ProfileSection>
       <MyPageNav />
       <Outlet />
-    </>
+    </S.Container>
   );
 };
 
diff --git a/src/pages/myPage/manage/accountInfo/AccountInfo.style.ts b/src/pages/myPage/manage/accountInfo/AccountInfo.style.ts
index 2772e050..b9c57d21 100644
--- a/src/pages/myPage/manage/accountInfo/AccountInfo.style.ts
+++ b/src/pages/myPage/manage/accountInfo/AccountInfo.style.ts
@@ -5,7 +5,7 @@ export const AccountInfoContainer = styled.div`
   flex-direction: column;
   gap: 32px;
 
-  padding: 32px 20px;
+  padding: 56px 1.25rem 80px;
 `;
 
 export const AccountInfoWrapper = styled.div`
diff --git a/src/pages/myPage/setting/Setting.style.ts b/src/pages/myPage/setting/Setting.style.ts
index 09585d4d..c8f63300 100644
--- a/src/pages/myPage/setting/Setting.style.ts
+++ b/src/pages/myPage/setting/Setting.style.ts
@@ -1,7 +1,9 @@
 import styled, { css } from "styled-components";
 
-export const SettingListContainer = styled.div`
-  padding: 32px 20px;
+export const SettingListContainer = styled.main`
+  padding: 56px 1.25rem 80px;
+
+  background-color: ${({ theme }) => theme.color.white};
 `;
 
 export const ListWrapper = css`
diff --git a/src/pages/passwordResetPage/PasswordReset.style.ts b/src/pages/passwordResetPage/PasswordReset.style.ts
index cd712291..f5cd0135 100644
--- a/src/pages/passwordResetPage/PasswordReset.style.ts
+++ b/src/pages/passwordResetPage/PasswordReset.style.ts
@@ -7,9 +7,10 @@ export const PasswordResetContainer = styled.form`
 
   background-color: white;
 
-  margin: 32px 0 0 0;
+  margin-top: 32px;
 
-  padding-bottom: 100px;
+  padding-top: 56px;
+  padding-bottom: 62px;
 `;
 
 export const PasswordResetTitleContainer = styled.div`
@@ -28,7 +29,7 @@ export const PasswordResetInputContainer = styled.div`
   flex-direction: column;
   gap: 24px;
 
-  margin: 80px 0 76px 0;
+  margin: 60px 0;
 
   width: calc(100% - 40px);
 `;
diff --git a/src/pages/passwordResetPage/PasswordReset.tsx b/src/pages/passwordResetPage/PasswordReset.tsx
index d242d8bc..d6f72476 100644
--- a/src/pages/passwordResetPage/PasswordReset.tsx
+++ b/src/pages/passwordResetPage/PasswordReset.tsx
@@ -12,7 +12,7 @@ const PasswordReset = () => {
   return (
     <S.PasswordResetContainer>
       <S.PasswordResetTitleContainer>
-        <S.PasswordResetTitle>비밀번호 변경</S.PasswordResetTitle>
+        <S.PasswordResetTitle>비밀번호 재설정</S.PasswordResetTitle>
       </S.PasswordResetTitleContainer>
 
       <FormProvider {...method}>
diff --git a/src/pages/paymentPage/Payment.style.ts b/src/pages/paymentPage/Payment.style.ts
index 9765513b..e33bea8e 100644
--- a/src/pages/paymentPage/Payment.style.ts
+++ b/src/pages/paymentPage/Payment.style.ts
@@ -3,7 +3,8 @@ import styled from "styled-components";
 
 export const PaymentContainer = styled.div`
   background-color: ${({ theme }) => theme.color.greyScale7};
-  padding-bottom: 80px;
+  padding-top: 56px;
+  padding-bottom: 62px;
 `;
 
 export const Section = styled.section`
diff --git a/src/pages/paymentSuccessPage/PaymentSuccess.style.ts b/src/pages/paymentSuccessPage/PaymentSuccess.style.ts
index b045ff68..21bd7125 100644
--- a/src/pages/paymentSuccessPage/PaymentSuccess.style.ts
+++ b/src/pages/paymentSuccessPage/PaymentSuccess.style.ts
@@ -11,7 +11,8 @@ export { LeftBox, RightBox } from "@pages/roomDetailPage/RoomDetail.style";
 import borderImgSrc from "@assets/icons/border.svg";
 
 export const PurchasedContainer = styled.main`
-  padding-bottom: 80px;
+  padding-top: 56px;
+  padding-bottom: 62px;
 
   background-color: ${({ theme }) => theme.color.greyScale7};
 `;
diff --git a/src/pages/roomDetailPage/RoomDetail.style.ts b/src/pages/roomDetailPage/RoomDetail.style.ts
index f2ad8a3f..6296b024 100644
--- a/src/pages/roomDetailPage/RoomDetail.style.ts
+++ b/src/pages/roomDetailPage/RoomDetail.style.ts
@@ -3,7 +3,7 @@ import type { ColorKeys, TypoKeys } from "@styles/theme";
 
 export const Container = styled.main`
   background-color: ${({ theme }) => theme.color.greyScale7};
-  padding-bottom: 80px;
+  padding-bottom: 62px;
 `;
 
 export const DetailSection = styled.section`
diff --git a/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.style.ts b/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.style.ts
index b895cc6b..de7b8c12 100644
--- a/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.style.ts
+++ b/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.style.ts
@@ -5,7 +5,7 @@ export { Text } from "@pages/roomDetailPage/RoomDetail.style";
 export const Wrapper = styled.section`
   width: 100%;
   max-width: 768px;
-  height: 68px;
+  height: 60px;
   padding: 1.2rem 1.25rem;
   position: fixed;
   bottom: 0;
diff --git a/src/pages/saleDetailPage/SaleDetail.style.ts b/src/pages/saleDetailPage/SaleDetail.style.ts
index e68e6b7c..a3a4fc35 100644
--- a/src/pages/saleDetailPage/SaleDetail.style.ts
+++ b/src/pages/saleDetailPage/SaleDetail.style.ts
@@ -26,10 +26,13 @@ export const TopSectionReserveNumber = styled.div`
   ${({ theme }) => theme.typo.body2}
 `;
 
-export const PurchasedContainer = styled.main`
+export const Container = styled.main`
+  padding-bottom: 62px;
+`;
+
+export const PurchasedContainer = styled.div`
   width: 100%;
   height: 100%;
-  padding-bottom: 80px;
 
   color: ${({ theme }) => theme.color.black};
   ${({ theme }) => theme.scroll};
diff --git a/src/pages/saleDetailPage/SaleDetail.tsx b/src/pages/saleDetailPage/SaleDetail.tsx
index 232c0820..a9b13dd7 100644
--- a/src/pages/saleDetailPage/SaleDetail.tsx
+++ b/src/pages/saleDetailPage/SaleDetail.tsx
@@ -211,7 +211,7 @@ const SaleDetail = () => {
   };
 
   return (
-    <>
+    <S.Container>
       {data && (
         <S.PurchasedContainer>
           {(data.saleStatus === "판매완료" ||
@@ -247,7 +247,7 @@ const SaleDetail = () => {
           </S.BottomWrapper>
         </S.PurchasedContainer>
       )}
-    </>
+    </S.Container>
   );
 };
 
diff --git a/src/pages/searchPage/Search.style.ts b/src/pages/searchPage/Search.style.ts
index b1f8d23f..eabd94b8 100644
--- a/src/pages/searchPage/Search.style.ts
+++ b/src/pages/searchPage/Search.style.ts
@@ -1,12 +1,16 @@
 import styled from "styled-components";
 import TopButtonIcon from "@assets/icons/ic_top_button.svg?react";
+
+export const Container = styled.div`
+  background-color: ${({ theme }) => theme.color.white};
+`;
+
 export const SearchContainer = styled.div`
   width: 100%;
   height: 100%;
 
   padding-top: 68px;
   color: ${({ theme }) => theme.color.black};
-  ${({ theme }) => theme.scroll};
 `;
 
 export const SearchItemFlex = styled.div`
diff --git a/src/pages/searchPage/Search.tsx b/src/pages/searchPage/Search.tsx
index d3c99b45..6f9d015a 100644
--- a/src/pages/searchPage/Search.tsx
+++ b/src/pages/searchPage/Search.tsx
@@ -91,7 +91,7 @@ const Search = () => {
     }
   }, []);
   return (
-    <>
+    <S.Container>
       <SearchBar />
       <SearchNav />
 
@@ -109,16 +109,17 @@ const Search = () => {
         <S.SearchItemFlex>
           {data &&
             data.pages?.length > 0 &&
-            data.pages.map((page) =>
-              page?.content.map((item: ISearchList) => (
-                <SearchItem key={item.id} item={item} />
-              )),
+            data.pages.map(
+              (page) =>
+                page?.content.map((item: ISearchList) => (
+                  <SearchItem key={item.id} item={item} />
+                )),
             )}
         </S.SearchItemFlex>
 
         <div ref={setTarget} />
       </S.SearchContainer>
-    </>
+    </S.Container>
   );
 };
 
diff --git a/src/pages/signUpPage/SignUp.style.ts b/src/pages/signUpPage/SignUp.style.ts
index e730278f..03dfee26 100644
--- a/src/pages/signUpPage/SignUp.style.ts
+++ b/src/pages/signUpPage/SignUp.style.ts
@@ -7,16 +7,21 @@ export const SignUpContainer = styled.form`
 
   background-color: white;
 
-  margin: 40px 0 0 0;
+  margin-top: 32px;
 
-  padding-bottom: 100px;
+  padding-top: 56px;
+  padding-bottom: 80px;
 `;
 
-export const SignUpTitle = styled.p`
-  ${({ theme }) => theme.typo.title4}
-  color: #3A3A3A;
+export const TitleWrapper = styled.div`
+  display: flex;
 
-  margin: 0 0 64px 0;
+  width: calc(100% - 40px);
+`;
+
+export const SignUpTitle = styled.h1`
+  ${({ theme }) => theme.typo.title2}
+  color: ${({ theme }) => theme.color.greyScale1};
 `;
 
 export const SignUpInputContainer = styled.div`
@@ -24,7 +29,7 @@ export const SignUpInputContainer = styled.div`
   flex-direction: column;
   gap: 24px;
 
-  margin: 0 0 40px 0;
+  margin: 60px 0;
 
   width: calc(100% - 40px);
 `;
diff --git a/src/pages/signUpPage/SignUp.tsx b/src/pages/signUpPage/SignUp.tsx
index 7365b309..c7b7d889 100644
--- a/src/pages/signUpPage/SignUp.tsx
+++ b/src/pages/signUpPage/SignUp.tsx
@@ -13,14 +13,14 @@ const SignUp = () => {
 
   return (
     <S.SignUpContainer>
-      <S.SignUpTitle>회원가입</S.SignUpTitle>
+      <S.TitleWrapper>
+        <S.SignUpTitle>회원가입</S.SignUpTitle>
+      </S.TitleWrapper>
       <FormProvider {...methods}>
         <FieldValues />
-
         <S.SignUpCheckBoxContainer>
           <TermsAgreementSection />
         </S.SignUpCheckBoxContainer>
-
         <SignUpSubmitBtn />
       </FormProvider>
     </S.SignUpContainer>
diff --git a/src/pages/transferWritingPage/TransferWriting.style.ts b/src/pages/transferWritingPage/TransferWriting.style.ts
index b84c133a..c26b1e94 100644
--- a/src/pages/transferWritingPage/TransferWriting.style.ts
+++ b/src/pages/transferWritingPage/TransferWriting.style.ts
@@ -17,6 +17,11 @@ export const TransferItemList = styled.div`
   width: 100%;
   height: 100%;
   padding-top: 4px;
-  padding-bottom: 160px;
   ${({ theme }) => theme.scroll}
 `;
+
+export const Container = styled.main`
+  padding-top: 56px;
+  padding-bottom: 62px;
+  background-color: ${({ theme }) => theme.color.white};
+`;
diff --git a/src/pages/transferWritingPage/TransferWriting.tsx b/src/pages/transferWritingPage/TransferWriting.tsx
index b77ace29..dc01cf91 100644
--- a/src/pages/transferWritingPage/TransferWriting.tsx
+++ b/src/pages/transferWritingPage/TransferWriting.tsx
@@ -60,7 +60,7 @@ const TransferWriting = () => {
   }
 
   return (
-    <>
+    <S.Container>
       <S.Subtitle>판매할 내역을 선택해주세요.</S.Subtitle>
       <S.TransferItemList>
         {transferData &&
@@ -92,7 +92,7 @@ const TransferWriting = () => {
           />
         )}
       </S.TransferItemList>
-    </>
+    </S.Container>
   );
 };
 
diff --git a/src/pages/transferWritingPricePage/TransferWritingPrice.style.ts b/src/pages/transferWritingPricePage/TransferWritingPrice.style.ts
index 1699dabf..837cc8e0 100644
--- a/src/pages/transferWritingPricePage/TransferWritingPrice.style.ts
+++ b/src/pages/transferWritingPricePage/TransferWritingPrice.style.ts
@@ -1,10 +1,11 @@
 import { motion } from "framer-motion";
 import styled from "styled-components";
 
-export const Container = styled(motion.section)`
+export const Container = styled(motion.main)`
   width: 100%;
   height: 100%;
   padding-top: 56px;
+  padding-bottom: 60px;
 
   background-color: ${({ theme }) => theme.color.greyScale7};
 
diff --git a/src/pages/transferWritingPricePage/TransferWritingPrice.tsx b/src/pages/transferWritingPricePage/TransferWritingPrice.tsx
index 33f3693d..3136056f 100644
--- a/src/pages/transferWritingPricePage/TransferWritingPrice.tsx
+++ b/src/pages/transferWritingPricePage/TransferWritingPrice.tsx
@@ -15,6 +15,7 @@ import usePreventLeave from "@hooks/common/usePreventLeave";
 import { PATH } from "@constants/path";
 import EnterAccountInfo from "./enterAccountInfo/EnterAccountInfo";
 import useToastConfig from "@hooks/common/useToastConfig";
+import TransferPricingHeader from "./transferWritingPriceHeader/TransferPricingHeaderTop";
 
 const TransferWritingPrice = () => {
   usePreventLeave(true);
@@ -234,6 +235,7 @@ const TransferWritingPrice = () => {
 
   return (
     <S.Container layout>
+      <TransferPricingHeader />
       {accountSetting === "none" && (
         <>
           <FirstPriceTag
diff --git a/src/components/layout/transferWritingPriceHeader/TransferPricingHeaderTop.style.ts b/src/pages/transferWritingPricePage/transferWritingPriceHeader/TransferPricingHeaderTop.style.ts
similarity index 98%
rename from src/components/layout/transferWritingPriceHeader/TransferPricingHeaderTop.style.ts
rename to src/pages/transferWritingPricePage/transferWritingPriceHeader/TransferPricingHeaderTop.style.ts
index e0b48d34..90702304 100644
--- a/src/components/layout/transferWritingPriceHeader/TransferPricingHeaderTop.style.ts
+++ b/src/pages/transferWritingPricePage/transferWritingPriceHeader/TransferPricingHeaderTop.style.ts
@@ -10,7 +10,8 @@ export const HeaderContainer = styled.section`
 
   position: fixed;
   top: 0;
-  z-index: 10;
+  left: 0;
+  z-index: 1;
 
   background-color: white;
 `;
diff --git a/src/components/layout/transferWritingPriceHeader/TransferPricingHeaderTop.tsx b/src/pages/transferWritingPricePage/transferWritingPriceHeader/TransferPricingHeaderTop.tsx
similarity index 100%
rename from src/components/layout/transferWritingPriceHeader/TransferPricingHeaderTop.tsx
rename to src/pages/transferWritingPricePage/transferWritingPriceHeader/TransferPricingHeaderTop.tsx
diff --git a/src/pages/transferWritingSuccessPage/TransferWritingSuccess.style.ts b/src/pages/transferWritingSuccessPage/TransferWritingSuccess.style.ts
index a8441dde..feb9efd1 100644
--- a/src/pages/transferWritingSuccessPage/TransferWritingSuccess.style.ts
+++ b/src/pages/transferWritingSuccessPage/TransferWritingSuccess.style.ts
@@ -1,33 +1,168 @@
-import styled from "styled-components";
+import { hexToRgba } from "@utils/hexTorgba";
+import styled, { DefaultTheme } from "styled-components";
 
 export const Container = styled.div`
   width: 100%;
   height: 100%;
   background-color: white;
 
+  padding-bottom: 92px;
+
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
+`;
+
+export const PageContainer = styled.div`
+  width: 100%;
+  height: 100%;
+
+  background-color: ${({ theme }) => theme.color.white};
+`;
+
+const breakpoints = {
+  tablet: "768px",
+  mobile: "390px",
+};
+
+export const MainWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+
+  height: 80%;
+  gap: 2rem;
+
+  padding-top: 20%;
+
+  @media (max-width: ${breakpoints.mobile}) {
+    padding-top: 30%;
+  }
+`;
+
+export const PercentHotelLogo = styled.div`
+  width: 180px;
+
+  & > img {
+    width: 100%;
+  }
+
+  @media (max-width: ${breakpoints.tablet}) {
+    width: 170px;
+  }
+
+  @media (max-width: ${breakpoints.mobile}) {
+    width: 150px;
+  }
+`;
+
+export const PercentHotelIcon = styled.div`
+  width: 80px;
 
-  padding: 32px;
+  & > img {
+    width: 100%;
+  }
 
-  & button {
-    margin-bottom: 32px;
-    flex-shrink: 0;
+  @media (max-width: ${breakpoints.tablet}) {
+    width: 70px;
+  }
 
-    width: calc(100% - 40px);
-    height: 48px;
+  @media (max-width: ${breakpoints.mobile}) {
+    width: 60px;
+  }
+`;
 
-    ${({ theme }) => theme.typo.button4}
-    color: white;
+export const XIcon = styled.div`
+  width: 15px;
 
-    background-color: ${({ theme }) => theme.color.percentOrange};
-    border-radius: 12px;
-    transition: 0.2s;
+  & > img {
+    width: 100%;
+  }
+
+  @media (max-width: ${breakpoints.mobile}) {
+    width: 12px;
+  }
+`;
+
+export const Title = styled.p`
+  ${({ theme }) => theme.typo.title4};
+  color: ${({ theme }) => theme.color.black};
+`;
+
+export const SubTitle = styled.p`
+  ${({ theme }) => theme.typo.body4};
+  color: ${({ theme }) => theme.color.black};
+  line-height: 1.5;
+  text-align: center;
+`;
+
+export const BottomWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  padding: 0 1.25rem;
+  gap: 16px;
+`;
+
+interface ButtonVariantProps {
+  variant: "solid" | "outline";
+}
+
+const buttonStyles = {
+  solid: (theme: DefaultTheme) => `
+    background-color: ${theme.color.percentOrange};
+    color: ${theme.color.white};
+    border: 1px solid ${theme.color.percentOrange};
 
     &:hover {
-      background-color: ${({ theme }) => theme.color.darkOrange};
+    background-color: ${theme.color.darkOrange};
     }
+    &:focus {
+    background-color: ${theme.color.darkOrange};
+    }
+  `,
+  outline: (theme: DefaultTheme) => `
+    color: ${theme.color.percentOrange};
+    border: 1px solid ${theme.color.percentOrange}; 
+
+    &:hover {
+  background-color: ${hexToRgba(theme.color.lightOrange, 0.1)};
+    }
+    &:focus {
+  background-color: ${hexToRgba(theme.color.lightOrange, 0.2)};
+    }
+  `,
+};
+
+export const Button = styled.button.withConfig({
+  shouldForwardProp: (prop) => !["variant"].includes(prop),
+})<ButtonVariantProps>`
+  width: 60%;
+
+  @media (max-width: ${breakpoints.tablet}) {
+    width: 80%;
+  }
+
+  @media (max-width: ${breakpoints.mobile}) {
+    width: 100%;
   }
+
+  ${({ theme }) => theme.typo.button3};
+
+  border-radius: 8px;
+  padding: 0.9rem;
+
+  ${({ variant, theme }) => buttonStyles[variant](theme)};
+
+  transition: background-color 0.2s ease-in-out;
+`;
+
+export const TitleWrapper = styled.div`
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
 `;
diff --git a/src/pages/transferWritingSuccessPage/TransferWritingSuccess.tsx b/src/pages/transferWritingSuccessPage/TransferWritingSuccess.tsx
index 7397571c..18c293b9 100644
--- a/src/pages/transferWritingSuccessPage/TransferWritingSuccess.tsx
+++ b/src/pages/transferWritingSuccessPage/TransferWritingSuccess.tsx
@@ -1,5 +1,6 @@
 import * as S from "./TransferWritingSuccess.style";
-import TransferDone from "../../assets/icons/frame_TransferDone.svg?react";
+import PercentHotelIcon from "@assets/icons/ic_percent_hotel.png";
+import PercentHotelLogo from "@assets/logos/Percent-hotel_logo_b.png";
 import { useNavigate } from "react-router-dom";
 import { PATH } from "@constants/path";
 import { useSearchParams } from "react-router-dom";
@@ -23,13 +24,26 @@ const TransferWritingSuccess = () => {
 
   const navigate = useNavigate();
   const doneHandler = () => {
-    navigate(PATH.MY_PAGE);
+    navigate(PATH.SALE_LIST);
   };
 
   return (
     <S.Container>
-      <TransferDone />
-      <button onClick={doneHandler}>내 판매내역 확인하기</button>
+      <S.MainWrapper>
+        <S.PercentHotelLogo>
+          <img src={PercentHotelLogo} alt="퍼센트호텔 로고" />
+        </S.PercentHotelLogo>
+        <S.PercentHotelIcon>
+          <img src={PercentHotelIcon} alt="퍼센트호텔 아이콘" />
+        </S.PercentHotelIcon>
+        <S.TitleWrapper>
+          <S.Title>판매 게시물 등록 완료!</S.Title>
+          <S.SubTitle>상품이 판매되면 알림으로 알려드릴게요!</S.SubTitle>
+        </S.TitleWrapper>
+      </S.MainWrapper>
+      <S.Button variant="solid" onClick={doneHandler}>
+        내 판매내역 확인하기
+      </S.Button>
       <AccountBottomSheet content={content} onSetContent={setContent} />
     </S.Container>
   );
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index c2d6654b..ff6d618a 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -32,85 +32,111 @@ import PaymentSuccess from "@pages/paymentSuccessPage/PaymentSuccess";
 import EditAccount from "@pages/myPage/manage/editAccount/EditAccount";
 import Loading from "@components/loading/Loading";
 import SaleDetail from "@pages/saleDetailPage/SaleDetail";
-import Layout from "@components/layout/Layout";
 import TestLayout from "@components/layout/TestLayout";
 
 export const router = createBrowserRouter([
   {
     path: PATH.ROOT,
     element: (
-      <Suspense fallback={<Loading />}>
-        <App />
-      </Suspense>
+      <LocalErrorBoundary>
+        <Suspense fallback={<Loading />}>
+          <App />
+        </Suspense>
+      </LocalErrorBoundary>
     ),
     errorElement: <NotFound />,
     children: [
       {
+        path: "",
         element: (
-          <TestLayout
-            isHeaderOn={false}
-            isMainHeaderOn={false}
-            isTransferPricingHeaderOn={false}
-            isBottomNavOn={true}
-          >
-            <Outlet />
+          <TestLayout isHeaderOn={false} isBottomNavOn={true}>
+            <Suspense fallback={<Loading />}>
+              <Home />
+            </Suspense>
           </TestLayout>
         ),
-        children: [
-          {
-            path: "",
-            element: <Home />,
-          },
-        ],
       },
       {
+        path: PATH.LOGIN,
         element: (
-          <Layout>
-            <Outlet />
-          </Layout>
+          <TestLayout isHeaderOn={false} isBottomNavOn={false}>
+            <SignIn />
+          </TestLayout>
         ),
-        children: [
-          {
-            path: PATH.SEARCHLIST,
-            element: <Search />,
-          },
-          {
-            path: PATH.WRITE_TRANSFER,
-            element: (
-              <LocalErrorBoundary>
-                <Suspense fallback={<div>{/* loading */}</div>}>
-                  <TransferWriting />
-                </Suspense>
-              </LocalErrorBoundary>
-            ),
-          },
-          {
-            path: PATH.PURCAHSE_DEATAIL,
-            element: (
-              <LocalErrorBoundary>
-                <Suspense fallback={<div>LOADING</div>}>
-                  <PurchaseDetail />
-                </Suspense>
-              </LocalErrorBoundary>
-            ),
-          },
-          {
-            path: PATH.SETTING,
-            element: <Setting />,
-          },
-        ],
       },
       {
         path: PATH.SIGNUP,
-        element: <SignUp />,
+        element: (
+          <TestLayout isHeaderOn={true} isBottomNavOn={false}>
+            <SignUp />
+          </TestLayout>
+        ),
       },
       {
-        path: PATH.LOGIN,
-        element: <SignIn />,
+        path: PATH.PASSWORD_RESET,
+        element: (
+          <TestLayout isHeaderOn={true} isBottomNavOn={false}>
+            <PasswordReset />
+          </TestLayout>
+        ),
+      },
+      {
+        path: PATH.SEARCHLIST,
+        element: (
+          <TestLayout isHeaderOn={false} isBottomNavOn={true}>
+            <Suspense fallback={<Loading />}>
+              <Search />
+            </Suspense>
+          </TestLayout>
+        ),
+      },
+      {
+        path: PATH.WRITE_TRANSFER,
+        element: (
+          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+            <Suspense fallback={<Loading />}>
+              <TransferWriting />
+            </Suspense>
+          </TestLayout>
+        ),
+      },
+      {
+        path: PATH.WRITE_TRANSFER,
+        element: (
+          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+            <Suspense fallback={<Loading />}>
+              <TransferWriting />
+            </Suspense>
+          </TestLayout>
+        ),
+      },
+      {
+        path: PATH.WRITE_TRANSFER_PRICE + `/:id`,
+        element: (
+          <TestLayout isHeaderOn={false} isBottomNavOn={true}>
+            <Suspense fallback={<Loading />}>
+              <TransferWritingPrice />
+            </Suspense>
+          </TestLayout>
+        ),
+      },
+      {
+        path: PATH.WRITE_TRANSFER_SUCCESS,
+        element: (
+          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+            <Suspense fallback={<Loading />}>
+              <TransferWritingSuccess />
+            </Suspense>
+          </TestLayout>
+        ),
       },
       {
         path: PATH.MY_PAGE,
-        element: <MyPage />,
+        element: (
+          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+            <MyPage />
+          </TestLayout>
+        ),
         children: [
           {
             index: true,
@@ -123,125 +149,122 @@ export const router = createBrowserRouter([
           },
         ],
       },
-
       {
-        path: PATH.MANAGE_PROFILE,
-        element: <ManageProfile />,
-      },
-      {
-        path: PATH.MANAGE_ACCOUNT,
-        element: <ManageAccount />,
-      },
-      {
-        path: PATH.ACCOUNT_EDIT,
-        element: <EditAccount />,
+        path: PATH.SETTING,
+        element: (
+          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+            <Setting />
+          </TestLayout>
+        ),
       },
       {
-        path: PATH.WRITE_TRANSFER,
+        path: PATH.MANAGE_PROFILE,
         element: (
-          <LocalErrorBoundary>
-            <Suspense fallback={<Loading />}>
-              <TransferWriting />
-            </Suspense>
-          </LocalErrorBoundary>
+          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+            <ManageProfile />
+          </TestLayout>
         ),
       },
       {
-        path: PATH.WRITE_TRANSFER_PRICE + `/:id`,
+        path: PATH.MANAGE_ACCOUNT,
         element: (
-          <Suspense fallback={<Loading />}>
-            <TransferWritingPrice />
-          </Suspense>
+          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+            <ManageAccount />
+          </TestLayout>
         ),
       },
       {
-        path: PATH.WRITE_TRANSFER_SUCCESS,
+        path: PATH.ACCOUNT_EDIT,
         element: (
-          <Suspense fallback={<Loading />}>
-            <TransferWritingSuccess />
-          </Suspense>
+          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+            <EditAccount />
+          </TestLayout>
         ),
       },
       {
         path: PATH.DETAIL_ROOM(":productId"),
         element: (
-          <LocalErrorBoundary>
+          <TestLayout isHeaderOn={false} isBottomNavOn={false}>
             <Suspense fallback={<Loading />}>
               <RoomDetail />
             </Suspense>
-          </LocalErrorBoundary>
+          </TestLayout>
         ),
       },
       {
         path: PATH.ALARM,
         element: (
-          <LocalErrorBoundary>
-            <Suspense>
+          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+            <Suspense fallback={<Loading />}>
               <Alarm />
             </Suspense>
-          </LocalErrorBoundary>
+          </TestLayout>
         ),
       },
       {
-        path: PATH.PASSWORD_RESET,
-        element: <PasswordReset />,
-      },
-      {
-        path: PATH.PURCHASE_DEATAIL,
+        path: PATH.PURCAHSE_DEATAIL,
         element: (
-          <LocalErrorBoundary>
+          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
             <Suspense fallback={<Loading />}>
               <PurchaseDetail />
             </Suspense>
-          </LocalErrorBoundary>
+          </TestLayout>
         ),
       },
       {
         path: PATH.SALE_DETAIL + "/:saleId",
         element: (
-          <LocalErrorBoundary>
+          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
             <Suspense fallback={<Loading />}>
               <SaleDetail />
             </Suspense>
-          </LocalErrorBoundary>
+          </TestLayout>
         ),
       },
       {
         path: PATH.YANOLJA_ACCOUNT,
         element: (
-          <LocalErrorBoundary>
+          <TestLayout isHeaderOn={false} isBottomNavOn={false}>
             <Suspense fallback={<Loading />}>
               <Outlet />
             </Suspense>
-          </LocalErrorBoundary>
+          </TestLayout>
         ),
         children: [
           {
             index: true,
             element: <IntroPage />,
           },
-          {
-            path: "verify",
-            element: <VerificationPage />,
-          },
           {
             path: "verify/success",
             element: <SuccessPage />,
           },
         ],
       },
+      {
+        path: PATH.YANOLJA_ACCOUNT_VERIFICATION,
+        element: (
+          <TestLayout isHeaderOn={true} isBottomNavOn={false}>
+            <VerificationPage />
+          </TestLayout>
+        ),
+      },
       {
         path: PATH.SEARCH_FILTER,
-        element: <SearchFilter />,
+        element: (
+          <TestLayout isHeaderOn={true} isBottomNavOn={false}>
+            <SearchFilter />
+          </TestLayout>
+        ),
       },
       {
         path: PATH.PAYMENT(":productId"),
         element: (
-          <LocalErrorBoundary>
+          <TestLayout isHeaderOn={true} isBottomNavOn={false}>
             <Suspense fallback={<Loading />}>
               <Outlet />
             </Suspense>
-          </LocalErrorBoundary>
+          </TestLayout>
         ),
         children: [
           {

From 233152914214d4b378c0f8b9ee455abaaff93699 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Fri, 26 Jan 2024 17:02:53 +0900
Subject: [PATCH 04/14] =?UTF-8?q?fix:=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/Layout.tsx     | 63 ++-----------------
 src/components/layout/TestLayout.tsx | 23 -------
 src/pages/homePage/Home.tsx          |  2 +
 src/routes/router.tsx                | 90 ++++++++++++++--------------
 4 files changed, 53 insertions(+), 125 deletions(-)
 delete mode 100644 src/components/layout/TestLayout.tsx

diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index 92971562..dbc28896 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -2,71 +2,20 @@ import React from "react";
 import Header from "./header/HeaderTop";
 import * as S from "./Layout.style";
 import BottomNav from "./navBottom/NavBottom";
-import { useLocation, useParams } from "react-router-dom";
-import { PATH } from "@/constants/path";
-import TransferPricingHeader from "../../pages/transferWritingPricePage/transferWritingPriceHeader/TransferPricingHeaderTop";
-import MainHeader from "@pages/homePage/mainHeader/MainHeader";
-
 interface ChildrenProps {
   children: React.ReactNode;
+  isHeaderOn: boolean;
+  isBottomNavOn: boolean;
 }
 
-const Layout = ({ children }: ChildrenProps) => {
-  const { pathname, search } = useLocation();
-
-  // FIXME: 헤더, 네비바 특정 페이지에서만 보이지 않도록 수정 필요
-  const pathsToExcludeHeader = [PATH.LOGIN, PATH.WRITE_TRANSFER_PRICE];
-
-  const pathsToExcludeBottom = [PATH.LOGIN, PATH.SEARCH_FILTER];
-
-  let isHeaderOn = !pathsToExcludeHeader.some((path) =>
-    pathname.includes(path),
-  );
-  let isBottomNavOn = !pathsToExcludeBottom.some((path) =>
-    pathname.includes(path),
-  );
-
-  if (pathname === PATH.ROOT) {
-    isHeaderOn = false;
-  }
-
-  const { productId } = useParams();
-
-  if (pathname === PATH.DETAIL_ROOM(productId!)) {
-    isHeaderOn = false;
-    isBottomNavOn = false;
-  }
-  // 특수한 헤더
-  const isTransferPricingHeaderOn = pathname.includes(
-    PATH.WRITE_TRANSFER_PRICE,
-  );
-  const isMainHeaderOn = pathname === PATH.ROOT;
-
-  if (pathname.includes(PATH.MANAGE_ACCOUNT)) {
-    if (pathname === PATH.ACCOUNT_EDIT) {
-      isHeaderOn = false;
-    }
-    if (search === "?step=termsAgreement") {
-      isHeaderOn = false;
-      isBottomNavOn = false;
-    }
-    if (search === "?step=enterAccount") {
-      isHeaderOn = false;
-    }
-  }
-
+const Layout = ({ children, isHeaderOn, isBottomNavOn }: ChildrenProps) => {
   return (
     <S.Container>
-      {isHeaderOn && <Header />}
-      {isMainHeaderOn && <MainHeader />}
-      {isTransferPricingHeaderOn && <TransferPricingHeader />}
-      <S.Wrapper
-        $isHeaderOn={isHeaderOn} //
-        $isBottomNavOn={isBottomNavOn}
-      >
+      <S.Wrapper>
+        {isHeaderOn && <Header />}
         {children}
+        {isBottomNavOn && <BottomNav />}
       </S.Wrapper>
-      {isBottomNavOn && <BottomNav />}
     </S.Container>
   );
 };
diff --git a/src/components/layout/TestLayout.tsx b/src/components/layout/TestLayout.tsx
deleted file mode 100644
index 23f6a2aa..00000000
--- a/src/components/layout/TestLayout.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react";
-import Header from "./header/HeaderTop";
-import * as S from "./Layout.style";
-import BottomNav from "./navBottom/NavBottom";
-interface ChildrenProps {
-  children: React.ReactNode;
-  isHeaderOn: boolean;
-  isBottomNavOn: boolean;
-}
-
-const TestLayout = ({ children, isHeaderOn, isBottomNavOn }: ChildrenProps) => {
-  return (
-    <S.Container>
-      <S.Wrapper>
-        {isHeaderOn && <Header />}
-        {children}
-        {isBottomNavOn && <BottomNav />}
-      </S.Wrapper>
-    </S.Container>
-  );
-};
-
-export default TestLayout;
diff --git a/src/pages/homePage/Home.tsx b/src/pages/homePage/Home.tsx
index 282c798c..76740476 100644
--- a/src/pages/homePage/Home.tsx
+++ b/src/pages/homePage/Home.tsx
@@ -11,6 +11,7 @@ import WeekendCarousel from "./weekendCarousel/WeekendCarousel";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import TextLocaleAnimator from "./textAnimator/TextAnimator";
 import PercentAnimator from "./percentAnimator/PercentAnimator";
+import MainHeader from "./mainHeader/MainHeader";
 
 const Home = () => {
   const { data: mainData } = useSuspenseQuery({
@@ -44,6 +45,7 @@ const Home = () => {
 
   return (
     <S.Container>
+      <MainHeader />
       <TitleSection />
       <NavToSearchSection />
 
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index ff6d618a..2e6ea5f8 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -32,7 +32,7 @@ import PaymentSuccess from "@pages/paymentSuccessPage/PaymentSuccess";
 import EditAccount from "@pages/myPage/manage/editAccount/EditAccount";
 import Loading from "@components/loading/Loading";
 import SaleDetail from "@pages/saleDetailPage/SaleDetail";
-import TestLayout from "@components/layout/TestLayout";
+import Layout from "@components/layout/Layout";
 
 export const router = createBrowserRouter([
   {
@@ -49,93 +49,93 @@ export const router = createBrowserRouter([
       {
         path: "",
         element: (
-          <TestLayout isHeaderOn={false} isBottomNavOn={true}>
+          <Layout isHeaderOn={false} isBottomNavOn={true}>
             <Suspense fallback={<Loading />}>
               <Home />
             </Suspense>
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.LOGIN,
         element: (
-          <TestLayout isHeaderOn={false} isBottomNavOn={false}>
+          <Layout isHeaderOn={false} isBottomNavOn={false}>
             <SignIn />
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.SIGNUP,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={false}>
+          <Layout isHeaderOn={true} isBottomNavOn={false}>
             <SignUp />
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.PASSWORD_RESET,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={false}>
+          <Layout isHeaderOn={true} isBottomNavOn={false}>
             <PasswordReset />
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.SEARCHLIST,
         element: (
-          <TestLayout isHeaderOn={false} isBottomNavOn={true}>
+          <Layout isHeaderOn={false} isBottomNavOn={true}>
             <Suspense fallback={<Loading />}>
               <Search />
             </Suspense>
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.WRITE_TRANSFER,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+          <Layout isHeaderOn={true} isBottomNavOn={true}>
             <Suspense fallback={<Loading />}>
               <TransferWriting />
             </Suspense>
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.WRITE_TRANSFER,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+          <Layout isHeaderOn={true} isBottomNavOn={true}>
             <Suspense fallback={<Loading />}>
               <TransferWriting />
             </Suspense>
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.WRITE_TRANSFER_PRICE + `/:id`,
         element: (
-          <TestLayout isHeaderOn={false} isBottomNavOn={true}>
+          <Layout isHeaderOn={false} isBottomNavOn={true}>
             <Suspense fallback={<Loading />}>
               <TransferWritingPrice />
             </Suspense>
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.WRITE_TRANSFER_SUCCESS,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+          <Layout isHeaderOn={true} isBottomNavOn={true}>
             <Suspense fallback={<Loading />}>
               <TransferWritingSuccess />
             </Suspense>
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.MY_PAGE,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+          <Layout isHeaderOn={true} isBottomNavOn={true}>
             <MyPage />
-          </TestLayout>
+          </Layout>
         ),
         children: [
           {
@@ -152,83 +152,83 @@ export const router = createBrowserRouter([
       {
         path: PATH.SETTING,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+          <Layout isHeaderOn={true} isBottomNavOn={true}>
             <Setting />
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.MANAGE_PROFILE,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+          <Layout isHeaderOn={true} isBottomNavOn={true}>
             <ManageProfile />
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.MANAGE_ACCOUNT,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+          <Layout isHeaderOn={true} isBottomNavOn={true}>
             <ManageAccount />
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.ACCOUNT_EDIT,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+          <Layout isHeaderOn={true} isBottomNavOn={true}>
             <EditAccount />
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.DETAIL_ROOM(":productId"),
         element: (
-          <TestLayout isHeaderOn={false} isBottomNavOn={false}>
+          <Layout isHeaderOn={false} isBottomNavOn={false}>
             <Suspense fallback={<Loading />}>
               <RoomDetail />
             </Suspense>
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.ALARM,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+          <Layout isHeaderOn={true} isBottomNavOn={true}>
             <Suspense fallback={<Loading />}>
               <Alarm />
             </Suspense>
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.PURCAHSE_DEATAIL,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+          <Layout isHeaderOn={true} isBottomNavOn={true}>
             <Suspense fallback={<Loading />}>
               <PurchaseDetail />
             </Suspense>
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.SALE_DETAIL + "/:saleId",
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+          <Layout isHeaderOn={true} isBottomNavOn={true}>
             <Suspense fallback={<Loading />}>
               <SaleDetail />
             </Suspense>
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.YANOLJA_ACCOUNT,
         element: (
-          <TestLayout isHeaderOn={false} isBottomNavOn={false}>
+          <Layout isHeaderOn={false} isBottomNavOn={false}>
             <Suspense fallback={<Loading />}>
               <Outlet />
             </Suspense>
-          </TestLayout>
+          </Layout>
         ),
         children: [
           {
@@ -244,27 +244,27 @@ export const router = createBrowserRouter([
       {
         path: PATH.YANOLJA_ACCOUNT_VERIFICATION,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={false}>
+          <Layout isHeaderOn={true} isBottomNavOn={false}>
             <VerificationPage />
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.SEARCH_FILTER,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={false}>
+          <Layout isHeaderOn={true} isBottomNavOn={false}>
             <SearchFilter />
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.PAYMENT(":productId"),
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={false}>
+          <Layout isHeaderOn={true} isBottomNavOn={false}>
             <Suspense fallback={<Loading />}>
               <Outlet />
             </Suspense>
-          </TestLayout>
+          </Layout>
         ),
         children: [
           {

From b5ab8460b3d63333051298c0ebfab33fb5b28fe9 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Fri, 26 Jan 2024 17:06:05 +0900
Subject: [PATCH 05/14] =?UTF-8?q?chore:=20=EC=A3=BC=EC=84=9D=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

---
 .../connectYanoljaPage/successPage/SuccessPage.tsx     | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/connectYanoljaPage/successPage/SuccessPage.tsx b/src/pages/connectYanoljaPage/successPage/SuccessPage.tsx
index bb874826..fba480d4 100644
--- a/src/pages/connectYanoljaPage/successPage/SuccessPage.tsx
+++ b/src/pages/connectYanoljaPage/successPage/SuccessPage.tsx
@@ -10,11 +10,11 @@ const SuccessPage = () => {
   const navigate = useNavigate();
   const location = useLocation();
 
-  // useEffect(() => {
-  //   if (!location.state?.success) {
-  //     navigate("/");
-  //   }
-  // }, [navigate, location.state]);
+  useEffect(() => {
+    if (!location.state?.success) {
+      navigate("/");
+    }
+  }, [navigate, location.state]);
 
   return (
     <S.PageContainer>

From a0c5e5d19c454eeffab4a33148f9625d6dbddbe7 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Fri, 26 Jan 2024 17:07:13 +0900
Subject: [PATCH 06/14] =?UTF-8?q?fix:=20path=20=EC=98=A4=ED=83=80=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/layout/header/HeaderTop.tsx                      | 2 +-
 src/constants/path.ts                                           | 2 +-
 .../components/PaymentSuccessButton/PaymentSuccessButton.tsx    | 2 +-
 .../transferPurchasePage/components/puchaseItem/PuchaseItem.tsx | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/layout/header/HeaderTop.tsx b/src/components/layout/header/HeaderTop.tsx
index d0edda43..bde09520 100644
--- a/src/components/layout/header/HeaderTop.tsx
+++ b/src/components/layout/header/HeaderTop.tsx
@@ -54,7 +54,7 @@ const Header = () => {
       title = "마이페이지";
       undo = true;
       break;
-    case PATH.PURCHASE_DEATAIL:
+    case PATH.PURCAHSE_DETAIL:
       alarmIC = false;
       settingIC = false;
       title = "구매내역상세";
diff --git a/src/constants/path.ts b/src/constants/path.ts
index 4d774dd4..ebc7cccc 100644
--- a/src/constants/path.ts
+++ b/src/constants/path.ts
@@ -5,7 +5,7 @@ export const PATH = {
   SEARCH_FILTER: "/search/filter",
   CREATE_TRIP: "/trip-new",
   SALE_LIST: "/my-page/sale-list",
-  PURCAHSE_DEATAIL: "/my-page/purchase-detail",
+  PURCAHSE_DETAIL: "/my-page/purchase-detail",
   SALE_DETAIL: "/my-page/sale-detail",
   DETAIL_ROOM: (productId: string | number) => `/room/${productId}`,
   WRITE_TRANSFER: "/transfer/new",
diff --git a/src/pages/paymentSuccessPage/components/PaymentSuccessButton/PaymentSuccessButton.tsx b/src/pages/paymentSuccessPage/components/PaymentSuccessButton/PaymentSuccessButton.tsx
index ed6a2ae2..a8ef8031 100644
--- a/src/pages/paymentSuccessPage/components/PaymentSuccessButton/PaymentSuccessButton.tsx
+++ b/src/pages/paymentSuccessPage/components/PaymentSuccessButton/PaymentSuccessButton.tsx
@@ -14,7 +14,7 @@ const PaymentSuccessButton = ({ productId }: { productId: string }) => {
         type="button"
         variant="outline"
         aria-label="상세내역 확인"
-        onClick={() => navigate(PATH.PURCHASE_DEATAIL + `?id=${productId}`)}
+        onClick={() => navigate(PATH.PURCAHSE_DETAIL + `?id=${productId}`)}
       >
         상세내역 확인
       </S.Button>
diff --git a/src/pages/transferPurchasePage/components/puchaseItem/PuchaseItem.tsx b/src/pages/transferPurchasePage/components/puchaseItem/PuchaseItem.tsx
index 684f21ea..12d089c2 100644
--- a/src/pages/transferPurchasePage/components/puchaseItem/PuchaseItem.tsx
+++ b/src/pages/transferPurchasePage/components/puchaseItem/PuchaseItem.tsx
@@ -7,7 +7,7 @@ import { useNavigate } from "react-router-dom";
 const PuchaseItem = (props: IPurchaseItemWithRemainDate) => {
   const navigate = useNavigate();
   const handleClick = () => {
-    navigate(`${PATH.PURCHASE_DEATAIL}?id=${props.id}`);
+    navigate(`${PATH.PURCAHSE_DETAIL}?id=${props.id}`);
   };
   return (
     <S.PurchaseItemContainer onClick={handleClick}>

From c8c947803852028acc76483446b3df9ec1389bc0 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Fri, 26 Jan 2024 17:09:44 +0900
Subject: [PATCH 07/14] =?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/routes/router.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index 2e6ea5f8..c754399d 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -202,7 +202,7 @@ export const router = createBrowserRouter([
         ),
       },
       {
-        path: PATH.PURCAHSE_DEATAIL,
+        path: PATH.PURCAHSE_DETAIL,
         element: (
           <Layout isHeaderOn={true} isBottomNavOn={true}>
             <Suspense fallback={<Loading />}>

From 149c67833c139b538562311c5b0cf72ba7c06c28 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Wed, 24 Jan 2024 14:58:35 +0900
Subject: [PATCH 08/14] =?UTF-8?q?fix:=20=ED=97=A4=EB=8D=94,=20=EB=84=A4?=
 =?UTF-8?q?=EB=B9=84=EB=B0=94=20=EB=B6=84=EB=A6=AC=ED=95=B4=EC=84=9C=20?=
 =?UTF-8?q?=EC=82=AC=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx           |  4 ++--
 src/routes/router.tsx | 44 ++++++++++++++++++++++++++++++++++++-------
 2 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 2135aea4..4fcff87f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,11 +12,11 @@ function App() {
   const toastConfig = useToastStore((state) => state.config);
 
   return (
-    <Layout>
+    <>
       <ScrollToTop />
       <AnimatePresence>{toastConfig.isShow && <Toast />}</AnimatePresence>
       <Outlet />
-    </Layout>
+    </>
   );
 }
 
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index b8a57bc4..c180f511 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -32,6 +32,7 @@ import PaymentSuccess from "@pages/paymentSuccessPage/PaymentSuccess";
 import EditAccount from "@pages/myPage/manage/editAccount/EditAccount";
 import Loading from "@components/loading/Loading";
 import SaleDetail from "@pages/saleDetailPage/SaleDetail";
+import Layout from "@components/layout/Layout";
 
 export const router = createBrowserRouter([
   {
@@ -47,10 +48,42 @@ export const router = createBrowserRouter([
         path: "",
         element: <Home />,
       },
-
       {
-        path: PATH.SEARCHLIST,
-        element: <Search />,
+        element: (
+          <Layout>
+            <Outlet />
+          </Layout>
+        ),
+        children: [
+          {
+            path: PATH.SEARCHLIST,
+            element: <Search />,
+          },
+          {
+            path: PATH.WRITE_TRANSFER,
+            element: (
+              <LocalErrorBoundary>
+                <Suspense fallback={<div>{/* loading */}</div>}>
+                  <TransferWriting />
+                </Suspense>
+              </LocalErrorBoundary>
+            ),
+          },
+          {
+            path: PATH.PURCAHSE_DEATAIL,
+            element: (
+              <LocalErrorBoundary>
+                <Suspense fallback={<div>LOADING</div>}>
+                  <PurchaseDetail />
+                </Suspense>
+              </LocalErrorBoundary>
+            ),
+          },
+          {
+            path: PATH.SETTING,
+            element: <Setting />,
+          },
+        ],
       },
       {
         path: PATH.SIGNUP,
@@ -75,10 +108,7 @@ export const router = createBrowserRouter([
           },
         ],
       },
-      {
-        path: PATH.SETTING,
-        element: <Setting />,
-      },
+
       {
         path: PATH.MANAGE_PROFILE,
         element: <ManageProfile />,

From 7265cb9e0caa96613458e365bfe8fa73b39f2648 Mon Sep 17 00:00:00 2001
From: wowba <leeyuwk54@gmail.com>
Date: Wed, 24 Jan 2024 18:27:06 +0900
Subject: [PATCH 09/14] =?UTF-8?q?Feat=20:=20TestLayout=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/TestLayout.tsx | 39 ++++++++++++++++++++++++++++
 src/routes/router.tsx                | 19 ++++++++++++--
 2 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 src/components/layout/TestLayout.tsx

diff --git a/src/components/layout/TestLayout.tsx b/src/components/layout/TestLayout.tsx
new file mode 100644
index 00000000..63f62f61
--- /dev/null
+++ b/src/components/layout/TestLayout.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import Header from "./header/HeaderTop";
+import * as S from "./Layout.style";
+import BottomNav from "./navBottom/NavBottom";
+import TransferPricingHeader from "./transferWritingPriceHeader/TransferPricingHeaderTop";
+import MainHeader from "@pages/homePage/mainHeader/MainHeader";
+
+interface ChildrenProps {
+  children: React.ReactNode;
+  isHeaderOn: boolean;
+  isMainHeaderOn: boolean;
+  isTransferPricingHeaderOn: boolean;
+  isBottomNavOn: boolean;
+}
+
+const TestLayout = ({
+  children,
+  isHeaderOn,
+  isMainHeaderOn,
+  isTransferPricingHeaderOn,
+  isBottomNavOn,
+}: ChildrenProps) => {
+  return (
+    <S.Container>
+      {isHeaderOn && <Header />}
+      {isMainHeaderOn && <MainHeader />}
+      {isTransferPricingHeaderOn && <TransferPricingHeader />}
+      <S.Wrapper
+        $isHeaderOn={isHeaderOn} //
+        $isBottomNavOn={isBottomNavOn}
+      >
+        {children}
+      </S.Wrapper>
+      {isBottomNavOn && <BottomNav />}
+    </S.Container>
+  );
+};
+
+export default TestLayout;
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index c180f511..c2d6654b 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -33,6 +33,7 @@ import EditAccount from "@pages/myPage/manage/editAccount/EditAccount";
 import Loading from "@components/loading/Loading";
 import SaleDetail from "@pages/saleDetailPage/SaleDetail";
 import Layout from "@components/layout/Layout";
+import TestLayout from "@components/layout/TestLayout";
 
 export const router = createBrowserRouter([
   {
@@ -45,8 +46,22 @@ export const router = createBrowserRouter([
     errorElement: <NotFound />,
     children: [
       {
-        path: "",
-        element: <Home />,
+        element: (
+          <TestLayout
+            isHeaderOn={false}
+            isMainHeaderOn={false}
+            isTransferPricingHeaderOn={false}
+            isBottomNavOn={true}
+          >
+            <Outlet />
+          </TestLayout>
+        ),
+        children: [
+          {
+            path: "",
+            element: <Home />,
+          },
+        ],
       },
       {
         element: (

From 11a104f60479b2d6ef65ab8c92d11e03d87125a0 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Fri, 26 Jan 2024 16:52:09 +0900
Subject: [PATCH 10/14] =?UTF-8?q?refactor:=20=EA=B3=B5=ED=86=B5=20?=
 =?UTF-8?q?=ED=97=A4=EB=8D=94,=20=EB=84=A4=EB=B9=84=EB=B0=94=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                                   |   1 -
 src/components/layout/Layout.style.ts         |   9 +-
 src/components/layout/Layout.tsx              |   2 +-
 src/components/layout/TestLayout.tsx          |  24 +-
 .../layout/header/HeaderTop.style.ts          |  13 +-
 src/components/layout/header/HeaderTop.tsx    |  18 +-
 .../layout/navBottom/NavBottom.style.ts       |  26 +-
 src/constants/path.ts                         |   4 +-
 src/pages/alarmPage/AlarmPage.style.ts        |   2 +
 .../successPage/SuccessPage.tsx               |  10 +-
 src/pages/myPage/MyPage.style.ts              |   7 +
 src/pages/myPage/MyPage.tsx                   |   4 +-
 .../manage/accountInfo/AccountInfo.style.ts   |   2 +-
 src/pages/myPage/setting/Setting.style.ts     |   6 +-
 .../passwordResetPage/PasswordReset.style.ts  |   7 +-
 src/pages/passwordResetPage/PasswordReset.tsx |   2 +-
 src/pages/paymentPage/Payment.style.ts        |   3 +-
 .../PaymentSuccess.style.ts                   |   3 +-
 src/pages/roomDetailPage/RoomDetail.style.ts  |   2 +-
 .../components/roomNavBar/RoomNavBar.style.ts |   2 +-
 src/pages/saleDetailPage/SaleDetail.style.ts  |   7 +-
 src/pages/saleDetailPage/SaleDetail.tsx       |   4 +-
 src/pages/searchPage/Search.style.ts          |   6 +-
 src/pages/searchPage/Search.tsx               |  13 +-
 src/pages/signUpPage/SignUp.style.ts          |  19 +-
 src/pages/signUpPage/SignUp.tsx               |   6 +-
 .../TransferWriting.style.ts                  |   7 +-
 .../transferWritingPage/TransferWriting.tsx   |   4 +-
 .../TransferWritingPrice.style.ts             |   3 +-
 .../TransferWritingPrice.tsx                  |   2 +
 .../TransferPricingHeaderTop.style.ts         |   3 +-
 .../TransferPricingHeaderTop.tsx              |   0
 .../TransferWritingSuccess.style.ts           | 161 ++++++++++++-
 .../TransferWritingSuccess.tsx                |  22 +-
 src/routes/router.tsx                         | 227 ++++++++++--------
 35 files changed, 402 insertions(+), 229 deletions(-)
 rename src/{components/layout => pages/transferWritingPricePage}/transferWritingPriceHeader/TransferPricingHeaderTop.style.ts (98%)
 rename src/{components/layout => pages/transferWritingPricePage}/transferWritingPriceHeader/TransferPricingHeaderTop.tsx (100%)

diff --git a/src/App.tsx b/src/App.tsx
index 4fcff87f..439fe09d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,4 @@
 import { Outlet } from "react-router-dom";
-import Layout from "./components/layout/Layout";
 import ScrollToTop from "@components/scrollToTop/ScrollToTop";
 import Toast from "./components/toast/Toast";
 import "./firebase.ts";
diff --git a/src/components/layout/Layout.style.ts b/src/components/layout/Layout.style.ts
index dc07b4e4..91a1bff7 100644
--- a/src/components/layout/Layout.style.ts
+++ b/src/components/layout/Layout.style.ts
@@ -9,19 +9,12 @@ export const Container = styled.div`
   align-items: center;
 `;
 
-export const Wrapper = styled.div<{
-  $isHeaderOn?: boolean;
-  $isBottomNavOn: boolean;
-}>`
+export const Wrapper = styled.div`
   max-width: 768px;
   min-width: 360px;
   width: 100%;
   height: 100%;
 
-  padding-top: ${({ $isHeaderOn }) => ($isHeaderOn ? "56px" : "0")};
-  padding-bottom: ${({ $isBottomNavOn }) => ($isBottomNavOn ? "80px" : "0")};
-
   position: relative;
-
   background-color: white;
 `;
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index 80d80c03..92971562 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -4,7 +4,7 @@ import * as S from "./Layout.style";
 import BottomNav from "./navBottom/NavBottom";
 import { useLocation, useParams } from "react-router-dom";
 import { PATH } from "@/constants/path";
-import TransferPricingHeader from "./transferWritingPriceHeader/TransferPricingHeaderTop";
+import TransferPricingHeader from "../../pages/transferWritingPricePage/transferWritingPriceHeader/TransferPricingHeaderTop";
 import MainHeader from "@pages/homePage/mainHeader/MainHeader";
 
 interface ChildrenProps {
diff --git a/src/components/layout/TestLayout.tsx b/src/components/layout/TestLayout.tsx
index 63f62f61..23f6a2aa 100644
--- a/src/components/layout/TestLayout.tsx
+++ b/src/components/layout/TestLayout.tsx
@@ -2,36 +2,20 @@ import React from "react";
 import Header from "./header/HeaderTop";
 import * as S from "./Layout.style";
 import BottomNav from "./navBottom/NavBottom";
-import TransferPricingHeader from "./transferWritingPriceHeader/TransferPricingHeaderTop";
-import MainHeader from "@pages/homePage/mainHeader/MainHeader";
-
 interface ChildrenProps {
   children: React.ReactNode;
   isHeaderOn: boolean;
-  isMainHeaderOn: boolean;
-  isTransferPricingHeaderOn: boolean;
   isBottomNavOn: boolean;
 }
 
-const TestLayout = ({
-  children,
-  isHeaderOn,
-  isMainHeaderOn,
-  isTransferPricingHeaderOn,
-  isBottomNavOn,
-}: ChildrenProps) => {
+const TestLayout = ({ children, isHeaderOn, isBottomNavOn }: ChildrenProps) => {
   return (
     <S.Container>
-      {isHeaderOn && <Header />}
-      {isMainHeaderOn && <MainHeader />}
-      {isTransferPricingHeaderOn && <TransferPricingHeader />}
-      <S.Wrapper
-        $isHeaderOn={isHeaderOn} //
-        $isBottomNavOn={isBottomNavOn}
-      >
+      <S.Wrapper>
+        {isHeaderOn && <Header />}
         {children}
+        {isBottomNavOn && <BottomNav />}
       </S.Wrapper>
-      {isBottomNavOn && <BottomNav />}
     </S.Container>
   );
 };
diff --git a/src/components/layout/header/HeaderTop.style.ts b/src/components/layout/header/HeaderTop.style.ts
index e0b48d34..b8e2fd89 100644
--- a/src/components/layout/header/HeaderTop.style.ts
+++ b/src/components/layout/header/HeaderTop.style.ts
@@ -1,8 +1,9 @@
 import { styled } from "styled-components";
 import { PiCaretLeftBold, PiBellBold, PiGearBold } from "react-icons/pi";
 
-export const HeaderContainer = styled.section`
+export const HeaderContainer = styled.header`
   width: 100%;
+  max-width: 768px;
   height: 56px;
 
   display: flex;
@@ -10,19 +11,11 @@ export const HeaderContainer = styled.section`
 
   position: fixed;
   top: 0;
-  z-index: 10;
+  z-index: 1;
 
   background-color: white;
 `;
 
-export const HeaderWrapper = styled.div`
-  max-width: 768px;
-  width: 100%;
-  height: 100%;
-
-  display: flex;
-`;
-
 export const HeaderCell = styled.div`
   width: 25%;
   height: 100%;
diff --git a/src/components/layout/header/HeaderTop.tsx b/src/components/layout/header/HeaderTop.tsx
index d7fe4d02..d0edda43 100644
--- a/src/components/layout/header/HeaderTop.tsx
+++ b/src/components/layout/header/HeaderTop.tsx
@@ -106,16 +106,14 @@ const Header = () => {
 
   return (
     <S.HeaderContainer>
-      <S.HeaderWrapper>
-        <S.HeaderCell>
-          {undo && <S.UndoIcon onClick={undoHandler} />}
-        </S.HeaderCell>
-        <S.HeaderCell>{title}</S.HeaderCell>
-        <S.HeaderCell>
-          {settingIC && <S.AlarmIcon onClick={alarmHandler} />}
-          {alarmIC && <S.SettingIcon onClick={settingHandler} />}
-        </S.HeaderCell>
-      </S.HeaderWrapper>
+      <S.HeaderCell>
+        {undo && <S.UndoIcon onClick={undoHandler} />}
+      </S.HeaderCell>
+      <S.HeaderCell>{title}</S.HeaderCell>
+      <S.HeaderCell>
+        {settingIC && <S.AlarmIcon onClick={alarmHandler} />}
+        {alarmIC && <S.SettingIcon onClick={settingHandler} />}
+      </S.HeaderCell>
     </S.HeaderContainer>
   );
 };
diff --git a/src/components/layout/navBottom/NavBottom.style.ts b/src/components/layout/navBottom/NavBottom.style.ts
index 423a04f3..b7a16755 100644
--- a/src/components/layout/navBottom/NavBottom.style.ts
+++ b/src/components/layout/navBottom/NavBottom.style.ts
@@ -1,4 +1,3 @@
-// icons
 import {
   PiListMagnifyingGlassFill,
   PiNewspaperClippingFill,
@@ -6,28 +5,28 @@ import {
 } from "react-icons/pi";
 import { NavLink } from "react-router-dom";
 import styled from "styled-components";
-import NavIconHome from "../../../assets/icons/NavHome";
+import NavIconHome from "@/assets/icons/NavHome";
 
 export const BottomNavContainer = styled.section`
-  width: 100%;
-  height: 80px;
-
   display: flex;
-  justify-content: center;
-
   position: fixed;
   bottom: 0;
+  width: 100%;
+  max-width: 768px;
+  z-index: 1;
+  height: 60px;
+  justify-content: center;
+  align-items: center;
 
   background-color: ${({ theme }) => theme.color.black};
-
-  z-index: 100;
+  box-shadow: 0 0 10px 0 rgba(5, 44, 82, 0.1);
 `;
 
 export const BottomNavWrapper = styled.div`
   max-width: 768px;
   width: 100%;
-  height: 100%;
 
+  align-items: center;
   display: flex;
 `;
 
@@ -37,7 +36,6 @@ export const BottomNavCell = styled(NavLink)`
 
   display: flex;
   flex-direction: column;
-  margin-top: 10px;
   align-items: center;
   gap: 2px;
 
@@ -52,14 +50,14 @@ export const BottomNavCell = styled(NavLink)`
 export const NavIconHomes = styled(NavIconHome)``;
 
 export const NavIconTransfer = styled(PiNewspaperClippingFill)`
-  font-size: 32px;
+  font-size: 2rem;
 `;
 
 export const NavIconSearch = styled(PiListMagnifyingGlassFill)`
-  font-size: 32px;
+  font-size: 2rem;
   transform: translateY(-1px);
 `;
 
 export const NavIconMy = styled(PiUserFill)`
-  font-size: 32px;
+  font-size: 2rem;
 `;
diff --git a/src/constants/path.ts b/src/constants/path.ts
index eae68783..4d774dd4 100644
--- a/src/constants/path.ts
+++ b/src/constants/path.ts
@@ -5,8 +5,7 @@ export const PATH = {
   SEARCH_FILTER: "/search/filter",
   CREATE_TRIP: "/trip-new",
   SALE_LIST: "/my-page/sale-list",
-  PURCHASE_LIST: "/my-page/purchase-list",
-  PURCHASE_DEATAIL: "/my-page/purchase-detail",
+  PURCAHSE_DEATAIL: "/my-page/purchase-detail",
   SALE_DETAIL: "/my-page/sale-detail",
   DETAIL_ROOM: (productId: string | number) => `/room/${productId}`,
   WRITE_TRANSFER: "/transfer/new",
@@ -22,6 +21,7 @@ export const PATH = {
   REDIRECT: "/auth/:provider",
   PASSWORD_RESET: "/password-reset",
   YANOLJA_ACCOUNT: "/account/yanolja",
+  YANOLJA_ACCOUNT_VERIFICATION: "/account/yanolja/verify",
   RELOAD: 0,
   PAYMENT: (productId: string) => `/payment/${productId}`,
   PAYMENT_SUCCESS: (productId: string) => `/payment/${productId}/success`,
diff --git a/src/pages/alarmPage/AlarmPage.style.ts b/src/pages/alarmPage/AlarmPage.style.ts
index c144e3fc..afbcf431 100644
--- a/src/pages/alarmPage/AlarmPage.style.ts
+++ b/src/pages/alarmPage/AlarmPage.style.ts
@@ -3,6 +3,8 @@ import styled from "styled-components";
 export const Container = styled.section`
   width: 100%;
   height: 100%;
+
+  padding: 56px 1.25rem 80px;
   background-color: white;
 `;
 
diff --git a/src/pages/connectYanoljaPage/successPage/SuccessPage.tsx b/src/pages/connectYanoljaPage/successPage/SuccessPage.tsx
index fba480d4..bb874826 100644
--- a/src/pages/connectYanoljaPage/successPage/SuccessPage.tsx
+++ b/src/pages/connectYanoljaPage/successPage/SuccessPage.tsx
@@ -10,11 +10,11 @@ const SuccessPage = () => {
   const navigate = useNavigate();
   const location = useLocation();
 
-  useEffect(() => {
-    if (!location.state?.success) {
-      navigate("/");
-    }
-  }, [navigate, location.state]);
+  // useEffect(() => {
+  //   if (!location.state?.success) {
+  //     navigate("/");
+  //   }
+  // }, [navigate, location.state]);
 
   return (
     <S.PageContainer>
diff --git a/src/pages/myPage/MyPage.style.ts b/src/pages/myPage/MyPage.style.ts
index 3bd63c22..b9823640 100644
--- a/src/pages/myPage/MyPage.style.ts
+++ b/src/pages/myPage/MyPage.style.ts
@@ -1,5 +1,12 @@
 import styled from "styled-components";
 
+export const Container = styled.main`
+  padding-top: 56px;
+  padding-bottom: 62px;
+
+  background-color: ${({ theme }) => theme.color.white};
+`;
+
 export const ProfileSection = styled.section`
   padding: 25px 20px 24px;
 
diff --git a/src/pages/myPage/MyPage.tsx b/src/pages/myPage/MyPage.tsx
index 96e708b8..5eeba589 100644
--- a/src/pages/myPage/MyPage.tsx
+++ b/src/pages/myPage/MyPage.tsx
@@ -34,7 +34,7 @@ const MyPage = () => {
   };
 
   return (
-    <>
+    <S.Container>
       <S.ProfileSection>
         <h3>{userProfile?.email} 님</h3>
         {!userProfile ? (
@@ -47,7 +47,7 @@ const MyPage = () => {
       </S.ProfileSection>
       <MyPageNav />
       <Outlet />
-    </>
+    </S.Container>
   );
 };
 
diff --git a/src/pages/myPage/manage/accountInfo/AccountInfo.style.ts b/src/pages/myPage/manage/accountInfo/AccountInfo.style.ts
index 2772e050..b9c57d21 100644
--- a/src/pages/myPage/manage/accountInfo/AccountInfo.style.ts
+++ b/src/pages/myPage/manage/accountInfo/AccountInfo.style.ts
@@ -5,7 +5,7 @@ export const AccountInfoContainer = styled.div`
   flex-direction: column;
   gap: 32px;
 
-  padding: 32px 20px;
+  padding: 56px 1.25rem 80px;
 `;
 
 export const AccountInfoWrapper = styled.div`
diff --git a/src/pages/myPage/setting/Setting.style.ts b/src/pages/myPage/setting/Setting.style.ts
index 09585d4d..c8f63300 100644
--- a/src/pages/myPage/setting/Setting.style.ts
+++ b/src/pages/myPage/setting/Setting.style.ts
@@ -1,7 +1,9 @@
 import styled, { css } from "styled-components";
 
-export const SettingListContainer = styled.div`
-  padding: 32px 20px;
+export const SettingListContainer = styled.main`
+  padding: 56px 1.25rem 80px;
+
+  background-color: ${({ theme }) => theme.color.white};
 `;
 
 export const ListWrapper = css`
diff --git a/src/pages/passwordResetPage/PasswordReset.style.ts b/src/pages/passwordResetPage/PasswordReset.style.ts
index cd712291..f5cd0135 100644
--- a/src/pages/passwordResetPage/PasswordReset.style.ts
+++ b/src/pages/passwordResetPage/PasswordReset.style.ts
@@ -7,9 +7,10 @@ export const PasswordResetContainer = styled.form`
 
   background-color: white;
 
-  margin: 32px 0 0 0;
+  margin-top: 32px;
 
-  padding-bottom: 100px;
+  padding-top: 56px;
+  padding-bottom: 62px;
 `;
 
 export const PasswordResetTitleContainer = styled.div`
@@ -28,7 +29,7 @@ export const PasswordResetInputContainer = styled.div`
   flex-direction: column;
   gap: 24px;
 
-  margin: 80px 0 76px 0;
+  margin: 60px 0;
 
   width: calc(100% - 40px);
 `;
diff --git a/src/pages/passwordResetPage/PasswordReset.tsx b/src/pages/passwordResetPage/PasswordReset.tsx
index d242d8bc..d6f72476 100644
--- a/src/pages/passwordResetPage/PasswordReset.tsx
+++ b/src/pages/passwordResetPage/PasswordReset.tsx
@@ -12,7 +12,7 @@ const PasswordReset = () => {
   return (
     <S.PasswordResetContainer>
       <S.PasswordResetTitleContainer>
-        <S.PasswordResetTitle>비밀번호 변경</S.PasswordResetTitle>
+        <S.PasswordResetTitle>비밀번호 재설정</S.PasswordResetTitle>
       </S.PasswordResetTitleContainer>
 
       <FormProvider {...method}>
diff --git a/src/pages/paymentPage/Payment.style.ts b/src/pages/paymentPage/Payment.style.ts
index 9765513b..e33bea8e 100644
--- a/src/pages/paymentPage/Payment.style.ts
+++ b/src/pages/paymentPage/Payment.style.ts
@@ -3,7 +3,8 @@ import styled from "styled-components";
 
 export const PaymentContainer = styled.div`
   background-color: ${({ theme }) => theme.color.greyScale7};
-  padding-bottom: 80px;
+  padding-top: 56px;
+  padding-bottom: 62px;
 `;
 
 export const Section = styled.section`
diff --git a/src/pages/paymentSuccessPage/PaymentSuccess.style.ts b/src/pages/paymentSuccessPage/PaymentSuccess.style.ts
index b045ff68..21bd7125 100644
--- a/src/pages/paymentSuccessPage/PaymentSuccess.style.ts
+++ b/src/pages/paymentSuccessPage/PaymentSuccess.style.ts
@@ -11,7 +11,8 @@ export { LeftBox, RightBox } from "@pages/roomDetailPage/RoomDetail.style";
 import borderImgSrc from "@assets/icons/border.svg";
 
 export const PurchasedContainer = styled.main`
-  padding-bottom: 80px;
+  padding-top: 56px;
+  padding-bottom: 62px;
 
   background-color: ${({ theme }) => theme.color.greyScale7};
 `;
diff --git a/src/pages/roomDetailPage/RoomDetail.style.ts b/src/pages/roomDetailPage/RoomDetail.style.ts
index f2ad8a3f..6296b024 100644
--- a/src/pages/roomDetailPage/RoomDetail.style.ts
+++ b/src/pages/roomDetailPage/RoomDetail.style.ts
@@ -3,7 +3,7 @@ import type { ColorKeys, TypoKeys } from "@styles/theme";
 
 export const Container = styled.main`
   background-color: ${({ theme }) => theme.color.greyScale7};
-  padding-bottom: 80px;
+  padding-bottom: 62px;
 `;
 
 export const DetailSection = styled.section`
diff --git a/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.style.ts b/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.style.ts
index b895cc6b..de7b8c12 100644
--- a/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.style.ts
+++ b/src/pages/roomDetailPage/components/roomNavBar/RoomNavBar.style.ts
@@ -5,7 +5,7 @@ export { Text } from "@pages/roomDetailPage/RoomDetail.style";
 export const Wrapper = styled.section`
   width: 100%;
   max-width: 768px;
-  height: 68px;
+  height: 60px;
   padding: 1.2rem 1.25rem;
   position: fixed;
   bottom: 0;
diff --git a/src/pages/saleDetailPage/SaleDetail.style.ts b/src/pages/saleDetailPage/SaleDetail.style.ts
index e68e6b7c..a3a4fc35 100644
--- a/src/pages/saleDetailPage/SaleDetail.style.ts
+++ b/src/pages/saleDetailPage/SaleDetail.style.ts
@@ -26,10 +26,13 @@ export const TopSectionReserveNumber = styled.div`
   ${({ theme }) => theme.typo.body2}
 `;
 
-export const PurchasedContainer = styled.main`
+export const Container = styled.main`
+  padding-bottom: 62px;
+`;
+
+export const PurchasedContainer = styled.div`
   width: 100%;
   height: 100%;
-  padding-bottom: 80px;
 
   color: ${({ theme }) => theme.color.black};
   ${({ theme }) => theme.scroll};
diff --git a/src/pages/saleDetailPage/SaleDetail.tsx b/src/pages/saleDetailPage/SaleDetail.tsx
index 232c0820..a9b13dd7 100644
--- a/src/pages/saleDetailPage/SaleDetail.tsx
+++ b/src/pages/saleDetailPage/SaleDetail.tsx
@@ -211,7 +211,7 @@ const SaleDetail = () => {
   };
 
   return (
-    <>
+    <S.Container>
       {data && (
         <S.PurchasedContainer>
           {(data.saleStatus === "판매완료" ||
@@ -247,7 +247,7 @@ const SaleDetail = () => {
           </S.BottomWrapper>
         </S.PurchasedContainer>
       )}
-    </>
+    </S.Container>
   );
 };
 
diff --git a/src/pages/searchPage/Search.style.ts b/src/pages/searchPage/Search.style.ts
index b1f8d23f..eabd94b8 100644
--- a/src/pages/searchPage/Search.style.ts
+++ b/src/pages/searchPage/Search.style.ts
@@ -1,12 +1,16 @@
 import styled from "styled-components";
 import TopButtonIcon from "@assets/icons/ic_top_button.svg?react";
+
+export const Container = styled.div`
+  background-color: ${({ theme }) => theme.color.white};
+`;
+
 export const SearchContainer = styled.div`
   width: 100%;
   height: 100%;
 
   padding-top: 68px;
   color: ${({ theme }) => theme.color.black};
-  ${({ theme }) => theme.scroll};
 `;
 
 export const SearchItemFlex = styled.div`
diff --git a/src/pages/searchPage/Search.tsx b/src/pages/searchPage/Search.tsx
index d3c99b45..6f9d015a 100644
--- a/src/pages/searchPage/Search.tsx
+++ b/src/pages/searchPage/Search.tsx
@@ -91,7 +91,7 @@ const Search = () => {
     }
   }, []);
   return (
-    <>
+    <S.Container>
       <SearchBar />
       <SearchNav />
 
@@ -109,16 +109,17 @@ const Search = () => {
         <S.SearchItemFlex>
           {data &&
             data.pages?.length > 0 &&
-            data.pages.map((page) =>
-              page?.content.map((item: ISearchList) => (
-                <SearchItem key={item.id} item={item} />
-              )),
+            data.pages.map(
+              (page) =>
+                page?.content.map((item: ISearchList) => (
+                  <SearchItem key={item.id} item={item} />
+                )),
             )}
         </S.SearchItemFlex>
 
         <div ref={setTarget} />
       </S.SearchContainer>
-    </>
+    </S.Container>
   );
 };
 
diff --git a/src/pages/signUpPage/SignUp.style.ts b/src/pages/signUpPage/SignUp.style.ts
index e730278f..03dfee26 100644
--- a/src/pages/signUpPage/SignUp.style.ts
+++ b/src/pages/signUpPage/SignUp.style.ts
@@ -7,16 +7,21 @@ export const SignUpContainer = styled.form`
 
   background-color: white;
 
-  margin: 40px 0 0 0;
+  margin-top: 32px;
 
-  padding-bottom: 100px;
+  padding-top: 56px;
+  padding-bottom: 80px;
 `;
 
-export const SignUpTitle = styled.p`
-  ${({ theme }) => theme.typo.title4}
-  color: #3A3A3A;
+export const TitleWrapper = styled.div`
+  display: flex;
 
-  margin: 0 0 64px 0;
+  width: calc(100% - 40px);
+`;
+
+export const SignUpTitle = styled.h1`
+  ${({ theme }) => theme.typo.title2}
+  color: ${({ theme }) => theme.color.greyScale1};
 `;
 
 export const SignUpInputContainer = styled.div`
@@ -24,7 +29,7 @@ export const SignUpInputContainer = styled.div`
   flex-direction: column;
   gap: 24px;
 
-  margin: 0 0 40px 0;
+  margin: 60px 0;
 
   width: calc(100% - 40px);
 `;
diff --git a/src/pages/signUpPage/SignUp.tsx b/src/pages/signUpPage/SignUp.tsx
index 7365b309..c7b7d889 100644
--- a/src/pages/signUpPage/SignUp.tsx
+++ b/src/pages/signUpPage/SignUp.tsx
@@ -13,14 +13,14 @@ const SignUp = () => {
 
   return (
     <S.SignUpContainer>
-      <S.SignUpTitle>회원가입</S.SignUpTitle>
+      <S.TitleWrapper>
+        <S.SignUpTitle>회원가입</S.SignUpTitle>
+      </S.TitleWrapper>
       <FormProvider {...methods}>
         <FieldValues />
-
         <S.SignUpCheckBoxContainer>
           <TermsAgreementSection />
         </S.SignUpCheckBoxContainer>
-
         <SignUpSubmitBtn />
       </FormProvider>
     </S.SignUpContainer>
diff --git a/src/pages/transferWritingPage/TransferWriting.style.ts b/src/pages/transferWritingPage/TransferWriting.style.ts
index b84c133a..c26b1e94 100644
--- a/src/pages/transferWritingPage/TransferWriting.style.ts
+++ b/src/pages/transferWritingPage/TransferWriting.style.ts
@@ -17,6 +17,11 @@ export const TransferItemList = styled.div`
   width: 100%;
   height: 100%;
   padding-top: 4px;
-  padding-bottom: 160px;
   ${({ theme }) => theme.scroll}
 `;
+
+export const Container = styled.main`
+  padding-top: 56px;
+  padding-bottom: 62px;
+  background-color: ${({ theme }) => theme.color.white};
+`;
diff --git a/src/pages/transferWritingPage/TransferWriting.tsx b/src/pages/transferWritingPage/TransferWriting.tsx
index b77ace29..dc01cf91 100644
--- a/src/pages/transferWritingPage/TransferWriting.tsx
+++ b/src/pages/transferWritingPage/TransferWriting.tsx
@@ -60,7 +60,7 @@ const TransferWriting = () => {
   }
 
   return (
-    <>
+    <S.Container>
       <S.Subtitle>판매할 내역을 선택해주세요.</S.Subtitle>
       <S.TransferItemList>
         {transferData &&
@@ -92,7 +92,7 @@ const TransferWriting = () => {
           />
         )}
       </S.TransferItemList>
-    </>
+    </S.Container>
   );
 };
 
diff --git a/src/pages/transferWritingPricePage/TransferWritingPrice.style.ts b/src/pages/transferWritingPricePage/TransferWritingPrice.style.ts
index 1699dabf..837cc8e0 100644
--- a/src/pages/transferWritingPricePage/TransferWritingPrice.style.ts
+++ b/src/pages/transferWritingPricePage/TransferWritingPrice.style.ts
@@ -1,10 +1,11 @@
 import { motion } from "framer-motion";
 import styled from "styled-components";
 
-export const Container = styled(motion.section)`
+export const Container = styled(motion.main)`
   width: 100%;
   height: 100%;
   padding-top: 56px;
+  padding-bottom: 60px;
 
   background-color: ${({ theme }) => theme.color.greyScale7};
 
diff --git a/src/pages/transferWritingPricePage/TransferWritingPrice.tsx b/src/pages/transferWritingPricePage/TransferWritingPrice.tsx
index 33f3693d..3136056f 100644
--- a/src/pages/transferWritingPricePage/TransferWritingPrice.tsx
+++ b/src/pages/transferWritingPricePage/TransferWritingPrice.tsx
@@ -15,6 +15,7 @@ import usePreventLeave from "@hooks/common/usePreventLeave";
 import { PATH } from "@constants/path";
 import EnterAccountInfo from "./enterAccountInfo/EnterAccountInfo";
 import useToastConfig from "@hooks/common/useToastConfig";
+import TransferPricingHeader from "./transferWritingPriceHeader/TransferPricingHeaderTop";
 
 const TransferWritingPrice = () => {
   usePreventLeave(true);
@@ -234,6 +235,7 @@ const TransferWritingPrice = () => {
 
   return (
     <S.Container layout>
+      <TransferPricingHeader />
       {accountSetting === "none" && (
         <>
           <FirstPriceTag
diff --git a/src/components/layout/transferWritingPriceHeader/TransferPricingHeaderTop.style.ts b/src/pages/transferWritingPricePage/transferWritingPriceHeader/TransferPricingHeaderTop.style.ts
similarity index 98%
rename from src/components/layout/transferWritingPriceHeader/TransferPricingHeaderTop.style.ts
rename to src/pages/transferWritingPricePage/transferWritingPriceHeader/TransferPricingHeaderTop.style.ts
index e0b48d34..90702304 100644
--- a/src/components/layout/transferWritingPriceHeader/TransferPricingHeaderTop.style.ts
+++ b/src/pages/transferWritingPricePage/transferWritingPriceHeader/TransferPricingHeaderTop.style.ts
@@ -10,7 +10,8 @@ export const HeaderContainer = styled.section`
 
   position: fixed;
   top: 0;
-  z-index: 10;
+  left: 0;
+  z-index: 1;
 
   background-color: white;
 `;
diff --git a/src/components/layout/transferWritingPriceHeader/TransferPricingHeaderTop.tsx b/src/pages/transferWritingPricePage/transferWritingPriceHeader/TransferPricingHeaderTop.tsx
similarity index 100%
rename from src/components/layout/transferWritingPriceHeader/TransferPricingHeaderTop.tsx
rename to src/pages/transferWritingPricePage/transferWritingPriceHeader/TransferPricingHeaderTop.tsx
diff --git a/src/pages/transferWritingSuccessPage/TransferWritingSuccess.style.ts b/src/pages/transferWritingSuccessPage/TransferWritingSuccess.style.ts
index a8441dde..feb9efd1 100644
--- a/src/pages/transferWritingSuccessPage/TransferWritingSuccess.style.ts
+++ b/src/pages/transferWritingSuccessPage/TransferWritingSuccess.style.ts
@@ -1,33 +1,168 @@
-import styled from "styled-components";
+import { hexToRgba } from "@utils/hexTorgba";
+import styled, { DefaultTheme } from "styled-components";
 
 export const Container = styled.div`
   width: 100%;
   height: 100%;
   background-color: white;
 
+  padding-bottom: 92px;
+
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
+`;
+
+export const PageContainer = styled.div`
+  width: 100%;
+  height: 100%;
+
+  background-color: ${({ theme }) => theme.color.white};
+`;
+
+const breakpoints = {
+  tablet: "768px",
+  mobile: "390px",
+};
+
+export const MainWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+
+  height: 80%;
+  gap: 2rem;
+
+  padding-top: 20%;
+
+  @media (max-width: ${breakpoints.mobile}) {
+    padding-top: 30%;
+  }
+`;
+
+export const PercentHotelLogo = styled.div`
+  width: 180px;
+
+  & > img {
+    width: 100%;
+  }
+
+  @media (max-width: ${breakpoints.tablet}) {
+    width: 170px;
+  }
+
+  @media (max-width: ${breakpoints.mobile}) {
+    width: 150px;
+  }
+`;
+
+export const PercentHotelIcon = styled.div`
+  width: 80px;
 
-  padding: 32px;
+  & > img {
+    width: 100%;
+  }
 
-  & button {
-    margin-bottom: 32px;
-    flex-shrink: 0;
+  @media (max-width: ${breakpoints.tablet}) {
+    width: 70px;
+  }
 
-    width: calc(100% - 40px);
-    height: 48px;
+  @media (max-width: ${breakpoints.mobile}) {
+    width: 60px;
+  }
+`;
 
-    ${({ theme }) => theme.typo.button4}
-    color: white;
+export const XIcon = styled.div`
+  width: 15px;
 
-    background-color: ${({ theme }) => theme.color.percentOrange};
-    border-radius: 12px;
-    transition: 0.2s;
+  & > img {
+    width: 100%;
+  }
+
+  @media (max-width: ${breakpoints.mobile}) {
+    width: 12px;
+  }
+`;
+
+export const Title = styled.p`
+  ${({ theme }) => theme.typo.title4};
+  color: ${({ theme }) => theme.color.black};
+`;
+
+export const SubTitle = styled.p`
+  ${({ theme }) => theme.typo.body4};
+  color: ${({ theme }) => theme.color.black};
+  line-height: 1.5;
+  text-align: center;
+`;
+
+export const BottomWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  padding: 0 1.25rem;
+  gap: 16px;
+`;
+
+interface ButtonVariantProps {
+  variant: "solid" | "outline";
+}
+
+const buttonStyles = {
+  solid: (theme: DefaultTheme) => `
+    background-color: ${theme.color.percentOrange};
+    color: ${theme.color.white};
+    border: 1px solid ${theme.color.percentOrange};
 
     &:hover {
-      background-color: ${({ theme }) => theme.color.darkOrange};
+    background-color: ${theme.color.darkOrange};
     }
+    &:focus {
+    background-color: ${theme.color.darkOrange};
+    }
+  `,
+  outline: (theme: DefaultTheme) => `
+    color: ${theme.color.percentOrange};
+    border: 1px solid ${theme.color.percentOrange}; 
+
+    &:hover {
+  background-color: ${hexToRgba(theme.color.lightOrange, 0.1)};
+    }
+    &:focus {
+  background-color: ${hexToRgba(theme.color.lightOrange, 0.2)};
+    }
+  `,
+};
+
+export const Button = styled.button.withConfig({
+  shouldForwardProp: (prop) => !["variant"].includes(prop),
+})<ButtonVariantProps>`
+  width: 60%;
+
+  @media (max-width: ${breakpoints.tablet}) {
+    width: 80%;
+  }
+
+  @media (max-width: ${breakpoints.mobile}) {
+    width: 100%;
   }
+
+  ${({ theme }) => theme.typo.button3};
+
+  border-radius: 8px;
+  padding: 0.9rem;
+
+  ${({ variant, theme }) => buttonStyles[variant](theme)};
+
+  transition: background-color 0.2s ease-in-out;
+`;
+
+export const TitleWrapper = styled.div`
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
 `;
diff --git a/src/pages/transferWritingSuccessPage/TransferWritingSuccess.tsx b/src/pages/transferWritingSuccessPage/TransferWritingSuccess.tsx
index 7397571c..18c293b9 100644
--- a/src/pages/transferWritingSuccessPage/TransferWritingSuccess.tsx
+++ b/src/pages/transferWritingSuccessPage/TransferWritingSuccess.tsx
@@ -1,5 +1,6 @@
 import * as S from "./TransferWritingSuccess.style";
-import TransferDone from "../../assets/icons/frame_TransferDone.svg?react";
+import PercentHotelIcon from "@assets/icons/ic_percent_hotel.png";
+import PercentHotelLogo from "@assets/logos/Percent-hotel_logo_b.png";
 import { useNavigate } from "react-router-dom";
 import { PATH } from "@constants/path";
 import { useSearchParams } from "react-router-dom";
@@ -23,13 +24,26 @@ const TransferWritingSuccess = () => {
 
   const navigate = useNavigate();
   const doneHandler = () => {
-    navigate(PATH.MY_PAGE);
+    navigate(PATH.SALE_LIST);
   };
 
   return (
     <S.Container>
-      <TransferDone />
-      <button onClick={doneHandler}>내 판매내역 확인하기</button>
+      <S.MainWrapper>
+        <S.PercentHotelLogo>
+          <img src={PercentHotelLogo} alt="퍼센트호텔 로고" />
+        </S.PercentHotelLogo>
+        <S.PercentHotelIcon>
+          <img src={PercentHotelIcon} alt="퍼센트호텔 아이콘" />
+        </S.PercentHotelIcon>
+        <S.TitleWrapper>
+          <S.Title>판매 게시물 등록 완료!</S.Title>
+          <S.SubTitle>상품이 판매되면 알림으로 알려드릴게요!</S.SubTitle>
+        </S.TitleWrapper>
+      </S.MainWrapper>
+      <S.Button variant="solid" onClick={doneHandler}>
+        내 판매내역 확인하기
+      </S.Button>
       <AccountBottomSheet content={content} onSetContent={setContent} />
     </S.Container>
   );
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index c2d6654b..ff6d618a 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -32,85 +32,111 @@ import PaymentSuccess from "@pages/paymentSuccessPage/PaymentSuccess";
 import EditAccount from "@pages/myPage/manage/editAccount/EditAccount";
 import Loading from "@components/loading/Loading";
 import SaleDetail from "@pages/saleDetailPage/SaleDetail";
-import Layout from "@components/layout/Layout";
 import TestLayout from "@components/layout/TestLayout";
 
 export const router = createBrowserRouter([
   {
     path: PATH.ROOT,
     element: (
-      <Suspense fallback={<Loading />}>
-        <App />
-      </Suspense>
+      <LocalErrorBoundary>
+        <Suspense fallback={<Loading />}>
+          <App />
+        </Suspense>
+      </LocalErrorBoundary>
     ),
     errorElement: <NotFound />,
     children: [
       {
+        path: "",
         element: (
-          <TestLayout
-            isHeaderOn={false}
-            isMainHeaderOn={false}
-            isTransferPricingHeaderOn={false}
-            isBottomNavOn={true}
-          >
-            <Outlet />
+          <TestLayout isHeaderOn={false} isBottomNavOn={true}>
+            <Suspense fallback={<Loading />}>
+              <Home />
+            </Suspense>
           </TestLayout>
         ),
-        children: [
-          {
-            path: "",
-            element: <Home />,
-          },
-        ],
       },
       {
+        path: PATH.LOGIN,
         element: (
-          <Layout>
-            <Outlet />
-          </Layout>
+          <TestLayout isHeaderOn={false} isBottomNavOn={false}>
+            <SignIn />
+          </TestLayout>
         ),
-        children: [
-          {
-            path: PATH.SEARCHLIST,
-            element: <Search />,
-          },
-          {
-            path: PATH.WRITE_TRANSFER,
-            element: (
-              <LocalErrorBoundary>
-                <Suspense fallback={<div>{/* loading */}</div>}>
-                  <TransferWriting />
-                </Suspense>
-              </LocalErrorBoundary>
-            ),
-          },
-          {
-            path: PATH.PURCAHSE_DEATAIL,
-            element: (
-              <LocalErrorBoundary>
-                <Suspense fallback={<div>LOADING</div>}>
-                  <PurchaseDetail />
-                </Suspense>
-              </LocalErrorBoundary>
-            ),
-          },
-          {
-            path: PATH.SETTING,
-            element: <Setting />,
-          },
-        ],
       },
       {
         path: PATH.SIGNUP,
-        element: <SignUp />,
+        element: (
+          <TestLayout isHeaderOn={true} isBottomNavOn={false}>
+            <SignUp />
+          </TestLayout>
+        ),
       },
       {
-        path: PATH.LOGIN,
-        element: <SignIn />,
+        path: PATH.PASSWORD_RESET,
+        element: (
+          <TestLayout isHeaderOn={true} isBottomNavOn={false}>
+            <PasswordReset />
+          </TestLayout>
+        ),
+      },
+      {
+        path: PATH.SEARCHLIST,
+        element: (
+          <TestLayout isHeaderOn={false} isBottomNavOn={true}>
+            <Suspense fallback={<Loading />}>
+              <Search />
+            </Suspense>
+          </TestLayout>
+        ),
+      },
+      {
+        path: PATH.WRITE_TRANSFER,
+        element: (
+          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+            <Suspense fallback={<Loading />}>
+              <TransferWriting />
+            </Suspense>
+          </TestLayout>
+        ),
+      },
+      {
+        path: PATH.WRITE_TRANSFER,
+        element: (
+          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+            <Suspense fallback={<Loading />}>
+              <TransferWriting />
+            </Suspense>
+          </TestLayout>
+        ),
+      },
+      {
+        path: PATH.WRITE_TRANSFER_PRICE + `/:id`,
+        element: (
+          <TestLayout isHeaderOn={false} isBottomNavOn={true}>
+            <Suspense fallback={<Loading />}>
+              <TransferWritingPrice />
+            </Suspense>
+          </TestLayout>
+        ),
+      },
+      {
+        path: PATH.WRITE_TRANSFER_SUCCESS,
+        element: (
+          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+            <Suspense fallback={<Loading />}>
+              <TransferWritingSuccess />
+            </Suspense>
+          </TestLayout>
+        ),
       },
       {
         path: PATH.MY_PAGE,
-        element: <MyPage />,
+        element: (
+          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+            <MyPage />
+          </TestLayout>
+        ),
         children: [
           {
             index: true,
@@ -123,125 +149,122 @@ export const router = createBrowserRouter([
           },
         ],
       },
-
       {
-        path: PATH.MANAGE_PROFILE,
-        element: <ManageProfile />,
-      },
-      {
-        path: PATH.MANAGE_ACCOUNT,
-        element: <ManageAccount />,
-      },
-      {
-        path: PATH.ACCOUNT_EDIT,
-        element: <EditAccount />,
+        path: PATH.SETTING,
+        element: (
+          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+            <Setting />
+          </TestLayout>
+        ),
       },
       {
-        path: PATH.WRITE_TRANSFER,
+        path: PATH.MANAGE_PROFILE,
         element: (
-          <LocalErrorBoundary>
-            <Suspense fallback={<Loading />}>
-              <TransferWriting />
-            </Suspense>
-          </LocalErrorBoundary>
+          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+            <ManageProfile />
+          </TestLayout>
         ),
       },
       {
-        path: PATH.WRITE_TRANSFER_PRICE + `/:id`,
+        path: PATH.MANAGE_ACCOUNT,
         element: (
-          <Suspense fallback={<Loading />}>
-            <TransferWritingPrice />
-          </Suspense>
+          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+            <ManageAccount />
+          </TestLayout>
         ),
       },
       {
-        path: PATH.WRITE_TRANSFER_SUCCESS,
+        path: PATH.ACCOUNT_EDIT,
         element: (
-          <Suspense fallback={<Loading />}>
-            <TransferWritingSuccess />
-          </Suspense>
+          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+            <EditAccount />
+          </TestLayout>
         ),
       },
       {
         path: PATH.DETAIL_ROOM(":productId"),
         element: (
-          <LocalErrorBoundary>
+          <TestLayout isHeaderOn={false} isBottomNavOn={false}>
             <Suspense fallback={<Loading />}>
               <RoomDetail />
             </Suspense>
-          </LocalErrorBoundary>
+          </TestLayout>
         ),
       },
       {
         path: PATH.ALARM,
         element: (
-          <LocalErrorBoundary>
-            <Suspense>
+          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+            <Suspense fallback={<Loading />}>
               <Alarm />
             </Suspense>
-          </LocalErrorBoundary>
+          </TestLayout>
         ),
       },
       {
-        path: PATH.PASSWORD_RESET,
-        element: <PasswordReset />,
-      },
-      {
-        path: PATH.PURCHASE_DEATAIL,
+        path: PATH.PURCAHSE_DEATAIL,
         element: (
-          <LocalErrorBoundary>
+          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
             <Suspense fallback={<Loading />}>
               <PurchaseDetail />
             </Suspense>
-          </LocalErrorBoundary>
+          </TestLayout>
         ),
       },
       {
         path: PATH.SALE_DETAIL + "/:saleId",
         element: (
-          <LocalErrorBoundary>
+          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
             <Suspense fallback={<Loading />}>
               <SaleDetail />
             </Suspense>
-          </LocalErrorBoundary>
+          </TestLayout>
         ),
       },
       {
         path: PATH.YANOLJA_ACCOUNT,
         element: (
-          <LocalErrorBoundary>
+          <TestLayout isHeaderOn={false} isBottomNavOn={false}>
             <Suspense fallback={<Loading />}>
               <Outlet />
             </Suspense>
-          </LocalErrorBoundary>
+          </TestLayout>
         ),
         children: [
           {
             index: true,
             element: <IntroPage />,
           },
-          {
-            path: "verify",
-            element: <VerificationPage />,
-          },
           {
             path: "verify/success",
             element: <SuccessPage />,
           },
         ],
       },
+      {
+        path: PATH.YANOLJA_ACCOUNT_VERIFICATION,
+        element: (
+          <TestLayout isHeaderOn={true} isBottomNavOn={false}>
+            <VerificationPage />
+          </TestLayout>
+        ),
+      },
       {
         path: PATH.SEARCH_FILTER,
-        element: <SearchFilter />,
+        element: (
+          <TestLayout isHeaderOn={true} isBottomNavOn={false}>
+            <SearchFilter />
+          </TestLayout>
+        ),
       },
       {
         path: PATH.PAYMENT(":productId"),
         element: (
-          <LocalErrorBoundary>
+          <TestLayout isHeaderOn={true} isBottomNavOn={false}>
             <Suspense fallback={<Loading />}>
               <Outlet />
             </Suspense>
-          </LocalErrorBoundary>
+          </TestLayout>
         ),
         children: [
           {

From cfedd66db1dedc48ef14f8e9080bb8d77bbd9e89 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Fri, 26 Jan 2024 17:02:53 +0900
Subject: [PATCH 11/14] =?UTF-8?q?fix:=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/Layout.tsx     | 63 ++-----------------
 src/components/layout/TestLayout.tsx | 23 -------
 src/pages/homePage/Home.tsx          |  2 +
 src/routes/router.tsx                | 90 ++++++++++++++--------------
 4 files changed, 53 insertions(+), 125 deletions(-)
 delete mode 100644 src/components/layout/TestLayout.tsx

diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index 92971562..dbc28896 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -2,71 +2,20 @@ import React from "react";
 import Header from "./header/HeaderTop";
 import * as S from "./Layout.style";
 import BottomNav from "./navBottom/NavBottom";
-import { useLocation, useParams } from "react-router-dom";
-import { PATH } from "@/constants/path";
-import TransferPricingHeader from "../../pages/transferWritingPricePage/transferWritingPriceHeader/TransferPricingHeaderTop";
-import MainHeader from "@pages/homePage/mainHeader/MainHeader";
-
 interface ChildrenProps {
   children: React.ReactNode;
+  isHeaderOn: boolean;
+  isBottomNavOn: boolean;
 }
 
-const Layout = ({ children }: ChildrenProps) => {
-  const { pathname, search } = useLocation();
-
-  // FIXME: 헤더, 네비바 특정 페이지에서만 보이지 않도록 수정 필요
-  const pathsToExcludeHeader = [PATH.LOGIN, PATH.WRITE_TRANSFER_PRICE];
-
-  const pathsToExcludeBottom = [PATH.LOGIN, PATH.SEARCH_FILTER];
-
-  let isHeaderOn = !pathsToExcludeHeader.some((path) =>
-    pathname.includes(path),
-  );
-  let isBottomNavOn = !pathsToExcludeBottom.some((path) =>
-    pathname.includes(path),
-  );
-
-  if (pathname === PATH.ROOT) {
-    isHeaderOn = false;
-  }
-
-  const { productId } = useParams();
-
-  if (pathname === PATH.DETAIL_ROOM(productId!)) {
-    isHeaderOn = false;
-    isBottomNavOn = false;
-  }
-  // 특수한 헤더
-  const isTransferPricingHeaderOn = pathname.includes(
-    PATH.WRITE_TRANSFER_PRICE,
-  );
-  const isMainHeaderOn = pathname === PATH.ROOT;
-
-  if (pathname.includes(PATH.MANAGE_ACCOUNT)) {
-    if (pathname === PATH.ACCOUNT_EDIT) {
-      isHeaderOn = false;
-    }
-    if (search === "?step=termsAgreement") {
-      isHeaderOn = false;
-      isBottomNavOn = false;
-    }
-    if (search === "?step=enterAccount") {
-      isHeaderOn = false;
-    }
-  }
-
+const Layout = ({ children, isHeaderOn, isBottomNavOn }: ChildrenProps) => {
   return (
     <S.Container>
-      {isHeaderOn && <Header />}
-      {isMainHeaderOn && <MainHeader />}
-      {isTransferPricingHeaderOn && <TransferPricingHeader />}
-      <S.Wrapper
-        $isHeaderOn={isHeaderOn} //
-        $isBottomNavOn={isBottomNavOn}
-      >
+      <S.Wrapper>
+        {isHeaderOn && <Header />}
         {children}
+        {isBottomNavOn && <BottomNav />}
       </S.Wrapper>
-      {isBottomNavOn && <BottomNav />}
     </S.Container>
   );
 };
diff --git a/src/components/layout/TestLayout.tsx b/src/components/layout/TestLayout.tsx
deleted file mode 100644
index 23f6a2aa..00000000
--- a/src/components/layout/TestLayout.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react";
-import Header from "./header/HeaderTop";
-import * as S from "./Layout.style";
-import BottomNav from "./navBottom/NavBottom";
-interface ChildrenProps {
-  children: React.ReactNode;
-  isHeaderOn: boolean;
-  isBottomNavOn: boolean;
-}
-
-const TestLayout = ({ children, isHeaderOn, isBottomNavOn }: ChildrenProps) => {
-  return (
-    <S.Container>
-      <S.Wrapper>
-        {isHeaderOn && <Header />}
-        {children}
-        {isBottomNavOn && <BottomNav />}
-      </S.Wrapper>
-    </S.Container>
-  );
-};
-
-export default TestLayout;
diff --git a/src/pages/homePage/Home.tsx b/src/pages/homePage/Home.tsx
index 282c798c..76740476 100644
--- a/src/pages/homePage/Home.tsx
+++ b/src/pages/homePage/Home.tsx
@@ -11,6 +11,7 @@ import WeekendCarousel from "./weekendCarousel/WeekendCarousel";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import TextLocaleAnimator from "./textAnimator/TextAnimator";
 import PercentAnimator from "./percentAnimator/PercentAnimator";
+import MainHeader from "./mainHeader/MainHeader";
 
 const Home = () => {
   const { data: mainData } = useSuspenseQuery({
@@ -44,6 +45,7 @@ const Home = () => {
 
   return (
     <S.Container>
+      <MainHeader />
       <TitleSection />
       <NavToSearchSection />
 
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index ff6d618a..2e6ea5f8 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -32,7 +32,7 @@ import PaymentSuccess from "@pages/paymentSuccessPage/PaymentSuccess";
 import EditAccount from "@pages/myPage/manage/editAccount/EditAccount";
 import Loading from "@components/loading/Loading";
 import SaleDetail from "@pages/saleDetailPage/SaleDetail";
-import TestLayout from "@components/layout/TestLayout";
+import Layout from "@components/layout/Layout";
 
 export const router = createBrowserRouter([
   {
@@ -49,93 +49,93 @@ export const router = createBrowserRouter([
       {
         path: "",
         element: (
-          <TestLayout isHeaderOn={false} isBottomNavOn={true}>
+          <Layout isHeaderOn={false} isBottomNavOn={true}>
             <Suspense fallback={<Loading />}>
               <Home />
             </Suspense>
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.LOGIN,
         element: (
-          <TestLayout isHeaderOn={false} isBottomNavOn={false}>
+          <Layout isHeaderOn={false} isBottomNavOn={false}>
             <SignIn />
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.SIGNUP,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={false}>
+          <Layout isHeaderOn={true} isBottomNavOn={false}>
             <SignUp />
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.PASSWORD_RESET,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={false}>
+          <Layout isHeaderOn={true} isBottomNavOn={false}>
             <PasswordReset />
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.SEARCHLIST,
         element: (
-          <TestLayout isHeaderOn={false} isBottomNavOn={true}>
+          <Layout isHeaderOn={false} isBottomNavOn={true}>
             <Suspense fallback={<Loading />}>
               <Search />
             </Suspense>
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.WRITE_TRANSFER,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+          <Layout isHeaderOn={true} isBottomNavOn={true}>
             <Suspense fallback={<Loading />}>
               <TransferWriting />
             </Suspense>
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.WRITE_TRANSFER,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+          <Layout isHeaderOn={true} isBottomNavOn={true}>
             <Suspense fallback={<Loading />}>
               <TransferWriting />
             </Suspense>
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.WRITE_TRANSFER_PRICE + `/:id`,
         element: (
-          <TestLayout isHeaderOn={false} isBottomNavOn={true}>
+          <Layout isHeaderOn={false} isBottomNavOn={true}>
             <Suspense fallback={<Loading />}>
               <TransferWritingPrice />
             </Suspense>
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.WRITE_TRANSFER_SUCCESS,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+          <Layout isHeaderOn={true} isBottomNavOn={true}>
             <Suspense fallback={<Loading />}>
               <TransferWritingSuccess />
             </Suspense>
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.MY_PAGE,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+          <Layout isHeaderOn={true} isBottomNavOn={true}>
             <MyPage />
-          </TestLayout>
+          </Layout>
         ),
         children: [
           {
@@ -152,83 +152,83 @@ export const router = createBrowserRouter([
       {
         path: PATH.SETTING,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+          <Layout isHeaderOn={true} isBottomNavOn={true}>
             <Setting />
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.MANAGE_PROFILE,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+          <Layout isHeaderOn={true} isBottomNavOn={true}>
             <ManageProfile />
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.MANAGE_ACCOUNT,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+          <Layout isHeaderOn={true} isBottomNavOn={true}>
             <ManageAccount />
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.ACCOUNT_EDIT,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+          <Layout isHeaderOn={true} isBottomNavOn={true}>
             <EditAccount />
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.DETAIL_ROOM(":productId"),
         element: (
-          <TestLayout isHeaderOn={false} isBottomNavOn={false}>
+          <Layout isHeaderOn={false} isBottomNavOn={false}>
             <Suspense fallback={<Loading />}>
               <RoomDetail />
             </Suspense>
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.ALARM,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+          <Layout isHeaderOn={true} isBottomNavOn={true}>
             <Suspense fallback={<Loading />}>
               <Alarm />
             </Suspense>
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.PURCAHSE_DEATAIL,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+          <Layout isHeaderOn={true} isBottomNavOn={true}>
             <Suspense fallback={<Loading />}>
               <PurchaseDetail />
             </Suspense>
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.SALE_DETAIL + "/:saleId",
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={true}>
+          <Layout isHeaderOn={true} isBottomNavOn={true}>
             <Suspense fallback={<Loading />}>
               <SaleDetail />
             </Suspense>
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.YANOLJA_ACCOUNT,
         element: (
-          <TestLayout isHeaderOn={false} isBottomNavOn={false}>
+          <Layout isHeaderOn={false} isBottomNavOn={false}>
             <Suspense fallback={<Loading />}>
               <Outlet />
             </Suspense>
-          </TestLayout>
+          </Layout>
         ),
         children: [
           {
@@ -244,27 +244,27 @@ export const router = createBrowserRouter([
       {
         path: PATH.YANOLJA_ACCOUNT_VERIFICATION,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={false}>
+          <Layout isHeaderOn={true} isBottomNavOn={false}>
             <VerificationPage />
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.SEARCH_FILTER,
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={false}>
+          <Layout isHeaderOn={true} isBottomNavOn={false}>
             <SearchFilter />
-          </TestLayout>
+          </Layout>
         ),
       },
       {
         path: PATH.PAYMENT(":productId"),
         element: (
-          <TestLayout isHeaderOn={true} isBottomNavOn={false}>
+          <Layout isHeaderOn={true} isBottomNavOn={false}>
             <Suspense fallback={<Loading />}>
               <Outlet />
             </Suspense>
-          </TestLayout>
+          </Layout>
         ),
         children: [
           {

From f7634496ea3f6f1dc53d1e8b336900085d06e6b2 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Fri, 26 Jan 2024 17:06:05 +0900
Subject: [PATCH 12/14] =?UTF-8?q?chore:=20=EC=A3=BC=EC=84=9D=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

---
 .../connectYanoljaPage/successPage/SuccessPage.tsx     | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/connectYanoljaPage/successPage/SuccessPage.tsx b/src/pages/connectYanoljaPage/successPage/SuccessPage.tsx
index bb874826..fba480d4 100644
--- a/src/pages/connectYanoljaPage/successPage/SuccessPage.tsx
+++ b/src/pages/connectYanoljaPage/successPage/SuccessPage.tsx
@@ -10,11 +10,11 @@ const SuccessPage = () => {
   const navigate = useNavigate();
   const location = useLocation();
 
-  // useEffect(() => {
-  //   if (!location.state?.success) {
-  //     navigate("/");
-  //   }
-  // }, [navigate, location.state]);
+  useEffect(() => {
+    if (!location.state?.success) {
+      navigate("/");
+    }
+  }, [navigate, location.state]);
 
   return (
     <S.PageContainer>

From 891ff76500f982ba44544efdf96aa7b5e767dd3f Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Fri, 26 Jan 2024 17:07:13 +0900
Subject: [PATCH 13/14] =?UTF-8?q?fix:=20path=20=EC=98=A4=ED=83=80=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/layout/header/HeaderTop.tsx                      | 2 +-
 src/constants/path.ts                                           | 2 +-
 .../components/PaymentSuccessButton/PaymentSuccessButton.tsx    | 2 +-
 .../transferPurchasePage/components/puchaseItem/PuchaseItem.tsx | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/layout/header/HeaderTop.tsx b/src/components/layout/header/HeaderTop.tsx
index d0edda43..bde09520 100644
--- a/src/components/layout/header/HeaderTop.tsx
+++ b/src/components/layout/header/HeaderTop.tsx
@@ -54,7 +54,7 @@ const Header = () => {
       title = "마이페이지";
       undo = true;
       break;
-    case PATH.PURCHASE_DEATAIL:
+    case PATH.PURCAHSE_DETAIL:
       alarmIC = false;
       settingIC = false;
       title = "구매내역상세";
diff --git a/src/constants/path.ts b/src/constants/path.ts
index 4d774dd4..ebc7cccc 100644
--- a/src/constants/path.ts
+++ b/src/constants/path.ts
@@ -5,7 +5,7 @@ export const PATH = {
   SEARCH_FILTER: "/search/filter",
   CREATE_TRIP: "/trip-new",
   SALE_LIST: "/my-page/sale-list",
-  PURCAHSE_DEATAIL: "/my-page/purchase-detail",
+  PURCAHSE_DETAIL: "/my-page/purchase-detail",
   SALE_DETAIL: "/my-page/sale-detail",
   DETAIL_ROOM: (productId: string | number) => `/room/${productId}`,
   WRITE_TRANSFER: "/transfer/new",
diff --git a/src/pages/paymentSuccessPage/components/PaymentSuccessButton/PaymentSuccessButton.tsx b/src/pages/paymentSuccessPage/components/PaymentSuccessButton/PaymentSuccessButton.tsx
index ed6a2ae2..a8ef8031 100644
--- a/src/pages/paymentSuccessPage/components/PaymentSuccessButton/PaymentSuccessButton.tsx
+++ b/src/pages/paymentSuccessPage/components/PaymentSuccessButton/PaymentSuccessButton.tsx
@@ -14,7 +14,7 @@ const PaymentSuccessButton = ({ productId }: { productId: string }) => {
         type="button"
         variant="outline"
         aria-label="상세내역 확인"
-        onClick={() => navigate(PATH.PURCHASE_DEATAIL + `?id=${productId}`)}
+        onClick={() => navigate(PATH.PURCAHSE_DETAIL + `?id=${productId}`)}
       >
         상세내역 확인
       </S.Button>
diff --git a/src/pages/transferPurchasePage/components/puchaseItem/PuchaseItem.tsx b/src/pages/transferPurchasePage/components/puchaseItem/PuchaseItem.tsx
index 684f21ea..12d089c2 100644
--- a/src/pages/transferPurchasePage/components/puchaseItem/PuchaseItem.tsx
+++ b/src/pages/transferPurchasePage/components/puchaseItem/PuchaseItem.tsx
@@ -7,7 +7,7 @@ import { useNavigate } from "react-router-dom";
 const PuchaseItem = (props: IPurchaseItemWithRemainDate) => {
   const navigate = useNavigate();
   const handleClick = () => {
-    navigate(`${PATH.PURCHASE_DEATAIL}?id=${props.id}`);
+    navigate(`${PATH.PURCAHSE_DETAIL}?id=${props.id}`);
   };
   return (
     <S.PurchaseItemContainer onClick={handleClick}>

From 03ad144501679c85edab9da3dcd18a5cdee30ae3 Mon Sep 17 00:00:00 2001
From: Park Nayoung <139189221+im-na0@users.noreply.github.com>
Date: Fri, 26 Jan 2024 17:09:44 +0900
Subject: [PATCH 14/14] =?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/routes/router.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index 2e6ea5f8..c754399d 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -202,7 +202,7 @@ export const router = createBrowserRouter([
         ),
       },
       {
-        path: PATH.PURCAHSE_DEATAIL,
+        path: PATH.PURCAHSE_DETAIL,
         element: (
           <Layout isHeaderOn={true} isBottomNavOn={true}>
             <Suspense fallback={<Loading />}>