feat: 가이드 페이지 구현 (#196)

* feat: 가이드 페이지 완성

* fix: 테마 테스트용 코드 원상복구

src/Guide/components/GuideContent.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+interface GuideContentProps {
+  text: string[];
+  subText: string;
+  image: string;
+}
+
+const GuideContent = ({ text, subText, image }: GuideContentProps) => {
+  return (
+    <div className="flex w-full flex-col items-center gap-16">
+      <div>
+        <div className="mb-5">
+          {text.map((line) => (
+            <div className="mb-2 font-IMHyemin-bold text-3xl">{line}</div>
+          ))}
+        </div>
+        <div className="min-h-[2rem] font-IMHyemin-bold text-dark-gray">
+          {subText}
+        </div>
+      </div>
+
+      <div className="">
+        <img
+          className="h-40"
+          src={image}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default GuideContent;

src/Guide/constants/guideContents.ts

@@ -0,0 +1,25 @@
+interface GuideContent {
+  text: string[];
+  subText: string;
+  image: string;
+}
+
+export const GUIDE_CONTENTS: GuideContent[] = [
+  {
+    text: ['사람들과 함께', '루틴을 지켜보세요'],
+    subText: '방에 참가하거나, 여러분이 만들 수도 있어요',
+    image: '/assets/guide/guideRoutine.png'
+  },
+  {
+    text: ['함께 할 수록', '새가 보상을 받아요'],
+    subText: '낮과 밤 별로 다른 보상이 있어요',
+    image: '/assets/skins/awakeOwlSkin2.png'
+  },
+  {
+    text: ['보상으로 스킨을 사고', '뽐내보세요!'],
+    subText: '',
+    image: '/assets/guide/guideOmok.png'
+  }
+];
+
+export default GUIDE_CONTENTS;

src/Guide/index.ts

@@ -0,0 +1,2 @@
+export { default as GUIDE_CONTENTS } from './constants/guideContents';
+export { default as GuideContent } from './components/GuideContent';

src/Guide/styles/swiperBullets.css

@@ -0,0 +1,22 @@
+.swiper-pagination {
+  display: flex;
+  justify-content: center;
+  gap: 1.5rem;
+}
+
+.bullet-custom {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  background-color: #9ca3af;
+  border-radius: 100%;
+  cursor: pointer;
+}
+
+.bullet-active-custom--light {
+  background-color: #60d4de;
+}
+
+.bullet-active-custom--dark {
+  background-color: #f9bd7d;
+}

src/core/routes/routes.tsx

@@ -17,6 +17,7 @@ import CouponPage from '@/pages/CouponPage';
 import ParticipateLog from '@/pages/ParticipateLog';
 import OrderLogPage from '@/pages/OrderLogPage';
 import StorePage from '@/pages/StorePage';
+import GuidePage from '@/pages/GuidePage';
 
 interface Route {
   path: string;
@@ -61,7 +62,7 @@ const routes: Routes = {
     path: 'guide',
     authRequired: false,
     navBarRequired: false,
-    element: <div>guide</div>
+    element: <GuidePage />
   },
   join: {
     path: 'join',

src/pages/GuidePage.tsx

@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Pagination, Autoplay } from 'swiper/modules';
+import { useTheme } from '@/core/hooks';
+import { GuideContent, GUIDE_CONTENTS } from '@/Guide';
+import 'swiper/css/pagination';
+import '@/Guide/styles/swiperBullets.css';
+
+const GuidePage = () => {
+  const { theme } = useTheme();
+  const [guideEnd, setGuideEnd] = useState(false);
+
+  return (
+    <div className="relative flex h-full flex-col pt-40">
+      <div className="h-full">
+        <Swiper
+          className="h-full"
+          modules={[Pagination, Autoplay]}
+          autoplay={{
+            delay: 3000,
+            pauseOnMouseEnter: true,
+            stopOnLastSlide: true
+          }}
+          pagination={{
+            clickable: true,
+            bulletClass: 'bullet-custom',
+            bulletActiveClass: `bullet-active-custom--${theme}`
+          }}
+          onReachEnd={() => setGuideEnd(true)}
+        >
+          {GUIDE_CONTENTS.map((guide) => (
+            <SwiperSlide>
+              <GuideContent {...guide} />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+      <div className="flex h-32 flex-col justify-center px-8">
+        {guideEnd && (
+          <Link
+            to="/"
+            className="btn btn-light-point dark:btn-dark-point py-3 text-center font-IMHyemin-bold text-white"
+          >
+            시작!
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default GuidePage;