From cf0f6b9747d208db2ffbc7370d8cf39813320805 Mon Sep 17 00:00:00 2001
From: djk01281 <djk01281@gmail.com>
Date: Thu, 21 Nov 2024 17:34:55 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EB=85=B8=EB=93=9C=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8,=20Active=20User=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/canvas/NoteNode.tsx        | 40 ++++++++++++++-----
 .../components/commons/activeUser/index.tsx   | 21 ++++++++--
 2 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/apps/frontend/src/components/canvas/NoteNode.tsx b/apps/frontend/src/components/canvas/NoteNode.tsx
index b6fccf29..b4c0c5d1 100644
--- a/apps/frontend/src/components/canvas/NoteNode.tsx
+++ b/apps/frontend/src/components/canvas/NoteNode.tsx
@@ -1,18 +1,26 @@
 import { Handle, NodeProps, Position, type Node } from "@xyflow/react";
+import { FileText } from "lucide-react";
 
 import ActiveUser from "../commons/activeUser";
 
 import usePageStore from "@/store/usePageStore";
 import useUserStore from "@/store/useUserStore";
 import Emoji from "../commons/emoji";
+import { useEffect, useState } from "react";
 
-export type NoteNodeData = { title: string; id: number; emoji: string };
+export type NoteNodeData = { title: string; id: number; emoji?: string };
 export type NoteNodeType = Node<NoteNodeData, "note">;
 
 export function NoteNode({ data }: NodeProps<NoteNodeType>) {
   const { setCurrentPage } = usePageStore();
   const { users } = useUserStore();
 
+  const [activeUsers, setActiveUsers] = useState(users);
+
+  useEffect(() => {
+    setActiveUsers(users);
+  }, [users]);
+
   const handleNodeClick = () => {
     const id = data.id;
     if (id === undefined || id === null) {
@@ -24,7 +32,7 @@ export function NoteNode({ data }: NodeProps<NoteNodeType>) {
 
   return (
     <div
-      className="rounded-md border-[1px] border-black bg-neutral-100 p-2"
+      className="h-24 w-48 rounded-lg border-[1px] border-[#eaeaea] bg-white p-3 shadow-sm"
       onClick={handleNodeClick}
     >
       <Handle
@@ -51,16 +59,26 @@ export function NoteNode({ data }: NodeProps<NoteNodeType>) {
         position={Position.Bottom}
         isConnectable={true}
       />
-      <div className="flex gap-1">
-        <Emoji emoji={data.emoji} />
-        <div>{data.title}</div>
+      <div className="flex h-full w-full flex-col items-center">
+        <div className="flex w-full min-w-0 flex-1 flex-row justify-start gap-1">
+          {data.emoji ? (
+            <Emoji emoji={data.emoji} />
+          ) : (
+            <FileText
+              className="h-4 w-4 flex-shrink-0"
+              strokeWidth="1.5px"
+              color="#91918e"
+            />
+          )}
+          <div className="w-full truncate">{data.title}</div>
+        </div>
+        <ActiveUser
+          className="justify-end self-end"
+          users={activeUsers.filter(
+            (user) => user.currentPageId === data.id.toString(),
+          )}
+        />
       </div>
-      <ActiveUser
-        className="justify-end"
-        users={users.filter(
-          (user) => user.currentPageId === data.id.toString(),
-        )}
-      />
     </div>
   );
 }
diff --git a/apps/frontend/src/components/commons/activeUser/index.tsx b/apps/frontend/src/components/commons/activeUser/index.tsx
index 1001ddb4..f721f3af 100644
--- a/apps/frontend/src/components/commons/activeUser/index.tsx
+++ b/apps/frontend/src/components/commons/activeUser/index.tsx
@@ -7,22 +7,35 @@ interface ActiveUserProps {
 }
 
 export default function ActiveUser({ users, className }: ActiveUserProps) {
+  const maxVisibleUsers = 5;
+  const hasMoreUsers = users.length > maxVisibleUsers;
+  const visibleUsers = users.slice(0, maxVisibleUsers);
+
   return (
-    <div className={cn("flex gap-2", className)}>
-      {users.map((user) => (
+    <div className={cn("flex items-center", className)}>
+      {visibleUsers.map((user, index) => (
         <div
           style={{ backgroundColor: user.color }}
-          className={cn("group relative h-5 w-5 rounded-full")}
+          className={cn(
+            "group relative h-5 w-5 rounded-full",
+            index !== 0 && "-ml-2",
+            "hover:z-10",
+          )}
           key={user.clientId}
         >
           <div
             style={{ backgroundColor: user.color }}
-            className="absolute left-2 z-10 hidden px-2 text-sm group-hover:flex"
+            className="absolute left-5 top-0 z-20 hidden max-w-28 truncate rounded-md px-2 py-1 text-sm text-white group-hover:block"
           >
             {user.clientId}
           </div>
         </div>
       ))}
+      {hasMoreUsers && (
+        <div className="relative -ml-2 flex h-5 w-5 items-center justify-center rounded-full bg-gray-200 text-xs font-medium text-gray-600">
+          +{users.length - maxVisibleUsers}
+        </div>
+      )}
     </div>
   );
 }

From 9e53df699e59e393bcddb6c1471428c601fbb4e9 Mon Sep 17 00:00:00 2001
From: djk01281 <djk01281@gmail.com>
Date: Thu, 21 Nov 2024 17:38:05 +0900
Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=EC=B5=9C=EB=8C=80=20=EB=B3=B4?=
 =?UTF-8?q?=EC=97=AC=EC=A7=80=EB=8A=94=20ActiveUser=20=EC=88=98=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/frontend/src/components/commons/activeUser/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/components/commons/activeUser/index.tsx b/apps/frontend/src/components/commons/activeUser/index.tsx
index f721f3af..5f8c5cdf 100644
--- a/apps/frontend/src/components/commons/activeUser/index.tsx
+++ b/apps/frontend/src/components/commons/activeUser/index.tsx
@@ -7,7 +7,7 @@ interface ActiveUserProps {
 }
 
 export default function ActiveUser({ users, className }: ActiveUserProps) {
-  const maxVisibleUsers = 5;
+  const maxVisibleUsers = 10;
   const hasMoreUsers = users.length > maxVisibleUsers;
   const visibleUsers = users.slice(0, maxVisibleUsers);
 

From b8a117dc03e45b126d697a467d61dad1c1721373 Mon Sep 17 00:00:00 2001
From: djk01281 <djk01281@gmail.com>
Date: Thu, 21 Nov 2024 17:41:12 +0900
Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=EB=85=B8=EB=93=9C=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/frontend/src/components/canvas/NoteNode.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/components/canvas/NoteNode.tsx b/apps/frontend/src/components/canvas/NoteNode.tsx
index b4c0c5d1..a9c54e5d 100644
--- a/apps/frontend/src/components/canvas/NoteNode.tsx
+++ b/apps/frontend/src/components/canvas/NoteNode.tsx
@@ -59,8 +59,8 @@ export function NoteNode({ data }: NodeProps<NoteNodeType>) {
         position={Position.Bottom}
         isConnectable={true}
       />
-      <div className="flex h-full w-full flex-col items-center">
-        <div className="flex w-full min-w-0 flex-1 flex-row justify-start gap-1">
+      <div className="flex h-full w-full flex-col justify-between">
+        <div className="flex w-full min-w-0 flex-row items-center justify-start gap-1">
           {data.emoji ? (
             <Emoji emoji={data.emoji} />
           ) : (
@@ -73,7 +73,7 @@ export function NoteNode({ data }: NodeProps<NoteNodeType>) {
           <div className="w-full truncate">{data.title}</div>
         </div>
         <ActiveUser
-          className="justify-end self-end"
+          className="self-end"
           users={activeUsers.filter(
             (user) => user.currentPageId === data.id.toString(),
           )}