Merge pull request #229 from kookmin-sw/feature/106-1

Feat : 실종자 리포트 반응형 및 UI 수정
kookmin-sw · May 15, 2024 · 6279410 · 6279410
2 parents 48ecd91 + bbaa1bb
commit 6279410
Show file tree

Hide file tree

Showing 23 changed files with 1,686 additions and 416 deletions.
diff --git a/frontend/.env b/frontend/.env
@@ -1 +1 @@
-REACT_APP_API_ROOT=" http://3.38.64.92:8080"
+REACT_APP_API_ROOT="http://3.38.64.92:8080"
diff --git a/frontend/src/components/common/InputForm.js b/frontend/src/components/common/InputForm.js
@@ -1,5 +1,5 @@
-import { Form, Input } from "antd";
 import styled from "styled-components";
+import { Form, Input } from "antd";
 
 export const InputForm = ({ label, name }) => {
   return (
@@ -23,24 +23,64 @@ export const CenterInputForm = ({ label, name }) => {
   );
 };
 
+export const HorizontalInputForm = ({ label, name, lines }) => {
+  return (
+    <StHorizontalInputForm label={label} name={name} colon={false} className="form-custom">
+      {lines ? (
+        <MultiLineInputField
+          variant="borderless"
+          readOnly={true}
+          autoSize={{
+            minRows: 1,
+            maxRows: 3,
+          }}></MultiLineInputField>
+      ) : (
+        <HorizontalInputText variant="borderless" readOnly={true} />
+      )}
+    </StHorizontalInputForm>
+  );
+};
+
 /* 각 정보 input 영역 */
 const StInputForm = styled.div`
   display: flex;
   flex-direction: column;
   height: 3.9rem;
   margin-bottom: 0.6rem;
+  @media (max-width: 1440px) and (min-width: 1367px), (max-width: 1366px) and (min-width: 1281px) {
+    height: 3rem;
+    margin-bottom: 0.4rem;
+  }
+  @media (max-width: 1280px) and (min-width: 0px) {
+    height: 3rem;
+  }
 `;
 const InputItem = styled(Form.Item)`
   padding: 0;
   margin: 0;
   height: 2.2rem;
   min-height: 0rem;
+  &.ant-form-item {
+    min-height: 0rem;
+  }
+  @media (max-width: 1440px) and (min-width: 1367px), (max-width: 1366px) and (min-width: 1281px) {
+    height: 2rem;
+  }
+  @media (max-width: 1280px) and (min-width: 0px) {
+    height: 1.8rem;
+  }
 `;
 
 const InputLabel = styled.span`
   padding-bottom: 0;
   color: #00000060;
   font-size: 1rem;
+  @media (max-width: 1440px) and (min-width: 1367px), (max-width: 1366px) and (min-width: 1281px) {
+    font-size: 0.9rem;
+  }
+  @media (max-width: 1280px) and (min-width: 0px) {
+    font-size: 0.7rem;
+  }
 `;
 
 const InputField = styled(Input)`
@@ -49,8 +89,37 @@ const InputField = styled(Input)`
   font-size: 1.4rem;
   line-height: 2.2rem;
   margin-bottom: 0.6rem;
+  @media (max-width: 1440px) and (min-width: 1367px), (max-width: 1366px) and (min-width: 1281px) {
+    font-size: 1.2rem;
+  }
+  @media (max-width: 1280px) and (min-width: 0px) {
+    font-size: 1rem;
+  }
 `;
 
 const StCenterInputForm = styled(StInputForm)`
   align-items: center;
 `;
+
+const StHorizontalInputForm = styled(Form.Item)`
+  margin: 0;
+  &.form-custom .ant-form-item-label > label {
+    margin: 0;
+    color: #8b8b8b;
+    font-size: 1.5rem;
+  }
+  &.form-custom .ant-form-item-label > label::after {
+    margin: 0;
+  }
+`;
+
+const HorizontalInputText = styled(Input)`
+  padding-left: 0;
+  padding-right: 0;
+  font-size: 1.5rem;
+  font-weight: 500;
+`;
+const MultiLineInputField = styled(Input.TextArea)`
+  padding: 0;
+  font-size: 1.5rem;
+`;
diff --git a/frontend/src/components/common/ResultView.js b/frontend/src/components/common/ResultView.js
@@ -1,35 +1,62 @@
 import styled from "styled-components";
-import { Select, Pagination, Skeleton, List, Card, Col, Row ,Form} from "antd";
-import { useEffect,useState } from "react";
+import { useEffect, useState } from "react";
+import { Select, Pagination, Skeleton, List, Card, Col, Row, Form } from "antd";
+import { SelectOptions } from "./SelectOptions";
+import { getBetweenResultImg, getSearchResultImg } from "../../core/api";
 
-// const data = [
-//   { date: "2024-03-27", time: "17:03:14", accuracy: "0.0000" },
-//   { date: "2024-03-26", time: "17:03:14", accuracy: "0.0000" },
-//   { date: "2024-03-25", time: "17:03:14", accuracy: "0.0000" },
-//   { date: "2024-03-24", time: "17:03:14", accuracy: "0.0000" },
-//   { date: "2024-03-23", time: "17:03:14", accuracy: "0.0000" },
-//   { date: "2024-03-20", time: "17:03:14", accuracy: "0.0000" },
-//   { date: "2024-03-17", time: "17:03:14", accuracy: "0.0000" },
-//   { date: "2024-03-16", time: "17:03:14", accuracy: "0.0000" },
-//   { date: "2024-03-15", time: "17:03:14", accuracy: "0.0000" },
-//   { date: "2024-03-14", time: "17:03:14", accuracy: "0.0000" },
-//   { date: "2024-03-13", time: "17:03:14", accuracy: "0.0000" },
-//   { date: "2024-03-10", time: "17:03:14", accuracy: "0.0000" },
-// ];
-export const ResultView = ({ column, count, dataList}) => {
+export const ResultView = ({ count, dataList, type, id }) => {
   const [data, setData] = useState([]);
-
+  const [dataCount, setDataCount] = useState(0);
+
   useEffect(() => {
-    setData(dataList);
+    if (type === "first") {
+      console.log("useEffect-first");
+      setData(dataList);
+      setDataCount(count);
+    } else {
+      console.log("useEffect-other");
+      fetchData();
+    }
   }, [dataList]);
+
+  const fetchData = () => {
+    if (type === "between") {
+      console.log("between");
+      getBetweenResultImg(1, id).then((res) => {
+        console.log("between", res.data);
+        setData(res.data.list);
+      });
+    } else {
+      getSearchResultImg(1, id, type).then((res) => {
+        console.log("step2data", res.data);
+        setData(res.data.list);
+      });
+    }
+  };
+  const onChangePage = (page) => {
+    if (type === "between") {
+      console.log("between");
+      getBetweenResultImg(page, id).then((res) => {
+        console.log("between", res.data);
+        setData(res.data.list);
+        setDataCount(res.data.count);
+      });
+    } else {
+      getSearchResultImg(page, id, type).then((res) => {
+        console.log("step2data", res.data);
+        setData(res.data.list);
+        setDataCount(res.data.count);
+      });
+    }
+  };
   const Item = ({ item }) => {
     return (
       <ItemContainer>
         {item.imgUrl ? (
-        <img src={item.imgUrl} alt="Image" style={{ width: "7.2rem", height: "11.9rem" }} />
-      ) : (
-        <Skeleton.Image active={false} style={{ width: "7.2rem", height: "11.9rem" }} />
-      )}
+          <ItemImage src={item.imgUrl} alt="Image" />
+        ) : (
+          <Skeleton.Image active={false} style={{ width: "7.2rem", height: "11.9rem" }} />
+        )}
         <p>{item.date}</p>
         <p>{item.time}</p>
         <p>정확도:{item.similarity}</p>
@@ -38,16 +65,17 @@ export const ResultView = ({ column, count, dataList}) => {
   };
   return (
     <StResultView>
-      {/* <MiddleContainer>
-        {data.map((item, idx) => (
-          <Item key={idx} item={item} />
-        ))}
-      </MiddleContainer>
+      <MiddleContainer>{data && data.map((item, idx) => <Item key={idx} item={item} />)}</MiddleContainer>
       <BottomContainer>
-        <Paging size="small" defaultCurrent={1} total={6} />
-      </BottomContainer> */}
-
-      <List
+        <Paging
+          size="small"
+          defaultCurrent={1}
+          defaultPageSize={6}
+          total={dataCount}
+          onChange={(page) => onChangePage(page)}
+        />
+      </BottomContainer>
+      {/* <List
         grid={{
           gutter: 16,
           column: column,
@@ -58,37 +86,33 @@ export const ResultView = ({ column, count, dataList}) => {
           // xl: 8,
           // xxl: 8,
         }}
-        pagination={{
-          onChange: (page) => {
-            console.log(page);
-          },
-          pageSize: count,
-        }}
+        // pagination={{
+        //   onChange: (page) => {
+        //     console.log(page);
+        //   },
+        //   pageSize: count,
+        // }}
         dataSource={data}
         renderItem={(item) => (
           // <List.Item>
           //   <Card title={item.title}>Card content</Card>
           // </List.Item>
           <Item item={item} />
         )}
-      />
-
-      {/* <BottomContainer>
-        <Paging size="small" defaultCurrent={1} total={6} />
-      </BottomContainer> */}
+      /> */}
     </StResultView>
   );
 };
 const StResultView = styled.div`
   display: flex;
   flex-direction: column;
   align-items: space-between;
-  gap: 1.5rem;
 
   width: 100%;
   height: 100%;
   //bottom: 0;
   padding: 0rem 2rem;
+  gap: 1.5rem;
 `;
 
 const MiddleContainer = styled.div`
@@ -117,7 +141,19 @@ const ItemContainer = styled.div`
   margin-top: 0.9rem;
 
   p {
-    font-size: 1rem;
+    @media all and (max-width: 1537px) {
+      font-size: 1rem;
+    }
+    font-size: 1.3rem;
+  }
+`;
+
+const ItemImage = styled.img`
+  width: 14.4rem;
+  height: 23.8rem;
+  @media all and (max-width: 1537px) {
+    width: 7.2rem;
+    height: 11.9rem;
   }
 `;
 

diff --git a/frontend/src/components/common/SearchBox.js b/frontend/src/components/common/SearchBox.js
@@ -55,10 +55,10 @@ const SearchBoxContainer = styled.div`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  width: 40.2rem;
+  width: 40rem;
   height: 3.2rem;
   border: 0.1rem solid #d9d9d9;
-  border-radius: 0.2rem;
+  border-radius: 0.5rem;
 `;
 
 const SearchInput = styled(Input)`

diff --git a/frontend/src/components/common/SelectOptions.js b/frontend/src/components/common/SelectOptions.js
@@ -0,0 +1,41 @@
+import { Select } from "antd";
+import styled from "styled-components";
+
+export const SelectOptions = () => {
+  return (
+    <StSelectOptions>
+      <Options
+        className="custom-select"
+        defaultValue="정확도순"
+        // size="small"
+        style={{
+          width: 120,
+        }}
+        options={[
+          {
+            value: "정확도순",
+            label: "정확도순",
+          },
+          {
+            value: "최근순",
+            label: "최근순",
+          },
+          {
+            value: "오래된순",
+            label: "오래된순",
+          },
+        ]}
+      />
+    </StSelectOptions>
+  );
+};
+
+const StSelectOptions = styled.div``;
+const Options = styled(Select)`
+  &.ant-select .ant-select-selection-item {
+    font-size: 1.3rem;
+  }
+  &.ant-select-single.ant-select .ant-select-selector {
+    padding: 1rem;
+  }
+`;
diff --git a/frontend/src/components/missingPersonList/CardView.js b/frontend/src/components/missingPersonList/CardView.js
@@ -70,7 +70,7 @@ export const CardView = ({ data }) => {
 
   const CardItem = () => {
     return (
-      <Link to={`/report`} state={{ id: missingPeopleId }}>
+      <Link to={`/report`} state={{ userId: missingPeopleId }}>
         <StCardItem form={form} process={status}>
           <Row gutter={[13, 10]}>
             <Col span={8}>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		REACT_APP_API_ROOT=" http://3.38.64.92:8080"
		REACT_APP_API_ROOT="http://3.38.64.92:8080"