feat : 랜딩페이지 부분 완성 (#59)

src/pages/LandingPage/index.ts

@@ -0,0 +1 @@
+export { LandingPage } from './ui/Page/Page';

src/pages/LandingPage/ui/LandingTitle/LandingTitle.stories.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import LandingTitle from './LandingTitle';
+
+const meta: Meta<typeof LandingTitle> = {
+    title: 'Page/LandingPage/LandingTitle',
+    component: LandingTitle,
+    tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryObj<typeof LandingTitle>;
+
+export const Default: Story = {
+    args: {
+        title: `Life's playlist, \nYour Story`
+    }
+};

src/pages/LandingPage/ui/LandingTitle/LandingTitle.styled.ts

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const Title = styled.h1`
+    font-size: 128px;
+    font-weight: bold;
+    color: #000000;
+    text-align: start;
+    line-height: 130px;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    white-space: pre-wrap;
+    font-family: 'Pretendard', sans-serif;
+`;

src/pages/LandingPage/ui/LandingTitle/LandingTitle.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Title } from './LandingTitle.styled';
+
+interface LandingTitleProps {
+    title: string;
+}
+
+const LandingTitle = ({ title }: LandingTitleProps) => {
+    return <Title>{title}</Title>;
+};
+
+export default LandingTitle;

src/pages/LandingPage/ui/Page/Page.stories.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LandingPage } from './Page';
+
+const meta: Meta<typeof LandingPage> = {
+    title: 'Page/LandingPage/Page',
+    component: LandingPage,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: '미완성된 랜딩페이지 입니다.'
+            }
+        }
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof LandingPage>;
+
+export const Default: Story = {
+    args: {}
+};

src/pages/LandingPage/ui/Page/Page.styled.ts

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const PageContainer = styled.div`
+    max-width: 960px; // 원하는 최대 너비
+    width: 100%;
+    background-color: #ffffff;
+`;
+export const LandingContainer = styled.div`
+    margin-bottom: 30px;
+`;
+export const SubTitleContainer = styled.div`
+    margin-bottom: 100px;
+`;

src/pages/LandingPage/ui/Page/Page.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import {
+    PageContainer,
+    LandingContainer,
+    SubTitleContainer
+} from './Page.styled';
+import LandingTitle from '../LandingTitle/LandingTitle';
+import SubTitle from '../SubTitle/SubTitle';
+import Button from '../../../../shared/ui/Button/Button';
+import Header from '../../../../widgets/header/ui/Header';
+
+export const LandingPage = () => {
+    const handleLoginClick = () => {
+        // eslint-disable-next-line no-console
+        console.log('click login button!');
+    };
+
+    return (
+        <PageContainer>
+            <Header />
+            <LandingContainer>
+                <LandingTitle title={`Life's Playlist, \nYour Story`} />
+            </LandingContainer>
+            <SubTitleContainer>
+                <SubTitle subTitle="무디에서 감정을 담은 일기를 작성해보세요." />
+            </SubTitleContainer>
+            <Button
+                height="79px"
+                width="247px"
+                fontSize="20px"
+                borderradius="15px"
+                onClick={handleLoginClick}
+            >
+                로그인 하기
+            </Button>
+        </PageContainer>
+    );
+};

src/pages/LandingPage/ui/SubTitle/SubTitle.stories.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import SubTitle from './SubTitle';
+
+const meta: Meta<typeof SubTitle> = {
+    title: 'Page/LandingPage/SubTitle',
+    component: SubTitle,
+    tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryObj<typeof SubTitle>;
+
+export const Default: Story = {
+    args: {
+        subTitle: `무디에서 감정을 담은 일기를 작성해보세요.`
+    }
+};

src/pages/LandingPage/ui/SubTitle/SubTitle.styled.ts

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const Title = styled.h1`
+    font-size: 24px;
+    font-weight: bold;
+    color: #000000;
+    text-align: start;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    white-space: pre-wrap;
+    font-family: 'Pretendard', sans-serif;
+`;

src/pages/LandingPage/ui/SubTitle/SubTitle.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Title } from './SubTitle.styled';
+
+interface SubTitleProps {
+    subTitle: string;
+}
+
+const SubTitle = ({ subTitle }: SubTitleProps) => {
+    return <Title>{subTitle}</Title>;
+};
+
+export default SubTitle;