feat: task-list 페이지 수정, 삭제 기능 추가

src/api/hooks/group/useDeleteGroup.ts

@@ -1,15 +1,22 @@
 import { deleteGroup } from "@/api/axios";
 import { toastKit } from "@/utils";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
 
 const useDeleteGroup = () => {
   const { success, error } = toastKit();
   const router = useRouter();
+  const queryClient = useQueryClient();
   return useMutation({
     mutationFn: deleteGroup,
     onSuccess: () => {
       success("팀을 성공적으로 삭제 하였습니다.");
+      queryClient.invalidateQueries({
+        queryKey: ["groups"],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["user"],
+      });
       router.replace("/team");
     },
     onError: () => error("팀을 삭제하지 못하였습니다."),

src/api/hooks/group/usePatchGroup.ts

@@ -12,6 +12,7 @@ const usePatchGroup = () => {
     onSuccess: () => {
       success("팀 이름을 성공적으로 변경하였습니다.");
       queryClient.invalidateQueries({ queryKey: ["groups"] });
+      queryClient.invalidateQueries({ queryKey: ["user"] });
       router.back();
     },
     onError: () => {

src/api/hooks/task/usePatchTask.ts

@@ -14,7 +14,6 @@ const usePatchTask = () => {
       const { groupId } = variables;
 
       success("할 일 수정 성공");
-      // TODO(지권): groupId 네이밍 변경
       queryClient.invalidateQueries({
         queryKey: ["groups", groupId],
       });

src/app/(route)/my-history/_components/index.ts

@@ -1,2 +1 @@
-export { default as MyWorkHistory } from "./MyWorkHistory/MyWorkHistory";
 export { default as WorkHistorySection } from "./WorkHistorySection/WorkHistorySection";

src/app/(route)/team/[teamId]/task-list/[taskListId]/_components/MakeTodoModal/MakeTodoModal.tsx

@@ -111,7 +111,6 @@ const MakeTodoModal = ({ isOpen, onClose, groupId, taskListId }: MakeTodoModalPr
           </div>
         </Modal.Body>
         <Modal.Footer>
-          {/* TODO(지권): Disabled 상태 추가 필요 */}
           <BaseButton type="submit" variant="solid" size="large" className="mt-4" disabled={!isFormValid}>
             만들기
           </BaseButton>

src/app/(route)/team/[teamId]/task-list/[taskListId]/_components/TodoSection/TodoSection.tsx

@@ -13,7 +13,6 @@ import { useTaskMutations } from "@/hooks";
 import EditDataModal from "../../_detail/_components/_internal/EditDataModal/EditDataModal";
 import { TaskResponse } from "@/api/axios/task/_types";
 import ErrorState from "@/features/ErrorState/ErrorState";
-// TODO(지권): EditDataModal 네이밍 및 위치 변경 필요
 
 interface TodoSectionHeaderProps {
   data: TaskResponse;

src/app/(route)/team/[teamId]/task-list/[taskListId]/page.tsx

@@ -54,7 +54,7 @@ const TaskListPage = ({ params }: { params: Promise<{ teamId: number; taskListId
     <div className={cn(selectedId && "pc:flex")}>
       <PageLayout ariaLabel="목록 페이지">
         <h1 className="sr-only">목록 페이지</h1>
-        <PageHeaderBar title={groups?.name} />
+        <PageHeaderBar title={groups?.name} id={teamId} />
 
         <div aria-label="목록 페이지 컨텐츠" className={cn("pc:flex pc:gap-[25px]")}>
           <TodoHeader data={groups} isPending={isPendingGroup} isError={isErrorGroup} groupId={teamId} />

src/common/PageHeaderBar/PageHeaderBar.tsx

@@ -1,7 +1,14 @@
-import { cn } from "@/utils";
-import { ReactNode } from "react";
+"use client";
+
+import { ReactNode, useState } from "react";
+import { useRouter } from "next/navigation";
+import Icon from "../Icon/Icon";
+import Modal from "../Modal/Modal";
 import Dropdown from "../Dropdown/Dropdown";
+import BaseButton from "../Button/BaseButton";
+import { cn } from "@/utils";
 import { LoadingSpinner } from "@/features";
+import { useDeleteGroup } from "@/api/hooks";
 
 /**
  * @author jikwon
@@ -13,30 +20,76 @@ import { LoadingSpinner } from "@/features";
 
 interface PageHeaderBarProps {
   title: ReactNode;
+  id?: number;
   isDropdown?: boolean;
 }
 
-const PageHeaderBar = ({ title, isDropdown = true }: PageHeaderBarProps) => {
-  // TODO(지권): 수정하기, 삭제하기 기능 추가
+const PageHeaderBar = ({ title, id, isDropdown = true }: PageHeaderBarProps) => {
+  const router = useRouter();
+  const [isOpenDeleteModal, setIsOpenDeleteModal] = useState(false);
+  const { mutate: deleteGroup, isPending } = useDeleteGroup();
+
   const options = [
-    { label: "수정하기", action: () => {} },
-    { label: "삭제하기", action: () => {} },
+    { label: "수정하기", action: () => router.push(`/team/${id}/edit`) },
+    { label: "삭제하기", action: () => setIsOpenDeleteModal(true) },
   ];
 
+  const handleTeamDelete = () => {
+    if (!id) return;
+
+    deleteGroup(
+      { id },
+      {
+        onSettled: () => setIsOpenDeleteModal(false),
+      },
+    );
+  };
+
   return (
-    <div
-      className={cn(
-        "w-full max-w-[1120px] flex items-center gap-2",
-        "pc:px-[26px] pc:py-[18px] pc:justify-between pc:bg-background-primary pc:rounded-xl",
-      )}
-    >
-      <h2 className={cn("text-lg-bold text-text-primary", "tablet:text-2xl-bold", "pc:text-2xl-bold")}>
-        {title || <LoadingSpinner size="sm" />}
-      </h2>
-      {isDropdown && (
-        <Dropdown iconName="setting" options={options} iconClassName="size-5 tablet:size-6 text-slate-400" />
+    <>
+      <div
+        className={cn(
+          "w-full max-w-[1120px] flex items-center gap-2",
+          "pc:px-[26px] pc:py-[18px] pc:justify-between pc:bg-background-primary pc:rounded-xl",
+        )}
+      >
+        <h2 className={cn("text-lg-bold text-text-primary", "tablet:text-2xl-bold", "pc:text-2xl-bold")}>
+          {title || <LoadingSpinner size="sm" />}
+        </h2>
+        {isDropdown && (
+          <Dropdown
+            iconName="setting"
+            options={options}
+            placement="bottom-right"
+            iconClassName="size-5 tablet:size-6 text-slate-400"
+          />
+        )}
+      </div>
+
+      {isOpenDeleteModal && (
+        <Modal isOpen={isOpenDeleteModal} onClose={() => setIsOpenDeleteModal(false)}>
+          <Modal.Body className="flex-col-center gap-4">
+            <Icon name="alert" className="text-status-danger" />
+            <p className="text-lg-medium pb-4">정말로 팀을 삭제하시겠습니까?</p>
+          </Modal.Body>
+          <Modal.Footer>
+            <BaseButton variant="outlinedSecondary" size="large" onClick={() => setIsOpenDeleteModal(false)}>
+              취소하기
+            </BaseButton>
+            <BaseButton
+              variant="outlinedPrimary"
+              size="large"
+              danger
+              onClick={handleTeamDelete}
+              disabled={isPending}
+              className="transition-colors"
+            >
+              삭제하기
+            </BaseButton>
+          </Modal.Footer>
+        </Modal>
       )}
-    </div>
+    </>
   );
 };