Refactor: 프로젝트 크리에이트 모달 버튼 클라스 설정 가능하게 함

This commit is contained in:
정현조 2024-09-13 08:17:23 +09:00
parent e4df9ed847
commit 7bb156e8c0
2 changed files with 23 additions and 16 deletions

View File

@ -1,12 +1,14 @@
import * as React from 'react'; import * as React from 'react';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { Bell, User } from 'lucide-react'; import { Bell, User } from 'lucide-react';
import { useLocation, Link } from 'react-router-dom'; import { useLocation, Link, useParams } from 'react-router-dom';
export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {} export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
export default function Header({ className, ...props }: HeaderProps) { export default function Header({ className, ...props }: HeaderProps) {
const location = useLocation(); const location = useLocation();
const { workspaceId } = useParams<{ workspaceId: string }>();
const isWorkspaceIdNaN = isNaN(Number(workspaceId));
const isHomePage = location.pathname === '/'; const isHomePage = location.pathname === '/';
@ -30,23 +32,27 @@ export default function Header({ className, ...props }: HeaderProps) {
{!isHomePage && ( {!isHomePage && (
<nav className="hidden items-center gap-5 md:flex"> <nav className="hidden items-center gap-5 md:flex">
<Link <Link
to="/browse" to={isWorkspaceIdNaN ? '/browse' : `/browse/${workspaceId}`}
className={cn('text-color-text-default-default', 'font-body-strong', 'text-sm sm:text-base md:text-lg')} className={cn('text-color-text-default-default', 'font-body-strong', 'text-sm sm:text-base md:text-lg')}
> >
workspace workspace
</Link> </Link>
<Link {!isWorkspaceIdNaN && (
to="/workspace" <>
className={cn('text-color-text-default-default', 'font-body', 'text-sm sm:text-base md:text-lg')} <Link
> to={`/workspace/${workspaceId}`}
labeling className={cn('text-color-text-default-default', 'font-body', 'text-sm sm:text-base md:text-lg')}
</Link> >
<Link labeling
to="/admin/1" </Link>
className={cn('text-color-text-default-default', 'font-body', 'text-sm sm:text-base md:text-lg')} <Link
> to={`/admin/${workspaceId}`}
admin className={cn('text-color-text-default-default', 'font-body', 'text-sm sm:text-base md:text-lg')}
</Link> >
admin
</Link>
</>
)}
</nav> </nav>
)} )}
</div> </div>

View File

@ -6,9 +6,10 @@ import { Plus } from 'lucide-react';
interface ProjectCreateModalProps { interface ProjectCreateModalProps {
onSubmit: (data: { title: string; labelType: 'classification' | 'detection' | 'segmentation' }) => void; onSubmit: (data: { title: string; labelType: 'classification' | 'detection' | 'segmentation' }) => void;
buttonClass?: string;
} }
export default function ProjectCreateModal({ onSubmit }: ProjectCreateModalProps) { export default function ProjectCreateModal({ onSubmit, buttonClass = '' }: ProjectCreateModalProps) {
const [isOpen, setIsOpen] = React.useState(false); const [isOpen, setIsOpen] = React.useState(false);
const handleOpen = () => setIsOpen(true); const handleOpen = () => setIsOpen(true);
@ -35,7 +36,7 @@ export default function ProjectCreateModal({ onSubmit }: ProjectCreateModalProps
<DialogTrigger asChild> <DialogTrigger asChild>
<Button <Button
variant="outlinePrimary" variant="outlinePrimary"
className="mt-4 flex items-center gap-2" className={`${buttonClass}`}
onClick={handleOpen} onClick={handleOpen}
> >
<Plus size={16} /> <Plus size={16} />