Merge pull request #60 from KWcapstone/59-feat-스플래시-페이지-애니메이션-작업-완성

59 feat 스플래시 페이지 애니메이션 작업 완성

Author: Eunjin03

src/assets/imgs/common/mainImage.png

@@ -1,3 +1,53 @@
+@mixin keyframe($name) {
+  // #{}는 템플릿 리터럴과 비슷한 역할을 한다. 인자를 쿼리명으로 받는다.
+  @keyframes #{$name} {
+    @content;
+  }
+}
+
+@include keyframe(appear) {
+  from {
+    opacity: 0;
+    scale: 0.3;
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
+}
+
+@include keyframe(appear_x) {
+  from {
+    opacity: 0;
+    transform: translateX(-100px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@include keyframe(appear_y) {
+  from {
+    opacity: 0;
+    transform: translateY(150px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@mixin animation(
+  $name,
+  $timingFunction: linear,
+  $animationRange: "entry 0% cover 40%"
+) {
+  animation: #{$name} $timingFunction;
+  animation-timeline: view();
+  animation-range: #{$animationRange};
+}
+
 @mixin size($width: null, $height: null) {
   $width_attr: width, max, min;
   $height_attr: height, max, min;

src/assets/imgs/common/splash_keyword1.svg

@@ -1,19 +1,27 @@
-import Navbar from "@/views/splash/components/Navbar";
-
+// style
 import "@/views/splash/style/splash.sass";
 import "@/views/components/style/modal.sass";
+import splashIcon from "@/assets/imgs/common/splashIcon.svg";
+import mainImage from "@/assets/imgs/common/splash_main_img.svg";
+import solarSystem from "@/assets/imgs/common/splash_solarSystem.svg";
+import keyword1 from "@/assets/imgs/common/splash_keyword1.svg";
+import keyword2 from "@/assets/imgs/common/splash_keyword2.svg";
+import keyword3 from "@/assets/imgs/common/splash_keyword3.svg";
+import keyword4 from "@/assets/imgs/common/splash_keyword4.svg";
+import keyword5 from "@/assets/imgs/common/splash_keyword5.svg";
 
+// library
 import { useState, useEffect, useRef } from "react";
 
+// component
+import Navbar from "@/views/splash/components/Navbar";
 import LoginModal from "@/views/splash/components/LoginModal";
 import SignupModal from "@/views/splash/components/SignupModal";
 import AgreeModal from "@/views/splash/components/AgreeModal";
 import PasswordResetModal from "@/views/splash/components/PasswordResetModal";
-import { getTest } from "@/api/common/common";
 
-import splashIcon from "@/assets/imgs/common/splashIcon.svg";
-import mainImage from "@/assets/imgs/common/mainImage.svg";
-import solarSystem from "@/assets/imgs/common/solarSystem.svg";
+// api
+import { getTest } from "@/api/common/common";
 
 const SplashPage = () => {
   type ModalType = "login" | "signup" | "agree" | "resetPw" | null;
@@ -133,8 +141,14 @@ const SplashPage = () => {
               <img
                 src={solarSystem}
                 alt="solarSystem"
-                className="spacial-img-img"
+                className="spacial-solar-img"
               />
+
+              <img src={keyword1} alt="keyword1" className="keyword1" />
+              <img src={keyword2} alt="keyword2" className="keyword2" />
+              <img src={keyword3} alt="keyword3" className="keyword3" />
+              <img src={keyword4} alt="keyword4" className="keyword4" />
+              <img src={keyword5} alt="keyword5" className="keyword5" />
             </div>
           </div>
         </div>