feat: SP1 이용 가이드 뷰 구현

src/pages/guide/constants/guide-images.ts

@@ -0,0 +1,10 @@
+export const GUIDE_IMAGES = [
+  { id: 1, src: 'images/guide_image_1.webp', alt: '가이드 1' },
+  { id: 2, src: 'images/guide_image_2.webp', alt: '가이드 2' },
+  { id: 3, src: 'images/guide_image_3.webp', alt: '가이드 3' },
+  { id: 4, src: 'images/guide_image_4.webp', alt: '가이드 4' },
+  { id: 5, src: 'images/guide_image_5.webp', alt: '가이드 5' },
+  { id: 6, src: 'images/guide_image_6.webp', alt: '가이드 6' },
+] as const;
+
+export type GuideImage = (typeof GUIDE_IMAGES)[number];

src/pages/guide/guide.tsx

@@ -0,0 +1,56 @@
+import CarouselIndicator from '@pages/match/groups/components/carousel_indicator';
+import { useSlide } from '@pages/match/hooks/useSlide';
+import { getSlideTransformStyle } from '@pages/match/styles/get-slide-transformstyle';
+import { useState } from 'react';
+import { GUIDE_IMAGES } from './constants/guide-images';
+
+const Guide = () => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const { handleTouchStart, handleTouchEnd, handleMouseDown } = useSlide({
+    length: GUIDE_IMAGES.length,
+    currentIndex,
+    onChange: setCurrentIndex,
+  });
+
+  return (
+    <section
+      className="w-full flex-col gap-[2.4rem] overflow-hidden "
+      aria-label="가이드 이미지 캐러셀"
+    >
+      <ul
+        className="flex pt-[3.2rem] transition-transform duration-300 ease-in-out"
+        style={getSlideTransformStyle(currentIndex)}
+        onTouchStart={handleTouchStart}
+        onTouchEnd={handleTouchEnd}
+        onMouseDown={handleMouseDown}
+        aria-roledescription="carousel"
+        aria-live="polite"
+      >
+        {GUIDE_IMAGES.map((image, index) => (
+          <li
+            key={image.id}
+            aria-roledescription="slide"
+            aria-label={`가이드 이미지 ${index + 1} / ${GUIDE_IMAGES.length}`}
+            aria-hidden={index !== currentIndex}
+            className="min-w-full px-[0.8rem]"
+          >
+            <div className="box-border min-w-full flex-row-center ">
+              <img src={image.src} alt={image.alt} className="h-auto w-full " />
+            </div>
+          </li>
+        ))}
+      </ul>
+
+      <div className="flex-row-center">
+        <CarouselIndicator
+          ids={GUIDE_IMAGES.map((image) => `guide-${image.id}`)}
+          currentIndex={currentIndex}
+          onDotClick={setCurrentIndex}
+        />
+      </div>
+    </section>
+  );
+};
+
+export default Guide;

src/pages/home/components/top-section.tsx

@@ -1,9 +1,21 @@
 import CardBanner from '@components/card/banner-card/banner-card';
+import { ROUTES } from '@routes/routes-config';
+import { useNavigate } from 'react-router-dom';
 
 const TopSection = () => {
+  const navigate = useNavigate();
+
+  const handleBannerClick = () => {
+    navigate(ROUTES.GUIDE);
+  };
+
   return (
     <section className="bg-gray-black px-[1.6rem] pt-[0.1rem]">
-      <CardBanner subText="나와 딱 맞는 직관 메이트를 찾고 싶다면?" text="이용가이드 보러 가기" />
+      <CardBanner
+        subText="나와 딱 맞는 직관 메이트를 찾고 싶다면?"
+        text="이용가이드 보러 가기"
+        onClick={handleBannerClick}
+      />
     </section>
   );
 };

src/shared/components/bottom-navigation/bottom-navigation.tsx

@@ -16,7 +16,9 @@ const BottomNavigation = () => {
 
   const isActive = (path: string) => pathname === path;
 
-  const isDisabled = (path: string) => needsMatchingSetup && path !== ROUTES.HOME;
+  const isDisabled = (path: string) => {
+    return needsMatchingSetup && path !== ROUTES.HOME;
+  };
 
   const handleTabClick = (path: string) => {
     if (isDisabled(path)) return;

src/shared/components/bottom-navigation/constants/bottom-navigation.ts

@@ -34,3 +34,12 @@ export const NAV_ITEMS = [
     },
   },
 ];
+
+export type NavItem = {
+  label: string;
+  path: string;
+  icon: {
+    filled: string;
+    lined: string;
+  };
+};

src/shared/components/card/banner-card/banner-card.tsx

@@ -5,17 +5,18 @@ interface CardBannerProps {
   text: string;
   subText?: string;
   className?: string;
+  onClick?: () => void;
 }
 
-const BannerCard = ({ text, subText, className }: CardBannerProps) => {
+const BannerCard = ({ text, subText, onClick }: CardBannerProps) => {
   return (
-    <div className={cn('relative w-full', className)}>
+    <button type="button" className={cn('relative cursor-pointer text-left')} onClick={onClick}>
       <img src={BannerImg} alt="홈배너" className="w-full" />
       <div className="absolute inset-0 flex-col justify-center gap-[0.4rem] py-[2.2rem] pl-[2.4rem]">
         <p className="cap_14_m text-gray-800">{subText}</p>
         <p className="subhead_18_sb text-gray-black">{text}</p>
       </div>
-    </div>
+    </button>
   );
 };
 

src/shared/constants/header.ts

@@ -16,4 +16,10 @@ export const NO_HEADER_PATHS = [
   ROUTES.CHAT,
 ];
 
-export const SHOW_BOTTOM_NAVIGATE_PATHS = [ROUTES.HOME, ROUTES.MATCH, ROUTES.CHAT, ROUTES.PROFILE];
+export const SHOW_BOTTOM_NAVIGATE_PATHS = [
+  ROUTES.HOME,
+  ROUTES.MATCH,
+  ROUTES.CHAT,
+  ROUTES.PROFILE,
+  ROUTES.GUIDE,
+];

src/shared/routes/lazy.ts

@@ -7,6 +7,9 @@ export const SignUp = lazy(() => import('@pages/sign-up/sign-up'));
 // Home
 export const Home = lazy(() => import('@pages/home/home'));
 
+// Guide
+export const Guide = lazy(() => import('@pages/guide/guide'));
+
 // Matching
 export const Onboarding = lazy(() => import('@pages/onboarding/onboarding'));
 export const OnboardingGroup = lazy(() => import('@pages/onboarding/onboarding-group'));

src/shared/routes/protected-routes.tsx

@@ -5,6 +5,7 @@ import {
   EditProfile,
   GroupMates,
   GroupNew,
+  Guide,
   Home,
   Match,
   Onboarding,
@@ -29,4 +30,5 @@ export const protectedRoutes = [
   { path: ROUTES.RESULT(), element: <Result /> },
   { path: ROUTES.ONBOARDING, element: <Onboarding /> },
   { path: ROUTES.ONBOARDING_GROUP, element: <OnboardingGroup /> },
+  { path: ROUTES.GUIDE, element: <Guide /> },
 ];

src/shared/routes/routes-config.ts

@@ -19,4 +19,5 @@ export const ROUTES = {
   ERROR: '/error',
   LOADING: '/loading',
   SPLASH: '/splash',
+  GUIDE: '/guide',
 };