From 1cb0a55eeba4c7cb74f482a4883ce5899d1f9bdb Mon Sep 17 00:00:00 2001 From: anttiey Date: Tue, 4 Feb 2025 14:36:14 +0900 Subject: [PATCH] =?UTF-8?q?:ambulance:=20=EC=9B=B9=EC=86=8C=EC=BC=93=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0=20URL=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/apis/websocket/websocket.ts | 2 +- frontend/src/hooks/PairRoom/usePairRoom.ts | 3 +-- frontend/src/hooks/PairRoom/useTimer.ts | 24 ++++++++++------------ frontend/src/hooks/PairRoom/useTodo.ts | 5 +++-- frontend/src/pages/PairRoom/PairRoom.tsx | 7 ++++--- frontend/src/stores/socketStore.ts | 2 +- 6 files changed, 21 insertions(+), 22 deletions(-) diff --git a/frontend/src/apis/websocket/websocket.ts b/frontend/src/apis/websocket/websocket.ts index ddfa66b78..a37f85e95 100644 --- a/frontend/src/apis/websocket/websocket.ts +++ b/frontend/src/apis/websocket/websocket.ts @@ -3,7 +3,7 @@ import { Client, Message } from '@stomp/stompjs'; const SOCKET_URL = process.env.REACT_SOCKET_API_URL; export const getConnection = () => { - return new Client({ brokerURL: `${SOCKET_URL}/ws-connect` }); + return new Client({ brokerURL: `${SOCKET_URL}/ws` }); }; export const subscribeTopic = (client: Client | null, destination: string, handler: (body: T) => void) => { diff --git a/frontend/src/hooks/PairRoom/usePairRoom.ts b/frontend/src/hooks/PairRoom/usePairRoom.ts index 4e40f08f2..188a3e7e8 100644 --- a/frontend/src/hooks/PairRoom/usePairRoom.ts +++ b/frontend/src/hooks/PairRoom/usePairRoom.ts @@ -31,9 +31,8 @@ const usePairRoom = () => { addToast({ status: 'ERROR', message: `웹소켓 연결 과정에서 오류가 발생했습니다. ${error}` }); }; - window.addEventListener('beforeunload', handleBeforeUnload); - client.activate(); + window.addEventListener('beforeunload', handleBeforeUnload); return () => { client.deactivate(); diff --git a/frontend/src/hooks/PairRoom/useTimer.ts b/frontend/src/hooks/PairRoom/useTimer.ts index 1398361e2..b6830dbdc 100644 --- a/frontend/src/hooks/PairRoom/useTimer.ts +++ b/frontend/src/hooks/PairRoom/useTimer.ts @@ -23,19 +23,18 @@ enum TimerStatus { UPDATE = 'update', } -const STATUS = TimerStatus; - const useTimer = (defaultTime: number, defaultTimeLeft: number, onTimerStop: () => void) => { + const navigate = useNavigate(); + const queryClient = useQueryClient(); + const { client, isConnected, accessCode } = useSocketStore(); + const { addToast } = useToastStore(); const [timeLeft, setTimeLeft] = useState(defaultTimeLeft); const [isActive, setIsActive] = useState(false); - const navigate = useNavigate(); - const queryClient = useQueryClient(); const alarmAudio = useRef(new Audio(AlarmSound)); - const { addToast } = useToastStore(); const { fireNotification } = useNotification(); const handleStart = () => { @@ -51,10 +50,9 @@ const useTimer = (defaultTime: number, defaultTimeLeft: number, onTimerStop: () setTimeLeft(defaultTime); onTimerStop(); + // 타이머 종료 알람 플레이 alarmAudio.current.play(); - fireNotification('타이머가 끝났어요!', '드라이버 / 내비게이터 역할을 바꿔 주세요!', { - requireInteraction: true, - }); + fireNotification('타이머가 끝났어요!', '드라이버 / 내비게이터 역할을 바꿔 주세요!', { requireInteraction: true }); addToast({ status: 'SUCCESS', message: '타이머가 종료되었습니다.' }); addToast({ status: 'INFO', message: '드라이버 / 내비게이터 역할을 바꿔 주세요!' }); @@ -71,23 +69,23 @@ const useTimer = (defaultTime: number, defaultTimeLeft: number, onTimerStop: () const handleTimerStatusEvent = (status: TimerStatus) => { switch (status) { - case STATUS.COMPLETE: + case TimerStatus.COMPLETE: navigate(`/room/${accessCode}/retrospectForm`, { state: { valid: true } }); addToast({ status: 'WARNING', message: '페어룸이 종료되었습니다.' }); break; - case STATUS.START: - case STATUS.RUNNING: + case TimerStatus.START: + case TimerStatus.RUNNING: setIsActive(true); addToast({ status: 'SUCCESS', message: '타이머가 시작되었습니다.' }); break; - case STATUS.PAUSE: + case TimerStatus.PAUSE: setIsActive(false); addToast({ status: 'WARNING', message: '타이머가 일시 정지되었습니다.' }); break; - case STATUS.UPDATE: + case TimerStatus.UPDATE: queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.GET_PAIR_ROOM_TIMER] }); addToast({ status: 'WARNING', message: '타이머 시간이 변경되었습니다.' }); break; diff --git a/frontend/src/hooks/PairRoom/useTodo.ts b/frontend/src/hooks/PairRoom/useTodo.ts index 00dceb3c2..4cba88dec 100644 --- a/frontend/src/hooks/PairRoom/useTodo.ts +++ b/frontend/src/hooks/PairRoom/useTodo.ts @@ -6,14 +6,15 @@ import { Todo } from '@/apis/http/todo'; import { subscribeTopic } from '@/apis/websocket/websocket'; const useTodo = (defaultTodos: Todo[]) => { - const [todos, setTodos] = useState(defaultTodos); - const { client, isConnected, accessCode } = useSocketStore(); + const [todos, setTodos] = useState(defaultTodos); + const handleTodos = (todos: Todo[]) => setTodos(todos); useEffect(() => { if (client && isConnected) { + // 전체 투두 subscribeTopic(client, `/topic/${accessCode}/todo`, handleTodos); } diff --git a/frontend/src/pages/PairRoom/PairRoom.tsx b/frontend/src/pages/PairRoom/PairRoom.tsx index 601ed88c9..16f483e37 100644 --- a/frontend/src/pages/PairRoom/PairRoom.tsx +++ b/frontend/src/pages/PairRoom/PairRoom.tsx @@ -24,13 +24,14 @@ const PairRoom = () => { const navigate = useNavigate(); const { accessCode } = useParams(); + // 웹소켓 연결 + usePairRoom(); + const { isConnected } = useSocketStore(); + const [driver, setDriver] = useState(''); const [navigator, setNavigator] = useState(''); const [isCardOpen, setIsCardOpen] = useState(false); - usePairRoom(); - const { isConnected } = useSocketStore(); - const { driver: latestDriver, navigator: latestNavigator, diff --git a/frontend/src/stores/socketStore.ts b/frontend/src/stores/socketStore.ts index 930b77bc3..74d97d638 100644 --- a/frontend/src/stores/socketStore.ts +++ b/frontend/src/stores/socketStore.ts @@ -15,8 +15,8 @@ const useSocketStore = create((set) => ({ isConnected: false, accessCode: '', setClient: (client) => set({ client }), - setAccessCode: (accessCode) => set({ accessCode }), setIsConnected: (isConnected) => set({ isConnected }), + setAccessCode: (accessCode) => set({ accessCode }), })); export default useSocketStore;