Refactor: 선택인자로 더미 데이터 넘기도록 함
This commit is contained in:
parent
140c34a041
commit
d79bf97406
@ -1,11 +1,9 @@
|
|||||||
// .storybook/preview.ts
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import type { Preview } from '@storybook/react';
|
import type { Preview } from '@storybook/react';
|
||||||
import { MemoryRouter } from 'react-router-dom';
|
import { MemoryRouter } from 'react-router-dom';
|
||||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||||
import '../src/index.css';
|
import '../src/index.css';
|
||||||
|
|
||||||
// QueryClient 생성
|
|
||||||
const queryClient = new QueryClient();
|
const queryClient = new QueryClient();
|
||||||
|
|
||||||
const preview: Preview = {
|
const preview: Preview = {
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import { Outlet } from 'react-router-dom';
|
import { Outlet } from 'react-router-dom';
|
||||||
|
import { useParams } from 'react-router-dom';
|
||||||
import Header from '../Header';
|
import Header from '../Header';
|
||||||
import { ResizablePanelGroup, ResizablePanel } from '../ui/resizable';
|
import { ResizablePanelGroup, ResizablePanel } from '../ui/resizable';
|
||||||
import AdminProjectSidebar from '../AdminProjectSidebar';
|
import AdminProjectSidebar from '../AdminProjectSidebar';
|
||||||
@ -6,18 +7,59 @@ import AdminMenuSidebar from '../AdminMenuSidebar';
|
|||||||
import { Workspace } from '@/types';
|
import { Workspace } from '@/types';
|
||||||
|
|
||||||
interface AdminLayoutProps {
|
interface AdminLayoutProps {
|
||||||
workspace: Workspace;
|
workspace?: Workspace;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function AdminLayout({ workspace }: AdminLayoutProps) {
|
export default function AdminLayout({ workspace }: AdminLayoutProps) {
|
||||||
|
const { workspaceId } = useParams<{ workspaceId: string }>();
|
||||||
|
|
||||||
|
const numericWorkspaceId = workspaceId ? parseInt(workspaceId, 10) : 0;
|
||||||
|
|
||||||
|
const effectiveWorkspace: Workspace = workspace || {
|
||||||
|
id: numericWorkspaceId,
|
||||||
|
name: workspaceId ? `workspace-${workspaceId}` : 'default-workspace',
|
||||||
|
projects: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: 'project1',
|
||||||
|
type: 'Detection',
|
||||||
|
children: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: 'project2',
|
||||||
|
type: 'Detection',
|
||||||
|
children: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: 'project3',
|
||||||
|
type: 'Detection',
|
||||||
|
children: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: 'project4',
|
||||||
|
type: 'Detection',
|
||||||
|
children: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: 'project5',
|
||||||
|
type: 'Detection',
|
||||||
|
children: [],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Header className="fixed left-0 top-0" />
|
<Header className="fixed left-0 top-0" />
|
||||||
<div className="mt-16 h-[calc(100vh-64px)] w-screen">
|
<div className="mt-16 h-[calc(100vh-64px)] w-screen">
|
||||||
<ResizablePanelGroup direction="horizontal">
|
<ResizablePanelGroup direction="horizontal">
|
||||||
<AdminProjectSidebar
|
<AdminProjectSidebar
|
||||||
workspaceName={workspace.name}
|
workspaceName={effectiveWorkspace.name}
|
||||||
projects={workspace.projects}
|
projects={effectiveWorkspace.projects}
|
||||||
/>
|
/>
|
||||||
<ResizablePanel className="flex w-full items-center">
|
<ResizablePanel className="flex w-full items-center">
|
||||||
<main className="h-full grow">
|
<main className="h-full grow">
|
||||||
|
@ -16,18 +16,24 @@ interface Project {
|
|||||||
|
|
||||||
export default function AdminMemberManage({
|
export default function AdminMemberManage({
|
||||||
title = '멤버 관리',
|
title = '멤버 관리',
|
||||||
projects,
|
projects = [
|
||||||
onProjectChange,
|
{ id: 'project-1', name: '프로젝트 A' },
|
||||||
onSubmit,
|
{ id: 'project-2', name: '프로젝트 B' },
|
||||||
members,
|
],
|
||||||
onMemberInvite,
|
onProjectChange = (projectId: string) => console.log('Selected Project:', projectId),
|
||||||
|
onSubmit = (data: MemberManageFormValues) => console.log('Submitted:', data),
|
||||||
|
members = [
|
||||||
|
{ email: 'admin1@example.com', role: 'admin' },
|
||||||
|
{ email: 'viewer2@example.com', role: 'viewer' },
|
||||||
|
],
|
||||||
|
onMemberInvite = () => console.log('Invite member'),
|
||||||
}: {
|
}: {
|
||||||
title?: string;
|
title?: string;
|
||||||
projects: Project[];
|
projects?: Project[];
|
||||||
onProjectChange: (projectId: string) => void;
|
onProjectChange?: (projectId: string) => void;
|
||||||
onSubmit: (data: MemberManageFormValues) => void;
|
onSubmit?: (data: MemberManageFormValues) => void;
|
||||||
members: Member[];
|
members?: Member[];
|
||||||
onMemberInvite: () => void;
|
onMemberInvite?: () => void;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<div className="flex w-full flex-col gap-6 border-b-[0.67px] border-[#dcdcde] bg-[#fbfafd] p-6">
|
<div className="flex w-full flex-col gap-6 border-b-[0.67px] border-[#dcdcde] bg-[#fbfafd] p-6">
|
||||||
|
Loading…
Reference in New Issue
Block a user