From 375cbb148327f57e1df4c0842a2614247750fedf Mon Sep 17 00:00:00 2001
From: hyonun321 <hyo_nun@kakao.com>
Date: Fri, 29 Nov 2024 23:42:09 +0900
Subject: [PATCH 01/15] =?UTF-8?q?feat:=20InviteModal=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#71
---
 .../src/components/modal/InviteModal.style.ts | 39 +++++++++++++++++
 client/src/components/modal/InviteModal.tsx   | 42 +++++++++++++++++++
 2 files changed, 81 insertions(+)
 create mode 100644 client/src/components/modal/InviteModal.style.ts
 create mode 100644 client/src/components/modal/InviteModal.tsx

diff --git a/client/src/components/modal/InviteModal.style.ts b/client/src/components/modal/InviteModal.style.ts
new file mode 100644
index 00000000..cc6cb8c8
--- /dev/null
+++ b/client/src/components/modal/InviteModal.style.ts
@@ -0,0 +1,39 @@
+// InviteModal.style.ts
+import { css } from "@styled-system/css";
+
+export const modalContentContainer = css({
+  display: "flex",
+  gap: "16px",
+  flexDirection: "column",
+  width: "400px",
+  padding: "16px",
+});
+
+export const titleText = css({
+  color: "gray.800",
+  fontSize: "xl",
+  fontWeight: "bold",
+});
+
+export const descriptionText = css({
+  color: "gray.600",
+  fontSize: "sm",
+});
+
+export const emailInput = css({
+  outline: "none",
+  border: "1px solid",
+  borderColor: "gray.200",
+  borderRadius: "md",
+  // 기본 input 스타일 추가
+  width: "100%",
+  padding: "8px 12px",
+  fontSize: "sm",
+  _placeholder: {
+    color: "gray.400",
+  },
+  _focus: {
+    borderColor: "blue.500",
+    boxShadow: "0 0 0 1px blue.500",
+  },
+});
diff --git a/client/src/components/modal/InviteModal.tsx b/client/src/components/modal/InviteModal.tsx
new file mode 100644
index 00000000..e6779dce
--- /dev/null
+++ b/client/src/components/modal/InviteModal.tsx
@@ -0,0 +1,42 @@
+// InviteModal.tsx
+import { useState } from "react";
+import { modalContentContainer, titleText, descriptionText, emailInput } from "./InviteModal.style";
+import { Modal } from "./modal";
+
+interface InviteModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onInvite: (email: string) => void;
+}
+
+export const InviteModal = ({ isOpen, onClose, onInvite }: InviteModalProps) => {
+  const [email, setEmail] = useState("");
+
+  const handleInvite = () => {
+    onInvite(email);
+    setEmail("");
+    onClose();
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      primaryButtonLabel="초대하기"
+      primaryButtonOnClick={handleInvite}
+      secondaryButtonLabel="취소"
+      secondaryButtonOnClick={onClose}
+    >
+      <div className={modalContentContainer}>
+        <h2 className={titleText}>워크스페이스 초대</h2>
+        <p className={descriptionText}>초대할 사용자의 이메일을 입력해주세요</p>
+        <input
+          className={emailInput}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="이메일 주소 입력"
+          type="email"
+          value={email}
+        />
+      </div>
+    </Modal>
+  );
+};

From c18ec74f383580c5acbf0084e3b56131c0fb3ca6 Mon Sep 17 00:00:00 2001
From: hyonun321 <hyo_nun@kakao.com>
Date: Fri, 29 Nov 2024 23:42:32 +0900
Subject: [PATCH 02/15] =?UTF-8?q?feat:=20InviteButton=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#71
---
 .../components/InviteButton.style.ts          | 19 +++++++++++++++++++
 .../components/components/InviteButton.tsx    | 15 +++++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 client/src/components/sidebar/components/menuButton/components/components/InviteButton.style.ts
 create mode 100644 client/src/components/sidebar/components/menuButton/components/components/InviteButton.tsx

diff --git a/client/src/components/sidebar/components/menuButton/components/components/InviteButton.style.ts b/client/src/components/sidebar/components/menuButton/components/components/InviteButton.style.ts
new file mode 100644
index 00000000..bac3731c
--- /dev/null
+++ b/client/src/components/sidebar/components/menuButton/components/components/InviteButton.style.ts
@@ -0,0 +1,19 @@
+import { css } from "@styled-system/css";
+
+export const inviteButtonStyle = css({
+  display: "flex",
+  gap: "32px",
+  alignItems: "center",
+  borderTop: "1px solid",
+  borderColor: "gray.200",
+
+  width: "100%",
+  padding: "12px 16px",
+  color: "gray.600",
+  backgroundColor: "transparent",
+  transition: "all 0.2s",
+  cursor: "pointer",
+  _hover: {
+    backgroundColor: "gray.200",
+  },
+});
diff --git a/client/src/components/sidebar/components/menuButton/components/components/InviteButton.tsx b/client/src/components/sidebar/components/menuButton/components/components/InviteButton.tsx
new file mode 100644
index 00000000..62090c80
--- /dev/null
+++ b/client/src/components/sidebar/components/menuButton/components/components/InviteButton.tsx
@@ -0,0 +1,15 @@
+import Plus from "@assets/icons/plusIcon.svg?react";
+import { inviteButtonStyle } from "./InviteButton.style";
+
+interface InviteButtonProps {
+  onClick: () => void;
+}
+
+export const InviteButton = ({ onClick }: InviteButtonProps) => {
+  return (
+    <button onClick={onClick} className={inviteButtonStyle}>
+      <Plus />
+      <span>워크스페이스 초대하기</span>
+    </button>
+  );
+};

From af1260781943b4c94574c3a1ac2c4a7af0c20ed9 Mon Sep 17 00:00:00 2001
From: hyonun321 <hyo_nun@kakao.com>
Date: Fri, 29 Nov 2024 23:43:05 +0900
Subject: [PATCH 03/15] =?UTF-8?q?feat:=20InviteButton=20=EB=88=84=EB=A5=B4?=
 =?UTF-8?q?=EB=A9=B4=20InviteModal=EC=9D=84=20=ED=91=9C=EC=8B=9C=ED=95=98?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#71
---
 .../components/menuButton/MenuButton.tsx      | 30 +++++++++++++------
 .../components/WorkspaceSelectModal.tsx       | 20 +++++++++----
 .../components/WorkspaceSelectItem.style.tsx  | 17 ++++++++---
 .../components/WorkspaceSelectItem.tsx        | 10 +++++--
 4 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/client/src/components/sidebar/components/menuButton/MenuButton.tsx b/client/src/components/sidebar/components/menuButton/MenuButton.tsx
index 4b9a3948..746bb679 100644
--- a/client/src/components/sidebar/components/menuButton/MenuButton.tsx
+++ b/client/src/components/sidebar/components/menuButton/MenuButton.tsx
@@ -1,4 +1,6 @@
 import { useState, useEffect } from "react";
+import { InviteModal } from "@src/components/modal/InviteModal";
+import { useModal } from "@src/components/modal/useModal";
 import { useUserInfo } from "@stores/useUserStore";
 import { menuItemWrapper, textBox, menuButtonContainer } from "./MenuButton.style";
 import { MenuIcon } from "./components/MenuIcon";
