Select Git revision
createRecruit.js
createRecruit.js 15.69 KiB
import React, { useState } from "react";
import createRecruitStyles from './createRecruit.module.css';
function CreateRecruit({ isOpen, onClose }){
const [formData, setFormData] = useState({
data: {
title: '',
content: '',
owner: '',
regionFirst: '',
regionSecond: '',
peopleNum: '',
startDate: '',
endDate: '',
timeCategory: '',
startTime: null,
endTime: null,
},
image: null
});
const [timeData, setTimeData] = useState({
startHour: null,
startMinute: '00',
endHour: null,
endMinute: '00'
});
const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData((prevData) => ({
...prevData,
data: {
...prevData.data,
[name]: value,
},
}));
};
const handleImageChange = (e) => {
const imageFile = e.target.files[0];
setFormData((prevDate) => ({
...prevDate,
image: imageFile
}));
};
const handleTimeChange = (e) => {
const { name, value } = e.target;
setTimeData((prevData) => ({
...prevData,
[name]: value,
}));
};
const handleSave = (e) => {
e.preventDefault()
if(formData.data.timeCategory === "TBD"){
handleSubmit({
...formData,
data: {
...formData.data,
startTime: null,
endTime: null,
}
});
}else{
handleSubmit({
...formData,
data: { ...formData.data,
startTime: `${timeData.startHour}:${timeData.startMinute || '00'}`,
endTime: `${timeData.endHour}:${timeData.endMinute || '00'}`,
}
});
}
};
const handleSubmit = async (formData) => {
if(formData.data.title === ''){
alert('제목을 입력해주세요.');
return;
} else if(formData.data.owner === ''){
alert('작성자를 선택해주세요.');
return;
} else if(formData.data.regionFirst === ''){
alert('시/도를 선택해주세요.');
return;
} else if(formData.data.regionSecond === ''){
alert('구/군을 선택해주세요.');
return;
}else if(formData.data.peopleNum === ''){
alert('모집 인원을 입력해주세요.');
return;
} else if(formData.data.startDate === ''){
alert('시작 날짜를 입력해주세요.');
return;
} else if(formData.data.endDate === ''){
alert('종료 날짜를 입력해주세요.');
return;
} else if(formData.data.timeCategory === ''){
alert('시간 지정 여부를 선택해주세요.');
return;
} else if(formData.data.content === ''){
alert('내용을 입력해주세요.');
return;
}
if(formData.data.timeCategory === "D"){
if(timeData.startHour === null || timeData.endHour === null || timeData.startMinute === null || timeData.endMinute === null){
alert('시간을 선택해주세요.');
return;
}
}
if (formData.data.endTime < formData.data.startTime) {
alert('종료 시간은 시작 시간보다 늦어야 합니다.');
return;
}
try {
const jsonDataString = JSON.stringify(formData.data);
const formDataToSend = new FormData();
formDataToSend.append('data', jsonDataString);
formDataToSend.append('image', formData.image);
const response = await fetch('/api/recruits', {
method: 'POST',
body: formDataToSend,
});
if (response.ok) {
// 성공적으로 모집글이 생성됨
alert('모집글이 성공적으로 생성되었습니다.');
window.location.reload();
} else {
// 오류 처리
alert('모집글 생성에 실패하였습니다.');
}
} catch (error) {
console.error('Error:', error);
}
};
const area0 = ["시/도 선택","서울특별시","인천광역시","대전광역시","광주광역시","대구광역시","울산광역시","부산광역시","경기도","강원도","충청북도","충청남도","전라북도","전라남도","경상북도","경상남도","제주도"];
const area1 = ["강남구","강동구","강북구","강서구","관악구","광진구","구로구","금천구","노원구","도봉구","동대문구","동작구","마포구","서대문구","서초구","성동구","성북구","송파구","양천구","영등포구","용산구","은평구","종로구","중구","중랑구"];
const area2 = ["계양구","남구","남동구","동구","부평구","서구","연수구","중구","강화군","옹진군"];
const area3 = ["대덕구","동구","서구","유성구","중구"];
const area4 = ["광산구","남구","동구","북구","서구"];
const area5 = ["남구","달서구","동구","북구","서구","수성구","중구","달성군"];
const area6 = ["남구","동구","북구","중구","울주군"];
const area7 = ["강서구","금정구","남구","동구","동래구","부산진구","북구","사상구","사하구","서구","수영구","연제구","영도구","중구","해운대구","기장군"];
const area8 = ["고양시","과천시","광명시","광주시","구리시","군포시","김포시","남양주시","동두천시","부천시","성남시","수원시","시흥시","안산시","안성시","안양시","양주시","오산시","용인시","의왕시","의정부시","이천시","파주시","평택시","포천시","하남시","화성시","가평군","양평군","여주군","연천군"];
const area9 = ["강릉시","동해시","삼척시","속초시","원주시","춘천시","태백시","고성군","양구군","양양군","영월군","인제군","정선군","철원군","평창군","홍천군","화천군","횡성군"];
const area10 = ["제천시","청주시","충주시","괴산군","단양군","보은군","영동군","옥천군","음성군","증평군","진천군","청원군"];
const area11 = ["계룡시","공주시","논산시","보령시","서산시","아산시","천안시","금산군","당진군","부여군","서천군","연기군","예산군","청양군","태안군","홍성군"];
const area12 = ["군산시","김제시","남원시","익산시","전주시","정읍시","고창군","무주군","부안군","순창군","완주군","임실군","장수군","진안군"];
const area13 = ["광양시","나주시","목포시","순천시","여수시","강진군","고흥군","곡성군","구례군","담양군","무안군","보성군","신안군","영광군","영암군","완도군","장성군","장흥군","진도군","함평군","해남군","화순군"];
const area14 = ["경산시","경주시","구미시","김천시","문경시","상주시","안동시","영주시","영천시","포항시","고령군","군위군","봉화군","성주군","영덕군","영양군","예천군","울릉군","울진군","의성군","청도군","청송군","칠곡군"];
const area15 = ["거제시","김해시","마산시","밀양시","사천시","양산시","진주시","진해시","창원시","통영시","거창군","고성군","남해군","산청군","의령군","창녕군","하동군","함안군","함양군","합천군"];
const area16 = ["서귀포시","제주시","남제주군","북제주군"];
return(
<div>
{isOpen && (
<div className={createRecruitStyles.overlay}>
<div className={createRecruitStyles.modal}>
<button type="button" className={createRecruitStyles.x} onClick={onClose}>X</button>
<div className={createRecruitStyles.top}>
<div>모집글 생성</div>
</div>
<form onSubmit={handleSave}>
<div className={createRecruitStyles.title}>
<label>제목*</label>
<input type="text" name="title" value={formData.data.title} onChange={handleInputChange} placeholder="제목을 입력하세요.(50자 이내)"/>
</div>
<div className={createRecruitStyles.owner}>
<label>작성자*</label>
<input type="radio" name="owner" value="User" checked={formData.data.owner === 'User'} onClick={handleInputChange}/>User
<input type="radio" name="owner" value="Channel" checked={formData.data.owner === 'Channel'} onClick={handleInputChange}/>Channel
</div>
<div className={createRecruitStyles.region}>
<label>지역*</label>
<div className={createRecruitStyles.regionFirst}>
<select name="regionFirst" value={formData.data.regionFirst} onChange={handleInputChange}>
{area0.map(sido => (
<option name={sido} value={sido}>{sido}</option>
))}
</select>
</div>
<div className={createRecruitStyles.regionFirst}>
<select name="regionSecond" value={formData.data.regionSecond} onChange={handleInputChange}>
<option value="">구/군 선택</option>
{formData.data.regionFirst && eval(`area${area0.indexOf(formData.data.regionFirst)}`).map(gugun => (
<option name={gugun} value={gugun}>{gugun}</option>
))}
</select>
</div>
</div>
<div className={createRecruitStyles.peopleNum}>
<label>모집 인원*</label>
<input type="number" min="1" name="peopleNum" value={formData.data.peopleNum} onChange={handleInputChange} placeholder="모집 인원을 선택하세요."/>
</div>
<div className={createRecruitStyles.startDate}>
<label>시작 날짜*</label>
<input
type="date"
name="startDate"
value={formData.data.startDate}
onChange={handleInputChange}
/>
</div>
<div className={createRecruitStyles.endDate}>
<label>종료 날짜*</label>
<input
type="date"
name="endDate"
value={formData.data.endDate}
onChange={handleInputChange}
min={formData.data.startDate}
/>
</div>
<div className={createRecruitStyles.timeCategory}>
<label>시간 지정 여부*</label>
<input type="radio" name="timeCategory" value="D" checked={formData.data.timeCategory === 'D'} onClick={handleInputChange}/>지정
<input type="radio" name="timeCategory" value="TBD" checked={formData.data.timeCategory === 'TBD'} onClick={handleInputChange}/>미지정
</div>
<div className={createRecruitStyles.time}>
{formData.data.timeCategory === "D" && (
<div>
<div className={createRecruitStyles.time_select}> {/*시간 지정 여부: 지정(timeCategory:D)*/}
<label>시작 시간*</label>
<div>
<select name="startHour" value={timeData.startHour} onChange={handleTimeChange}>
{[...Array(24).keys()].map((hour) => (
<option key={hour} value={hour < 10 ? `0${hour}` : `${hour}`}>
{hour < 10 ? `0${hour}` : `${hour}`}
</option>
))}
</select>
<span>:</span>
<select name="startMinute" value={timeData.startMinute} onChange={handleTimeChange}>
<option name="minute" value='00'>00</option>
<option name="minute" value='30'>30</option>
</select>
</div>
</div>
<div className={createRecruitStyles.time_select}>
<label>종료 시간*</label>
<div>
<select name="endHour" value={timeData.endHour} onChange={handleTimeChange}>
{[...Array(24).keys()].map((hour) => (
<option key={hour} value={hour < 10 ? `0${hour}` : `${hour}`}>
{hour < 10 ? `0${hour}` : `${hour}`}
</option>
))}
</select>
<span>:</span>
<select name="endMinute" value={timeData.endMinute} onChange={handleTimeChange}>
<option name="minute">00</option>
<option name="minute">30</option>
</select>
</div>
</div>
</div>
)}
</div>
<div className={createRecruitStyles.content}> <label>내용*</label>
<textarea name="content" value={formData.data.content} onChange={handleInputChange} placeholder="내용을 입력하세요."/>
</div>
<div className={createRecruitStyles.image}>
<label>이미지 첨부</label>
<input type="file" name="image" value={formData.data.image} onChange={handleImageChange} />
</div>
<div className={createRecruitStyles.button}>
<button type="submit" className={createRecruitStyles.save}>저장</button>
<button type="button" className={createRecruitStyles.cancel} onClick={onClose}>취소</button>
</div>
</form>
</div>
</div>
)}
</div>
)
}
export default CreateRecruit;