Merge pull request #22 from Fashion-Cloud/refact/i20

refact: Posts 생성 api 호출 훅 리팩토링

src/api/api-instance.ts

@@ -1,11 +1,11 @@
 import axios from 'axios';
-import {token} from 'src/assets/data/token';
+import { token } from 'src/assets/data/token';
 
 const apiV1Instance = axios.create({
   baseURL: 'http://localhost:8080/api/v1',
   headers: {
     'Content-Type': 'application/json',
-    'Authorization': `Bearer ${token}`
+    Authorization: `Bearer ${token}`,
   },
 });
 

src/api/hook/PostHook.ts

@@ -0,0 +1,31 @@
+import { useMutation } from 'react-query';
+
+import { PostService } from '../service/PostService';
+
+export const useAddPost = (
+  userId: string,
+  name: string,
+  image: string,
+  skyStatus: string,
+  temperature: number,
+  rainfallType: string,
+  windSpeed: number,
+  review: number,
+  onSuccess: () => void
+) => {
+  return useMutation({
+    mutationFn: () =>
+      PostService.addPost(
+        userId,
+        name,
+        image,
+        skyStatus,
+        temperature,
+        rainfallType,
+        windSpeed,
+        review
+      ),
+    onSuccess: onSuccess,
+    onError: () => alert('새 포스트 등록에 실패했습니다.'),
+  });
+};

src/api/service/PostService.ts

@@ -0,0 +1,25 @@
+import apiV1Instance from 'src/api/api-instance';
+
+export class PostService {
+  public static addPost = async (
+    userId: string,
+    name: string,
+    image: string,
+    skyStatus: string,
+    temperature: number,
+    rainfallType: string,
+    windSpeed: number,
+    review: number
+  ): Promise<void> => {
+    await apiV1Instance.post('/posts', {
+      userId,
+      name,
+      image,
+      skyStatus,
+      temperature,
+      rainfallType,
+      windSpeed,
+      review,
+    });
+  };
+}

src/components/AddFashion/AddFashion.tsx

@@ -1,25 +1,19 @@
 import { Box, Button, Divider, Grid, Typography } from '@mui/material';
-import axios from 'axios';
 import React, { useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import rainfallType from 'src/assets/data/rainfallType';
-import {token} from 'src/assets/data/token';
-import weatherSky from 'src/assets/data/weatherSky';
+import { useAddPost } from 'src/api/hook/PostHook';
 import { WeatherType } from 'src/utils/types';
 
 import { weatherDataState } from '../../utils/Recoil';
 import AddImage from './AddFashion/AddImage';
-// import AddLocation from './AddFashion/AddLocation';
 import AddReview from './AddFashion/AddReview';
 import AddTitle from './AddFashion/AddTitle';
 import AddWeatherInfo from './AddFashion/AddWeatherInfo';
 
-
 export default function AddFashion() {
   const [postTitle, setPostTitle] = useState('');
   const [postImage, setPostImage] = React.useState('');
   const [postReview, setPostReview] = React.useState(2);
-  // const [postLocation, setPostLocation] = useState<LocationType>();
   // const [postWeather, setPostWeather] = useState<WeatherType>();
 
   const weatherData = useRecoilValue(weatherDataState);
@@ -45,31 +39,20 @@ export default function AddFashion() {
     console.log('[AddFashion -> AddWeatherInfo] postWeather: ', data);
   }
 
-  const postAPI = async () => {
-    try {
-      await axios
-        .post('/api/v1/posts', {
-          title: postTitle,
-          image: postImage,
-          review: postReview,
-          temperature: weatherData.temperature,
-          skyStatus: weatherSky(weatherData.sky),
-          rainfallType: rainfallType(weatherData.rainfallType),
-          windSpeed: weatherData.windSpeed,
-        }, {
-          headers: {
-            Authorization: `Bearer ${token}`
-          },
-        })
-        .then((response) => {
-          console.log(response);
-          alert('post 완료');
-          window.location.replace('/');
-        });
-    } catch {
-      console.log('api 불러오기 실패');
+  const { mutate: addPost } = useAddPost(
+    '550e8400-e29b-41d4-a716-446655440000',
+    postTitle,
+    postImage,
+    weatherData.sky,
+    weatherData.temperature,
+    weatherData.rainfallType,
+    weatherData.windSpeed,
+    postReview,
+    () => {
+      alert('새 포스트 등록을 성공하였습니다.');
+      window.location.replace('/');
     }
-  };
+  );
 
   return (
     <div>
@@ -103,7 +86,7 @@ export default function AddFashion() {
           '&:hover': { backgroundColor: '#1f5091' },
         }}
         onClick={() => {
-          postAPI();
+          addPost();
         }}
       >
         <Typography sx={{ ml: 7, mr: 7 }}>Post</Typography>