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}®ionID=${regionID}&sportTypeID=${sportTypeID}`); + const response = await fetch(`${apiUrl}/api/crews?page=${page}®ionID=${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}®ionID=${regionID}&sportTypeID=${sportTypeID}&eventDate=${eventDate}`); + const response = await fetch(`${apiUrl}/api/events?page=${page}®ionID=${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',