최초
@@ -54,7 +53,7 @@ const WkResultInfo = ({ id }: { id: number }) => {
waiter.waitingNum < 0 || (
{index + 1}
diff --git a/src/app/_components/user/workation/WkSlider.tsx b/src/app/_components/user/workation/WkSlider.tsx
index 38576b8d..0d8087c1 100644
--- a/src/app/_components/user/workation/WkSlider.tsx
+++ b/src/app/_components/user/workation/WkSlider.tsx
@@ -5,6 +5,8 @@ import { useGetWkSimulationQuery } from '@/_hooks/user/useGetWkSimulationQuery';
import { useSession } from 'next-auth/react';
const Slider = ({ id }: { id: number }) => {
+ console.log('id', id);
+
const [animate, setAnimate] = useState(false);
const [hoveredAccount, setHoveredAccount] = useState(null);
const [tooltipPosition, setTooltipPosition] = useState({ left: '0%' });
@@ -22,7 +24,6 @@ const Slider = ({ id }: { id: number }) => {
}, []);
const { data, isLoading, isError } = useGetWkSimulationQuery({ wktId: id });
-
if (isLoading) return null;
if (isError) return null;
if (!data) return null;
From 5f9c2c87d382d45d29eef53947ba426e1a9b0870 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=80=EC=A7=80?=
<81403265+eunji0714@users.noreply.github.com>
Date: Sat, 17 Aug 2024 09:29:03 +0900
Subject: [PATCH 3/5] =?UTF-8?q?refactor:=20=EB=8B=B9=EC=B2=A8=EC=9C=84?=
=?UTF-8?q?=EC=B9=98=EC=97=90=20=EB=A9=88=EC=B6=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../_components/user/workation/WkSlider.tsx | 169 ++++++++++--------
1 file changed, 97 insertions(+), 72 deletions(-)
diff --git a/src/app/_components/user/workation/WkSlider.tsx b/src/app/_components/user/workation/WkSlider.tsx
index 0d8087c1..1359e7a6 100644
--- a/src/app/_components/user/workation/WkSlider.tsx
+++ b/src/app/_components/user/workation/WkSlider.tsx
@@ -1,15 +1,14 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
import UserSubtitleAtom from '@/_components/user/common/atoms/UserSubtitleAtom';
import UserButtonAtom from '@/_components/user/common/atoms/UserButtonAtom';
import { useGetWkSimulationQuery } from '@/_hooks/user/useGetWkSimulationQuery';
import { useSession } from 'next-auth/react';
const Slider = ({ id }: { id: number }) => {
- console.log('id', id);
-
const [animate, setAnimate] = useState(false);
const [hoveredAccount, setHoveredAccount] = useState(null);
const [tooltipPosition, setTooltipPosition] = useState({ left: '0%' });
+ const sliderRef = useRef(null);
const [hoveredIndex, setHoveredIndex] = useState(null);
const { data: sessionData } = useSession();
const userId = String(sessionData?.accountId);
@@ -63,28 +62,39 @@ const Slider = ({ id }: { id: number }) => {
setHoveredIndex(null);
};
- // 일치하는 accountId의 raffleIndex 값을 기반으로 멈추는 위치를 계산
+ const handleMouseMove = (event) => {
+ const rect = sliderRef.current.getBoundingClientRect();
+ const xPos = event.clientX - rect.left; // Calculate mouse position within the slider
+ const relativePosition = (xPos / rect.width) * totalRange; // Convert to relative position within the total range
+
+ // Find the closest account based on mouse position
+ let closestAccount = null;
+ let minDiff = Infinity;
+ data.raffleMemberIndexInfos.forEach((member) => {
+ const diff = Math.abs(member.raffleIndex - relativePosition);
+ if (diff < minDiff) {
+ minDiff = diff;
+ closestAccount = member.accountId;
+ }
+ });
+ setHoveredAccount(closestAccount);
+ setTooltipPosition({ left: `${(xPos / rect.width) * 100}%` });
+ };
+
+ // pausePositions 계산 로직 변경
const pausePositions = data.rafflePickedIndexInfos
.map((winner) => {
- const matchingMemberIndex = data.raffleMemberIndexInfos.findIndex(
- (member) => member.accountId === winner.accountId,
- );
- if (matchingMemberIndex !== -1) {
- const currentPos = calculateLeftPosition(matchingMemberIndex);
- const nextPos =
- matchingMemberIndex < data.raffleMemberIndexInfos.length - 1
- ? calculateLeftPosition(matchingMemberIndex + 1)
- : 100;
- // 당첨자 위치와 그 다음 위치 사이의 중간점
- return (currentPos + nextPos) / 2;
- }
- return null;
+ return {
+ position: (winner.pickedIndex / totalRange) * 100,
+ pickedIndex: winner.pickedIndex,
+ };
})
- .filter((position) => position !== null);
+ .sort((a, b) => a.pickedIndex - b.pickedIndex) // pickedIndex를 기준으로 오름차순 정렬
+ .map((winner) => winner.position); // 최종적으로 포지션만 추출
// 동적으로 키프레임 생성
const generateKeyframes = () => {
- const keyframes: { [key: string]: { left: string } } = {
+ const keyframes = {
'0%': { left: '0%' },
};
@@ -93,16 +103,16 @@ const Slider = ({ id }: { id: number }) => {
const holdTime = 2; // 각 위치에서 멈출 시간 (초 단위)
const runningTime = totalDuration - holdTime * pausePositions.length; // 멈추지 않는 동안의 총 시간
- pausePositions?.forEach((position, i) => {
- const positionKey = `${(((position! * runningTime) / 100 + totalPauseTime) / totalDuration) * 100}%`;
+ pausePositions.forEach((position, i) => {
+ const positionKey = `${(((position * runningTime) / 100 + totalPauseTime) / totalDuration) * 100}%`;
keyframes[positionKey] = { left: `${position}%` };
totalPauseTime += holdTime;
- const holdKey = `${(((position! * runningTime) / 100 + totalPauseTime) / totalDuration) * 100}%`;
+ const holdKey = `${(((position * runningTime) / 100 + totalPauseTime) / totalDuration) * 100}%`;
keyframes[holdKey] = { left: `${position}%` };
});
- keyframes['100%'] = { left: 'calc(100%)' };
+ keyframes['100%'] = { left: '100%' };
return keyframes;
};
@@ -124,9 +134,14 @@ const Slider = ({ id }: { id: number }) => {
onClick={restartAnimation}
/>
-
-
-
-
- {data.rafflePickedIndexInfos.map((winner) => (
-
{winner.pickedIndex}
- ))}
- {data?.raffleMemberIndexInfos.map((member, index) => (
+
handleMouseEnter(member.accountId, index)}
- onMouseLeave={handleMouseLeave}
- >
- {member.accountId === userId && (
-
- {userId}
-
- )}
- {hoveredIndex === index && (
-
- )}
-
- ))}
-
- {hoveredAccount && (
+ className={`absolute top-0 h-full rounded-full bg-primary ${animate ? 'animate-fillTrack' : ''}`}
+ />
+
- {hoveredAccount}
-
- )}
+ />
+ {data?.raffleMemberIndexInfos.map((member, index) => (
+
handleMouseEnter(member.accountId, index)}
+ onMouseLeave={handleMouseLeave}
+ >
+ {member.accountId === userId && (
+
+ {userId}
+
+ )}
+ {hoveredIndex === index && (
+
+ )}
+
+ ))}
+ {data?.rafflePickedIndexInfos.map((winner, index) => (
+
+ 당첨
+
+ ))}
+ {hoveredAccount && (
+
+ {hoveredAccount}
+
+ )}
+