[FEAT] 랜딩페이지 UI 구현

package.json

@@ -37,6 +37,7 @@
     "react-error-boundary": "^4.0.13",
     "react-router-dom": "^6.26.2",
     "storybook": "^8.3.5",
+    "swiper": "^11.1.15",
     "tailwind-merge": "^2.5.4",
     "tailwindcss": "^3.4.13",
     "vite-plugin-svgr": "^4.2.0"

src/constants/swiperOptions.ts

@@ -0,0 +1,18 @@
+import { Pagination, Navigation, Autoplay } from 'swiper/modules';
+
+export const swiperOptions = {
+  modules: [Pagination, Navigation, Autoplay],
+  spaceBetween: 10,
+  slidesPerView: 1,
+  pagination: {
+    clickable: true,
+    type: 'bullets' as const,
+  },
+  autoplay: {
+    delay: 3000,
+  },
+  style: {
+    '--swiper-pagination-color': '#FF6265',
+  } as React.CSSProperties,
+  loop: true,
+};

src/pages/Landing.tsx

@@ -0,0 +1,43 @@
+import { useNavigate } from 'react-router-dom';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import 'swiper/css';
+import 'swiper/css/pagination';
+import { Button } from '@/components/common/Button';
+import { Icon } from '@/components/common/Icon';
+import { Body1 } from '@/components/common/Typography';
+import { swiperOptions } from '@/constants/swiperOptions';
+
+const LANDING_IMAGES = ['current', 'extract', 'maker', 'makers', 'youtube'];
+
+export const Landing = () => {
+  const navigate = useNavigate();
+  return (
+    <>
+      <div className="w-full flex flex-col items-center justify-between">
+        <div className="flex flex-col items-center justify-center gap-5 mt-32">
+          <Icon name="findyLogo1" className="w-2/3 h-20" />
+          <Body1>핀디와 함께, 특별한 순간을 찾아보세요</Body1>
+        </div>
+        <Swiper {...swiperOptions} className="w-full h-96 max-w-md px-4 my-10 rounded-lg shadow-lg">
+          {LANDING_IMAGES.map((item, index) => (
+            <SwiperSlide key={index} className="flex justify-center items-center ">
+              <img
+                src={`/landing/${item}.png`}
+                alt={`${item} 이미지`}
+                loading="lazy"
+                className="w-full h-full object-cover"
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+
+        <div className="absolute bottom-3 w-full max-w-[30rem] px-4 mb-5">
+          <Button variant="primary" size="large" onClick={() => navigate('/map')}>
+            시작하기
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+};

src/routes/route.tsx

@@ -1,6 +1,7 @@
 import { createBrowserRouter } from 'react-router-dom';
 
 import { App } from '@/App';
+import { Landing } from '@/pages/Landing';
 import { Link } from '@/pages/Link';
 import { MapView } from '@/pages/MapView';
 
@@ -9,6 +10,7 @@ export const router = createBrowserRouter([
     path: '/',
     element: <App />,
     children: [
+      { index: true, element: <Landing /> },
       { path: 'map', element: <MapView /> },
       { path: 'link', element: <Link /> },
     ],

yarn.lock

@@ -5954,6 +5954,7 @@ __metadata:
     react-router-dom: "npm:^6.26.2"
     storybook: "npm:^8.3.5"
     storybook-addon-sass-postcss: "npm:^0.3.2"
+    swiper: "npm:^11.1.15"
     tailwind-merge: "npm:^2.5.4"
     tailwindcss: "npm:^3.4.13"
     ts-jest: "npm:^29.2.5"
@@ -10301,6 +10302,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"swiper@npm:^11.1.15":
+  version: 11.1.15
+  resolution: "swiper@npm:11.1.15"
+  checksum: 10c0/3faabc5b33c0663513e8e41c4ef7920d4c9a1ca6b988848f2e51e1db0d01471a1bae22fce3177b9d3ab2c128fc6df23074415ae7957bd0f8542fd7387fa5263d
+  languageName: node
+  linkType: hard
+
 "symbol-tree@npm:^3.2.4":
   version: 3.2.4
   resolution: "symbol-tree@npm:3.2.4"