[REFACTOR] 랜딩 페이지에 서비스 이용 가이드 추가

frontend/src/pages/LandingPage/LandingPage.constants.ts

@@ -1,4 +1,10 @@
-import { CarouselItemType } from './LandingPage.types';
+import { CarouselItemType, ServiceGuideStepType } from './LandingPage.types';
+
+import guide1 from '@/assets/images/serviceGuide-1.webp';
+import guide2 from '@/assets/images/serviceGuide-2.webp';
+import guide3 from '@/assets/images/serviceGuide-3.webp';
+import guide4 from '@/assets/images/serviceGuide-4.webp';
+import guide5 from '@/assets/images/serviceGuide-5.webp';
 
 export const CAROUSEL_ITEMS: CarouselItemType[] = [
   { icon: 'Reading', text: '오디오북 듣기' },
@@ -10,3 +16,31 @@ export const CAROUSEL_ITEMS: CarouselItemType[] = [
 ];
 
 export const CAROUSEL_TIMEOUT = 1500;
+
+export const SERVICE_GUIDE_STEPS: ServiceGuideStepType[] = [
+  {
+    step: 1,
+    description: '매일 반복되는 통학 시간,\n무의미하게 흘려보내고\n있진 않나요?',
+    image: guide1,
+  },
+  {
+    step: 2,
+    description: '두리번으로 자투리 시간을\n알차게 활용해\n목표를 달성해보세요',
+    image: guide2,
+  },
+  {
+    step: 3,
+    description: '이동 경로와 나만의 목표를 고려해\n이동 시간에 할 일을\n관리할 수 있어요',
+    image: guide3,
+  },
+  {
+    step: 4,
+    description: '주변의 다른 통학생은\n어떤 목표를 향해\n가고 있는지 알아보세요',
+    image: guide4,
+  },
+  {
+    step: 5,
+    description: '내가 보낸 이동 시간,\n얼마나 의미 있었는지\n한눈에 확인하세요',
+    image: guide5,
+  },
+];

frontend/src/pages/LandingPage/LandingPage.styled.ts

@@ -4,14 +4,14 @@ export const LandingPageLayout = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: space-around;
   height: 100%;
-  padding: 2rem 0;
-`;
+  overflow-y: scroll;
+  scroll-snap-type: y mandatory;
+  scroll-behavior: smooth;
 
-export const MainContent = styled.main`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 3.2rem;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;

frontend/src/pages/LandingPage/LandingPage.types.ts

@@ -6,3 +6,13 @@ export interface CarouselItemType {
 }
 
 export type CarouselItemStatusType = 'focus' | 'blur';
+
+export interface ServiceGuideStepType {
+  step: number;
+  description: string;
+  image: string;
+}
+
+export interface ServiceGuideCarouselProps {
+  steps: ServiceGuideStepType[];
+}

frontend/src/pages/LandingPage/components/CarouselList/CarouselList.styled.ts

@@ -4,7 +4,7 @@ export const ListLayout = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  height: 18rem;
+  height: 15rem;
   overflow: hidden;
   position: relative;
 `;

frontend/src/pages/LandingPage/components/KakaoLoginButton/KakaoLoginButton.styled.ts

@@ -1,5 +1,13 @@
 import styled from 'styled-components';
 
+export const ButtonContainer = styled.div`
+  position: relative;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  z-index: 10;
+`;
+
 export const ButtonLayout = styled.button`
   display: flex;
   align-items: center;

frontend/src/pages/LandingPage/components/KakaoLoginButton/index.tsx

@@ -9,12 +9,14 @@ const KakaoLoginButton = () => {
   };
 
   return (
-    <S.ButtonLayout onClick={handleKakaoLogin}>
-      <S.ButtonContent>
-        <Icon icon="Kakao" />
-        <span>카카오 로그인</span>
-      </S.ButtonContent>
-    </S.ButtonLayout>
+    <S.ButtonContainer>
+      <S.ButtonLayout onClick={handleKakaoLogin}>
+        <S.ButtonContent>
+          <Icon icon="Kakao" />
+          <span>카카오 로그인</span>
+        </S.ButtonContent>
+      </S.ButtonLayout>
+    </S.ButtonContainer>
   );
 };
 

frontend/src/pages/LandingPage/components/ServiceGuide/GuideIntro/GuideIntro.styled.ts

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+
+export const GuideIntroLayout = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+  width: 100%;
+  height: 100%;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+  flex-shrink: 0;
+  background: linear-gradient(
+    0deg,
+    ${({ theme }) => theme.colors.green100} 0%,
+    ${({ theme }) => theme.colors.white} 56.28%
+  );
+`;
+
+export const ScrollDownContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+`;
+
+export const ScrollDownText = styled.div`
+  ${({ theme }) => theme.fonts.label14Reg};
+  color: ${({ theme }) => theme.colors.green800};
+`;
+
+export const ScrollDownImage = styled.img`
+  width: 4.4rem;
+  height: 6.4rem;
+`;

frontend/src/pages/LandingPage/components/ServiceGuide/GuideIntro/index.tsx

@@ -0,0 +1,24 @@
+import * as S from './GuideIntro.styled';
+import CarouselList from '../../CarouselList';
+import KakaoLoginButton from '../../KakaoLoginButton';
+import LandingHeader from '../../LandingHeader';
+import LandingMessage from '../../LandingMessage';
+
+import scrollDownImage from '@/assets/images/scrollDown.webp';
+
+const GuideIntro = () => {
+  return (
+    <S.GuideIntroLayout>
+      <LandingHeader />
+      <LandingMessage />
+      <CarouselList />
+      <KakaoLoginButton />
+      <S.ScrollDownContainer>
+        <S.ScrollDownText>아래로 스크롤하면 서비스 소개를 볼 수 있어요</S.ScrollDownText>
+        <S.ScrollDownImage src={scrollDownImage} alt="scrollDown" />
+      </S.ScrollDownContainer>
+    </S.GuideIntroLayout>
+  );
+};
+
+export default GuideIntro;

