Merge remote-tracking branch 'origin/main' into dev

src/components/Animation.tsx

@@ -0,0 +1,8 @@
+export const Animation = () => {
+  return (
+    <div className={`animation-container`}>
+      <div className="star" />
+      <div className="diary" />
+    </div>
+  );
+};

src/components/Home/Slogan.tsx

@@ -1,15 +1,22 @@
+import { Animation } from '@components/Animation.tsx';
+
 export const Slogan = (props: any) => {
   return (
-    <div className={`TILFont text-${props.color}-900`}>
-      <p className={`mb-3 inline-block bg-gradient-to-r from-${props.color}-300 to-white text-3xl`}>
-        <span className="text-6xl">TIL</span>을 쓰지 않으면
-      </p>
-      <div></div>
-      <p className={`inline-block bg-gradient-to-r from-${props.color}-300 to-white text-3xl`}>
-        <span className="text-6xl">나</span>의 하루는 <span className="text-6xl">끝</span>
-        나지 않는다.
-      </p>
-      <p className="text-lg">TIL이란 ? Today I Learned !</p>
+    <div className={'slogan-container'}>
+      <div className={`TILFont text-${props.color}-900`}>
+        <p
+          className={`mb-3 inline-block bg-gradient-to-r from-${props.color}-300 to-white text-3xl`}
+        >
+          <span className="text-6xl">TIL</span>을 쓰지 않으면
+        </p>
+        <div></div>
+        <p className={`inline-block bg-gradient-to-r from-${props.color}-300 to-white text-3xl`}>
+          <span className="text-6xl">나</span>의 하루는 <span className="text-6xl">끝</span>
+          나지 않는다.
+        </p>
+        <p className="text-lg">TIL이란 ? Today I Learned !</p>
+      </div>
+      <Animation />
     </div>
   );
 };

src/globals.css

@@ -89,6 +89,10 @@
   @apply fixed bottom-[24px] right-[24px] z-50 flex flex-row gap-x-2;
 }
 
+.slogan-container {
+  @apply flex flex-row justify-center w-[800px] h-[150px]
+}
+
 .profileImg {
   transition: 1.5s;
 }
@@ -241,3 +245,65 @@ button:hover .cock-button-img {
 .highlight-effect {
   animation: highContrastTwinkle 2s ease-in-out infinite;
 }
+
+/* slogan 애니메이션 */
+.animation-container {
+  @apply rounded w-[400px] overflow-hidden
+}
+
+.star {
+  animation: star-move 15s infinite;
+  @apply relative z-10 mx-auto w-[100px] h-[100px] bg-cover
+}
+
+.diary {
+  animation: diary-move 15s infinite;
+  @apply relative z-0 mx-auto w-[100px] h-[100px] bg-cover
+}
+
+.animation-container .star {
+  background-image: url('src/assets/image/logo-with-pen.png');
+}
+
+.animation-container .diary {
+  background-image: url('src/assets/image/yellow-diary.png')
+}
+
+@keyframes star-move {
+  0% {
+    transform: translateX(-200px) translateY(200px) rotate(-30deg);
+  }
+  30% {
+    transform: translateX(0px) translateY(0px) rotate(0deg);
+  }
+  40% {
+    transform: translateX(10px)
+  }
+  50% {
+    transform: translateX(-10px)
+  }
+  60% {
+    transform: translateX(10px)
+  }
+  70% {
+    transform: translateX(0px) translateY(0px) rotate(0deg);
+  }
+  100% {
+    transform: translateX(200px) translateY(200px) rotate(30deg);
+  }
+}
+
+@keyframes diary-move {
+  0% {
+    transform: translateX(400px) translateY(-100px);
+  }
+  30% {
+    transform: translateX(30px) translateY(-100px);
+  }
+  70% {
+    transform: translateX(30px) translateY(-100px);
+  }
+  100% {
+    transform: translateX(-400px) translateY(-100px);
+  }
+}