Feature#385 메인페이지 youtube embed 영상 삽입

mosu-app/src/pages/index.tsx

@@ -6,13 +6,14 @@ import { SiteMetadata } from "@/apps/ui/SiteMetadata";
 import { CoworkerSectionUnderMobile } from "@/widgets/home/CoworkerSectionUnderMobile";
 import { FeatureSection } from "@/widgets/home/FeatureSection";
 import { FooterSection } from "@/widgets/home/FooterSection";
-import { HeroSection } from "@/widgets/home/HeroSection";
+// import { HeroSection } from "@/widgets/home/HeroSection";
 import { IntroSection } from "@/widgets/home/IntroSection";
 import { PartnershipSection } from "@/widgets/home/PartnershipSection";
 import { ProblemSection } from "@/widgets/home/ProblemSection";
 import { ReviewSection } from "@/widgets/home/ReviewSection";
 import { ServiceLocationSection } from "@/widgets/home/ServiceLocationSection";
 import { SolutionSection } from "@/widgets/home/SolutionSection";
+import { YoutubeHeroSection } from "@/widgets/home/YoutubeHeroSection";
 
 gsap.registerPlugin(ScrollTrigger);
 
@@ -23,7 +24,8 @@ export default function Home() {
                 title="모의가 아닌 진짜 수능, 모수"
                 content="실제 학교 교실에서 수능과 동일한 시간에, 수험생이 직접 선택한 모의고사를 가져와 응시하는 실전형 수능 시뮬레이션 프로그램입니다."
             />
-            <HeroSection />
+            {/* <HeroSection /> */}
+            <YoutubeHeroSection />
             <IntroSection />
             <ProblemSection />
             <SolutionSection />

mosu-app/src/shared/hooks/useFontLoadState.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+
+export const useFontLoadState = () => {
+    const [fontLoaded, setFontLoaded] = useState(false);
+
+    useEffect(() => {
+        if (document.fonts && document.fonts.ready) {
+            document.fonts.ready.then(() => {
+                setFontLoaded(true);
+            });
+        } else {
+            setTimeout(() => setFontLoaded(true), 100);
+        }
+    }, []);
+
+    return { fontLoaded };
+};

mosu-app/src/widgets/home/HeroSection.module.scss

@@ -110,8 +110,6 @@
 
         margin: 0px auto;
 
-        @media (max-width: 1023px) {
-        }
         @media (max-width: 768px) {
             padding: 0.5rem;
         }

mosu-app/src/widgets/home/YoutubeHeroSection.module.scss

@@ -0,0 +1,160 @@
+.yt_hero_section {
+    &__wrapper {
+        position: relative;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        height: calc(100vh - 100px - 70px);
+        // 100px: header
+        // 70px: banner
+
+        color: #fff;
+        background-color: #000;
+
+        overflow: clip;
+
+        @media (max-width: 1023px) {
+            height: calc(100vh - 60px - 70px);
+        }
+        @media (max-width: 768px) {
+            height: calc(100vh - 60px - 70px);
+        }
+    }
+
+    &__video {
+        width: 100%;
+        margin: 0px auto;
+    }
+
+    &__title {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+
+        margin: 0px auto;
+        text-align: center;
+
+        overflow: hidden;
+
+        font-weight: bold;
+        font-size: 3.75rem;
+
+        @media (max-width: 1023px) {
+            flex-direction: column;
+            gap: 0;
+
+            font-size: 3rem;
+        }
+
+        @media (max-width: 767px) {
+            gap: 0;
+            font-size: 2rem;
+
+            line-height: 1.2;
+        }
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+
+        width: 100%;
+
+        margin: 0px auto;
+
+        @media (max-width: 768px) {
+            padding: 0.5rem;
+        }
+
+        p {
+            display: flex;
+            flex-direction: column;
+            text-align: center;
+
+            width: 100%;
+
+            margin-left: auto;
+            margin-right: auto;
+
+            font-size: 1.125rem;
+
+            @media (max-width: 767px) {
+                font-size: 1rem;
+            }
+        }
+
+        button {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+
+            width: fit-content;
+
+            margin: 0.5rem auto;
+            border-radius: 9999px;
+            padding: 0.5rem 1rem;
+
+            background-color: #fff;
+            transition: background-color 1s;
+
+            font-size: 1rem;
+
+            @media (max-width: 1023px) {
+                padding: 0.5rem 1rem;
+                font-size: 1rem;
+            }
+            @media (max-width: 768px) {
+                padding: 0.5rem 1rem;
+                font-size: 0.875rem;
+            }
+
+            &:hover {
+                cursor: pointer;
+                background-color: #f3f3f3;
+            }
+
+            span:first-child {
+                color: #000;
+            }
+            span:last-child {
+                aspect-ratio: 1 / 1;
+                height: fit-content;
+
+                padding: 0.25rem;
+                border-radius: 9999px;
+
+                background-color: #000;
+            }
+        }
+
+        footer {
+            display: flex;
+            justify-content: center;
+
+            width: 100%;
+            height: fit-content;
+
+            margin: 0px auto;
+
+            animation: bounceWithOpacity 1.5s infinite;
+
+            @keyframes bounceWithOpacity {
+                0% {
+                    transform: translateY(0);
+                    opacity: 1;
+                }
+                50% {
+                    transform: translateY(-10px);
+                    opacity: 0.5;
+                }
+                100% {
+                    transform: translateY(0);
+                    opacity: 1;
+                }
+            }
+        }
+    }
+}

mosu-app/src/widgets/home/YoutubeHeroSection.tsx

@@ -0,0 +1,56 @@
+import { useGSAP } from "@gsap/react";
+import { YouTubeEmbed } from "@next/third-parties/google";
+import gsap from "gsap";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import Link from "next/link";
+import { useRef } from "react";
+
+import { useFontLoadState } from "@/shared/hooks/useFontLoadState";
+
+import styles from "./YoutubeHeroSection.module.scss";
+
+export const YoutubeHeroSection = () => {
+    const titleRef = useRef<HTMLHeadingElement>(null);
+    const textRef = useRef<HTMLDivElement>(null);
+    const registerButtonRef = useRef<HTMLButtonElement>(null);
+    const { fontLoaded } = useFontLoadState();
+
+    useGSAP(() => {
+        if (!fontLoaded) return;
+
+        const timeline = gsap.timeline();
+        timeline.fromTo(titleRef.current, { opacity: 0, y: 50 }, { opacity: 1, y: 0, duration: 2, ease: "expo.out" });
+    }, [fontLoaded]);
+
+    return (
+        <section className={styles.yt_hero_section__wrapper}>
+            <h1 className={styles.yt_hero_section__title} ref={titleRef} style={{ opacity: fontLoaded ? 1 : 0 }}>
+                <span>당신의 수능을 바꿀&nbsp;</span>
+                <span>마지막 기회</span>
+            </h1>
+
+            <article className={styles.yt_hero_section__video}>
+                <YouTubeEmbed videoid={"sy0h73_DO5M"} style="margin: 0px auto;" />
+            </article>
+
+            <div ref={textRef} className={styles.yt_hero_section__content} style={{ opacity: fontLoaded ? 1 : 0 }}>
+                <p>
+                    <span>모의가 아닌 진짜 수능 이용 가이드입니다.</span>
+                </p>
+
+                <Link href="/apply" scroll>
+                    <button ref={registerButtonRef}>
+                        <span>지금 바로 신청하기</span>
+                        <span>
+                            <ChevronRight strokeWidth={1} />
+                        </span>
+                    </button>
+                </Link>
+
+                <footer className={styles.yt_hero_section__footer}>
+                    <ChevronDown size={30} />
+                </footer>
+            </div>
+        </section>
+    );
+};