diff --git a/frontend/src/components/MemberManageModal/MemberManageForm.tsx b/frontend/src/components/MemberManageModal/MemberManageForm.tsx index 2559332..6732701 100644 --- a/frontend/src/components/MemberManageModal/MemberManageForm.tsx +++ b/frontend/src/components/MemberManageModal/MemberManageForm.tsx @@ -5,7 +5,6 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from ' import { Input } from '../ui/input'; import { Button } from '../ui/button'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'; -import { DialogClose } from '../ui/dialogCustom'; type Role = 'admin' | 'editor' | 'viewer'; @@ -127,15 +126,13 @@ export default function MemberManageForm({ members, onSubmit }: MemberManageForm ); })} - - - 역할 설정 - - + + 역할 설정 + ); diff --git a/frontend/src/components/TaskCard/index.stories.tsx b/frontend/src/components/TaskCard/index.stories.tsx new file mode 100644 index 0000000..a43a6ac --- /dev/null +++ b/frontend/src/components/TaskCard/index.stories.tsx @@ -0,0 +1,28 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import TaskCard from './index'; + +const meta: Meta = { + title: 'Components/TaskCard', + component: TaskCard, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + projectName: 'Project1', + taskName: 'Task1', + status: 'In Review', + taskType: 'Segmentation', + labels: [ + { name: 'Car', count: 25 }, + { name: 'Human', count: 37 }, + ], + createdOn: '2024-09-02', + memberCount: 3, + width: '444px', + // statusColor: 'text-blue-600 dark:text-blue-400', + }, +}; diff --git a/frontend/src/components/TaskCard/index.tsx b/frontend/src/components/TaskCard/index.tsx new file mode 100644 index 0000000..3ab6c60 --- /dev/null +++ b/frontend/src/components/TaskCard/index.tsx @@ -0,0 +1,64 @@ +interface TaskCardProps { + projectName: string; + taskName: string; + status: string; + taskType: string; + labels: { name: string; count: number }[]; + createdOn: string; + memberCount: number; + width?: string; + onClick?: () => void; + statusColor?: string; +} + +export default function TaskCard({ + projectName, + taskName, + status, + taskType, + labels, + createdOn, + memberCount, + width = '100%', + onClick, + statusColor = 'text-yellow-600 dark:text-yellow-400', +}: TaskCardProps): JSX.Element { + return ( + + + + {projectName} + {taskName} + + {status} + + + + {taskType} + + {labels.map((label, index) => ( + + {label.name} + ({label.count}) + + ))} + + + + + + Created On: + {createdOn} + + {`멤버 ${memberCount}명`} + + + ); +} diff --git a/frontend/src/components/WorkSpaceCreateModal/WorkSpaceCreateForm.tsx b/frontend/src/components/WorkSpaceCreateModal/WorkSpaceCreateForm.tsx index 7af055c..86a65fb 100644 --- a/frontend/src/components/WorkSpaceCreateModal/WorkSpaceCreateForm.tsx +++ b/frontend/src/components/WorkSpaceCreateModal/WorkSpaceCreateForm.tsx @@ -4,7 +4,6 @@ import { z } from 'zod'; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'; import { Input } from '../ui/input'; import { Button } from '../ui/button'; -import { DialogClose } from '../ui/dialogCustom'; const formSchema = z.object({ workspaceName: z.string().max(50).min(1, { @@ -66,15 +65,13 @@ export default function WorkSpaceCreateForm({ onSubmit }: { onSubmit: (data: Wor )} /> - - - 워크스페이스 만들기 - - + + 워크스페이스 만들기 + );