From 3b8c16977c77de472e4c2139a714d64646aa3d0f Mon Sep 17 00:00:00 2001 From: lybell-art Date: Mon, 29 Jul 2024 14:17:36 +0900 Subject: [PATCH 01/16] =?UTF-8?q?[refactor]=20=EC=9D=B8=ED=84=B0=EB=9E=99?= =?UTF-8?q?=EC=85=98=20=EC=84=A4=EB=AA=85=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- {src/assets => public/icons}/property1.svg | 0 {src/assets => public/icons}/property2.svg | 0 {src/assets => public/icons}/property3.svg | 0 {src/assets => public/icons}/property4.svg | 0 {src/assets => public/icons}/property5.svg | 0 src/interactions/InteractionDescription.jsx | 19 ++++++++++++++++ .../UnivasalIslandInteraction.jsx | 22 ++++++------------- 7 files changed, 26 insertions(+), 15 deletions(-) rename {src/assets => public/icons}/property1.svg (100%) rename {src/assets => public/icons}/property2.svg (100%) rename {src/assets => public/icons}/property3.svg (100%) rename {src/assets => public/icons}/property4.svg (100%) rename {src/assets => public/icons}/property5.svg (100%) create mode 100644 src/interactions/InteractionDescription.jsx diff --git a/src/assets/property1.svg b/public/icons/property1.svg similarity index 100% rename from src/assets/property1.svg rename to public/icons/property1.svg diff --git a/src/assets/property2.svg b/public/icons/property2.svg similarity index 100% rename from src/assets/property2.svg rename to public/icons/property2.svg diff --git a/src/assets/property3.svg b/public/icons/property3.svg similarity index 100% rename from src/assets/property3.svg rename to public/icons/property3.svg diff --git a/src/assets/property4.svg b/public/icons/property4.svg similarity index 100% rename from src/assets/property4.svg rename to public/icons/property4.svg diff --git a/src/assets/property5.svg b/public/icons/property5.svg similarity index 100% rename from src/assets/property5.svg rename to public/icons/property5.svg diff --git a/src/interactions/InteractionDescription.jsx b/src/interactions/InteractionDescription.jsx new file mode 100644 index 00000000..af738fe8 --- /dev/null +++ b/src/interactions/InteractionDescription.jsx @@ -0,0 +1,19 @@ +function InteractionDescription({order, title, description, directive}) +{ + return
+ {order} +
+

+ {title} +

+

+ {description} +

+

+ {directive} +

+
+
+} + +export default InteractionDescription; \ No newline at end of file diff --git a/src/interactions/univasalIsland/UnivasalIslandInteraction.jsx b/src/interactions/univasalIsland/UnivasalIslandInteraction.jsx index 1e68d81c..e8722365 100644 --- a/src/interactions/univasalIsland/UnivasalIslandInteraction.jsx +++ b/src/interactions/univasalIsland/UnivasalIslandInteraction.jsx @@ -1,8 +1,8 @@ import { useImperativeHandle } from "react"; +import InteractionDescription from "../InteractionDescription.jsx"; import Phone from "./Phone.jsx"; import useIslandDrag from "./useIslandDrag.js"; -import orderIcon from "@/assets/property3.svg"; import seat from "./assets/seat.png"; import univasalIsland1x from "./assets/univasalIsland@1x.png"; import univasalIsland2x from "./assets/univasalIsland@2x.png"; @@ -44,20 +44,12 @@ function UnivasalIslandInteraction({ interactCallback, $ref }) { return (
-
- 3 -
-

- 나에게 맞게, 자유자재로 -

-

- 새로워진 The new IONIQ 5의 유니버설 아일랜드는 어떤 모습일까요? -

-

- 유니버설 아일랜드를 드래그하여 이동시키고 스마트폰을 충전해보세요! -

-
-
+
Date: Mon, 29 Jul 2024 14:20:01 +0900 Subject: [PATCH 02/16] =?UTF-8?q?[refactor]=20=EA=B3=A0=EC=86=8D=EC=B6=A9?= =?UTF-8?q?=EC=A0=84=20=EC=9D=B8=ED=84=B0=EB=9E=99=EC=85=98=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20=EC=9D=B8=ED=84=B0?= =?UTF-8?q?=EB=9E=99=EC=85=98=20=EC=84=A4=EB=AA=85=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../fastCharge/FastChargeInteraction.jsx | 22 ++++++------------- 1 file changed, 7 insertions(+), 15 deletions(-) diff --git a/src/interactions/fastCharge/FastChargeInteraction.jsx b/src/interactions/fastCharge/FastChargeInteraction.jsx index d125b6fe..25881ca4 100644 --- a/src/interactions/fastCharge/FastChargeInteraction.jsx +++ b/src/interactions/fastCharge/FastChargeInteraction.jsx @@ -1,6 +1,6 @@ import { useImperativeHandle } from "react"; +import InteractionDescription from "../InteractionDescription.jsx"; import BatteryProgressBar from "./BatteryProgressBar.jsx"; -import orderIcon from "@/assets/property2.svg"; import dialSvg from "./timer.svg"; import useDialDrag from "./useDialDrag.js"; @@ -35,20 +35,12 @@ function FastChargeInteraction({ interactCallback, $ref }) { return (
-
- 2 -
-

- 불편함 없이, 더 빠르게 -

-

- The new IONIQ 5의 배터리를 충전하는 데 얼마만큼의 시간이 걸릴까요? -

-

- 다이얼을 돌려 충전에 필요한 시간을 확인해보세요! -

-
-
+
From fdb9c39f7651521862cd9a001396ca7d3287b9fb Mon Sep 17 00:00:00 2001 From: lybell-art Date: Mon, 29 Jul 2024 14:25:25 +0900 Subject: [PATCH 03/16] =?UTF-8?q?[refactor]=20=EC=9D=B8=ED=84=B0=EB=9E=99?= =?UTF-8?q?=EC=85=98=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=8F=B4?= =?UTF-8?q?=EB=8D=94=20=EA=B5=AC=EC=A1=B0=20=EC=96=91=EC=8B=9D=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/interactions/fastCharge/{ => assets}/timer.svg | 0 .../fastCharge/{FastChargeInteraction.jsx => index.jsx} | 2 +- .../univasalIsland/{UnivasalIslandInteraction.jsx => index.jsx} | 0 3 files changed, 1 insertion(+), 1 deletion(-) rename src/interactions/fastCharge/{ => assets}/timer.svg (100%) rename src/interactions/fastCharge/{FastChargeInteraction.jsx => index.jsx} (98%) rename src/interactions/univasalIsland/{UnivasalIslandInteraction.jsx => index.jsx} (100%) diff --git a/src/interactions/fastCharge/timer.svg b/src/interactions/fastCharge/assets/timer.svg similarity index 100% rename from src/interactions/fastCharge/timer.svg rename to src/interactions/fastCharge/assets/timer.svg diff --git a/src/interactions/fastCharge/FastChargeInteraction.jsx b/src/interactions/fastCharge/index.jsx similarity index 98% rename from src/interactions/fastCharge/FastChargeInteraction.jsx rename to src/interactions/fastCharge/index.jsx index 25881ca4..751f8c18 100644 --- a/src/interactions/fastCharge/FastChargeInteraction.jsx +++ b/src/interactions/fastCharge/index.jsx @@ -1,7 +1,7 @@ import { useImperativeHandle } from "react"; import InteractionDescription from "../InteractionDescription.jsx"; import BatteryProgressBar from "./BatteryProgressBar.jsx"; -import dialSvg from "./timer.svg"; +import dialSvg from "./assets/timer.svg"; import useDialDrag from "./useDialDrag.js"; const MAX_MINUTE = 30; diff --git a/src/interactions/univasalIsland/UnivasalIslandInteraction.jsx b/src/interactions/univasalIsland/index.jsx similarity index 100% rename from src/interactions/univasalIsland/UnivasalIslandInteraction.jsx rename to src/interactions/univasalIsland/index.jsx From 363f62e6d2f33621e774532e4fc0baf00d7364b0 Mon Sep 17 00:00:00 2001 From: lybell-art Date: Mon, 29 Jul 2024 14:31:49 +0900 Subject: [PATCH 04/16] =?UTF-8?q?[feat]=20=EC=A3=BC=ED=96=89=EA=B1=B0?= =?UTF-8?q?=EB=A6=AC=20=EC=9D=B8=ED=84=B0=EB=9E=99=EC=85=98=20=EC=84=A4?= =?UTF-8?q?=EB=AA=85=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/interactions/distanceDriven/index.jsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 src/interactions/distanceDriven/index.jsx diff --git a/src/interactions/distanceDriven/index.jsx b/src/interactions/distanceDriven/index.jsx new file mode 100644 index 00000000..c9142527 --- /dev/null +++ b/src/interactions/distanceDriven/index.jsx @@ -0,0 +1,15 @@ +import InteractionDescription from "../InteractionDescription.jsx"; + +function DistanceDrivenInteraction() +{ + return
+ +
+} + +export default DistanceDrivenInteraction; \ No newline at end of file From 64856056773e19abe3e23b200eb3fc42d10adf70 Mon Sep 17 00:00:00 2001 From: lybell-art Date: Mon, 29 Jul 2024 14:45:24 +0900 Subject: [PATCH 05/16] =?UTF-8?q?[design]=20=ED=95=98=EB=8B=A8=EB=B6=80=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/interactions/distanceDriven/index.jsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/interactions/distanceDriven/index.jsx b/src/interactions/distanceDriven/index.jsx index c9142527..9e0f7411 100644 --- a/src/interactions/distanceDriven/index.jsx +++ b/src/interactions/distanceDriven/index.jsx @@ -9,6 +9,15 @@ function DistanceDrivenInteraction() description="The new IONIQ 5는 한 번의 충전으로 얼마나 멀리 주행할 수 있을까요?" directive="가운데 점을 드래그하여 최대 주행거리를 예측해보세요!" /> +
+
+
+

+ + {0} + + km +

} From 4b0c5fe48956a204a0ada0b0d08665a6684e3487 Mon Sep 17 00:00:00 2001 From: lybell-art Date: Mon, 29 Jul 2024 14:56:04 +0900 Subject: [PATCH 06/16] =?UTF-8?q?[feat]=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C?= =?UTF-8?q?=ED=8E=84=EC=8A=A4=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4?= =?UTF-8?q?=EC=85=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/interactions/distanceDriven/index.jsx | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/interactions/distanceDriven/index.jsx b/src/interactions/distanceDriven/index.jsx index 9e0f7411..0d786576 100644 --- a/src/interactions/distanceDriven/index.jsx +++ b/src/interactions/distanceDriven/index.jsx @@ -2,6 +2,21 @@ import InteractionDescription from "../InteractionDescription.jsx"; function DistanceDrivenInteraction() { + + function pulseAnimation(e) + { + e.currentTarget.animate( [ + {transform: "scale(1)", opacity: 0.5}, + {transform: "scale(16)", opacity: 0} + ], + { + duration: 300, + iteractions: 1, + easing: "ease-out", + pseudoElement: "::before" + } ); + } + return
-
+

From aa365df063bd26e5002ef1fccfebfd049abb8d57 Mon Sep 17 00:00:00 2001 From: lybell-art Date: Mon, 29 Jul 2024 15:17:09 +0900 Subject: [PATCH 07/16] =?UTF-8?q?[feat]=20x,y=20=EC=83=81=ED=83=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EB=9D=BC?= =?UTF-8?q?=EC=9D=B8=20=EA=B7=B8=EB=A6=AC=EA=B8=B0,=20=ED=85=8D=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EB=B3=80=EA=B2=BD=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/interactions/distanceDriven/index.jsx | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/interactions/distanceDriven/index.jsx b/src/interactions/distanceDriven/index.jsx index 0d786576..94dcd95a 100644 --- a/src/interactions/distanceDriven/index.jsx +++ b/src/interactions/distanceDriven/index.jsx @@ -1,7 +1,15 @@ import InteractionDescription from "../InteractionDescription.jsx"; +//import usePointDrag from "./usePointDrag.jsx"; function DistanceDrivenInteraction() { + //const { x, y, reset } = usePointDrag(); + const x= 160; + const y=270; + + const circleStyle = { + transform : `translate(${x}px, ${y}px)` + }; function pulseAnimation(e) { @@ -25,11 +33,17 @@ function DistanceDrivenInteraction() directive="가운데 점을 드래그하여 최대 주행거리를 예측해보세요!" />

-
+
+ + +

- {0} + {Math.round(Math.hypot(x, y) / 3)} km

From 3b8081ad1614eba7dfd47dca98a23088f2229344 Mon Sep 17 00:00:00 2001 From: lybell-art Date: Mon, 29 Jul 2024 16:12:51 +0900 Subject: [PATCH 08/16] =?UTF-8?q?[feat]=20=EB=93=9C=EB=9E=98=EA=B7=B8?= =?UTF-8?q?=EB=A1=9C=20=EC=BB=A4=EC=84=9C=20=EC=9B=80=EC=A7=81=EC=9D=B4?= =?UTF-8?q?=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/interactions/distanceDriven/index.jsx | 12 ++-- .../distanceDriven/usePointDrag.js | 62 +++++++++++++++++++ 2 files changed, 68 insertions(+), 6 deletions(-) create mode 100644 src/interactions/distanceDriven/usePointDrag.js diff --git a/src/interactions/distanceDriven/index.jsx b/src/interactions/distanceDriven/index.jsx index 94dcd95a..963a28f9 100644 --- a/src/interactions/distanceDriven/index.jsx +++ b/src/interactions/distanceDriven/index.jsx @@ -1,14 +1,12 @@ import InteractionDescription from "../InteractionDescription.jsx"; -//import usePointDrag from "./usePointDrag.jsx"; +import usePointDrag from "./usePointDrag.js"; function DistanceDrivenInteraction() { - //const { x, y, reset } = usePointDrag(); - const x= 160; - const y=270; + const { x, y, reset, eventHandler } = usePointDrag(); const circleStyle = { - transform : `translate(${x}px, ${y}px)` + transform : `translate(${x}px, ${y}px)`, }; function pulseAnimation(e) @@ -36,8 +34,10 @@ function DistanceDrivenInteraction()
- +
diff --git a/src/interactions/distanceDriven/usePointDrag.js b/src/interactions/distanceDriven/usePointDrag.js new file mode 100644 index 00000000..437554da --- /dev/null +++ b/src/interactions/distanceDriven/usePointDrag.js @@ -0,0 +1,62 @@ +import { useState, useEffect, useRef } from "react"; + + +const voidImage = new Image(); +voidImage.src = + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC"; + +function usePointDrag() +{ + const isDragging = useRef(false); + const prevState = useRef({x: 0, y: 0, mouseX: 0, mouseY: 0}); + const [x, setX] = useState(0); + const [y, setY] = useState(0); + + function onDragStart(e) + { + isDragging.current = true; + prevState.current.mouseX = e.clientX; + prevState.current.mouseY = e.clientY; + prevState.current.x = x; + prevState.current.y = y; + + e.dataTransfer.dropEffect = "none"; + e.dataTransfer.effectAllowed = "none"; + e.dataTransfer.setDragImage(voidImage, 0, 0); + } + function onDragOver(e) + { + e.preventDefault(); + } + function onDrag(e) + { + e.preventDefault(); + if(!isDragging.current) return; + if(e.screenX === 0 && e.screenY === 0) return; + setX( prevState.current.x + e.clientX - prevState.current.mouseX ); + setY( prevState.current.y + e.clientY - prevState.current.mouseY ); + } + function onDragEnd(e) + { + e.preventDefault(); + if(!isDragging.current) return; + isDragging.current = false; + } + + return { + x, + y, + reset() { + setX(0); + setY(0); + }, + eventHandler: { + onDragStart, + onDragOver, + onDrag, + onDragEnd + } + } +} + +export default usePointDrag; \ No newline at end of file From 0762542c6ab5c19e889ffc82c7c2f9c69ac11eb5 Mon Sep 17 00:00:00 2001 From: lybell-art Date: Mon, 29 Jul 2024 16:19:41 +0900 Subject: [PATCH 09/16] =?UTF-8?q?[fix]=20=EB=A7=88=EC=9A=B0=EC=8A=A4?= =?UTF-8?q?=EB=A5=BC=20=EB=88=84=EB=A5=B4=EA=B3=A0=20=EB=93=9C=EB=9E=98?= =?UTF-8?q?=EA=B7=B8=ED=95=A0=20=EC=8B=9C=20=EC=BB=A4=EC=84=9C=EA=B0=80=20?= =?UTF-8?q?=EB=81=8A=EA=B2=A8=EC=84=9C=20=EC=9D=B4=EB=8F=99=ED=95=98?= =?UTF-8?q?=EB=8A=94=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/interactions/distanceDriven/index.jsx | 9 +++-- .../distanceDriven/usePointDrag.js | 38 ++++++------------- 2 files changed, 16 insertions(+), 31 deletions(-) diff --git a/src/interactions/distanceDriven/index.jsx b/src/interactions/distanceDriven/index.jsx index 963a28f9..78649f48 100644 --- a/src/interactions/distanceDriven/index.jsx +++ b/src/interactions/distanceDriven/index.jsx @@ -3,7 +3,7 @@ import usePointDrag from "./usePointDrag.js"; function DistanceDrivenInteraction() { - const { x, y, reset, eventHandler } = usePointDrag(); + const { x, y, reset, onPointerDown } = usePointDrag(); const circleStyle = { transform : `translate(${x}px, ${y}px)`, @@ -32,10 +32,11 @@ function DistanceDrivenInteraction() />
{ + onPointerDown(e); + pulseAnimation(e); + }} style={circleStyle} - draggable="true" - {...eventHandler} /> diff --git a/src/interactions/distanceDriven/usePointDrag.js b/src/interactions/distanceDriven/usePointDrag.js index 437554da..f4c1a83f 100644 --- a/src/interactions/distanceDriven/usePointDrag.js +++ b/src/interactions/distanceDriven/usePointDrag.js @@ -1,9 +1,5 @@ -import { useState, useEffect, useRef } from "react"; - - -const voidImage = new Image(); -voidImage.src = - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAtJREFUGFdjYAACAAAFAAGq1chRAAAAAElFTkSuQmCC"; +import { useState, useRef, useCallback } from "react"; +import useMountDragEvent from "@/common/useMountDragEvent.js"; function usePointDrag() { @@ -19,29 +15,22 @@ function usePointDrag() prevState.current.mouseY = e.clientY; prevState.current.x = x; prevState.current.y = y; - - e.dataTransfer.dropEffect = "none"; - e.dataTransfer.effectAllowed = "none"; - e.dataTransfer.setDragImage(voidImage, 0, 0); } function onDragOver(e) { e.preventDefault(); } - function onDrag(e) - { - e.preventDefault(); + const onDrag = useCallback(function(mouse) { if(!isDragging.current) return; - if(e.screenX === 0 && e.screenY === 0) return; - setX( prevState.current.x + e.clientX - prevState.current.mouseX ); - setY( prevState.current.y + e.clientY - prevState.current.mouseY ); - } - function onDragEnd(e) - { - e.preventDefault(); + setX( prevState.current.x + mouse.x - prevState.current.mouseX ); + setY( prevState.current.y + mouse.y - prevState.current.mouseY ); + }, []); + const onDragEnd = useCallback(function(e) { if(!isDragging.current) return; isDragging.current = false; - } + }); + + useMountDragEvent(onDrag, onDragEnd); return { x, @@ -50,12 +39,7 @@ function usePointDrag() setX(0); setY(0); }, - eventHandler: { - onDragStart, - onDragOver, - onDrag, - onDragEnd - } + onPointerDown: onDragStart } } From 3b14d2dc6edfeca61e6f78eb05526384843b5247 Mon Sep 17 00:00:00 2001 From: lybell-art Date: Mon, 29 Jul 2024 16:28:58 +0900 Subject: [PATCH 10/16] =?UTF-8?q?[fix]=20=EA=B3=A0=EC=86=8D=EC=B6=A9?= =?UTF-8?q?=EC=A0=84=20=EB=A6=AC=EC=85=8B=ED=9B=84=20=EB=93=9C=EB=9E=98?= =?UTF-8?q?=EA=B7=B8=EC=8B=9C=20=EC=9D=B4=EC=A0=84=20=EC=9C=84=EC=B9=98?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=8B=9C=EC=9E=91=EB=90=98=EB=8A=94=20?= =?UTF-8?q?=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/interactions/distanceDriven/index.jsx | 10 +++++++++- src/interactions/fastCharge/useDialDrag.js | 6 +++++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/interactions/distanceDriven/index.jsx b/src/interactions/distanceDriven/index.jsx index 78649f48..2fc1a445 100644 --- a/src/interactions/distanceDriven/index.jsx +++ b/src/interactions/distanceDriven/index.jsx @@ -1,7 +1,8 @@ +import { useImperativeHandle } from "react"; import InteractionDescription from "../InteractionDescription.jsx"; import usePointDrag from "./usePointDrag.js"; -function DistanceDrivenInteraction() +function DistanceDrivenInteraction({ interactCallback, $ref }) { const { x, y, reset, onPointerDown } = usePointDrag(); @@ -23,6 +24,12 @@ function DistanceDrivenInteraction() } ); } + useImperativeHandle( + $ref, + () => ({reset}), + [reset], + ); + return
{ onPointerDown(e); pulseAnimation(e); + interactCallback?.(); }} style={circleStyle} /> diff --git a/src/interactions/fastCharge/useDialDrag.js b/src/interactions/fastCharge/useDialDrag.js index 388cfac8..17f74c82 100644 --- a/src/interactions/fastCharge/useDialDrag.js +++ b/src/interactions/fastCharge/useDialDrag.js @@ -56,7 +56,11 @@ function useDialDrag() { setIsDrag(true); } - const resetAngle = useCallback(() => setAngle(0), []); + const resetAngle = useCallback(() => { + setAngle(0); + angleCache.current = 0; + prevAngle.current = 0; + }, []); const style = { transform: `rotate(${angle}rad)`, From 6526e262eace8503be27088be6bf2f0facb61bc0 Mon Sep 17 00:00:00 2001 From: lybell-art Date: Mon, 29 Jul 2024 16:49:34 +0900 Subject: [PATCH 11/16] =?UTF-8?q?[chore]=20=EB=A6=B0=ED=8A=B8=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/interactions/InteractionDescription.jsx | 29 ++--- src/interactions/distanceDriven/index.jsx | 114 ++++++++++-------- .../distanceDriven/usePointDrag.js | 70 +++++------ src/interactions/fastCharge/index.jsx | 2 +- src/interactions/univasalIsland/index.jsx | 2 +- 5 files changed, 109 insertions(+), 108 deletions(-) diff --git a/src/interactions/InteractionDescription.jsx b/src/interactions/InteractionDescription.jsx index af738fe8..626038e1 100644 --- a/src/interactions/InteractionDescription.jsx +++ b/src/interactions/InteractionDescription.jsx @@ -1,19 +1,16 @@ -function InteractionDescription({order, title, description, directive}) -{ - return
- {order} -
-

- {title} -

-

- {description} -

-

- {directive} -

+function InteractionDescription({ order, title, description, directive }) { + return ( +
+ {order} +
+

+ {title} +

+

{description}

+

{directive}

+
-
+ ); } -export default InteractionDescription; \ No newline at end of file +export default InteractionDescription; diff --git a/src/interactions/distanceDriven/index.jsx b/src/interactions/distanceDriven/index.jsx index 2fc1a445..369bdc78 100644 --- a/src/interactions/distanceDriven/index.jsx +++ b/src/interactions/distanceDriven/index.jsx @@ -2,61 +2,71 @@ import { useImperativeHandle } from "react"; import InteractionDescription from "../InteractionDescription.jsx"; import usePointDrag from "./usePointDrag.js"; -function DistanceDrivenInteraction({ interactCallback, $ref }) -{ - const { x, y, reset, onPointerDown } = usePointDrag(); +function DistanceDrivenInteraction({ interactCallback, $ref }) { + const { x, y, reset, onPointerDown } = usePointDrag(); - const circleStyle = { - transform : `translate(${x}px, ${y}px)`, - }; + const circleStyle = { + transform: `translate(${x}px, ${y}px)`, + }; - function pulseAnimation(e) - { - e.currentTarget.animate( [ - {transform: "scale(1)", opacity: 0.5}, - {transform: "scale(16)", opacity: 0} - ], - { - duration: 300, - iteractions: 1, - easing: "ease-out", - pseudoElement: "::before" - } ); - } + function pulseAnimation(e) { + e.currentTarget.animate( + [ + { transform: "scale(1)", opacity: 0.5 }, + { transform: "scale(16)", opacity: 0 }, + ], + { + duration: 300, + iteractions: 1, + easing: "ease-out", + pseudoElement: "::before", + }, + ); + } - useImperativeHandle( - $ref, - () => ({reset}), - [reset], - ); + useImperativeHandle($ref, () => ({ reset }), [reset]); - return
- -
-
{ - onPointerDown(e); - pulseAnimation(e); - interactCallback?.(); - }} - style={circleStyle} - /> - - - -
-

- - {Math.round(Math.hypot(x, y) / 3)} - - km -

-
+ return ( +
+ +
+
{ + onPointerDown(e); + pulseAnimation(e); + interactCallback?.(); + }} + style={circleStyle} + /> + + + +
+

+ + {Math.round(Math.hypot(x, y) / 3)} + + km +

+
+ ); } -export default DistanceDrivenInteraction; \ No newline at end of file +export default DistanceDrivenInteraction; diff --git a/src/interactions/distanceDriven/usePointDrag.js b/src/interactions/distanceDriven/usePointDrag.js index f4c1a83f..c341271f 100644 --- a/src/interactions/distanceDriven/usePointDrag.js +++ b/src/interactions/distanceDriven/usePointDrag.js @@ -1,46 +1,40 @@ import { useState, useRef, useCallback } from "react"; import useMountDragEvent from "@/common/useMountDragEvent.js"; -function usePointDrag() -{ - const isDragging = useRef(false); - const prevState = useRef({x: 0, y: 0, mouseX: 0, mouseY: 0}); - const [x, setX] = useState(0); - const [y, setY] = useState(0); +function usePointDrag() { + const isDragging = useRef(false); + const prevState = useRef({ x: 0, y: 0, mouseX: 0, mouseY: 0 }); + const [x, setX] = useState(0); + const [y, setY] = useState(0); - function onDragStart(e) - { - isDragging.current = true; - prevState.current.mouseX = e.clientX; - prevState.current.mouseY = e.clientY; - prevState.current.x = x; - prevState.current.y = y; - } - function onDragOver(e) - { - e.preventDefault(); - } - const onDrag = useCallback(function(mouse) { - if(!isDragging.current) return; - setX( prevState.current.x + mouse.x - prevState.current.mouseX ); - setY( prevState.current.y + mouse.y - prevState.current.mouseY ); - }, []); - const onDragEnd = useCallback(function(e) { - if(!isDragging.current) return; - isDragging.current = false; - }); + function onDragStart(e) { + isDragging.current = true; + prevState.current.mouseX = e.clientX; + prevState.current.mouseY = e.clientY; + prevState.current.x = x; + prevState.current.y = y; + } + const onDrag = useCallback(function (mouse) { + if (!isDragging.current) return; + setX(prevState.current.x + mouse.x - prevState.current.mouseX); + setY(prevState.current.y + mouse.y - prevState.current.mouseY); + }, []); + const onDragEnd = useCallback(function () { + if (!isDragging.current) return; + isDragging.current = false; + }, []); - useMountDragEvent(onDrag, onDragEnd); + useMountDragEvent(onDrag, onDragEnd); - return { - x, - y, - reset() { - setX(0); - setY(0); - }, - onPointerDown: onDragStart - } + return { + x, + y, + reset() { + setX(0); + setY(0); + }, + onPointerDown: onDragStart, + }; } -export default usePointDrag; \ No newline at end of file +export default usePointDrag; diff --git a/src/interactions/fastCharge/index.jsx b/src/interactions/fastCharge/index.jsx index 751f8c18..049a4dc8 100644 --- a/src/interactions/fastCharge/index.jsx +++ b/src/interactions/fastCharge/index.jsx @@ -35,7 +35,7 @@ function FastChargeInteraction({ interactCallback, $ref }) { return (
- - Date: Mon, 29 Jul 2024 17:09:09 +0900 Subject: [PATCH 12/16] =?UTF-8?q?[feat]=20=EB=B3=B4=EC=A1=B0=EA=B8=88=20?= =?UTF-8?q?=EC=9D=B8=ED=84=B0=EB=9E=99=EC=85=98=20=EA=B8=B0=EB=B3=B8?= =?UTF-8?q?=EB=8F=99=EC=9E=91=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/interactions/subsidy/assets/dollor.svg | 3 ++ src/interactions/subsidy/index.jsx | 38 ++++++++++++++++++++++ 2 files changed, 41 insertions(+) create mode 100644 src/interactions/subsidy/assets/dollor.svg create mode 100644 src/interactions/subsidy/index.jsx diff --git a/src/interactions/subsidy/assets/dollor.svg b/src/interactions/subsidy/assets/dollor.svg new file mode 100644 index 00000000..55578184 --- /dev/null +++ b/src/interactions/subsidy/assets/dollor.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/interactions/subsidy/index.jsx b/src/interactions/subsidy/index.jsx new file mode 100644 index 00000000..3a6b93ba --- /dev/null +++ b/src/interactions/subsidy/index.jsx @@ -0,0 +1,38 @@ +import { useState, useImperativeHandle } from "react"; +import dollor from "./assets/dollor.svg"; +import InteractionDescription from "../InteractionDescription.jsx"; + +function SubsidyInteraction({ interactCallback, $ref }) { + const [count, setCount] = useState(0); + + function onClick() + { + setCount( count=>count+1 ); + } + + useImperativeHandle($ref, () => ({ reset(){ + setCount(0); + } }), []); + + return ( +
+ +
+ $ +
+

+ + {count * 10} + + 만원 +

+
+ ); +} + +export default SubsidyInteraction; From 0282a8f0ac6151c0b29228e87ee686788a3cdc0b Mon Sep 17 00:00:00 2001 From: lybell-art Date: Mon, 29 Jul 2024 17:52:16 +0900 Subject: [PATCH 13/16] =?UTF-8?q?[feat]=20lottie=20=EC=95=A0=EB=8B=88?= =?UTF-8?q?=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 31 ++++++++++++++++++++++- package.json | 1 + src/interactions/subsidy/assets/coin.json | 1 + src/interactions/subsidy/index.jsx | 15 ++++++++--- 4 files changed, 43 insertions(+), 5 deletions(-) create mode 100644 src/interactions/subsidy/assets/coin.json diff --git a/package-lock.json b/package-lock.json index 271b030c..00c96b1a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1", + "react-lottie-player": "^2.1.0", "zustand": "^4.5.4" }, "devDependencies": { @@ -2776,7 +2777,6 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", - "dev": true, "license": "MIT" }, "node_modules/fast-glob": { @@ -3899,6 +3899,12 @@ "loose-envify": "cli.js" } }, + "node_modules/lottie-web": { + "version": "5.12.2", + "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz", + "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==", + "license": "MIT" + }, "node_modules/lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -4615,6 +4621,23 @@ "dev": true, "license": "MIT" }, + "node_modules/react-lottie-player": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/react-lottie-player/-/react-lottie-player-2.1.0.tgz", + "integrity": "sha512-rxSNIVVLWYnwzsIow377vZsh7GDbReu70V7IDD9TbbcdcJWons4pSh3nyuEa4QWIZw0ZBIieoZRTsiqnb6MZ3g==", + "license": "MIT", + "dependencies": { + "fast-deep-equal": "^3.1.3", + "lottie-web": "^5.12.2", + "rfdc": "^1.3.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/react-refresh": { "version": "0.14.2", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz", @@ -4728,6 +4751,12 @@ "node": ">=0.10.0" } }, + "node_modules/rfdc": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz", + "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==", + "license": "MIT" + }, "node_modules/rimraf": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", diff --git a/package.json b/package.json index 3f08221e..aec14275 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1", + "react-lottie-player": "^2.1.0", "zustand": "^4.5.4" }, "devDependencies": { diff --git a/src/interactions/subsidy/assets/coin.json b/src/interactions/subsidy/assets/coin.json new file mode 100644 index 00000000..e40a3a16 --- /dev/null +++ b/src/interactions/subsidy/assets/coin.json @@ -0,0 +1 @@ +{"v":"4.8.0","meta":{"g":"LottieFiles AE 3.5.8","a":"","k":"","d":"","tc":""},"fr":30,"ip":0,"op":30,"w":500,"h":500,"nm":"Comp 2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 6","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":19,"s":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":23,"s":[1]},{"t":25,"s":[1]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.123],"y":[0.335]},"o":{"x":[0],"y":[0]},"t":5,"s":[0]},{"i":{"x":[0.833],"y":[0.7]},"o":{"x":[0.496],"y":[0.424]},"t":13,"s":[-24]},{"t":25,"s":[-56]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0,"y":0.296},"o":{"x":0,"y":0},"t":5,"s":[250,250,0],"to":[-40.667,-47.5,0],"ti":[57.284,-10.284,0]},{"i":{"x":0.778,"y":0.451},"o":{"x":0.21,"y":0.14},"t":13,"s":[126,200,0],"to":[-71.118,12.767,0],"ti":[5,-36,0]},{"t":25,"s":[-12,368,0]}],"ix":2},"a":{"a":0,"k":[-151.707,-94.707,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.234,0.833],"y":[1,0.487,1]},"o":{"x":[0,0,0.333],"y":[0,0,0]},"t":5,"s":[100,100,100]},{"i":{"x":[0.833,0.613,0.833],"y":[1,0.513,1]},"o":{"x":[0.167,0.41,0.167],"y":[0,0.118,0]},"t":13,"s":[100,40,100]},{"t":21,"s":[100,-100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[30,30],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.33662701775,0.33662701775,0.33662701775,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":5,"s":[0.149019607843,0.898039215686,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":13,"s":[0.58659620098,0.950467756683,1,1]},{"t":25,"s":[0.84753370098,0.981732117896,1,1]}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-151.707,-94.707],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":5,"op":2705,"st":5,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 5","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":22,"s":[100]},{"t":26,"s":[0]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.123],"y":[1.425]},"o":{"x":[0],"y":[0]},"t":3,"s":[0]},{"i":{"x":[0.833],"y":[1.193]},"o":{"x":[0.496],"y":[-0.272]},"t":13,"s":[47]},{"t":26,"s":[101]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0,"y":0.163},"o":{"x":0,"y":0},"t":3,"s":[250,250,0],"to":[8.333,-36.5,0],"ti":[-44.659,-3.543,0]},{"i":{"x":0.778,"y":0.425},"o":{"x":0.21,"y":0.146},"t":13,"s":[359,160,0],"to":[58.396,4.633,0],"ti":[-5.5,-86.833,0]},{"t":26,"s":[464,353,0]}],"ix":2},"a":{"a":0,"k":[-151.707,-94.707,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.167,0.41,0.167],"y":[0,-0.343,0]},"t":3,"s":[100,40,100]},{"i":{"x":[0.833,0.613,0.833],"y":[1,0.446,1]},"o":{"x":[0,0,0.333],"y":[0,0,0]},"t":13,"s":[100,100,100]},{"t":26,"s":[100,-100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[30,30],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.33662701775,0.33662701775,0.33662701775,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":3,"s":[0.58659620098,0.950467756683,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":13,"s":[0.149019607843,0.898039215686,1,1]},{"t":26,"s":[0.84753370098,0.981732117896,1,1]}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-151.707,-94.707],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":3,"op":2703,"st":3,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 4","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":23,"s":[100]},{"t":27,"s":[0]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.123],"y":[2.497]},"o":{"x":[0],"y":[0]},"t":4,"s":[0]},{"i":{"x":[0.833],"y":[1.22]},"o":{"x":[0.496],"y":[-0.31]},"t":13,"s":[12]},{"t":27,"s":[63]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0,"y":0.375},"o":{"x":0,"y":0},"t":4,"s":[250,250,0],"to":[-1.667,-56.5,0],"ti":[45.583,-0.146,0]},{"i":{"x":0.823,"y":0.638},"o":{"x":0.21,"y":0.125},"t":13,"s":[164.5,148,0],"to":[-72.093,0.23,0],"ti":[-4.5,-60.833,0]},{"t":27,"s":[63,345,0]}],"ix":2},"a":{"a":0,"k":[-151.707,-94.707,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0,0.312,0.833],"y":[0.247,-20.657,1]},"o":{"x":[0,0,0.167],"y":[0,-0.005,0]},"t":4,"s":[100,100,100]},{"i":{"x":[0.936,0.837,0.833],"y":[0.869,30.541,1]},"o":{"x":[0.693,0.563,0.167],"y":[0.348,27.567,0]},"t":13,"s":[52,100,100]},{"t":27,"s":[-60,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[30,30],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.33662701775,0.33662701775,0.33662701775,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":4,"s":[0.58659620098,0.950467756683,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":13,"s":[0.149019607843,0.898039215686,1,1]},{"t":27,"s":[0.84753370098,0.981732117896,1,1]}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-151.707,-94.707],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":4,"op":2704,"st":4,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":20,"s":[100]},{"t":24,"s":[0]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.123],"y":[2.497]},"o":{"x":[0],"y":[0]},"t":1,"s":[0]},{"i":{"x":[0.833],"y":[1.22]},"o":{"x":[0.496],"y":[-0.31]},"t":10,"s":[12]},{"t":24,"s":[63]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0,"y":0.28},"o":{"x":0,"y":0},"t":1,"s":[250,250,0],"to":[33.333,-39.5,0],"ti":[-45.383,-4.275,0]},{"i":{"x":0.823,"y":0.559},"o":{"x":0.21,"y":0.152},"t":10,"s":[362,203,0],"to":[44.907,4.23,0],"ti":[-26.5,-61.833,0]},{"t":24,"s":[510,323,0]}],"ix":2},"a":{"a":0,"k":[-151.707,-94.707,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0,0.312,0.833],"y":[0.247,-20.657,1]},"o":{"x":[0,0,0.167],"y":[0,-0.005,0]},"t":1,"s":[100,100,100]},{"i":{"x":[0.936,0.837,0.833],"y":[0.869,30.541,1]},"o":{"x":[0.693,0.563,0.167],"y":[0.348,27.567,0]},"t":10,"s":[52,100,100]},{"t":24,"s":[-60,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[30,30],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.33662701775,0.33662701775,0.33662701775,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":1,"s":[0.58659620098,0.950467756683,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":10,"s":[0.149019607843,0.898039215686,1,1]},{"t":24,"s":[0.84753370098,0.981732117896,1,1]}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-151.707,-94.707],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":1,"op":2701,"st":1,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":23,"s":[100]},{"t":27,"s":[0]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.123],"y":[1.425]},"o":{"x":[0],"y":[0]},"t":4,"s":[0]},{"i":{"x":[0.833],"y":[1.193]},"o":{"x":[0.496],"y":[-0.272]},"t":14,"s":[47]},{"t":27,"s":[101]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0,"y":0.117},"o":{"x":0,"y":0},"t":4,"s":[250,250,0],"to":[8.333,-36.5,0],"ti":[-42.806,-13.216,0]},{"i":{"x":0.778,"y":0.437},"o":{"x":0.21,"y":0.143},"t":14,"s":[343,159,0],"to":[47.396,14.633,0],"ti":[-15.5,-82.833,0]},{"t":27,"s":[456,362,0]}],"ix":2},"a":{"a":0,"k":[-151.707,-94.707,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.167,0.41,0.167],"y":[0,-0.343,0]},"t":4,"s":[100,40,100]},{"i":{"x":[0.833,0.613,0.833],"y":[1,0.446,1]},"o":{"x":[0,0,0.333],"y":[0,0,0]},"t":14,"s":[100,100,100]},{"t":27,"s":[100,-100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[30,30],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.33662701775,0.33662701775,0.33662701775,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":4,"s":[0.58659620098,0.950467756683,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":14,"s":[0.149019607843,0.898039215686,1,1]},{"t":27,"s":[0.84753370098,0.981732117896,1,1]}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-151.707,-94.707],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":4,"op":2704,"st":4,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":14,"s":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":18,"s":[1]},{"t":20,"s":[1]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.123],"y":[0.335]},"o":{"x":[0],"y":[0]},"t":0,"s":[0]},{"i":{"x":[0.833],"y":[0.7]},"o":{"x":[0.496],"y":[0.424]},"t":8,"s":[-24]},{"t":20,"s":[-56]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0,"y":0.296},"o":{"x":0,"y":0},"t":0,"s":[250,250,0],"to":[-40.667,-47.5,0],"ti":[57.284,-10.284,0]},{"i":{"x":0.778,"y":0.451},"o":{"x":0.21,"y":0.14},"t":8,"s":[126,200,0],"to":[-71.118,12.767,0],"ti":[5,-36,0]},{"t":20,"s":[-12,368,0]}],"ix":2},"a":{"a":0,"k":[-151.707,-94.707,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.234,0.833],"y":[1,0.487,1]},"o":{"x":[0,0,0.333],"y":[0,0,0]},"t":0,"s":[100,100,100]},{"i":{"x":[0.833,0.613,0.833],"y":[1,0.513,1]},"o":{"x":[0.167,0.41,0.167],"y":[0,0.118,0]},"t":8,"s":[100,40,100]},{"t":16,"s":[100,-100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[30,30],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.33662701775,0.33662701775,0.33662701775,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0.149019607843,0.898039215686,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":8,"s":[0.58659620098,0.950467756683,1,1]},{"t":20,"s":[0.84753370098,0.981732117896,1,1]}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-151.707,-94.707],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":2700,"st":0,"bm":0}],"markers":[]} \ No newline at end of file diff --git a/src/interactions/subsidy/index.jsx b/src/interactions/subsidy/index.jsx index 3a6b93ba..d3328f52 100644 --- a/src/interactions/subsidy/index.jsx +++ b/src/interactions/subsidy/index.jsx @@ -1,17 +1,21 @@ -import { useState, useImperativeHandle } from "react"; +import { useState, useRef, useImperativeHandle } from "react"; +import Lottie from "react-lottie-player/dist/LottiePlayerLight"; +import coinRottie from "./assets/coin.json"; import dollor from "./assets/dollor.svg"; import InteractionDescription from "../InteractionDescription.jsx"; function SubsidyInteraction({ interactCallback, $ref }) { const [count, setCount] = useState(0); + const rottieRef = useRef(null); function onClick() { setCount( count=>count+1 ); + rottieRef.current.goToAndPlay(0); } useImperativeHandle($ref, () => ({ reset(){ - setCount(0); + setCount(0); } }), []); return ( @@ -22,8 +26,11 @@ function SubsidyInteraction({ interactCallback, $ref }) { description="The new IONIQ 5는 한 번의 충전으로 얼마나 멀리 주행할 수 있을까요?" directive="가운데 점을 드래그하여 최대 주행거리를 예측해보세요!" /> -
- $ +
+
+ $ +
+

From 8101c2444a627a6cdcd87734e7ff2c07de2760a7 Mon Sep 17 00:00:00 2001 From: lybell-art Date: Mon, 29 Jul 2024 17:59:01 +0900 Subject: [PATCH 14/16] =?UTF-8?q?[feat]=20=EB=8F=99=EC=A0=84=20360?= =?UTF-8?q?=EB=8F=84=20=ED=9A=8C=EC=A0=84=20=EC=95=A0=EB=8B=88=EB=A9=94?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/interactions/subsidy/index.jsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/interactions/subsidy/index.jsx b/src/interactions/subsidy/index.jsx index d3328f52..edd73ba1 100644 --- a/src/interactions/subsidy/index.jsx +++ b/src/interactions/subsidy/index.jsx @@ -8,9 +8,20 @@ function SubsidyInteraction({ interactCallback, $ref }) { const [count, setCount] = useState(0); const rottieRef = useRef(null); - function onClick() + function onClick(e) { setCount( count=>count+1 ); + e.currentTarget.animate( + [ + { transform: "rotateY(0)" }, + { transform: "rotateY(360deg)" }, + ], + { + duration: 500, + iteractions: 1, + easing: "cubic-bezier(0.215, 0.610, 0.355, 1.000)", // ease-out-cubic + }, + ); rottieRef.current.goToAndPlay(0); } @@ -27,7 +38,7 @@ function SubsidyInteraction({ interactCallback, $ref }) { directive="가운데 점을 드래그하여 최대 주행거리를 예측해보세요!" />

-
+
$
From a64f739a567bf50cabc69eca55829d3185f46860 Mon Sep 17 00:00:00 2001 From: lybell-art Date: Mon, 29 Jul 2024 18:00:06 +0900 Subject: [PATCH 15/16] =?UTF-8?q?[chore]=20=EB=A6=B0=ED=8A=B8=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/interactions/subsidy/assets/coin.json | 1036 ++++++++++++++++++++- src/interactions/subsidy/index.jsx | 51 +- 2 files changed, 1069 insertions(+), 18 deletions(-) diff --git a/src/interactions/subsidy/assets/coin.json b/src/interactions/subsidy/assets/coin.json index e40a3a16..c322582a 100644 --- a/src/interactions/subsidy/assets/coin.json +++ b/src/interactions/subsidy/assets/coin.json @@ -1 +1,1035 @@ -{"v":"4.8.0","meta":{"g":"LottieFiles AE 3.5.8","a":"","k":"","d":"","tc":""},"fr":30,"ip":0,"op":30,"w":500,"h":500,"nm":"Comp 2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 6","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":19,"s":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":23,"s":[1]},{"t":25,"s":[1]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.123],"y":[0.335]},"o":{"x":[0],"y":[0]},"t":5,"s":[0]},{"i":{"x":[0.833],"y":[0.7]},"o":{"x":[0.496],"y":[0.424]},"t":13,"s":[-24]},{"t":25,"s":[-56]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0,"y":0.296},"o":{"x":0,"y":0},"t":5,"s":[250,250,0],"to":[-40.667,-47.5,0],"ti":[57.284,-10.284,0]},{"i":{"x":0.778,"y":0.451},"o":{"x":0.21,"y":0.14},"t":13,"s":[126,200,0],"to":[-71.118,12.767,0],"ti":[5,-36,0]},{"t":25,"s":[-12,368,0]}],"ix":2},"a":{"a":0,"k":[-151.707,-94.707,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.234,0.833],"y":[1,0.487,1]},"o":{"x":[0,0,0.333],"y":[0,0,0]},"t":5,"s":[100,100,100]},{"i":{"x":[0.833,0.613,0.833],"y":[1,0.513,1]},"o":{"x":[0.167,0.41,0.167],"y":[0,0.118,0]},"t":13,"s":[100,40,100]},{"t":21,"s":[100,-100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[30,30],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.33662701775,0.33662701775,0.33662701775,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":5,"s":[0.149019607843,0.898039215686,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":13,"s":[0.58659620098,0.950467756683,1,1]},{"t":25,"s":[0.84753370098,0.981732117896,1,1]}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-151.707,-94.707],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":5,"op":2705,"st":5,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 5","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":22,"s":[100]},{"t":26,"s":[0]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.123],"y":[1.425]},"o":{"x":[0],"y":[0]},"t":3,"s":[0]},{"i":{"x":[0.833],"y":[1.193]},"o":{"x":[0.496],"y":[-0.272]},"t":13,"s":[47]},{"t":26,"s":[101]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0,"y":0.163},"o":{"x":0,"y":0},"t":3,"s":[250,250,0],"to":[8.333,-36.5,0],"ti":[-44.659,-3.543,0]},{"i":{"x":0.778,"y":0.425},"o":{"x":0.21,"y":0.146},"t":13,"s":[359,160,0],"to":[58.396,4.633,0],"ti":[-5.5,-86.833,0]},{"t":26,"s":[464,353,0]}],"ix":2},"a":{"a":0,"k":[-151.707,-94.707,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.167,0.41,0.167],"y":[0,-0.343,0]},"t":3,"s":[100,40,100]},{"i":{"x":[0.833,0.613,0.833],"y":[1,0.446,1]},"o":{"x":[0,0,0.333],"y":[0,0,0]},"t":13,"s":[100,100,100]},{"t":26,"s":[100,-100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[30,30],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.33662701775,0.33662701775,0.33662701775,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":3,"s":[0.58659620098,0.950467756683,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":13,"s":[0.149019607843,0.898039215686,1,1]},{"t":26,"s":[0.84753370098,0.981732117896,1,1]}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-151.707,-94.707],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":3,"op":2703,"st":3,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 4","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":23,"s":[100]},{"t":27,"s":[0]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.123],"y":[2.497]},"o":{"x":[0],"y":[0]},"t":4,"s":[0]},{"i":{"x":[0.833],"y":[1.22]},"o":{"x":[0.496],"y":[-0.31]},"t":13,"s":[12]},{"t":27,"s":[63]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0,"y":0.375},"o":{"x":0,"y":0},"t":4,"s":[250,250,0],"to":[-1.667,-56.5,0],"ti":[45.583,-0.146,0]},{"i":{"x":0.823,"y":0.638},"o":{"x":0.21,"y":0.125},"t":13,"s":[164.5,148,0],"to":[-72.093,0.23,0],"ti":[-4.5,-60.833,0]},{"t":27,"s":[63,345,0]}],"ix":2},"a":{"a":0,"k":[-151.707,-94.707,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0,0.312,0.833],"y":[0.247,-20.657,1]},"o":{"x":[0,0,0.167],"y":[0,-0.005,0]},"t":4,"s":[100,100,100]},{"i":{"x":[0.936,0.837,0.833],"y":[0.869,30.541,1]},"o":{"x":[0.693,0.563,0.167],"y":[0.348,27.567,0]},"t":13,"s":[52,100,100]},{"t":27,"s":[-60,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[30,30],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.33662701775,0.33662701775,0.33662701775,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":4,"s":[0.58659620098,0.950467756683,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":13,"s":[0.149019607843,0.898039215686,1,1]},{"t":27,"s":[0.84753370098,0.981732117896,1,1]}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-151.707,-94.707],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":4,"op":2704,"st":4,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":20,"s":[100]},{"t":24,"s":[0]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.123],"y":[2.497]},"o":{"x":[0],"y":[0]},"t":1,"s":[0]},{"i":{"x":[0.833],"y":[1.22]},"o":{"x":[0.496],"y":[-0.31]},"t":10,"s":[12]},{"t":24,"s":[63]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0,"y":0.28},"o":{"x":0,"y":0},"t":1,"s":[250,250,0],"to":[33.333,-39.5,0],"ti":[-45.383,-4.275,0]},{"i":{"x":0.823,"y":0.559},"o":{"x":0.21,"y":0.152},"t":10,"s":[362,203,0],"to":[44.907,4.23,0],"ti":[-26.5,-61.833,0]},{"t":24,"s":[510,323,0]}],"ix":2},"a":{"a":0,"k":[-151.707,-94.707,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0,0.312,0.833],"y":[0.247,-20.657,1]},"o":{"x":[0,0,0.167],"y":[0,-0.005,0]},"t":1,"s":[100,100,100]},{"i":{"x":[0.936,0.837,0.833],"y":[0.869,30.541,1]},"o":{"x":[0.693,0.563,0.167],"y":[0.348,27.567,0]},"t":10,"s":[52,100,100]},{"t":24,"s":[-60,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[30,30],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.33662701775,0.33662701775,0.33662701775,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":1,"s":[0.58659620098,0.950467756683,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":10,"s":[0.149019607843,0.898039215686,1,1]},{"t":24,"s":[0.84753370098,0.981732117896,1,1]}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-151.707,-94.707],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":1,"op":2701,"st":1,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":23,"s":[100]},{"t":27,"s":[0]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.123],"y":[1.425]},"o":{"x":[0],"y":[0]},"t":4,"s":[0]},{"i":{"x":[0.833],"y":[1.193]},"o":{"x":[0.496],"y":[-0.272]},"t":14,"s":[47]},{"t":27,"s":[101]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0,"y":0.117},"o":{"x":0,"y":0},"t":4,"s":[250,250,0],"to":[8.333,-36.5,0],"ti":[-42.806,-13.216,0]},{"i":{"x":0.778,"y":0.437},"o":{"x":0.21,"y":0.143},"t":14,"s":[343,159,0],"to":[47.396,14.633,0],"ti":[-15.5,-82.833,0]},{"t":27,"s":[456,362,0]}],"ix":2},"a":{"a":0,"k":[-151.707,-94.707,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.167,0.41,0.167],"y":[0,-0.343,0]},"t":4,"s":[100,40,100]},{"i":{"x":[0.833,0.613,0.833],"y":[1,0.446,1]},"o":{"x":[0,0,0.333],"y":[0,0,0]},"t":14,"s":[100,100,100]},{"t":27,"s":[100,-100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[30,30],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.33662701775,0.33662701775,0.33662701775,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":4,"s":[0.58659620098,0.950467756683,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":14,"s":[0.149019607843,0.898039215686,1,1]},{"t":27,"s":[0.84753370098,0.981732117896,1,1]}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-151.707,-94.707],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":4,"op":2704,"st":4,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":14,"s":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":18,"s":[1]},{"t":20,"s":[1]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.123],"y":[0.335]},"o":{"x":[0],"y":[0]},"t":0,"s":[0]},{"i":{"x":[0.833],"y":[0.7]},"o":{"x":[0.496],"y":[0.424]},"t":8,"s":[-24]},{"t":20,"s":[-56]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0,"y":0.296},"o":{"x":0,"y":0},"t":0,"s":[250,250,0],"to":[-40.667,-47.5,0],"ti":[57.284,-10.284,0]},{"i":{"x":0.778,"y":0.451},"o":{"x":0.21,"y":0.14},"t":8,"s":[126,200,0],"to":[-71.118,12.767,0],"ti":[5,-36,0]},{"t":20,"s":[-12,368,0]}],"ix":2},"a":{"a":0,"k":[-151.707,-94.707,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.234,0.833],"y":[1,0.487,1]},"o":{"x":[0,0,0.333],"y":[0,0,0]},"t":0,"s":[100,100,100]},{"i":{"x":[0.833,0.613,0.833],"y":[1,0.513,1]},"o":{"x":[0.167,0.41,0.167],"y":[0,0.118,0]},"t":8,"s":[100,40,100]},{"t":16,"s":[100,-100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[30,30],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.33662701775,0.33662701775,0.33662701775,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0.149019607843,0.898039215686,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":8,"s":[0.58659620098,0.950467756683,1,1]},{"t":20,"s":[0.84753370098,0.981732117896,1,1]}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-151.707,-94.707],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":2700,"st":0,"bm":0}],"markers":[]} \ No newline at end of file +{ + "v": "4.8.0", + "meta": { "g": "LottieFiles AE 3.5.8", "a": "", "k": "", "d": "", "tc": "" }, + "fr": 30, + "ip": 0, + "op": 30, + "w": 500, + "h": 500, + "nm": "Comp 2", + "ddd": 0, + "assets": [], + "layers": [ + { + "ddd": 0, + "ind": 1, + "ty": 4, + "nm": "Shape Layer 6", + "sr": 1, + "ks": { + "o": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 19, + "s": [100] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 23, + "s": [1] + }, + { "t": 25, "s": [1] } + ], + "ix": 11 + }, + "r": { + "a": 1, + "k": [ + { + "i": { "x": [0.123], "y": [0.335] }, + "o": { "x": [0], "y": [0] }, + "t": 5, + "s": [0] + }, + { + "i": { "x": [0.833], "y": [0.7] }, + "o": { "x": [0.496], "y": [0.424] }, + "t": 13, + "s": [-24] + }, + { "t": 25, "s": [-56] } + ], + "ix": 10 + }, + "p": { + "a": 1, + "k": [ + { + "i": { "x": 0, "y": 0.296 }, + "o": { "x": 0, "y": 0 }, + "t": 5, + "s": [250, 250, 0], + "to": [-40.667, -47.5, 0], + "ti": [57.284, -10.284, 0] + }, + { + "i": { "x": 0.778, "y": 0.451 }, + "o": { "x": 0.21, "y": 0.14 }, + "t": 13, + "s": [126, 200, 0], + "to": [-71.118, 12.767, 0], + "ti": [5, -36, 0] + }, + { "t": 25, "s": [-12, 368, 0] } + ], + "ix": 2 + }, + "a": { "a": 0, "k": [-151.707, -94.707, 0], "ix": 1 }, + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0.833, 0.234, 0.833], "y": [1, 0.487, 1] }, + "o": { "x": [0, 0, 0.333], "y": [0, 0, 0] }, + "t": 5, + "s": [100, 100, 100] + }, + { + "i": { "x": [0.833, 0.613, 0.833], "y": [1, 0.513, 1] }, + "o": { "x": [0.167, 0.41, 0.167], "y": [0, 0.118, 0] }, + "t": 13, + "s": [100, 40, 100] + }, + { "t": 21, "s": [100, -100, 100] } + ], + "ix": 6 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "d": 1, + "ty": "el", + "s": { "a": 0, "k": [30, 30], "ix": 2 }, + "p": { "a": 0, "k": [0, 0], "ix": 3 }, + "nm": "Ellipse Path 1", + "mn": "ADBE Vector Shape - Ellipse", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0.33662701775, 0.33662701775, 0.33662701775, 1], + "ix": 3 + }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { "a": 0, "k": 0, "ix": 5 }, + "lc": 1, + "lj": 1, + "ml": 4, + "bm": 0, + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false + }, + { + "ty": "fl", + "c": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 5, + "s": [0.149019607843, 0.898039215686, 1, 1] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 13, + "s": [0.58659620098, 0.950467756683, 1, 1] + }, + { "t": 25, "s": [0.84753370098, 0.981732117896, 1, 1] } + ], + "ix": 4 + }, + "o": { "a": 0, "k": 100, "ix": 5 }, + "r": 1, + "bm": 0, + "nm": "Fill 1", + "mn": "ADBE Vector Graphic - Fill", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [-151.707, -94.707], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Ellipse 1", + "np": 3, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 5, + "op": 2705, + "st": 5, + "bm": 0 + }, + { + "ddd": 0, + "ind": 2, + "ty": 4, + "nm": "Shape Layer 5", + "sr": 1, + "ks": { + "o": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 22, + "s": [100] + }, + { "t": 26, "s": [0] } + ], + "ix": 11 + }, + "r": { + "a": 1, + "k": [ + { + "i": { "x": [0.123], "y": [1.425] }, + "o": { "x": [0], "y": [0] }, + "t": 3, + "s": [0] + }, + { + "i": { "x": [0.833], "y": [1.193] }, + "o": { "x": [0.496], "y": [-0.272] }, + "t": 13, + "s": [47] + }, + { "t": 26, "s": [101] } + ], + "ix": 10 + }, + "p": { + "a": 1, + "k": [ + { + "i": { "x": 0, "y": 0.163 }, + "o": { "x": 0, "y": 0 }, + "t": 3, + "s": [250, 250, 0], + "to": [8.333, -36.5, 0], + "ti": [-44.659, -3.543, 0] + }, + { + "i": { "x": 0.778, "y": 0.425 }, + "o": { "x": 0.21, "y": 0.146 }, + "t": 13, + "s": [359, 160, 0], + "to": [58.396, 4.633, 0], + "ti": [-5.5, -86.833, 0] + }, + { "t": 26, "s": [464, 353, 0] } + ], + "ix": 2 + }, + "a": { "a": 0, "k": [-151.707, -94.707, 0], "ix": 1 }, + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0.833, 0.833, 0.833], "y": [1, 1, 1] }, + "o": { "x": [0.167, 0.41, 0.167], "y": [0, -0.343, 0] }, + "t": 3, + "s": [100, 40, 100] + }, + { + "i": { "x": [0.833, 0.613, 0.833], "y": [1, 0.446, 1] }, + "o": { "x": [0, 0, 0.333], "y": [0, 0, 0] }, + "t": 13, + "s": [100, 100, 100] + }, + { "t": 26, "s": [100, -100, 100] } + ], + "ix": 6 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "d": 1, + "ty": "el", + "s": { "a": 0, "k": [30, 30], "ix": 2 }, + "p": { "a": 0, "k": [0, 0], "ix": 3 }, + "nm": "Ellipse Path 1", + "mn": "ADBE Vector Shape - Ellipse", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0.33662701775, 0.33662701775, 0.33662701775, 1], + "ix": 3 + }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { "a": 0, "k": 0, "ix": 5 }, + "lc": 1, + "lj": 1, + "ml": 4, + "bm": 0, + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false + }, + { + "ty": "fl", + "c": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 3, + "s": [0.58659620098, 0.950467756683, 1, 1] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 13, + "s": [0.149019607843, 0.898039215686, 1, 1] + }, + { "t": 26, "s": [0.84753370098, 0.981732117896, 1, 1] } + ], + "ix": 4 + }, + "o": { "a": 0, "k": 100, "ix": 5 }, + "r": 1, + "bm": 0, + "nm": "Fill 1", + "mn": "ADBE Vector Graphic - Fill", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [-151.707, -94.707], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Ellipse 1", + "np": 3, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 3, + "op": 2703, + "st": 3, + "bm": 0 + }, + { + "ddd": 0, + "ind": 3, + "ty": 4, + "nm": "Shape Layer 4", + "sr": 1, + "ks": { + "o": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 23, + "s": [100] + }, + { "t": 27, "s": [0] } + ], + "ix": 11 + }, + "r": { + "a": 1, + "k": [ + { + "i": { "x": [0.123], "y": [2.497] }, + "o": { "x": [0], "y": [0] }, + "t": 4, + "s": [0] + }, + { + "i": { "x": [0.833], "y": [1.22] }, + "o": { "x": [0.496], "y": [-0.31] }, + "t": 13, + "s": [12] + }, + { "t": 27, "s": [63] } + ], + "ix": 10 + }, + "p": { + "a": 1, + "k": [ + { + "i": { "x": 0, "y": 0.375 }, + "o": { "x": 0, "y": 0 }, + "t": 4, + "s": [250, 250, 0], + "to": [-1.667, -56.5, 0], + "ti": [45.583, -0.146, 0] + }, + { + "i": { "x": 0.823, "y": 0.638 }, + "o": { "x": 0.21, "y": 0.125 }, + "t": 13, + "s": [164.5, 148, 0], + "to": [-72.093, 0.23, 0], + "ti": [-4.5, -60.833, 0] + }, + { "t": 27, "s": [63, 345, 0] } + ], + "ix": 2 + }, + "a": { "a": 0, "k": [-151.707, -94.707, 0], "ix": 1 }, + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0, 0.312, 0.833], "y": [0.247, -20.657, 1] }, + "o": { "x": [0, 0, 0.167], "y": [0, -0.005, 0] }, + "t": 4, + "s": [100, 100, 100] + }, + { + "i": { "x": [0.936, 0.837, 0.833], "y": [0.869, 30.541, 1] }, + "o": { "x": [0.693, 0.563, 0.167], "y": [0.348, 27.567, 0] }, + "t": 13, + "s": [52, 100, 100] + }, + { "t": 27, "s": [-60, 100, 100] } + ], + "ix": 6 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "d": 1, + "ty": "el", + "s": { "a": 0, "k": [30, 30], "ix": 2 }, + "p": { "a": 0, "k": [0, 0], "ix": 3 }, + "nm": "Ellipse Path 1", + "mn": "ADBE Vector Shape - Ellipse", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0.33662701775, 0.33662701775, 0.33662701775, 1], + "ix": 3 + }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { "a": 0, "k": 0, "ix": 5 }, + "lc": 1, + "lj": 1, + "ml": 4, + "bm": 0, + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false + }, + { + "ty": "fl", + "c": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 4, + "s": [0.58659620098, 0.950467756683, 1, 1] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 13, + "s": [0.149019607843, 0.898039215686, 1, 1] + }, + { "t": 27, "s": [0.84753370098, 0.981732117896, 1, 1] } + ], + "ix": 4 + }, + "o": { "a": 0, "k": 100, "ix": 5 }, + "r": 1, + "bm": 0, + "nm": "Fill 1", + "mn": "ADBE Vector Graphic - Fill", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [-151.707, -94.707], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Ellipse 1", + "np": 3, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 4, + "op": 2704, + "st": 4, + "bm": 0 + }, + { + "ddd": 0, + "ind": 4, + "ty": 4, + "nm": "Shape Layer 3", + "sr": 1, + "ks": { + "o": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 20, + "s": [100] + }, + { "t": 24, "s": [0] } + ], + "ix": 11 + }, + "r": { + "a": 1, + "k": [ + { + "i": { "x": [0.123], "y": [2.497] }, + "o": { "x": [0], "y": [0] }, + "t": 1, + "s": [0] + }, + { + "i": { "x": [0.833], "y": [1.22] }, + "o": { "x": [0.496], "y": [-0.31] }, + "t": 10, + "s": [12] + }, + { "t": 24, "s": [63] } + ], + "ix": 10 + }, + "p": { + "a": 1, + "k": [ + { + "i": { "x": 0, "y": 0.28 }, + "o": { "x": 0, "y": 0 }, + "t": 1, + "s": [250, 250, 0], + "to": [33.333, -39.5, 0], + "ti": [-45.383, -4.275, 0] + }, + { + "i": { "x": 0.823, "y": 0.559 }, + "o": { "x": 0.21, "y": 0.152 }, + "t": 10, + "s": [362, 203, 0], + "to": [44.907, 4.23, 0], + "ti": [-26.5, -61.833, 0] + }, + { "t": 24, "s": [510, 323, 0] } + ], + "ix": 2 + }, + "a": { "a": 0, "k": [-151.707, -94.707, 0], "ix": 1 }, + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0, 0.312, 0.833], "y": [0.247, -20.657, 1] }, + "o": { "x": [0, 0, 0.167], "y": [0, -0.005, 0] }, + "t": 1, + "s": [100, 100, 100] + }, + { + "i": { "x": [0.936, 0.837, 0.833], "y": [0.869, 30.541, 1] }, + "o": { "x": [0.693, 0.563, 0.167], "y": [0.348, 27.567, 0] }, + "t": 10, + "s": [52, 100, 100] + }, + { "t": 24, "s": [-60, 100, 100] } + ], + "ix": 6 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "d": 1, + "ty": "el", + "s": { "a": 0, "k": [30, 30], "ix": 2 }, + "p": { "a": 0, "k": [0, 0], "ix": 3 }, + "nm": "Ellipse Path 1", + "mn": "ADBE Vector Shape - Ellipse", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0.33662701775, 0.33662701775, 0.33662701775, 1], + "ix": 3 + }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { "a": 0, "k": 0, "ix": 5 }, + "lc": 1, + "lj": 1, + "ml": 4, + "bm": 0, + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false + }, + { + "ty": "fl", + "c": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 1, + "s": [0.58659620098, 0.950467756683, 1, 1] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 10, + "s": [0.149019607843, 0.898039215686, 1, 1] + }, + { "t": 24, "s": [0.84753370098, 0.981732117896, 1, 1] } + ], + "ix": 4 + }, + "o": { "a": 0, "k": 100, "ix": 5 }, + "r": 1, + "bm": 0, + "nm": "Fill 1", + "mn": "ADBE Vector Graphic - Fill", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [-151.707, -94.707], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Ellipse 1", + "np": 3, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 1, + "op": 2701, + "st": 1, + "bm": 0 + }, + { + "ddd": 0, + "ind": 5, + "ty": 4, + "nm": "Shape Layer 2", + "sr": 1, + "ks": { + "o": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 23, + "s": [100] + }, + { "t": 27, "s": [0] } + ], + "ix": 11 + }, + "r": { + "a": 1, + "k": [ + { + "i": { "x": [0.123], "y": [1.425] }, + "o": { "x": [0], "y": [0] }, + "t": 4, + "s": [0] + }, + { + "i": { "x": [0.833], "y": [1.193] }, + "o": { "x": [0.496], "y": [-0.272] }, + "t": 14, + "s": [47] + }, + { "t": 27, "s": [101] } + ], + "ix": 10 + }, + "p": { + "a": 1, + "k": [ + { + "i": { "x": 0, "y": 0.117 }, + "o": { "x": 0, "y": 0 }, + "t": 4, + "s": [250, 250, 0], + "to": [8.333, -36.5, 0], + "ti": [-42.806, -13.216, 0] + }, + { + "i": { "x": 0.778, "y": 0.437 }, + "o": { "x": 0.21, "y": 0.143 }, + "t": 14, + "s": [343, 159, 0], + "to": [47.396, 14.633, 0], + "ti": [-15.5, -82.833, 0] + }, + { "t": 27, "s": [456, 362, 0] } + ], + "ix": 2 + }, + "a": { "a": 0, "k": [-151.707, -94.707, 0], "ix": 1 }, + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0.833, 0.833, 0.833], "y": [1, 1, 1] }, + "o": { "x": [0.167, 0.41, 0.167], "y": [0, -0.343, 0] }, + "t": 4, + "s": [100, 40, 100] + }, + { + "i": { "x": [0.833, 0.613, 0.833], "y": [1, 0.446, 1] }, + "o": { "x": [0, 0, 0.333], "y": [0, 0, 0] }, + "t": 14, + "s": [100, 100, 100] + }, + { "t": 27, "s": [100, -100, 100] } + ], + "ix": 6 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "d": 1, + "ty": "el", + "s": { "a": 0, "k": [30, 30], "ix": 2 }, + "p": { "a": 0, "k": [0, 0], "ix": 3 }, + "nm": "Ellipse Path 1", + "mn": "ADBE Vector Shape - Ellipse", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0.33662701775, 0.33662701775, 0.33662701775, 1], + "ix": 3 + }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { "a": 0, "k": 0, "ix": 5 }, + "lc": 1, + "lj": 1, + "ml": 4, + "bm": 0, + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false + }, + { + "ty": "fl", + "c": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 4, + "s": [0.58659620098, 0.950467756683, 1, 1] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 14, + "s": [0.149019607843, 0.898039215686, 1, 1] + }, + { "t": 27, "s": [0.84753370098, 0.981732117896, 1, 1] } + ], + "ix": 4 + }, + "o": { "a": 0, "k": 100, "ix": 5 }, + "r": 1, + "bm": 0, + "nm": "Fill 1", + "mn": "ADBE Vector Graphic - Fill", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [-151.707, -94.707], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Ellipse 1", + "np": 3, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 4, + "op": 2704, + "st": 4, + "bm": 0 + }, + { + "ddd": 0, + "ind": 6, + "ty": 4, + "nm": "Shape Layer 1", + "sr": 1, + "ks": { + "o": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 14, + "s": [100] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 18, + "s": [1] + }, + { "t": 20, "s": [1] } + ], + "ix": 11 + }, + "r": { + "a": 1, + "k": [ + { + "i": { "x": [0.123], "y": [0.335] }, + "o": { "x": [0], "y": [0] }, + "t": 0, + "s": [0] + }, + { + "i": { "x": [0.833], "y": [0.7] }, + "o": { "x": [0.496], "y": [0.424] }, + "t": 8, + "s": [-24] + }, + { "t": 20, "s": [-56] } + ], + "ix": 10 + }, + "p": { + "a": 1, + "k": [ + { + "i": { "x": 0, "y": 0.296 }, + "o": { "x": 0, "y": 0 }, + "t": 0, + "s": [250, 250, 0], + "to": [-40.667, -47.5, 0], + "ti": [57.284, -10.284, 0] + }, + { + "i": { "x": 0.778, "y": 0.451 }, + "o": { "x": 0.21, "y": 0.14 }, + "t": 8, + "s": [126, 200, 0], + "to": [-71.118, 12.767, 0], + "ti": [5, -36, 0] + }, + { "t": 20, "s": [-12, 368, 0] } + ], + "ix": 2 + }, + "a": { "a": 0, "k": [-151.707, -94.707, 0], "ix": 1 }, + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0.833, 0.234, 0.833], "y": [1, 0.487, 1] }, + "o": { "x": [0, 0, 0.333], "y": [0, 0, 0] }, + "t": 0, + "s": [100, 100, 100] + }, + { + "i": { "x": [0.833, 0.613, 0.833], "y": [1, 0.513, 1] }, + "o": { "x": [0.167, 0.41, 0.167], "y": [0, 0.118, 0] }, + "t": 8, + "s": [100, 40, 100] + }, + { "t": 16, "s": [100, -100, 100] } + ], + "ix": 6 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "d": 1, + "ty": "el", + "s": { "a": 0, "k": [30, 30], "ix": 2 }, + "p": { "a": 0, "k": [0, 0], "ix": 3 }, + "nm": "Ellipse Path 1", + "mn": "ADBE Vector Shape - Ellipse", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0.33662701775, 0.33662701775, 0.33662701775, 1], + "ix": 3 + }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { "a": 0, "k": 0, "ix": 5 }, + "lc": 1, + "lj": 1, + "ml": 4, + "bm": 0, + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false + }, + { + "ty": "fl", + "c": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 0, + "s": [0.149019607843, 0.898039215686, 1, 1] + }, + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 8, + "s": [0.58659620098, 0.950467756683, 1, 1] + }, + { "t": 20, "s": [0.84753370098, 0.981732117896, 1, 1] } + ], + "ix": 4 + }, + "o": { "a": 0, "k": 100, "ix": 5 }, + "r": 1, + "bm": 0, + "nm": "Fill 1", + "mn": "ADBE Vector Graphic - Fill", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [-151.707, -94.707], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Ellipse 1", + "np": 3, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 0, + "op": 2700, + "st": 0, + "bm": 0 + } + ], + "markers": [] +} diff --git a/src/interactions/subsidy/index.jsx b/src/interactions/subsidy/index.jsx index edd73ba1..a134b4ee 100644 --- a/src/interactions/subsidy/index.jsx +++ b/src/interactions/subsidy/index.jsx @@ -8,26 +8,29 @@ function SubsidyInteraction({ interactCallback, $ref }) { const [count, setCount] = useState(0); const rottieRef = useRef(null); - function onClick(e) - { - setCount( count=>count+1 ); - e.currentTarget.animate( - [ - { transform: "rotateY(0)" }, - { transform: "rotateY(360deg)" }, - ], + function onClick(e) { + setCount((count) => count + 1); + e.currentTarget.animate( + [{ transform: "rotateY(0)" }, { transform: "rotateY(360deg)" }], { duration: 500, iteractions: 1, easing: "cubic-bezier(0.215, 0.610, 0.355, 1.000)", // ease-out-cubic }, ); - rottieRef.current.goToAndPlay(0); + rottieRef.current.goToAndPlay(0); + interactCallback?.(); } - useImperativeHandle($ref, () => ({ reset(){ - setCount(0); - } }), []); + useImperativeHandle( + $ref, + () => ({ + reset() { + setCount(0); + }, + }), + [], + ); return (
@@ -37,11 +40,25 @@ function SubsidyInteraction({ interactCallback, $ref }) { description="The new IONIQ 5는 한 번의 충전으로 얼마나 멀리 주행할 수 있을까요?" directive="가운데 점을 드래그하여 최대 주행거리를 예측해보세요!" /> -
-
- $ -
- +
+
+ $ +
+

From c66cf35e8990434f96fcde71f335f8fa88c42c4f Mon Sep 17 00:00:00 2001 From: lybell-art Date: Mon, 29 Jul 2024 18:13:25 +0900 Subject: [PATCH 16/16] =?UTF-8?q?[chore]=20=EB=B3=B4=EC=A1=B0=EA=B8=88=20?= =?UTF-8?q?=ED=83=80=EC=9D=B4=ED=8F=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/interactions/subsidy/index.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/interactions/subsidy/index.jsx b/src/interactions/subsidy/index.jsx index a134b4ee..8e1cc5b7 100644 --- a/src/interactions/subsidy/index.jsx +++ b/src/interactions/subsidy/index.jsx @@ -36,9 +36,9 @@ function SubsidyInteraction({ interactCallback, $ref }) {