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() {