From 3b8f57a39e010670ba8aa97ca9fbf2b1631b7f63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=86=8C=EC=9A=B8=EC=B9=98=ED=82=A8?=
 <90738604+soulchicken@users.noreply.github.com>
Date: Tue, 10 Oct 2023 15:36:38 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20socket=EC=97=90=EB=8F=84=20token=20?=
 =?UTF-8?q?=EC=96=B9=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/chat/Header.tsx | 14 +++++++++-----
 src/store/socket.ts            | 15 +++++++++++----
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/chat/Header.tsx b/src/components/chat/Header.tsx
index 6d01948..ef8e881 100644
--- a/src/components/chat/Header.tsx
+++ b/src/components/chat/Header.tsx
@@ -3,6 +3,7 @@ import { css } from '@emotion/react';
 import useSocketStore from '@/store/socket';
 import useChatStore from '@/store/chat';
 import color from '@/styles/color';
+import { useSession } from 'next-auth/react';
 import FriendShip from './characterHeader/FriendShip';
 import CharacterInfo from './characterHeader/CharacterInfo';
 import SettingIcon from '../icons/SettingIcon';
@@ -25,19 +26,22 @@ const Header : FC<CharacterState> = ({
   });
   const { connect, setChatStore } = useSocketStore();
   const chatStore = useChatStore();
+  const { data: session } = useSession();
   useEffect(() => {
     fetch(`/api/userStatus/${characterId}`)
       .then((res) => res.json())
       .then((data) => { setUserStatus(data); });
-
+    setChatStore(chatStore);
+  }, []);
+  useEffect(() => {
     // WebSocket 연결하는 부분
     // TODO: /chat 페이지가 생기면 거기로 옮기는게 좋아보임
     //        root페이지에 넣기에는 이후 로그인 기능이 완성되면
     //        인증정보까지 같이 보내 연결해야 하기에 좋지 않음
-    connect();
-    setChatStore(chatStore);
-  }, []);
-
+    if (session?.accessToken) {
+      connect(session.accessToken);
+    }
+  }, [session]);
   return (
     <header css={headerCSS}>
       <CharacterInfo imageUrl={imageUrl} characterName={characterName} hashTag={hashTag} />
diff --git a/src/store/socket.ts b/src/store/socket.ts
index e084370..5821f09 100644
--- a/src/store/socket.ts
+++ b/src/store/socket.ts
@@ -3,10 +3,11 @@ import { Socket, io } from 'socket.io-client';
 import type { ChatState } from './chat';
 
 interface SocketState {
+  accessToken: string | null;
   socket?:Socket<ServerToClientEvents, ClientToServerEvents>;
   chatStore?: ChatState;
   processingmessageTime: Array<number>;
-  connect: () => void;
+  connect: (accessToken: string) => void;
   sendMessage: (characterId: string, characterName:string, message:string) => void;
   setChatStore: (chatSate:ChatState) => void;
 }
@@ -51,13 +52,18 @@ interface ClientToServerEvents {
 const useSocketStore = create<SocketState>((set, get) => ({
   processingmessageTime: [],
   chatInfo: null,
-  connect: () => {
+  accessToken: null,
+  connect: (accessToken) => {
+    if (!get().accessToken) {
+      set({ accessToken });
+    }
+
     if (!get().socket) {
       set(() => ({
         socket: io(process.env.NEXT_PUBLIC_SOCKET_URL || 'http://localhost:3000/', {
           path: '/ws',
           auth: {
-            token: process.env.EXAMPLE_TOKEN,
+            token: accessToken,
           },
         }),
       }));
@@ -103,7 +109,8 @@ const useSocketStore = create<SocketState>((set, get) => ({
         console.error(err);
       }
     } else if (!get().socket?.connected) {
-      get().connect();
+      const accessToekn = get().accessToken;
+      if (accessToekn) get().connect(accessToekn);
     }
   },
   setChatStore: (chatState:ChatState) => {