레이아웃 정리

TestMasterUI/src/components/MainContentArea.jsx

@@ -172,7 +172,7 @@ const ScenarioMode = ({
           <div className="editor flex-1 h-[calc(100vh-57px)] overflow-hidden">
             <ScenarioEditor/>
           </div>
-          <div className="navigation-sidebar min-w-[200px] border-l bg-gray-100">
+          <div className="navigation-sidebar min-w-[0px] border-l bg-gray-100">
             <APINavigation
                 contextPath="/"
                 side="right"

TestMasterUI/src/components/api-tester/DraggableApiItem.jsx

@@ -1,38 +1,16 @@
-import React, { useState } from 'react';
+import React, {useState} from 'react';
-import { FileText, MoreHorizontal } from 'lucide-react';
+import {FileText, MoreHorizontal} from 'lucide-react';
-import { SidebarMenuSubItem, SidebarMenuSubButton, SidebarMenuAction } from '@/components/ui/sidebar';
+import {SidebarMenuSubItem, SidebarMenuSubButton, SidebarMenuAction} from '@/components/ui/sidebar';
-import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
+import {Tooltip, TooltipTrigger, TooltipContent} from '@/components/ui/tooltip';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
-  DropdownMenuTrigger,
+  DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu';
 
-const ApiDropdownMenu = ({ onOpen, onRename, onDelete }) => (
+const DraggableApiItem = ({api, collectionId, onApiAction}) => {
-    <DropdownMenu>
-      <DropdownMenuTrigger data-dropdown-trigger="true" className="p-0 h-auto">
-        <div className="hover:bg-accent rounded-sm">
-          <MoreHorizontal className="h-4 w-4"/>
-        </div>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={onOpen}>
-          Open
-        </DropdownMenuItem>
-        <DropdownMenuSeparator/>
-        <DropdownMenuItem onClick={onRename}>
-          Rename
-        </DropdownMenuItem>
-        <DropdownMenuItem className="text-destructive" onClick={onDelete}>
-          Delete
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-);
-
-const DraggableApiItem = ({ api, collectionId, onApiAction }) => {
   const [isDragging, setIsDragging] = useState(false);
 
   const handleDragStart = (event) => {
@@ -69,63 +47,20 @@ const DraggableApiItem = ({ api, collectionId, onApiAction }) => {
           draggable
           onDragStart={handleDragStart}
           onDragEnd={handleDragEnd}
-          className={`cursor-move transition-colors duration-200 ${isDragging ? 'opacity-50 bg-accent' : ''}`}
+          className={`cursor-move transition-colors duration-200 px-4 ${isDragging ? 'opacity-50 bg-accent' : ''}`}>
-      >
+        <div className="w-full flex items-center gap-2 pr-2">
-        {/*<SidebarMenuSubButton*/}
+          <div onClick={() => !isDragging && onApiAction.open(collectionId, api.id)} className="flex items-center gap-2 flex-1 min-w-0 cursor-pointer">
-        {/*    onClick={(e) => {*/}
-        {/*      // Prevent click when dragging ends*/}
-        {/*      if (!isDragging) {*/}
-        {/*        onApiAction.open(collectionId, api.id);*/}
-        {/*      }*/}
-        {/*    }}*/}
-        {/*    className="w-full justify-start gap-2"*/}
-        {/*    asChild*/}
-        {/*>*/}
-        {/*  <div className="w-full flex items-center gap-2 min-w-0 pr-2">*/}
-        {/*    <FileText className="h-4 w-4 flex-shrink-0"/>*/}
-        {/*    <Tooltip>*/}
-        {/*      <TooltipTrigger asChild>*/}
-        {/*        <span className="truncate flex-1">*/}
-        {/*          {api.method && <span className="font-medium text-primary">{api.method} </span>}*/}
-        {/*          {api.name}*/}
-        {/*        </span>*/}
-        {/*      </TooltipTrigger>*/}
-        {/*      <TooltipContent>*/}
-        {/*        <div className="flex flex-col gap-1">*/}
-        {/*          <p className="font-medium">{api.name}</p>*/}
-        {/*          {api.path && <p className="text-xs text-muted-foreground">{api.path}</p>}*/}
-        {/*        </div>*/}
-        {/*      </TooltipContent>*/}
-        {/*    </Tooltip>*/}
-        {/*    <SidebarMenuAction*/}
-        {/*        className="p-0 m-0 flex-shrink-0"*/}
-        {/*        onClick={(e) => e.stopPropagation()}*/}
-        {/*    >*/}
-        {/*      <ApiDropdownMenu*/}
-        {/*          onOpen={() => onApiAction.open(collectionId, api.id)}*/}
-        {/*          onRename={() => onApiAction.rename(collectionId, api.id)}*/}
-        {/*          onDelete={() => onApiAction.delete(collectionId, api.id)}*/}
-        {/*      />*/}
-        {/*    </SidebarMenuAction>*/}
-        {/*  </div>*/}
-        {/*</SidebarMenuSubButton>*/}
-        <div className="w-full flex items-center gap-2 min-w-0 pr-2">
-          <div
-              onClick={() => !isDragging && onApiAction.open(collectionId, api.id)}
-              className="flex items-center gap-2 flex-1 min-w-0 cursor-pointer"
-          >
             <FileText className="h-4 w-4 flex-shrink-0"/>
             <Tooltip>
-              <TooltipTrigger asChild>
+              <TooltipTrigger asChild className="block max-w-[150px]">
-              <span className="truncate">
+                   <span className="block truncate">s
-                {api.method && <span className="font-medium text-primary">{api.method} </span>}
+                     {api.name}
-                {api.name}
+                   </span>
-              </span>
               </TooltipTrigger>
               <TooltipContent>
                 <div className="flex flex-col gap-1">
                   <p className="font-medium">{api.name}</p>
-                  {api.path && <p className="text-xs text-muted-foreground">{api.path}</p>}
+                  {api.path && <p className="text-xs text-muted-foreground">{api.method} {api.path}</p>}
                 </div>
               </TooltipContent>
             </Tooltip>