Merge pull request #246 from boostcampwm-2024/feature-fe-#240

노드 컴포넌트, ActiveUser 컴포넌트 수정

Author: yewonJin

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 justify-between">
+        <div className="flex w-full min-w-0 flex-row items-center 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="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>
   );
 }

apps/frontend/src/components/commons/activeUser/index.tsx

@@ -7,22 +7,35 @@ interface ActiveUserProps {
 }
 
 export default function ActiveUser({ users, className }: ActiveUserProps) {
+  const maxVisibleUsers = 10;
+  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>
   );
 }