➕ Add: 프록시 미들웨어 추가

- React-Script 5.0에서 package.json 파일에 proxy 속성 추가 시 오류 발생
- 참고 이슈 : facebook/create-react-app#11762

package.json

@@ -2,7 +2,6 @@
   "name": "shopping-insight-graph",
   "version": "0.1.0",
   "private": true,
-  "proxy": "https://openapi.naver.com",
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
     "@redux-devtools/extension": "^3.2.2",
@@ -55,6 +54,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.29.3",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "http-proxy-middleware": "^2.0.3",
     "prettier": "2.5.1"
   }
 }

src/api/index.ts

@@ -1,6 +1,6 @@
 import axios, { AxiosPromise, CancelTokenSource } from 'axios';
 
-axios.defaults.baseURL = 'v1/datalab/';
+axios.defaults.baseURL = 'v1/datalab';
 axios.defaults.headers.common['X-Naver-Client-Id'] =
   process.env.REACT_APP_CLIENT_ID;
 axios.defaults.headers.common['X-Naver-Client-Secret'] =

src/components/FormOptions.tsx

@@ -106,6 +106,7 @@ export default function FormOptions(): JSX.Element {
 
 const StyledWrapper = styled.section`
   ${FlexCenterColumn};
+  padding: 1rem;
   width: 100%;
   gap: 2rem;
   h1 {

src/components/SingleDatePicker.tsx

@@ -24,13 +24,13 @@ export default function SingleDatePicker({
 
   const onChangeHandler = (date: moment.Moment) => {
     const isValid =
-      date?.isAfter(startDate || '2017-08') &&
+      date?.isAfter(startDate || '2017-07-31') &&
       date?.isBefore(endDate || moment());
 
     if (!isValid && date) {
       notification.error({
         message:
-          '2017년 8월부터 오늘까지만 조회할 수 있습니다. 다시 선택해주세요',
+          '2017년 8월부터 오늘까지만 조회할 수 있어요. 다시 선택해주세요',
       });
     }
     callback(paramKey, isValid ? date.format('YYYY-MM-DD') : '');

src/modules/insightData.tsx

@@ -8,14 +8,14 @@ type InsightDataAction =
 interface InsightDataState {
   loading: boolean;
   error: Error | null;
-  results: Result[];
+  response: Result[];
 }
 
 // 기본값
 const initialState: InsightDataState = {
   loading: false,
   error: null,
-  results: [],
+  response: [],
 };
 
 export const GET_DATA_REQUEST = 'insightData/GET_DATA_REQUEST';
@@ -44,7 +44,7 @@ export default function reducer(
         ...state,
         loading: false,
         error: null,
-        results: action.payload.results,
+        response: action.payload.results,
       };
     case GET_DATA_FAILED:
       return {

src/modules/selectedParams.tsx

@@ -8,7 +8,7 @@ const initialState: RequestParams = {
   startDate: moment().subtract(7, 'days').format('YYYY-MM-DD'),
   endDate: moment().format('YYYY-MM-DD'),
   timeUnit: 'date',
-  category: '50000008',
+  category: '50000003',
   keyword: '',
   device: '',
   gender: '',

src/pages/ShoppingInsight.tsx

@@ -3,17 +3,16 @@ import styled from 'styled-components/macro';
 import { useSelector } from 'react-redux';
 import { Empty, Spin } from 'antd';
 import FormOptions from '../components/FormOptions';
-import Chart from '../components/Chart';
 import { RootState } from '../modules';
 import { FlexCenterRow } from '../styles/commonStyles';
+import Chart from '../components/Chart';
 
 export default function ShoppingInsight(): JSX.Element {
-  const { loading, results, error } = useSelector(
+  const { loading, response, error } = useSelector(
     (state: RootState) => state.insightData,
   );
 
-  const data = results[0]?.data;
-
+  const data = response[0]?.data;
   return (
     <StyledInsightWrapper>
       <StyledFormOptions>

src/setupProxy.js

@@ -0,0 +1,11 @@
+// eslint-disable-next-line import/no-extraneous-dependencies,@typescript-eslint/no-var-requires
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+module.exports = function (app) {
+  app.use(
+    createProxyMiddleware('/v1/datalab', {
+      target: 'https://openapi.naver.com',
+      changeOrigin: true,
+    }),
+  );
+};