Refactor: Admin 사이드바 링크 이동시 프로젝트id 유지되도록 수정

This commit is contained in:
정현조 2024-09-24 17:39:25 +09:00
parent 1b7e86c83a
commit 8db39370ee
2 changed files with 13 additions and 17 deletions

View File

@ -1,21 +1,22 @@
import { Link, useLocation, useParams } from 'react-router-dom'; import { Link, useLocation, useParams } from 'react-router-dom';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
export default function AdminMenuSidebar() { export default function AdminMenuSidebar() {
const location = useLocation(); const location = useLocation();
const { workspaceId } = useParams<{ workspaceId: string }>(); const { workspaceId, projectId } = useParams<{ workspaceId: string; projectId?: string }>();
const menuItems = [ const menuItems = [
{ {
label: '리뷰', label: '리뷰',
path: `/admin/${workspaceId}/reviews`, path: projectId ? `/admin/${workspaceId}/reviews/${projectId}` : `/admin/${workspaceId}/reviews`,
}, },
{ {
label: '멤버 관리', label: '멤버 관리',
path: `/admin/${workspaceId}/members`, path: projectId ? `/admin/${workspaceId}/members/${projectId}` : `/admin/${workspaceId}/members`,
}, },
{ {
label: '모델 관리', label: '모델 관리',
path: `/admin/${workspaceId}/models`, path: projectId ? `/admin/${workspaceId}/models/${projectId}` : `/admin/${workspaceId}/models`,
}, },
]; ];

View File

@ -1,5 +1,5 @@
import { ResizablePanel, ResizableHandle } from '../ui/resizable'; import { ResizablePanel, ResizableHandle } from '../ui/resizable';
import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'; import { Link, useLocation, useParams } from 'react-router-dom';
import { SquarePen } from 'lucide-react'; import { SquarePen } from 'lucide-react';
import useProjectListQuery from '@/queries/projects/useProjectListQuery'; import useProjectListQuery from '@/queries/projects/useProjectListQuery';
import useCreateProjectQuery from '@/queries/projects/useCreateProjectQuery'; import useCreateProjectQuery from '@/queries/projects/useCreateProjectQuery';
@ -11,7 +11,6 @@ import { cn } from '@/lib/utils';
export default function AdminProjectSidebar(): JSX.Element { export default function AdminProjectSidebar(): JSX.Element {
const location = useLocation(); const location = useLocation();
const navigate = useNavigate();
const { workspaceId, projectId } = useParams<{ workspaceId: string; projectId?: string }>(); const { workspaceId, projectId } = useParams<{ workspaceId: string; projectId?: string }>();
const profile = useAuthStore((state) => state.profile); const profile = useAuthStore((state) => state.profile);
const memberId = profile?.id || 0; const memberId = profile?.id || 0;
@ -31,13 +30,6 @@ export default function AdminProjectSidebar(): JSX.Element {
}); });
}; };
const handleHeaderClick = () => {
navigate({
pathname: location.pathname,
search: '',
});
};
const getNewPath = (newProjectId: string) => { const getNewPath = (newProjectId: string) => {
if (location.pathname.includes('reviews')) { if (location.pathname.includes('reviews')) {
return `/admin/${workspaceId}/reviews/${newProjectId}`; return `/admin/${workspaceId}/reviews/${newProjectId}`;
@ -51,6 +43,9 @@ export default function AdminProjectSidebar(): JSX.Element {
return location.pathname; return location.pathname;
}; };
const basePath = location.pathname.split('/')[3];
const basePathWithoutProjectId = `/admin/${workspaceId}/${basePath}`;
return ( return (
<> <>
<ResizablePanel <ResizablePanel
@ -60,12 +55,12 @@ export default function AdminProjectSidebar(): JSX.Element {
className="flex h-full flex-col border-r border-gray-200 bg-gray-100" className="flex h-full flex-col border-r border-gray-200 bg-gray-100"
> >
<header className="flex w-full items-center justify-between gap-2 border-b border-gray-200 p-4"> <header className="flex w-full items-center justify-between gap-2 border-b border-gray-200 p-4">
<h1 <Link
className="heading w-full cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-xl font-bold text-gray-900" to={basePathWithoutProjectId}
onClick={handleHeaderClick} className="heading w-full overflow-hidden text-ellipsis whitespace-nowrap text-xl font-bold text-gray-900"
> >
{workspaceTitle} {workspaceTitle}
</h1> </Link>
<button className="p-2"> <button className="p-2">
<SquarePen size={16} /> <SquarePen size={16} />
</button> </button>