From ec4cf14b25ee36619426d5291af991af71db3532 Mon Sep 17 00:00:00 2001
From: Elllin <noto01@naver.com>
Date: Thu, 25 Jun 2020 01:34:15 +0900
Subject: [PATCH] =?UTF-8?q?[FE/#74]=20Fix=20:=20=EC=9E=98=EB=AA=BB?=
 =?UTF-8?q?=EB=90=9C=20import=EC=88=98=EC=A0=95,=20.env=EC=98=A4=EB=A5=98?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

.env 웹팩 설정 변경
---
 FE/.env.development                     |  2 ++
 FE/src/App.js                           |  5 ++++-
 FE/src/contexts/detailedIssueContext.js |  2 ++
 FE/src/hooks/useFetch.js                |  1 +
 FE/src/pages/DetailedIssue.jsx          | 25 +++++++++++++++++++------
 FE/src/reducers/detailedIssueReducer.js |  7 +++++--
 FE/webpack.common.js                    |  4 +++-
 7 files changed, 36 insertions(+), 10 deletions(-)
 create mode 100644 FE/.env.development

diff --git a/FE/.env.development b/FE/.env.development
new file mode 100644
index 0000000..4182449
--- /dev/null
+++ b/FE/.env.development
@@ -0,0 +1,2 @@
+REACT_APP_DB_HOST = "http://13.209.34.90:8080/api/"
+REACT_APP_DB_HOST_ISSUES = "http://13.209.34.90:8080/api/issues/"
\ No newline at end of file
diff --git a/FE/src/App.js b/FE/src/App.js
index 0cd73ed..9ab1f40 100644
--- a/FE/src/App.js
+++ b/FE/src/App.js
@@ -10,6 +10,7 @@ import Login from "@Pages/Login";
 
 import { UserProvider } from "@Contexts/userContext";
 import { IssueListProvider } from "@Contexts/issueListContext";
+import { DetailedIssueProvider } from "@Contexts/DetailedIssueContext";
 
 const App = () => {
   return (
@@ -21,7 +22,9 @@ const App = () => {
           <Container maxWidth="lg">
             {/* <Issues /> */}
             {/* <Login /> */}
-            <DetailedIssue />
+            <DetailedIssueProvider>
+              <DetailedIssue />
+            </DetailedIssueProvider>
           </Container>
         </IssueListProvider>
       </UserProvider>
diff --git a/FE/src/contexts/detailedIssueContext.js b/FE/src/contexts/detailedIssueContext.js
index 3e55353..99c2ee0 100644
--- a/FE/src/contexts/detailedIssueContext.js
+++ b/FE/src/contexts/detailedIssueContext.js
@@ -1,6 +1,8 @@
 import React, { createContext, useMemo, useReducer } from "react";
 import PropTypes from "prop-types";
 
+import { detailedIssueReducer, initialState } from "@Reducers/detailedIssueReducer";
+
 export const DetailedIssueContext = createContext();
 
 export const DetailedIssueProvider = ({ children }) => {
diff --git a/FE/src/hooks/useFetch.js b/FE/src/hooks/useFetch.js
index 90fb990..9bfbbe4 100644
--- a/FE/src/hooks/useFetch.js
+++ b/FE/src/hooks/useFetch.js
@@ -35,6 +35,7 @@ const useFetch = ({
   option = {},
   skip = false,
 }) => {
+  console.log(url);
   const [loading, setLoading] = useState(true);
   const getData = async () => {
     const data = await fetch(url, option);
diff --git a/FE/src/pages/DetailedIssue.jsx b/FE/src/pages/DetailedIssue.jsx
index 8e921ec..b5e0876 100644
--- a/FE/src/pages/DetailedIssue.jsx
+++ b/FE/src/pages/DetailedIssue.jsx
@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useContext } from "react";
 
+// import LoadingIndicator from "@Components/common/LoadingIndicator";
 import Header from "@Components/DetailedIssue/Header/Header";
 import Comment from "@Components/DetailedIssue/Comment/Comment";
 
@@ -8,16 +9,28 @@ import Box from "@material-ui/core/Box";
 import pipe from "@Utils/pipe";
 import useFetch from "@Hooks/useFetch";
 
-import { detailedIssueDispatch } from "@Contexts/detailedIssueContext";
+import { DetailedIssueContext } from "@Contexts/DetailedIssueContext";
 import { initDataFetchOptions } from "@Reducers/detailedIssueReducer";
 
+const id = 1;
+//라우팅 처리후 변경하기
+
 const DetailedIssue = () => {
+  const { detailedIssueDispatch } = useContext(DetailedIssueContext);
   const { loading, getData } = pipe(initDataFetchOptions, useFetch)(detailedIssueDispatch);
+
+  console.log(getData);
   return (
-    <Box pt={5}>
-      <Header />
-      <Comment />
-    </Box>
+    <>
+      {loading ? (
+        "로딩중"
+      ) : (
+        <Box pt={5}>
+          <Header />
+          <Comment />
+        </Box>
+      )}
+    </>
   );
 };
 
diff --git a/FE/src/reducers/detailedIssueReducer.js b/FE/src/reducers/detailedIssueReducer.js
index b208711..f1e8419 100644
--- a/FE/src/reducers/detailedIssueReducer.js
+++ b/FE/src/reducers/detailedIssueReducer.js
@@ -1,3 +1,5 @@
+const detailedIssueUrl = process.env.REACT_APP_DB_HOST_ISSUES;
+
 export const initialState = {
   issues: null,
   labelInfo: null,
@@ -29,8 +31,9 @@ export const detailedIssueReducer = (state, action) => {
   }
 };
 
-export const detailedIssueFetchOptions = (dispatch) => ({
-  url: issuesUrl,
+export const initDataFetchOptions = (dispatch) => ({
+  // url: `${detailedIssueUrl}/${id}`,
+  url: `${detailedIssueUrl}`,
   dispatch,
   actionType: {
     fetchSuccess,
diff --git a/FE/webpack.common.js b/FE/webpack.common.js
index bec8ec5..6965c10 100644
--- a/FE/webpack.common.js
+++ b/FE/webpack.common.js
@@ -49,6 +49,8 @@ module.exports = {
       filename: "index.html",
       showErrors: true,
     }),
-    new Dotenv(),
+    new Dotenv({
+      path: path.resolve(__dirname, "./.env.development"),
+    }),
   ],
 };