feat: 워크스페이스 이름 변경 연필모양 버튼 추가

#269
boostcampwm-2024 · Dec 2, 2024 · d4aa89e · d4aa89e
1 parent da6218b
commit d4aa89e
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 15 deletions.
diff --git a/...ponents/sidebar/components/menuButton/components/components/WorkspaceSelectItem.style.tsx b/...ponents/sidebar/components/menuButton/components/components/WorkspaceSelectItem.style.tsx
@@ -20,10 +20,35 @@ export const informBox = css({
   alignItems: "center",
   marginLeft: "14px",
 });
+export const pencilButton = css({
+  display: "flex",
+  position: "relative",
+  top: "-40px",
+  left: "225px",
+  justifyContent: "center",
+  alignItems: "center",
+  borderRadius: "6px",
+  padding: "1",
+  opacity: "0",
+  backgroundColor: "gray.200",
+  transition: "all",
+  _hover: {
+    backgroundColor: "gray.100",
+  },
+  _groupHover: {
+    opacity: "100",
+  },
+  "& svg": {
+    // SVG 스타일 추가
+    width: "4",
+    height: "4",
+    color: "green",
+  },
+});
 export const itemContent = css({
   display: "flex",
   flex: 1,
-  gap: "10",
+  gap: "4",
   alignItems: "center",
 });
 

diff --git a/...rc/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.tsx b/...rc/components/sidebar/components/menuButton/components/components/WorkspaceSelectItem.tsx
@@ -1,9 +1,13 @@
 import { WorkspaceListItem } from "@noctaCrdt/Interfaces"; // 이전에 만든 인터페이스 import
+import { useState } from "react";
+import PencilIcon from "@assets/icons/pencil.svg?react";
+import { RenameModal } from "@src/components/modal/RenameModal";
 import { useSocketStore } from "@src/stores/useSocketStore";
 import { useToastStore } from "@src/stores/useToastStore";
 import { useUserInfo } from "@src/stores/useUserStore";
 import { useWorkspaceStore } from "@src/stores/useWorkspaceStore";
 import {
+  pencilButton,
   itemContainer,
   itemContent,
   itemIcon,
@@ -30,8 +34,11 @@ export const WorkspaceSelectItem = ({
   const { workspace, switchWorkspace } = useSocketStore();
   const { addToast } = useToastStore();
   const setCurrentRole = useWorkspaceStore((state) => state.setCurrentRole);
+  const [isRenameModalOpen, setIsRenameModalOpen] = useState(false);
+  const { socket } = useSocketStore();
   const setCurrentWorkspaceName = useWorkspaceStore((state) => state.setCurrentWorkspaceName);
   const isActive = workspace?.id === id; // 현재 워크스페이스 확인
+  const isOwner = role === "owner";
   const handleClick = () => {
     if (!isActive) {
       switchWorkspace(userId, id);
@@ -40,23 +47,46 @@ export const WorkspaceSelectItem = ({
       addToast(`워크스페이스(${name})에 접속하였습니다.`);
     }
   };
+  const handleRename = (newName: string) => {
+    socket?.emit("workspace/rename", {
+      workspaceId: id,
+      newName,
+    });
+  };
 
   return (
-    <button className={`${itemContainer} ${isActive ? activeItem : ""}`} onClick={handleClick}>
-      <div className={itemContent}>
-        <div className={itemIcon}>{name.charAt(0)}</div>
-        <div className={itemInfo}>
-          <span className={itemName}>{name}</span>
-          <div className={informBox}>
-            <span className={itemMemberCount}>{role}</span>
-            {memberCount !== undefined && (
-              <span className={itemRole}>
-                접속자수 {activeUsers} / {memberCount} 명{" "}
-              </span>
-            )}
+    <div className="relative flex items-center group">
+      <button className={`${itemContainer} ${isActive ? activeItem : ""}`} onClick={handleClick}>
+        <div className={itemContent}>
+          <div className={itemIcon}>{name.charAt(0)}</div>
+          <div className={itemInfo}>
+            <span className={itemName}>{name}</span>
+            <div className={informBox}>
+              <span className={itemMemberCount}>{role}</span>
+              {memberCount !== undefined && (
+                <span className={itemRole}>
+                  접속자수 {activeUsers} / {memberCount} 명{" "}
+                </span>
+              )}
+            </div>
           </div>
         </div>
-      </div>
-    </button>
+      </button>
+      {isOwner && (
+        <button
+          onClick={() => setIsRenameModalOpen(true)}
+          className={pencilButton}
+          aria-label="워크스페이스 이름 변경"
+        >
+          <PencilIcon />
+        </button>
+      )}
+      <RenameModal
+        isOpen={isRenameModalOpen}
+        onClose={() => setIsRenameModalOpen(false)}
+        onRename={handleRename}
+        currentName={name}
+      />
+    </div>
   );
 };