Fix: #278 팀 관리 페이지 프로젝트 삭제 오류 수정 및 UI 개선

src/hooks/query/useTeamQuery.ts

@@ -16,14 +16,7 @@ import {
 import useToast from '@hooks/useToast';
 import { useMemo } from 'react';
 import useStore from '@stores/useStore';
-import type {
-  Team,
-  TeamCoworker,
-  TeamForm,
-  TeamListWithApproval,
-  TeamInfoForm,
-  TeamCoworkerForm,
-} from '@/types/TeamType';
+import type { Team, TeamForm, TeamListWithApproval, TeamInfoForm, TeamCoworkerForm } from '@/types/TeamType';
 import type { User } from '@/types/UserType';
 
 // 전체 팀 목록 조회
@@ -87,16 +80,17 @@ export function useLeaveTeam() {
 export function useDeleteTeam() {
   const queryClient = useQueryClient();
   const { toastSuccess, toastError } = useToast();
+  const { userInfo } = useStore();
+  const teamsQueryKey = generateTeamsQueryKey(userInfo.userId);
 
   const mutation = useMutation({
     mutationFn: (teamId: Team['teamId']) => deleteTeam(teamId),
     onError: () => {
       toastError('팀 삭제를 실패했습니다. 다시 시도해 주세요.');
     },
-    onSuccess: (_, teamId) => {
-      const teamCoworkersQueryKey = generateTeamCoworkersQueryKey(teamId);
+    onSuccess: () => {
       toastSuccess('팀을 삭제하였습니다.');
-      queryClient.invalidateQueries({ queryKey: teamCoworkersQueryKey });
+      queryClient.invalidateQueries({ queryKey: teamsQueryKey });
     },
   });
 

src/layouts/page/SettingLayout.tsx

@@ -34,7 +34,7 @@ export default function SettingLayout() {
       <ListSidebar title={`${userInfo.nickname} 님의 정보`}>
         <ListSetting navList={navList} />
       </ListSidebar>
-      <section className="flex grow flex-col border border-list bg-contents-box">
+      <section className="flex grow flex-col overflow-x-hidden border border-list bg-contents-box">
         <header className="flex h-30 items-center justify-between border-b p-10">
           <div>
             <small className="font-bold text-category">{getTitle()}</small>

src/layouts/page/TeamSettingLayout.tsx

@@ -25,7 +25,7 @@ export default function TeamSettingLayout() {
         </button>
       </section>
 
-      <section className="mt-6 h-full overflow-y-auto px-10">
+      <section className="h-full overflow-y-auto">
         <Outlet context={{ joinedTeamList, invitedTeamList }} />
       </section>
     </section>

src/mocks/services/teamServiceHandler.ts

@@ -158,7 +158,7 @@ const teamServiceHandler = [
     const accessToken = request.headers.get('Authorization');
     const { teamId } = params;
 
-    if (!accessToken) return new HttpResponse(null, { status: 403 });
+    if (!accessToken) return new HttpResponse(null, { status: 401 });
 
     const filteredTeams = TEAM_DUMMY.filter((team) => team.teamId !== Number(teamId));
     TEAM_DUMMY.length = 0;
@@ -194,6 +194,7 @@ const teamServiceHandler = [
       const projectId = statusId ? STATUS_DUMMY.find((status) => status.statusId === statusId)?.projectId : undefined;
       return !(projectId && projectIdsToDelete.includes(projectId));
     });
+
     TASK_FILE_DUMMY.length = 0;
     TASK_FILE_DUMMY.push(...filteredTaskFiles);
 
@@ -203,6 +204,7 @@ const teamServiceHandler = [
       const projectId = statusId ? STATUS_DUMMY.find((status) => status.statusId === statusId)?.projectId : undefined;
       return !(projectId && projectIdsToDelete.includes(projectId));
     });
+
     TASK_USER_DUMMY.length = 0;
     TASK_USER_DUMMY.push(...filteredTaskUsers);
 

src/pages/setting/TeamInvitedPage.tsx

@@ -6,51 +6,59 @@ export default function InvitedTeamPage() {
   const { invitedTeamList, isLoading } = useReadTeams();
   const { mutate: ApproveInvitation } = useApproveTeamInvitation();
   const { mutate: RejectInvitation } = useRejectTeamInvitation();
+
   if (isLoading) return <Spinner />;
 
   return (
     <>
       <Meta title="Grow Up : 팀 대기 현황" />
-      <article className="h-full">
+      <article className="h-full" aria-label="초대된 팀 목록">
         {invitedTeamList && invitedTeamList.length > 0 ? (
-          <ul className="min-w-300 space-y-2 text-sm">
-            {invitedTeamList.map((invite) => (
-              <li key={invite.teamId} className="flex h-50 items-center gap-4 border p-8">
-                <div className="flex max-h-full grow gap-4">
-                  <div className="max-h-full w-50 shrink-0">
-                    <small className="text-xs font-bold text-category">team</small>
-                    <p className="truncate">{invite.teamName}</p>
-                  </div>
-                  <div className="max-h-full w-50 shrink-0">
-                    <small className="h-10 text-xs font-bold text-category">head</small>
-                    <p className="truncate">{invite.creator}</p>
+          <div className="relative h-full">
+            <ul className="h-full overflow-y-auto">
+              {invitedTeamList.map((invite) => (
+                <li
+                  key={invite.teamId}
+                  className="flex min-w-fit items-center gap-4 border-b border-gray-200 p-8"
+                  aria-label="팀 초대 정보"
+                >
+                  <div className="flex grow gap-4">
+                    <div className="w-64">
+                      <small className="text-xs font-bold text-gray-500">팀</small>
+                      <p className="truncate text-sm text-gray-800">{invite.teamName}</p>
+                    </div>
+                    <div className="w-64">
+                      <small className="text-xs font-bold text-gray-500">팀장</small>
+                      <p className="truncate text-sm text-gray-800">{invite.creator}</p>
+                    </div>
+                    <div className="w-380">
+                      <small className="text-xs font-bold text-gray-500">소개</small>
+                      <p className="truncate text-sm text-gray-800">{invite.content}</p>
+                    </div>
                   </div>
-                  <div className="max-h-full max-w-300 px-4">
-                    <small className="text-xs font-bold text-category">desc</small>
-                    <p className="truncate">{invite.content}</p>
+
+                  <div className="flex w-50 shrink-0 flex-col gap-2">
+                    <button
+                      type="button"
+                      className="rounded-md bg-main px-5 py-2 text-sm text-white hover:brightness-90"
+                      onClick={() => ApproveInvitation(invite.teamId)}
+                    >
+                      수락하기
+                    </button>
+                    <button
+                      type="button"
+                      className="rounded-md bg-red-500 px-5 py-2 text-sm text-white hover:brightness-90"
+                      onClick={() => RejectInvitation(invite.teamId)}
+                    >
+                      거부하기
+                    </button>
                   </div>
-                </div>
-                <div className="flex shrink-0 flex-col gap-4">
-                  <button
-                    type="button"
-                    className="rounded-md bg-main px-5 py-2 text-sm text-white hover:brightness-90"
-                    onClick={() => ApproveInvitation(invite.teamId)}
-                  >
-                    수락하기
-                  </button>
-                  <button
-                    type="button"
-                    className="rounded-md bg-red-500 px-5 py-2 text-sm text-white hover:brightness-90"
-                    onClick={() => RejectInvitation(invite.teamId)}
-                  >
-                    거부하기
-                  </button>
-                </div>
-              </li>
-            ))}
-          </ul>
+                </li>
+              ))}
+            </ul>
+          </div>
         ) : (
-          <div className="flex h-full items-center justify-center text-center">
+          <div className="flex h-full items-center justify-center text-center text-gray-600">
             현재 가입 대기중인 팀이 없습니다! <br />
             팀에 가입해 보세요 😄
           </div>

src/pages/setting/TeamJoinedPage.tsx

@@ -15,24 +15,25 @@ export default function JoinedTeamPage() {
       <Meta title="Grow Up : 팀 가입 현황" />
       <article className="h-full" aria-label="가입된 팀 목록">
         {joinedTeamList && joinedTeamList.length > 0 ? (
-          <ul className="min-w-300 space-y-2 text-sm">
+          <ul className="h-full overflow-y-auto">
             {joinedTeamList.map((team) => (
-              <li key={team.teamId} className="flex h-50 items-center gap-4 border p-8" aria-label="팀 이름">
-                <div className="flex max-h-full grow gap-4">
-                  <div className="max-h-full w-50 shrink-0">
+              <li key={team.teamId} className="flex min-w-fit items-center gap-4 border-b p-8" aria-label="팀 이름">
+                <div className="flex grow gap-4">
+                  <div className="w-64">
                     <small className="text-xs font-bold text-category">team</small>
                     <p className="truncate">{team.teamName}</p>
                   </div>
-                  <div className="max-h-full w-50 shrink-0">
+                  <div className="w-64">
                     <small className="text-xs font-bold text-category">head</small>
                     <p className="truncate">{team.creator}</p>
                   </div>
-                  <div className="max-h-full max-w-300 px-4">
+                  <div className="w-380">
                     <small className="text-xs font-bold text-category">desc</small>
                     <p className="truncate">{team.content}</p>
                   </div>
                 </div>
-                <div className="flex shrink-0 flex-col gap-4">
+
+                <div className="flex w-50 shrink-0 flex-col gap-4">
                   {team.creatorId === userInfo.userId && (
                     <button
                       type="button"