[FE/#74] Fix : 잘못된 import수정, .env오류 수정

.env 웹팩 설정 변경

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/"

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>

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 }) => {

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);

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>
+      )}
+    </>
   );
 };
 

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,

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"),
+    }),
   ],
 };