diff --git a/webapp/frontend/package-lock.json b/webapp/frontend/package-lock.json
index 72cb381e58d9f97eafa2704d4664b0e9eca0a654..70b846031fcfe76d89de09b187c6d51907c1f17b 100644
--- a/webapp/frontend/package-lock.json
+++ b/webapp/frontend/package-lock.json
@@ -11,6 +11,7 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "http-proxy-middleware": "^3.0.3",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-router-dom": "^6.28.0",
@@ -9297,27 +9298,20 @@
       }
     },
     "node_modules/http-proxy-middleware": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.7.tgz",
-      "integrity": "sha512-fgVY8AV7qU7z/MmXJ/rxwbrtQH4jBQ9m7kp3llF0liB7glmFeVZFBepQb32T3y8n8k2+AEYuMPCpinYW+/CuRA==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-3.0.3.tgz",
+      "integrity": "sha512-usY0HG5nyDUwtqpiZdETNbmKtw3QQ1jwYFZ9wi5iHzX2BcILwQKtYDJPo7XHTsu5Z0B2Hj3W9NNnbd+AjFWjqg==",
       "license": "MIT",
       "dependencies": {
-        "@types/http-proxy": "^1.17.8",
+        "@types/http-proxy": "^1.17.15",
+        "debug": "^4.3.6",
         "http-proxy": "^1.18.1",
-        "is-glob": "^4.0.1",
-        "is-plain-obj": "^3.0.0",
-        "micromatch": "^4.0.2"
+        "is-glob": "^4.0.3",
+        "is-plain-object": "^5.0.0",
+        "micromatch": "^4.0.8"
       },
       "engines": {
-        "node": ">=12.0.0"
-      },
-      "peerDependencies": {
-        "@types/express": "^4.17.13"
-      },
-      "peerDependenciesMeta": {
-        "@types/express": {
-          "optional": true
-        }
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
     "node_modules/https-proxy-agent": {
@@ -9826,6 +9820,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-potential-custom-element-name": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@@ -16933,6 +16936,30 @@
         }
       }
     },
