diff --git a/webapp/frontend/src/components/ListItem.js b/webapp/frontend/src/components/ListItem.js index b6f1132defbdd77f16e6c67cfb6ff3395474287a..91e7a679837ac7f2affb15a9fc6101006282e5f3 100644 --- a/webapp/frontend/src/components/ListItem.js +++ b/webapp/frontend/src/components/ListItem.js @@ -7,6 +7,7 @@ const apiUrl = process.env.REACT_APP_API_URL; function ListItem( {crew, event, updateApplicants} ){ const token = localStorage.getItem('authToken'); + const userID = localStorage.getItem('userID'); const [crewRegisterModal, setCrewRegisterModal] = useState(false); const [eventRegisterModal, setEventRegisterModal] = useState(false) @@ -46,8 +47,30 @@ function ListItem( {crew, event, updateApplicants} ){ const sportTypes = ["러닝", "클라이밍", "헬스"]; - const handleCrewRegisterModal = () => { + const handleCrewRegisterModal = async (crewID) => { setCrewRegisterModal(true); + try { + console.log("get 실행", crew); + 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); + console.log(crewID); + alert(errorData); + } else{ + const crewData = await response.json(); + setCrewCapacity(crewData.currentMemberCount); + } + } catch (error) { + console.error(error); + alert(error); + } } const handleEventRegisterModal = () => { @@ -73,7 +96,7 @@ function ListItem( {crew, event, updateApplicants} ){ const handleCrewRegister = async (crewID) => { - try { + /*try { const response = await fetch(`${apiUrl}/api/crews/${crewID}`, { method: 'GET', headers: { @@ -91,26 +114,32 @@ function ListItem( {crew, event, updateApplicants} ){ setCrewCapacity(crewData.currentMemberCount); } - const postResponse = await fetch(`${apiUrl}/api/crews/${crewID}/members`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - 'x-auth-token': token, - }, - }); - - if (postResponse.ok) { - console.log('크루 가입 성공:', postResponse); - updateApplicants(crewID, crewCapacity); - console.log(crew.id, crew.capacity); - alert('크루 가입이 완료되었습니다.'); - } else { - const postErrorData = await postResponse.json(); - alert('가입 실패:', postErrorData); - } + } catch (error) { console.error(error); alert(error); + }*/ + + const postResponse = await fetch(`${apiUrl}/api/crews/${crewID}/members`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'x-auth-token': token, + }, + body: JSON.stringify({ + 'userID': userID, + 'role': null + }) + }); + + if (postResponse.ok) { + console.log('크루 가입 성공:', postResponse); + //updateApplicants(crewID, crewCapacity); + console.log(crew.id, crew.capacity); + alert('크루 가입이 완료되었습니다.'); + } else { + const postErrorData = await postResponse.json(); + alert('가입 실패:', postErrorData); } }; @@ -133,38 +162,43 @@ function ListItem( {crew, event, updateApplicants} ){ setEventCapacity(eventData.currentMemberCount); } - const postResponse = await fetch(`${apiUrl}/events/${eventID}/members`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - 'x-auth-token': token, - }, - }); - - if (postResponse.ok) { - console.log('모임 가입 성공:', postResponse); - updateApplicants(eventID, crewCapacity); - alert('모임 가입이 완료되었습니다.'); - } else { - const postErrorData = await postResponse.json(); - alert('가입 실패:', postErrorData); - } + } catch (error) { console.error(error); alert(error); } + + const postResponse = await fetch(`${apiUrl}/events/${eventID}/members`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'x-auth-token': token, + }, + }); + + if (postResponse.ok) { + console.log('모임 가입 성공:', postResponse); + //updateApplicants(eventID, crewCapacity); + alert('모임 가입이 완료되었습니다.'); + } else { + const postErrorData = await postResponse.json(); + alert('가입 실패:', postErrorData); + } }; useEffect(() => { + console.log(crew); const fetchRegionData = async () => { - if (crew?.region) { + if (crew?.regionID) { try { - const response = await fetch(`${apiUrl}/api/regions/${crew.region}`); + const response = await fetch(`${apiUrl}/api/regions/${crew.regionID}`); const regionData = await response.json(); + console.log(regionData.regionName); const parentResponse = await fetch(`${apiUrl}/api/regions/${regionData.parentRegionID}`); const parentRegionData = await parentResponse.json(); + console.log(parentRegionData.regionName); setCrewRegionNames({ regionName: regionData.regionName, @@ -181,9 +215,9 @@ function ListItem( {crew, event, updateApplicants} ){ useEffect(() => { const fetchRegionData = async () => { - if (event?.region) { + if (event?.regionID) { try { - const response = await fetch(`${apiUrl}/api/regions/${event.region}`); + const response = await fetch(`${apiUrl}/api/regions/${event.regionID}`); const regionData = await response.json(); const parentResponse = await fetch(`${apiUrl}/api/regions/${regionData.parentRegionID}`); @@ -208,7 +242,7 @@ function ListItem( {crew, event, updateApplicants} ){ <div className="listingItem"> <p className='title'>{crew.name}</p> <p className='location'> - <img className='listingItemImage' src={process.env.PUBLIC_URL + '/location.png'} alt="listinglocatin" />{crewRegionNames.regionName} {crewRegionNames.parentRegionName} + <img className='listingItemImage' src={process.env.PUBLIC_URL + '/location.png'} alt="listinglocatin" />{crewRegionNames.parentRegionName} {crewRegionNames.regionName} </p> <p className='type'> <img className='listingItemImage' src={process.env.PUBLIC_URL + '/sporttype.png'} alt="listingsporttype" />{sportTypes[crew.sportTypeId - 1]} @@ -216,7 +250,7 @@ function ListItem( {crew, event, updateApplicants} ){ <p className='people'> <img className='listingItemImage' src={process.env.PUBLIC_URL + '/people.png'} alt="listingsportpeople" />{crew.capacity} </p> - <button className='itemButton' onClick={handleCrewRegisterModal}>신청하기</button> + <button className='itemButton' onClick={()=>handleCrewRegisterModal(crew.crewID)}>신청하기</button> {crewRegisterModal && <div className="modalContainer"> @@ -226,7 +260,7 @@ function ListItem( {crew, event, updateApplicants} ){ <div className="crewName">{crew.name}</div> <div className="crewInfo"> <div className="crewRegion"> - 지역 <span>{crewRegionNames.regionName} {crewRegionNames.parentRegionName}</span> + 지역 <span>{crewRegionNames?.parentRegionName} {crewRegionNames?.regionName}</span> </div> <div className="crewType"> @@ -257,7 +291,7 @@ function ListItem( {crew, event, updateApplicants} ){ <div className="listingItem"> <p className='title'>{event.name}</p> <p className='location'> - <img className='listingItemImage' src={process.env.PUBLIC_URL + '/location.png'} alt="listinglocatin" />{eventRegionNames.regionName} {eventRegionNames.parentRegionName} + <img className='listingItemImage' src={process.env.PUBLIC_URL + '/location.png'} alt="listinglocatin" />{eventRegionNames.parentRegionName} {eventRegionNames.regionName} </p> <p className='type'> <img className='listingItemImage' src={process.env.PUBLIC_URL + '/sporttype.png'} alt="listingsporttype" />{sportTypes[event.sportTypeId - 1]} @@ -265,7 +299,7 @@ function ListItem( {crew, event, updateApplicants} ){ <p className='people'> <img className='listingItemImage' src={process.env.PUBLIC_URL + '/people.png'} alt="listingsportpeople" />{event.capacity} </p> - <button className='itemButton' onClick={handleEventRegisterModal}>신청하기</button> + <button className='itemButton' onClick={()=>handleEventRegisterModal(event.evetID)}>신청하기</button> {eventRegisterModal && <div className="modalContainer"> @@ -275,11 +309,11 @@ function ListItem( {crew, event, updateApplicants} ){ <div className="eventName">{event.name}</div> <div className="eventInfo"> <div className="eventRegion"> - 지역 <span>{eventRegionNames.regionName} {eventRegionNames.parentRegionName}</span> + 지역 <span>{eventRegionNames.parentRegionName} {eventRegionNames.regionName}</span> </div> <div className="eventType"> - 종목 <span>{sportTypes[crew.sportTypeId - 1]}</span> + 종목 <span>{sportTypes[event.sportTypeId - 1]}</span> </div> <div className="eventDate"> @@ -295,7 +329,7 @@ function ListItem( {crew, event, updateApplicants} ){ </div> </div> - <button className="createRegisterButton" onClick={()=>handleEventRegister(event.id)}>참여하기</button> + <button className="createRegisterButton" onClick={()=>handleEventRegister(event.eventID)}>참여하기</button> </div> </div> diff --git a/webapp/frontend/src/components/Mypage.js b/webapp/frontend/src/components/Mypage.js index c8ae6f0c19ba0d0a0f5ed646ab5ab594a5a32153..5e8b5aa99f9d038960fef8ce465a3cc254195013 100644 --- a/webapp/frontend/src/components/Mypage.js +++ b/webapp/frontend/src/components/Mypage.js @@ -176,6 +176,7 @@ function Mypage() { //유저가 가입한 크루 데이터 useEffect(() => { + console.log("유저가가입한크루어쩌구"); if (user && user.userID) { fetch(`${apiUrl}/api/users/${userID}/crews?page=${crewpage}`, { method: 'GET', @@ -195,6 +196,7 @@ function Mypage() { setCrews(crewsWithRegion); setTotalCrewPages(Math.ceil(data.total / data.per_page)); // 총 페이지 수 설정 + console.log("fetchData", data, crewsWithRegion) }) .catch((error) => console.error("크루 데이터를 가져오는 데 실패했습니다:", error)); } @@ -293,7 +295,7 @@ function Mypage() { <div className='profile'> <div className='myprofile'> <p>나의 프로필</p> - <img src={user.profileImage} alt="profileImg"></img> {/* 프로필 이미지 받아오기 */} + <img src={user.profile.profileImage} alt="profileImg"></img> {/* 프로필 이미지 받아오기 */} </div> <div className='details'> <div className='profileDetails'> diff --git a/webapp/frontend/src/components/SignUp.js b/webapp/frontend/src/components/SignUp.js index 0e58ed68aa45db8d9f04e06390c3ca1345ec8bcf..c251d31f96c656ba44cd9bb3720994d4793af353 100644 --- a/webapp/frontend/src/components/SignUp.js +++ b/webapp/frontend/src/components/SignUp.js @@ -59,13 +59,12 @@ function SignUp(){ reader.onloadend = () => { setImagePreview(reader.result); // 미리보기용 이미지 }; + reader.readAsDataURL(file); // 파일을 읽어 데이터 URL로 변환 } }; const handleImageUpload = async (e) => { - e.preventDefault(); - const formData = new FormData(); formData.append('image', imageFile); @@ -80,7 +79,7 @@ function SignUp(){ if (response.ok) { // 업로드 성공시, 서버에서 반환된 이미지 URL을 받음 const imageUrl = data.image_url; - return imageUrl + return imageUrl; } else { console.error(data.error); alert(data.error); @@ -123,6 +122,8 @@ function SignUp(){ const createUser = async (newUser) => { + console.log(newUser); + try { const response = await fetch(`${apiUrl}/api/users`, { method: 'POST', diff --git a/webapp/frontend/src/contexts/AuthContext.js b/webapp/frontend/src/contexts/AuthContext.js index d19dbf5e44e80fab3ab7cc770a497ce4e6b46f99..366fa578a1dabfc6d5fee4cd698f4a7e2b26dc1a 100644 --- a/webapp/frontend/src/contexts/AuthContext.js +++ b/webapp/frontend/src/contexts/AuthContext.js @@ -3,17 +3,20 @@ import React, { createContext, useState, useEffect } from 'react'; export const AuthContext = createContext(); export const AuthProvider = ({ children }) => { - const [isLogIn, setIsLogIn] = useState(false); + const [isLogIn, setIsLogIn] = useState(() => { + // 로컬스토리지에 로그인 정보가 있으면 그 값을 사용하고, 없으면 false로 설정 + return localStorage.getItem('isLogIn') === 'true'; + }); - /*useEffect(() => { - const token = localStorage.getItem('authToken'); - if (token) { - setIsLogIn(true); - } - }, []);*/ + const login = () => { + setIsLogIn(true); + localStorage.setItem('isLogIn', 'true'); // 로그인 상태를 로컬스토리지에 저장 + }; - const login = () => setIsLogIn(true); - const logout = () => setIsLogIn(false); + const logout = () => { + setIsLogIn(false); + localStorage.setItem('isLogIn', 'false'); // 로그아웃 상태를 로컬스토리지에 저장 + }; return ( <AuthContext.Provider value={{ isLogIn, login, logout }}>