Merge branch 'fe/feat/task-card' of https://lab.ssafy.com/s11-s-project/S11P21S002 into fe/develop

This commit is contained in:
정현조 2024-09-05 13:03:29 +09:00
commit 914d57653c
4 changed files with 106 additions and 20 deletions

View File

@ -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,7 +126,6 @@ export default function MemberManageForm({ members, onSubmit }: MemberManageForm
);
})}
</div>
<DialogClose asChild>
<Button
type="submit"
variant="outlinePrimary"
@ -135,7 +133,6 @@ export default function MemberManageForm({ members, onSubmit }: MemberManageForm
>
</Button>
</DialogClose>
</form>
</Form>
);

View File

@ -0,0 +1,28 @@
import type { Meta, StoryObj } from '@storybook/react';
import TaskCard from './index';
const meta: Meta<typeof TaskCard> = {
title: 'Components/TaskCard',
component: TaskCard,
};
export default meta;
type Story = StoryObj<typeof TaskCard>;
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',
},
};

View File

@ -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 (
<div
onClick={onClick}
className="relative flex cursor-pointer flex-col items-start gap-4 overflow-hidden rounded-lg border border-gray-200 bg-white p-4 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50"
style={{ width }}
>
<div className="flex w-full items-center gap-2.5">
<div className="flex flex-1 flex-col">
<div className="font-sans text-sm text-gray-500 dark:text-gray-400">{projectName}</div>
<div className="font-sans text-lg font-semibold text-black dark:text-white">{taskName}</div>
</div>
<div className={`font-sans text-sm ${statusColor}`}>{status}</div>
</div>
<div className="flex w-full flex-col gap-2">
<div className="font-sans text-sm text-gray-700 dark:text-gray-300">{taskType}</div>
<div className="flex gap-2">
{labels.map((label, index) => (
<div
key={index}
className="inline-flex items-center gap-1 rounded border border-gray-300 bg-gray-100 px-2 py-1 dark:border-gray-700 dark:bg-gray-800"
>
<span className="text-sm text-gray-600 dark:text-gray-300">{label.name}</span>
<span className="text-xs text-gray-500 dark:text-gray-400">({label.count})</span>
</div>
))}
</div>
</div>
<div className="flex w-full items-center justify-between">
<div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
<span>Created On:</span>
<span>{createdOn}</span>
</div>
<div className="text-sm text-gray-500 dark:text-gray-400">{`멤버 ${memberCount}`}</div>
</div>
</div>
);
}

View File

@ -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,7 +65,6 @@ export default function WorkSpaceCreateForm({ onSubmit }: { onSubmit: (data: Wor
</FormItem>
)}
/>
<DialogClose asChild>
<Button
type="submit"
variant="outlinePrimary"
@ -74,7 +72,6 @@ export default function WorkSpaceCreateForm({ onSubmit }: { onSubmit: (data: Wor
>
</Button>
</DialogClose>
</form>
</Form>
);