Merge pull request #15 from gdsc-ssu/feat/#13

[Feat] 이미지 검색 및 유기동물 리스트 보기 api 연결
gdsc-ssu · Feb 17, 2024 · 4397187 · 4397187
2 parents e5577a8 + 802f393
commit 4397187
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 82 deletions.
diff --git a/src/components/AnimalCard.jsx b/src/components/AnimalCard.jsx
@@ -56,24 +56,23 @@ const AnimalCard = ({
             careNm: careNm,
           });
           openModal();
-        }}
-      >
+        }}>
         <S.AnimalImg
           src={imgUrl}
           onError={(e) => {
             e.target.src = defaultImg;
           }}
         />
         <S.TextContainer>
-          <S.TextBox1>접수일</S.TextBox1>
+          <S.TextBox1>Date</S.TextBox1>
           <S.TextBox2>{date}</S.TextBox2>
           <div style={{ height: "20px" }}></div>
-          <S.TextBox1>품종</S.TextBox1>
+          <S.TextBox1>Breed</S.TextBox1>
           <S.TextBox2>{kindCd}</S.TextBox2>
           <div style={{ height: "20px" }}></div>
-          <S.TextBox1>성별 / 중성화 여부</S.TextBox1>
+          <S.TextBox1>Gender / Neutered</S.TextBox1>
           <S.TextBox2>
-            {sexCd} / {neuterYn}
+            {sexCd} / {neuterYn ? "Y" : "N"}
           </S.TextBox2>
         </S.TextContainer>
       </S.Container>

