[PR] 마이페이지 관리 버튼 제거, 필터 버튼 변경

src/entities/project/model/apis/project-list.api.ts

@@ -1,6 +1,6 @@
 import { type ApiResponse, fetchInstance, processApiResponse } from "@/shared";
 
-import type { Project } from "../types";
+import type { Project, ProjectStatus } from "../types";
 
 export interface ProjectListResponse {
   content: Project[];
@@ -15,6 +15,7 @@ export interface ProjectListParameters {
   page?: number;
   size?: number;
   sort?: string;
+  status?: ProjectStatus;
 }
 
 export const getProjectListAPI = async (

src/entities/project/model/constants/project-query-keys.ts

@@ -6,17 +6,24 @@ export const projectKeys = {
   all: () => [PROJECT_QUERY_KEY] as const,
   lists: () => [...projectKeys.all(), "list"] as const,
   details: () => [...projectKeys.all(), "detail"] as const,
-  list: (params: Required<ProjectListParameters>) =>
-    [...projectKeys.lists(), params.page, params.size, params.sort] as const,
+  list: (params: ReturnType<typeof normalizeProjectListQueryParams>) =>
+    [
+      ...projectKeys.lists(),
+      params.page,
+      params.size,
+      params.sort,
+      params.status,
+    ] as const,
   detail: (projectId: string) => [...projectKeys.details(), projectId] as const,
 };
 
 export const normalizeProjectListQueryParams = (
   params: ProjectListParameters = {},
-): Required<ProjectListParameters> => {
+) => {
   return {
     page: params.page ?? 0,
     size: params.size ?? 10,
     sort: params.sort ?? "createdAt,DESC",
+    ...(params.status && { status: params.status }),
   };
 };

src/features/mypage/components/common/toolbar/index.ts

@@ -1 +0,0 @@
-export * from "./ToolbarToggleButton";

src/features/mypage/components/features/project-list/ProjectListToolbar.tsx

@@ -1,38 +1,40 @@
-import { HStack } from "@chakra-ui/react";
+import { HStack, Text } from "@chakra-ui/react";
 
-import { AdjustmentsVerticalIcon, SettingIcon } from "@/shared/_assets/icons";
+import type { ProjectStatus } from "@/entities";
 
-import { ToolbarToggleButton } from "../../common";
+const FILTER_TABS: { label: string; value: ProjectStatus | undefined }[] = [
+  { label: "전체", value: undefined },
+  { label: "진행 중", value: "IN_PROGRESS" },
+  { label: "완료", value: "COMPLETED" },
+];
 
 type Props = {
-  filterActive: boolean;
-  setFilterActive: React.Dispatch<React.SetStateAction<boolean>>;
-  manageActive: boolean;
-  setManageActive: React.Dispatch<React.SetStateAction<boolean>>;
+  activeFilter: ProjectStatus | undefined;
+  onFilterChange: (filter: ProjectStatus | undefined) => void;
 };
 
-export const ProjectListToolbar = ({
-  filterActive,
-  setFilterActive,
-  manageActive,
-  setManageActive,
-}: Props) => {
+export const ProjectListToolbar = ({ activeFilter, onFilterChange }: Props) => {
   return (
-    <HStack gap={2}>
-      <ToolbarToggleButton
-        isActive={filterActive}
-        onToggle={() => setFilterActive((v) => !v)}
-        label="필터"
-      >
-        <AdjustmentsVerticalIcon boxSize="13.5px" />
-      </ToolbarToggleButton>
-      <ToolbarToggleButton
-        isActive={manageActive}
-        onToggle={() => setManageActive((v) => !v)}
-        label="관리"
-      >
-        <SettingIcon boxSize="15px" />
-      </ToolbarToggleButton>
+    <HStack gap={6} borderBottom="1px solid" borderColor="transparent" pb="1px">
+      {FILTER_TABS.map((tab) => {
+        const isActive = activeFilter === tab.value;
+        return (
+          <Text
+            key={tab.label}
+            as="button"
+            fontSize="sm"
+            fontWeight="medium"
+            color={isActive ? "seed" : "neutral.500"}
+            borderBottom="2px solid"
+            borderColor={isActive ? "seed" : "transparent"}
+            pb="2px"
+            cursor="pointer"
+            onClick={() => onFilterChange(tab.value)}
+          >
+            {tab.label}
+          </Text>
+        );
+      })}
     </HStack>
   );
 };

src/features/mypage/ui/section/ProjectListSection.tsx

@@ -3,7 +3,11 @@ import { useNavigate } from "react-router";
 
 import { Flex, Spinner, Text, VStack } from "@chakra-ui/react";
 
-import { ProjectListItem, useGetProjectList } from "@/entities";
+import {
+  ProjectListItem,
+  type ProjectStatus,
+  useGetProjectList,
+} from "@/entities";
 import {
   DYNAMIC_ROUTE_PATHS,
   Pagination,
@@ -16,6 +20,9 @@ import { ProjectListToolbar } from "../../components";
 export const ProjectListSection = () => {
   const navigate = useNavigate();
   const [currentPage, setCurrentPage] = useState(1);
+  const [activeFilter, setActiveFilter] = useState<ProjectStatus | undefined>(
+    undefined,
+  );
   const {
     data: projectsListData,
     isLoading,
@@ -24,9 +31,8 @@ export const ProjectListSection = () => {
     page: currentPage - 1,
     size: 10,
     sort: "createdAt,DESC",
+    status: activeFilter,
   });
-  const [filterActive, setFilterActive] = useState(false);
-  const [manageActive, setManageActive] = useState(false);
 
   const totalPages = projectsListData?.totalPages ?? 1;
   const projects = projectsListData?.content ?? [];
@@ -39,10 +45,11 @@ export const ProjectListSection = () => {
           내 프로젝트 목록
         </Text>
         <ProjectListToolbar
-          filterActive={filterActive}
-          setFilterActive={setFilterActive}
-          manageActive={manageActive}
-          setManageActive={setManageActive}
+          activeFilter={activeFilter}
+          onFilterChange={(filter) => {
+            setActiveFilter(filter);
+            setCurrentPage(1);
+          }}
         />
       </Flex>