Merge pull request #273 from boostcampwm-2024/Feature/#269_workspace_…

…관련_완성도_개선 Feature/#269 workspace 관련 완성도 개선
boostcampwm-2024 · Dec 2, 2024 · d16ebd2 · d16ebd2
2 parents 4373160 + 371ef7a
commit d16ebd2
Show file tree

Hide file tree

Showing 13 changed files with 418 additions and 24 deletions.
diff --git a/client/src/assets/icons/pencil.svg b/client/src/assets/icons/pencil.svg
diff --git a/client/src/components/modal/RenameModal.style.ts b/client/src/components/modal/RenameModal.style.ts
@@ -0,0 +1,29 @@
+import { css } from "@styled-system/css";
+
+export const container = css({
+  display: "flex",
+  gap: "4",
+  flexDirection: "column",
+});
+
+export const title = css({
+  color: "gray.700",
+  fontSize: "lg",
+  fontWeight: "medium",
+});
+
+export const input = css({
+  borderColor: "gray.200",
+  borderRadius: "md",
+  borderWidth: "1px",
+  width: "full",
+  paddingY: "2",
+  paddingX: "3",
+  _focus: {
+    outline: "none",
+    borderColor: "blue.500",
+  },
+  _hover: {
+    borderColor: "gray.300",
+  },
+});
diff --git a/client/src/components/modal/RenameModal.tsx b/client/src/components/modal/RenameModal.tsx
@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { container, title, input } from "./RenameModal.style";
+import { Modal } from "./modal";
+
+interface RenameModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onRename: (newName: string) => void;
+  currentName: string;
+}
+
+export const RenameModal = ({ isOpen, onClose, onRename, currentName }: RenameModalProps) => {
+  const [name, setName] = useState(currentName);
+
+  const handleRename = () => {
+    if (name.trim()) {
+      onRename(name);
+      onClose();
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      primaryButtonLabel="변경하기"
+      primaryButtonOnClick={handleRename}
+      secondaryButtonLabel="취소"
+      secondaryButtonOnClick={onClose}
+    >
+      <div className={container}>
+        <h2 className={title}>워크스페이스 이름 변경</h2>
+        <input
+          className={input}
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="새로운 워크스페이스 이름"
+        />
+      </div>
+    </Modal>
+  );
+};
diff --git a/client/src/components/sidebar/components/menuButton/MenuButton.style.ts b/client/src/components/sidebar/components/menuButton/MenuButton.style.ts
@@ -2,7 +2,7 @@ import { css } from "@styled-system/css";
 
 export const menuItemWrapper = css({
   display: "flex",
-  gap: "md",
+  gap: "32px",
   alignItems: "center",
   width: "250px",
   padding: "md",
@@ -15,6 +15,7 @@ export const menuItemWrapper = css({
 export const textBox = css({
   color: "gray.700",
   fontSize: "md",
+  fontWeight: "medium",
 });
 
 export const menuButtonContainer = css({
@@ -24,7 +25,48 @@ export const menuButtonContainer = css({
     top: "100%",
     left: 0,
     width: "100%",
-    height: "4px", // top: calc(100% + 4px)와 동일한 값
+    height: "4px",
     content: '""',
   },
 });
+
+export const nameWrapper = css({
+  display: "flex",
+  gap: "1",
+  flexDirection: "column",
+  borderColor: "gray.200",
+  borderRadius: "md",
+  borderWidth: "1px",
+  padding: "sm",
+  borderStyle: "solid",
+  _hover: {
+    borderColor: "gray.300", // hover 시 테두리 색상 변경
+  },
+});
+export const workspaceInfo = css({
+  display: "flex",
+  gap: "0.5",
+  flexDirection: "column",
+});
+
+export const workspaceHeader = css({
+  display: "flex",
+  gap: "2",
+  alignItems: "center",
+});
+
+export const currentWorkspaceNameBox = css({
+  color: "gray.600",
+  fontSize: "sm",
+  fontWeight: "medium",
+});
+
+export const workspaceRole = css({
+  color: "gray.500",
+  fontSize: "xs",
+});
+
+export const userCount = css({
+  color: "gray.500",
+  fontSize: "xs",
+});
diff --git a/client/src/components/sidebar/components/menuButton/MenuButton.tsx b/client/src/components/sidebar/components/menuButton/MenuButton.tsx
@@ -5,7 +5,16 @@ import { useSocketStore } from "@src/stores/useSocketStore";
 import { useToastStore } from "@src/stores/useToastStore";
 import { useWorkspaceStore } from "@src/stores/useWorkspaceStore";
 import { useUserInfo } from "@stores/useUserStore";
-import { menuItemWrapper, textBox, menuButtonContainer } from "./MenuButton.style";
+import {
+  menuItemWrapper,
+  textBox,
+  menuButtonContainer,
+  // userCount,
+  // currentWorkspaceNameBox,
+  // workspaceInfo,
+  // workspaceRole,
+  // nameWrapper,
+} from "./MenuButton.style";
 import { MenuIcon } from "./components/MenuIcon";
 import { WorkspaceSelectModal } from "./components/WorkspaceSelectModal";
 
@@ -14,12 +23,15 @@ export const MenuButton = () => {
   const [isOpen, setIsOpen] = useState(false);
   const { socket, workspace } = useSocketStore();
   const { addToast } = useToastStore();
+  const currentRole = useWorkspaceStore((state) => state.currentRole);
+  // const currentWorkspaceName = useWorkspaceStore((state) => state.currentWorkspaceName);
+  // const currentActiveUsers = useWorkspaceStore((state) => state.currentActiveUsers);
+  // const currentMemberCount = useWorkspaceStore((state) => state.currentMemberCount);
   const {
     isOpen: isInviteModalOpen,
     openModal: openInviteModal,
     closeModal: closeInviteModal,
   } = useModal();
-  const currentRole = useWorkspaceStore((state) => state.currentRole);
   const handleMenuClick = () => {
     setIsOpen((prev) => !prev);
   };
@@ -91,6 +103,7 @@ export const MenuButton = () => {
     }
     openInviteModal();
   };
+
   return (
     <>
       <button
@@ -101,6 +114,14 @@ export const MenuButton = () => {
         <button className={menuItemWrapper}>
           <MenuIcon />
           <p className={textBox}>{name ?? "Nocta"}</p>
+          {/* <div className={nameWrapper}>
+            {currentWorkspaceName && currentRole && (
+              <div className={workspaceInfo}>
+                <span className={currentWorkspaceNameBox}>{currentWorkspaceName}</span>
+                <span className={workspaceRole}>{currentRole}</span>
+              </div>
+            )}
+          </div> */}
         </button>
         <WorkspaceSelectModal isOpen={isOpen} userName={name} onInviteClick={handleInviteModal} />
         <InviteModal

diff --git a/...ponents/sidebar/components/menuButton/components/components/WorkspaceSelectItem.style.tsx b/...ponents/sidebar/components/menuButton/components/components/WorkspaceSelectItem.style.tsx
@@ -3,6 +3,7 @@ import { css } from "@styled-system/css";
 
 export const itemContainer = css({
   display: "flex",
+  position: "relative", // 부모 요소에 relative 추가
   justifyContent: "space-between",
   alignItems: "center",
   borderLeft: "3px solid transparent", // 활성화되지 않았을 때 border 공간 확보
@@ -20,10 +21,36 @@ export const informBox = css({
   alignItems: "center",
   marginLeft: "14px",
 });
+export const pencilButton = css({
+  display: "flex",
+  position: "absolute", // relative 대신 absolute 사용
+  top: "50%", // 중앙 정렬을 위해
+  right: "5%", // left 대신 right 사용
+  transform: "translateY(-50%)", // 정확한 세로 중앙 정렬
+  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,31 +34,60 @@ 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);
       setCurrentRole(role);
+      setCurrentWorkspaceName(name);
       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>
+          {isOwner && (
+            <button
+              onClick={() => setIsRenameModalOpen(true)}
+              className={pencilButton}
+              aria-label="워크스페이스 이름 변경"
+            >
+              <PencilIcon />
+            </button>
+          )}
         </div>
-      </div>
-    </button>
+      </button>
+
+      <RenameModal
+        isOpen={isRenameModalOpen}
+        onClose={() => setIsRenameModalOpen(false)}
+        onRename={handleRename}
+        currentName={name}
+      />
+    </div>
   );
 };