feat: greeting 문구별 애니메이션 추가 (#20)

sopt-makers · Jul 26, 2023 · 3050ce1 · 3050ce1
1 parent ce11170
commit 3050ce1
Show file tree

Hide file tree

Showing 9 changed files with 244 additions and 147 deletions.
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -4,7 +4,7 @@ import { ReactLenis } from '@studio-freight/react-lenis';
 
 import FeedbackSection from '@/components/mainpage/feedback/FeedbackSection';
 import GreetingSection from '@/components/mainpage/greeting/GreetingSection';
-import ProductSection from '@/components/mainpage/ProductSection';
+import ProductSection from '@/components/mainpage/prouduct/ProductSection';
 import Recruit from '@/components/mainpage/Recruit';
 
 export default function Page() {
@@ -13,7 +13,7 @@ export default function Page() {
       <div>
         {/* <Header /> */}
         <GreetingSection />
-        <ProductSection className='sticky top-0' />
+        <ProductSection />
         {/* <CoreValue /> */}
         <FeedbackSection />
         <Recruit />

diff --git a/apps/web/src/components/mainpage/ProductSection.tsx b/apps/web/src/components/mainpage/ProductSection.tsx
diff --git a/apps/web/src/components/mainpage/greeting/GreetingSection.tsx b/apps/web/src/components/mainpage/greeting/GreetingSection.tsx
@@ -1,4 +1,3 @@
-import { m } from 'framer-motion';
 import React from 'react';
 
 import MakersLogo3D from '@/components/common/MakersLogo3D';
@@ -9,11 +8,11 @@ import Missions from './Missions';
 
 export default function Greeting() {
   return (
-    <div className='relative h-[600vh]'>
+    <div className='relative h-[790vh]'>
       <div className='absolute inset-0'>
-        <m.div className='sticky top-0 h-[100vh] pt-[8rem] flex justify-center items-center'>
+        <div className='sticky top-0 flex h-[100vh] items-center justify-center pt-[8rem]'>
           <MakersLogo3D className='h-[40rem] w-[40rem] opacity-50' />
-        </m.div>
+        </div>
       </div>
       <div className='absolute inset-0'>
         <Intro />

diff --git a/apps/web/src/components/mainpage/greeting/Intro.tsx b/apps/web/src/components/mainpage/greeting/Intro.tsx
@@ -11,23 +11,23 @@ export default function Intro({ className }: GreetingProps) {
 
   const { scrollYProgress } = useScroll({ target: containerRef, offset: ['start start', 'end start'] });
 
-  const opacity = useTransform(scrollYProgress, [0, 0.12, 0.3, 0.5, 1], [1, 1, 1, 0, 0]);
+  const opacity = useTransform(scrollYProgress, [0, 0.15], [1, 0]);
 
   return (
-    <article ref={containerRef} className={clsx('h-[200vh]', className)}>
+    <article ref={containerRef} className={clsx('h-[120vh]', className)}>
       <m.div
-        className='sticky top-0 flex flex-col justify-start items-center pt-[32rem]'
+        className='sticky top-0 flex h-screen w-full flex-col items-center justify-center'
         initial={{ opacity: 0 }}
         whileInView={{ opacity: 1 }}
         viewport={{ once: true }}
-        transition={{ delay: 1.5 }}
+        transition={{ delay: 1 }}
         style={{ opacity }}
       >
-        <h1 className='mt-[6rem] text-center text-64-semibold'>
+        <h1 className='text-64-semibold mt-[6rem] text-center'>
           SOPT에 없던 새로운 가치를 <br />
           제품을 통해 만들어갑니다.
         </h1>
-        <button className='mt-[4rem] mb-[5.104rem] px-[4rem] py-[1.6rem] bg-dark1 rounded-[1.2rem] border border-solid border-[#808388]'>
+        <button className='bg-dark1 mb-[5.104rem] mt-[4rem] rounded-[1.2rem] border border-solid border-[#808388] px-[4rem] py-[1.6rem]'>
           <p className='text-24-semibold'>3기 합류하기 (~8/88)</p>
           <p className='text-16-regular mt-[1.2rem]'>72:21:03 뒤 지원 마감</p>
         </button>

diff --git a/apps/web/src/components/mainpage/greeting/MakersIntodution.tsx b/apps/web/src/components/mainpage/greeting/MakersIntodution.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import clsx from 'clsx';
 import { m, useScroll, useTransform } from 'framer-motion';
 import { useRef } from 'react';
@@ -13,37 +11,49 @@ export default function MakersIntodution({ className }: GreetingProps) {
 
   const { scrollYProgress } = useScroll({ target: containerRef, offset: ['start start', 'end start'] });
 
-  const opacity = useTransform(scrollYProgress, [0, 0.12, 0.3, 0.52, 1], [0, 1, 1, 0, 0]);
+  const opacity1 = useTransform(scrollYProgress, [0, 0.1, 0.7, 0.75], [0, 1, 1, 0]);
+  const opacity2 = useTransform(scrollYProgress, [0.15, 0.25, 0.7, 0.75], [0, 1, 1, 0]);
+  const opacity3 = useTransform(scrollYProgress, [0.3, 0.4, 0.7, 0.75], [0, 1, 1, 0]);
+  const opacity4 = useTransform(scrollYProgress, [0.45, 0.5, 0.7, 0.75], [0, 1, 1, 0]);
 
   return (
-    <article ref={containerRef} className={clsx('h-[200vh]', className)}>
-      <m.div
-        className='sticky top-0 pt-[19.2rem] flex flex-col justify-center items-center text-center'
-        style={{ opacity }}
-      >
-        <div className='flex flex-col justify-center items-center text-center'>
-          <p className='flex justify-center items-center gap-[1.6rem] text-32-regular'>
+    <article ref={containerRef} className={clsx('h-[390vh]', className)}>
+      <div className='sticky top-0 flex h-screen w-full flex-col items-center justify-center text-center'>
+        <m.div className='flex flex-col items-center justify-center text-center' style={{ opacity: opacity1 }}>
+          <p className='text-32-regular flex items-center justify-center gap-[1.6rem]'>
             <TextLogo />는
           </p>
-          <p className='mt-[6rem] text-40-semibold'>
+        </m.div>
+        <m.div
+          className='mt-[6rem] flex flex-col items-center justify-center text-center'
+          style={{ opacity: opacity2 }}
+        >
+          <p className='text-40-semibold'>
             SOPT에 필요한 프로덕트를 만들어
             <br /> <span className='text-main-makers'>3천여명의 구성원</span>들을{' '}
             <span className='text-sub-skyblue'>연결</span>하고 <span className='text-sub-yellow'>새로운 가치</span>를
             제공하기 위한
             <br /> SOPT 특수 기구예요.
           </p>
-          <p className='mt-[4rem] text-32-regular'>
+        </m.div>
+        <m.div
+          className='mt-[4rem] flex flex-col items-center justify-center text-center'
+          style={{ opacity: opacity3 }}
+        >
+          <p className='text-32-regular'>
             수년간 방치되어 SOPT를 잘 드러내지 못하는 공식 홈페이지를 보고
             <br />
             홈페이지에 오너십을 가진 조직의 부재라는 문제 의식으로부터
             <br />
             이를 지속 가능한 방법으로 해결하고자 22년 7월 30일 특수 기구로 시작했어요.
           </p>
-          <button className='flex flex-row justify-center items-center gap-[0.8rem] mt-[6rem] px-[3.2rem]  py-[2.4rem] text-24-semibold'>
+        </m.div>
+        <m.div className='mt-[6rem]' style={{ opacity: opacity4 }}>
+          <button className='text-24-semibold flex flex-row items-center justify-center gap-[0.8rem] px-[3.2rem] py-[2.4rem]'>
             makers 탄생 배경 보러가기 <ArrowIcon />
           </button>
-        </div>
-      </m.div>
+        </m.div>
+      </div>
     </article>
   );
 }

diff --git a/apps/web/src/components/mainpage/greeting/Missions.tsx b/apps/web/src/components/mainpage/greeting/Missions.tsx
@@ -13,31 +13,32 @@ export default function Missions({ className }: GreetingProps) {
 
   const { scrollYProgress } = useScroll({ target: containerRef, offset: ['start start', 'end start'] });
 
-  const opacity = useTransform(scrollYProgress, [0, 0.12, 0.3, 0.5, 1], [0, 1, 1, 0, 0]);
+  const opacity1 = useTransform(scrollYProgress, [0, 0.1, 0.6, 0.7], [0, 1, 1, 0]);
+  const opacity2 = useTransform(scrollYProgress, [0.2, 0.35, 0.6, 0.7], [0, 1, 1, 0]);
+  const opacity3 = useTransform(scrollYProgress, [0.45, 0.55, 0.6, 0.7], [0, 1, 1, 0]);
 
   return (
-    <article ref={containerRef} className={clsx('h-[200vh]', className)}>
-      <m.div
-        className='sticky top-0 pt-[27.2rem] flex flex-col justify-center items-center gap-[1.6rem] text-60-semibold'
-        style={{ opacity }}
-      >
-        <p className='flex justify-center items-start gap-[1.792rem]'>
-          <span className='text-sub-skyblue text-16-regular'>MISSION 1.</span>
-          <span>
-            3천명이 넘는 SOPT 구성원들의
-            <br />
-            연결되지 못한 가치를 발견하고,
-          </span>
-        </p>
-        <p className='flex gap-[1.792rem]'>
-          <span className='text-main-makers text-16-regular'>MISSION 2.</span>
-          <span>SOPT 활동이 더 즐거울 수 있도록 도우며,</span>
-        </p>
-        <p className='flex gap-[1.792rem]'>
-          <span className='text-sub-pink text-16-regular'>MISSION 3.</span>
-          <span>SOPT를 대내외적으로 더 잘 알려요.</span>
-        </p>
-      </m.div>
+    <article ref={containerRef} className={clsx('h-[280vh]', className)}>
+      <div className='sticky top-0 flex h-screen w-full items-center justify-center'>
+        <div className='text-60-semibold flex flex-col  items-center justify-center gap-[1.6rem]'>
+          <m.p className='flex items-start justify-center gap-[1.792rem]' style={{ opacity: opacity1 }}>
+            <span className='text-sub-skyblue text-16-regular'>MISSION 1.</span>
+            <span>
+              3천명이 넘는 SOPT 구성원들의
+              <br />
+              연결되지 못한 가치를 발견하고,
+            </span>
+          </m.p>
+          <m.p className='flex gap-[1.792rem]' style={{ opacity: opacity2 }}>
+            <span className='text-main-makers text-16-regular'>MISSION 2.</span>
+            <span>SOPT 활동이 더 즐거울 수 있도록 도우며,</span>
+          </m.p>
+          <m.p className='flex gap-[1.792rem]' style={{ opacity: opacity3 }}>
+            <span className='text-sub-pink text-16-regular'>MISSION 3.</span>
+            <span>SOPT를 대내외적으로 더 잘 알려요.</span>
+          </m.p>
+        </div>
+      </div>
     </article>
   );
 }
diff --git a/apps/web/src/components/mainpage/prouduct/Description.tsx b/apps/web/src/components/mainpage/prouduct/Description.tsx
@@ -1,19 +1,68 @@
-export default function Description() {
-  return (
-    <div>
-      <img
-        className='my-[4rem]'
-        src='https://github.com/sopt-makers/makers-page/assets/97586683/a59a5edd-d39c-42c8-b362-4d5542e02ec8'
-        alt='official_image'
-      />
-      <div className='text-16-regular'>
-        SOPT 공식 홈페이지에서는 그동안 잘 드러나지 않던 SOPT의 다양한 활동들과 사람들을 소개하고, 멋진 결과물을 잘
-        보여주어
-        <br /> SOPT가 지닌 열정과 가치들을 잘 알리는 역할을 해요.
-        <br />
-        <br /> 그로 인해 대외적으로 후원 및 협력을 용이하게 하고, 더 많은 분들이 SOPT를 잘 이해하고 지원할 수 있도록
-        도와요.
-      </div>
-    </div>
-  );
+interface DescriptionProps {
+  type: 'official' | 'playground' | 'app';
+}
+
+export default function Description({ type }: DescriptionProps) {
+  switch (type) {
+    case 'official':
+      return (
+        <div>
+          <img
+            className='py-[4rem]'
+            src='https://github.com/sopt-makers/makers-page/assets/97586683/a59a5edd-d39c-42c8-b362-4d5542e02ec8'
+            alt='official_image'
+          />
+          <div className='text-16-regular'>
+            SOPT 공식 홈페이지에서는 그동안 잘 드러나지 않던 SOPT의 다양한 활동들과 사람들을 소개하고, 멋진 결과물을 잘
+            보여주어
+            <br /> SOPT가 지닌 열정과 가치들을 잘 알리는 역할을 해요.
+            <br />
+            <br /> 그로 인해 대외적으로 후원 및 협력을 용이하게 하고, 더 많은 분들이 SOPT를 잘 이해하고 지원할 수 있도록
+            도와요.
+          </div>
+        </div>
+      );
+    case 'playground':
+      return (
+        <div>
+          <img
+            className='my-[4rem]'
+            src='https://github.com/sopt-makers/makers-page/assets/97586683/fc756699-5c1f-4c1c-98d0-dd50d2c910cf'
+            alt='playground_image'
+          />
+          <div className='text-16-regular'>
+            플레이그라운드에서는 SOPT 전체 회원들의 소개를 볼 수 있고, 나보다 앞을 걸어가고 있는 OB들에게 멘토링을
+            신청할 수 있어요.
+            <br /> 앱잼, 솝커톤, 솝텀 등 프로젝트를 등록할 수 있고 스터디, 세미나 등의 모임을 열고 또 참여할 수 있어요.
+            <br />
+            SOPT 플레이그라운드는 SOPT 회원들이 소통하고 연결될 수 있는 공간이에요. 멘토링을 통한 가치있는 연결,
+            끝말잇기와 같은
+            <br /> 가벼운 연결도 만들어가고 있어요. 현재는 약 500명의 회원이 있으며 앞으로 모임 피드, 커뮤니티 등 여러
+            가치있는 연결을 만들어
+            <br />
+            가고자 해요.
+          </div>
+        </div>
+      );
+    case 'app':
+      return (
+        <div>
+          <img
+            className='my-[4rem]'
+            src='https://github.com/sopt-makers/makers-page/assets/97586683/5aece179-4098-4a77-9d11-8e4a2daec798'
+            alt='app_image'
+          />
+          <div className='text-16-regular'>
+            공식앱을 통해서 SOPT 정규 세미나와 데모데이 등 공식 행사의 출석 인증 및 관리를 할 수 있어요.
+            <br /> 솝탬프를 통해 SOPT를 A부터 Z까지 즐길 수 있는 미션을 달성하며 회원들과 함께 랭킹을 쌓을 수 있어요.
+            <br />
+            <br />
+            공식앱은 SOPT 활동이 더욱 편하고 즐거울 수 있도록 돕는 역할을 하며 여러 서비스들의 중심점의 역할을 하고자
+            해요.
+          </div>
+        </div>
+      );
+    default:
+      return null;
+  }
 }