From f6181a161a51028facfab2904d606caf3c7056e7 Mon Sep 17 00:00:00 2001 From: choiseohyeon Date: Sat, 17 Feb 2024 17:39:42 +0900 Subject: [PATCH 1/4] =?UTF-8?q?[feat]=20=EC=97=B0=EB=8F=99=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Registration.jsx | 109 ++++++++++++++++++++++++++++++++----- src/pages/Select.jsx | 1 + 2 files changed, 95 insertions(+), 15 deletions(-) diff --git a/src/pages/Registration.jsx b/src/pages/Registration.jsx index 476c3fb..2473ba0 100644 --- a/src/pages/Registration.jsx +++ b/src/pages/Registration.jsx @@ -1,10 +1,11 @@ // 3.0 내가 찾은 유기동물 등록하기 페이지 -import React, { useState, useRef } from "react"; +import React, { useState, useRef, useEffect } from "react"; import { Header, MHeader } from "../components"; import { bg2, RegistDropPet } from "../images"; import { useNavigate } from "react-router-dom"; import styled from "styled-components"; +import { useLocation } from "react-router-dom"; const Registration = () => { const isMobile = window.innerWidth <= 393; @@ -13,11 +14,17 @@ const Registration = () => { const [imgBase64, setImgBase64] = useState(""); const inputRef = useRef(); - // 업로드 api 로직 추가 해야함 + const location = useLocation(); + const queryString = location.search.slice(1); - const handleCompleteClick = () => { - navigate("/research"); - }; + // 입력 필드들 상태 + const [registrarName, setRegistrarName] = useState(""); + const [connectNumber, setConnectNumber] = useState(""); + const [breed, setBreed] = useState(""); + const [gender, setGender] = useState(""); + const [isNeutered, setIsNeutered] = useState(""); + const [findlocation, setFindlocation] = useState(""); + const [significantReport, setSignificantReport] = useState(""); // 이미지 변경 핸들러 부분 const imageChange = (e) => { @@ -34,6 +41,45 @@ const Registration = () => { } }; + // api 연동 부분 + const handleCompleteClick = async () => { + const formData = new FormData(); + + // 선택한 이미지 추가 + if (selectedImage) { + formData.append("photo", selectedImage); + } + + formData.append("photo", selectedImage); + formData.append("is_dog", queryString === "dog" ? "true" : "false"); + formData.append("breed", breed); + formData.append("gender", gender); + formData.append("is_neutered", isNeutered === "yes" ? "true" : "false"); + formData.append("name", registrarName); + formData.append("shelter_location", "Not protected yet"); + formData.append("shelter_contact", connectNumber); + formData.append("location", findlocation); + formData.append("notes", significantReport); + formData.append("is_adopted", "false"); + formData.append("password", "animal"); + + try { + const response = await fetch("https://34.64.68.236.nip.io/animals", { + method: "POST", + body: formData, + }); + + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + const result = await response.json(); + console.log(result); + navigate("/research"); + } catch (error) { + console.error("Error during the fetch operation:", error); + } + }; + return ( <> {isMobile ? :
} @@ -75,6 +121,8 @@ const Registration = () => { as="input" type="text" placeholder="Please enter it." + value={registrarName} + onChange={(e) => setRegistrarName(e.target.value)} /> @@ -85,43 +133,72 @@ const Registration = () => { as="input" type="text" placeholder="Please enter it." + value={connectNumber} + onChange={(e) => setConnectNumber(e.target.value)} /> - Breed + Where You found setFindlocation(e.target.value)} /> - Where You found + Breed + as="select" + value={breed} + onChange={(e) => setBreed(e.target.value)} + > + + {/* 강아지 */} + + + + + + + {/* 고양이 */} + + + + + + Neutered - + setIsNeutered(e.target.value)} + > - Gender - + setGender(e.target.value)} + > - @@ -130,6 +207,8 @@ const Registration = () => { as="textarea" type="text" placeholder="Please enter it." + value={significantReport} + onChange={(e) => setSignificantReport(e.target.value)} /> diff --git a/src/pages/Select.jsx b/src/pages/Select.jsx index c325e63..70f24e3 100644 --- a/src/pages/Select.jsx +++ b/src/pages/Select.jsx @@ -16,6 +16,7 @@ const Select = () => { const location = useLocation(); const queryString = location.search.slice(1); console.log(queryString); + return ( From 3110ea65e7d4e4bbb56a9aeaaedf56d0d28f92c2 Mon Sep 17 00:00:00 2001 From: choiseohyeon Date: Sat, 17 Feb 2024 18:48:25 +0900 Subject: [PATCH 2/4] =?UTF-8?q?[feat]=20=EC=97=B0=EB=8F=99=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Registration.jsx | 31 ++++++++++++++----------------- 1 file changed, 14 insertions(+), 17 deletions(-) diff --git a/src/pages/Registration.jsx b/src/pages/Registration.jsx index 2473ba0..9678466 100644 --- a/src/pages/Registration.jsx +++ b/src/pages/Registration.jsx @@ -6,6 +6,7 @@ import { bg2, RegistDropPet } from "../images"; import { useNavigate } from "react-router-dom"; import styled from "styled-components"; import { useLocation } from "react-router-dom"; +import axios from "axios"; const Registration = () => { const isMobile = window.innerWidth <= 393; @@ -45,35 +46,31 @@ const Registration = () => { const handleCompleteClick = async () => { const formData = new FormData(); - // 선택한 이미지 추가 - if (selectedImage) { - formData.append("photo", selectedImage); - } - formData.append("photo", selectedImage); - formData.append("is_dog", queryString === "dog" ? "true" : "false"); + formData.append("is_dog", queryString === "dog" ? true : false); formData.append("breed", breed); formData.append("gender", gender); - formData.append("is_neutered", isNeutered === "yes" ? "true" : "false"); + formData.append("is_neutered", isNeutered === "yes" ? true : false); formData.append("name", registrarName); formData.append("shelter_location", "Not protected yet"); formData.append("shelter_contact", connectNumber); formData.append("location", findlocation); formData.append("notes", significantReport); - formData.append("is_adopted", "false"); + formData.append("is_adopted", false); formData.append("password", "animal"); try { - const response = await fetch("https://34.64.68.236.nip.io/animals", { - method: "POST", - body: formData, - }); + const response = await axios.post( + "https://34.64.68.236.nip.io/animals", + formData, + { + headers: { + "Content-Type": "multipart/form-data", + }, + } + ); - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - const result = await response.json(); - console.log(result); + console.log("Image uploaded successfully:", response.data); navigate("/research"); } catch (error) { console.error("Error during the fetch operation:", error); From 99175d3207a0b965d6de5b3586f5965423858296 Mon Sep 17 00:00:00 2001 From: choiseohyeon Date: Sat, 17 Feb 2024 19:29:41 +0900 Subject: [PATCH 3/4] =?UTF-8?q?[fix]=20breed=EA=B0=92=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Registration.jsx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/pages/Registration.jsx b/src/pages/Registration.jsx index 9678466..9c32da3 100644 --- a/src/pages/Registration.jsx +++ b/src/pages/Registration.jsx @@ -156,22 +156,22 @@ const Registration = () => { > {/* 강아지 */} - - - - - - + + + + + {/* 고양이 */} - - - - - + + + + From fad67ba273468115953fce9a0b565292cb7cfc0a Mon Sep 17 00:00:00 2001 From: choiseohyeon Date: Sat, 17 Feb 2024 19:44:32 +0900 Subject: [PATCH 4/4] =?UTF-8?q?[feat]=20api=20=EC=97=B0=EB=8F=99=20?= =?UTF-8?q?=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Registration.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/pages/Registration.jsx b/src/pages/Registration.jsx index 9c32da3..52310ad 100644 --- a/src/pages/Registration.jsx +++ b/src/pages/Registration.jsx @@ -73,6 +73,8 @@ const Registration = () => { console.log("Image uploaded successfully:", response.data); navigate("/research"); } catch (error) { + console.log("FormData to be sent:", Array.from(formData.entries())); + console.error("Error during the fetch operation:", error); } }; @@ -194,8 +196,8 @@ const Registration = () => { onChange={(e) => setGender(e.target.value)} > - - + +