MERGE: #165 from yesolyo/FE-release/add-env

CHORE: env 셋팅 (#164)

FE/.env

@@ -0,0 +1,3 @@
+REACT_APP_CLIENT_ID=3b1dfca72b24afb9ebb2
+REACT_APP_REDIRECT_URI=http://localhost:3000/auth
+REACT_APP_BASE_URI=http://13.209.232.172:8080

FE/package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "dotenv": "^16.1.3",
     "jsonwebtoken": "^9.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

FE/src/pages/Auth.js

@@ -6,7 +6,7 @@ import { fetchData } from '../utils/fetch';
 
 export const Auth = () => {
   const navigate = useNavigate();
-  const AUTH_URI = 'http://13.209.232.172:8080/githublogin';
+  const AUTH_URI = `${process.env.REACT_APP_BASE_URI}/githublogin`;
   const url = new URL(window.location.href);
   const queryCode = url.searchParams.get('code');
 

FE/src/pages/IssueDetail.js

@@ -18,8 +18,8 @@ export const IssueDetail = () => {
   const initData = async () => {
     try {
       const [issueInfo, commentInfo] = await fetchAll(
-        `http://13.209.232.172:8080/issues/${id}`,
-        `http://13.209.232.172:8080/issues/${id}/comments?issueId=${id}`
+        `${process.env.REACT_APP_BASE_URI}/issues/${id}`,
+        `${process.env.REACT_APP_BASE_URI}/issues/${id}/comments?issueId=${id}`
       );
       setIssue(issueInfo);
       setComments(commentInfo);

FE/src/pages/IssueList.js

@@ -24,8 +24,10 @@ export const IssueList = () => {
   const initData = async () => {
     try {
       const [issuesInfo, countInfo] = await fetchAll(
-        `http://13.209.232.172:8080/issues${getFilterQueryString(filterState)}`,
-        `http://13.209.232.172:8080/issues/countInfo`
+        `${process.env.REACT_APP_BASE_URI}/issues${getFilterQueryString(
+          filterState
+        )}`,
+        `${process.env.REACT_APP_BASE_URI}/issues/countInfo`
       );
       setIssuesInfo(issuesInfo);
       setCountInfo(countInfo);

FE/src/pages/LabelList.js

@@ -18,8 +18,8 @@ export const LabelList = () => {
   const initData = async () => {
     try {
       const [labelsInfo, countInfo] = await fetchAll(
-        'http://13.209.232.172:8080/labels',
-        'http://13.209.232.172:8080/issues/countInfo'
+        `${process.env.REACT_APP_BASE_URI}/labels`,
+        `${process.env.REACT_APP_BASE_URI}/issues/countInfo`
       );
       setLabels(labelsInfo);
       setCountInfo(countInfo);
@@ -60,7 +60,7 @@ export const LabelList = () => {
   };
 
   const handleDelete = async (id) => {
-    const url = `http://13.209.232.172:8080/labels/${id}`;
+    const url = `${process.env.REACT_APP_BASE_URI}/labels/${id}`;
     const idData = {
       labelId: id
     };

FE/src/pages/Login.js

@@ -19,9 +19,9 @@ export const Login = () => {
 
   const focusStyle = isLogin ? null : colors.red;
 
-  const CLIENT_ID = '3b1dfca72b24afb9ebb2';
-  const REDIRECT_URI = 'http://localhost:3000/auth&scope=user';
-  const loginUri = `https://github.com/login/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}`;
+  const CLIENT_ID = process.env.REACT_APP_CLIENT_ID;
+  const REDIRECT_URI = process.env.REACT_APP_REDIRECT_URI;
+  const loginUri = `https://github.com/login/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&scope=user`;
 
   const githubLoginHandler = () => {
     window.location.href = loginUri;