feat(DaengPlace#10): 메인페이지 작업 & ClientLayout navbottom, header 고정

.babelrc

@@ -1,4 +1,4 @@
 {
     "presets": ["next/babel"],
-    "plugins": []
+    "plugins": ["styled-components"]
   }

.storybook/main.js

@@ -11,6 +11,6 @@ const config = {
     name: "@storybook/nextjs",
     options: {},
   },
-  staticDirs: ["..\\public"],
+  staticDirs: ["../public"],
 };
 export default config;

next.config.mjs

@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+
+};
 
 export default nextConfig;

package.json

@@ -21,6 +21,7 @@
     "react": "19.0.0-rc-66855b96-20241106",
     "react-dom": "19.0.0-rc-66855b96-20241106",
     "react-hook-form": "^7.53.2",
+    "react-icons": "^5.3.0",
     "styled-components": "^6.1.13",
     "styled-icons": "^10.47.1",
     "zustand": "^5.0.1"
@@ -35,6 +36,7 @@
     "@storybook/nextjs": "^8.4.4",
     "@storybook/react": "^8.4.4",
     "@storybook/test": "8.4.4",
+    "babel-plugin-styled-components": "^2.1.4",
     "eslint": "^8",
     "eslint-config-next": "15.0.3",
     "eslint-plugin-storybook": "^0.11.0",

src/app/ClientLayout.js

@@ -5,15 +5,40 @@ import { ThemeProvider } from "styled-components";
 import BottomNav from "@/components/common/NavBottom/NavBottom";
 import theme from "@/styles/theme";
 import "./globals.css";
+import styled from "styled-components";
 
 export default function ClientLayout({ children }) {
   const pathname = usePathname();
   const noBottomNavPaths = ["/login"];
+  const noHeaderNavPaths = [];
+
+  const showBottomNav = !noBottomNavPaths.includes(pathname);
+  const showHeaderNav = !noHeaderNavPaths.includes(pathname);
 
   return (
     <ThemeProvider theme={theme}>
-      {children}
-      {!noBottomNavPaths.includes(pathname) && <BottomNav />}
+      <LayoutContainer>
+        <Content noHeader={!showHeaderNav} noBottom={!showBottomNav}>
+          {children}
+        </Content>
+        {showBottomNav && <BottomNav />}
+      </LayoutContainer>
     </ThemeProvider>
   );
 }
