From 557a2b6e37548c435f13e6bf0be25fe960839dec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=A1=B0?= <j96263732@gmail.com>
Date: Fri, 20 Sep 2024 10:07:30 +0900
Subject: [PATCH] =?UTF-8?q?Refactor:=20=EA=B0=84=EB=8B=A8=ED=95=9C=20?=
 =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/AdminProjectSidebar/index.tsx  | 14 ++++++++++----
 frontend/src/pages/WorkspaceBrowseDetail.tsx      | 15 ++++++++++++---
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/AdminProjectSidebar/index.tsx b/frontend/src/components/AdminProjectSidebar/index.tsx
index 9fedc11..fecc452 100644
--- a/frontend/src/components/AdminProjectSidebar/index.tsx
+++ b/frontend/src/components/AdminProjectSidebar/index.tsx
@@ -1,5 +1,5 @@
 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 useProjectListQuery from '@/queries/projects/useProjectListQuery';
 import useCreateProjectQuery from '@/queries/projects/useCreateProjectQuery';
@@ -11,6 +11,7 @@ import { cn } from '@/lib/utils';
 
 export default function AdminProjectSidebar(): JSX.Element {
   const location = useLocation();
+  const navigate = useNavigate();
   const { workspaceId } = useParams<{ workspaceId: string }>();
   const profile = useAuthStore((state) => state.profile);
   const memberId = profile?.id || 0;
@@ -33,6 +34,13 @@ export default function AdminProjectSidebar(): JSX.Element {
 
   const selectedProjectId = new URLSearchParams(location.search).get('projectId');
 
+  const handleHeaderClick = () => {
+    navigate({
+      pathname: location.pathname,
+      search: '',
+    });
+  };
+
   return (
     <>
       <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">
           <h1
             className="heading w-full cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-xl font-bold text-gray-900"
-            onClick={() => {
-              window.history.replaceState({}, '', location.pathname);
-            }}
+            onClick={handleHeaderClick}
           >
             {workspaceTitle}
           </h1>
diff --git a/frontend/src/pages/WorkspaceBrowseDetail.tsx b/frontend/src/pages/WorkspaceBrowseDetail.tsx
index 82b99c2..9d15422 100644
--- a/frontend/src/pages/WorkspaceBrowseDetail.tsx
+++ b/frontend/src/pages/WorkspaceBrowseDetail.tsx
@@ -1,4 +1,4 @@
-import { Link, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import ProjectCard from '@/components/ProjectCard';
 import { Smile } from 'lucide-react';
 import ProjectCreateModal from '../components/ProjectCreateModal';
@@ -14,6 +14,7 @@ export default function WorkspaceBrowseDetail() {
   const workspaceId = Number(params.workspaceId);
   const { profile } = useAuthStore();
   const memberId = profile?.id ?? 0;
+  const navigate = useNavigate();
 
   const { data: workspaceData } = useWorkspaceQuery(workspaceId, memberId);
   const { data: projectsResponse, isError } = useProjectListQuery(workspaceId, memberId);
@@ -42,6 +43,7 @@ export default function WorkspaceBrowseDetail() {
         <ProjectList
           projects={projects}
           workspaceId={workspaceId}
+          navigate={navigate}
         />
       )}
     </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) {
     return (
       <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 (
     <div className="flex flex-wrap gap-6">
       {projects.map((project: ProjectResponse) => (
-        <Link
+        <ProjectCard
           key={project.id}
           title={project.title}
           to={`${webPath.workspace()}/${workspaceId}/${project.id}`}