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 />}>