Merge pull request #164 from SCBJ-7/feature/#114-refactor-layout

[#114] 공통 레이아웃 (헤더, 네비바) 분리
SCBJ-7 · Jan 26, 2024 · f95800d · f95800d
2 parents e4b4637 + dbfa0e4
commit f95800d
Show file tree

Hide file tree

Showing 36 changed files with 408 additions and 223 deletions.
diff --git 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";
@@ -12,11 +11,11 @@ function App() {
   const toastConfig = useToastStore((state) => state.config);
 
   return (
-    <Layout>
+    <>
       <ScrollToTop />
       <AnimatePresence>{toastConfig.isShow && <Toast />}</AnimatePresence>
       <Outlet />
-    </Layout>
+    </>
   );
 }
 

diff --git 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
@@ -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 "./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/header/HeaderTop.style.ts b/src/components/layout/header/HeaderTop.style.ts
@@ -1,28 +1,21 @@
 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;
   justify-content: center;
 
   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
@@ -54,7 +54,7 @@ const Header = () => {
       title = "마이페이지";
       undo = true;
       break;
-    case PATH.PURCHASE_DEATAIL:
+    case PATH.PURCAHSE_DETAIL:
       alarmIC = false;
       settingIC = false;
       title = "구매내역상세";
@@ -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
@@ -1,33 +1,32 @@
-// icons
 import {
   PiListMagnifyingGlassFill,
   PiNewspaperClippingFill,
   PiUserFill,
 } 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
@@ -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_DETAIL: "/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
@@ -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/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/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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};
 `;