feat : 토큰 사용해서 팀 생성 api 연결 (#269)

* feat : 토큰 사용해서 팀 생성 api 연결

#267

* feat : ok false 에러 해결

#267

src/app/api/fetcher.ts

@@ -42,7 +42,6 @@ export const fetcher = (options?: FetcherOptions) => {
 
       let fetchHeaders = {
         ...headers,
-        ...(config?.headers || {}),
       };
 
       if (config?.body && typeof config.body === 'object') {
@@ -52,15 +51,26 @@ export const fetcher = (options?: FetcherOptions) => {
           fetchHeaders = {};
         }
       }
+
+      fetchHeaders = {
+        ...fetchHeaders,
+        ...(config?.headers || {}),
+      };
+
       const fullUrl = url.startsWith('http') ? url : `${baseUrl}${url}`;
       let response = await fetch(fullUrl, {
         ...(config as RequestInit),
         headers: fetchHeaders,
       });
+
       if (interceptors?.response) {
         response = await interceptors.response(response);
       }
-      return { ok: true, body: await response.json() };
+
+      if (response.status === 201) {
+        return { ok: true, body: { message: 'Created' } };
+      }
+      return { ok: true, body: await response?.json() };
     } catch (error) {
       let message = '';
       if (error instanceof Error) message = error.message;

src/app/api/team.ts

@@ -4,10 +4,13 @@ import { fetcher } from './fetcher';
 
 const teamFetcher = fetcher();
 
-const postCreateTeam = (team: FormData) =>
+const postCreateTeam = (token: string, team: FormData) =>
   teamFetcher('/teams', {
     method: 'POST',
     body: team,
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
   });
 
 const putEditTeam = (teamId: number, teamInfo: Pick<Team, 'name' | 'description'>) =>

src/containers/team/TeamModal/index.tsx

@@ -7,6 +7,7 @@ import { BiEdit, BiFile } from 'react-icons/bi';
 import { patchEditTeamImage, postCreateTeam, putEditTeam } from '@/app/api/team';
 import IconBox from '@/components/IconBox';
 import ActionModal from '@/components/Modal/ActionModal';
+import { useMutateWithToken } from '@/hooks/useFetchWithToken';
 
 import { TeamModalProps } from './type';
 
@@ -27,6 +28,8 @@ const TeamModal = ({ teamInfo, isOpen, onClose }: TeamModalProps) => {
   const [alertName, setAlertName] = useState<boolean>(false);
   const [alertDescription, setAlertDescription] = useState<boolean>(false);
 
+  const createTeam = useMutateWithToken(postCreateTeam);
+
   const resetState = () => {
     setName('');
     setDescription('');
@@ -82,8 +85,10 @@ const TeamModal = ({ teamInfo, isOpen, onClose }: TeamModalProps) => {
     teamForm.append('request', requestBlob);
     teamForm.append('file', thumbnail as Blob);
 
-    postCreateTeam(teamForm).then(() => {
-      resetAndCloseModal();
+    createTeam(teamForm).then((res) => {
+      if (res.ok) {
+        resetAndCloseModal();
+      }
     });
   };