diff --git a/webapp/frontend/src/components/ListItem.js b/webapp/frontend/src/components/ListItem.js
index 497d9cad2e21415b670d81b9eb53911401869ccb..d465a1a579ae343016996c21406620d82f170d3e 100644
--- a/webapp/frontend/src/components/ListItem.js
+++ b/webapp/frontend/src/components/ListItem.js
@@ -18,6 +18,31 @@ function ListItem( {crew, event, updateApplicants} ){
const [crewRegionNames, setCrewRegionNames] = useState({}); //상위지역, 하위지역 이름 저장
const [eventRegionNames, setEventRegionNames] = useState({});
+ const sportTypes = [
+ {
+ sportTypeId: 1,
+ sportName: "러닝",
+ metadata: {
+ distance: ["3~4km", "5~6km", "7~8km", "9km 이상"],
+ pace: ["4:00~4:30", "4:30~5:00", "5:00~5:30", "5:30~6:00", "6:00~6:30", "6:30 이상"]
+ }
+ },
+ {
+ sportTypeId: 2,
+ sportName: "헬스",
+ metadata: {
+ experience: ["초보자 (0~1년)", "중급자 (2~3년)", "상급자 (3년 이상)"]
+ }
+ },
+ {
+ sportTypeId: 3,
+ sportName: "클라이밍",
+ metadata: {
+ difficulty: ["상관 없음", "V1", "V2", "V3", "V4", "V5", "V6", "V7", "V8+"]
+ }
+ }
+ ];
+
const handleCrewRegisterModal = () => {
setCrewRegisterModal(true);
@@ -175,10 +200,10 @@ 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" />{crew.region}
+ <img className='listingItemImage' src={process.env.PUBLIC_URL + '/location.png'} alt="listinglocatin" />{crewRegionNames.regionName} {crewRegionNames.parentRegionName}
</p>
<p className='type'>
- <img className='listingItemImage' src={process.env.PUBLIC_URL + '/sporttype.png'} alt="listingsporttype" />{crew.type}
+ <img className='listingItemImage' src={process.env.PUBLIC_URL + '/sporttype.png'} alt="listingsporttype" />{sportTypes[crew.sportTypeId - 1]}
</p>
<p className='people'>
<img className='listingItemImage' src={process.env.PUBLIC_URL + '/people.png'} alt="listingsportpeople" />{crew.capacity}
@@ -197,11 +222,11 @@ function ListItem( {crew, event, updateApplicants} ){
</div>
<div className="crewType">
- 종목 <span>{crew.type}</span>
+ 종목 <span>{sportTypes[crew.sportTypeId - 1]}</span>
</div>
<div className="crewFee">
- 가입 비용 <span>{crew.fee}</span>
+ 가입 비용 <span>{crew.fee_krw}</span>
</div>
<div className="crewCapacity">
@@ -209,11 +234,11 @@ function ListItem( {crew, event, updateApplicants} ){
</div>
<div className="crewBio">
- 크루 소개 <span>{crew.bio}</span>
+ 크루 소개 <span>{crew.description}</span>
</div>
</div>
- <button className="createRegisterButton" onClick={handleCrewRegister}>가입하기</button>
+ <button className="createRegisterButton" onClick={()=>handleCrewRegister(crew.id)}>가입하기</button>
</div>
</div>
@@ -224,10 +249,10 @@ 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" />{event.region}
+ <img className='listingItemImage' src={process.env.PUBLIC_URL + '/location.png'} alt="listinglocatin" />{eventRegionNames.regionName} {eventRegionNames.parentRegionName}
</p>
<p className='type'>
- <img className='listingItemImage' src={process.env.PUBLIC_URL + '/sporttype.png'} alt="listingsporttype" />{event.type}
+ <img className='listingItemImage' src={process.env.PUBLIC_URL + '/sporttype.png'} alt="listingsporttype" />{sportTypes[event.sportTypeId - 1]}
</p>
<p className='people'>
<img className='listingItemImage' src={process.env.PUBLIC_URL + '/people.png'} alt="listingsportpeople" />{event.capacity}
@@ -246,11 +271,11 @@ function ListItem( {crew, event, updateApplicants} ){
</div>
<div className="eventType">
- 종목 <span>{event.type}</span>
+ 종목 <span>{sportTypes[crew.sportTypeId - 1]}</span>
</div>
<div className="eventDate">
- 운동 일시 <span>{event.date}</span>
+ 운동 일시 <span>{event.eventDate}</span>
</div>
<div className="eventCapacity">
@@ -258,7 +283,7 @@ function ListItem( {crew, event, updateApplicants} ){
</div>
<div className="eventCondition">
- 조건 <span>{event.condition}</span>
+ 조건 <span>{event.feeCondition}</span>
</div>
</div>
diff --git a/webapp/frontend/src/components/Listing.js b/webapp/frontend/src/components/Listing.js
index c16e38bc486a441af1ae03c6df4c6f6a37c61eb8..d89bbb902b174e8433d68e18dfbe8dfce1f32284 100644
--- a/webapp/frontend/src/components/Listing.js
+++ b/webapp/frontend/src/components/Listing.js
@@ -28,6 +28,31 @@ function Listing(){
const [regionID, setRegionID] = useState('');
+ const sportTypes = [
+ {
+ sportTypeId: 1,
+ sportName: "러닝",
+ metadata: {
+ distance: ["3~4km", "5~6km", "7~8km", "9km 이상"],
+ pace: ["4:00~4:30", "4:30~5:00", "5:00~5:30", "5:30~6:00", "6:00~6:30", "6:30 이상"]
+ }
+ },
+ {
+ sportTypeId: 2,
+ sportName: "헬스",
+ metadata: {
+ experience: ["초보자 (0~1년)", "중급자 (2~3년)", "상급자 (3년 이상)"]
+ }
+ },
+ {
+ sportTypeId: 3,
+ sportName: "클라이밍",
+ metadata: {
+ difficulty: ["상관 없음", "V1", "V2", "V3", "V4", "V5", "V6", "V7", "V8+"]
+ }
+ }
+ ];
+
useEffect(() => {
const fetchCrews = async () => {
try {
@@ -191,12 +216,12 @@ function Listing(){
<label htmlFor="crewType">종목</label>
<select name="type" id="crewType" value={crewFormData.type} onChange={handleCrewChange}>
<option className='crewTypeOption' value="">선택 ▼</option>
- <option value="running">러닝</option>
- <option value="climbing">클라이밍</option>
- <option value="fitness">헬스</option>
+ <option value="1">러닝</option>
+ <option value="3">클라이밍</option>
+ <option value="2">헬스</option>
</select>
</div>
-
+
<div className="crewFeeInput">
<label htmlFor="crewFee">가입비용</label>
<input type="number" id='crewFee' name='fee' placeholder='입력하기' value={crewFormData.fee} onChange={handleCrewChange} />
@@ -242,11 +267,11 @@ function Listing(){
<div className="eventTypeInput">
<label htmlFor="eventType">종목</label>
- <select name="type" id="eventType" value={eventFormData.type} onChange={handleEventChange}>
- <option className='eventTypeOption' value="">선택 ▼</option>
- <option value="러닝">러닝</option>
- <option value="클라이밍">클라이밍</option>
- <option value="헬스">헬스</option>
+ <select name="type" id="crewType" value={crewFormData.typeId} onChange={handleCrewChange}>
+ <option className='crewTypeOption' value="">선택 ▼</option>
+ <option value="1">러닝</option>
+ <option value="3">클라이밍</option>
+ <option value="2">헬스</option>
</select>
</div>
diff --git a/webapp/frontend/src/components/Region.js b/webapp/frontend/src/components/Region.js
index 410d8c225d4291b6ea1744f4efc02533ff4fa49f..4839e18150495c73a9cebd1dd8e2bcde06dd3e34 100644
--- a/webapp/frontend/src/components/Region.js
+++ b/webapp/frontend/src/components/Region.js
@@ -55,8 +55,8 @@ function Region( {onRegionSelect} ) {
};
useEffect(()=>{
- onRegionSelect(selectedRegionSubID);
- },[selectedRegionSubID])
+ onRegionSelect(selectedRegionID);
+ },[selectedRegionID])
const handleRegionChange = (e) => {
setSelectedRegionID(e.target.value);
diff --git a/webapp/frontend/src/components/Search.js b/webapp/frontend/src/components/Search.js
index 2ee18fa0c5178f3b27a6040eb4b4d4946f90685c..431f9237851e35d7705c774b2e7b97020ee560e2 100644
--- a/webapp/frontend/src/components/Search.js
+++ b/webapp/frontend/src/components/Search.js
@@ -47,9 +47,9 @@ function Search() {
<span className='crewSearchMessage'>크루 검색하기</span>
<select name="crewSportType" id="crewSportType">
<option value="">종목 ▼</option>
- <option value="running">러닝</option>
- <option value="climbing">클라이밍</option>
- <option value="fitness">헬스</option>
+ <option value="1">러닝</option>
+ <option value="3">클라이밍</option>
+ <option value="2">헬스</option>
</select>
<Region onRegionSelect={handleRegionChange}/>
@@ -61,9 +61,9 @@ function Search() {
<span className='meetingSearchMessage'>모임 검색하기</span>
<select name="meetingSportType" id="meetingSportType">
<option value="">종목 ▼</option>
- <option value="running">러닝</option>
- <option value="climbing">클라이밍</option>
- <option value="fitness">헬스</option>
+ <option value="1">러닝</option>
+ <option value="3">클라이밍</option>
+ <option value="2">헬스</option>
</select>
<Region onRegionSelect={handleRegionChange}/>
diff --git a/webapp/frontend/src/contexts/CrewContext.js b/webapp/frontend/src/contexts/CrewContext.js
index 7e69cfef71e7f9227ecccc88ca301c11a562f5bb..0f0fd3dbaf440970c6c70dd049ce2b6b9e432476 100644
--- a/webapp/frontend/src/contexts/CrewContext.js
+++ b/webapp/frontend/src/contexts/CrewContext.js
@@ -41,7 +41,6 @@ export const CrewProvider = ({ children }) => {
const onCreateCrew = (newCrew) => {
- setCrews(prevCrews => [...prevCrews, newCrew]);
fetch(`${apiUrl}/api/crews`, {
method: 'POST',
headers: {