From 70311dbbe58b0a019d9f8cb8fd8d7d98e69aad77 Mon Sep 17 00:00:00 2001
From: hyonun321 <hyo_nun@kakao.com>
Date: Sun, 24 Nov 2024 20:58:08 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20socketStore=EC=97=90=20accessToken?=
 =?UTF-8?q?=EC=9D=98=EC=A1=B4=EC=84=B1=20=EB=B6=80=EC=97=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- socket 생성때 auth에서 사용한 accessToken을 활용
- null 일경우 guestWorkspace를 표현할 예정

#181
---
 client/src/App.tsx                  | 4 ++--
 client/src/stores/useSocketStore.ts | 8 +++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 8878f7b0..6ceda264 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -20,13 +20,13 @@ const App = () => {
 
   useEffect(() => {
     const socketStore = useSocketStore.getState();
-    socketStore.init();
+    socketStore.init(accessToken);
     return () => {
       setTimeout(() => {
         socketStore.cleanup();
       }, 0);
     };
-  }, []);
+  }, [accessToken]);
 
   return (
     <>
diff --git a/client/src/stores/useSocketStore.ts b/client/src/stores/useSocketStore.ts
index ec5f8a03..0cb0b8ed 100644
--- a/client/src/stores/useSocketStore.ts
+++ b/client/src/stores/useSocketStore.ts
@@ -16,7 +16,7 @@ interface SocketStore {
   socket: Socket | null;
   clientId: number | null;
   workspace: WorkSpaceSerializedProps | null;
-  init: () => void;
+  init: (accessToken: string | null) => void;
   cleanup: () => void;
   fetchWorkspaceData: () => WorkSpaceSerializedProps | null;
   sendPageCreateOperation: (operation: RemotePageCreateOperation) => void;
@@ -51,9 +51,8 @@ export const useSocketStore = create<SocketStore>((set, get) => ({
   clientId: null,
   workspace: null,
 
-  init: () => {
+  init: (accessToken: string | null) => {
     const { socket: existingSocket } = get();
-    if (existingSocket?.connected) return;
 
     if (existingSocket) {
       existingSocket.disconnect();
@@ -68,6 +67,9 @@ export const useSocketStore = create<SocketStore>((set, get) => ({
       withCredentials: true,
       reconnectionAttempts: 5,
       reconnectionDelay: 1000,
+      auth: {
+        token: accessToken,
+      },
       autoConnect: false,
     });