diff --git a/src/components/DetailModal.jsx b/src/components/DetailModal.jsx
@@ -25,30 +25,29 @@ function DetailModal({ open, close, data }) {
                 />
               </S.InModal>
               <div>
-                <S.HeadText>{data.similar}% 일치</S.HeadText>
+                <S.HeadText>{data.similar}% match</S.HeadText>
                 <Label
-                  text={"접수일"}
+                  text={"Date"}
                   data={
                     data.date.substr(0, 4) +
                     "/" +
-                    data.date.substr(4, 2) +
+                    data.date.substr(5, 2) +
                     "/" +
-                    data.date.substr(6, 8)
+                    data.date.substr(8, 2)
                   }
                 />
-                <Label text={"품종"} data={data.kindCd} />
+                <Label text={"Breed"} data={data.kindCd} />
                 <Label
-                  text={"성별/중성화여부"}
+                  text={"Gender / Neutered"}
                   data={data.sexCd + " / " + data.neuterYn}
                 />
-                <Label text={"무게"} data={data.weight} />
-                <Label text={"특이사항"} data={data.notice} />
+                <Label text={"weight"} data={data.weight} />
+                <Label text={"particulars"} data={data.notice} />
               </div>
             </S.Row>
             <S.Row2>
-              <Label text={"보호센터"} data={data.careNm} />
-
-              <Label text={"전화번호"} data={data.careTel} />
+              <Label text={"Protection center"} data={data.careNm} />
+              <Label text={"Connect number"} data={data.careTel} />
             </S.Row2>
           </S.Container>
         </S.Background>
@@ -128,6 +127,7 @@ const S = {
   `,
   Row2: styled.div`
     display: flex;
+    flex-direction: column;
     justify-content: space-around;
     margin-left: 5px;
     margin-top: 15px;

diff --git a/src/components/SimilarityCard.jsx b/src/components/SimilarityCard.jsx
@@ -12,6 +12,7 @@ const SimilarityCard = ({
   careNm,
   careTel,
   weight,
+  notice,
 }) => {
   const [modalOpen, setModalOpen] = useState(false);
 
@@ -24,6 +25,7 @@ const SimilarityCard = ({
 
   const [testData, setTestData] = useState({});
   const DataChoice = (info) => {
+    console.log(info.notes);
     setTestData({
       date: info.date,
       kindCd: info.kindCd,
@@ -34,12 +36,14 @@ const SimilarityCard = ({
       careNm: info.careNm,
       careTel: info.careTel,
       weight: info.weight,
+      notice: info.notice,
     });
   };
   return (
     <>
       <S.Container
         onClick={() => {
+          console.log(notice);
           DataChoice({
             date: date,
             kindCd: kindCd,
@@ -50,10 +54,10 @@ const SimilarityCard = ({
             careNm: careNm,
             careTel: careTel,
             weight: weight,
+            notice: notice,
           });
           openModal();
-        }}
-      >
+        }}>
         <S.Row>
           <S.AnimalImg
             src={imgUrl}
@@ -62,19 +66,19 @@ const SimilarityCard = ({
             }}
           />
           <S.TextContainer>
-            <S.TextBox1>접수일</S.TextBox1>
+            <S.TextBox1>Date</S.TextBox1>
             <S.TextBox2>{date}</S.TextBox2>
             <div style={{ height: "20px" }}></div>
-            <S.TextBox1>품종</S.TextBox1>
+            <S.TextBox1>Breed</S.TextBox1>
             <S.TextBox2>{kindCd}</S.TextBox2>
             <div style={{ height: "20px" }}></div>
-            <S.TextBox1>성별 / 중성화 여부</S.TextBox1>
+            <S.TextBox1>Gender / Neutered</S.TextBox1>
             <S.TextBox2>
               {sexCd} / {neuterYn}
             </S.TextBox2>
           </S.TextContainer>
         </S.Row>
-        <S.SimilarityBox>사진과 {similar}% 일치해요</S.SimilarityBox>
+        <S.SimilarityBox>{similar}% match with picture</S.SimilarityBox>
       </S.Container>
       <DetailModal open={modalOpen} close={closeModal} data={testData} />
     </>

diff --git a/src/pages/Main.jsx b/src/pages/Main.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useRef } from "react";
 import styled from "styled-components";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { DropPet, DogInput, MobileDogInput, bg2 } from "../images";
 import {
   Header,
@@ -13,6 +13,9 @@ import {
 import axios from "axios";
 
 const Main = () => {
+  const location = useLocation();
+  const queryString = location.search.slice(1);
+
   const isMobile = window.innerWidth <= 393;
 
   const [selectedImage, setSelectedImage] = useState(null); //이미지 선택 저장
@@ -49,11 +52,13 @@ const Main = () => {
   const handleLodingAndNavigate = () => {
     setLoading(true);
     const formData = new FormData();
-    formData.append("image", selectedImage);
-    formData.append("filename", selectedImage.name);
+
+    formData.append("photo", selectedImage);
+    formData.append("is_dog", queryString === "dog" ? true : false);
+    formData.append("breed", "BritishShorthair");
 
     axios
-      .post("https://findog.buttercrab.net/api/upload-image", formData, {
+      .post("https://34.64.68.236.nip.io/animals/image", formData, {
         headers: {
           "Content-Type": "multipart/form-data",
         },
@@ -62,15 +67,16 @@ const Main = () => {
         // 업로드 성공 후에 수행할 작업
         // console.log(response);
         setLoading(false);
-
         setTimeout(() => {
-          navigate("/similarity", { state: { arr: response.data } });
+          navigate(`/similarity?${queryString}`, {
+            state: { arr: response.data },
+          });
         }, 2000);
       })
       .catch((error) => {
         // 업로드 실패 시에 수행할 작업
         setLoading(false);
-        console.error("어Upload failed:", error);
+        console.error("Upload failed:", error);
       });
   };
   return (
@@ -116,20 +122,20 @@ const Main = () => {
             <>
               {selectedImage ? (
                 <S.MNextpageBtn onClick={() => handleLodingAndNavigate()}>
-                  강아지 찾기
+                  Find {queryString}
                 </S.MNextpageBtn>
               ) : (
-                <S.MNextpageBtnNon>강아지 찾기</S.MNextpageBtnNon>
+                <S.MNextpageBtnNon>Find {queryString}</S.MNextpageBtnNon>
               )}
             </>
           ) : (
             <>
               {selectedImage ? (
                 <S.NextpageBtn onClick={() => handleLodingAndNavigate()}>
-                  강아지 찾기
+                  Find {queryString}
                 </S.NextpageBtn>
               ) : (
-                <S.NextpageBtnNon>강아지 찾기</S.NextpageBtnNon>
+                <S.NextpageBtnNon>Find {queryString}</S.NextpageBtnNon>
               )}
             </>
           )}