add token

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

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)); 

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);
@@ -64,7 +71,7 @@ function ListItem( {crew, event, updateApplicants} ){
         method: 'POST',
         headers: {
           'Content-Type': 'application/json', 
-          'Authorization': `Bearer ${localStorage.getItem('authToken')}`, 
+          '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);
@@ -97,7 +110,7 @@ function ListItem( {crew, event, updateApplicants} ){
         method: 'POST',
         headers: {
           'Content-Type': 'application/json', 
-          'Authorization': `Bearer ${localStorage.getItem('authToken')}`, 
+          'x-auth-token': token,
         },
       });
       console.log('모임 참여 성공:', response);

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) {

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,