온보딩 페이지 구현 (SWYP-team-2th#154)

package.json

@@ -22,6 +22,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.1.3",
+    "swiper": "^11.2.4",
     "tailwind-merge": "^2.6.0",
     "tailwindcss": "^4.0.0"
   },

src/constants/onboarding.ts

@@ -0,0 +1,24 @@
+import onboarding1 from '@/assets/images/onboarding/onboarding1.png';
+import onboarding2 from '@/assets/images/onboarding/onboarding2.png';
+import onboarding3 from '@/assets/images/onboarding/onboarding3.png';
+
+export const onBoardingSlides = [
+  {
+    id: 1,
+    image: onboarding1,
+    title: `이 사진이 좋을까?\n저 사진이 좋을까?`,
+    subtitle: `혼자 고민하지 말고,\n뽀토픽에게 맡겨보세요!`,
+  },
+  {
+    id: 2,
+    image: onboarding2,
+    title: `고민되는 사진을 올리고,\n투표를 받아보세요!`,
+    subtitle: `사진을 올리면, 친구의 투표 시작!\n더 많은 표를 받을 사진은?`,
+  },
+  {
+    id: 3,
+    image: onboarding3,
+    title: `링크만 던지면,\n 베스트컷 결정!`,
+    subtitle: `링크 하나만 보내면\n누구나 쉽게 참여할 수 있어요!`,
+  },
+];

src/pages/OnBoarding/OnBoardingPage.tsx

@@ -1,19 +1,34 @@
+import { Pagination } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/css';
+import 'swiper/css/pagination';
 import LoginButton from '@/components/login/button/LoginButton';
+import { onBoardingSlides } from '@/constants/onboarding';
 
 export default function OnBoardingPage() {
   return (
-    <div className="flex justify-center w-full h-screen px-7 flex-col">
-      <div className="flex-1 flex items-center flex-col text-center">
-        <span className="flex items-center text-h1">
-          이 사진이 좋을까
-          <br />저 사진이 좋을까?
-        </span>
+    <div className="flex flex-col justify-between w-full h-screen px-7 relative">
+      <div className="flex-1 flex items-center">
+        <Swiper
+          modules={[Pagination]}
+          slidesPerView={1}
+          pagination={{ clickable: true }}
+        >
+          {onBoardingSlides.map((slide) => (
+            <SwiperSlide key={slide.id}>
+              <div className="h-full flex flex-col items-center text-center">
+                <span className="text-h1 whitespace-pre-line mt-[160px] mb-[20px]">
+                  {slide.title}
+                </span>
 
-        <span className="flex items-center text-title-medium mt-5">
-          혼자 고민하지 말고,
-          <br />
-          뽀토픽에게 맡겨보세요!
-        </span>
+                <span className="text-title-medium whitespace-pre-line mb-[50px]">
+                  {slide.subtitle}
+                </span>
+                <img src={slide.image} className="w-[310px] mb-14" />
+              </div>
+            </SwiperSlide>
+          ))}
+        </Swiper>
       </div>
       <div className="mb-16">
         <LoginButton />

yarn.lock

@@ -4184,6 +4184,11 @@ svg-parser@^2.0.4:
   resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
   integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
 
+swiper@^11.2.4:
+  version "11.2.4"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-11.2.4.tgz#4d1b55e07f909957e0406bdbff81b850b9dc8aeb"
+  integrity sha512-DTtglrsFfMYytid+oNy4QI3t2N2+XhhwSYbnyOhlwBmvY8Bkoj3ombK1/b80w8vDpQ+Lqlnbm+0737+i32MrcA==
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"