feat : 메인페이지 레이아웃 개발 (#122)

src/components/HomePage/LetterContainer/LetterContainer.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { LetterContainer } from './LetterContainer';
+
+const meta: Meta<typeof LetterContainer> = {
+    component: LetterContainer,
+    title: 'molecule/LetterContainer',
+    tags: ['autodocs'],
+    argTypes: {},
+    parameters: {
+        docs: {
+            description: {
+                component: 'homePage에서 받은 편지를 표시합니다.'
+            }
+        }
+    }
+};
+export default meta;
+
+type Story = StoryObj<typeof LetterContainer>;
+
+export const Default: Story = {
+    args: {}
+};

src/components/HomePage/LetterContainer/LetterContainer.tsx

@@ -0,0 +1,64 @@
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { EffectCards } from 'swiper/modules';
+import 'swiper/swiper-bundle.css';
+import { BottleLetter } from '../../Common/BottleLetter/BottleLetter';
+import { NotificationBadge } from '../../Common/NotificationBadge/NotificationBadge';
+
+export const LetterContainer = () => {
+    const letters = [
+        {
+            letterId: 1,
+            createdDate: '날짜',
+            font: '글씨체',
+            keywords: ['공감', '행복', '후련함'],
+            content: '편지 내용',
+            paper: '이미지 url',
+            label: '라벨_샘플.png'
+        },
+        {
+            letterId: 1,
+            createdDate: '날짜',
+            font: '글씨체',
+            keywords: ['공감', '행복', '후련함'],
+            content: '편지 내용',
+            paper: '이미지 url',
+            label: '라벨_샘플.png'
+        },
+        {
+            letterId: 1,
+            createdDate: '날짜',
+            font: '글씨체',
+            keywords: ['공감', '행복', '후련함'],
+            content: '편지 내용',
+            paper: '이미지 url',
+            label: '라벨_샘플.png'
+        }
+    ];
+
+    return (
+        <div className="relative">
+            <div className="absolute right-[20px]">
+                <NotificationBadge badgeType="basic" count={letters.length} />
+            </div>
+            <div className="overflow-hidden mx-[-20px] mt-[50px]">
+                {/* <div className="overflow-hidden mx-[-20px] ml-[-70px] translate-x-[50px]"> */}
+                <Swiper
+                    effect={'cards'}
+                    grabCursor={true}
+                    modules={[EffectCards]}
+                    className="mySwiper object-cover"
+                >
+                    {letters.map((letter, i) => {
+                        return (
+                            <SwiperSlide key={i}>
+                                <div className="h-[350px] ">
+                                    <BottleLetter Letter={letter} />
+                                </div>
+                            </SwiperSlide>
+                        );
+                    })}
+                </Swiper>
+            </div>
+        </div>
+    );
+};

src/components/HomePage/TopButtonContainer/TopButtonContainer.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TopButtonContainer } from './TopButtonContainer';
+
+const meta: Meta<typeof TopButtonContainer> = {
+    component: TopButtonContainer,
+    title: 'molecule/TopButtonContainer',
+    tags: ['autodocs'],
+    argTypes: {},
+    parameters: {
+        docs: {
+            description: {
+                component: 'homePage에서 상단에 위치하는 버튼 입니다.'
+            }
+        }
+    }
+};
+export default meta;
+
+type Story = StoryObj<typeof TopButtonContainer>;
+
+export const Default: Story = {
+    args: {}
+};

src/components/HomePage/TopButtonContainer/TopButtonContainer.tsx

@@ -0,0 +1,8 @@
+export const TopButtonContainer = () => {
+    return (
+        <div className="flex justify-between">
+            <button className="btn-base w-[44px] h-[44px]">1</button>
+            <button className="btn-base w-[44px] h-[44px]">2</button>
+        </div>
+    );
+};

