jhynsoo/worlabel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix: 레이블 페이지 레이아웃 사이즈 수정

Browse Source
This commit is contained in:
jhynsoo 2024-09-26 17:52:34 +09:00
parent 969ba59998
commit 4da7a3e6f5
4 changed files with 23 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/ImageCanvas/index.tsx
View File

@ -20,7 +20,7 @@ export default function ImageCanvas() {
const selectedLabelId = useCanvasStore((state) => state.selectedLabelId);
const setSelectedLabelId = useCanvasStore((state) => state.setSelectedLabelId);
const sidebarSize = useCanvasStore((state) => state.sidebarSize);
const stageWidth = window.innerWidth * ((100 - sidebarSize) / 100) - 200;
const stageWidth = window.innerWidth * ((100 - sidebarSize) / 100) - 201;
const stageHeight = window.innerHeight - 64;
const stageRef = useRef<Konva.Stage>(null);
const dragLayerRef = useRef<Konva.Layer>(null);

30
frontend/src/components/WorkspaceLabelBar/index.tsx
View File

@ -7,22 +7,20 @@ export default function WorkspaceLabelBar() {
const setSelectedLabelId = useCanvasStore((state) => state.setSelectedLabelId);
return (
<div className="flex h-full w-[200px] flex-col justify-between gap-2 border-l border-gray-300 bg-gray-50 p-3">
<div className="flex flex-col gap-2.5">
<header className="subheading flex w-full items-center gap-2">
<h1 className="w-full overflow-hidden text-ellipsis whitespace-nowrap">레이블 목록</h1>
</header>
<div className="flex flex-col gap-1">
{image &&
labels.map((label) => (
<LabelButton
key={label.id}
{...label}
selected={selectedLabelId === label.id}
setSelectedLabelId={setSelectedLabelId}
/>
))}
</div>
<div className="box-border flex h-full w-[200px] flex-col gap-2 border-l border-gray-300 bg-gray-50">
<header className="subheading flex w-full items-center gap-2 p-3 pb-0">
<h1 className="w-full overflow-hidden text-ellipsis whitespace-nowrap">레이블 목록</h1>
</header>
<div className="flex flex-col gap-1 overflow-y-auto p-3 pt-0">
{image &&
labels.map((label) => (
<LabelButton
key={label.id}
{...label}
selected={selectedLabelId === label.id}
setSelectedLabelId={setSelectedLabelId}
/>
))}
</div>
</div>
);

13
frontend/src/components/WorkspaceSidebar/index.tsx
View File

@ -30,13 +30,12 @@ export default function WorkspaceSidebar({ workspaceName, projects }: { workspac
minSize={10}
maxSize={35}
defaultSize={15}
className="flex h-full flex-col gap-2 bg-gray-50 p-3"
onResize={(size) => setSidebarSize(size)}
>
<header className="body flex w-full items-center gap-2">
<h1 className="subheading w-full overflow-hidden text-ellipsis whitespace-nowrap">{workspaceName}</h1>
</header>
<div className="">
<div className="box-border flex h-full flex-col gap-2 bg-gray-50 p-3">
<header className="body flex w-full items-center gap-2">
<h1 className="subheading w-full overflow-hidden text-ellipsis whitespace-nowrap">{workspaceName}</h1>
</header>
<Select
onValueChange={handleSelectProject}
defaultValue={selectedProjectId}
@ -55,8 +54,10 @@ export default function WorkspaceSidebar({ workspaceName, projects }: { workspac
))}
</SelectContent>
</Select>
<Suspense fallback={<div></div>}>
{selectedProject && <ProjectStructure project={selectedProject} />}
</Suspense>
</div>
<Suspense fallback={<div></div>}>{selectedProject && <ProjectStructure project={selectedProject} />}</Suspense>
</ResizablePanel>
<ResizableHandle className="bg-gray-300" />
</>

2
frontend/src/pages/LabelCanvas.tsx
View File

@ -14,7 +14,7 @@ export default function LabelCanvas() {
{image ? (
<ImageCanvas />
) : (
<div className="body flex h-full w-full select-none items-center justify-center bg-gray-200 text-gray-400">
<div className="body flex h-full select-none items-center justify-center bg-gray-200 text-gray-400">
이미지를 선택하세요.
</div>
)}