feat: 섹션 등장 애니메이션 추가

Central-MakeUs · Apr 24, 2024 · 75b7ef0 · 75b7ef0
1 parent ef3c3a8
commit 75b7ef0
Show file tree

Hide file tree

Showing 11 changed files with 186 additions and 95 deletions.
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -2,5 +2,6 @@ export * from './apply-button'
 export * from './aura-circle'
 export * from './floating-button'
 export * from './glass-card'
+export * from './scroll-reveal-container'
 export * from './section'
 export * from './seo'
diff --git a/src/components/scroll-reveal-container/index.ts b/src/components/scroll-reveal-container/index.ts
@@ -0,0 +1 @@
+export * from './scroll-reveal-container'
diff --git a/src/components/scroll-reveal-container/scroll-reveal-container.module.scss b/src/components/scroll-reveal-container/scroll-reveal-container.module.scss
@@ -0,0 +1,19 @@
+@keyframes animate {
+  0% {
+    opacity: 0;
+    transform: translate3d(0px, 50px, 0px);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0px, 0px, 0px);
+  }
+}
+
+.box {
+  opacity: 0;
+}
+
+.visible {
+  animation: 0.5s ease-in-out 0s 1 normal forwards running animate;
+  opacity: 1;
+}
diff --git a/src/components/scroll-reveal-container/scroll-reveal-container.tsx b/src/components/scroll-reveal-container/scroll-reveal-container.tsx
@@ -0,0 +1,38 @@
+import clsx from 'clsx'
+import { PropsWithChildren, useEffect } from 'react'
+
+import * as css from './scroll-reveal-container.module.scss'
+
+interface Props extends PropsWithChildren {
+  className?: string
+}
+
+export const ScrollRevealContainer = ({ className = '', children }: Props) => {
+  useEffect(() => {
+    const initObserver = () => {
+      const options = {
+        root: null,
+        threshold: 0.2,
+      }
+
+      const observerCallback: IntersectionObserverCallback = (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add(css.visible)
+          }
+        })
+      }
+
+      return new IntersectionObserver(observerCallback, options)
+    }
+
+    const myElements = document.querySelectorAll('.animateBox')
+    const observer = initObserver()
+
+    myElements.forEach((element) => {
+      observer.observe(element)
+    })
+  }, [children])
+
+  return <div className={clsx('animateBox', css.box, className)}>{children}</div>
+}
diff --git a/src/views/about/about.tsx b/src/views/about/about.tsx
@@ -1,6 +1,6 @@
 import type { HeadProps, PageProps } from 'gatsby'
 
-import { Seo } from '@/components'
+import { ScrollRevealContainer, Seo } from '@/components'
 import { Main } from '@/layouts'
 
 import * as css from './about.module.scss'
@@ -21,13 +21,26 @@ const AboutPage = ({
 }: PageProps<Queries.ProjectImgQuery>) => {
   return (
     <Main className={css.main}>
-      <FeatureSection />
-      <IdentitySection />
-      <ChallengerSection />
-      <ActivitySection />
-      <AdditionalSection />
+      <ScrollRevealContainer>
+        <FeatureSection />
+      </ScrollRevealContainer>
+      <ScrollRevealContainer>
+        <IdentitySection />
+      </ScrollRevealContainer>
+      <ScrollRevealContainer>
+        <ChallengerSection />
+      </ScrollRevealContainer>
+      <ScrollRevealContainer>
+        <ActivitySection />
+      </ScrollRevealContainer>
+      <ScrollRevealContainer>
+        <AdditionalSection />
+      </ScrollRevealContainer>
       <ProductSection apps={apps} />
-      <ApplySection />
+      <ScrollRevealContainer>
+        <ApplySection />
+      </ScrollRevealContainer>
+
       <div className={css.space} />
     </Main>
   )

diff --git a/src/views/about/components/product-section/product-section.module.scss b/src/views/about/components/product-section/product-section.module.scss
@@ -46,6 +46,13 @@
   }
 }
 
