merge: origin/develop into develop 병합

Author: khw7385

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

@@ -15,3 +15,15 @@ export const LandingPageLayout = styled.div`
     display: none;
   }
 `;
+
+export const LoginButtonWrapper = styled.div<{ $isIntro: boolean }>`
+  position: fixed;
+  bottom: ${({ $isIntro }) => ($isIntro ? '28%' : '6%')};
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  z-index: 100;
+  pointer-events: auto;
+  transition: bottom 0.3s ease;
+`;

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

@@ -22,6 +22,7 @@ export const ScrollDownContainer = styled.div`
   flex-direction: column;
   align-items: center;
   gap: 2rem;
+  margin-top: 10rem;
 `;
 
 export const ScrollDownText = styled.div`

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

@@ -4,15 +4,13 @@ import LandingHeader from '../../LandingHeader';
 import LandingMessage from '../../LandingMessage';
 
 import scrollDownImage from '@/assets/images/scrollDown.webp';
-import LoginButton from '@/components/Button/LoginButton';
 
 const GuideIntro = () => {
   return (
     <S.GuideIntroLayout>
       <LandingHeader />
       <LandingMessage />
       <CarouselList />
-      <LoginButton />
       <S.ScrollDownContainer>
         <S.ScrollDownText>아래로 스크롤하면 서비스 소개를 볼 수 있어요</S.ScrollDownText>
         <S.ScrollDownImage src={scrollDownImage} alt="scrollDown" />

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

@@ -16,6 +16,7 @@ export const GuideOutroLayout = styled.div`
     ${({ theme }) => theme.colors.green100} 0%,
     ${({ theme }) => theme.colors.white} 56.28%
   );
+  padding-bottom: 9rem;
 `;
 
 export const ContentContainer = styled.div`

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

@@ -3,8 +3,6 @@ import CarouselList from '../../CarouselList';
 import LandingHeader from '../../LandingHeader';
 import LandingMessage from '../../LandingMessage';
 
-import LoginButton from '@/components/Button/LoginButton';
-
 const GuideOutro = () => {
   return (
     <S.GuideOutroLayout>
@@ -13,7 +11,6 @@ const GuideOutro = () => {
       <CarouselList />
       <S.ButtonContainer>
         <S.ScrollDownText>로그인하여 두리번을 시작해보세요</S.ScrollDownText>
-        <LoginButton />
       </S.ButtonContainer>
     </S.GuideOutroLayout>
   );

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

@@ -12,7 +12,7 @@ export const GuideSlideLayout = styled.div`
   scroll-snap-stop: always;
   flex-shrink: 0;
   overflow: hidden;
-  gap: 5rem;
+  gap: 10%;
 `;
 
 export const Description = styled.div`
@@ -45,8 +45,3 @@ export const IndexCircle = styled.div<{ $isActive: boolean }>`
   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

@@ -2,8 +2,6 @@ import * as S from './GuideSlide.styled';
 import { ServiceGuideStepType } from '../../../LandingPage.types';
 import LandingHeader from '../../LandingHeader';
 
-import LoginButton from '@/components/Button/LoginButton';
-
 interface ServiceGuideProps {
   step: ServiceGuideStepType;
   totalSteps: number;
@@ -21,10 +19,6 @@ const GuideSlide = ({ step, totalSteps }: ServiceGuideProps) => {
         ))}
       </S.IndexContainer>
       <S.Image src={step.image} alt="service guide" />
-
-      <S.ButtonContainer>
-        <LoginButton />
-      </S.ButtonContainer>
     </S.GuideSlideLayout>
   );
 };

frontend/src/pages/LandingPage/index.tsx

@@ -1,18 +1,49 @@
+import { useEffect, useState, useRef } from 'react';
+
 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';
 
+import LoginButton from '@/components/Button/LoginButton';
+
 const LandingPage = () => {
+  const [isIntro, setIsIntro] = useState<boolean>(true);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const scrollContainer = scrollContainerRef.current;
+
+    if (!scrollContainer) return;
+
+    const handleScroll = () => {
+      const scrollTop = scrollContainer.scrollTop;
+      const viewportHeight = window.innerHeight;
+      setIsIntro(scrollTop < viewportHeight * 0.5);
+    };
+
+    scrollContainer.addEventListener('scroll', handleScroll);
+    handleScroll();
+
+    return () => {
+      scrollContainer.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
   return (
-    <S.LandingPageLayout>
-      <GuideIntro />
-      {SERVICE_GUIDE_STEPS.map((step) => (
-        <GuideSlide key={step.step} step={step} totalSteps={SERVICE_GUIDE_STEPS.length} />
-      ))}
-      <GuideOutro />
-    </S.LandingPageLayout>
+    <>
+      <S.LandingPageLayout ref={scrollContainerRef}>
+        <GuideIntro />
+        {SERVICE_GUIDE_STEPS.map((step) => (
+          <GuideSlide key={step.step} step={step} totalSteps={SERVICE_GUIDE_STEPS.length} />
+        ))}
+        <GuideOutro />
+      </S.LandingPageLayout>
+      <S.LoginButtonWrapper $isIntro={isIntro}>
+        <LoginButton />
+      </S.LoginButtonWrapper>
+    </>
   );
 };