: 최상위 부모로 전체 레이아웃 틀이 존재하며 모든 통신이 발생되는 곳이다.
// Creator.js
const [selectedPage, setSelectedPage] = useState(0);
const [selectedCategory, setSelectedCategory] = useState('');
const [selectedSubCategory, setSelectedSubCategory] = useState('');
const [selectedDifficulty, setSelectedDifficulty] = useState('');
const [selectedClassName, setSelectedClassName] = useState('');
const [selectedPrice, setSelectedPrice] = useState('');
const [selectedDiscount, setSelectedDiscount] = useState('');
const [uploadFirstImage, setUploadFirstImage] = useState();
const [files, setFiles] = useState([]);
const [selectedLecture, setSelectedLecture] = useState([{}]);
const [lecturefiles, setLecturefiles] = useState([]);
const [makeLecture, setMakeLecture] = useState([]);
const [lectureImage, setLectureImage] = useState([]);
const [lectureVideo, setLectureVideo] = useState([]);
const [kitnames, setKitnames] = useState([]);
const [kitImage, setKitImage] = useState([]);
if (selectedPage === 0) {
const temp = JSON.stringify({
categoryName: selectedCategory,
subCategoryName: selectedSubCategory,
difficultyName: selectedDifficulty,
name: selectedClassName,
price: selectedPrice,
sale: selectedDiscount / 100,
});
let formData = new FormData();
formData.append('body', temp);
for (let i = 0; i < files.length; i++) {
formData.append('files', files[i]);
}
formData.append('files', files);
fetch('API', {
headers: {
authorization: localStorage.getItem('token'),
},
method: 'POST',
body: formData,
})
.then((res) => res.json())
.then((result) => {
console.log(result);
});
} else if (selectedPage === 1) { /* 생략 */ }
if (selectedPage === 0) { blabla }
const temp = JSON.stringify({
categoryName: selectedCategory,
subCategoryName: selectedSubCategory,
difficultyName: selectedDifficulty,
name: selectedClassName,
price: selectedPrice,
sale: selectedDiscount / 100,
})
formData.append('body', temp);
for (let i = 0; i < files.length; i++) {
formData.append('files', files[i]);
}
FormData
의 하나의 키 값
에 append를 이용해서 어떻게 하면 여러 데이터를 담을 수 있을까??
를 연구하다가... 그냥 반복문을 써서 한개의 키값에 계속 담으면 다 담아지더라!// 렌더 부분 일부
{selectedPage === 0 ? (
<Introduce
getSelectedCategory={(e) =>
setSelectedCategory(e.target.value)}
getSelectedSubCategory={(e) =>
setSelectedSubCategory(e.target.value)}
getSelectedDifficulty={(e) =>
setSelectedDifficulty(e.target.value)}
getSelectedClassName={(e) =>
setSelectedClassName(e.target.value)}
getSelectedPrice={(e) =>
setSelectedPrice(e.target.value)}
getSelectedDiscount={(e) =>
setSelectedDiscount(e.target.value)}
getFirstImage={(e) => setUploadFirstImage(e)}
getUploadImage={(file) => setFiles(file)}
/>
) : null}
: 여기서는 강의를 상품으로 등록하는 페이지다.
상품 리스트와 상품 디테일 페이지에 보여줄 데이터를 input 하게 된다.
여기서 주요 코드는 상품 대표사진 3장을 담아야 하는 부분인데, 총 3개의 파일을 업로드 해야 하지만 한번에 3개의 파일을 다 담지 않고 1개씩 3번을 담아야하기 때문에 Form에 multiple 속성을 넣을 필요 없고 Form이 3개 필요했다.
function onFileUpload(event) {
let file = event.target.files[0];
setFiles([...files, file]);
}
const upLoadImage = (e) => {
let reader = new FileReader();
if (e.target.files[0]) {
reader.readAsDataURL(e.target.files[0]);
reader.onloadend = () => {
const imageUrl = reader.result;
setfirstUploadImage(imageUrl.toString());
props.getFirstImage(imageUrl.toString());
};
}
};
FileReader()
를 불러오는 함수이다// 렌더 부분
<FirstForm method='post' encType='multipart/form-data'>
<FirstLabel htmlFor='firstUpLoad'>
<img
src={ firstUploadImage ? firstUploadImage : '/images/SH/noImage.png'}
alt='noimage' />
</FirstLabel>
<FirstInput
type='file'
id='firstUpLoad'
onChange={(e) => {
onFileUpload(e);
upLoadFirstImage(e);
}}
/>
</FirstForm>
이제 3부에서는 상품이 아닌 강의를 직접 만들러 가보자