Merge pull request #273 from BCSDLab/feature/#272

[공통] 레이아웃 분리
BCSDLab · Mar 10, 2024 · b1bb6f2 · b1bb6f2
2 parents 2075eb4 + c3d26aa
commit b1bb6f2
Show file tree

Hide file tree

Showing 26 changed files with 647 additions and 518 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -3,7 +3,9 @@ import { Route, Routes } from 'react-router-dom';
 
 import AuthRoute from 'components/common/AuthRoute';
 import Toast from 'components/toast';
-import DefaultLayout from 'layout/DefaultLayout';
+import SideBottomDefaultLayout from 'layout/SideBottomDefaultLayout';
+import TopBottomDefaultLayout from 'layout/TopBottomDefaultLayout';
+import TopDefaultLayout from 'layout/TopDefaultLayout';
 import FindIDPassword from 'pages/Auth/FindIdPassword';
 import ChangePassword from 'pages/Auth/FindIdPassword/mobile/ChangePassword';
 import VerifyField from 'pages/Auth/FindIdPassword/mobile/VerifyField';
@@ -36,44 +38,46 @@ export default function App(): JSX.Element {
   return (
     <Suspense fallback={<div />}>
       <Routes>
-        <Route path="/" element={<DefaultLayout />}>
+        <Route path="/" element={<SideBottomDefaultLayout />}>
           <Route path="/shop" element={<Search />} />
           <Route path="/post" element={<Search />} />
-          <Route path="/shop/:placeId" element={<ShopDetail />} />
           <Route path="/shop/search/:keyword" element={<SearchDetails />} />
           <Route path="/post/search/:keyword" element={<SearchDetails />} />
           <Route path="/search/not-found" element={<NotFoundPage />} />
-          <Route path="/inquiry/all" element={<Inquiry />} />
-          <Route path="/inquiry/my" element={<Inquiry />} />
-          <Route path="/inquiry/search/:keyword" element={<Inquiry />} />
-          <Route path="/inquiry/inquire" element={<Inquire />} />
-          <Route path="/notice" element={<Notice />} />
-          <Route path="/notice/:id" element={<Detail />} />
+        </Route>
+        <Route path="/" element={<TopBottomDefaultLayout />}>
+          <Route path="/shop/:placeId" element={<ShopDetail />} />
         </Route>
         <Route element={<AuthRoute needAuth redirectRoute="/login" />}>
-          <Route path="/" element={<DefaultLayout />}>
+          <Route path="/" element={<TopBottomDefaultLayout />}>
+            <Route path="/post/:placeId" element={<Post />} />
             <Route path="/friend-list" element={<FollowPage />} />
             <Route path="/friend-list/:id" element={<FollowProfile />} />
             <Route path="/setting" element={<Setting />} />
             <Route path="/setting/id-change" element={<IdChange />} />
             <Route path="/profile" element={<MyPage />} />
-            <Route path="/post/:placeId" element={<Post />} />
             <Route path="/withdrawal" element={<Withdrawal />} />
+            <Route path="/inquiry/all" element={<Inquiry />} />
+            <Route path="/inquiry/my" element={<Inquiry />} />
+            <Route path="/inquiry/search/:keyword" element={<Inquiry />} />
+            <Route path="/inquiry/inquire" element={<Inquire />} />
+            <Route path="/notice" element={<Notice />} />
+            <Route path="/notice/:id" element={<Detail />} />
           </Route>
           <Route path="*" element={<PageNotFound />} />
         </Route>
         <Route element={<AuthRoute needAuth={false} redirectRoute="/" />}>
-          <Route path="/login" element={<Login />} />
-          <Route path="/terms-of-service" element={<TermsOfService />} />
-          <Route path="/signup" element={<SignUp />} />
-          <Route path="/signup/complete" element={<Complete />} />
-          <Route path="/" element={<DefaultLayout />}>
+          <Route path="/" element={<TopDefaultLayout />}>
+            <Route path="/login" element={<Login />} />
+            <Route path="/terms-of-service" element={<TermsOfService />} />
+            <Route path="/signup" element={<SignUp />} />
+            <Route path="/signup/complete" element={<Complete />} />
             <Route path="/find-id" element={<FindIDPassword type="id" />} />
             <Route path="/find-password" element={<FindIDPassword type="password" />} />
             <Route path="/find-password/change-pc" element={<ChangePasswordPC />} />
+            <Route path="/find/verify/:type" element={<VerifyField />} />
+            <Route path="/find-password/change-mobile" element={<ChangePassword />} />
           </Route>
-          <Route path="/find/verify/:type" element={<VerifyField />} />
-          <Route path="/find-password/change-mobile" element={<ChangePassword />} />
           <Route path="/login/oauth2/code/kakao" element={<KakaoLogin />} />
           <Route path="/login/oauth2/code/naver" element={<NaverLogin />} />
           <Route path="/login/oauth2/code/google" element={<GoogleLogin />} />

diff --git a/src/components/Auth/AuthTopNavigation/index.tsx b/src/components/Auth/AuthTopNavigation/index.tsx
diff --git a/src/components/ImageCarousel/ImageCarousel.module.scss b/src/components/ImageCarousel/ImageCarousel.module.scss
@@ -8,14 +8,13 @@ button {
 
 .shop {
   &__container {
-    width: calc(100vw - 90px);
-    min-width: 1196px;
+    width: 100vw;
     position: relative;
     overflow-x: hidden;
   }
 
   &__empty-image {
-    margin-left: max(calc((100vw - 1170px) / 2), 68px);
+    margin-left: max(calc((100vw - 1080px) / 2), 68px);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -25,10 +24,14 @@ button {
     background-color: #eeeeee;
     gap: 10px;
     font-size: 14px;
+
+    @include media.media-breakpoint-down(mobile) {
+      margin: 0;
+    }
   }
 
   &__image-carousel {
-    padding-left: max(calc((100vw - 1170px) / 2), 68px);
+    padding-left: max(calc((100vw - 1080px) / 2), 68px);
     max-width: 100vw;
     width: 100vw;
     display: flex;
@@ -38,6 +41,10 @@ button {
     align-items: center;
     transition: all 0.4s ease;
 
+    @include media.media-breakpoint-down(mobile) {
+      padding-left: max(calc((100vw - 1080px) / 2), 40px);
+    }
+
     & > li {
       width: fit-content;
       list-style: none;
@@ -47,10 +54,6 @@ button {
       width: 360px;
       height: 400px;
       object-fit: cover;
-
-      @include media.media-breakpoint-down(mobile) {
-        width: 100%;
-      }
     }
   }
 
@@ -64,9 +67,17 @@ button {
       position: absolute;
       background: #000;
       opacity: 0.7;
-      width: calc((100vw - 1170px) / 2);
+      width: calc((100vw - 1080px) / 2);
       min-width: 68px;
       height: 400px;
+
+      @include media.media-breakpoint-down(mobile) {
+        min-width: 40px;
+
+        svg {
+          width: 80%;
+        }
+      }
     }
 
     &__right {
@@ -77,9 +88,17 @@ button {
       position: absolute;
       background: #000;
       opacity: 0.7;
-      width: calc((100vw - 1170px) / 2);
+      width: calc((100vw - 1080px) / 2);
       min-width: 68px;
       height: 400px;
+
+      @include media.media-breakpoint-down(mobile) {
+        min-width: 40px;
+
+        svg {
+          width: 80%;
+        }
+      }
     }
   }
 }

diff --git a/...pNavigation/AuthTopNavigation.module.scss → ...n/TopNavigation/TopNavigation.module.scss b/...pNavigation/AuthTopNavigation.module.scss → ...n/TopNavigation/TopNavigation.module.scss
@@ -23,15 +23,32 @@
       color: #000000;
     }
   }
+}
+
+.info {
+  display: flex;
+  gap: 25px;
+  font-size: 16px;
+  font-weight: 500;
+  align-items: center;
+
+  &__login {
+    color: #666666;
+    text-decoration: none;
+  }
+
+  &__logout {
+    color: #ff7f23;
+    text-decoration: none;
+  }
 
   &__signup {
-    font-weight: 500;
-    font-size: 16px;
     background-color: transparent;
     color: #ff7f23;
     border: 1px solid #ff7f23;
     padding: 10px;
     border-radius: 30px;
+    text-decoration: none;
 
     &:hover {
       color: #ffffff;

diff --git a/src/components/common/TopNavigation/index.tsx b/src/components/common/TopNavigation/index.tsx
@@ -0,0 +1,46 @@
+import { Link } from 'react-router-dom';
+
+import AuthTitle from 'components/Auth/AuthTitle';
+import { useAuth, useClearAuth } from 'store/auth';
+import { useFilterFriend, useFilterNearby, useFilterScrap } from 'store/filter';
+import { useSelected } from 'store/placeId';
+
+import styles from './TopNavigation.module.scss';
+
+export default function TopNavigation() {
+  const auth = useAuth();
+  const clearAuth = useClearAuth();
+  const { setFilterFriend } = useFilterFriend();
+  const { setFilterScrap } = useFilterScrap();
+  const { setFilterNearby } = useFilterNearby();
+  const { setSelected } = useSelected();
+  return (
+    <div className={styles.navbar}>
+      <AuthTitle />
+      <div className={styles.info}>
+        {auth ? (
+          <>
+            <div className={styles.info__nickname}>{auth.nickname}님</div>
+            <Link
+              to="/"
+              onClick={() => {
+                clearAuth(); setSelected('');
+                setFilterFriend(true);
+                setFilterNearby(true);
+                setFilterScrap(true);
+              }}
+              className={styles.info__logout}
+            >
+              로그아웃
+            </Link>
+          </>
+        ) : (
+          <>
+            <Link to="/login" className={styles.info__login}>로그인</Link>
+            <Link to="/terms-of-service" className={styles.info__signup}>회원가입</Link>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/...t/DefaultLayout/DefaultLayout.module.scss → ...ayout/SideBottomDefaultLayout.module.scss b/...t/DefaultLayout/DefaultLayout.module.scss → ...ayout/SideBottomDefaultLayout.module.scss
diff --git a/src/layout/DefaultLayout/index.tsx → src/layout/SideBottomDefaultLayout/index.tsx b/src/layout/DefaultLayout/index.tsx → src/layout/SideBottomDefaultLayout/index.tsx
@@ -7,9 +7,9 @@ import useBooleanState from 'utils/hooks/useBooleanState';
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 import cn from 'utils/ts/classNames';
 
-import styles from './DefaultLayout.module.scss';
+import styles from './SideBottomDefaultLayout.module.scss';
 
-export default function DefaultLayout(): JSX.Element {
+export default function SideBottomDefaultLayout(): JSX.Element {
   const { isMobile } = useMediaQuery();
   const location = useLocation();
   const [visible, , , toggle, setVisible] = useBooleanState(false);

diff --git a/src/layout/TopBottomDefaultLayout/TopBottomDefaultLayout.module.scss b/src/layout/TopBottomDefaultLayout/TopBottomDefaultLayout.module.scss
@@ -0,0 +1,9 @@
+@use "src/utils/styles/mediaQuery" as media;
+
+.main {
+  margin-top: 80px;
+
+  @include media.media-breakpoint-down(mobile) {
+    margin: 0;
+  }
+}
diff --git a/src/layout/TopBottomDefaultLayout/index.tsx b/src/layout/TopBottomDefaultLayout/index.tsx
@@ -0,0 +1,20 @@
+import { Outlet } from 'react-router-dom';
+
+import BottomNavigation from 'components/common/BottomNavigation';
+import TopNavigation from 'components/common/TopNavigation';
+import useMediaQuery from 'utils/hooks/useMediaQuery';
+
+import styles from './TopBottomDefaultLayout.module.scss';
+
+export default function TopBottomDefaultLayout(): JSX.Element {
+  const { isMobile } = useMediaQuery();
+  return (
+    <>
+      {!isMobile && <TopNavigation />}
+      <main className={styles.main}>
+        <Outlet />
+      </main>
+      {isMobile && <BottomNavigation />}
+    </>
+  );
+}
diff --git a/src/layout/TopDefaultLayout/TopDefaultLayout.module.scss b/src/layout/TopDefaultLayout/TopDefaultLayout.module.scss
@@ -0,0 +1,9 @@
+@use "src/utils/styles/mediaQuery" as media;
+
+.main {
+  margin-top: 80px;
+
+  @include media.media-breakpoint-down(mobile) {
+    margin: 0;
+  }
+}
diff --git a/src/layout/TopDefaultLayout/index.tsx b/src/layout/TopDefaultLayout/index.tsx
@@ -0,0 +1,18 @@
+import { Outlet } from 'react-router-dom';
+
+import TopNavigation from 'components/common/TopNavigation';
+import useMediaQuery from 'utils/hooks/useMediaQuery';
+
+import styles from './TopDefaultLayout.module.scss';
+
+export default function TopDefaultLayout(): JSX.Element {
+  const { isMobile } = useMediaQuery();
+  return (
+    <>
+      {!isMobile && <TopNavigation />}
+      <main className={styles.main}>
+        <Outlet />
+      </main>
+    </>
+  );
+}
diff --git a/src/pages/Auth/FindIdPassword/PC/index.module.scss b/src/pages/Auth/FindIdPassword/PC/index.module.scss
@@ -5,7 +5,7 @@ $body: #666666;
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 50px;
+  margin-top: 120px;
 
   &__container {
     width: 365px;
@@ -162,6 +162,5 @@ $body: #666666;
 }
 
 .copyright {
-  position: fixed;
-  bottom: 50px;
+  margin-bottom: 50px;
 }