Api(client): Dashboard category 전체 조회 & 생성 API 연결 (#73)

* feat: dashboard axios 함수 구현

* feat: dashboard categories 전체 조회 query 작성

* api: dashboard categories 전체 조회 api 연결

* chore: axios, queries 파일 apis 폴더에 분리

* feat: 카테고리 생성 api axios 함수 구현

* feat: 카테고리 생성 api query 함수 구현

* feat: popportal에 onChange interface 추가 및 inputChange 연결

* fix: category dto 수정

* fix: axios 함수 return값 수정

* api: 대시보드 카테고리 생성 api 연결

Author: constantly-dev

apps/client/src/shared/components/sidebar/PopupPortal.tsx

@@ -5,6 +5,7 @@ import type { PopupState } from '@shared/hooks/useCategoryPopups';
 interface Props {
   popup: PopupState;
   onClose: () => void;
+  onChange?: (value: string) => void;
   onCreateConfirm?: () => void;
   onEditConfirm?: (id: number, draft?: string) => void;
   onDeleteConfirm?: (id: number) => void;
@@ -13,6 +14,7 @@ interface Props {
 export default function PopupPortal({
   popup,
   onClose,
+  onChange,
   onCreateConfirm,
   onEditConfirm,
   onDeleteConfirm,
@@ -29,6 +31,7 @@ export default function PopupPortal({
             title="카테고리 추가하기"
             left="취소"
             right="추가"
+            onInputChange={onChange}
             placeholder="카테고리 제목을 입력해주세요"
             onLeftClick={onClose}
             onRightClick={() => onCreateConfirm?.()}

apps/client/src/shared/components/sidebar/Sidebar.tsx

@@ -10,21 +10,20 @@ import { useSidebarNav } from '@shared/hooks/useSidebarNav';
 import { useCategoryPopups } from '@shared/hooks/useCategoryPopups';
 import OptionsMenuPortal from './OptionsMenuPortal';
 import PopupPortal from './PopupPortal';
-
-const CATEGORIES = [
-  { id: 1, label: '일정' },
-  { id: 2, label: '공부' },
-  { id: 3, label: '운동' },
-  { id: 4, label: '취미' },
-  { id: 5, label: '기타' },
-  { id: 6, label: '기타' },
-  { id: 7, label: '기타' },
-  { id: 8, label: '기타' },
-  { id: 9, label: '기타' },
-  { id: 10, label: '기타' },
-];
+import {
+  useGetDashboardCategories,
+  usePostCategory,
+} from '@shared/components/sidebar/apis/queries';
+import { useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
 
 export function Sidebar() {
+  const [newCategoryName, setNewCategoryName] = useState('');
+  const queryClient = useQueryClient();
+
+  const { data: categories } = useGetDashboardCategories();
+  const { mutate: createCategory } = usePostCategory();
+
   const {
     activeTab,
     selectedCategoryId,
@@ -35,6 +34,9 @@ export function Sidebar() {
     setSelectedCategoryId,
   } = useSidebarNav();
 
+  const { popup, openCreate, openEdit, openDelete, close } =
+    useCategoryPopups();
+
   const {
     state: menu,
     open: openMenu,
@@ -43,11 +45,25 @@ export function Sidebar() {
     style,
   } = useAnchoredMenu((anchor) => rightOf(anchor, 30));
 
-  const { popup, openCreate, openEdit, openDelete, close } =
-    useCategoryPopups();
-
   const getCategoryName = (id: number | null) =>
-    CATEGORIES.find((c) => c.id === id)?.label ?? '';
+    categories?.categories.find((category) => category.id === id)?.name ?? '';
+
+  const handleCategoryChange = (name: string) => {
+    setNewCategoryName(name);
+  };
+
+  const handleCreateCategory = () => {
+    createCategory(newCategoryName, {
+      onSuccess: () => {
+        handleCategoryChange('');
+        queryClient.invalidateQueries({ queryKey: ['dashboardCategories'] });
+        close();
+      },
+      onError: (error) => {
+        console.error('카테고리 생성 실패:', error);
+      },
+    });
+  };
 
   return (
     <aside className="bg-white-bg sticky top-0 h-screen w-[24rem] border-r border-gray-300">
@@ -86,12 +102,12 @@ export function Sidebar() {
             }}
           >
             <ul className="bg-none">
-              {CATEGORIES.map((c) => (
+              {categories?.categories?.map((category) => (
                 <CategoryItem
-                  key={c.id}
-                  id={c.id}
-                  label={c.label}
-                  active={selectedCategoryId === c.id}
+                  key={category.id}
+                  id={category.id}
+                  label={category.name}
+                  active={selectedCategoryId === category.id}
                   onClick={(id) => {
                     closeMenu();
                     selectCategory(id);
@@ -132,10 +148,8 @@ export function Sidebar() {
       <PopupPortal
         popup={popup}
         onClose={close}
-        onCreateConfirm={() => {
-          // TODO: 생성 API
-          close();
-        }}
+        onChange={handleCategoryChange}
+        onCreateConfirm={handleCreateCategory}
         onEditConfirm={() => {
           // TODO: 수정 API
           close();

apps/client/src/shared/components/sidebar/apis/axios.ts

@@ -0,0 +1,13 @@
+import apiRequest from '@shared/apis/axiosInstance';
+
+export const getDashboardCategories = async () => {
+  const { data } = await apiRequest.get('/api/v1/categories/dashboard');
+  return data.data;
+};
+
+export const postCategory = async (categoryName: string) => {
+  const response = await apiRequest.post('/api/v1/categories', {
+    categoryName,
+  });
+  return response;
+};

apps/client/src/shared/components/sidebar/apis/queries.ts

@@ -0,0 +1,23 @@
+import { useMutation, useQuery, UseQueryResult } from '@tanstack/react-query';
+import {
+  getDashboardCategories,
+  postCategory,
+} from '@shared/components/sidebar/apis/axios';
+import { AxiosError } from 'axios';
+import { DashboardCategoriesResponse } from '@shared/components/sidebar/types/api';
+
+export const useGetDashboardCategories = (): UseQueryResult<
+  DashboardCategoriesResponse,
+  AxiosError
+> => {
+  return useQuery({
+    queryKey: ['dashboardCategories'],
+    queryFn: () => getDashboardCategories(),
+  });
+};
+
+export const usePostCategory = () => {
+  return useMutation({
+    mutationFn: (categoryName: string) => postCategory(categoryName),
+  });
+};

apps/client/src/shared/components/sidebar/types/api.ts

@@ -0,0 +1,9 @@
+export interface Category {
+  id: number;
+  name: string;
+  unreadCount: number;
+}
+
+export interface DashboardCategoriesResponse {
+  categories: Category[];
+}