Fix: #214 프로젝트 목록 및 팀 목록 쿼리로 변경 (#215)

* Fix: #214 프로젝트 및 팀 목록 더미에서 쿼리로 변경

* Fix: #214 AI 코드리뷰 반영

src/components/sidebar/ListTeam.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { IoIosSettings } from 'react-icons/io';
-import UpdateModalTeam from '@components/modal/team/UpdateModalTeam'; // Import the UpdateModalTeam component
+import UpdateModalTeam from '@components/modal/team/UpdateModalTeam';
 import useModal from '@hooks/useModal';
 import type { Team } from '@/types/TeamType';
 
@@ -37,7 +37,7 @@ export default function ListTeam({ data, targetId }: ListTeamProps) {
                 type="button"
                 onClick={(e) => {
                   e.preventDefault();
-                  handleOpenUpdateModal(team.teamId); // Open the update modal with the selected team ID
+                  handleOpenUpdateModal(team.teamId);
                 }}
               >
                 <IoIosSettings size={20} />

src/layouts/page/TeamLayout.tsx

@@ -3,16 +3,14 @@ import ListSidebar from '@components/sidebar/ListSidebar';
 import ListTeam from '@components/sidebar/ListTeam';
 import CreateModalTeam from '@components/modal/team/CreateModalTeam';
 import useModal from '@hooks/useModal';
-import { TEAM_DUMMY } from '@mocks/mockData';
 import { useMemo } from 'react';
-import { Team } from '@/types/TeamType';
+import { useReadTeams } from '@hooks/query/useTeamQuery';
 
 export default function TeamLayout() {
   const { showModal: showTeamModal, openModal: openTeamModal, closeModal: closeTeamModal } = useModal();
   const location = useLocation();
   const { teamId } = useParams();
-  // TODO: 내가 가입된 팀만 가져오기
-  const teamData: Team[] = TEAM_DUMMY;
+  const { joinedTeamList: teamData } = useReadTeams();
   const selectedTeam = useMemo(() => teamData.find((team) => team.teamId.toString() === teamId), [teamId, teamData]);
   const hasProjectRoute = location.pathname.split('/').includes('projects');
 
@@ -24,7 +22,7 @@ export default function TeamLayout() {
     <>
       <section className="flex h-full gap-10 p-15">
         <ListSidebar title="팀 목록" showButton text="팀 생성" onClick={openTeamModal}>
-          <ListTeam data={TEAM_DUMMY} targetId={teamId} />
+          <ListTeam data={teamData} targetId={teamId} />
         </ListSidebar>
         <section className="flex grow flex-col border border-list bg-contents-box">
           {teamData.length === 0 ? (

src/pages/team/TeamPage.tsx

@@ -1,37 +1,35 @@
 import { IoIosSettings } from 'react-icons/io';
 import { FaRegTrashAlt } from 'react-icons/fa';
 import { useParams, Link } from 'react-router-dom';
-import { useEffect, useState } from 'react';
-import { PROJECT_DUMMY, TEAM_DUMMY } from '@mocks/mockData';
+import { useState } from 'react';
 import CreateModalProject from '@components/modal/project/CreateModalProject';
 import useModal from '@hooks/useModal';
 import UpdateModalProject from '@components/modal/project/UpdateModalProject';
+import { useReadProjects } from '@hooks/query/useProjectQuery';
+import Spinner from '@components/common/Spinner';
+import { useReadTeams } from '@hooks/query/useTeamQuery';
 import type { Project } from '@/types/ProjectType';
 
 export default function TeamPage() {
   const { showModal: showProjectModal, openModal: openProjectModal, closeModal: closeProjectModal } = useModal();
   const { showModal: showUpdateModal, openModal: openUpdateModal, closeModal: closeUpdateModal } = useModal();
   const { teamId } = useParams();
-  const [teamProjects, setTeamProjects] = useState<Project[]>([]);
-  const [teamName, setTeamName] = useState<string>('');
+  const { projectList: teamProjects, isProjectLoading } = useReadProjects(Number(teamId));
+  const { joinedTeamList } = useReadTeams();
   const [selectedProjectId, setSelectedProjectId] = useState<Project['projectId'] | null>(null);
 
-  // ToDo:  react-query로 대체
-  useEffect(() => {
-    const projects = PROJECT_DUMMY.filter((project) => project.teamId.toString() === teamId);
-    setTeamProjects(projects);
-
-    const team = TEAM_DUMMY.find((team) => team.teamId.toString() === teamId);
-    if (team) {
-      setTeamName(team.teamName);
-    }
-  }, [teamId]);
+  const team = joinedTeamList.find((team) => team.teamId.toString() === teamId);
+  const teamName = team ? team.teamName : '';
 
   const handleOpenUpdateModal = (projectId: Project['projectId']) => {
     setSelectedProjectId(projectId);
     openUpdateModal();
   };
 
+  if (isProjectLoading) {
+    return <Spinner />;
+  }
+
   return (
     <section className="flex h-full flex-col">
       <header className="flex justify-between border-b">