chore : 스크롤 영역 조정

sopt-makers · Jul 25, 2023 · 60dc0b5 · 60dc0b5
1 parent 97cfbbd
commit 60dc0b5
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git a/apps/web/src/components/mainpage/greeting/GreetingSection.tsx b/apps/web/src/components/mainpage/greeting/GreetingSection.tsx
@@ -8,7 +8,7 @@ import Missions from './Missions';
 
 export default function Greeting() {
   return (
-    <div className='relative h-[960vh]'>
+    <div className='relative h-[860vh]'>
       <div className='absolute inset-0'>
         <div className='sticky top-0 h-[100vh] pt-[8rem] flex justify-center items-center'>
           <MakersLogo3D className='h-[40rem] w-[40rem] opacity-50' />

diff --git a/apps/web/src/components/mainpage/greeting/Intro.tsx b/apps/web/src/components/mainpage/greeting/Intro.tsx
@@ -14,7 +14,7 @@ export default function Intro({ className }: GreetingProps) {
   const opacity = useTransform(scrollYProgress, [0, 0.12, 0.3, 0.5, 1], [1, 1, 1, 0, 0]);
 
   return (
-    <article ref={containerRef} className={clsx('h-[200vh]', className)}>
+    <article ref={containerRef} className={clsx('h-[170vh]', className)}>
       <m.div
         className='sticky top-0 flex flex-col justify-start items-center pt-[32rem]'
         initial={{ opacity: 0 }}

diff --git a/apps/web/src/components/mainpage/greeting/MakersIntodution.tsx b/apps/web/src/components/mainpage/greeting/MakersIntodution.tsx
@@ -17,7 +17,7 @@ export default function MakersIntodution({ className }: GreetingProps) {
   const opacity4 = useTransform(scrollYProgress, [0.45, 0.5, 0.7, 0.75, 1], [0, 1, 1, 0, 0]);
 
   return (
-    <article ref={containerRef} className={clsx('h-[420vh]', className)}>
+    <article ref={containerRef} className={clsx('h-[390vh]', className)}>
       <div className='sticky top-0 pt-[19.2rem] flex flex-col justify-center items-center text-center'>
         <m.div className='flex flex-col justify-center items-center text-center' style={{ opacity: opacity1 }}>
           <p className='flex justify-center items-center gap-[1.6rem] text-32-regular'>

diff --git a/apps/web/src/components/mainpage/greeting/Missions.tsx b/apps/web/src/components/mainpage/greeting/Missions.tsx
@@ -14,11 +14,11 @@ export default function Missions({ className }: GreetingProps) {
   const { scrollYProgress } = useScroll({ target: containerRef, offset: ['start start', 'end start'] });
 
   const opacity1 = useTransform(scrollYProgress, [0, 0.1, 0.7, 0.75, 1], [0, 1, 1, 0, 0]);
-  const opacity2 = useTransform(scrollYProgress, [0.14, 0.4, 0.7, 0.75, 1], [0, 1, 1, 0, 0]);
-  const opacity3 = useTransform(scrollYProgress, [0.44, 0.6, 0.7, 0.75, 1], [0, 1, 1, 0, 0]);
+  const opacity2 = useTransform(scrollYProgress, [0.2, 0.3, 0.7, 0.75, 1], [0, 1, 1, 0, 0]);
+  const opacity3 = useTransform(scrollYProgress, [0.4, 0.5, 0.7, 0.75, 1], [0, 1, 1, 0, 0]);
 
   return (
-    <article ref={containerRef} className={clsx('h-[340vh]', className)}>
+    <article ref={containerRef} className={clsx('h-[300vh]', className)}>
       <div className='sticky top-0 pt-[27.2rem] flex flex-col justify-center items-center gap-[1.6rem] text-60-semibold'>
         <m.p className='flex justify-center items-start gap-[1.792rem]' style={{ opacity: opacity1 }}>
           <span className='text-sub-skyblue text-16-regular'>MISSION 1.</span>