[#40] feat: implement pet list and editpage screen

bowwowcare/src/App.js

@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from "react-redux";
 
 import "tailwindcss/tailwind.css";
 
-import HomePage from "./views/HomePage";
+import HomePage from "./views/HomePage/HomePage";
 import PreviewPage from "./views/PreviewPage/PreviewPage";
 import ResultsPage from "./views/ResultsPage/ResultsPage";
 import CameraPage from "./views/CameraPage/CameraPage";

bowwowcare/src/utils/Calculator.js

@@ -0,0 +1,20 @@
+export const getAge = (date) => {
+    const now = new Date();
+    const nowYear = now.getFullYear(); 
+    const birthYear = date.getFullYear();
+
+    const age = nowYear - birthYear
+
+    return age;
+};
+
+export const getBwDate = (date) => {
+    const now = new Date();
+    const stDate = new Date(date.getFullYear(), date.getMonth() + 1, date.getDate());
+    const endDate = new Date(now.getFullYear(), now.getMonth() + 1, now.getDate());
+
+    const btMs = endDate.getTime() - stDate.getTime() ;
+    const btDay = btMs / (1000*60*60*24);
+
+    return btDay;
+}

bowwowcare/src/views/EditPage/EditPage.js

@@ -0,0 +1,164 @@
+import axios from "axios";
+import React, { useState } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import DatePicker from "react-datepicker";
+
+import "react-datepicker/dist/react-datepicker.css";
+import Header from "../../components/Header";
+
+function EditPage() {
+  let navigate = useNavigate();
+  const { state } = useLocation();
+  console.log(state);
+
+  const [petname, setPetName] = useState(state.petname);
+  const [gender, setGender] = useState(state.gender);
+  const [birthDate, setBirthDate] = useState(new Date(state.birthDate));
+  const [adoptDate, setAdoptDate] = useState(new Date(state.adoptDate));
+  const [fileImg, setFileImg] = useState();
+
+  const fileInput = React.useRef();
+
+  const handleChange = (e) => {
+    setFileImg(e.target.files[0]);
+  };
+
+  // 변경함수로 변경
+  const handleEdit = (e) => {
+    e.preventDefault();
+    const formData = new FormData();
+
+    let body = {
+      petname: petname,
+      gender: gender,
+      // petImgUrl: fileImg,
+      birthDate: birthDate,
+      adoptDate: adoptDate,
+    };
+
+    formData.append("pet", JSON.stringify(body));
+    formData.append("file", fileImg);
+
+    for (let key of formData.keys()) {
+      console.log(key, ":", formData.get(key));
+    }
+
+    if (petname && gender && fileImg && birthDate && adoptDate) {
+      // console.log(data);
+      axios
+        .post("http://localhost:8080/api/v1/pets/", formData)
+        .then((res) => {
+          console.log(res);
+          navigate("/");
+          window.location.reload();
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    } else {
+      alert("모든 항목을 입력하세요.");
+      console.log(body);
+    }
+  };
+
+  const changeHandlerBgColor = (g) => {
+    return gender == g
+      ? "bg-main-color text-white "
+      : "bg-transparent text-gray-300";
+  };
+
+  return (
+    <div className="px-8">
+      <Header />
+      <form>
+        <div className="flex flex-col justify-center m-12">
+          <div className="w-full mb-10 flex justify-center">
+            <div className="flex flex-col">
+              <div className="rounded-full border w-20 h-20 ml-4">
+                {fileImg && (
+                  <img
+                    src={URL.createObjectURL(fileImg)}
+                    alt="프로필 이미지"
+                    className="rounded-full w-20 h-20"
+                  ></img>
+                )}
+              </div>
+
+              <div className="mt-3">
+                <label className="font-bold " htmlFor="profileImg">
+                  프로필 이미지 변경
+                </label>
+                <input
+                  type="file"
+                  id="profileImg"
+                  name="avatar"
+                  accept="image/*"
+                  ref={fileInput}
+                  onChange={handleChange}
+                  style={{ display: "none" }}
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="mb-10">
+            <p>이름</p>
+            <input
+              className="w-full mt-3 border-b"
+              value={petname}
+              onChange={(e) => {
+                setPetName(e.target.value);
+              }}
+            ></input>
+          </div>
+
+          <div className="mb-10">
+            <span>성별</span>
+            <div className="flex gap-1">
+              <input
+                type="button"
+                value="남"
+                onClick={() => setGender("남")}
+                className={`w-full h-10 mt-3 text-center rounded-md border border-gray-300 hover:bg-main-color hover:text-white ${changeHandlerBgColor("남")}`}
+              />
+              <input
+                type="button"
+                value="여"
+                onClick={() => setGender("여")}
+                className={`w-full h-10 mt-3 text-center rounded-md border border-gray-300 hover:bg-main-color hover:text-white ${changeHandlerBgColor("여")}`}
+              />
+            </div>
+          </div>
+
+          <div className="mb-10">
+            <span>태어난 날</span>
+            <DatePicker
+              dateFormat="yyyy년 MM월 dd일"
+              selected={birthDate}
+              onChange={(date) => setBirthDate(date)}
+            />
+          </div>
+
+          <div className="mb-10">
+            <span>가족이 된 날</span>
+            <DatePicker
+              dateFormat="yyyy년 MM월 dd일"
+              selected={adoptDate}
+              onChange={(date) => setAdoptDate(date)}
+            />
+          </div>
+          <div className="flex flex-row-reverse">
+            <button
+              onClick={handleEdit}
+              className="w-16 h-8 mt-24 bg-gray-400 rounded-full text-white"
+            >
+              변경
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+export default EditPage;

bowwowcare/src/views/HomePage/HomePage.js

@@ -0,0 +1,113 @@
+import React, { useState, useEffect } from 'react'
+import { useNavigate } from "react-router-dom";
+
+import Header from "../../components/Header";
+import PetList from "./PetList/PetList"
+
+function HomePage() {
+  const [pet, setPet] = useState([]);
+  const navigate = useNavigate();
+  const fileInput = React.useRef(null);
+
+  const handleButtonClick = (e) => {
+    fileInput.current.click();
+  };
+
+  const handleChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      navigate("/preview", {
+        state: {
+          file: file,
+        },
+      });
+    }
+  };
+
+  const res = [{
+    id: 0,
+    petname: "강쥐",
+    gender: "남",
+    birthDate: "2020-01-30T08:13:57.980Z",
+    adoptDate: "2020-01-30T08:13:57.980Z",
+    fileImg: ""
+  }, {
+    id: 1,
+    petname: "강쥐2",
+    gender: "여",
+    birthDate: "2019-01-30T08:13:57.980Z",
+    adoptDate: "2019-01-30T08:13:57.980Z",
+    fileImg: ""
+  }, {
+    id: 2,
+    petname: "강쥐3",
+    gender: "남",
+    birthDate: "2010-01-30T08:13:57.980Z",
+    adoptDate: "2010-01-30T08:13:57.980Z",
+    fileImg: ""
+  }]
+
+  useEffect(() => {
+    setPet(res);
+    console.log(pet);
+  }, [])
+
+  // 펫 데이터 불러오기
+  // useEffect(async() => {
+  //   try{
+  //     const res = await axios.get('/api/v1/pets');
+  //     const input = await res.map((x) => ({
+  //           id: x.idx,
+  //           petname: x.name,
+  //           gender: x.gender,
+  //           birthDate: x.birthDate,
+  //           adopDate: x.adopday,
+  //           fileImg: x.fileImg
+  //           })
+  //     )
+  //     setPet(pet.concat(input))
+  //   } catch(e){
+  //     console.error(e.message)
+  //   }
+  // },[])
+
+  return (
+    <div className="container mx-auto px-8 w-screen h-screen">
+      <Header />
+
+      <p className="text-xl font-bold mt-20">
+        우리 아이가 이상행동을 보이나요?
+      </p>
+
+      <div className="flex justify-around">
+      <button
+        className="w-full h-14 mt-8 mr-4 font-bold rounded-md bg-main-color text-white text-left p-4"
+        onClick={handleButtonClick}
+      >
+        사진 선택
+      </button>
+      <input
+        type="file"
+        id="avatar"
+        name="avatar"
+        accept="image/jpg, image/png, image/jpeg"
+        ref={fileInput}
+        onChange={handleChange}
+        style={{ display: "none" }}
+      />
+      <button className="w-full h-14 mt-8 font-bold rounded-md bg-main-color text-white text-left p-4"
+      onClick={() => navigate("/camera")}>사진 찍기</button>
+
+      </div>
+
+      {pet && <PetList pet={pet}/>}
+
+      <button className="w-full h-32 mt-6 text-center rounded-md border border-gray-300 hover:border-main-color text-gray-300 bg-transparent pl-4"
+      onClick={()=>navigate("/addition")}>
+        <p>+</p>가족을 추가해주세요
+      </button>
+    </div>
+  );
+}
+
+export default HomePage;

bowwowcare/src/views/HomePage/PetList/PetInfo/PetInfo.js

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import { getAge } from '../../../../utils/Calculator';
+import { getBwDate } from '../../../../utils/Calculator';
+
+function PetInfo(props) {
+
+  const birthDate = new Date( Date.parse(props.pet.birthDate) );
+  const adoptDate = new Date( Date.parse(props.pet.adoptDate) );
+
+  const age = getAge(birthDate);
+  const day = getBwDate(adoptDate);
+
+  return (
+    <div className='flex shadow-lg mt-6 p-8 rounded-lg'>
+      <div className="rounded-full border w-14 h-14">
+                    {props.pet.fileImg && (
+                      <img
+                        src={URL.createObjectURL(props.pet.fileImg)}
+                        alt="프로필 이미지"
+                        className="rounded-full w-14 h-14"
+                      ></img>
+                    )}
+      </div>
+      <div className='ml-5'>
+        <span className='text-xl'>{props.pet.petname}</span>
+        <span className='text-sm'> {age}살</span>
+        <div>함께한지 {day}일째</div>
+      </div>
+    </div>
+  )
+
+}
+
+export default PetInfo

bowwowcare/src/views/HomePage/PetList/PetList.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Link } from 'react-router-dom';
+
+import PetInfo from './PetInfo/PetInfo'
+
+function PetList(props) {
+  return (
+    <div>
+      { props.pet.map((a, i)=>{
+        return(
+        <Link to={`/petinfo/${a.id}`} state={{ pet: a }}>
+            <PetInfo pet={a} key={i}/>
+        </Link>
+        ) 
+        })}
+    </div>
+  )
+}
+
+export default PetList