+
+const LayoutContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+`;
+
+const Content = styled.main`
+  flex: 1;
+  margin-top: ${({ noHeader }) => (noHeader ? "0" : "60px")};
+  margin-bottom: ${({ noBottom }) => (noBottom ? "0" : "75px")};
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+`;
+

src/app/main/page.jsx

@@ -0,0 +1,179 @@
+"use client";
+
+import FacilityCard from "@/components/main/FacilityCard/FacilityCard";
+import Link from "next/link";
+import { useState } from "react";
+import styled from "styled-components";
+import theme from '../../styles/theme.js';
+
+const images = [
+    "/assets/mainpage/banner1.png",
+    "/assets/mainpage/banner2.png,"
+];
+
+const facilities = [
+    {id:1, image: "/assets/mainpage/facilityImage.png", name: "92버터샵", category: "카페", rating: 5.0},
+    {id:2, image: "/assets/mainpage/facilityImage.png", name: "92버터샵", category: "카페", rating: 5.0},
+    {id:3, image: "/assets/mainpage/facilityImage.png", name: "92버터샵", category: "카페", rating: 5.0},
+    {id:4, image: "/assets/mainpage/facilityImage.png", name: "92버터샵", category: "카페", rating: 5.0}
+];
+
+const MainPage = () => {
+    const [age, setAge] = useState(20);
+    const [gender, setGender] = useState(1); // 0 : male, 1: female
+
+    return (
+        <Container>
+
+            <Banner>
+                <BannerImage
+                    src="/assets/mainpage/banner1.png" alt="banner image"
+                />
+            </Banner>
+
+            <Menu>
+                <MenuItem>
+                    <Link href='/recommend'>
+                        <MenuImage src='/assets/mainpage/recommendIcon.png' /><MenuDescription>성향별 추천</MenuDescription>
+                    </Link>
+                </MenuItem>
+
+                <MenuItem>
+                    <Link href='/search'>
+                        <MenuImage src='/assets/mainpage/daengplaceIcon.png' /><MenuDescription>댕플</MenuDescription>
+                    </Link>
+                </MenuItem>
+
+                <MenuItem>
+                    <Link href='/user'>
+                        <MenuImage src='/assets/mainpage/bookmarkIcon.png' /><MenuDescription>즐겨찾기</MenuDescription>
+                    </Link>
+                </MenuItem>
+            </Menu>
+
+            <PopularFacilities>
+                <SectionTitle>최근 <span style={{color: theme.colors.primary}}>인기 시설 🔥</span></SectionTitle>
+                <CardContainer>
+                    {facilities.slice(0, 5).map((fac) => (
+                        <FacilityCard
+                            key={fac.id}
+                            image={fac.image}
+                            category={fac.category}
+                            name={fac.name}
+                            rating={fac.rating}
+                        />
+                    ))}
+                </CardContainer>
+            </PopularFacilities>
+
+            <AgeGenderFacilities>
+                <SectionTitle><span style={{color: theme.colors.primary}}>{age}대 {gender===1? '여성' :'남성'}</span>들이 많이 찾는 👩🏻</SectionTitle>
+                <CardContainer>
+                    {facilities.slice(0, 5).map((fac) => (
+                        <FacilityCard
+                            key={fac.id}
+                            image={fac.image}
+                            category={fac.category}
+                            name={fac.name}
+                            rating={fac.rating}
+                        />
+                    ))}
+                </CardContainer>
+
+            </AgeGenderFacilities>
+
+            <Divider />
+
+        </Container>
+    );
+};
+
+export default MainPage;
+
+const Container = styled.div`
+    max-width: 600px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+`;
+
+const Banner = styled.div`
+    text-align: center;
+`;
+
+const BannerImage = styled.img`
+    width: 100%;
+`;
+
+const Menu = styled.div`
+    display: flex;
+    border: 1px solid ${({ theme }) => theme.colors.divider};
+    border-radius: 20px;
+    justify-content: space-around;
+    align-items: center;
+    margin: 10px 0;
+    padding: 20px 30px;
+    background-color: white;
+    width: 550px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+`;
+
+const MenuItem = styled.div`
+    display: flex-col;
+    text-align: center;
+    font-size: 14px;
+    cursor: pointer;
+`;
+
+const MenuImage = styled.img`
+    width: 80px;
+    height: 80px;
+`;
+
+const MenuDescription = styled.div`
+    padding-top: 10px;
+`;
+
+const Facility = styled.div`
+    width: 100%;
+    text-align: left;
+    margin: 2px 12px;
+    padding-left: 20px;
+`;
+
+const PopularFacilities = styled(Facility)``;
+const AgeGenderFacilities = styled(Facility)``;
+
+const SectionTitle = styled.div`
+    font-size: 18px;
+    font-weight: bold;
+`;
+
+const CardContainer = styled.div`
+    display: flex;
+    gap: 16px;
+    margin: 10px 0;
+    overflow-x: auto;
+    white-space: nowrap;
+    padding: 5px 25px 10px 5px;
+
+    &::-webkit-scrollbar {
+        height: 8px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: ${({theme}) => theme.colors.divider};
+        border-radius: 10px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background-color: ${({ theme }) => theme.colors.defaultBackground}; /* 스크롤바 배경 */
+    }
+`;
+
+const Divider = styled.div`
+    border-bottom: 1px solid ${({ theme }) => theme.colors.divider};
+`;
+
+

src/components/common/NavBottom/NavBottom.jsx

@@ -6,7 +6,7 @@ import { Home, Search, Map, Star, User } from "styled-icons/boxicons-regular";
 const tabs = [
   { label: "댕플", path: "/place", icon: Map },
   { label: "검색", path: "/search", icon: Search },
-  { label: "홈", path: "/", icon: Home },
+  { label: "홈", path: "/main", icon: Home },
   { label: "추천", path: "/recommend", icon: Star },
   { label: "마이페이지", path: "/user", icon: User },
 ];

src/components/common/NavBottom/NavBottom.stories.js

@@ -11,7 +11,7 @@ const Template = (args) => <NavBottom {...args} />;
 
 export const HomeSelected = Template.bind({});
 HomeSelected.args = {
-  pathname: "/",
+  pathname: "/main",
 };
 
 export const SearchSelected = Template.bind({});

src/components/main/FacilityCard/FacilityCard.jsx

@@ -0,0 +1,65 @@
+import Link from 'next/link';
+import React from 'react';
+import styled from "styled-components";
+
+const FacilityCard = ({image, category, name, rating, link}) => {
+    return (
+        <Link href="#">
+            <CardContainer>
+                <CardImage src={image} alt={name} />
+                <CardInfo>
+                    <Category>{category}</Category>
+                    <Name>{name}</Name>
+                    <Rating>⭐️ {rating.toFixed(1)}</Rating>
+                </CardInfo>
+            </CardContainer>
+        </Link>
+    );
+};
+
+export default FacilityCard;
+
+const CardContainer = styled.div`
+    background: ${({ theme }) => theme.colors.defaultbackground};
+    border-radius: 20px;
+    overflow: hidden;
+    transition: transform 0.2s;
+    border: 1px solid ${({ theme }) => theme.colors.divider};
+    width: 200px;
+
+    &:hover {
+    transform: scale(1.05);
+    }
+`;
+
+const CardImage = styled.img`
+    border-radius: 20px;
+    width: 100%;
+    object-fit: cover;
+    padding:10px 10px 0 10px;
+`;
+
+const CardInfo = styled.div`
+    padding: 5px 12px 12px 12px;
+    display: flex-col;
+`;
+
+const Category = styled.span`
+    display: inline-block;
+    background: ${({ theme }) => theme.colors.tertiary};
+    color: white;
+    font-size: 12px;
+    padding: 4px 8px;
+    border-radius: 4px;
+    margin-bottom: 8px;
+`;
+
+const Name = styled.h4`
+    font-size: 16px;
+`;
+
+const Rating = styled.p`
+    font-size: 14px;
+    color: #777;
+    font-weight: bold;
+`;