Refactor to load server address from .env file

.env

@@ -1 +1 @@
-REACT_APP_SERVER_URL=http://localhost:3000/
+SERVER_URL=http://localhost:3001/

src/components/Context.js

@@ -4,7 +4,7 @@ import { createContext, useContext, useState } from "react";
 export const HomePageContext = createContext("main");
 
 const AuthContext = createContext();
-const SERVER_URL = process.env.REACT_APP_SERVER_URL;
+const SERVER_URL = process.env.SERVER_URL;
 
 export const AuthProvider = ({ children }) => {
   const [user, setUser] = useState({ userId: "", id: "", nickname: "" });
@@ -13,7 +13,7 @@ export const AuthProvider = ({ children }) => {
   const login = async (id, pw) => {
     try {
       const response = await axios.post(
-        "http://localhost:3001/api/login",
+        `${SERVER_URL}/api/login`,
         { id: id, pw: pw },
         { withCredentials: true }
       );
@@ -31,7 +31,7 @@ export const AuthProvider = ({ children }) => {
 
   const logout = async () => {
     try {
-      await axios.post("http://localhost:3001/api/logout", {}, { withCredentials: true });
+      await axios.post(`${SERVER_URL}/api/logout`, {}, { withCredentials: true });
       setUser({ userId: "", id: "", nickname: "" });
     } catch (error) {
       alert("로그아웃 실패");

src/pages/Audiobook_Player.js

@@ -4,6 +4,7 @@ import pause from "../icons/pause.svg";
 import stop from "../icons/stop.svg";
 import { useEffect, useState, useRef } from "react";
 import { useLocation } from "react-router-dom";
+const SERVER_URL = process.env.SERVER_URL;
 
 export default function P_Audiobook_Player() {
   const [bookInfo, setBookInfo] = useState();
@@ -16,7 +17,7 @@ export default function P_Audiobook_Player() {
   const userId = queryParams.get("userId");
 
   useEffect(() => {
-    fetch(`http://localhost:3001/api/book/detail?bookId=${bookId}`)
+    fetch(`${SERVER_URL}/api/book/detail?bookId=${bookId}`)
       .then(async (res) => {
         const json = await res.json();
         return json;
@@ -37,7 +38,7 @@ export default function P_Audiobook_Player() {
   }, [bookId]);
 
   useEffect(() => {
-    fetch(`http://localhost:3001/api/audio?userId=${userId}&bookId=${bookId}`)
+    fetch(`${SERVER_URL}/api/audio?userId=${userId}&bookId=${bookId}`)
       .then((res) => res.blob())
       .then((blob) => {
         const url = URL.createObjectURL(blob);

src/pages/Book_Detail.js

@@ -5,19 +5,20 @@ import { Title_Lv1, Title_Lv2, Text_Lv3 } from "components/Component";
 import { useAuth } from "components/Context";
 import test_bookInfo from "../database/bookinfo.json"; // 테스트 (서버 연동 X)
 import testImage from "../database/testImage.png"; // 테스트 (서버 연동 X)
+const SERVER_URL = process.env.SERVER_URL;
 
 export default function P_Book_Detail() {
   // const [bookInfo, setBookInfo] = useState(test_bookInfo.detailInfos[0]); //테스트 (서버 연동 X)
   const [bookInfo, setBookInfo] = useState(null); //테스트 (서버 연동 X)
   const navigate = useNavigate();
   const location = useLocation();
-  const AUDIOBOOK_PRODUCTION_SERVER_URL = "http://localhost:3001/api/audio";
+  const AUDIOBOOK_PRODUCTION_SERVER_URL = `${SERVER_URL}/api/audio`;
   const { user } = useAuth();
   const queryParams = new URLSearchParams(location.search);
   const bookId = queryParams.get("bookId");
 
   useEffect(() => {
-    fetch(`http://localhost:3001/api/book/detail?bookId=${bookId}`)
+    fetch(`${SERVER_URL}/api/book/detail?bookId=${bookId}`)
       .then(async (res) => {
         const json = await res.json();
         return json;

src/pages/Book_List.js

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import bookInfo from "../database/bookinfo.json"; // 테스트 (서버 연동 X)
 import testImage from "../database/testImage.png"; // 테스트 (서버 연동 X)
+const SERVER_URL = process.env.SERVER_URL;
 
 function BookList({ bookInfos }) {
   return (
@@ -25,7 +26,7 @@ function BookList({ bookInfos }) {
 export default function P_Book_List() {
   const [page, setPage] = useState(1);
   const limit = 10;
-  const URL = "http://localhost:3001/api/book";
+  const URL = `${SERVER_URL}/api/book`;
   const [url, setURL] = useState(`${URL}?page=${page}&limit=${limit}`);
   const [bookInfos, setBookInfos] = useState(); // 서버 연동 O
   // const [bookInfos, setBookInfos] = useState(bookInfo.generalInfos); // 테스트(서버 연동 X)

src/pages/Register.js

@@ -2,6 +2,7 @@ import { useContext, useState } from "react";
 import "./Register.css";
 import { HomePageContext, useAuth } from "components/Context";
 import { useNavigate } from "react-router-dom";
+const SERVER_URL = process.env.SERVER_URL;
 
 export function F_Login() {
   const { homePage, setHomePage } = useContext(HomePageContext);
@@ -53,8 +54,7 @@ export function F_Login() {
 
 async function registerUser(userData) {
   try {
-    const url = "http://localhost:3001";
-    const response = await fetch(url + "/api/register", {
+    const response = await fetch(`${SERVER_URL}/api/register`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",

src/pages/Voice_Upload.js

@@ -2,12 +2,13 @@ import { useState, useRef } from "react";
 import "./Voice_Upload.css";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "components/Context";
+const SERVER_URL = process.env.SERVER_URL;
 
 export default function P_Voice_Upload() {
   const [file, setFile] = useState(null);
   const [errorMessage, setErrorMessage] = useState("");
   const fileInputRef = useRef(null);
-  const SERVER_URL_FOR_UPLOAD = "http://localhost:3001/api/audio/upload";
+  const SERVER_URL_FOR_UPLOAD = `${SERVER_URL}/api/audio/upload`;
   const navigate = useNavigate();
   const { user } = useAuth();