diff --git a/src/features/map/collaboration/CollabCursorsOverlay.tsx b/src/features/map/collaboration/CollabCursorsOverlay.tsx index 7511d20a..9b3aab2d 100644 --- a/src/features/map/collaboration/CollabCursorsOverlay.tsx +++ b/src/features/map/collaboration/CollabCursorsOverlay.tsx @@ -1,7 +1,7 @@ 'use client'; import { useEffect, useRef } from 'react'; -import { useMyPresence, useOthers } from './liveblocks.config'; +import { useMyPresence, useOthers } from '@liveblocks/react'; import { useMapStore } from '../hooks/useMapStore'; import { escapeHtml } from '../utils/formatters'; import { mapIconSvg } from '../utils/mapIconSvg'; diff --git a/src/features/map/collaboration/CollabParticipants.tsx b/src/features/map/collaboration/CollabParticipants.tsx index ae287aa9..5cf987c2 100644 --- a/src/features/map/collaboration/CollabParticipants.tsx +++ b/src/features/map/collaboration/CollabParticipants.tsx @@ -1,7 +1,7 @@ 'use client'; import styled from '@emotion/styled'; -import { useSelf, useOthers } from './liveblocks.config'; +import { useSelf, useOthers } from '@liveblocks/react'; import { palette, meok, ringShadow } from '@/design-system/tokens'; const USER_COLORS = [ diff --git a/src/features/map/collaboration/MapCollabProvider.tsx b/src/features/map/collaboration/MapCollabProvider.tsx index f4024ecc..1ee9e9a5 100644 --- a/src/features/map/collaboration/MapCollabProvider.tsx +++ b/src/features/map/collaboration/MapCollabProvider.tsx @@ -2,9 +2,21 @@ import { Component, createContext, useContext, useRef, type ReactNode } from 'react'; import { LiveList } from '@liveblocks/client'; -import { RoomProvider } from './liveblocks.config'; +import { LiveblocksProvider, RoomProvider } from '@liveblocks/react'; import { useAuth } from '@/features/auth'; +async function liveblocksAuthEndpoint(roomId?: string): Promise<{ token: string }> { + const room = (roomId ?? '').replace(/^map-collab-/, ''); + const res = await fetch('/api/liveblocks-auth', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ room }), + credentials: 'include', + }); + if (!res.ok) throw new Error(`Liveblocks auth failed: ${res.status}`); + return res.json(); +} + // true = inside a live RoomProvider; false = error fallback path (no RoomProvider) export const CollabActiveContext = createContext(false); export const useCollabActive = () => useContext(CollabActiveContext); @@ -33,6 +45,7 @@ export function MapCollabProvider({ roomId, children }: Props) { return ( + + ); } diff --git a/src/features/map/collaboration/liveblocks.config.ts b/src/features/map/collaboration/liveblocks.config.ts index ca16e17c..fe6a4931 100644 --- a/src/features/map/collaboration/liveblocks.config.ts +++ b/src/features/map/collaboration/liveblocks.config.ts @@ -1,22 +1,5 @@ -import { createClient } from '@liveblocks/client'; -import { createRoomContext } from '@liveblocks/react'; import type { LiveList } from '@liveblocks/client'; -export const client = createClient({ - authEndpoint: async (roomId) => { - // roomId = "map-collab-", 뒤의 UUID만 추출해서 서버에 전송 - const room = (roomId ?? '').replace(/^map-collab-/, ''); - const res = await fetch('/api/liveblocks-auth', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ room }), - credentials: 'include', - }); - if (!res.ok) throw new Error(`Liveblocks auth failed: ${res.status}`); - return res.json(); - }, -}); - export type CollabPin = { placeId: string; placeName: string; @@ -25,22 +8,18 @@ export type CollabPin = { userId: string; }; -export type Presence = { - cursor: { lat: number; lng: number } | null; - userId: string; - nickname: string; - profileImage: string | null; -}; - -export type Storage = { - pins: LiveList; -}; +declare global { + interface Liveblocks { + Presence: { + cursor: { lat: number; lng: number } | null; + userId: string; + nickname: string; + profileImage: string | null; + }; + Storage: { + pins: LiveList; + }; + } +} -export const { - RoomProvider, - useOthers, - useMyPresence, - useStorage, - useMutation, - useSelf, -} = createRoomContext(client); +export {}; diff --git a/src/features/map/collaboration/useCollabPins.ts b/src/features/map/collaboration/useCollabPins.ts index d1e1c9fc..cea82f32 100644 --- a/src/features/map/collaboration/useCollabPins.ts +++ b/src/features/map/collaboration/useCollabPins.ts @@ -1,6 +1,6 @@ 'use client'; -import { useStorage, useMutation } from './liveblocks.config'; +import { useStorage, useMutation } from '@liveblocks/react'; import type { CollabPin } from './liveblocks.config'; export function useCollabPins() {