@@ -7,12 +9,16 @@ import { WorkspaceSelectModal } from "./components/WorkspaceSelectModal";
 export const MenuButton = () => {
   const { name } = useUserInfo();
   const [isOpen, setIsOpen] = useState(false);
+  const {
+    isOpen: isInviteModalOpen,
+    openModal: openInviteModal,
+    closeModal: closeInviteModal,
+  } = useModal();
 
   const handleMenuClick = () => {
-    setIsOpen((prev) => !prev); // 토글 형태로 변경
+    setIsOpen((prev) => !prev);
   };
 
-  // 모달 외부 클릭시 닫기 처리를 위한 함수
   const handleClickOutside = (e: MouseEvent) => {
     const target = e.target as HTMLElement;
     if (!target.closest(`.menu_button_container`)) {
@@ -20,7 +26,6 @@ export const MenuButton = () => {
     }
   };
 
-  // 외부 클릭 이벤트 리스너 등록
   useEffect(() => {
     document.addEventListener("mousedown", handleClickOutside);
     return () => {
@@ -28,13 +33,20 @@ export const MenuButton = () => {
     };
   }, []);
 
+  const handleInvite = (email: string) => {
+    console.log("Invite user:", email);
+  };
+
   return (
-    <button className={`${menuButtonContainer} menu_button_container`} onClick={handleMenuClick}>
-      <button className={menuItemWrapper}>
-        <MenuIcon />
-        <p className={textBox}>{name ?? "Nocta"}</p>
+    <>
+      <button className={`${menuButtonContainer} menu_button_container`} onClick={handleMenuClick}>
+        <button className={menuItemWrapper}>
+          <MenuIcon />
+          <p className={textBox}>{name ?? "Nocta"}</p>
+        </button>
+        <WorkspaceSelectModal isOpen={isOpen} userName={name} onInviteClick={openInviteModal} />
       </button>
-      <WorkspaceSelectModal isOpen={isOpen} userName={name} />
-    </button>
+      <InviteModal isOpen={isInviteModalOpen} onClose={closeInviteModal} onInvite={handleInvite} />
+    </>
   );
 };
diff --git a/client/src/components/sidebar/components/menuButton/components/WorkspaceSelectModal.tsx b/client/src/components/sidebar/components/menuButton/components/WorkspaceSelectModal.tsx
index 7f3980a8..c18d63a7 100644
--- a/client/src/components/sidebar/components/menuButton/components/WorkspaceSelectModal.tsx
+++ b/client/src/components/sidebar/components/menuButton/components/WorkspaceSelectModal.tsx
@@ -7,22 +7,29 @@ import {
   workspaceModalContainer,
   textBox,
 } from "./WorkspaceSelectModal.style";
+import { InviteButton } from "./components/InviteButton";
 import { WorkspaceSelectItem } from "./components/WorkspaceSelectItem";
 
 interface WorkspaceSelectModalProps {
   isOpen: boolean;
   userName: string | null;
+  onInviteClick: () => void;
 }
 
-export const WorkspaceSelectModal = ({ isOpen, userName }: WorkspaceSelectModalProps) => {
+export const WorkspaceSelectModal = ({
+  isOpen,
+  userName,
+  onInviteClick,
+}: WorkspaceSelectModalProps) => {
   const modalRef = useRef<HTMLDivElement>(null);
-  const { availableWorkspaces } = useSocketStore(); // 소켓 스토어에서 직접 워크스페이스 목록 가져오기
+  const { availableWorkspaces } = useSocketStore();
 
   const informText = userName
     ? availableWorkspaces.length > 0
       ? ""
       : "접속할 수 있는 워크스페이스가 없습니다."
     : `다른 워크스페이스 기능은\n 회원전용 입니다`;
+
   return (
     <motion.div
       ref={modalRef}
@@ -45,9 +52,12 @@ export const WorkspaceSelectModal = ({ isOpen, userName }: WorkspaceSelectModalP
     >
       <div className={workspaceListContainer}>
         {userName && availableWorkspaces.length > 0 ? (
-          availableWorkspaces.map((workspace) => (
-            <WorkspaceSelectItem key={workspace.id} userName={userName} {...workspace} />
-          ))
+          <>
+            {availableWorkspaces.map((workspace) => (
+              <WorkspaceSelectItem key={workspace.id} userName={userName} {...workspace} />
+            ))}
+            <InviteButton onClick={onInviteClick} />
+          </>
         ) : (
           <p className={textBox}>{informText}</p>
         )}
diff --git a/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.style.tsx b/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.style.tsx
index 568d9316..7154036c 100644
--- a/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.style.tsx
+++ b/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.style.tsx
@@ -5,14 +5,22 @@ export const itemContainer = css({
   display: "flex",
   justifyContent: "space-between",
   alignItems: "center",
-  padding: "md",
+  padding: "8px",
   cursor: "pointer",
-  _hover: { backgroundColor: "gray.100" },
+  _hover: { backgroundColor: "gray.200" },
 });
 
+export const informBox = css({
+  display: "flex",
+  gap: "16px",
+  justifyContent: "center",
+  alignItems: "center",
+  marginLeft: "14px",
+});
 export const itemContent = css({
   display: "flex",
-  gap: "2",
+  flex: 1,
+  gap: "10",
   alignItems: "center",
 });
 
@@ -24,12 +32,13 @@ export const itemIcon = css({
   width: "8",
   height: "8",
   fontSize: "sm",
-  backgroundColor: "gray.200",
+  backgroundColor: "gray.100",
 });
 
 export const itemInfo = css({
   display: "flex",
   flexDirection: "column",
+  alignItems: "center",
 });
 
 export const itemName = css({
diff --git a/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.tsx b/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.tsx
index cdd64344..c257f61c 100644
--- a/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.tsx
+++ b/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.tsx
@@ -9,6 +9,7 @@ import {
   itemMemberCount,
   itemName,
   itemRole,
+  informBox,
 } from "./WorkspaceSelectItem.style";
 
 interface WorkspaceSelectItemProps extends WorkspaceListItem {
@@ -28,11 +29,14 @@ export const WorkspaceSelectItem = ({ id, name, role, memberCount }: WorkspaceSe
         <div className={itemIcon}>{name.charAt(0)}</div>
         <div className={itemInfo}>
           <span className={itemName}>{name}</span>
-          <span className={itemMemberCount}>{role}</span>
+          <div className={informBox}>
+            <span className={itemMemberCount}>{role}</span>
+            {memberCount !== undefined && (
+              <span className={itemRole}>접속자수 : {memberCount} 명 </span>
+            )}
+          </div>
         </div>
       </div>
-
-      {memberCount !== undefined && <span className={itemRole}>접속자수 : {memberCount} 명 </span>}
     </button>
   );
 };

From 2775b5f80f5c7d773105756e38672767fe1656dd Mon Sep 17 00:00:00 2001
From: hyonun321 <hyo_nun@kakao.com>
Date: Sat, 30 Nov 2024 00:56:26 +0900
Subject: [PATCH 04/15] =?UTF-8?q?feat:=20toast=EB=A5=BC=20=ED=86=B5?=
 =?UTF-8?q?=ED=95=B4=20=EC=B4=88=EB=8C=80,=20=EC=B4=88=EB=8C=80=EB=90=A8,?=
 =?UTF-8?q?=20=EC=B4=88=EB=8C=80=EA=B1=B0=EB=B6=80=20=EB=93=B1=EC=9D=98=20?=
 =?UTF-8?q?=EB=A9=94=EC=84=B8=EC=A7=80=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 서버쪽의 workspace/list 를 초대받은 유저에게 재송신
- 유저의 아이디를 toast에 표시하게 수정

#71
---
 .../components/menuButton/MenuButton.tsx      | 48 +++++++++-
 server/src/auth/auth.service.ts               |  3 +
 server/src/workspace/workspace.gateway.ts     | 89 ++++++++++++++++++-
 server/src/workspace/workspace.interface.ts   |  4 +
 4 files changed, 139 insertions(+), 5 deletions(-)
 create mode 100644 server/src/workspace/workspace.interface.ts

diff --git a/client/src/components/sidebar/components/menuButton/MenuButton.tsx b/client/src/components/sidebar/components/menuButton/MenuButton.tsx
index 746bb679..866b70b8 100644
--- a/client/src/components/sidebar/components/menuButton/MenuButton.tsx
+++ b/client/src/components/sidebar/components/menuButton/MenuButton.tsx
@@ -1,6 +1,8 @@
 import { useState, useEffect } from "react";
 import { InviteModal } from "@src/components/modal/InviteModal";
 import { useModal } from "@src/components/modal/useModal";
+import { useSocketStore } from "@src/stores/useSocketStore";
+import { useToastStore } from "@src/stores/useToastStore";
 import { useUserInfo } from "@stores/useUserStore";
 import { menuItemWrapper, textBox, menuButtonContainer } from "./MenuButton.style";
 import { MenuIcon } from "./components/MenuIcon";
@@ -9,6 +11,8 @@ import { WorkspaceSelectModal } from "./components/WorkspaceSelectModal";
 export const MenuButton = () => {
   const { name } = useUserInfo();
   const [isOpen, setIsOpen] = useState(false);
+  const { socket, workspace } = useSocketStore();
+  const { addToast } = useToastStore();
   const {
     isOpen: isInviteModalOpen,
     openModal: openInviteModal,
@@ -33,10 +37,50 @@ export const MenuButton = () => {
     };
   }, []);
 
+  useEffect(() => {
+    if (!socket) return;
+
+    // 초대 성공 응답 수신
+    socket.on(
+      "invite/workspace/success",
+      (data: { email: string; workspaceId: string; message: string }) => {
+        addToast(data.message);
+        closeInviteModal();
+      },
+    );
+
+    // 초대 실패 응답 수신
+    socket.on(
+      "invite/workspace/fail",
+      (data: { email: string; workspaceId: string; message: string }) => {
+        addToast(data.message);
+        closeInviteModal();
+      },
+    );
+
+    // 초대 받은 경우 수신
+    socket.on(
+      "workspace/invited",
+      (data: { workspaceId: string; invitedBy: string; message: string }) => {
+        addToast(data.message);
+      },
+    );
+
+    return () => {
+      socket.off("invite/workspace/success");
+      socket.off("invite/workspace/fail");
+      socket.off("workspace/invited");
+    };
+  }, [socket]);
+
   const handleInvite = (email: string) => {
-    console.log("Invite user:", email);
-  };
+    if (!socket || !workspace?.id) return;
 
+    socket.emit("invite/workspace", {
+      email,
+      workspaceId: workspace.id,
+    });
+  };
   return (
     <>
       <button className={`${menuButtonContainer} menu_button_container`} onClick={handleMenuClick}>
diff --git a/server/src/auth/auth.service.ts b/server/src/auth/auth.service.ts
index 844487af..88faa464 100644
--- a/server/src/auth/auth.service.ts
+++ b/server/src/auth/auth.service.ts
@@ -28,6 +28,9 @@ export class AuthService {
       name,
     });
   }
+  async addWorkspace(userId: string, workspaceId: string): Promise<void> {
+    await this.userModel.updateOne({ id: userId }, { $addToSet: { workspaces: workspaceId } });
+  }
 
   async findById(id: string): Promise<User | null> {
     return this.userModel.findOne({ id });
diff --git a/server/src/workspace/workspace.gateway.ts b/server/src/workspace/workspace.gateway.ts
index 1d12ce66..be780ed4 100644
--- a/server/src/workspace/workspace.gateway.ts
+++ b/server/src/workspace/workspace.gateway.ts
@@ -27,11 +27,13 @@ import { Logger } from "@nestjs/common";
 import { nanoid } from "nanoid";
 import { Page } from "@noctaCrdt/Page";
 import { EditorCRDT } from "@noctaCrdt/Crdt";
-
+import { AuthService } from "../auth/auth.service";
+import { WorkspaceInviteData } from "./workspace.interface";
 // 클라이언트 맵 타입 정의
 interface ClientInfo {
-  clientId: number;
+  clientId: number; // 서버가 부여한 아이디로, 0,1,2,3, 같은 숫자임.
   connectionTime: Date;
+  email: string;
 }
 
 interface BatchOperation {
@@ -68,7 +70,10 @@ export class WorkspaceGateway implements OnGatewayInit, OnGatewayConnection, OnG
   private clientIdCounter: number = 1;
   private clientMap: Map<string, ClientInfo> = new Map();
   private batchMap: Map<string, BatchOperation[]> = new Map();
-  constructor(private readonly workSpaceService: WorkSpaceService) {}
+  constructor(
+    private readonly workSpaceService: WorkSpaceService,
+    private readonly authService: AuthService,
+  ) {}
 
   afterInit(server: Server) {
     this.workSpaceService.setServer(server);
@@ -130,6 +135,7 @@ export class WorkspaceGateway implements OnGatewayInit, OnGatewayConnection, OnG
         }
         client.join(workspaceId);
       }
+      const user = await this.authService.findById(userId);
 
       client.data.workspaceId = workspaceId;
       const currentWorkSpace = (await this.workSpaceService.getWorkspace(workspaceId)).serialize();
@@ -139,6 +145,7 @@ export class WorkspaceGateway implements OnGatewayInit, OnGatewayConnection, OnG
       const clientInfo: ClientInfo = {
         clientId: assignedId,
         connectionTime: new Date(),
+        email: user?.email || "guest", // email 정보 저장
       };
       this.clientMap.set(client.id, clientInfo);
       client.emit("assign/clientId", assignedId);
@@ -191,6 +198,82 @@ export class WorkspaceGateway implements OnGatewayInit, OnGatewayConnection, OnG
     }
   }
 
+  @SubscribeMessage("invite/workspace")
+  async handleWorkspaceInvite(
+    @MessageBody() data: WorkspaceInviteData,
+    @ConnectedSocket() client: Socket,
+  ): Promise<void> {
+    const clientInfo = this.clientMap.get(client.id);
+    if (!clientInfo) {
+      throw new WsException("Client information not found");
+    }
+
+    try {
+      // 1. 초대받을 사용자 확인
+      const targetUser = await this.authService.findByEmail(data.email);
+      const sentUser = await this.authService.findByEmail(clientInfo.email);
+      if (!targetUser) {
+        client.emit("invite/workspace/fail", {
+          email: data.email,
+          workspaceId: data.workspaceId,
+          message: "유저가 존재하지 않습니다.",
+        });
+        throw new WsException("User not found");
+      }
+
+      // 2. 이미 워크스페이스 멤버인지 확인
+      if (targetUser.workspaces.includes(data.workspaceId)) {
+        client.emit("invite/workspace/fail", {
+          email: data.email,
+          workspaceId: data.workspaceId,
+          message: "유저가 이미 워크스페이스에 존재합니다.",
+        });
+        throw new WsException("User is already a member of this workspace");
+      }
+
+      // 3. 워크스페이스에 사용자 추가
+      await this.authService.addWorkspace(targetUser.id, data.workspaceId);
+
+      const targetSocket = Array.from(this.clientMap.entries()).find(
+        ([_, info]) => info.email === targetUser.email,
+      );
+
+      if (targetSocket) {
+        const [socketId] = targetSocket;
+        const server = this.workSpaceService.getServer();
+        server.to(socketId).emit("workspace/invited", {
+          workspaceId: data.workspaceId,
+          invitedUserId: client.data.userId,
+          message: `${sentUser.name}님이 초대하셨습니다.`,
+        });
+
+        const workspaces = await this.workSpaceService.getUserWorkspaces(targetUser.id);
+        const workspaceList = workspaces.map((workspace) => ({
+          id: workspace.id,
+          name: workspace.name,
+          role: workspace.role,
+          memberCount: workspace.memberCount,
+        }));
+
+        this.logger.log(`Sending workspace list to client ${client.id}`);
+        server.to(socketId).emit("workspace/list", workspaceList);
+      }
+
+      // 5. 초대한 사용자에게 성공 메시지
+      client.emit("invite/workspace/success", {
+        email: data.email,
+        workspaceId: data.workspaceId,
+        message: `${targetUser.name}유저를 초대하였습니다.`,
+      });
+    } catch (error) {
+      this.logger.error(
+        `Workspace Invite 처리 중 오류 발생 - Client ID: ${clientInfo.clientId}`,
+        error.stack,
+      );
+      throw new WsException(`Invite 실패: ${error.message}`);
+    }
+  }
+
   /**
    * 페이지 참여 처리
    * 클라이언트가 특정 페이지에 참여할 때 호출됨
diff --git a/server/src/workspace/workspace.interface.ts b/server/src/workspace/workspace.interface.ts
new file mode 100644
index 00000000..3e8e525f
--- /dev/null
+++ b/server/src/workspace/workspace.interface.ts
@@ -0,0 +1,4 @@
+export interface WorkspaceInviteData {
+  email: string;
+  workspaceId: string;
+}

From 47f74da0697b7f7198aa0b441a11bfd61dea319b Mon Sep 17 00:00:00 2001
From: hyonun321 <hyo_nun@kakao.com>
Date: Sat, 30 Nov 2024 15:41:46 +0900
Subject: [PATCH 05/15] =?UTF-8?q?feat:=20=ED=98=84=EC=9E=AC=20=EC=A0=91?=
 =?UTF-8?q?=EC=86=8D=EC=A4=91=EC=9D=B8=20=EC=9B=8C=ED=81=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=8A=A4=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#63
---
 .../components/WorkspaceSelectItem.style.tsx       | 14 +++++++++++++-
 .../components/components/WorkspaceSelectItem.tsx  | 10 +++++++---
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.style.tsx b/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.style.tsx
index 7154036c..4a342a07 100644
--- a/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.style.tsx
+++ b/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.style.tsx
@@ -5,7 +5,10 @@ export const itemContainer = css({
   display: "flex",
   justifyContent: "space-between",
   alignItems: "center",
-  padding: "8px",
+  borderLeft: "3px solid transparent", // 활성화되지 않았을 때 border 공간 확보
+  width: "100%",
+  padding: "8px 16px",
+  transition: "all 0.2s",
   cursor: "pointer",
   _hover: { backgroundColor: "gray.200" },
 });
@@ -24,6 +27,15 @@ export const itemContent = css({
   alignItems: "center",
 });
 
+export const activeItem = css({
+  borderLeft: "3px solid", // 왼쪽 하이라이트 바
+  borderLeftColor: "blue", // 포인트 컬러
+  backgroundColor: "rgba(0, 0, 0, 0.05)", // 약간 어두운 배경
+  _hover: {
+    backgroundColor: "rgba(0, 0, 0, 0.08)", // 호버 시 약간 더 어둡게
+  },
+});
+
 export const itemIcon = css({
   display: "flex",
   justifyContent: "center",
diff --git a/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.tsx b/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.tsx
index c257f61c..8be5dc10 100644
--- a/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.tsx
+++ b/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.tsx
@@ -10,6 +10,7 @@ import {
   itemName,
   itemRole,
   informBox,
+  activeItem, // 추가: 활성화된 아이템 스타일
 } from "./WorkspaceSelectItem.style";
 
 interface WorkspaceSelectItemProps extends WorkspaceListItem {
@@ -18,13 +19,16 @@ interface WorkspaceSelectItemProps extends WorkspaceListItem {
 
 export const WorkspaceSelectItem = ({ id, name, role, memberCount }: WorkspaceSelectItemProps) => {
   const { userId } = useUserInfo();
-  const switchWorkspace = useSocketStore((state) => state.switchWorkspace);
+  const { workspace, switchWorkspace } = useSocketStore();
+  const isActive = workspace?.id === id; // 현재 워크스페이스 확인
   const handleClick = () => {
-    switchWorkspace(userId, id);
+    if (!isActive) {
+      switchWorkspace(userId, id);
+    }
   };
 
   return (
-    <button className={itemContainer} onClick={handleClick}>
+    <button className={`${itemContainer} ${isActive ? activeItem : ""}`} onClick={handleClick}>
       <div className={itemContent}>
         <div className={itemIcon}>{name.charAt(0)}</div>
         <div className={itemInfo}>

From 15967aaafb77508da69061555c3851223e1d17d8 Mon Sep 17 00:00:00 2001
From: hyonun321 <hyo_nun@kakao.com>
Date: Sat, 30 Nov 2024 15:42:04 +0900
Subject: [PATCH 06/15] =?UTF-8?q?style:=20=EC=9B=8C=ED=81=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=8A=A4=20=EA=B0=84=EA=B2=A9=20=EC=B6=95?=
 =?UTF-8?q?=EC=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../menuButton/components/WorkspaceSelectModal.style.ts         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/sidebar/components/menuButton/components/WorkspaceSelectModal.style.ts b/client/src/components/sidebar/components/menuButton/components/WorkspaceSelectModal.style.ts
index a1b43b59..a5c1225d 100644
--- a/client/src/components/sidebar/components/menuButton/components/WorkspaceSelectModal.style.ts
+++ b/client/src/components/sidebar/components/menuButton/components/WorkspaceSelectModal.style.ts
@@ -3,7 +3,7 @@ import { glassContainer } from "@styled-system/recipes";
 
 export const workspaceListContainer = css({
   display: "flex",
-  gap: "sm",
+  gap: "8px",
   flexDirection: "column",
   padding: "md",
 });

From 7ce515732cad878c60ce0c85de51fa7b353c46b4 Mon Sep 17 00:00:00 2001
From: hyonun321 <hyo_nun@kakao.com>
Date: Sat, 30 Nov 2024 15:43:10 +0900
Subject: [PATCH 07/15] =?UTF-8?q?feat:=20sesstion=20=EC=8A=A4=ED=86=A0?=
 =?UTF-8?q?=EB=A6=AC=EC=A7=80=EC=97=90=20=ED=98=84=EC=9E=AC=20workspace=20?=
 =?UTF-8?q?=EC=A0=80=EC=9E=A5=ED=95=98=EC=97=AC=20=EC=83=88=EB=A1=9C?=
 =?UTF-8?q?=EA=B3=A0=EC=B9=A8=ED=95=B4=EB=8F=84=20=EC=B4=88=EA=B8=B0?=
 =?UTF-8?q?=EB=B3=B4=EC=9D=B4=EB=8A=94=20workspace=EA=B0=80=20=EA=B7=B8?=
 =?UTF-8?q?=EB=8C=80=EB=A1=9C=20=EC=9C=A0=EC=A7=80=EB=90=98=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 현재 init으로 null로 초기 정보를 설정하기때문에 새로고침때 서버에서 받아오게 하려면 loading을 넣어야함. 이를 방지하기 위해 추가
---
 client/src/stores/useSocketStore.ts | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/client/src/stores/useSocketStore.ts b/client/src/stores/useSocketStore.ts
index 03c450e2..2a747b08 100644
--- a/client/src/stores/useSocketStore.ts
+++ b/client/src/stores/useSocketStore.ts
@@ -136,7 +136,8 @@ export const useSocketStore = create<SocketStore>((set, get) => ({
     });
 
     socket.on("workspace", (workspace: WorkSpaceSerializedProps) => {
-      set({ workspace });
+      const { setWorkspace } = get();
+      setWorkspace(workspace); // 수정된 부분
     });
 
     socket.on("connect", () => {
@@ -164,25 +165,29 @@ export const useSocketStore = create<SocketStore>((set, get) => ({
     if (socket) {
       socket.removeAllListeners();
       socket.disconnect();
+      sessionStorage.removeItem("currentWorkspace"); // sessionStorage 삭제
       set({ socket: null, workspace: null, clientId: null });
     }
   },
 
   switchWorkspace: (userId: string | null, workspaceId: string | null) => {
     const { socket, init } = get();
-    console.log(userId, workspaceId);
+    console.log("바꿉니다", userId, "가", workspaceId, "로");
     // 기존 연결 정리
     if (socket) {
       socket.disconnect();
     }
-
-    // 새로운 연결 시작 (userId는 유지)
+    sessionStorage.removeItem("currentWorkspace");
+    set({ workspace: null }); // 상태도 초기화
     init(userId, workspaceId);
   },
 
   fetchWorkspaceData: () => get().workspace,
 
-  setWorkspace: (workspace: WorkSpaceSerializedProps) => set({ workspace }),
+  setWorkspace: (workspace: WorkSpaceSerializedProps) => {
+    sessionStorage.setItem("currentWorkspace", JSON.stringify(workspace));
+    set({ workspace });
+  },
 
   sendPageUpdateOperation: (operation: RemotePageUpdateOperation) => {
     const { socket } = get();

From f33f9878ad95c3ae1e14d5eba75d2c23444b87bc Mon Sep 17 00:00:00 2001
From: hyonun321 <hyo_nun@kakao.com>
Date: Sat, 30 Nov 2024 15:43:43 +0900
Subject: [PATCH 08/15] =?UTF-8?q?feat:=20=EC=88=98=EC=8B=A0=ED=95=9C=20?=
 =?UTF-8?q?=EC=9B=8C=ED=81=AC=EC=8A=A4=ED=8E=98=EC=9D=B4=EC=8A=A4=EB=A5=BC?=
 =?UTF-8?q?=20=ED=81=B4=EB=9D=BC=EC=9D=B4=EC=96=B8=ED=8A=B8=EC=97=90?=
 =?UTF-8?q?=EA=B2=8C=20=EC=A0=84=EC=86=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#71
---
 client/src/App.tsx                        | 20 +++--------
 server/src/workspace/workspace.gateway.ts | 43 ++++++++++++-----------
 2 files changed, 26 insertions(+), 37 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index b968ceea..d88a2a2d 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -8,26 +8,14 @@ import { useSocketStore } from "./stores/useSocketStore";
 const App = () => {
   // TODO 라우터, react query 설정
   const { isErrorModalOpen, errorMessage } = useErrorStore();
-
   const { userId } = useUserInfo();
 
   useEffect(() => {
     const socketStore = useSocketStore.getState();
-    socketStore.init(userId, null);
-
-    // // 소켓이 연결된 후에 이벤트 리스너 등록
-    // const { socket } = socketStore;
-    // socket?.on("connect", () => {
-    //   const unsubscribe = socketStore.subscribeToWorkspaceOperations({
-    //     onWorkspaceListUpdate: (workspaces) => {
-    //       console.log("Workspace list updated:", workspaces);
-    //     },
-    //   });
-
-    //   return () => {
-    //     if (unsubscribe) unsubscribe();
-    //   };
-    // });
+    const savedWorkspace = sessionStorage.getItem("currentWorkspace");
+    const workspaceId = savedWorkspace ? JSON.parse(savedWorkspace).id : null;
+    console.log(workspaceId);
+    socketStore.init(userId, workspaceId);
 
     return () => {
       setTimeout(() => {
diff --git a/server/src/workspace/workspace.gateway.ts b/server/src/workspace/workspace.gateway.ts
index be780ed4..92066a2a 100644
--- a/server/src/workspace/workspace.gateway.ts
+++ b/server/src/workspace/workspace.gateway.ts
@@ -104,41 +104,42 @@ export class WorkspaceGateway implements OnGatewayInit, OnGatewayConnection, OnG
    */
   async handleConnection(client: Socket) {
     try {
-      let { userId } = client.handshake.auth;
+      let { userId, workspaceId } = client.handshake.auth;
       if (!userId) {
         userId = "guest";
       }
       client.data.userId = userId;
 
       const workspaces = await this.workSpaceService.getUserWorkspaces(userId);
-      let workspaceId = "";
+      const userInfo = await this.authService.getProfile(userId);
+      let NewWorkspaceId = "";
+
       if (userId === "guest") {
         client.join("guest");
-        workspaceId = "guest";
+        NewWorkspaceId = "guest";
       } else if (workspaces.length === 0) {
-        const workspace = await this.workSpaceService.createWorkspace(userId, "My Workspace");
+        const workspace = await this.workSpaceService.createWorkspace(
+          userId,
+          `${userInfo.name}의 Workspace`,
+        );
         client.join(workspace.id);
-        workspaceId = workspace.id;
+        NewWorkspaceId = workspace.id;
       } else {
-        const requestedWorkspaceId = client.handshake.query.workspaceId;
-
-        // workspaces가 WorkspaceListItem[]이므로 id 비교로 수정
-        if (
-          requestedWorkspaceId &&
-          workspaces.some((workspace) => workspace.id === requestedWorkspaceId)
-        ) {
-          // 요청한 워크스페이스가 있고 접근 권한이 있으면 해당 워크스페이스 사용
-          workspaceId = requestedWorkspaceId as string;
+        if (workspaceId && workspaces.some((workspace) => workspace.id === workspaceId)) {
+          NewWorkspaceId = workspaceId;
         } else {
           // 없으면 첫 번째 워크스페이스 사용
-          workspaceId = workspaces[0].id; // WorkspaceListItem의 id 속성 접근
+          NewWorkspaceId = workspaces[0].id; // WorkspaceListItem의 id 속성 접근
         }
-        client.join(workspaceId);
+        client.join(NewWorkspaceId);
       }
       const user = await this.authService.findById(userId);
-
-      client.data.workspaceId = workspaceId;
-      const currentWorkSpace = (await this.workSpaceService.getWorkspace(workspaceId)).serialize();
+      console.log("전", client.data.workspaceId);
+      client.data.workspaceId = NewWorkspaceId;
+      console.log("후", NewWorkspaceId);
+      const currentWorkSpace = (
+        await this.workSpaceService.getWorkspace(NewWorkspaceId)
+      ).serialize();
       client.emit("workspace", currentWorkSpace);
 
       const assignedId = (this.clientIdCounter += 1);
@@ -164,7 +165,7 @@ export class WorkspaceGateway implements OnGatewayInit, OnGatewayConnection, OnG
       }, 100);
 
       client.broadcast.emit("userJoined", { clientId: assignedId });
-      this.logger.log(`클라이언트 연결 성공 - Socket ID: ${client.id}, Client ID: ${assignedId}`);
+      this.logger.log(`클라이언트 연결 성공 - User ID: ${userId}, Client ID: ${assignedId}`);
       this.logger.debug(`현재 연결된 클라이언트 수: ${this.clientMap.size}`);
     } catch (error) {
       this.logger.error(`클라이언트 연결 중 오류 발생: ${error.message}`, error.stack);
@@ -233,7 +234,7 @@ export class WorkspaceGateway implements OnGatewayInit, OnGatewayConnection, OnG
 
       // 3. 워크스페이스에 사용자 추가
       await this.authService.addWorkspace(targetUser.id, data.workspaceId);
-
+      await this.workSpaceService.inviteUserToWorkspace(client.id, data.workspaceId, targetUser.id);
       const targetSocket = Array.from(this.clientMap.entries()).find(
         ([_, info]) => info.email === targetUser.email,
       );

From 89dc180580f9587932d1f13ee7c4b53f3a2a4945 Mon Sep 17 00:00:00 2001
From: hyonun321 <hyo_nun@kakao.com>
Date: Sat, 30 Nov 2024 16:22:45 +0900
Subject: [PATCH 09/15] =?UTF-8?q?feat:=20workspace/list=20=EB=A5=BC=20?=
 =?UTF-8?q?=EC=88=98=EC=8B=A0=ED=95=A0=EB=95=8C=20=EC=84=A0=ED=83=9D?=
 =?UTF-8?q?=EA=B0=80=EB=8A=A5=ED=95=9C=20=EC=9B=8C=ED=81=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=8A=A4=20=EB=A6=AC=EC=8A=A4=ED=8A=B8?=
 =?UTF-8?q?=EB=A5=BC=20=EC=9E=AC=20=EB=A0=8C=EB=8D=94=EB=A7=81=ED=95=98?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#71
---
 .../menuButton/components/WorkspaceSelectModal.tsx  | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/client/src/components/sidebar/components/menuButton/components/WorkspaceSelectModal.tsx b/client/src/components/sidebar/components/menuButton/components/WorkspaceSelectModal.tsx
index c18d63a7..d85eac1f 100644
--- a/client/src/components/sidebar/components/menuButton/components/WorkspaceSelectModal.tsx
+++ b/client/src/components/sidebar/components/menuButton/components/WorkspaceSelectModal.tsx
@@ -1,5 +1,5 @@
 import { motion } from "framer-motion";
-import { useRef } from "react";
+import { useRef, useEffect, useState } from "react";
 import { SIDE_BAR } from "@constants/size";
 import { useSocketStore } from "@src/stores/useSocketStore";
 import {
@@ -22,13 +22,18 @@ export const WorkspaceSelectModal = ({
   onInviteClick,
 }: WorkspaceSelectModalProps) => {
   const modalRef = useRef<HTMLDivElement>(null);
-  const { availableWorkspaces } = useSocketStore();
+  const availableWorkspaces = useSocketStore((state) => state.availableWorkspaces);
+  // useState와 useEffect를 사용하여 로컬 상태로 관리
+  const [workspaces, setWorkspaces] = useState(availableWorkspaces);
 
   const informText = userName
     ? availableWorkspaces.length > 0
       ? ""
       : "접속할 수 있는 워크스페이스가 없습니다."
     : `다른 워크스페이스 기능은\n 회원전용 입니다`;
+  useEffect(() => {
+    setWorkspaces(availableWorkspaces);
+  }, [availableWorkspaces]); // availableWorkspaces가 변경될 때마다 실행
 
   return (
     <motion.div
@@ -51,9 +56,9 @@ export const WorkspaceSelectModal = ({
       }}
     >
       <div className={workspaceListContainer}>
-        {userName && availableWorkspaces.length > 0 ? (
+        {userName && workspaces.length > 0 ? (
           <>
-            {availableWorkspaces.map((workspace) => (
+            {workspaces.map((workspace) => (
               <WorkspaceSelectItem key={workspace.id} userName={userName} {...workspace} />
             ))}
             <InviteButton onClick={onInviteClick} />

From 0f284b2b6068aea798afa4257427c94c4aee08c6 Mon Sep 17 00:00:00 2001
From: hyonun321 <hyo_nun@kakao.com>
Date: Sat, 30 Nov 2024 16:23:08 +0900
Subject: [PATCH 10/15] =?UTF-8?q?feat:=20=ED=98=84=EC=9E=AC=20=EC=A0=91?=
 =?UTF-8?q?=EC=86=8D=EC=9E=90=EC=88=98=20=ED=91=9C=EC=8B=9C=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#63
---
 .../components/components/WorkspaceSelectItem.tsx          | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.tsx b/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.tsx
index 8be5dc10..0b663cda 100644
--- a/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.tsx
+++ b/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.tsx
@@ -19,7 +19,8 @@ interface WorkspaceSelectItemProps extends WorkspaceListItem {
 
 export const WorkspaceSelectItem = ({ id, name, role, memberCount }: WorkspaceSelectItemProps) => {
   const { userId } = useUserInfo();
-  const { workspace, switchWorkspace } = useSocketStore();
+  const { workspace, switchWorkspace, workspaceConnections } = useSocketStore();
+  const currentConnections = workspaceConnections[id] || 0;
   const isActive = workspace?.id === id; // 현재 워크스페이스 확인
   const handleClick = () => {
     if (!isActive) {
@@ -36,7 +37,9 @@ export const WorkspaceSelectItem = ({ id, name, role, memberCount }: WorkspaceSe
           <div className={informBox}>
             <span className={itemMemberCount}>{role}</span>
             {memberCount !== undefined && (
-              <span className={itemRole}>접속자수 : {memberCount} 명 </span>
+              <span className={itemRole}>
+                접속자수 {currentConnections} / {memberCount} 명{" "}
+              </span>
             )}
           </div>
         </div>

From c5953cf6130d809a9bcba3e3a980b408bc8bfb8d Mon Sep 17 00:00:00 2001
From: hyonun321 <hyo_nun@kakao.com>
Date: Sat, 30 Nov 2024 16:58:25 +0900
Subject: [PATCH 11/15] =?UTF-8?q?feat:=20=EC=A0=91=EC=86=8D=EC=9E=90?=
 =?UTF-8?q?=EC=88=98=EA=B0=80=20=EC=8B=A4=EC=8B=9C=EA=B0=84=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- client에서 접속자수, 최대 인원수 표시
- 서버에서 접속자수를 workspace/connection 으로 api로 송신

#71
---
 .../components/WorkspaceSelectModal.tsx       | 20 +++++--
 .../components/WorkspaceSelectItem.tsx        | 13 +++--
 client/src/stores/useSocketStore.ts           | 16 ++++--
 server/src/workspace/workspace.gateway.ts     | 56 ++++++++++++++++---
 server/src/workspace/workspace.service.ts     | 20 +++++--
 5 files changed, 95 insertions(+), 30 deletions(-)

diff --git a/client/src/components/sidebar/components/menuButton/components/WorkspaceSelectModal.tsx b/client/src/components/sidebar/components/menuButton/components/WorkspaceSelectModal.tsx
index d85eac1f..e1db2539 100644
--- a/client/src/components/sidebar/components/menuButton/components/WorkspaceSelectModal.tsx
+++ b/client/src/components/sidebar/components/menuButton/components/WorkspaceSelectModal.tsx
@@ -1,5 +1,5 @@
 import { motion } from "framer-motion";
-import { useRef, useEffect, useState } from "react";
+import { useRef, useEffect, useState, useMemo } from "react";
 import { SIDE_BAR } from "@constants/size";
 import { useSocketStore } from "@src/stores/useSocketStore";
 import {
@@ -23,17 +23,25 @@ export const WorkspaceSelectModal = ({
 }: WorkspaceSelectModalProps) => {
   const modalRef = useRef<HTMLDivElement>(null);
   const availableWorkspaces = useSocketStore((state) => state.availableWorkspaces);
-  // useState와 useEffect를 사용하여 로컬 상태로 관리
-  const [workspaces, setWorkspaces] = useState(availableWorkspaces);
-
+  const workspaceConnections = useSocketStore((state) => state.workspaceConnections);
+  const workspacesWithActiveUsers = useMemo(
+    () =>
+      availableWorkspaces.map((workspace) => ({
+        ...workspace,
+        activeUsers: workspaceConnections[workspace.id] || 0,
+      })),
+    [availableWorkspaces, workspaceConnections],
+  );
+  const [workspaces, setWorkspaces] = useState(workspacesWithActiveUsers);
+  console.log(workspacesWithActiveUsers);
   const informText = userName
     ? availableWorkspaces.length > 0
       ? ""
       : "접속할 수 있는 워크스페이스가 없습니다."
     : `다른 워크스페이스 기능은\n 회원전용 입니다`;
   useEffect(() => {
-    setWorkspaces(availableWorkspaces);
-  }, [availableWorkspaces]); // availableWorkspaces가 변경될 때마다 실행
+    setWorkspaces(workspacesWithActiveUsers);
+  }, [availableWorkspaces, workspacesWithActiveUsers]); // availableWorkspaces가 변경될 때마다 실행
 
   return (
     <motion.div
diff --git a/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.tsx b/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.tsx
index 0b663cda..fd86aa04 100644
--- a/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.tsx
+++ b/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.tsx
@@ -17,10 +17,15 @@ interface WorkspaceSelectItemProps extends WorkspaceListItem {
   userName: string;
 }
 
-export const WorkspaceSelectItem = ({ id, name, role, memberCount }: WorkspaceSelectItemProps) => {
+export const WorkspaceSelectItem = ({
+  id,
+  name,
+  role,
+  memberCount,
+  activeUsers,
+}: WorkspaceSelectItemProps) => {
   const { userId } = useUserInfo();
-  const { workspace, switchWorkspace, workspaceConnections } = useSocketStore();
-  const currentConnections = workspaceConnections[id] || 0;
+  const { workspace, switchWorkspace } = useSocketStore();
   const isActive = workspace?.id === id; // 현재 워크스페이스 확인
   const handleClick = () => {
     if (!isActive) {
@@ -38,7 +43,7 @@ export const WorkspaceSelectItem = ({ id, name, role, memberCount }: WorkspaceSe
             <span className={itemMemberCount}>{role}</span>
             {memberCount !== undefined && (
               <span className={itemRole}>
-                접속자수 {currentConnections} / {memberCount} 명{" "}
+                접속자수 {activeUsers} / {memberCount} 명{" "}
               </span>
             )}
           </div>
diff --git a/client/src/stores/useSocketStore.ts b/client/src/stores/useSocketStore.ts
index 2a747b08..df8a936d 100644
--- a/client/src/stores/useSocketStore.ts
+++ b/client/src/stores/useSocketStore.ts
@@ -52,11 +52,11 @@ class BatchProcessor {
 
 interface SocketStore {
   socket: Socket | null;
-  clientId: number | null;
+  clientId: number | null; // 숫자로 된 클라이언트Id
   workspace: WorkSpaceSerializedProps | null;
-
   availableWorkspaces: WorkspaceListItem[];
   batchProcessor: BatchProcessor;
+  workspaceConnections: Record<string, number>; // 워크스페이스별 접속자 수
   init: (userId: string | null, workspaceId: string | null) => void;
   cleanup: () => void;
   switchWorkspace: (userId: string | null, workspaceId: string | null) => void; // 새로운 함수 추가
@@ -100,9 +100,8 @@ export const useSocketStore = create<SocketStore>((set, get) => ({
   socket: null,
   clientId: null,
   workspace: null,
-
   availableWorkspaces: [],
-
+  workspaceConnections: {},
   batchProcessor: new BatchProcessor((batch) => {
     const { socket } = get();
     socket?.emit("batch/operations", batch);
@@ -140,6 +139,10 @@ export const useSocketStore = create<SocketStore>((set, get) => ({
       setWorkspace(workspace); // 수정된 부분
     });
 
+    socket.on("workspace/connections", (connections: Record<string, number>) => {
+      set({ workspaceConnections: connections });
+    });
+
     socket.on("connect", () => {
       set({ socket });
     });
@@ -171,10 +174,13 @@ export const useSocketStore = create<SocketStore>((set, get) => ({
   },
 
   switchWorkspace: (userId: string | null, workspaceId: string | null) => {
-    const { socket, init } = get();
+    const { socket, workspace, init } = get();
     console.log("바꿉니다", userId, "가", workspaceId, "로");
     // 기존 연결 정리
     if (socket) {
+      if (workspace?.id) {
+        socket.emit("leave/workspace", { workspaceId: workspace.id });
+      }
       socket.disconnect();
     }
     sessionStorage.removeItem("currentWorkspace");
diff --git a/server/src/workspace/workspace.gateway.ts b/server/src/workspace/workspace.gateway.ts
index 92066a2a..a69eba33 100644
--- a/server/src/workspace/workspace.gateway.ts
+++ b/server/src/workspace/workspace.gateway.ts
@@ -109,6 +109,7 @@ export class WorkspaceGateway implements OnGatewayInit, OnGatewayConnection, OnG
         userId = "guest";
       }
       client.data.userId = userId;
+      client.join(`user:${userId}`); // 유저 전용 룸에 조인 추후 초대 수신용
 
       const workspaces = await this.workSpaceService.getUserWorkspaces(userId);
       const userInfo = await this.authService.getProfile(userId);
@@ -153,15 +154,19 @@ export class WorkspaceGateway implements OnGatewayInit, OnGatewayConnection, OnG
 
       setTimeout(async () => {
         const workspaces = await this.workSpaceService.getUserWorkspaces(userId);
-        const workspaceList = workspaces.map((workspace) => ({
-          id: workspace.id,
-          name: workspace.name,
-          role: workspace.role,
-          memberCount: workspace.memberCount,
-        }));
+        const workspaceList = workspaces.map((workspace) => {
+          return {
+            id: workspace.id,
+            name: workspace.name,
+            role: workspace.role,
+            memberCount: workspace.memberCount,
+            activeUsers: workspace.activeUsers,
+          };
+        });
 
         this.logger.log(`Sending workspace list to client ${client.id}`);
         client.emit("workspace/list", workspaceList);
+        this.SocketStoreBroadcastWorkspaceConnections();
       }, 100);
 
       client.broadcast.emit("userJoined", { clientId: assignedId });
@@ -193,12 +198,27 @@ export class WorkspaceGateway implements OnGatewayInit, OnGatewayConnection, OnG
       }
 
       this.clientMap.delete(client.id);
+      this.SocketStoreBroadcastWorkspaceConnections();
       this.logger.debug(`남은 연결된 클라이언트 수: ${this.clientMap.size}`);
     } catch (error) {
       this.logger.error(`클라이언트 연결 해제 중 오류 발생: ${error.message}`, error.stack);
     }
   }
 
+  Copy; // workspace.gateway.ts
+  @SubscribeMessage("leave/workspace")
+  async handleWorkspaceLeave(
+    @MessageBody() data: { workspaceId: string },
+    @ConnectedSocket() client: Socket,
+  ): Promise<void> {
+    try {
+      client.leave(data.workspaceId);
+      this.SocketStoreBroadcastWorkspaceConnections();
+    } catch (error) {
+      this.logger.error(`워크스페이스 퇴장 중 오류 발생`, error.stack);
+    }
+  }
+
   @SubscribeMessage("invite/workspace")
   async handleWorkspaceInvite(
     @MessageBody() data: WorkspaceInviteData,
@@ -232,9 +252,11 @@ export class WorkspaceGateway implements OnGatewayInit, OnGatewayConnection, OnG
         throw new WsException("User is already a member of this workspace");
       }
 
-      // 3. 워크스페이스에 사용자 추가
+      let { userId } = client.handshake.auth;
+      console.log(userId);
       await this.authService.addWorkspace(targetUser.id, data.workspaceId);
-      await this.workSpaceService.inviteUserToWorkspace(client.id, data.workspaceId, targetUser.id);
+      console.log(userId, data.workspaceId, targetUser.id);
+      await this.workSpaceService.inviteUserToWorkspace(userId, data.workspaceId, targetUser.id);
       const targetSocket = Array.from(this.clientMap.entries()).find(
         ([_, info]) => info.email === targetUser.email,
       );
@@ -242,7 +264,8 @@ export class WorkspaceGateway implements OnGatewayInit, OnGatewayConnection, OnG
       if (targetSocket) {
         const [socketId] = targetSocket;
         const server = this.workSpaceService.getServer();
-        server.to(socketId).emit("workspace/invited", {
+
+        server.to(`user:${targetUser.id}`).emit("workspace/invited", {
           workspaceId: data.workspaceId,
           invitedUserId: client.data.userId,
           message: `${sentUser.name}님이 초대하셨습니다.`,
@@ -850,6 +873,21 @@ export class WorkspaceGateway implements OnGatewayInit, OnGatewayConnection, OnG
     }
   }
 
+  private SocketStoreBroadcastWorkspaceConnections() {
+    const server = this.workSpaceService.getServer();
+    const connectionCounts = {} as Record<string, number>;
+
+    // 각 워크스페이스의 room size를 가져옴
+    for (const [roomId, room] of server.sockets.adapter.rooms.entries()) {
+      // user: 로 시작하는 룸은 제외 (초대용 룸)
+      if (!roomId.startsWith("user:")) {
+        connectionCounts[roomId] = room.size;
+      }
+    }
+    // 모든 클라이언트에게 전송
+    server.emit("workspace/connections", connectionCounts);
+  }
+
   executeBatch() {
     try {
       const server = this.workSpaceService.getServer();
diff --git a/server/src/workspace/workspace.service.ts b/server/src/workspace/workspace.service.ts
index 0642ce62..9d4218db 100644
--- a/server/src/workspace/workspace.service.ts
+++ b/server/src/workspace/workspace.service.ts
@@ -172,6 +172,7 @@ export class WorkSpaceService implements OnModuleInit {
           name: "Guest Workspace",
           role: "editor",
           memberCount: 0,
+          activeUsers: 0,
         },
       ];
     }
@@ -185,12 +186,19 @@ export class WorkSpaceService implements OnModuleInit {
       id: { $in: user.workspaces },
     });
 
-    return workspaces.map((workspace) => ({
-      id: workspace.id,
-      name: workspace.name,
-      role: workspace.authUser.get(userId) || "editor",
-      memberCount: workspace.authUser.size,
-    }));
+    const workspaceList = workspaces.map((workspace) => {
+      console.log(workspace.authUser.size, "진짜야?");
+      const room = this.getServer().sockets.adapter.rooms.get(workspace.id);
+      return {
+        id: workspace.id,
+        name: workspace.name,
+        role: workspace.authUser.get(userId) || "editor",
+        memberCount: workspace.authUser.size,
+        activeUsers: room ? room.size : 0,
+      };
+    });
+
+    return workspaceList;
   }
 
   // 워크스페이스에 유저 초대

From a14c352d8f5ba9b89a5a9924fdbc35a0c833a79d Mon Sep 17 00:00:00 2001
From: hyonun321 <hyo_nun@kakao.com>
Date: Sat, 30 Nov 2024 16:58:39 +0900
Subject: [PATCH 12/15] =?UTF-8?q?chore:=20=EB=A9=A4=EB=B2=84=20=EC=B9=B4?=
 =?UTF-8?q?=EC=9A=B4=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 @noctaCrdt/Interfaces.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/@noctaCrdt/Interfaces.ts b/@noctaCrdt/Interfaces.ts
index ae8608b6..63fba8a8 100644
--- a/@noctaCrdt/Interfaces.ts
+++ b/@noctaCrdt/Interfaces.ts
@@ -195,5 +195,6 @@ export interface WorkspaceListItem {
   id: string;
   name: string;
   role: string;
-  memberCount?: number;
+  memberCount: number;
+  activeUsers: number;
 }

From a690a3fd265caa2fc8ab951cfa7a196275c51796 Mon Sep 17 00:00:00 2001
From: hyonun321 <hyo_nun@kakao.com>
Date: Sat, 30 Nov 2024 17:11:49 +0900
Subject: [PATCH 13/15] =?UTF-8?q?chore:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20=EC=BD=98=EC=86=94=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../menuButton/components/WorkspaceSelectModal.tsx          | 3 ++-
 client/src/stores/useSocketStore.ts                         | 2 --
 server/src/workspace/workspace.gateway.ts                   | 6 +-----
 server/src/workspace/workspace.service.ts                   | 1 -
 4 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/client/src/components/sidebar/components/menuButton/components/WorkspaceSelectModal.tsx b/client/src/components/sidebar/components/menuButton/components/WorkspaceSelectModal.tsx
index e1db2539..a5a80cfd 100644
--- a/client/src/components/sidebar/components/menuButton/components/WorkspaceSelectModal.tsx
+++ b/client/src/components/sidebar/components/menuButton/components/WorkspaceSelectModal.tsx
@@ -33,12 +33,13 @@ export const WorkspaceSelectModal = ({
     [availableWorkspaces, workspaceConnections],
   );
   const [workspaces, setWorkspaces] = useState(workspacesWithActiveUsers);
-  console.log(workspacesWithActiveUsers);
+
   const informText = userName
     ? availableWorkspaces.length > 0
       ? ""
       : "접속할 수 있는 워크스페이스가 없습니다."
     : `다른 워크스페이스 기능은\n 회원전용 입니다`;
+
   useEffect(() => {
     setWorkspaces(workspacesWithActiveUsers);
   }, [availableWorkspaces, workspacesWithActiveUsers]); // availableWorkspaces가 변경될 때마다 실행
diff --git a/client/src/stores/useSocketStore.ts b/client/src/stores/useSocketStore.ts
index df8a936d..5aa453e3 100644
--- a/client/src/stores/useSocketStore.ts
+++ b/client/src/stores/useSocketStore.ts
@@ -152,7 +152,6 @@ export const useSocketStore = create<SocketStore>((set, get) => ({
     });
 
     socket.on("workspace/list", (workspaces: WorkspaceListItem[]) => {
-      console.log("Received workspace list:", workspaces);
       set({ availableWorkspaces: workspaces });
     });
 
@@ -175,7 +174,6 @@ export const useSocketStore = create<SocketStore>((set, get) => ({
 
   switchWorkspace: (userId: string | null, workspaceId: string | null) => {
     const { socket, workspace, init } = get();
-    console.log("바꿉니다", userId, "가", workspaceId, "로");
     // 기존 연결 정리
     if (socket) {
       if (workspace?.id) {
diff --git a/server/src/workspace/workspace.gateway.ts b/server/src/workspace/workspace.gateway.ts
index a69eba33..c413285d 100644
--- a/server/src/workspace/workspace.gateway.ts
+++ b/server/src/workspace/workspace.gateway.ts
@@ -135,9 +135,7 @@ export class WorkspaceGateway implements OnGatewayInit, OnGatewayConnection, OnG
         client.join(NewWorkspaceId);
       }
       const user = await this.authService.findById(userId);
-      console.log("전", client.data.workspaceId);
       client.data.workspaceId = NewWorkspaceId;
-      console.log("후", NewWorkspaceId);
       const currentWorkSpace = (
         await this.workSpaceService.getWorkspace(NewWorkspaceId)
       ).serialize();
@@ -252,10 +250,8 @@ export class WorkspaceGateway implements OnGatewayInit, OnGatewayConnection, OnG
         throw new WsException("User is already a member of this workspace");
       }
 
-      let { userId } = client.handshake.auth;
-      console.log(userId);
+      const { userId } = client.handshake.auth;
       await this.authService.addWorkspace(targetUser.id, data.workspaceId);
-      console.log(userId, data.workspaceId, targetUser.id);
       await this.workSpaceService.inviteUserToWorkspace(userId, data.workspaceId, targetUser.id);
       const targetSocket = Array.from(this.clientMap.entries()).find(
         ([_, info]) => info.email === targetUser.email,
diff --git a/server/src/workspace/workspace.service.ts b/server/src/workspace/workspace.service.ts
index 9d4218db..507d24a9 100644
--- a/server/src/workspace/workspace.service.ts
+++ b/server/src/workspace/workspace.service.ts
@@ -187,7 +187,6 @@ export class WorkSpaceService implements OnModuleInit {
     });
 
     const workspaceList = workspaces.map((workspace) => {
-      console.log(workspace.authUser.size, "진짜야?");
       const room = this.getServer().sockets.adapter.rooms.get(workspace.id);
       return {
         id: workspace.id,

From d03d108f01d01d47245f48abbb01ecd1825ff0e1 Mon Sep 17 00:00:00 2001
From: hyonun321 <hyo_nun@kakao.com>
Date: Sat, 30 Nov 2024 17:12:08 +0900
Subject: [PATCH 14/15] =?UTF-8?q?feat:=20=EC=A0=91=EC=86=8Dworkspace=20?=
 =?UTF-8?q?=ED=86=A0=EC=8A=A4=ED=8A=B8=20=ED=86=A0=EA=B8=80=EC=B0=BD=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#71
---
 .../menuButton/components/components/WorkspaceSelectItem.tsx   | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.tsx b/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.tsx
index fd86aa04..5480e8cb 100644
--- a/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.tsx
+++ b/client/src/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.tsx
@@ -1,5 +1,6 @@
 import { WorkspaceListItem } from "@noctaCrdt/Interfaces"; // 이전에 만든 인터페이스 import
 import { useSocketStore } from "@src/stores/useSocketStore";
+import { useToastStore } from "@src/stores/useToastStore";
 import { useUserInfo } from "@src/stores/useUserStore";
 import {
   itemContainer,
@@ -26,10 +27,12 @@ export const WorkspaceSelectItem = ({
 }: WorkspaceSelectItemProps) => {
   const { userId } = useUserInfo();
   const { workspace, switchWorkspace } = useSocketStore();
+  const { addToast } = useToastStore();
   const isActive = workspace?.id === id; // 현재 워크스페이스 확인
   const handleClick = () => {
     if (!isActive) {
       switchWorkspace(userId, id);
+      addToast(`워크스페이스(${name})에 접속하였습니다.`);
     }
   };
 

From 76474448bd385f2cbfcb41943603fb7bcb3d51bb Mon Sep 17 00:00:00 2001
From: hyonun321 <hyo_nun@kakao.com>
Date: Sat, 30 Nov 2024 17:13:02 +0900
Subject: [PATCH 15/15] =?UTF-8?q?chore:=20lint=EC=97=90=EB=9F=AC=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- let -> const로
---
 server/src/workspace/workspace.gateway.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/server/src/workspace/workspace.gateway.ts b/server/src/workspace/workspace.gateway.ts
index c413285d..0c7da130 100644
--- a/server/src/workspace/workspace.gateway.ts
+++ b/server/src/workspace/workspace.gateway.ts
@@ -104,7 +104,8 @@ export class WorkspaceGateway implements OnGatewayInit, OnGatewayConnection, OnG
    */
   async handleConnection(client: Socket) {
     try {
-      let { userId, workspaceId } = client.handshake.auth;
+      let { userId } = client.handshake.auth;
+      const { workspaceId } = client.handshake.auth;
       if (!userId) {
         userId = "guest";
       }