feat: implement landing page (#29)

* chore: 🤖 add images

* refactor: 💡 remove unused images

* feat: 🎸 implement landing

* feat: 🎸 implement useLogin

* feat: 🎸 connect signin, signup route

* refactor: 💡 remove export

src/components/landing/Indicator.tsx

@@ -0,0 +1,33 @@
+interface IndicatorProps {
+  activeIndex: number;
+  length: number;
+}
+
+interface DotProps {
+  isActive: boolean;
+}
+
+const Dot = ({ isActive }: DotProps) => {
+  const color = isActive ? '#1B1717' : '#E8E8E8';
+  return (
+    <svg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <circle cx='5.24023' cy='5.90771' r='5' fill={color} />
+    </svg>
+  );
+};
+
+export const Indicator = ({ activeIndex, length }: IndicatorProps) => {
+  const renderDots = (length: number, activeIndex: number) => {
+    const dots = [];
+    for (let i = 0; i < length; i++) {
+      dots.push(<Dot key={i} isActive={activeIndex === i} />);
+    }
+
+    return dots;
+  };
+  return (
+    <div className='tw-flex tw-flex-row tw-justify-center tw-py-10'>
+      <div className='tw-flex tw-flex-row tw-gap-3'>{renderDots(length, activeIndex)}</div>
+    </div>
+  );
+};

src/hooks/useLogin.ts

@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react';
+
+export function useLogin() {
+  const [login, setLogin] = useState(false);
+  useEffect(() => {
+    const user_id = localStorage.getItem('user_id');
+    if (user_id) {
+      setLogin(true);
+    }
+  }, []);
+
+  return { login };
+}

src/pages/index.tsx

@@ -1,48 +1,54 @@
-import { Icon } from '@/components/shared';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+import { Indicator } from '@/components/landing/Indicator';
 import { Button } from '@/components/shared/Button';
-import { TextButton } from '@/components/shared/TextButton';
+import { ItemsSlide } from '@/components/user/item/ItemsSlide';
 
 // NOTE : 온보딩 페이지
+const items = [
+  {
+    id: 1,
+    title: '',
+    image: '/images/onboarding1.png',
+    description: '',
+  },
+  {
+    id: 2,
+    title: '',
+    image: '/images/onboarding2.png',
+    description: '',
+  },
+  {
+    id: 3,
+    title: '',
+    image: '/images/onboarding3.png',
+    description: '',
+  },
+];
 export default function Home() {
+  const [activeIndex, setActiveIndex] = useState<number>(1);
+  const router = useRouter();
+
   return (
-    <main>
-      <p className='tw-text-main-headline'>이건 메인 헤드라인이에요 Pretendard</p>
-      <p className='tw-text-sub-headline'>이건 서브 헤드라인이에요 Pretendard</p>
-      <p className='tw-text-body1'>이건 본문1이에요 Pretendard</p>
-      <p className='tw-text-body2'>이건 본문2이에요 Pretendard</p>
-      <p className='tw-text-caption'>이건 캡션이에요 Pretendard</p>
-      <p className='tw-text-button1'>이건 버튼1이에요 Pretendard</p>
-      <p className='tw-text-button2'>이건 버튼2이에요 Pretendard</p>
-      <p className='tw-text-accent-eng'>Montserrat accent</p>
-      <p className='tw-text-body-eng'>Montserrat body</p>
-      <p className='tw-text-caption-eng'>Montserrat caption</p>
-      <Icon iconType='Edit' />
-      <Icon iconType='Menu' />
-      <Icon iconType='Plus' />
-      <Icon iconType='RightArrow' />
-      <Button variant='primary' onClick={() => console.log('primary')}>
-        Primary
-      </Button>
-      <Button variant='secondary' onClick={() => console.log('secondary')} disabled>
-        Secondary
-      </Button>
-      <Button variant='nudge' onClick={() => console.log('nudge')}>
-        그라피 알아보기
-        <Icon iconType='RightChevron' />
-      </Button>
-      <Button variant='link' onClick={() => console.log('link')} className='tw-w-[20rem]'>
-        Link
-        <Icon iconType='RightArrow' />
-      </Button>
-      <Button variant='rounded' onClick={() => console.log('rounded')}>
-        ADD
-      </Button>
-      <TextButton color='primary' onClick={() => console.log('textbutton1')}>
-        저장
-      </TextButton>
-      <TextButton color='secondary' onClick={() => console.log('textbutton2')}>
-        저장
-      </TextButton>
-    </main>
+    <section>
+      <Indicator length={items.length} activeIndex={activeIndex} />
+      <ItemsSlide items={items} activeIndex={activeIndex} setActiveIndex={setActiveIndex} />
+      <div className='tw-fixed tw-bottom-3 tw-flex tw-w-full tw-max-w-[475px] tw-flex-col tw-items-center tw-gap-3 tw-px-5'>
+        <Button
+          className='tw-flex tw-h-[50px] tw-w-full tw-flex-row tw-justify-center tw-rounded-[6px]'
+          variant='primary'
+          onClick={() => router.push('/signin')}
+        >
+          로그인하기
+        </Button>
+        <Button
+          className='tw-flex tw-h-[50px] tw-w-full tw-flex-row tw-justify-center tw-rounded-[6px] tw-bg-yellow'
+          variant='primary'
+          onClick={() => router.push('/signup')}
+        >
+          회원가입하기
+        </Button>
+      </div>
+    </section>
   );
 }

src/pages/sample/index.tsx

@@ -0,0 +1,48 @@
+import { Icon } from '@/components/shared';
+import { Button } from '@/components/shared/Button';
+import { TextButton } from '@/components/shared/TextButton';
+
+// NOTE : 온보딩 페이지
+export default function Sample() {
+  return (
+    <main>
+      <p className='tw-text-main-headline'>이건 메인 헤드라인이에요 Pretendard</p>
+      <p className='tw-text-sub-headline'>이건 서브 헤드라인이에요 Pretendard</p>
+      <p className='tw-text-body1'>이건 본문1이에요 Pretendard</p>
+      <p className='tw-text-body2'>이건 본문2이에요 Pretendard</p>
+      <p className='tw-text-caption'>이건 캡션이에요 Pretendard</p>
+      <p className='tw-text-button1'>이건 버튼1이에요 Pretendard</p>
+      <p className='tw-text-button2'>이건 버튼2이에요 Pretendard</p>
+      <p className='tw-text-accent-eng'>Montserrat accent</p>
+      <p className='tw-text-body-eng'>Montserrat body</p>
+      <p className='tw-text-caption-eng'>Montserrat caption</p>
+      <Icon iconType='Edit' />
+      <Icon iconType='Menu' />
+      <Icon iconType='Plus' />
+      <Icon iconType='RightArrow' />
+      <Button variant='primary' onClick={() => console.log('primary')}>
+        Primary
+      </Button>
+      <Button variant='secondary' onClick={() => console.log('secondary')} disabled>
+        Secondary
+      </Button>
+      <Button variant='nudge' onClick={() => console.log('nudge')}>
+        그라피 알아보기
+        <Icon iconType='RightChevron' />
+      </Button>
+      <Button variant='link' onClick={() => console.log('link')} className='tw-w-[20rem]'>
+        Link
+        <Icon iconType='RightArrow' />
+      </Button>
+      <Button variant='rounded' onClick={() => console.log('rounded')}>
+        ADD
+      </Button>
+      <TextButton color='primary' onClick={() => console.log('textbutton1')}>
+        저장
+      </TextButton>
+      <TextButton color='secondary' onClick={() => console.log('textbutton2')}>
+        저장
+      </TextButton>
+    </main>
+  );
+}

tailwind.config.js

@@ -19,6 +19,7 @@ module.exports = {
         primary: '#202020',
         nudge: '#19F1CA',
         danger: '#F40000',
+        yellow: '#FACB2E',
         grayscale: {
           100: '#F3F3F3',
           200: '#E8E8E8',