From c07d1d5466680219b828d2df4557d75e0f29a080 Mon Sep 17 00:00:00 2001
From: Dohyeong Kim <cheeh0103@ajou.ac.kr>
Date: Fri, 6 Dec 2024 22:17:51 +0900
Subject: [PATCH] add token

---
 webapp/frontend/src/components/List.js      | 17 ++++++++++++--
 webapp/frontend/src/components/ListAll.js   | 17 ++++++++++++--
 webapp/frontend/src/components/ListItem.js  | 25 ++++++++++++++++-----
 webapp/frontend/src/components/Listing.js   | 10 ++++++++-
 webapp/frontend/src/contexts/CrewContext.js |  4 ++--
 5 files changed, 60 insertions(+), 13 deletions(-)

diff --git a/webapp/frontend/src/components/List.js b/webapp/frontend/src/components/List.js
index ff131ee..5c6293f 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}&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)); 
diff --git a/webapp/frontend/src/components/ListAll.js b/webapp/frontend/src/components/ListAll.js
index 266badd..e693aea 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 e6226c0..497d9ca 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 46f1ee6..c16e38b 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 0481ada..7e69cfe 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,
-- 
GitLab