[Feature-list-fix-fe] 리스트 아코디언 관련 함수 확장 & 타입 추가 & 수정

client/src/components/MindMapHeader/index.tsx

@@ -48,7 +48,7 @@ export default function MindMapHeader() {
       <MindMapHeaderButtons />
       {editMode ? (
         <Input
-          className="flex w-80 items-center bg-transparent text-center focus:border-none focus:outline-none"
+          className="flex w-80 items-center bg-transparent text-center"
           value={editTitle}
           onChange={(e) => setEditTitle(e.target.value)}
           onBlur={handleInputBlur}

client/src/components/MindMapMainSection/ControlSection/ListView/NodeItem.tsx

@@ -10,7 +10,7 @@ import { FaPencilAlt } from "react-icons/fa";
 import { FaPlus } from "react-icons/fa";
 import { FaRegTrashAlt } from "react-icons/fa";
 import useNodeActions from "@/hooks/useNodeActions";
-import { findParentNodeKey } from "@/konva_mindmap/utils/findParentNodeKey";
+import { findParentNodeKey, getParentNodeKeys } from "@/konva_mindmap/utils/findParentNodeKey";
 
 type NodeItemProps = {
   node: Node;
@@ -36,8 +36,8 @@ export default function NodeItem({ node, parentNodeId, open, handleAccordion, op
   } = useNodeActions(node.id, node.keyword);
   const { data, saveHistory, selectedNode, overrideNodeData, selectNode } = useNodeListContext();
   const inputRef = useRef<HTMLInputElement | null>(null);
-  const isSelected =
-    selectedNode.parentNodeId === node.id || findParentNodeKey(selectedNode.parentNodeId, data) === node.id;
+  const parentNodes = getParentNodeKeys(selectedNode.nodeId, data);
+  const isSelected = parentNodes.includes(node.id);
 
   useEffect(() => {
     node.newNode ? setIsEditing(true) : setIsEditing(false);
@@ -66,17 +66,18 @@ export default function NodeItem({ node, parentNodeId, open, handleAccordion, op
       onMouseLeave={handleMouseLeave}
     >
       <div className="flex min-w-0 flex-1 items-center gap-3">
-        {!isEditing &&
-          (node.depth < NODE_DEPTH_LIMIT ? (
-            <button
-              className={`flex h-5 w-5 items-center justify-center transition-all ${open ? "" : "rotate-[-90deg]"}`}
-              onClick={handleAccordion}
-            >
-              <FaChevronDown className="h-4 w-4" />
-            </button>
-          ) : (
-            <TbPointFilled className="h-3 w-3" />
-          ))}
+        {node.depth < NODE_DEPTH_LIMIT ? (
+          <button
+            className={`flex h-5 w-5 items-center justify-center p-1 transition-all ${open ? "" : "rotate-[-90deg]"}`}
+            onClick={handleAccordion}
+          >
+            <FaChevronDown className="h-4 w-4" />
+          </button>
+        ) : (
+          <div className="flex h-5 w-5 items-center justify-center">
+            <TbPointFilled />
+          </div>
+        )}
 
         {isEditing ? (
           <Input

client/src/konva_mindmap/utils/findLastLeafNode.ts

@@ -1,4 +1,6 @@
-export function findLastLeafNode(data, nodeId) {
+import { NodeData } from "@/types/Node";
+
+export function findLastLeafNode(data: NodeData, nodeId: number) {
   const currentNode = data[nodeId];
 
   if (!currentNode.children || currentNode.children.length === 0) {

client/src/konva_mindmap/utils/findParentNodeKey.ts

@@ -1,4 +1,6 @@
-export function findParentNodeKey(nodeId, data) {
+import { NodeData } from "@/types/Node";
+
+export function findParentNodeKey(nodeId: number, data: NodeData) {
   for (const id in data) {
     const node = data[parseInt(id)];
     if (node.children.includes(nodeId)) {
@@ -7,3 +9,20 @@ export function findParentNodeKey(nodeId, data) {
   }
   return null;
 }
+
+export function getParentNodeKeys(nodeId: number, data: NodeData) {
+  const parentNodes: number[] = [];
+  let currentNodeId: number | null = nodeId;
+
+  while (currentNodeId !== null) {
+    const parentNodeId = findParentNodeKey(currentNodeId, data);
+    if (parentNodeId !== null) {
+      parentNodes.push(parentNodeId);
+      currentNodeId = parentNodeId;
+    } else {
+      break;
+    }
+  }
+
+  return parentNodes;
+}

client/src/konva_mindmap/utils/moveToNode.ts

@@ -1,8 +1,13 @@
+import { NodeData, SelectedNode } from "@/types/Node";
 import { findLastLeafNode } from "./findLastLeafNode";
 import { findParentNodeKey } from "./findParentNodeKey";
 import { findRootNodeKey } from "./findRootNodeKey";
 
-export function moveToNextNode(data, selectedNode, selectNode) {
+export function moveToNextNode(
+  data: NodeData,
+  selectedNode: SelectedNode,
+  selectNode: ({ nodeId, parentNodeId }: SelectedNode) => void,
+) {
   const { nodeId, parentNodeId } = selectedNode;
   const currentNode = data[nodeId];
 
@@ -47,7 +52,11 @@ export function moveToNextNode(data, selectedNode, selectNode) {
   }
 }
 
-export function moveToPreviousNode(data, selectedNode, selectNode) {
+export function moveToPreviousNode(
+  data: NodeData,
+  selectedNode: SelectedNode,
+  selectNode: ({ nodeId, parentNodeId }: SelectedNode) => void,
+) {
   const { nodeId, parentNodeId } = selectedNode;
   const currentNode = data[nodeId];
   const parentNode = data[parentNodeId];

client/src/konva_mindmap/utils/vector.ts

@@ -1,6 +1,11 @@
 import { Location } from "@/konva_mindmap/types/location";
 
-export function calculateVector(rootNodeLocation: Location, parentNodeLocation: Location, angleDegrees, magnitude = 1) {
+export function calculateVector(
+  rootNodeLocation: Location,
+  parentNodeLocation: Location,
+  angleDegrees: number,
+  magnitude = 1,
+) {
   const dx = parentNodeLocation.x - rootNodeLocation.x;
   const dy = parentNodeLocation.y - rootNodeLocation.y;
 

client/src/types/Node.ts

@@ -7,7 +7,7 @@ export type Node = {
   keyword: string;
   depth: number;
   location: Location;
-  children: number[] | [];
+  children: number[];
   newNode?: boolean;
 };