Feat[#100] 랜딩페이지 첫번째 메인화면 구현

src/components/landing/Echo/Echo.module.scss

@@ -0,0 +1,204 @@
+.container {
+  position: relative;
+
+  overflow: hidden;
+
+  width: 100%;
+  height: 100vh;
+
+  background: url('/pngs/landing-echo-background.png') no-repeat center/cover;
+}
+
+.echo {
+  @include responsive(T) {
+    right: 60%;
+    transform: translateX(60%);
+  }
+
+  position: absolute;
+  right: 0;
+
+  aspect-ratio: 1.69 / 1;
+  height: 100%;
+
+  background: url('/pngs/landing-echo.png') no-repeat center/cover;
+
+  transition: $base-transition;
+  animation: fadein-up 1s ease-in-out forwards;
+}
+
+.echo-shadow {
+  @include responsive(T) {
+    right: 45%;
+    transform: translateX(45%);
+  }
+
+  position: absolute;
+  right: 10%;
+
+  aspect-ratio: 1.69 / 1;
+  height: 110%;
+
+  background: url('/pngs/landing-echo-shadow.png') no-repeat center/cover;
+
+  transition: $base-transition;
+  animation: fadein-up-late 1s ease-in-out forwards;
+}
+
+.side-scroll {
+  @include flexbox;
+
+  @include responsive(M) {
+    display: none;
+  }
+
+  position: absolute;
+  top: 0;
+
+  overflow: hidden;
+
+  width: 6rem;
+
+  writing-mode: vertical-rl;
+
+  backdrop-filter: $landing-blur;
+
+  &.left {
+    left: 0;
+  }
+
+  &.right {
+    right: 0;
+  }
+
+  .scroll-content {
+    @include text-style-quantico(24, $primary);
+    @include flexbox(start, center, 6.8rem);
+
+    white-space: nowrap;
+
+    &.left {
+      animation: text-loop-left 10s linear infinite;
+    }
+
+    &.right {
+      animation: text-loop-right 10s linear infinite;
+    }
+  }
+}
+
+.landing-text {
+  @include text-style-quantico(96);
+
+  @include responsive(T) {
+    font-size: 7.6rem;
+  }
+
+  @include responsive(M) {
+    @include text-style-quantico(40);
+
+    letter-spacing: -0.2rem;
+  }
+
+  position: absolute;
+  letter-spacing: -0.48rem;
+
+  &.main {
+    @include responsive(T) {
+      bottom: 38%;
+    }
+
+    @include responsive(M) {
+      bottom: 32%;
+    }
+
+    bottom: 40%;
+    color: $primary;
+    animation: main-text 2s ease-in-out forwards;
+  }
+
+  &.sub-main {
+    bottom: 26%;
+    left: -50%;
+
+    color: transparent;
+
+    animation: sub-main-text 2s ease-in-out forwards;
+    animation-delay: 1s;
+
+    -webkit-text-stroke: 0.1rem $white;
+  }
+}
+
+@keyframes fadein-up {
+  0% {
+    bottom: -10%;
+    opacity: 0;
+  }
+
+  100% {
+    bottom: -5%;
+    opacity: 1;
+  }
+}
+
+@keyframes fadein-up-late {
+  0% {
+    bottom: -10%;
+    opacity: 0;
+  }
+
+  50% {
+    bottom: -10%;
+    opacity: 0;
+  }
+
+  100% {
+    bottom: -5%;
+    opacity: 1;
+  }
+}
+
+@keyframes text-loop-left {
+  0% {
+    transform: translateY(0%);
+  }
+
+  100% {
+    transform: translateY(-50%);
+  }
+}
+
+@keyframes text-loop-right {
+  0% {
+    transform: translateY(-50%);
+  }
+
+  100% {
+    transform: translateY(0%);
+  }
+}
+
+@keyframes main-text {
+  0% {
+    left: -50%;
+    opacity: 0;
+  }
+
+  100% {
+    left: 16%;
+    opacity: 1;
+  }
+}
+
+@keyframes sub-main-text {
+  0% {
+    left: -50%;
+    opacity: 0;
+  }
+
+  100% {
+    left: 12%;
+    opacity: 1;
+  }
+}

src/components/landing/Echo/index.tsx

@@ -0,0 +1,46 @@
+import classNames from 'classnames/bind';
+
+import { GAME_NAME_LIST_EN } from '@/constants';
+
+import useMouseMoveEffect from '@/hooks/useMouseMoveEffect';
+
+import styles from './Echo.module.scss';
+
+const cx = classNames.bind(styles);
+
+const Echo = () => {
+  const { containerRef, elementRef } = useMouseMoveEffect(8);
+  return (
+    <section ref={containerRef} className={cx('container')}>
+      <div ref={elementRef} className={cx('echo-shadow')}></div>
+      <div ref={elementRef} className={cx('echo')}></div>
+      <div className={cx('side-scroll', 'left')}>
+        <ul className={cx('scroll-content', 'left')}>
+          {GAME_NAME_LIST_EN.map((gameName, index) => (
+            <li key={`game-left-${index}`}>{gameName}</li>
+          ))}
+          {GAME_NAME_LIST_EN.map((gameName, index) => (
+            <li key={`game-left-clone-${index}`}>{gameName}</li>
+          ))}
+        </ul>
+      </div>
+      <div className={cx('side-scroll', 'right')}>
+        <ul className={cx('scroll-content', 'right')}>
+          {GAME_NAME_LIST_EN.map((gameName, index) => (
+            <li key={`game-right-${index}`}>{gameName}</li>
+          ))}
+          {GAME_NAME_LIST_EN.map((gameName, index) => (
+            <li key={`game-right-clone-${index}`}>{gameName}</li>
+          ))}
+        </ul>
+      </div>
+      <h2 className={cx('landing-text', 'main')}>BEST TEAMWORK</h2>
+      <h2 className={cx('landing-text', 'sub-main')}>IT&apos;s UP TO YOU</h2>
+      <button className={cx('button-start')} type='button'>
+        Get Started
+      </button>
+    </section>
+  );
+};
+
+export default Echo;

src/hooks/useMouseMoveEffect.ts

@@ -0,0 +1,44 @@
+import { useEffect, useRef } from 'react';
+
+const useMouseMoveEffect = (moveScale: number) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const elementRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    const element = elementRef.current;
+
+    if (!container || !element) {
+      return;
+    }
+
+    element.style.willChange = 'transform';
+
+    const handleMouseMove = (event: MouseEvent) => {
+      requestAnimationFrame(() => {
+        const containerRect = container.getBoundingClientRect();
+        const mouseX = event.clientX - containerRect.left;
+        const mouseY = event.clientY - containerRect.top;
+
+        const centerX = containerRect.width / 2;
+        const centerY = containerRect.height / 2;
+
+        const offsetX = (mouseX - centerX) / centerX;
+        const offsetY = (mouseY - centerY) / centerY;
+
+        element.style.transform = `translate(${-offsetX * moveScale}px, ${-offsetY * moveScale}px)`;
+      });
+    };
+
+    container.addEventListener('mousemove', handleMouseMove);
+
+    return () => {
+      container.removeEventListener('mousemove', handleMouseMove);
+      element.style.willChange = 'transform';
+    };
+  }, [moveScale]);
+
+  return { containerRef, elementRef };
+};
+
+export default useMouseMoveEffect;

src/pages/landing/index.tsx

@@ -1,7 +1,12 @@
+import Echo from '@/components/landing/Echo';
 import Layout from '@/components/layout/Layout';
 
 const LandingPage = () => {
-  return <div>LandingPage</div>;
+  return (
+    <div>
+      <Echo />
+    </div>
+  );
 };
 
 export default LandingPage;

src/styles/variables/_blur.scss

@@ -6,3 +6,4 @@ $alarm-blur: blur(80px);
 $drawer-blur: blur(60px);
 $input-blur: blur(20px);
 $confirm-schedule-blur: blur(32px);
+$landing-blur: blur(12px);