Merge pull request #296 from boostcampwm-2024/Feature/#282_인터랙티브_컴포넌트_추가

Feature/#282 인터랙티브 컴포넌트 추가
boostcampwm-2024 · Dec 4, 2024 · 50449c6 · 50449c6
2 parents aee3d81 + 2c8974d
commit 50449c6
Show file tree

Hide file tree

Showing 3 changed files with 149 additions and 19 deletions.
diff --git a/@noctaCrdt/Interfaces.ts b/@noctaCrdt/Interfaces.ts
@@ -15,7 +15,15 @@ export type ElementType =
   | "blockquote"
   | "hr";
 
-export type AnimationType = "none" | "highlight" | "gradation";
+export type AnimationType =
+  | "none"
+  | "highlight"
+  | "rainbow"
+  | "fadeIn"
+  | "slideIn"
+  | "pulse"
+  | "gradation"
+  | "bounce";
 
 export type TextStyleType = "bold" | "italic" | "underline" | "strikethrough";
 

diff --git a/client/src/constants/option.ts b/client/src/constants/option.ts
@@ -22,7 +22,12 @@ export const OPTION_CATEGORIES = {
     options: [
       { id: "none", label: "없음" },
       { id: "highlight", label: "하이라이트" },
+      { id: "rainbow", label: "레인보우" },
       { id: "gradation", label: "그라데이션" },
+      { id: "fadeIn", label: "페이드 인" },
+      { id: "slideIn", label: "슬라이드 인" },
+      { id: "pulse", label: "펄스" },
+      { id: "bounce", label: "바운스" },
     ] as { id: AnimationType; label: string }[],
   },
   DUPLICATE: {

diff --git a/client/src/features/editor/components/block/Block.animation.ts b/client/src/features/editor/components/block/Block.animation.ts
@@ -1,46 +1,60 @@
+const defaultState = {
+  background: "transparent",
+  opacity: 1,
+  x: 0,
+  y: 0,
+  scale: 1,
+  backgroundSize: "100% 100%",
+  backgroundPosition: "0 0",
+};
+
 const none = {
   initial: {
-    background: "transparent",
+    ...defaultState,
   },
   animate: {
-    background: "transparent",
+    ...defaultState,
   },
 };
 
 const highlight = {
   initial: {
-    background: `linear-gradient(to right, 
-          #BFBFFF70 0%, 
-          #BFBFFF70 0%, 
-          transparent 0%, 
-          transparent 100%
-        )`,
+    ...defaultState,
+    background: `linear-gradient(to right,
+      #BFBFFF70 0%,
+      #BFBFFF70 0%,
+      transparent 0%,
+      transparent 100%
+    )`,
   },
   animate: {
-    background: `linear-gradient(to right, 
-          #BFBFFF70 0%, 
-          #BFBFFF70 100%, 
-          transparent 100%, 
-          transparent 100%
-        )`,
+    ...defaultState,
+    background: `linear-gradient(to right,
+      #BFBFFF70 0%,
+      #BFBFFF70 100%,
+      transparent 100%,
+      transparent 100%
+    )`,
     transition: {
       duration: 1,
       ease: "linear",
     },
   },
 };
 
-const gradation = {
+const rainbow = {
   initial: {
+    ...defaultState,
     background: `linear-gradient(to right,
-      #BFBFFF 0%,    
-      #B0E2FF 50%,   
-      #FFE4E1 100%   
+      #BFBFFF 0%,
+      #B0E2FF 50%,
+      #FFE4E1 100%
     )`,
     backgroundSize: "300% 100%",
     backgroundPosition: "100% 0",
   },
   animate: {
+    ...defaultState,
     background: [
       `linear-gradient(to right,
         #BFBFFF 0%,
@@ -63,6 +77,7 @@ const gradation = {
         #FFE4E1 100%
       )`,
     ],
+    backgroundSize: "300% 100%",
     transition: {
       duration: 3,
       ease: "linear",
@@ -72,8 +87,110 @@ const gradation = {
   },
 };
 
+const fadeIn = {
+  initial: {
+    ...defaultState,
+    opacity: 0,
+  },
+  animate: {
+    ...defaultState,
+    opacity: 1,
+    transition: {
+      duration: 1,
+      ease: "easeOut",
+    },
+  },
+};
+
+const slideIn = {
+  initial: {
+    ...defaultState,
+    x: -20,
+    opacity: 0,
+  },
+  animate: {
+    ...defaultState,
+    x: 0,
+    opacity: 1,
+    transition: {
+      duration: 0.5,
+      ease: "easeOut",
+    },
+  },
+};
+
+const pulse = {
+  initial: {
+    ...defaultState,
+    scale: 1,
+  },
+  animate: {
+    ...defaultState,
+    scale: [1, 1.02, 1],
+    transition: {
+      duration: 1.5,
+      ease: "easeInOut",
+      repeat: Infinity,
+    },
+  },
+};
+
+const gradation = {
+  initial: {
+    ...defaultState,
+    background: `linear-gradient(
+      90deg,
+      rgba(255,255,255,0) 0%,
+      #BFBFFF80 70%,
+      rgba(255,255,255,0) 100%
+    )`,
+    backgroundSize: "200% 100%",
+    backgroundPosition: "100% 0",
+  },
+  animate: {
+    ...defaultState,
+    background: `linear-gradient(
+      90deg,
+      rgba(255,255,255,0) 0%,
+      #BFBFFF80 70%,
+      rgba(255,255,255,0) 100%
+    )`,
+    backgroundSize: "200% 100%",
+    backgroundPosition: ["100% 0", "-100% 0"],
+    transition: {
+      duration: 2,
+      ease: "linear",
+      repeat: Infinity,
+    },
+  },
+};
+
+const bounce = {
+  initial: {
+    ...defaultState,
+    y: 0,
+  },
+  animate: {
+    ...defaultState,
+    y: [-2, 2, -2],
+    transition: {
+      duration: 1,
+      ease: "easeInOut",
+      repeat: Infinity,
+    },
+  },
+};
+
 export const blockAnimation = {
   none,
   highlight,
+  rainbow,
+  fadeIn,
+  slideIn,
+  pulse,
   gradation,
+  bounce,
 };
+
+// types.ts
+export type AnimationType = keyof typeof blockAnimation;