Feat: socket에도 token 얹기

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} />

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