frontend/src/pages/LandingPage/components/ServiceGuide/GuideOutro/GuideOutro.styled.ts

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+
+export const GuideOutroLayout = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  width: 100%;
+  height: 100%;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  background: linear-gradient(
+    0deg,
+    ${({ theme }) => theme.colors.green100} 0%,
+    ${({ theme }) => theme.colors.white} 56.28%
+  );
+`;
+
+export const ContentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+`;
+
+export const ScrollDownText = styled.div`
+  ${({ theme }) => theme.fonts.label14Reg};
+  color: ${({ theme }) => theme.colors.green800};
+`;
+
+export const ButtonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+`;

frontend/src/pages/LandingPage/components/ServiceGuide/GuideOutro/index.tsx

@@ -0,0 +1,21 @@
+import * as S from './GuideOutro.styled';
+import CarouselList from '../../CarouselList';
+import KakaoLoginButton from '../../KakaoLoginButton';
+import LandingHeader from '../../LandingHeader';
+import LandingMessage from '../../LandingMessage';
+
+const GuideOutro = () => {
+  return (
+    <S.GuideOutroLayout>
+      <LandingHeader />
+      <LandingMessage />
+      <CarouselList />
+      <S.ButtonContainer>
+        <S.ScrollDownText>로그인하여 두리번을 시작해보세요</S.ScrollDownText>
+        <KakaoLoginButton />
+      </S.ButtonContainer>
+    </S.GuideOutroLayout>
+  );
+};
+
+export default GuideOutro;

frontend/src/pages/LandingPage/components/ServiceGuide/GuideSlide/GuideSlide.styled.ts

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+
+export const GuideSlideLayout = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* justify-content: ; */
+  width: 100%;
+  height: 100%;
+  padding: 5rem 0;
+  position: relative;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+  flex-shrink: 0;
+  overflow: hidden;
+  gap: 5rem;
+`;
+
+export const Description = styled.div`
+  ${({ theme }) => theme.fonts.heading20};
+  line-height: 2.8rem;
+  white-space: pre-line;
+  text-align: center;
+`;
+
+export const Image = styled.img`
+  max-width: 260px;
+  z-index: 1;
+  position: relative;
+  bottom: 0;
+`;
+
+export const IndexContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+  position: absolute;
+  right: 2.4rem;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+`;
+
+export const IndexCircle = styled.div<{ $isActive: boolean }>`
+  width: 0.8rem;
+  height: 0.8rem;
+  border-radius: 50%;
+  background-color: ${({ theme, $isActive }) =>
+    $isActive ? theme.colors.green600 : theme.colors.gray300};
+`;
+
+export const ButtonContainer = styled.div`
+  position: absolute;
+  bottom: 3rem;
+`;

frontend/src/pages/LandingPage/components/ServiceGuide/GuideSlide/index.tsx

@@ -0,0 +1,31 @@
+import * as S from './GuideSlide.styled';
+import { ServiceGuideStepType } from '../../../LandingPage.types';
+import KakaoLoginButton from '../../KakaoLoginButton';
+import LandingHeader from '../../LandingHeader';
+
+interface ServiceGuideProps {
+  step: ServiceGuideStepType;
+  totalSteps: number;
+}
+
+const GuideSlide = ({ step, totalSteps }: ServiceGuideProps) => {
+  return (
+    <S.GuideSlideLayout>
+      <LandingHeader />
+      <S.Description>{step.description}</S.Description>
+
+      <S.IndexContainer>
+        {Array.from({ length: totalSteps }).map((_, index) => (
+          <S.IndexCircle key={index} $isActive={index + 1 === step.step} />
+        ))}
+      </S.IndexContainer>
+      <S.Image src={step.image} alt="service guide" />
+
+      <S.ButtonContainer>
+        <KakaoLoginButton />
+      </S.ButtonContainer>
+    </S.GuideSlideLayout>
+  );
+};
+
+export default GuideSlide;

frontend/src/pages/LandingPage/index.tsx

@@ -1,18 +1,17 @@
-import CarouselList from './components/CarouselList';
-import KakaoLoginButton from './components/KakaoLoginButton';
-import LandingHeader from './components/LandingHeader';
-import LandingMessage from './components/LandingMessage';
+import GuideIntro from './components/ServiceGuide/GuideIntro';
+import GuideOutro from './components/ServiceGuide/GuideOutro';
+import GuideSlide from './components/ServiceGuide/GuideSlide';
+import { SERVICE_GUIDE_STEPS } from './LandingPage.constants';
 import * as S from './LandingPage.styled';
 
 const LandingPage = () => {
   return (
     <S.LandingPageLayout>
-      <LandingHeader />
-      <S.MainContent>
-        <LandingMessage />
-        <CarouselList />
-      </S.MainContent>
-      <KakaoLoginButton />
+      <GuideIntro />
+      {SERVICE_GUIDE_STEPS.map((step) => (
+        <GuideSlide key={step.step} step={step} totalSteps={SERVICE_GUIDE_STEPS.length} />
+      ))}
+      <GuideOutro />
     </S.LandingPageLayout>
   );
 };