Feat[#100]: 랜딩페이지 첫 화면 구현

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

@@ -23,7 +23,7 @@
 
   background: url('/pngs/landing-echo.png') no-repeat center/cover;
 
-  animation: fadein-up 1s ease-in-out forwards;
+  animation: show-echo 1s ease-in-out forwards;
 }
 
 .echo-shadow {
@@ -40,7 +40,7 @@
 
   background: url('/pngs/landing-echo-shadow.png') no-repeat center/cover;
 
-  animation: fadein-up-late 1s ease-in-out forwards;
+  animation: show-echo-shadow 1s ease-in-out forwards;
 }
 
 .side-scroll {
@@ -59,6 +59,7 @@
 
   writing-mode: vertical-rl;
 
+  background-color: $opacity-white-5;
   backdrop-filter: $landing-blur;
 
   &.left {
@@ -89,7 +90,7 @@
   @include text-style-quantico(96);
 
   @include responsive(T) {
-    font-size: 7.6rem;
+    font-size: 8rem;
   }
 
   @include responsive(M) {
@@ -102,48 +103,121 @@
   letter-spacing: -0.48rem;
 
   &.main {
-    @include responsive(T) {
-      bottom: 38%;
-    }
-
     @include responsive(M) {
-      bottom: 32%;
+      animation: show-main-text-mobile 1s ease-in-out forwards;
     }
 
     bottom: 40%;
     color: $primary;
-    animation: main-text 2s ease-in-out forwards;
+    animation: show-main-text 1s ease-in-out forwards;
   }
 
-  &.sub-main {
+  &.sub {
+    @include responsive(M) {
+      bottom: 33%;
+      animation: show-sub-text-mobile 1s ease-in-out forwards;
+      animation-delay: 0.5s;
+    }
+
     bottom: 26%;
-    left: -50%;
+    left: -70%;
 
     color: transparent;
 
-    animation: sub-main-text 2s ease-in-out forwards;
-    animation-delay: 1s;
+    animation: show-sub-text 1s ease-in-out forwards;
+    animation-delay: 0.5s;
 
     -webkit-text-stroke: 0.1rem $white;
   }
 }
 
-.button-start {
-  @include text-style-quantico(24, $white);
+.button {
+  &-start {
+    @include responsive(M) {
+      @include pos-center-x;
+
+      bottom: 15%;
+      animation: button-start-mobile 0.5s ease-in-out forwards;
+      animation-delay: 1.5s;
+    }
+
+    @include text-style-quantico(24, $white);
+
+    @include responsive(PC) {
+      &:hover {
+        color: $primary;
+        background-image: url('/svgs/ic-button-border-active.svg');
+
+        .button-line {
+          background-color: $primary;
+        }
+      }
+    }
+
+    position: absolute;
+    bottom: 20%;
+    left: 53.3%;
+
+    width: 18rem;
+    height: 5.6rem;
+
+    opacity: 0;
+    background-image: url('/svgs/ic-button-border.svg');
+
+    animation: button-start 0.5s ease-in-out forwards;
+    animation-delay: 2.8s;
+  }
+
+  &-line {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+
+    width: 5.6rem;
+    height: 0.4rem;
+
+    background-color: $white;
+  }
+}
+
+.frame {
+  @include responsive(M) {
+    display: none;
+  }
 
   position: absolute;
-  bottom: 20%;
-  left: 54%;
+  bottom: 22.3%;
+  left: 12.2%;
+
+  width: 1.2rem;
+  height: 1.2rem;
+
+  opacity: 0;
+  background-image: url('/svgs/ic-frame.svg');
+
+  animation: show-frame 1s ease-in-out forwards;
+  animation-delay: 1s;
+
+  &-line {
+    @include responsive(M) {
+      display: none;
+    }
 
-  width: 18rem;
-  height: 5.6rem;
+    position: absolute;
+    bottom: 22.8%;
+    left: 12.8%;
 
-  background-color: $opacity-black-50;
-  clip-path: polygon(0 0, 80% 0, 100% 30%, 100% 100%, 20% 100%, 0 70%);
-  border: 0.1rem solid $white;
+    width: 0;
+    height: 0.1rem;
+
+    background-color: $white;
+
+    animation: show-frame-line 1s ease-in-out forwards;
+    animation-delay: 2s;
+  }
 }
 
-@keyframes fadein-up {
+@keyframes show-echo {
   0% {
     bottom: -10%;
     opacity: 0;
@@ -155,7 +229,7 @@
   }
 }
 
-@keyframes fadein-up-late {
+@keyframes show-echo-shadow {
   0% {
     bottom: -10%;
     opacity: 0;
@@ -192,7 +266,7 @@
   }
 }
 
-@keyframes main-text {
+@keyframes show-main-text {
   0% {
     left: -50%;
     opacity: 0;
@@ -204,7 +278,7 @@
   }
 }
 
-@keyframes sub-main-text {
+@keyframes show-main-text-mobile {
   0% {
     left: -50%;
     opacity: 0;
@@ -215,3 +289,71 @@
     opacity: 1;
   }
 }
+
+@keyframes show-sub-text {
+  0% {
+    left: -70%;
+    opacity: 0;
+  }
+
+  100% {
+    left: 12%;
+    opacity: 1;
+  }
+}
+
+@keyframes show-sub-text-mobile {
+  0% {
+    left: -70%;
+    opacity: 0;
+  }
+
+  100% {
+    left: 4%;
+    opacity: 1;
+  }
+}
+
+@keyframes button-start {
+  0% {
+    left: 53.3%;
+    opacity: 0;
+  }
+
+  100% {
+    left: 54%;
+    opacity: 1;
+  }
+}
+
+@keyframes button-start-mobile {
+  0% {
+    bottom: 15%;
+    opacity: 0;
+  }
+
+  100% {
+    bottom: 20%;
+    opacity: 1;
+  }
+}
+
+@keyframes show-frame {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes show-frame-line {
+  0% {
+    width: 0;
+  }
+
+  100% {
+    width: 41.2%;
+  }
+}

src/components/landing/Echo/index.tsx

@@ -1,6 +1,8 @@
+import Link from 'next/link';
+
 import classNames from 'classnames/bind';
 
-import { GAME_NAME_LIST_EN } from '@/constants';
+import { GAME_NAME_LIST_EN, PAGE_PATHS } from '@/constants';
 
 import useMouseMoveEffect from '@/hooks/useMouseMoveEffect';
 
@@ -9,11 +11,12 @@ import styles from './Echo.module.scss';
 const cx = classNames.bind(styles);
 
 const Echo = () => {
-  const { containerRef, elementRef } = useMouseMoveEffect(8);
+  const { containerRef, elementRef, secondElementRef, reverseElementRef } = useMouseMoveEffect(8);
+
   return (
     <section ref={containerRef} className={cx('container')}>
       <div className={cx('echo-shadow')}></div>
-      <div ref={elementRef} className={cx('echo')}></div>
+      <div ref={reverseElementRef} className={cx('echo')}></div>
       <div className={cx('side-scroll', 'left')}>
         <ul className={cx('scroll-content', 'left')}>
           {GAME_NAME_LIST_EN.map((gameName, index) => (
@@ -34,11 +37,22 @@ const Echo = () => {
           ))}
         </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
+      <div>
+        <h2 ref={elementRef} className={cx('landing-text', 'main')}>
+          BEST TEAMWORK
+        </h2>
+        <h2 ref={secondElementRef} className={cx('landing-text', 'sub')}>
+          IT&apos;s UP TO YOU
+        </h2>
+      </div>
+      <button className={cx('button-start')}>
+        <Link href={PAGE_PATHS.mainList}>
+          Get Started
+          <div className={cx('button-line')}></div>
+        </Link>
       </button>
+      <div className={cx('frame')}></div>
+      <div className={cx('frame-line')}></div>
     </section>
   );
 };