Refactor: 간단한 오류 수정

This commit is contained in:
정현조 2024-09-20 10:07:30 +09:00
parent 7fb5ba10af
commit 557a2b6e37
2 changed files with 22 additions and 7 deletions

View File

@ -1,5 +1,5 @@
import { ResizablePanel, ResizableHandle } from '../ui/resizable'; import { ResizablePanel, ResizableHandle } from '../ui/resizable';
import { Link, useLocation, useParams } from 'react-router-dom'; import { Link, useLocation, useNavigate, 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,6 +11,7 @@ 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 } = useParams<{ workspaceId: string }>(); const { workspaceId } = useParams<{ workspaceId: string }>();
const profile = useAuthStore((state) => state.profile); const profile = useAuthStore((state) => state.profile);
const memberId = profile?.id || 0; const memberId = profile?.id || 0;
@ -33,6 +34,13 @@ export default function AdminProjectSidebar(): JSX.Element {
const selectedProjectId = new URLSearchParams(location.search).get('projectId'); const selectedProjectId = new URLSearchParams(location.search).get('projectId');
const handleHeaderClick = () => {
navigate({
pathname: location.pathname,
search: '',
});
};
return ( return (
<> <>
<ResizablePanel <ResizablePanel
@ -44,9 +52,7 @@ export default function AdminProjectSidebar(): JSX.Element {
<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 <h1
className="heading w-full cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-xl font-bold text-gray-900" className="heading w-full cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-xl font-bold text-gray-900"
onClick={() => { onClick={handleHeaderClick}
window.history.replaceState({}, '', location.pathname);
}}
> >
{workspaceTitle} {workspaceTitle}
</h1> </h1>

View File

@ -1,4 +1,4 @@
import { Link, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
import ProjectCard from '@/components/ProjectCard'; import ProjectCard from '@/components/ProjectCard';
import { Smile } from 'lucide-react'; import { Smile } from 'lucide-react';
import ProjectCreateModal from '../components/ProjectCreateModal'; import ProjectCreateModal from '../components/ProjectCreateModal';
@ -14,6 +14,7 @@ export default function WorkspaceBrowseDetail() {
const workspaceId = Number(params.workspaceId); const workspaceId = Number(params.workspaceId);
const { profile } = useAuthStore(); const { profile } = useAuthStore();
const memberId = profile?.id ?? 0; const memberId = profile?.id ?? 0;
const navigate = useNavigate();
const { data: workspaceData } = useWorkspaceQuery(workspaceId, memberId); const { data: workspaceData } = useWorkspaceQuery(workspaceId, memberId);
const { data: projectsResponse, isError } = useProjectListQuery(workspaceId, memberId); const { data: projectsResponse, isError } = useProjectListQuery(workspaceId, memberId);
@ -42,6 +43,7 @@ export default function WorkspaceBrowseDetail() {
<ProjectList <ProjectList
projects={projects} projects={projects}
workspaceId={workspaceId} workspaceId={workspaceId}
navigate={navigate}
/> />
)} )}
</div> </div>
@ -84,7 +86,14 @@ function EmptyStateMessage({ workspaceId }: { workspaceId: number }) {
); );
} }
function ProjectList({ projects, workspaceId }: { projects: ProjectResponse[]; workspaceId: number }) { function ProjectList({
projects,
workspaceId,
}: {
projects: ProjectResponse[];
workspaceId: number;
navigate: ReturnType<typeof useNavigate>;
}) {
if (projects.length === 0) { if (projects.length === 0) {
return ( return (
<div className="flex h-full w-full flex-col items-center justify-center"> <div className="flex h-full w-full flex-col items-center justify-center">
@ -100,7 +109,7 @@ function ProjectList({ projects, workspaceId }: { projects: ProjectResponse[]; w
return ( return (
<div className="flex flex-wrap gap-6"> <div className="flex flex-wrap gap-6">
{projects.map((project: ProjectResponse) => ( {projects.map((project: ProjectResponse) => (
<Link <ProjectCard
key={project.id} key={project.id}
title={project.title} title={project.title}
to={`${webPath.workspace()}/${workspaceId}/${project.id}`} to={`${webPath.workspace()}/${workspaceId}/${project.id}`}