src/components/HomePage/WelcomeMessageContainer/WelcomeMessageContainer.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { WelcomeMessageContainer } from './WelcomeMessageContainer';
+import { UserType } from '@/types/user';
+
+const sampleUser: UserType = {
+    nickname: '홍길동',
+    email: '',
+    profileImageUrl: ''
+};
+
+const meta: Meta<typeof WelcomeMessageContainer> = {
+    component: WelcomeMessageContainer,
+    title: 'molecule/WelcomeMessageContainer',
+    tags: ['autodocs'],
+    argTypes: {},
+    parameters: {
+        docs: {
+            description: {
+                component: 'homePage에서 타이틀을 나타냅니다.'
+            }
+        }
+    }
+};
+export default meta;
+
+type Story = StoryObj<typeof WelcomeMessageContainer>;
+
+export const Default: Story = {
+    args: {
+        user: sampleUser,
+        newLetter: true
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: '새로 받은 편지가 있는 상태'
+            }
+        }
+    }
+};
+
+export const NoLetter: Story = {
+    args: {
+        user: sampleUser,
+        newLetter: false
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: '새로 받은 편지가 없는 상태'
+            }
+        }
+    }
+};

src/components/HomePage/WelcomeMessageContainer/WelcomeMessageContainer.tsx

@@ -0,0 +1,31 @@
+import { UserType } from '@/types/user';
+
+type WelcomeMessageContainerProps = {
+    user: UserType;
+    newLetter: boolean;
+};
+
+export const WelcomeMessageContainer = ({
+    user,
+    newLetter
+}: WelcomeMessageContainerProps) => {
+    const message = newLetter
+        ? `${user.nickname}님에게`
+        : `안녕하세요! ${user.nickname}님`;
+
+    const messageBody = newLetter
+        ? '편지가 도착했어요.'
+        : '아직 도착한 편지가 없어요.';
+
+    const subMessage = newLetter
+        ? '답장을 기다리고 있어요.'
+        : '떠다니는 편지를 열심히 찾는 중 이에요.';
+
+    return (
+        <div className="absolute z-20">
+            <p className="font-bold text-[24px]">{message}</p>
+            <p className="font-bold text-[24px]">{messageBody}</p>
+            <p className="text-base">{subMessage}</p>
+        </div>
+    );
+};

src/index.css

@@ -1,3 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* 홈페이지 병편지 스와이퍼 그림자 스타일 커스텀 */
+.swiper-slide-shadow {
+    @apply opacity-0 !important;
+}

src/pages/Home/HomePage.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { HomePage } from './HomePage';
+
+const meta: Meta<typeof HomePage> = {
+    component: HomePage,
+    title: 'pages/HomePage',
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+
+type Story = StoryObj<typeof HomePage>;
+
+export const Default: Story = {
+    args: {}
+};

src/pages/Home/HomePage.tsx

@@ -0,0 +1,36 @@
+import { BannerContainer } from '@/components/Common/BannerContainer/BannerContainer';
+import { Toggle } from '@/components/Common/Toggle/Toggle';
+import { LetterContainer } from '@/components/HomePage/LetterContainer/LetterContainer';
+import { TopButtonContainer } from '@/components/HomePage/TopButtonContainer/TopButtonContainer';
+import { WelcomeMessageContainer } from '@/components/HomePage/WelcomeMessageContainer/WelcomeMessageContainer';
+import { useUserStore } from '@/stores/useUserStore';
+import { useState } from 'react';
+
+export const HomePage = () => {
+    const { user } = useUserStore();
+    const [toggle, setToggle] = useState(true);
+
+    return (
+        <div className="p-5 flex flex-col gap-[30px]">
+            <TopButtonContainer />
+            <Toggle
+                isChecked={toggle}
+                onToggle={() => {
+                    setToggle(!toggle);
+                }}
+            />
+            <div>
+                <WelcomeMessageContainer user={user} newLetter />
+                <LetterContainer />
+            </div>
+            <div className="flex justify-center">
+                <button className="btn-base w-[180px] h-[60px] flex-center">
+                    키워드 설정
+                </button>
+            </div>
+            <div className="">
+                <BannerContainer />
+            </div>
+        </div>
+    );
+};

src/pages/index.tsx

@@ -1,5 +1,5 @@
 import { ErrorPage } from '@/pages/ErrorPage';
-import { HomePage } from '@/pages/HomePage';
+import { HomePage } from '@/pages/Home/HomePage';
 import { CreateLetterPage } from '@/pages/Letter/Create/CreateLetterPage';
 import { MapExplorerPage } from '@/pages/MapExplorerPage';
 import { MyPage } from '@/pages/User/MyPage/Mypage';