+    "node_modules/webpack-dev-server/node_modules/http-proxy-middleware": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.7.tgz",
+      "integrity": "sha512-fgVY8AV7qU7z/MmXJ/rxwbrtQH4jBQ9m7kp3llF0liB7glmFeVZFBepQb32T3y8n8k2+AEYuMPCpinYW+/CuRA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/http-proxy": "^1.17.8",
+        "http-proxy": "^1.18.1",
+        "is-glob": "^4.0.1",
+        "is-plain-obj": "^3.0.0",
+        "micromatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "@types/express": "^4.17.13"
+      },
+      "peerDependenciesMeta": {
+        "@types/express": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/webpack-dev-server/node_modules/ws": {
       "version": "8.18.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
diff --git a/webapp/frontend/package.json b/webapp/frontend/package.json
index b8f6e00c055ac75ff2e5abe1d7f6991995a8449c..3edbe53ba488a266602ab782127bd10fa77d64f8 100644
--- a/webapp/frontend/package.json
+++ b/webapp/frontend/package.json
@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "http-proxy-middleware": "^3.0.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.28.0",
diff --git a/webapp/frontend/src/components/CrewPage.js b/webapp/frontend/src/components/CrewPage.js
index 7a73c1e93b96e753a1f1e455876ebbf6ff219627..e4aea2cf1cc29ae825e193e92d8d16f6829a27d0 100644
--- a/webapp/frontend/src/components/CrewPage.js
+++ b/webapp/frontend/src/components/CrewPage.js
@@ -3,7 +3,7 @@ import { useNavigate, useLocation } from 'react-router-dom';
 import Region from './Region.js';
 import '../assets/CrewPage.css'; 
 
-//const url = "https://54694e9b-eb2b-4f3c-abf1-75988ed3c644.mock.pstmn.io"; //임시 url
+const apiUrl = process.env.REACT_APP_API_URL;
 
 const sportType = ["러닝", "클라이밍", "헬스"];
 const backgroundImage = ["/background1.jpg", "/background2.jpg", "/background3.jpg"];
@@ -125,7 +125,7 @@ function CrewPage() { //crewId, userId, url
     //크루 정보 수정
     const updateCrew = async (crewID, formCrewData) => {
         try {
-            const response = await fetch(`/api/crews/${crewID}`, {
+            const response = await fetch(`${apiUrl}/api/crews/${crewID}`, {
                 method: 'PUT',
                 headers: {
                     'Content-Type': 'application/json',
@@ -153,7 +153,7 @@ function CrewPage() { //crewId, userId, url
         
         if (confirmation) {
             try {
-                const response = await fetch(`/api/crews/${crewID}`, {
+                const response = await fetch(`${apiUrl}/api/crews/${crewID}`, {
                     method: 'DELETE',
                     headers: {
                         'X-AUTH-TOKEN': token,
@@ -211,7 +211,7 @@ function CrewPage() { //crewId, userId, url
         e.preventDefault();
 
         try {
-            const response = await fetch(`/api/events`, {
+            const response = await fetch(`${apiUrl}/api/events`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -246,7 +246,7 @@ function CrewPage() { //crewId, userId, url
     //모임 참여하기, 취소하기
     const submitEvent = async(eventID) =>{
         try{
-            const response = await fetch(`/api/events/${eventID}/participants`, {
+            const response = await fetch(`${apiUrl}/api/events/${eventID}/participants`, {
                 method: enrollmentStatus[eventID] ? 'DELETE' : 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -272,7 +272,7 @@ function CrewPage() { //crewId, userId, url
     //지역조회
     const fetchRegion = async (regionID) => {
         try {
-            const regionResponse = await fetch(`/api/regions/${regionID}`,{
+            const regionResponse = await fetch(`${apiUrl}/api/regions/${regionID}`,{
                 method: 'GET',
                 headers: {
                     'X-AUTH-TOKEN': token
@@ -297,7 +297,7 @@ function CrewPage() { //crewId, userId, url
         if (isLoading) return;
         setLoadingState('events', true);
         try {
-            const response = await fetch(`/api/crews/${crew.crewID}/events?page=${page}`);
+            const response = await fetch(`${apiUrl}/api/crews/${crew.crewID}/events?page=${page}`);
             const data = await response.json();
             setTotalEventPages(Math.ceil(data.total/ data.per_page));
 
@@ -351,7 +351,7 @@ function CrewPage() { //crewId, userId, url
     //모임 수정
     const editEvent = async (eventID) => {
         try {
-            const response = await fetch(`/api/events/${eventID}`, {
+            const response = await fetch(`${apiUrl}/api/events/${eventID}`, {
                 method: 'PUT',
                 headers: {
                     'Content-Type': 'application/json',
@@ -380,7 +380,7 @@ function CrewPage() { //crewId, userId, url
     //모임 삭제
     const deleteEvent = async (eventID) => {
         try {
-            const response = await fetch(`/api/events/${eventID}`, {
+            const response = await fetch(`${apiUrl}/api/events/${eventID}`, {
                 method: 'DELETE',
                 headers: {
                     'Content-Type': 'application/json',
@@ -406,7 +406,7 @@ function CrewPage() { //crewId, userId, url
         try {
             setLoadingState('posts', true); // 로딩 상태 시작
     
-            const response = await fetch(`/api/crews/${crew.crewID}/posts?page=${page}`, {
+            const response = await fetch(`${apiUrl}/crews/${crew.crewID}/posts?page=${page}`, {
                 method: 'GET',
                 headers: {
                     'Content-Type': 'application/json',
@@ -449,7 +449,7 @@ function CrewPage() { //crewId, userId, url
     const fetchCrewMembers = async (crewID) => {
         try {
             setLoadingState('crewMembers', true);
-            const response = await fetch(`/api/crews/${crewID}/members`, {
+            const response = await fetch(`${apiUrl}/api/crews/${crewID}/members`, {
                 method: 'GET',
                 headers: {
                     'Content-Type': 'application/json',
diff --git a/webapp/frontend/src/components/List.js b/webapp/frontend/src/components/List.js
index c4e9a8575aa70adc3070722f2921a0e1cec4f1bc..ff131ee2627e8138c28ba1d430c102ec10206f84 100644
--- a/webapp/frontend/src/components/List.js
+++ b/webapp/frontend/src/components/List.js
@@ -5,6 +5,7 @@ import ListItem from './ListItem';
 import { React, useContext, useState, useEffect, useMemo } from 'react';
 import { CrewContext } from '../contexts/CrewContext.js';
 import { useLocation } from 'react-router-dom';
+const apiUrl = process.env.REACT_APP_API_URL;
 
 function List() {
   //const { crews, events } = useContext(CrewContext);
@@ -27,7 +28,7 @@ function List() {
 
   const fetchCrews = async (regionID, sportTypeID, page) => {
     try {
-      const response = await fetch(`/api/crews?page=${page}&regionID=${regionID}&sportTypeID=${sportTypeID}`);
+      const response = await fetch(`${apiUrl}/api/crews?page=${page}&regionID=${regionID}&sportTypeID=${sportTypeID}`);
       const data = await response.json();
       setCrews(data.crews);
       setTotalCrewPages(Math.ceil(data.total / data.itemsPerPage)); 
@@ -38,7 +39,7 @@ function List() {
 
   const fetchEvents = async (regionID, sportTypeID, eventDate, page) => {
     try {
-      const response = await fetch(`/api/events?page=${page}&regionID=${regionID}&sportTypeID=${sportTypeID}&eventDate=${eventDate}`);
+      const response = await fetch(`${apiUrl}/api/events?page=${page}&regionID=${regionID}&sportTypeID=${sportTypeID}&eventDate=${eventDate}`);
       const data = await response.json();
       setEvents(data.events);
       setTotalEventPages(Math.ceil(data.total / data.itemsPerPage)); 
diff --git a/webapp/frontend/src/components/ListAll.js b/webapp/frontend/src/components/ListAll.js
index 266f9059885cc6fc46438574e8e6d23ddec49e2e..266baddae781e737506f3651dd792e54a50edfb9 100644
--- a/webapp/frontend/src/components/ListAll.js
+++ b/webapp/frontend/src/components/ListAll.js
@@ -4,6 +4,7 @@ import '../assets/style.css';
 import ListItem from './ListItem';
 import { React, useContext, useState, useEffect, useMemo } from 'react';
 import { CrewContext } from '../contexts/CrewContext.js';
+const apiUrl = process.env.REACT_APP_API_URL;
 
 function ListAll() {
 
@@ -25,7 +26,7 @@ function ListAll() {
 
   const fetchCrews = async (page) => {
     try {
-      const response = await fetch(`/api/crews?page=${page}`);
+      const response = await fetch(`${apiUrl}/api/crews?page=${page}`);
       const data = await response.json();
       setCrews(data.crews);
       setTotalCrewPages(Math.ceil(data.total / data.itemsPerPage)); 
@@ -36,7 +37,7 @@ function ListAll() {
 
   const fetchEvents = async (page) => {
     try {
-      const response = await fetch(`/api/events?page=${page}`);
+      const response = await fetch(`${apiUrl}/api/events?page=${page}`);
       const data = await response.json();
       setEvents(data.events);
       setTotalEventPages(Math.ceil(data.total / data.itemsPerPage)); 
diff --git a/webapp/frontend/src/components/ListItem.js b/webapp/frontend/src/components/ListItem.js
index 547f721e2182d149c4425c3d834f76ec7e91cfc6..e6226c0a4cc6bb233f0ebc506cc7f94e7b6ac3f9 100644
--- a/webapp/frontend/src/components/ListItem.js
+++ b/webapp/frontend/src/components/ListItem.js
@@ -3,6 +3,8 @@ import '../assets/App.css';
 import '../assets/style.css';
 import { useState, useEffect, useRef } from 'react';
 
+const apiUrl = process.env.REACT_APP_API_URL;
+
 function ListItem( {crew, event, updateApplicants} ){
 
   const [crewRegisterModal, setCrewRegisterModal] = useState(false);
@@ -44,7 +46,7 @@ function ListItem( {crew, event, updateApplicants} ){
   const handleCrewRegister = async (crewID) => {
 
     try {
-      const response = await fetch(`/api/crews/${crewID}`);
+      const response = await fetch(`${apiUrl}/api/crews/${crewID}`);
       if (!response.ok) {
         const errorData = await response.json();
         console.log(errorData);
@@ -58,7 +60,7 @@ function ListItem( {crew, event, updateApplicants} ){
     }
 
     try {
-      const response = await fetch(`/api/crews/${crewID}/members`, {
+      const response = await fetch(`${apiUrl}/api/crews/${crewID}/members`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -77,7 +79,7 @@ function ListItem( {crew, event, updateApplicants} ){
   const handleEventRegister = async (eventID) => {
 
     try {
-      const response = await fetch(`/api/events/${eventID}`);
+      const response = await fetch(`${apiUrl}/api/events/${eventID}`);
       if (!response.ok) {
         const errorData = await response.json();
         console.log(errorData);
@@ -91,7 +93,7 @@ function ListItem( {crew, event, updateApplicants} ){
     }
 
     try {
-      const response = await fetch(`/api/events/${eventID}/members`, {
+      const response = await fetch(`${apiUrl}/events/${eventID}/members`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -112,10 +114,10 @@ function ListItem( {crew, event, updateApplicants} ){
     const fetchRegionData = async () => {
       if (crew?.region) {
         try {
-          const response = await fetch(`/api/regions/${crew.region}`);
+          const response = await fetch(`${apiUrl}/api/regions/${crew.region}`);
           const regionData = await response.json();
 
-          const parentResponse = await fetch(`/api/regions/${regionData.parentRegionID}`);
+          const parentResponse = await fetch(`${apiUrl}/api/regions/${regionData.parentRegionID}`);
           const parentRegionData = await parentResponse.json();
 
           setCrewRegionNames({
@@ -135,10 +137,10 @@ function ListItem( {crew, event, updateApplicants} ){
     const fetchRegionData = async () => {
       if (event?.region) {
         try {
-          const response = await fetch(`/api/regions/${event.region}`);
+          const response = await fetch(`${apiUrl}/api/regions/${event.region}`);
           const regionData = await response.json();
 
-          const parentResponse = await fetch(`/api/regions/${regionData.parentRegionID}`);
+          const parentResponse = await fetch(`${apiUrl}/api/regions/${regionData.parentRegionID}`);
           const parentRegionData = await parentResponse.json();
 
           setEventRegionNames({
diff --git a/webapp/frontend/src/components/Listing.js b/webapp/frontend/src/components/Listing.js
index fc09887bb3771f14b82ed4d6487878c387bb1a0a..46f1ee602af0b5c839fba5944ad6dce52d16d2d0 100644
--- a/webapp/frontend/src/components/Listing.js
+++ b/webapp/frontend/src/components/Listing.js
@@ -8,6 +8,8 @@ import { useState, useContext, useEffect } from 'react';
 import { CrewContext } from '../contexts/CrewContext.js';
 import ListItem from './ListItem.js';
 
+const apiUrl = process.env.REACT_APP_API_URL;
+
 function Listing(){
 
   const { onCreateCrew, onCreateEvent } = useContext(CrewContext);
@@ -27,9 +29,9 @@ function Listing(){
   useEffect(() => {
     const fetchCrews = async () => {
       try {
-        const response = await fetch('/api/crews'); // 크루 API 엔드포인트
+        const response = await fetch(`${apiUrl}/api/crews`); // 크루 API 엔드포인트
         const data = await response.json();
-        setCrews(data);
+        setCrews(data.crews);
       } catch (error) {
         console.error('Failed to fetch crews:', error);
       }
diff --git a/webapp/frontend/src/components/Login.js b/webapp/frontend/src/components/Login.js
index 944c96bbdd48c4d10fb890e9b11f285e0cbbaecd..c774115d69f7fd4f81123961280ee62453acd076 100644
--- a/webapp/frontend/src/components/Login.js
+++ b/webapp/frontend/src/components/Login.js
@@ -5,6 +5,8 @@ import { useState, useContext } from 'react';
 import { AuthContext } from '../contexts/AuthContext.js';
 import { useNavigate, Link } from 'react-router-dom';
 
+const apiUrl = process.env.REACT_APP_API_URL;
+
 
 function Login() {
 
@@ -21,7 +23,7 @@ function Login() {
 
   const handleLogin = async (e) => {
     try {
-      const response = await fetch('/api/login', {
+      const response = await fetch(`${apiUrl}/api/login`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
diff --git a/webapp/frontend/src/components/Mypage.js b/webapp/frontend/src/components/Mypage.js
index 8d0f2b81b8a851807dfb0a6c14bb45eea98b65ba..c3a9f3c1336ddac295f1d3b9b870e7e58ac571f0 100644
--- a/webapp/frontend/src/components/Mypage.js
+++ b/webapp/frontend/src/components/Mypage.js
@@ -4,6 +4,8 @@ import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import '../assets/Mypage.css'; 
 
+const apiUrl = process.env.REACT_APP_API_URL;
+
 const sportType = ["러닝", "클라이밍", "헬스"];
 
 function Mypage() { 
@@ -60,7 +62,7 @@ function Mypage() {
         };
 
         try {
-            const response = await fetch(`/api/users/${userID}`, {
+            const response = await fetch(`${apiUrl}/api/users/${userID}`, {
                 method: 'PUT',
                 headers: {
                     'Content-Type': 'application/json',
@@ -123,7 +125,7 @@ function Mypage() {
     //지역ID로 지역 조회
     const fetchRegion = async (regionID) => {
         try {
-            const regionResponse = await fetch(`/api/regions/${regionID}`,{
+            const regionResponse = await fetch(`${apiUrl}/api/regions/${regionID}`,{
                 method: 'GET',
                 headers: {
                     'X-AUTH-TOKEN': token
@@ -144,7 +146,7 @@ function Mypage() {
     };
 
     useEffect(() => {
-        fetch(`/api/users/${userID}`,  {
+        fetch(`${apiUrl}/api/users/${userID}`,  {
           method: 'GET',
           headers: {
             'X-AUTH-TOKEN': token,
@@ -172,7 +174,7 @@ function Mypage() {
     //유저가 가입한 크루 데이터
     useEffect(() => {
         if (user && user.userID) {
-            fetch(`/api/users/${userID}/crews?page=${crewpage}`,  {
+            fetch(`${apiUrl}/api/users/${userID}/crews?page=${crewpage}`,  {
                   method: 'GET',
                   headers: {
                     'X-AUTH-TOKEN': token,
@@ -198,7 +200,7 @@ function Mypage() {
     //유저가 가입한 모임 데이터 
     useEffect(() => {
         if (user && user.userID) {
-            fetch(`/api/users/${userID}/crews?page=${eventpage}`,  {
+            fetch(`${apiUrl}/api/users/${userID}/crews?page=${eventpage}`,  {
                   method: 'GET',
                   headers: {
                     'X-AUTH-TOKEN': token,
@@ -224,7 +226,7 @@ function Mypage() {
     //모임 수정
     const editEvent = async (eventID) => {
       try {
-          const response = await fetch(`/api/events/${eventID}`, {
+          const response = await fetch(`${apiUrl}/api/events/${eventID}`, {
               method: 'PUT',
               headers: {
                   'Content-Type': 'application/json',
@@ -255,7 +257,7 @@ function Mypage() {
     //모임 삭제
     const deleteEvent = async (eventID) => {
         try {
-            const response = await fetch(`/api/events/${eventID}`, {
+            const response = await fetch(`${apiUrl}/api/events/${eventID}`, {
                 method: 'DELETE',
                 headers: {
                     'Content-Type': 'application/json',
diff --git a/webapp/frontend/src/components/NavBar.js b/webapp/frontend/src/components/NavBar.js
index 615a587f2079a4953288a60688753daea96c517b..a1955c851c27dcc9d19da95eb826a3b719bfa3ee 100644
--- a/webapp/frontend/src/components/NavBar.js
+++ b/webapp/frontend/src/components/NavBar.js
@@ -1,4 +1,3 @@
-//상단 메뉴
 //상단메뉴
 import '../assets/navbar.css';
 import '../assets/App.css';
@@ -17,6 +16,7 @@ function NavBar() {
   const handleLogOut = () => {
     logout();
     localStorage.removeItem('authToken');
+    localStorage.removeItem('userID');
     alert('로그아웃이 완료되었습니다.');
     navigate('/');
   }
@@ -72,4 +72,5 @@ function NavBar() {
   );
 }
 
-export default NavBar;
\ No newline at end of file
+export default NavBar;
+
diff --git a/webapp/frontend/src/components/Post.js b/webapp/frontend/src/components/Post.js
index 7e4aaba3343b3f8b034a89ca31c3983110ce9f30..487902c3a57c7923ecf96b71d4dd4e2e7087f139 100644
--- a/webapp/frontend/src/components/Post.js
+++ b/webapp/frontend/src/components/Post.js
@@ -4,6 +4,8 @@ import React, { useEffect, useState } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import '../assets/Post.css'; 
 
+const apiUrl = process.env.REACT_APP_API_URL;
+
 const sportType = ["러닝", "클라이밍", "헬스"];
 const backgroundImage = ["/background1.jpg", "/background2.jpg", "/background3.jpg"];
 
@@ -39,7 +41,7 @@ function Post() {
         let response;
         try {
             if(!isEdit){
-                response = await fetch(`/api/crews/${crew.crewID}/posts`, {
+                response = await fetch(`${apiUrl}/api/crews/${crew.crewID}/posts`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -52,7 +54,7 @@ function Post() {
                 }),
             });}
             else{
-                response = await fetch(`/api/crews/${crew.crewID}/posts/${post.postID}`, {
+                response = await fetch(`${apiUrl}/api/crews/${crew.crewID}/posts/${post.postID}`, {
                     method: 'put',
                     headers: {
                         'Content-Type': 'application/json',
diff --git a/webapp/frontend/src/components/PostView.js b/webapp/frontend/src/components/PostView.js
index 11cbc9d3bc19a5a713a21d284d9b6918c68cd702..c05b2e7a49eddcf5c7ba79154a17862bcf0d6635 100644
--- a/webapp/frontend/src/components/PostView.js
+++ b/webapp/frontend/src/components/PostView.js
@@ -4,6 +4,8 @@ import React, { useEffect, useState } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import '../assets/PostView.css'; 
 
+const apiUrl = process.env.REACT_APP_API_URL;
+
 const sportType = ["러닝", "클라이밍", "헬스"];
 const backgroundImage = ["/background1.jpg", "/background2.jpg", "/background3.jpg"];
 
@@ -30,7 +32,7 @@ function Post() {
     const handleDelete = async () => {
         if (window.confirm('이 게시글을 삭제하시겠습니까?')) {
             try {
-                const response = await fetch(`/api/crews/${crew.crewID}/posts/${post.postID}`, {
+                const response = await fetch(`${apiUrl}/api/crews/${crew.crewID}/posts/${post.postID}`, {
                     method: 'DELETE', // HTTP 메서드 DELETE 사용
                     headers: {
                         'Content-Type': 'application/json',
@@ -74,7 +76,7 @@ function Post() {
     const fetchComments = async (page) => {
         try {
             setLoading(true);
-            const response = await fetch(`/api/crews/${crew.crewID}/posts/${post.postID}/comments?page=${page}`,{
+            const response = await fetch(`${apiUrl}/api/crews/${crew.crewID}/posts/${post.postID}/comments?page=${page}`,{
                 method: 'GET',
                 headers: {
                     'X-AUTH-TOKEN': token
@@ -109,7 +111,7 @@ function Post() {
                 content: commentInput, // 입력된 댓글 내용
             };
     
-            const response = await fetch(`/api/crews/${crew.crewID}/posts/${post.postID}/comments`, {
+            const response = await fetch(`${apiUrl}/api/crews/${crew.crewID}/posts/${post.postID}/comments`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
diff --git a/webapp/frontend/src/components/Region.js b/webapp/frontend/src/components/Region.js
index 28b868a1be829d20dcb1e0d01d46eef9d3d00597..410d8c225d4291b6ea1744f4efc02533ff4fa49f 100644
--- a/webapp/frontend/src/components/Region.js
+++ b/webapp/frontend/src/components/Region.js
@@ -1,6 +1,8 @@
 import { useState, useEffect } from 'react';
 import '../assets/region.css';
 
+const apiUrl = process.env.REACT_APP_API_URL;
+
 function Region( {onRegionSelect} ) {
   
   const [selectedRegionID, setSelectedRegionID] = useState('');
@@ -33,9 +35,9 @@ function Region( {onRegionSelect} ) {
   // 시/도 선택 후 해당 지역의 하위 지역 배열을 받아옴
   const fetchSubRegions = async (regionID) => {
     try {
-      const response = await fetch(`/api/regions/${regionID}/children`);
+      const response = await fetch(`${apiUrl}/api/regions/${regionID}/children`);
       const data = await response.json(); 
-      setFilteredRegionSub(data); // 하위 지역 업데이트
+      setFilteredRegionSub(data.regions); // 하위 지역 업데이트
     } catch (error) {
       console.error(error);
     }
@@ -44,9 +46,9 @@ function Region( {onRegionSelect} ) {
   // 시/군/구 선택 후 해당 지역의 하위 지역 배열을 받아옴
   const fetchSub2Regions = async (regionID) => {
     try {
-      const response = await fetch(`/api/regions/${regionID}/children`);
+      const response = await fetch(`${apiUrl}/api/regions/${regionID}/children`);
       const data = await response.json(); 
-      setFilteredRegionSub2(data); // 하위 지역 업데이트
+      setFilteredRegionSub2(data.regions); // 하위 지역 업데이트
     } catch (error) {
       console.error(error);
     }
diff --git a/webapp/frontend/src/components/SignUp.js b/webapp/frontend/src/components/SignUp.js
index c50e874cac7beaa11e5efc7d0a3482c3bf6aafbb..e00fbdb15dcf445951429bb0c092ed9b5621ac8d 100644
--- a/webapp/frontend/src/components/SignUp.js
+++ b/webapp/frontend/src/components/SignUp.js
@@ -6,6 +6,8 @@ import {Link, useNavigate} from 'react-router-dom';
 import { useRef, useContext, useState, useEffect } from 'react';
 import { CrewContext } from '../contexts/CrewContext.js';
 
+const apiUrl = process.env.REACT_APP_API_URL;
+
 function SignUp(){
 
   const { onCreateUser } = useContext(CrewContext);
@@ -23,8 +25,9 @@ function SignUp(){
   const [name, setName] = useState('');
   const [password, setPassword] = useState('');
   const [email, setEmail] = useState('');
-  const [regionID, setRegionID] = useState('');
-  const [sportTypeID, setSportTypeID] = useState('');
+  const [regionID, setRegionID] = useState(0);
+  const [sportTypeID, setSportTypeID] = useState(0);
+
   // 프로필 항목 저장
   const [job, setJob] = useState('');
   const [birthdate, setBirthdate] = useState('');
@@ -39,6 +42,12 @@ function SignUp(){
   const [isRegionID, setIsRegionID] = useState(false);
   const [isSportTypeID, setIsSportTypeID] = useState(false);
 
+  const sportTypeMapping = {
+    'running': 1,
+    'climbing': 2,
+    'fitness': 3,
+  };
+
 
   const handleImageChange = (e) => {
     const file = e.target.files[0];
@@ -56,13 +65,13 @@ function SignUp(){
 
   const handleImageUpload = async (e) => {
 
-    e.preventDefault();
+    //e.preventDefault();
 
     const formData = new FormData();
     formData.append('image', imageFile);
   
     try {
-      const response = await fetch('/api/images', {
+      const response = await fetch(`${apiUrl}/api/images`, {
         method: 'POST',
         body: formData,
       });
@@ -106,7 +115,7 @@ function SignUp(){
           birthDate: birthdate,
           experience: experience,
           introduction: introduction,
-          sportTypeID: sportTypeID,
+          sportTypeID: sportTypeMapping[sportTypeID],
         },
       };
   
@@ -144,7 +153,7 @@ function SignUp(){
     e.preventDefault();
 
     try {
-      const response = await fetch('/api/verify_email', {
+      const response = await fetch(`${apiUrl}/api/verify_email`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -152,6 +161,7 @@ function SignUp(){
         body: JSON.stringify({ email }),
       });
 
+
       const data = await response.json();
 
       if (response.ok) {
diff --git a/webapp/frontend/src/contexts/CrewContext.js b/webapp/frontend/src/contexts/CrewContext.js
index 34244276a65649f635fa8ed4e3742809550cfbd0..0481ada3f3d45ae107e0c2801daca0fe2548d458 100644
--- a/webapp/frontend/src/contexts/CrewContext.js
+++ b/webapp/frontend/src/contexts/CrewContext.js
@@ -1,12 +1,16 @@
 import React, { createContext, useState, useEffect } from 'react';
 
+const apiUrl = process.env.REACT_APP_API_URL;
+
 export const CrewContext = createContext();
 
 export const CrewProvider = ({ children }) => {
 
+  const token = localStorage.getItem('authToken');
+
   const onCreateUser = (newUser) => {
 
-    fetch('/api/users', {
+    fetch(`${apiUrl}/api/users`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
@@ -38,7 +42,7 @@ export const CrewProvider = ({ children }) => {
 
   const onCreateCrew = (newCrew) => {
     setCrews(prevCrews => [...prevCrews, newCrew]);
-    fetch('/api/crews', {
+    fetch(`${apiUrl}/api/crews`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',