Merge pull request #243 from boostcampwm-2024/feature-position-refactor-fe

[Feature-position-refactor-fe] 노드 재정렬 로직 수정 & 노드 생성 위치 로직 수정 & 노드 색상 변경

Author: Minju9187

client/src/components/Dashboard/MindMapInfoItem.tsx

@@ -55,11 +55,11 @@ export default function MindMapInfoItem({ data, index }: MindMapInfoItemProps) {
             </span>
           ))}
         </div>
-        <div className="flex min-w-24 items-center justify-center gap-2">
+        <div className="flex w-44 items-center gap-2 pl-4">
           <FaUserCircle className="h-6 w-6" />
-          <div>{data.ownerName}</div>
+          <div className="w-32 overflow-hidden text-ellipsis whitespace-nowrap">{data.ownerName}</div>
         </div>
-        <div className="flex min-w-40 justify-between">
+        <div className="flex min-w-40 justify-between pl-4">
           <div>{extractDate(new Date(data.createDate))}</div>
           {ownerCheck ? (
             <Button

client/src/components/Dashboard/UserDashBoard.tsx

@@ -35,8 +35,8 @@ export default function UserDashBoard() {
       <header className="flex items-center justify-between px-3 py-2 font-bold">
         <div className="min-w-72 pl-2">제목</div>
         <div className="min-w-60 pl-8">키워드</div>
-        <div className="min-w-24 pl-4">소유자</div>
-        <div className="min-w-40 pl-1">생성 일자</div>
+        <div className="w-44 pl-4">소유자</div>
+        <div className="min-w-40 pl-4">생성 일자</div>
       </header>
       <div className="no-scrollbar h-[calc(100%-40px)] overflow-y-scroll border-b-[1px] border-t-[1px] border-grayscale-500">
         {filteredData.map((info, i) => (

client/src/components/MindMapCanvas/ToolMenu.tsx

@@ -46,7 +46,7 @@ export default function ToolMenu({ dimensions, zoomIn, zoomOut, dragmode, setDra
   }
 
   return (
-    <div className="absolute bottom-2 left-1/2 flex -translate-x-2/4 -translate-y-2/4 items-center justify-center rounded-full border bg-white px-6 py-2 shadow-md">
+    <div className="absolute bottom-2 left-1/2 z-20 flex -translate-x-2/4 -translate-y-2/4 items-center justify-center rounded-full border bg-white px-6 py-2 shadow-md">
       <div className="flex items-center gap-3">
         <Button
           className={`group flex h-8 w-8 items-center justify-center rounded-md p-1 hover:bg-blue-300 ${dragmode ? "bg-blue-400" : ""}`}

client/src/components/MindMapHeader/index.tsx

@@ -53,7 +53,7 @@ export default function MindMapHeader() {
           onChange={(e) => updateTitle(e.target.value)}
           onBlur={handleInputBlur}
           onKeyDown={handleInputKeyDown}
-          maxLength={32}
+          maxLength={16}
           autoFocus
         />
       ) : (

client/src/components/Minutes/Tiptap/index.tsx

@@ -27,7 +27,7 @@ export default function Tiptap() {
       Indent,
       Placeholder.configure({
         emptyEditorClass: "is-editor-empty",
-        placeholder: "회의록을 입력해주세요...",
+        placeholder: "회의록을 입력해주세요",
       }),
       TextAlign.configure({
         types: ["heading", "paragraph"],

client/src/components/common/Toast/ToastContainer.tsx

@@ -5,7 +5,7 @@ export default function ToastContainer({ toasts, setToasts }) {
     setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id));
   };
   return (
-    <div className="no-scrollbar absolute right-3 top-3 max-h-[calc(100%-50px)] overflow-y-scroll">
+    <div className="no-scrollbar absolute right-3 top-3 z-20 max-h-[calc(100%-50px)] overflow-y-scroll">
       {toasts.toReversed().map((toast) => (
         <Toast key={toast.id} message={toast.message} status={toast.status} onClose={() => removeToast(toast.id)} />
       ))}

client/src/constants/color.ts

@@ -1 +1 @@
-export const colors = ["#0053B5", "#64B5F6", "#6B95BC", "#E6F4F1", "#FCFCD4"];
+export const colors = ["#0053B5", "#64B5F6", "#6B95BC", "#A2D2FF", "#1d70a2"];

client/src/konva_mindmap/events/addNode.ts

@@ -63,15 +63,18 @@ export function addNode(
     return;
   }
 
-  if (!selectedNode.nodeId || data[selectedNode.nodeId].depth === NODE_DEPTH_LIMIT) return;
+  if (!selectedNode.nodeId || data[selectedNode.nodeId].depth === NODE_DEPTH_LIMIT) {
+    useConnectionStore.getState().propagateError("최대 깊이 5까지만 생성할 수 있어요", "error");
+    return;
+  }
 
   const newNodeId = parseInt(Object.keys(data)[Object.keys(data).length - 1]) + 1;
   // 소켓으로 서버에 데이터를 전송할 때도 사용하기 위해 변수로 따로 빼서 관리
   const newNode = {
     id: newNodeId,
     keyword: "제목없음",
     depth: data[selectedNode.nodeId].depth + 1,
-    location: getNewNodePosition(data[selectedNode.nodeId].children, data, data[selectedNode.nodeId]),
+    location: getNewNodePosition(data, selectedNode.nodeId),
     children: [],
   };
 

client/src/konva_mindmap/utils/getNewNodePosition.ts

@@ -1,21 +1,29 @@
-import { Node, NodeData } from "@/types/Node";
+import { NodeData } from "@/types/Node";
 import { findRootNodeKey } from "./findRootNodeKey";
 import { calculateVector } from "./vector";
+import { NODE_RADIUS } from "./nodeAttrs";
 
-export function getNewNodePosition(children: number[], data: NodeData, parentNode: Node) {
+const lineLength = [360, 360, 360, 270];
+const angle = [104, 105, 103, 104];
+const distance = [240, 200, 160, 120];
+
+export function getNewNodePosition(data: NodeData, nodeId: number) {
   const rootKey = findRootNodeKey(data);
+  const node = data[nodeId];
+  const children = node.children;
+  const depth = node.depth;
 
   if (!children.length) {
-    if (parentNode.id === rootKey)
+    if (node.id === rootKey)
       return {
-        x: parentNode.location.x + 300,
-        y: parentNode.location.y,
+        x: node.location.x + NODE_RADIUS(depth) * 7,
+        y: node.location.y,
       };
-    const { x, y } = calculateVector(data[rootKey].location, parentNode.location, -80, 240);
-    return parentNode ? { x: parentNode.location.x + x, y: parentNode.location.y + y } : { x: 0, y: 0 };
+    const { x, y } = calculateVector(data[rootKey].location, node.location, -60, lineLength[depth - 1]);
+    return node ? { x: node.location.x + x, y: node.location.y + y } : { x: 0, y: 0 };
   }
   const lastChildren = data[children[children.length - 1]];
-  const uv = calculateVector(parentNode.location, lastChildren.location, 110, 240);
+  const uv = calculateVector(node.location, lastChildren.location, angle[depth - 1], distance[depth - 1]);
   return {
     x: lastChildren.location.x + uv.x,
     y: lastChildren.location.y + uv.y,

client/src/konva_mindmap/utils/initializeNodePosition.ts

@@ -52,32 +52,44 @@ export default function initializeNodePosition(data: NodeData) {
     const depth = node.depth;
     const radius = NODE_RADIUS(depth);
 
-    if (depth === 2) {
-      const angle = (360 / length) * index;
-      const radianAngle = (Math.PI / 180) * angle;
-      xPos += radius * Math.cos(radianAngle) * 8;
-      yPos += radius * Math.sin(radianAngle) * 8;
-    } else if (depth === 3) {
-      const divideAngle = 180 / (length + 1);
-      const adjustedAngle = divideAngle * (index + 1) - 90;
-      const { x, y } = calculateVector(rootLocation, { x: xPos, y: yPos }, adjustedAngle, 360);
-      xPos += x;
-      yPos += y;
-    } else if (depth === 4) {
-      const divideAngle = 180 / (length + 3);
-      const adjustedAngle = divideAngle * (index + 2) - 90;
-      const { x, y } = calculateVector(rootLocation, { x: xPos, y: yPos }, adjustedAngle, 360);
-      xPos += x;
-      yPos += y;
-    } else if (depth === 5) {
-      const ancestor = findAncestor(data, nodeId, 2);
-      const divideAngle = 180 / (length + 1);
-      const adjustedAngle = divideAngle * (index + 1) - 90;
-      const calculatedDistance = Math.sqrt((2 * radius * radius) / (1 - Math.cos((Math.PI / 180) * divideAngle))) * 1.8;
-      const maxDistance = Math.max(calculatedDistance, 200);
-      const { x, y } = calculateVector(ancestor.location, { x: xPos, y: yPos }, adjustedAngle, maxDistance);
+    const applyVectorAdjustment = (origin: { x: number; y: number }, angle: number, distance: number) => {
+      const { x, y } = calculateVector(origin, { x: xPos, y: yPos }, angle, distance);
       xPos += x;
       yPos += y;
+    };
+
+    switch (depth) {
+      case 2: {
+        const angle = (360 / length) * index;
+        const radianAngle = (Math.PI / 180) * angle;
+        xPos += radius * Math.cos(radianAngle) * 8;
+        yPos += radius * Math.sin(radianAngle) * 8;
+        break;
+      }
+      case 3: {
+        const divideAngle = 180 / (length + 1);
+        const adjustedAngle = divideAngle * (index + 1) - 90;
+        applyVectorAdjustment(rootLocation, adjustedAngle, 360);
+        break;
+      }
+      case 4: {
+        const divideAngle = 180 / (length + 3);
+        const adjustedAngle = divideAngle * (index + 2) - 90;
+        applyVectorAdjustment(rootLocation, adjustedAngle, 360);
+        break;
+      }
+      case 5: {
+        const ancestor = findAncestor(data, nodeId, 2);
+        const divideAngle = 180 / (length + 1);
+        const adjustedAngle = divideAngle * (index + 1) - 90;
+        const calculatedDistance =
+          Math.sqrt((2 * radius * radius) / (1 - Math.cos((Math.PI / 180) * divideAngle))) * 1.8;
+        const maxDistance = Math.max(calculatedDistance, 200);
+        applyVectorAdjustment(ancestor.location, adjustedAngle, maxDistance);
+        break;
+      }
+      default:
+        break;
     }
     node.location.x = xPos;
     node.location.y = yPos;