Merge pull request #251 from kookmin-sw/feature/204

Feat : 실종자 리포트 api 연결
kookmin-sw · May 21, 2024 · 96b3381 · 96b3381
2 parents 4dca92e + 7fafaf8
commit 96b3381
Show file tree

Hide file tree

Showing 16 changed files with 784 additions and 471 deletions.
diff --git a/frontend/src/components/common/SearchBox.js b/frontend/src/components/common/SearchBox.js
@@ -1,15 +1,13 @@
 /*global kakao*/
 import styled from "styled-components";
+import { useEffect, useRef, useState } from "react";
 import { Input, Modal } from "antd";
 import { SearchOutlined } from "@ant-design/icons";
 import DaumPostcode from "react-daum-postcode";
-import { useEffect, useRef, useState } from "react";
-import { debounce } from "lodash";
-
 import { Circle, Map, MapMarker } from "react-kakao-maps-sdk";
 
 //도로명 주소 검색
-export const SeacrchBox = ({ title, form, name, getLocation }) => {
+export const SeacrchBox = ({ title, form, name, getLocation, type }) => {
   const mapRef = useRef();
   const [openPostcode, setOpenPostcode] = useState(false);
 
@@ -38,7 +36,10 @@ export const SeacrchBox = ({ title, form, name, getLocation }) => {
 
     // 선택 완료 이벤트
     clickOK: () => {
-      getLocation(markerPosition);
+      if (name === "searchLocation") {
+        getLocation(markerPosition);
+      }
+
       setOpenPostcode(false);
     },
   };

diff --git a/frontend/src/components/missingPersonList/CardView.js b/frontend/src/components/missingPersonList/CardView.js
@@ -17,7 +17,7 @@ export const CardView = ({ data }) => {
     form.setFieldsValue({
       name: data.name,
       birth: data.birthdate,
-      gender: data.gender === "남성" ? "남" : "여",
+      gender: data.gender === "man" ? "남" : "여",
       missingTime: dateForm(data.missingAt),
       missingLocation: data.missingLocation,
     });

diff --git a/frontend/src/components/missingPersonReport/BasicInfo.js b/frontend/src/components/missingPersonReport/BasicInfo.js
@@ -6,13 +6,14 @@ import { InputForm } from "../common/InputForm";
 export const BasicInfo = ({ data }) => {
   const [form] = Form.useForm();
   console.log("BasicInfo", data);
+
   // 실종자 정보 적용
   useEffect(() => {
     console.log("BasicInfo-useEffect", data);
     form.setFieldsValue({
       name: data.missingPeopleName,
       birth: data.birthdate,
-      gender: data.gender,
+      gender: data.gender == "man" ? "남성" : "여성",
       missingTime:
         String(data.missingAt).split("T")[0] +
         " " +
@@ -26,54 +27,9 @@ export const BasicInfo = ({ data }) => {
     });
   }, [data]);
 
-  // 실종자 정보 적용
-  // useEffect(() => {
-  //   form.setFieldsValue({
-  //     name: "홍길동",
-  //     birth: "1999.01.01",
-  //     gender: "남성",
-  //     missingTime: "2021.08.01 12:00" + "경",
-  //     missingLocation: "서울시 강남구",
-  //     guardianName: "김영희",
-  //     relation: "부",
-  //     guardianContact: "010-1234-5678",
-  //     profileImage:
-  //       "https://spring-server-image-storage.s3.ap-northeast-2.amazonaws.com/missingPeopleId=1/profile/001.PNG",
-  //   });
-  // }, []);
-
   /* 실종자 정보 영역 */
   const MissingPersonInfo = () => {
     return (
-      // <InfoContainer>
-      //   <Typography.Title level={5}>실종자 정보</Typography.Title>
-      //   <MissingPersonForm form={form} layout="vertical">
-      //     <Row>
-      //       <Col span={11}>
-      //         {/* <Skeleton.Image active={false} style={{ width: "13rem", height: "16rem" }} /> */}
-      //         {data.profileImage ? (
-      //           <img src={data.profileImage} alt="Profile" style={{ width: "13rem", height: "16rem" }} />
-      //         ) : (
-      //           <Skeleton.Image active={false} style={{ width: "13rem", height: "16rem" }} />
-      //         )}
-      //       </Col>
-      //       <Col span={13}>
-      //         <InputForm label={"성명"} name={"name"} />
-      //         <Row>
-      //           <Col span={16}>
-      //             <InputForm label={"생년월일"} name={"birth"} />
-      //           </Col>
-      //           <Col span={8}>
-      //             <InputForm label={"성별"} name={"gender"} />
-      //           </Col>
-      //         </Row>
-      //         <InputForm label={"실종일시"} name={"missingTime"} />
-      //         <InputForm label={"실종장소"} name={"missingLocation"} />
-      //       </Col>
-      //     </Row>
-      //   </MissingPersonForm>
-      // </InfoContainer>
-
       <InfoContainer>
         <Title>실종자 정보</Title>
         <MissingPersonForm form={form} layout="vertical">
@@ -111,22 +67,6 @@ export const BasicInfo = ({ data }) => {
   /* 보호자 정보 영역 */
   const GuardianInfo = () => {
     return (
-      // <InfoContainer>
-      //   <Typography.Title level={5}>보호자 정보</Typography.Title>
-      //   <InfoForm form={form} layout="vertical">
-      //     <Row>
-      //       <Col span={7}>
-      //         <InputForm label={"보호자명"} name={"guardianName"} />
-      //       </Col>
-      //       <Col span={4}>
-      //         <InputForm label={"관계"} name={"relation"} />
-      //       </Col>
-      //       <Col span={13}>
-      //         <InputForm label={"보호자 연락처"} name={"guardianContact"} />
-      //       </Col>
-      //     </Row>
-      //   </InfoForm>
-      // </InfoContainer>
       <InfoContainer>
         <Title>보호자 정보</Title>
         <InfoForm form={form} layout="vertical">
@@ -143,16 +83,6 @@ export const BasicInfo = ({ data }) => {
   /* 착장정보 영역 */
   const WearingInfo = () => {
     return (
-      // <InfoContainer>
-      //   <Typography.Title level={5}>착장 정보</Typography.Title>
-      //   <InfoForm form={form} layout="vertical">
-      //     <Row>
-      //       <Col span={24}>
-      //         <StyledParagraph>{data.koQuery}</StyledParagraph>
-      //       </Col>
-      //     </Row>
-      //   </InfoForm>
-      // </InfoContainer>
       <InfoContainer>
         <Title>착장 정보</Title>
         <InfoForm form={form} layout="vertical">
@@ -165,16 +95,6 @@ export const BasicInfo = ({ data }) => {
   /* 특이사항 영역 */
   const DescInfo = () => {
     return (
-      // <InfoContainer>
-      //   <Typography.Title level={5}>착장 정보</Typography.Title>
-      //   <InfoForm form={form} layout="vertical">
-      //     <Row>
-      //       <Col span={24}>
-      //         <StyledParagraph>{data.koQuery}</StyledParagraph>
-      //       </Col>
-      //     </Row>
-      //   </InfoForm>
-      // </InfoContainer>
       <InfoContainer>
         <Title>특이사항</Title>
         <InfoForm form={form} layout="vertical">
@@ -271,12 +191,6 @@ const StyledParagraph = styled.p`
   }
 `;
 
-const PersonInfoContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-`;
-
 const ImageContainer = styled.div`
   display: flex;
   width: 14rem;

diff --git a/frontend/src/components/missingPersonReport/IntelligentReportList.js b/frontend/src/components/missingPersonReport/IntelligentReportList.js
@@ -2,7 +2,7 @@ import { Button, Typography } from "antd";
 import styled from "styled-components";
 import { ReportList } from "./ReportList";
 
-export const IntelligentReportList = ({ history, onClick }) => {
+export const IntelligentReportList = ({ history, onClick, handleClickList }) => {
   const MoveButton = ({ onClick }) => {
     return (
       <ButtonContainer onClick={onClick}>
@@ -18,7 +18,7 @@ export const IntelligentReportList = ({ history, onClick }) => {
     <StIntelligentReportList>
       {/* <Title>지능형 탐색</Title> */}
       <MoveButton onClick={onClick} />
-      <ReportList history={history} />
+      <ReportList history={history} handleClickList={handleClickList} />
     </StIntelligentReportList>
   );
 };

diff --git a/frontend/src/components/missingPersonReport/ReportList.js b/frontend/src/components/missingPersonReport/ReportList.js
@@ -10,14 +10,15 @@ const data = [
   "2024-03-14 10:03:12",
 ];
 
-export const ReportList = ({ history }) => {
+export const ReportList = ({ history, handleClickList }) => {
   // const [data, setData] = useState([]);
   // useEffect(() => {
   //   console.log("history data", listData);
   //   setData(listData.map(item => new Date(item.createdAt).toLocaleString()));
   // }, []);
   console.log("history", history);
   const ListItems = ({ item }) => {
+    console.log("item", item);
     return (
       // <ListItemContainer>
       //   <Row gutter={8} justify="space-around">
@@ -32,7 +33,10 @@ export const ReportList = ({ history }) => {
       //     </Col>
       //   </Row>
       // </ListItemContainer>
-      <ListItemContainer>
+      <ListItemContainer
+        onClick={() => {
+          handleClickList(item.searchId);
+        }}>
         <ItemLeft>
           <FileSearchOutlined /> <p>{item.createdAt}</p>
         </ItemLeft>
@@ -106,6 +110,10 @@ const ListItemContainer = styled.div`
   border-radius: 0.5rem;
   background-color: white;
   font-size: 1.4rem;
+  cursor: pointer;
+  &:hover {
+    background-color: #f5f5f5;
+  }
   @media all and (max-width: 1536px) {
     padding: 0.6rem 0.5rem;
 

diff --git a/frontend/src/components/missingPersonReport/ReportMain.js b/frontend/src/components/missingPersonReport/ReportMain.js
@@ -10,11 +10,13 @@ import { ReportResultImages } from "./ReportResultImages";
 export const ReportMain = ({
   data,
   step,
+  stepDetail,
   history,
   firstdata,
   betweenData,
   secondData,
   onClick,
+  handleClickList,
   firstCCTVData,
   betweenCCTVData,
   secondCCTVData,
@@ -42,7 +44,7 @@ export const ReportMain = ({
             <BasicInfo data={data} />
           </Container1>
           <Container2>
-            <IntelligentReportList history={history} onClick={onClick} />
+            <IntelligentReportList history={history} onClick={onClick} handleClickList={handleClickList} />
           </Container2>
         </ContainerLeft>
         <ContainerRight>
@@ -56,7 +58,7 @@ export const ReportMain = ({
               betweenData={betweenCCTVData}
               secondData={secondCCTVData}
             />
-            <StepProgress step={step} />
+            <StepProgress step={step} stepDetail={stepDetail} />
           </Container1>
           <Container2>
             <ReportTabs id={data.id} firstdata={firstdata} betweenData={betweenData} secondData={secondData} />

diff --git a/frontend/src/components/missingPersonReport/StepProgress.js b/frontend/src/components/missingPersonReport/StepProgress.js
@@ -2,8 +2,9 @@ import styled from "styled-components";
 import { useState, useEffect } from "react";
 import { Steps, Typography } from "antd";
 
-export const StepProgress = ({ step }) => {
+export const StepProgress = ({ step, stepDetail }) => {
   const [current, setCurrent] = useState(0);
+  const [detail, setDetail] = useState("");
   const description = "This is a description.";
   const onChange = (value) => {
     console.log("onChange:", value);
@@ -12,6 +13,9 @@ export const StepProgress = ({ step }) => {
   useEffect(() => {
     console.log("step", step);
     setCurrent(step);
+    if (step === 1 || step === 3) {
+      setDetail(stepDetail);
+    }
   }, [step]);
 
   return (
@@ -21,20 +25,21 @@ export const StepProgress = ({ step }) => {
         className="custom-steps"
         direction="vertical"
         current={current}
-        onChange={onChange}
+        // onChange={onChange}
         items={[
           {
             title: "정보 등록",
           },
           {
             title: "1차 탐색",
+            description: current === 1 ? detail : "",
           },
           {
             title: "이미지 선별",
-            description,
           },
           {
             title: "2차 탐색",
+            description: current === 3 ? detail : "",
           },
           {
             title: "수색",
@@ -90,7 +95,7 @@ const Step = styled(Steps)`
       font-size: 1.6rem;
     }
     &.ant-steps .ant-steps-item-description {
-      font-size: 1.4rem;
+      font-size: 1.2rem;
     }
   }
 
@@ -107,7 +112,7 @@ const Step = styled(Steps)`
       font-size: 1.4rem;
     }
     &.ant-steps .ant-steps-item-description {
-      font-size: 1.2rem;
+      font-size: 1.1rem;
     }
     &.ant-steps.ant-steps-vertical > .ant-steps-item > .ant-steps-item-container > .ant-steps-item-tail {
       left: 1rem;

diff --git a/frontend/src/components/reportIntelligent/IntelligentBasicInfo.js b/frontend/src/components/reportIntelligent/IntelligentBasicInfo.js
@@ -26,63 +26,6 @@ export const IntelligentBasicInfo = ({ data }) => {
   }, [data]);
 
   return (
-    // <StIntelligentBasicInfo>
-    //   <Form form={form} layout="vertical">
-    //     <Row gutter={15}>
-    //       <Col span={12}>
-    //         <Row>
-    //           <Col span={24}>
-    //             <Typography.Title level={5}> </Typography.Title>
-    //           </Col>
-    //           <Col span={11}>
-    //             <Skeleton.Image active={false} style={{ width: "13rem", height: "16rem" }} />
-    //           </Col>
-    //           <Col span={13}>
-    //             <Row>
-    //               <Col span={24}>
-    //                 <InputForm label={"성명"} name={"name"} />
-    //               </Col>
-    //               <Col span={17}>
-    //                 <InputForm label={"생년월일"} name={"birth"} />
-    //               </Col>
-    //               <Col span={7}>
-    //                 <InputForm label={"성별"} name={"gender"} />
-    //               </Col>
-    //               <Col span={24}>
-    //                 <InputForm label={"실종일시"} name={"missingTime"} />
-    //               </Col>
-    //               <Col span={24}>
-    //                 <InputForm label={"실종장소"} name={"missingLocation"} />
-    //               </Col>
-    //             </Row>
-    //           </Col>
-    //         </Row>
-    //       </Col>
-    //       <Col span={1}>
-    //         <Divider type="vertical" style={{ height: "100%" }} />
-    //       </Col>
-
-    //       <Col span={10}>
-    //         <Col>
-    //           <Typography.Title level={5}>착장정보</Typography.Title>
-    //         </Col>
-    //         <Col>
-    //           <Skeleton title={false} />
-    //         </Col>
-    //       </Col>
-    //     </Row>
-
-    //     {/* <Col span={11}>
-    //       <Typography.Title
-    //         level={5}
-    //         style={{
-    //           margin: 0,
-    //         }}>
-    //         착장정보
-    //       </Typography.Title>
-    //     </Col> */}
-    //   </Form>
-    // </StIntelligentBasicInfo>
     <StIntelligentBasicInfo>
       <InfoForm form={form}>
         <ImageContainer>