diff --git a/webapp/frontend/src/components/List.js b/webapp/frontend/src/components/List.js index ff131ee2627e8138c28ba1d430c102ec10206f84..5c6293f014c5255679e988e353350c31a5f5af8e 100644 --- a/webapp/frontend/src/components/List.js +++ b/webapp/frontend/src/components/List.js @@ -10,6 +10,7 @@ const apiUrl = process.env.REACT_APP_API_URL; function List() { //const { crews, events } = useContext(CrewContext); const location = useLocation(); // 현재 URL 정보 가져오기 + const token = localStorage.getItem('authToken'); const queryParams = new URLSearchParams(location.search); const sportType = queryParams.get('sportTypeID'); @@ -28,7 +29,13 @@ function List() { const fetchCrews = async (regionID, sportTypeID, page) => { try { - const response = await fetch(`${apiUrl}/api/crews?page=${page}®ionID=${regionID}&sportTypeID=${sportTypeID}`); + const response = await fetch(`${apiUrl}/api/crews?page=${page}®ionID=${regionID}&sportTypeID=${sportTypeID}`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + 'x-auth-token': token, + }, + }); const data = await response.json(); setCrews(data.crews); setTotalCrewPages(Math.ceil(data.total / data.itemsPerPage)); @@ -39,7 +46,13 @@ function List() { const fetchEvents = async (regionID, sportTypeID, eventDate, page) => { try { - const response = await fetch(`${apiUrl}/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}`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + 'x-auth-token': token, + }, + }); 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 266baddae781e737506f3651dd792e54a50edfb9..e693aeac4503ea3ed856886658bd44827b9c60f0 100644 --- a/webapp/frontend/src/components/ListAll.js +++ b/webapp/frontend/src/components/ListAll.js @@ -8,6 +8,7 @@ const apiUrl = process.env.REACT_APP_API_URL; function ListAll() { + const token = localStorage.getItem('authToken'); const [crews, setCrews] = useState([]); const [events, setEvents] = useState([]); @@ -26,7 +27,13 @@ function ListAll() { const fetchCrews = async (page) => { try { - const response = await fetch(`${apiUrl}/api/crews?page=${page}`); + const response = await fetch(`${apiUrl}/api/crews?page=${page}`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + 'x-auth-token': token, + }, + }); const data = await response.json(); setCrews(data.crews); setTotalCrewPages(Math.ceil(data.total / data.itemsPerPage)); @@ -37,7 +44,13 @@ function ListAll() { const fetchEvents = async (page) => { try { - const response = await fetch(`${apiUrl}/api/events?page=${page}`); + const response = await fetch(`${apiUrl}/api/events?page=${page}`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + 'x-auth-token': token, + }, + }); 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 e6226c0a4cc6bb233f0ebc506cc7f94e7b6ac3f9..497d9cad2e21415b670d81b9eb53911401869ccb 100644 --- a/webapp/frontend/src/components/ListItem.js +++ b/webapp/frontend/src/components/ListItem.js @@ -6,6 +6,7 @@ import { useState, useEffect, useRef } from 'react'; const apiUrl = process.env.REACT_APP_API_URL; function ListItem( {crew, event, updateApplicants} ){ + const token = localStorage.getItem('authToken'); const [crewRegisterModal, setCrewRegisterModal] = useState(false); const [eventRegisterModal, setEventRegisterModal] = useState(false) @@ -46,7 +47,13 @@ function ListItem( {crew, event, updateApplicants} ){ const handleCrewRegister = async (crewID) => { try { - const response = await fetch(`${apiUrl}/api/crews/${crewID}`); + const response = await fetch(`${apiUrl}/api/crews/${crewID}`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + 'x-auth-token': token, + }, + }); if (!response.ok) { const errorData = await response.json(); console.log(errorData); @@ -63,8 +70,8 @@ function ListItem( {crew, event, updateApplicants} ){ const response = await fetch(`${apiUrl}/api/crews/${crewID}/members`, { method: 'POST', headers: { - 'Content-Type': 'application/json', - 'Authorization': `Bearer ${localStorage.getItem('authToken')}`, + 'Content-Type': 'application/json', + 'x-auth-token': token, }, }); console.log('크루 가입 성공:', response); @@ -79,7 +86,13 @@ function ListItem( {crew, event, updateApplicants} ){ const handleEventRegister = async (eventID) => { try { - const response = await fetch(`${apiUrl}/api/events/${eventID}`); + const response = await fetch(`${apiUrl}/api/events/${eventID}`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + 'x-auth-token': token, + }, + }); if (!response.ok) { const errorData = await response.json(); console.log(errorData); @@ -96,8 +109,8 @@ function ListItem( {crew, event, updateApplicants} ){ const response = await fetch(`${apiUrl}/events/${eventID}/members`, { method: 'POST', headers: { - 'Content-Type': 'application/json', - 'Authorization': `Bearer ${localStorage.getItem('authToken')}`, + 'Content-Type': 'application/json', + 'x-auth-token': token, }, }); console.log('모임 참여 성공:', response); diff --git a/webapp/frontend/src/components/Listing.js b/webapp/frontend/src/components/Listing.js index 46f1ee602af0b5c839fba5944ad6dce52d16d2d0..c16e38bc486a441af1ae03c6df4c6f6a37c61eb8 100644 --- a/webapp/frontend/src/components/Listing.js +++ b/webapp/frontend/src/components/Listing.js @@ -12,6 +12,8 @@ const apiUrl = process.env.REACT_APP_API_URL; function Listing(){ + const token = localStorage.getItem('authToken'); + const { onCreateCrew, onCreateEvent } = useContext(CrewContext); let navigate = useNavigate(); @@ -29,7 +31,13 @@ function Listing(){ useEffect(() => { const fetchCrews = async () => { try { - const response = await fetch(`${apiUrl}/api/crews`); // 크루 API 엔드포인트 + const response = await fetch(`${apiUrl}/api/crews`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + 'x-auth-token': token, + }, + }); // 크루 API 엔드포인트 const data = await response.json(); setCrews(data.crews); } catch (error) { diff --git a/webapp/frontend/src/contexts/CrewContext.js b/webapp/frontend/src/contexts/CrewContext.js index 0481ada3f3d45ae107e0c2801daca0fe2548d458..7e69cfef71e7f9227ecccc88ca301c11a562f5bb 100644 --- a/webapp/frontend/src/contexts/CrewContext.js +++ b/webapp/frontend/src/contexts/CrewContext.js @@ -46,7 +46,7 @@ export const CrewProvider = ({ children }) => { method: 'POST', headers: { 'Content-Type': 'application/json', - 'Authorization': `Bearer ${localStorage.getItem('authToken')}`, + 'x-auth-token': token, }, body: JSON.stringify({ regionID: newCrew.region, @@ -69,7 +69,7 @@ export const CrewProvider = ({ children }) => { method: 'POST', headers: { 'Content-Type': 'application/json', - 'Authorization': `Bearer ${localStorage.getItem('authToken')}`, + 'x-auth-token': token, }, body: JSON.stringify({ crewID: null,