Skip to content
Snippets Groups Projects
Commit 3d8aad3d authored by 환희 최's avatar 환희 최
Browse files

Merge branch 'edit' into 'main' 

edit

See merge request !48
parents 5a80459c 567e33db
No related branches found
No related tags found
1 merge request!48edit
Show whitespace changes
Inline Side-by-side
webapp/frontend/src/components/ListItem.js
+ 81
− 47
View file @ 3d8aad3d
......@@ -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,27 +114,33 @@ function ListItem( {crew, event, updateApplicants} ){
setCrewCapacity(crewData.currentMemberCount);
}
} 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);
//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 handleEventRegister = async (eventID) => {
......@@ -133,6 +162,12 @@ function ListItem( {crew, event, updateApplicants} ){
setEventCapacity(eventData.currentMemberCount);
}
} catch (error) {
console.error(error);
alert(error);
}
const postResponse = await fetch(`${apiUrl}/events/${eventID}/members`, {
method: 'POST',
headers: {
......@@ -143,28 +178,27 @@ function ListItem( {crew, event, updateApplicants} ){
if (postResponse.ok) {
console.log('모임 가입 성공:', postResponse);
updateApplicants(eventID, crewCapacity);
//updateApplicants(eventID, crewCapacity);
alert('모임 가입이 완료되었습니다.');
} else {
const postErrorData = await postResponse.json();
alert('가입 실패:', postErrorData);
}
} catch (error) {
console.error(error);
alert(error);
}
};
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>
......
webapp/frontend/src/components/Mypage.js
+ 3
− 1
View file @ 3d8aad3d
......@@ -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'>
......
webapp/frontend/src/components/SignUp.js
+ 4
− 3
View file @ 3d8aad3d
......@@ -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',
......
webapp/frontend/src/contexts/AuthContext.js
+ 12
− 9
View file @ 3d8aad3d
......@@ -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) {
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 }}>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

feedback to tooltime@ajou.ac.kr or hwan@ajou.ac.kr