Merge pull request #137 from YAPP-Github/feature/PRODUCT-254

feat: Bottom Navigation 컴포넌트 생성 (#136)

Author: wkdtnqls0506

src/app/(home)/layout.css.ts

@@ -4,7 +4,7 @@ import { semantic } from "@/styles";
 
 export const mainContainer = style({
   minHeight: "100dvh",
-  paddingBottom: "2.4rem",
+  paddingBottom: "5.6rem",
   paddingInline: "2rem",
   backgroundColor: semantic.background.white,
 });

src/app/(home)/layout.tsx

@@ -1,3 +1,5 @@
+import { BottomNavigation } from "@/components/ui/BottomNavigation";
+
 import { Header } from "./_components/Header";
 import * as styles from "./layout.css";
 
@@ -10,6 +12,7 @@ export default function MainLayout({
     <>
       <Header />
       <main className={styles.mainContainer}>{children}</main>
+      <BottomNavigation />
     </>
   );
 }

src/app/(store)/stores/(list)/layout.css.ts

@@ -3,4 +3,5 @@ import { style } from "@vanilla-extract/css";
 export const container = style({
   paddingInline: "2rem",
   minHeight: "100dvh",
+  paddingBottom: "5.6rem",
 });

src/app/(store)/stores/(list)/layout.tsx

@@ -1,9 +1,16 @@
+import { BottomNavigation } from "@/components/ui/BottomNavigation";
+
 import * as styles from "./layout.css";
 
 export default function StoreListLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  return <div className={styles.container}>{children}</div>;
+  return (
+    <>
+      <div className={styles.container}>{children}</div>
+      <BottomNavigation />
+    </>
+  );
 }

src/app/member/profile/_components/Header/Header.css.ts

@@ -0,0 +1,15 @@
+import { style } from "@vanilla-extract/css";
+
+import { semantic } from "@/styles";
+
+export const button = style({
+  width: "2.4rem",
+  height: "2.4rem",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+});
+
+export const icon = style({
+  color: semantic.icon.black,
+});

src/app/member/profile/_components/Header/Header.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import ChevronLeftIcon from "@/assets/chevron-left.svg";
+import { GNB } from "@/components/ui/GNB";
+
+import * as styles from "./Header.css";
+
+export const Header = () => {
+  const router = useRouter();
+
+  const handleClick = () => {
+    router.push("/");
+  };
+
+  return (
+    <GNB
+      align='center'
+      title='마이페이지'
+      leftAddon={
+        <button
+          type='button'
+          onClick={handleClick}
+          aria-label='홈으로 이동하기'
+          className={styles.button}
+        >
+          <ChevronLeftIcon
+            width={24}
+            height={24}
+            onClick={handleClick}
+            className={styles.icon}
+          />
+        </button>
+      }
+    />
+  );
+};

src/app/member/profile/_components/Header/index.ts

@@ -0,0 +1 @@
+export { Header } from "./Header";

src/app/member/profile/layout.css.ts

@@ -1,28 +1,14 @@
 import { style } from "@vanilla-extract/css";
 
-import { semantic } from "@/styles";
-
 export const wrapper = style({
   height: "100dvh",
   display: "flex",
   flexDirection: "column",
 });
 
-export const button = style({
-  width: "2.4rem",
-  height: "2.4rem",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-});
-
-export const icon = style({
-  color: semantic.icon.black,
-});
-
 export const mainWrapper = style({
   display: "flex",
   flex: 1,
   flexDirection: "column",
-  padding: "2rem",
+  padding: "2rem 2rem 5.6rem",
 });

src/app/member/profile/layout.tsx

@@ -1,11 +1,10 @@
 "use client";
 
-import { useRouter } from "next/navigation";
 import { type ReactNode } from "react";
 
-import ChevronLeftIcon from "@/assets/chevron-left.svg";
-import { GNB } from "@/components/ui/GNB";
+import { BottomNavigation } from "@/components/ui/BottomNavigation";
 
+import { Header } from "./_components/Header";
 import * as styles from "./layout.css";
 
 type MemberProfileLayoutProps = {
@@ -15,33 +14,11 @@ type MemberProfileLayoutProps = {
 export default function MemberProfileLayout({
   children,
 }: MemberProfileLayoutProps) {
-  const router = useRouter();
-  const handleClick = () => {
-    router.push("/");
-  };
-
   return (
     <div className={styles.wrapper}>
-      <GNB
-        align='center'
-        title='마이페이지'
-        leftAddon={
-          <button
-            type='button'
-            onClick={handleClick}
-            aria-label='홈으로 이동하기'
-            className={styles.button}
-          >
-            <ChevronLeftIcon
-              width={24}
-              height={24}
-              onClick={handleClick}
-              className={styles.icon}
-            />
-          </button>
-        }
-      />
+      <Header />
       <main className={styles.mainWrapper}>{children}</main>
+      <BottomNavigation />
     </div>
   );
 }