레이아웃 정리

This commit is contained in:
현성필
2025-01-25 20:41:02 +09:00
parent 05f00337df
commit 4d77faebf5
2 changed files with 15 additions and 80 deletions
@@ -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"
@@ -1,38 +1,16 @@
import React, { useState } from 'react';
import { FileText, MoreHorizontal } from 'lucide-react';
import { SidebarMenuSubItem, SidebarMenuSubButton, SidebarMenuAction } from '@/components/ui/sidebar';
import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
import React, {useState} from 'react';
import {FileText, MoreHorizontal} from 'lucide-react';
import {SidebarMenuSubItem, SidebarMenuSubButton, SidebarMenuAction} from '@/components/ui/sidebar';
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 }) => (
<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 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' : ''}`}
>
{/*<SidebarMenuSubButton*/}
{/* 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"
>
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">
<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>
<span className="truncate">
{api.method && <span className="font-medium text-primary">{api.method} </span>}
{api.name}
</span>
<TooltipTrigger asChild className="block max-w-[150px]">
<span className="block truncate">s
{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>}
{api.path && <p className="text-xs text-muted-foreground">{api.method} {api.path}</p>}
</div>
</TooltipContent>
</Tooltip>