+.center {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
 .moreButton {
   position: absolute;
   color: #b36afb;

diff --git a/src/views/about/components/product-section/product-section.tsx b/src/views/about/components/product-section/product-section.tsx
@@ -1,7 +1,7 @@
 import { Link } from 'gatsby'
 import { GatsbyImage, IGatsbyImageData } from 'gatsby-plugin-image'
 
-import { Section } from '@/components'
+import { ScrollRevealContainer, Section } from '@/components'
 import { getRefinedImage } from '@/utils'
 
 import * as css from './product-section.module.scss'
@@ -38,7 +38,9 @@ export const ProductSection = ({ apps }: Props) => {
 
   return (
     <Section>
-      <Section.Head title={`CMC에서 제작한\n프로덕트를 만나보세요`} />
+      <ScrollRevealContainer className={css.center}>
+        <Section.Head title={`CMC에서 제작한\n프로덕트를 만나보세요`} />
+      </ScrollRevealContainer>
       <div className={css.carouselContainer}>
         <div className={css.carouselSlide}>{renderImages(firstSlideItems)}</div>
         <div className={css.carouselSlide2}>{renderImages(secondSlideItems)}</div>

diff --git a/src/views/faq/faq.tsx b/src/views/faq/faq.tsx
@@ -3,7 +3,7 @@ import { HeadProps } from 'gatsby'
 import { StaticImage } from 'gatsby-plugin-image'
 import { useState } from 'react'
 
-import { Section, Seo } from '@/components'
+import { ScrollRevealContainer, Section, Seo } from '@/components'
 import { Main } from '@/layouts'
 
 import { Cards, Tab } from './constants'
@@ -28,53 +28,55 @@ const FaqPage = () => {
 
   return (
     <Main className={css.main}>
-      <Section className={css.section}>
-        <Section.Head title="FAQ" />
-        <nav>
-          <ul className={css.main_buttons}>
-            {Object.keys(Cards).map((key) => {
-              const card = Cards[key as Tab]
-              return (
-                <li key={key}>
-                  <Button isActive={key === currentTab} label={card.name} onClick={() => setCurrentTab(key as Tab)} />
-                </li>
-              )
-            })}
-          </ul>
-        </nav>
+      <ScrollRevealContainer>
+        <Section className={css.section}>
+          <Section.Head title="FAQ" />
+          <nav>
+            <ul className={css.main_buttons}>
+              {Object.keys(Cards).map((key) => {
+                const card = Cards[key as Tab]
+                return (
+                  <li key={key}>
+                    <Button isActive={key === currentTab} label={card.name} onClick={() => setCurrentTab(key as Tab)} />
+                  </li>
+                )
+              })}
+            </ul>
+          </nav>
 
-        <ul className={css.cards}>
-          {Cards[currentTab].qnas.map((qna) => (
-            <li key={qna.question} className={css.card}>
-              <p className={css.question}>{qna.question}</p>
-              <div className={css.line} />
-              <p className={css.answer}>{qna.answer}</p>
-            </li>
-          ))}
-        </ul>
+          <ul className={css.cards}>
+            {Cards[currentTab].qnas.map((qna) => (
+              <li key={qna.question} className={css.card}>
+                <p className={css.question}>{qna.question}</p>
+                <div className={css.line} />
+                <p className={css.answer}>{qna.answer}</p>
+              </li>
+            ))}
+          </ul>
 
-        <div className={css.sns_group}>
-          <a
-            href="https://www.instagram.com/cmc__official/"
-            target="_blank"
-            rel="noreferrer"
-            className={css.sns_button}
-          >
-            <StaticImage
-              src="./images/sns-insta.png"
-              alt="CMC 인스타 스토리 확인하러 가는 버튼"
-              className={css.sns_icon}
-            />
-            CMC 인스타 스토리 확인
-          </a>
-          <a href="http://pf.kakao.com/_xcwDJT" target="_blank" rel="noreferrer" className={css.sns_button}>
-            <StaticImage src="./images/sns-kakao.png" alt="CMC 카카오톡 문의하기 버튼" className={css.sns_icon} />
-            카카오톡 문의
-          </a>
-        </div>
+          <div className={css.sns_group}>
+            <a
+              href="https://www.instagram.com/cmc__official/"
+              target="_blank"
+              rel="noreferrer"
+              className={css.sns_button}
+            >
+              <StaticImage
+                src="./images/sns-insta.png"
+                alt="CMC 인스타 스토리 확인하러 가는 버튼"
+                className={css.sns_icon}
+              />
+              CMC 인스타 스토리 확인
+            </a>
+            <a href="http://pf.kakao.com/_xcwDJT" target="_blank" rel="noreferrer" className={css.sns_button}>
+              <StaticImage src="./images/sns-kakao.png" alt="CMC 카카오톡 문의하기 버튼" className={css.sns_icon} />
+              카카오톡 문의
+            </a>
+          </div>
 
-        <div className={css.space} />
-      </Section>
+          <div className={css.space} />
+        </Section>
+      </ScrollRevealContainer>
     </Main>
   )
 }

diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx
@@ -1,7 +1,7 @@
 import type { HeadProps } from 'gatsby'
 import { useRef } from 'react'
 
-import { Seo } from '@/components'
+import { ScrollRevealContainer, Seo } from '@/components'
 import { Main } from '@/layouts'
 
 import { CounterSection, IntroSection, ScrollIndicator, SupportsSection } from './components'
@@ -22,8 +22,12 @@ const HomePage = () => {
       <ScrollIndicator onClick={scrollToNextSection} />
 
       <div className={css.gradient_background}>
-        <CounterSection ref={nextSectionRef} />
-        <SupportsSection />
+        <ScrollRevealContainer>
+          <CounterSection ref={nextSectionRef} />
+        </ScrollRevealContainer>
+        <ScrollRevealContainer>
+          <SupportsSection />
+        </ScrollRevealContainer>
         <div className={css.space} />
       </div>
     </Main>

diff --git a/src/views/project/project.tsx b/src/views/project/project.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx'
 import type { HeadProps, PageProps } from 'gatsby'
 import { useCallback, useMemo, useState } from 'react'
 
-import { Section, Seo } from '@/components'
+import { ScrollRevealContainer, Section, Seo } from '@/components'
 import { Main } from '@/layouts'
 import { getRefinedImage } from '@/utils'
 
@@ -25,38 +25,40 @@ const ProjectPage = ({
 
   return (
     <Main className={css.main}>
-      <Section>
-        <Section.Head title="Challenger’s Project" description="챌린저들의 다양한 프로젝트를 확인해보세요" />
+      <ScrollRevealContainer>
+        <Section>
+          <Section.Head title="Challenger’s Project" description="챌린저들의 다양한 프로젝트를 확인해보세요" />
 
-        <nav className={css.nav}>
-          <ul>
-            {tags.map((menu) => (
-              <li key={menu}>
-                <button
-                  type="button"
-                  onClick={() => setCurrentTag(menu)}
-                  className={clsx({ [css.active]: currentTag === menu })}
-                >
-                  {menu === 'All' ? `전체(${apps.length}개)` : `${menu}기(${getProjectsLengthByYear(menu)}개)`}
-                </button>
-              </li>
+          <nav className={css.nav}>
+            <ul>
+              {tags.map((menu) => (
+                <li key={menu}>
+                  <button
+                    type="button"
+                    onClick={() => setCurrentTag(menu)}
+                    className={clsx({ [css.active]: currentTag === menu })}
+                  >
+                    {menu === 'All' ? `전체(${apps.length}개)` : `${menu}기(${getProjectsLengthByYear(menu)}개)`}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </nav>
+          <ul className={css.grid_container}>
+            {refinedProjects.map(({ id, name, description, year, logo, link, rank }) => (
+              <Card
+                key={id}
+                name={name}
+                year={year}
+                image={getRefinedImage(logo?.childImageSharp?.gatsbyImageData)}
+                description={description}
+                link={link}
+                rank={rank}
+              />
             ))}
           </ul>
-        </nav>
-        <ul className={css.grid_container}>
-          {refinedProjects.map(({ id, name, description, year, logo, link, rank }) => (
-            <Card
-              key={id}
-              name={name}
-              year={year}
-              image={getRefinedImage(logo?.childImageSharp?.gatsbyImageData)}
-              description={description}
-              link={link}
-              rank={rank}
-            />
-          ))}
-        </ul>
-      </Section>
+        </Section>
+      </ScrollRevealContainer>
     </Main>
   )
 }

diff --git a/src/views/recruit/recruit.tsx b/src/views/recruit/recruit.tsx
@@ -1,6 +1,6 @@
 import { HeadProps } from 'gatsby'
 
-import { Section, Seo } from '@/components'
+import { ScrollRevealContainer, Section, Seo } from '@/components'
 import { Main } from '@/layouts'
 
 import { AuraEffect, PlanCard } from './components'
@@ -10,13 +10,15 @@ import * as css from './recruit.module.scss'
 const RecruitPage = () => {
   return (
     <Main className={css.main}>
-      <Section>
-        <Section.Head title="모집안내" description="15기 일정을 소개합니다" />
-        <PlanCard title="CMC 합류 여정" plans={RecruitPlans} showButton />
-        <PlanCard title="CMC 정기 세션" plans={SessionPlans} />
-        <AuraEffect />
-        <div className={css.space} />
-      </Section>
+      <ScrollRevealContainer>
+        <Section>
+          <Section.Head title="모집안내" description="15기 일정을 소개합니다" />
+          <PlanCard title="CMC 합류 여정" plans={RecruitPlans} showButton />
+          <PlanCard title="CMC 정기 세션" plans={SessionPlans} />
+          <AuraEffect />
+          <div className={css.space} />
+        </Section>
+      </ScrollRevealContainer>
     </Main>
   )
 }