FE-66 🔀 epic 브랜치 최신화

src/apis/add.ts

@@ -0,0 +1,9 @@
+import { AddEpigramRequestType, AddEpigramResponseType } from '@/schema/addEpigram';
+import httpClient from '.';
+
+const postEpigram = async (request: AddEpigramRequestType): Promise<AddEpigramResponseType> => {
+  const response = await httpClient.post<AddEpigramResponseType>('/epigrams', request);
+  return response.data;
+};
+
+export default postEpigram;

src/apis/index.ts

@@ -7,8 +7,6 @@ const httpClient = axios.create({
   paramsSerializer: (parameters) => qs.stringify(parameters, { arrayFormat: 'repeat', encode: false }),
 });
 
-export default httpClient;
-
 // NOTE: eslint-disable no-param-reassign 미해결로 인한 설정
 httpClient.interceptors.request.use((config) => {
   const accessToken = localStorage.getItem('accessToken');
@@ -50,3 +48,5 @@ httpClient.interceptors.response.use(
     return Promise.reject(error);
   },
 );
+
+export default httpClient;

src/hooks/epigramQueryHook.ts

@@ -0,0 +1,24 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { AddEpigramFormType, AddEpigramResponseType } from '@/schema/addEpigram';
+import { MutationOptions } from '@/types/query';
+import postEpigram from '@/apis/add';
+import { AxiosError } from 'axios';
+
+// TODO: 에피그램 수정과 삭제에도 사용 가능하게 훅 수정 예정
+
+const useAddEpigram = (options?: MutationOptions<AddEpigramFormType, AddEpigramResponseType>) => {
+  const queryClient = useQueryClient();
+
+  return useMutation<AddEpigramResponseType, AxiosError, AddEpigramFormType>({
+    mutationFn: (newEpigram: AddEpigramFormType) => postEpigram(newEpigram),
+    ...options,
+    onSuccess: (...args) => {
+      queryClient.invalidateQueries({ queryKey: ['epigrams'] });
+      if (options?.onSuccess) {
+        options.onSuccess(...args);
+      }
+    },
+  });
+};
+
+export default useAddEpigram;

src/hooks/useTagManagementHook.ts

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { UseFormSetValue, UseFormGetValues, UseFormSetError } from 'react-hook-form';
+import { AddEpigramFormType } from '@/schema/addEpigram';
+
+// NOTE: setError메서드로 FormField에 에러 설정 가능
+const useTagManagement = ({
+  setValue,
+  getValues,
+  setError,
+}: {
+  setValue: UseFormSetValue<AddEpigramFormType>;
+  getValues: UseFormGetValues<AddEpigramFormType>;
+  setError: UseFormSetError<AddEpigramFormType>;
+}) => {
+  const [currentTag, setCurrentTag] = useState('');
+
+  const handleAddTag = () => {
+    if (!currentTag || currentTag.length > 10) {
+      return;
+    }
+    const currentTags = getValues('tags') || [];
+
+    if (currentTags.length >= 3) {
+      return;
+    }
+    if (currentTags.includes(currentTag)) {
+      setError('tags', { type: 'manual', message: '이미 저장된 태그입니다.' });
+      return;
+    }
+
+    setValue('tags', [...currentTags, currentTag]);
+    setCurrentTag('');
+    setError('tags', { type: 'manual', message: '' });
+  };
+
+  const handleRemoveTag = (tagToRemove: string) => {
+    const currentTags = getValues('tags') || [];
+    setValue(
+      'tags',
+      currentTags.filter((tag) => tag !== tagToRemove),
+    );
+  };
+
+  return { currentTag, setCurrentTag, handleAddTag, handleRemoveTag };
+};
+
+export default useTagManagement;