강의를 두세번 돌려봤는데요.
이렇게 하셨는데요. 확인버튼에 onClick를 안해주셔도되는건가요? 실제로 테스트해보니까 저는 확인버튼을 누르면 아무 동작도 일어나지 않아요.
이렇게 되어있네요.
제대로 값을 넣어주고 확인을 넣어주면 400 에러가 나옵니다.
위의 코드도 이번 강의에서 찾아볼수없고, 강사님 깃허브 코드에는 있습니다. ㅠ 이번 강의에서 없는건 맞는건지 궁금합니다..
그리고 강의 코드와 제 코드를 아무리 비교해봐도 400에러 발생지를 못찾겠는데.. 도움좀 부탁드릴께요 ㅠㅠ
import React, { useState } from "react";
import { Typography, Button, Form, Input } from "antd";
import FileUpload from "../../utils/FileUpload";
import Axios from "axios";
const { TextArea } = Input;
const Continents = [
{ key: 1, value: "Africa" },
{ key: 2, value: "Europe" },
{ key: 3, value: "North America" },
{ key: 4, value: "South America" },
{ key: 5, value: "Australia" },
{ key: 6, value: "Australia" },
{ key: 1, value: "Antarctica" },
];
function UploadProductPage(props) {
const [Title, setTitle] = useState("");
const [Description, setDescription] = useState("");
const [Price, setPrice] = useState(0);
const [Continent, setContinent] = useState(1);
const [Images, setImages] = useState([]);
const titleChangeHandler = (event) => {
setTitle(event.currentTarget.value);
};
const descriptionChangeHandler = (event) => {
setDescription(event.currentTarget.value);
};
const priceChangeHandler = (event) => {
setPrice(event.currentTarget.value);
};
const continentChangeHandler = (event) => {
setContinent(event.currentTarget.value);
};
const updateImages = (newImages) => {
setImages(newImages);
};
const submitHandler = (event) => {
event.preventDefault();
if (!Title || !Description || !Price || !Continent || !Images) {
return alert("모든 값을 넣어주셔야 합니다.");
}
// 서버에 채운 값들을 request로 보낸다.
const body = {
// 로그인 된 사람의 ID
writer: props.user.userData._id,
title: Title,
description: Description,
price: Price,
images: Images,
continents: Continents,
};
Axios.post("/api/product", body).then((response) => {
if (response.data.success) {
alert("상품 업로드에 성공 했습니다.");
props.history.push("/");
} else {
alert("상품 업로드에 실패 했습니다.");
}
});
};
return (
<div style={{ maxWidth: "700px", margin: "2rem auto" }}>
<div style={{ textAlign: "center", marginBottom: "2rem" }}>
<h2>여행 상품 업로드</h2>
</div>
<Form onSubmit={submitHandler}>
{/*Drop-Zone */}
<FileUpload refreshFunction={updateImages} />
<br />
<br />
<label>이름</label>
<Input onChange={titleChangeHandler} value={Title} />
<br />
<br />
<labe>설명</labe>
<TextArea onChange={descriptionChangeHandler} value={Description} />
<br />
<br />
<labe>가격($)</labe>
<Input type="number" onChange={priceChangeHandler} value={Price} />
<br />
<br />
<select onChange={continentChangeHandler} value={Continent}>
{Continents.map((item) => (
<option key={item.key} value={item.key}>
{item.value}
</option>
))}
</select>
<br />
<br />
<Button type="submit" onClick={submitHandler}>
확인
</Button>
</Form>
</div>
);
}
export default UploadProductPage;
const express = require("express");
const router = express.Router();
const multer = require("multer");
const { Product } = require("../models/Product");
//=================================
// Product
//=================================
var storage = multer.diskStorage({
/* 어디에 파일이 저장되는지 */
destination: function (req, file, cb) {
cb(null, "uploads/");
},
/* 어떤 이름으로 파일을 저장할지 */
filename: function (req, file, cb) {
cb(null, `${Date.now()}_${file.originalname}`);
},
});
var upload = multer({ storage: storage }).single("file");
router.post("/image", (req, res) => {
// 가져온 이미지를 저장을 해주면 된다.
upload(req, res, (err) => {
if (err) {
return res.json({ success: false, err });
}
return res.json({
success: true,
filePath: res.req.file.path,
fileName: res.req.file.filename,
});
});
});
router.post("/", (req, res) => {
// UploadProductPage.js에서 받아온 정보들을 DB에 넣어 준다.
const product = new Product(req.body);
product.save((err) => {
if (err) return res.status(400).json({ success: false, err });
return res.status(200).json({ success: true });
});
});
module.exports = router;
