Merge pull request #30 from Fashion-Cloud/refact/i29

refact: 백엔드 리팩토링 적용
Fashion-Cloud · Oct 7, 2023 · 3a6183a · 3a6183a
2 parents be955dd + 91389de
commit 3a6183a
Show file tree

Hide file tree

Showing 18 changed files with 141 additions and 133 deletions.
diff --git a/src/api/api-instance.ts b/src/api/api-instance.ts
@@ -1,9 +1,11 @@
 import axios from 'axios';
+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}`
   },
 });
 

diff --git a/src/assets/data/rainfallType.ts b/src/assets/data/rainfallType.ts
@@ -1,27 +1,27 @@
-export default function rainfallType(type: number | undefined): string {
-    let rainType = 'Clear';
+export default function rainfallType(type: string | undefined): string {
+    let rainType = 'NONE';
 
     switch(type) {
-        case 0: 
-            rainType = 'Clear'
+        case 'CLEAR': 
+            rainType = 'CLEAR'
             break;
-        case 1:
-            rainType = 'Rain';
+        case 'RAIN':
+            rainType = 'RAIN';
             break;
-        case 2:
-            rainType = 'Rain/Snow';
+        case 'RAIN_SNOW':
+            rainType = 'RAIN_SNOW';
             break;
-        case 3:
-            rainType =  'Snow';
+        case 'SNOW':
+            rainType =  'SNOW';
             break;
-        case 5:
-            rainType =  'Raindrop';
+        case 'RAINDROP':
+            rainType =  'RAINDROP';
             break;
-        case 6:
-            rainType =  'Raindrop/Snow';
+        case 'RAINDROP_FLURRY':
+            rainType =  'RAINDROP_FLURRY';
             break;
-        case 7:
-            rainType =  'Snow';
+        case 'FLURRY':
+            rainType =  'FLURRY';   
             break;
     }
 

diff --git a/src/assets/data/token.ts b/src/assets/data/token.ts
@@ -0,0 +1 @@
+export const token = 'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJzdHJpbmdAZ21haWwuY29tIiwiYXV0aCI6IlVTRVIiLCJpYXQiOjE2OTY2MTcwODMsImV4cCI6MTY5NjYyMDY4M30.DcBvR_9haP6RzqETEHD4gFnlqa3094k370KMtjKmP0PFeiJ-MxzihImLS0P_HqUn4F3C1iiyIt983J6jnDEXGw';
diff --git a/src/assets/data/weatherSky.ts b/src/assets/data/weatherSky.ts
@@ -1,15 +1,15 @@
-export default function weatherSky(sky: number | undefined) {
-    let skyName = 'Clear';
+export default function weatherSky(sky: string | undefined) {
+    let skyName = 'NONE';
 
     switch(sky) {
-        case 1:
-            skyName = 'Clear';
+        case 'SUNNY':
+            skyName = 'SUNNY';
             break;
-        case 3:
-            skyName =  'Cloudy';
+        case 'CLOUDY':
+            skyName =  'CLOUDY';
             break;
-        case 4:
-            skyName =  'Overcast';
+        case 'OVERCAST':
+            skyName =  'OVERCAST';
             break;
     }
 

diff --git a/src/components/AddFashion/AddFashion.tsx b/src/components/AddFashion/AddFashion.tsx
@@ -2,6 +2,9 @@ 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 { WeatherType } from 'src/utils/types';
 
 import { weatherDataState } from '../../utils/Recoil';
@@ -11,6 +14,7 @@ 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('');
@@ -45,14 +49,17 @@ export default function AddFashion() {
     try {
       await axios
         .post('/api/v1/posts', {
-          userId: '550e8400-e29b-41d4-a716-446655440000',
-          name: postTitle,
+          title: postTitle,
           image: postImage,
           review: postReview,
           temperature: weatherData.temperature,
-          skyStatus: weatherData.sky,
-          rainfallType: weatherData.rainfallType,
+          skyStatus: weatherSky(weatherData.sky),
+          rainfallType: rainfallType(weatherData.rainfallType),
           windSpeed: weatherData.windSpeed,
+        }, {
+          headers: {
+            Authorization: `Bearer ${token}`
+          },
         })
         .then((response) => {
           console.log(response);

diff --git a/src/components/AddFashion/AddFashion/AddImage.tsx b/src/components/AddFashion/AddFashion/AddImage.tsx
@@ -6,6 +6,7 @@ import axios from 'axios';
 import { useState } from 'react';
 import Resizer from 'react-image-file-resizer';
 import { toast, ToastContainer } from 'react-toastify';
+import {token} from 'src/assets/data/token';
 
 type ImageProps = {
   getImageData: (data: string) => void;
@@ -69,6 +70,7 @@ export default function AddImage({ getImageData }: ImageProps) {
           .post('/api/v1/images', formData, {
             headers: {
               'Content-Type': 'multipart/form-data',
+              Authorization: `Bearer ${token}`
             },
           })
           .then((response) => {

diff --git a/src/components/Lookbook/LookbookDetailLayout/LookbookListBox.tsx b/src/components/Lookbook/LookbookDetailLayout/LookbookListBox.tsx
@@ -40,7 +40,7 @@ export default function LookbookListBox() {
 
     try {
       await axios
-        .get(`/api/v1/books/posts/${id}`, {
+        .get(`/api/v1/lookbooks/${id}`, {
           headers: {
             Accept: 'application/json',
           },
@@ -124,7 +124,7 @@ export default function LookbookListBox() {
                     }}
                   >
                     <Typography variant="h6" sx={{ mt: 5, ml: 1 }}>
-                      {item.name}
+                      {item.title}
                     </Typography>
                   </Box>
                 </Box>
@@ -169,7 +169,7 @@ export default function LookbookListBox() {
           {lookbook.length > 0 && (
             <img
               src={lookbook[currentImageIndex].image}
-              alt={lookbook[currentImageIndex].name}
+              alt={lookbook[currentImageIndex].title}
               style={{ width: 'auto', height: '600px' }}
             />
           )}

diff --git a/src/components/Lookbook/LookbookLayout/AddLookbookButton.tsx b/src/components/Lookbook/LookbookLayout/AddLookbookButton.tsx
@@ -12,6 +12,7 @@ import {
 } from '@mui/material';
 import axios from 'axios';
 import { useState } from 'react';
+import { token } from 'src/assets/data/token';
 
 // import SearchIcon from '@mui/icons-material/Search';
 import AddImage from '../../../components/AddFashion/AddFashion/AddImage';
@@ -54,10 +55,14 @@ export default function AddLookbookButton() {
 
     try {
       await axios
-        .post('/api/v1/books', {
+        .post('/api/v1/lookbooks', {
           userId: '550e8400-e29b-41d4-a716-446655440000',
           title: title,
           image: postImage,
+        }, {
+          headers: {
+            Authorization: `Bearer ${token}`
+          },
         })
         .then((response) => {
           console.log(response);

diff --git a/src/components/Lookbook/LookbookLayout/LookbookBox.tsx b/src/components/Lookbook/LookbookLayout/LookbookBox.tsx
@@ -3,6 +3,7 @@ import axios from 'axios';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { token } from 'src/assets/data/token';
 
 import { lookbookNameState, userIdState } from '../../../utils/Recoil';
 import { LookBookBoxType } from '../../../utils/types';
@@ -17,9 +18,10 @@ export default function LookbookBox() {
   const lookbookListAPI = async () => {
     try {
       await axios
-        .get(`/api/v1/books/${userId}`, {
+        .get(`/api/v1/lookbooks/${userId}`, {
           headers: {
             Accept: 'application/json',
+            Authorization: `Bearer ${token}`
           },
         })
         .then((response) => {

diff --git a/src/components/MainLayout/FashionListBox.tsx b/src/components/MainLayout/FashionListBox.tsx
@@ -12,12 +12,13 @@ import {
 import axios from 'axios';
 import React, { useEffect, useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
+import {token} from 'src/assets/data/token';
 
 import {
   currentPageState,
   fullPageState,
-  rainfallCodeState,
-  skyCodeState,
+  rainfallTypeState,
+  skyStatusState,
   windChillState,
 } from '../../utils/Recoil';
 import { WeatherPostType } from '../../utils/types';
@@ -51,8 +52,8 @@ export default function FashionListBox() {
   const handleOpenDetail = () => setOpenDetail(true);
   const handleCloseDetail = () => setOpenDetail(false);
 
-  const skyCode = useRecoilValue(skyCodeState);
-  const rainfallCode = useRecoilValue(rainfallCodeState);
+  const skyStatus = useRecoilValue(skyStatusState);
+  const rainfallType = useRecoilValue(rainfallTypeState);
   const windChill = useRecoilValue(windChillState);
 
   const [pageCount, setPageCount] = useRecoilState(fullPageState); // 전체 페이지
@@ -73,16 +74,17 @@ export default function FashionListBox() {
   };
 
   const fashionAPI = async () => {
-    console.log('[Recoil] skyCode: ', skyCode);
-    console.log('[Recoil] rainfallCode: ', rainfallCode);
+    console.log('[Recoil] skyCode: ', skyStatus);
+    console.log('[Recoil] rainfallCode: ', rainfallType);
     console.log('[Recoil] windChill: ', windChill);
     try {
       await axios
         .get(
-          `/api/v1/posts/weather?skyCode=${skyCode}&rainfallCode=${rainfallCode}&windChill=${windChill}`,
+          `/api/v1/posts/weather?skyStatus=${skyStatus}&rainfallType=${rainfallType}&windChill=${windChill}`,
           {
             headers: {
               Accept: 'application/json',
+              Authorization: `Bearer ${token}`
             },
           }
         )
@@ -175,7 +177,7 @@ export default function FashionListBox() {
                     }}
                   >
                     <Typography variant="h6" sx={{ ml: 1 }}>
-                      {fashion[index].name}
+                      {fashion[index].title}
                     </Typography>
                   </Box>
                 </Box>
@@ -191,7 +193,7 @@ export default function FashionListBox() {
 
   useEffect(() => {
     fashionAPI();
-  }, [skyCode, rainfallCode, windChill]);
+  }, [skyStatus, rainfallType, windChill]);
 
   return (
     <Box sx={{ height: '100vh', backgroundColor: '#F5F8FC' }}>

diff --git a/src/components/MainLayout/FashionListBox/FashionDetailModal.tsx b/src/components/MainLayout/FashionListBox/FashionDetailModal.tsx
@@ -19,6 +19,7 @@ import {
 import axios from 'axios';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
+import { token } from 'src/assets/data/token';
 
 import rainfallType from '../../../assets/data/rainfallType';
 import weatherSky from '../../../assets/data/weatherSky';
@@ -61,6 +62,7 @@ export default function FashioinDetailModal({ singleId }: FashionDetailProps) {
         .get(`/api/v1/posts/${singleId}`, {
           headers: {
             Accept: 'application/json',
+            Authorization: `Bearer ${token}`
           },
         })
         .then((response) => {
@@ -76,9 +78,10 @@ export default function FashioinDetailModal({ singleId }: FashionDetailProps) {
   const lookbookPostAPI = async (lookbookId: string) => {
     try {
       await axios
-        .post(`/api/v1/books/posts`, {
-          lookBookId: lookbookId,
-          postId: singleId,
+        .post(`/api/v1/lookbooks/posts/${lookbookId}?postId=${singleId}`, {}, {
+          headers: {
+            Authorization: `Bearer ${token}`
+          },
         })
         .then((response) => {
           console.log(response);
@@ -130,7 +133,7 @@ export default function FashioinDetailModal({ singleId }: FashionDetailProps) {
               fontSize="20pt"
               sx={{ mt: 0.5, ml: 6 }}
             >
-              {singleData.name}
+              {singleData.title}
             </Typography>
             <Typography
               fontFamily="CookieRun-Regular"

diff --git a/src/components/MainLayout/FashionListBox/LookbookPopover.tsx b/src/components/MainLayout/FashionListBox/LookbookPopover.tsx
@@ -5,6 +5,7 @@ import axios from 'axios';
 import { useEffect, useState } from 'react';
 import { toast, ToastContainer } from 'react-toastify';
 import { useRecoilValue } from 'recoil';
+import { token } from 'src/assets/data/token';
 
 import { userIdState } from '../../../utils/Recoil';
 import { LookBookBoxType } from '../../../utils/types';
@@ -40,9 +41,10 @@ export default function LookbookPopover({
   const lookbookListAPI = async () => {
     try {
       await axios
-        .get(`/api/v1/books/${userId}`, {
+        .get(`/api/v1/lookbooks/${userId}`, {
           headers: {
             Accept: 'application/json',
+            Authorization: `Bearer ${token}`
           },
         })
         .then((response) => {