+
+
-
+
+ );
+}
+
+export default SubsidyInteraction;
diff --git a/src/interactions/univasalIsland/UnivasalIslandInteraction.jsx b/src/interactions/univasalIsland/index.jsx
similarity index 77%
rename from src/interactions/univasalIsland/UnivasalIslandInteraction.jsx
rename to src/interactions/univasalIsland/index.jsx
index 1e68d81c..03ceaa77 100644
--- a/src/interactions/univasalIsland/UnivasalIslandInteraction.jsx
+++ b/src/interactions/univasalIsland/index.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 (
-
{
+ onPointerDown(e);
+ pulseAnimation(e);
+ interactCallback?.();
+ }}
+ style={circleStyle}
+ />
+
+
+ + + {Math.round(Math.hypot(x, y) / 3)} + + km +
+ + ); +} + +export default DistanceDrivenInteraction; diff --git a/src/interactions/distanceDriven/usePointDrag.js b/src/interactions/distanceDriven/usePointDrag.js new file mode 100644 index 00000000..c341271f --- /dev/null +++ b/src/interactions/distanceDriven/usePointDrag.js @@ -0,0 +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 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); + + return { + x, + y, + reset() { + setX(0); + setY(0); + }, + onPointerDown: onDragStart, + }; +} + +export default usePointDrag; 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 71% rename from src/interactions/fastCharge/FastChargeInteraction.jsx rename to src/interactions/fastCharge/index.jsx index d125b6fe..049a4dc8 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 orderIcon from "@/assets/property2.svg"; -import dialSvg from "./timer.svg"; +import dialSvg from "./assets/timer.svg"; import useDialDrag from "./useDialDrag.js"; const MAX_MINUTE = 30; @@ -35,20 +35,12 @@ function FastChargeInteraction({ interactCallback, $ref }) { return (
- 
-
+
-
- - 불편함 없이, 더 빠르게 -
-- The new IONIQ 5의 배터리를 충전하는 데 얼마만큼의 시간이 걸릴까요? -
-- 다이얼을 돌려 충전에 필요한 시간을 확인해보세요! -
-
+
+
+ 
+
+ + + {count * 10} + + 만원 +
+
-
-
+
-
- - 나에게 맞게, 자유자재로 -
-- 새로워진 The new IONIQ 5의 유니버설 아일랜드는 어떤 모습일까요? -
-- 유니버설 아일랜드를 드래그하여 이동시키고 스마트폰을 충전해보세요! -
-