[Feature/BAR-153] 폴더 만들기 기능 추가

[miro-ring]

Summary

구현 내용 및 작업한 내역을 요약해서 적어주세요

• 5342391 필요 api 작성
• a55934d button, dialog 컴포넌트 확장
• 35bd7b1 새폴더 만들기 모달 작성
• 608695b Dialog 연동

To Reviewers

a55934d
Dialog 노출을 결정하는 버튼의 클릭에 대해서는 배제해야하기 때문에 ref를 넘기는 형태로 변경하였습니다.

How To Test

• 새폴더만들기 기능 확인
• 새폴더만드는 과정에서 에러 처리 확인

[dmswl98]

충돌이 엄청 나겠네요... 죄송합니다😥

@dongkyun-dev @wonjin-dev
#58 이 작업 먼저 머지하면 좋을 것 같은데 요거 작업 먼저 리뷰 부탁드립니다! 😔

[dmswl98]

useMutation의 onError, onSuccess를 활용하시면 좋을 것 같아요!

요건... 지금하고 있는 다른 프로젝트에서 예시 코드 들고 왔습니다!

import { useToast } from '@chakra-ui/react';
import {
  useMutation,
  type UseMutationOptions,
  useQueryClient,
} from '@tanstack/react-query';
import { type AxiosError } from 'axios';

import {
  backOfficeApi,
  type PortfolioResponse,
  type PortfolioStatusParams,
} from '@/apis/backOffice';
import { PORTFOLIO_ITEM_KEY } from '@/constants/queryKey';

export const useUpdatePortfolioStatus = (
  portfolioId: number,
  options?: UseMutationOptions<
    PortfolioResponse,
    AxiosError,
    Omit<PortfolioStatusParams, 'portfolioId'>
  >
) => {
  const toast = useToast();
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (params) =>
      backOfficeApi.putPortfolioStatus({
        ...params,
        portfolioId,
      }),
    ...options,
    onError: (error: AxiosError) => {
      const isError = error.response?.data as { data?: string };

      if (isError) {
        toast({
          title: isError.data,
          status: 'error',
          isClosable: true,
        });
      }
    },
    onSuccess: (data, variables, context) => {
      queryClient.invalidateQueries(
        PORTFOLIO_ITEM_KEY.detail([{ portfolioId }])
      );
      options?.onSuccess?.(data, variables, context);

      toast({
        title: '정상적으로 수정되었습니다.',
        status: 'success',
        isClosable: true,
      });
    },
  });
};

[miro-ring]

요거 머지하고 150 브랜치에서 반영해볼게요!