Merge pull request #268 from kookmin-sw/feature/263

Chore : 경찰용 UI 및 자잘한 수정

frontend/src/components/addMisingPerson/WearingInfo.js

@@ -18,6 +18,7 @@ export const WearingInfo = ({ form }) => {
         optionFilterProp="children"
         onChange={(value) => onChange(value, name)}
         options={items}
+        value={form.getFieldValue(name)}
         style={{ width: "14rem" }}
       />
     );

frontend/src/components/common/InputForm.js

@@ -107,6 +107,12 @@ const StHorizontalInputForm = styled(Form.Item)`
     margin: 0;
     color: #8b8b8b;
     font-size: 1.5rem;
+    @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;
+    }
   }
   &.form-custom .ant-form-item-label > label::after {
     margin: 0;
@@ -118,8 +124,20 @@ const HorizontalInputText = styled(Input)`
   padding-right: 0;
   font-size: 1.5rem;
   font-weight: 500;
+  @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 MultiLineInputField = styled(Input.TextArea)`
   padding: 0;
   font-size: 1.5rem;
+  @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;
+  }
 `;

frontend/src/components/common/Nav.js

@@ -1,9 +1,12 @@
-import React, { useState } from "react";
 import styled from "styled-components";
-import { DesktopOutlined, TeamOutlined, UserOutlined } from "@ant-design/icons";
+import React, { useState } from "react";
+import { Outlet, Link, useLocation } from "react-router-dom";
 import { Layout, Menu } from "antd";
+import { DesktopOutlined, TeamOutlined, UserOutlined } from "@ant-design/icons";
+import Logo from "../../assets/icons/logo_w.svg";
+import LogoSmall from "../../assets/icons/logo_bee_w.svg";
 const { Sider } = Layout;
-import { Outlet, Link, useLocation } from "react-router-dom";
+
 function getItem(label, key, icon, children) {
   return {
     key,
@@ -21,6 +24,7 @@ const items = [
 
 const Nav = () => {
   const [collapsed, setCollapsed] = useState(false);
+
   const selectedKey = useLocation().pathname;
 
   const currentKey = () => {
@@ -44,7 +48,7 @@ const Nav = () => {
         minHeight: "100vh",
       }}>
       <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
-        <DemoLogo />
+        <LogoContainer>{collapsed ? <LogoSmallWrapper src={LogoSmall} /> : <LogoWrapper src={Logo} />} </LogoContainer>
         <Menu theme="dark" defaultSelectedKeys={["1"]} mode="inline" items={items} selectedKeys={currentKey()} />
       </Sider>
       <Layout>
@@ -55,8 +59,15 @@ const Nav = () => {
 };
 export default Nav;
 
-const DemoLogo = styled.div`
-  height: 32px;
-  background: rgba(255, 255, 255, 0.2);
-  margin: 16px;
+const LogoContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin: 1.6rem;
+`;
+const LogoWrapper = styled.img`
+  width: 15rem;
+`;
+const LogoSmallWrapper = styled.img`
+  width: 2rem;
+  height: 2rem;
 `;

frontend/src/components/missingPersonList/CardView.js

@@ -131,6 +131,7 @@ const StCardItem = styled(Form)`
   background: ${(props) => (props.process === "searching" ? "#E5F3FF" : "#F9FCFF")};
   border: ${(props) => (props.process === "searching" ? "0.1rem solid #E5F3FF" : "0.1rem solid #dfe9f3")};
   border-radius: 1rem;
+  cursor: pointer;
   /* &:hover {
     width: 32.1rem;
     height: 20.1rem;

frontend/src/components/missingPersonReport/BasicInfo.js

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { useEffect } from "react";
-import { Typography, Image, Skeleton, Form, Input, Row, Col } from "antd";
+import { Typography, Image, Skeleton, Form, Input, Row, Col, Divider } from "antd";
 import { InputForm } from "../common/InputForm";
 
 export const BasicInfo = ({ data }) => {
@@ -24,6 +24,7 @@ export const BasicInfo = ({ data }) => {
       relation: data.relationship,
       guardianContact: data.phoneNumber,
       koQuery: data.koQuery, //착장정보 한국어
+      description: data.description, //특이사항
     });
   }, [data]);
 
@@ -98,7 +99,7 @@ export const BasicInfo = ({ data }) => {
       <InfoContainer>
         <Title>특이사항</Title>
         <InfoForm form={form} layout="vertical">
-          <StyledParagraph>{data.koQuery}</StyledParagraph>
+          <StyledParagraph>{data.description}</StyledParagraph>
         </InfoForm>
       </InfoContainer>
     );
@@ -107,9 +108,10 @@ export const BasicInfo = ({ data }) => {
   return (
     <StBasicInfo>
       <MissingPersonInfo />
-      <GuardianInfo />
       <WearingInfo />
       <DescInfo />
+      <CustomDevider />
+      <GuardianInfo />
     </StBasicInfo>
   );
 };
@@ -235,3 +237,8 @@ const GuardianContentsContainer = styled.div`
   flex-direction: row;
   justify-content: space-between;
 `;
+
+const CustomDevider = styled(Divider)`
+  margin: 1rem 0;
+  color: #cacaca;
+`;

frontend/src/components/missingPersonReport/IntelligentReportList.js

@@ -1,16 +1,21 @@
 import { Button, Typography } from "antd";
 import styled from "styled-components";
 import { ReportList } from "./ReportList";
+// import AddSearchBtnImg from "../../assets/images/addSearchButtonImg.svg";
+import AddSearchBtnImg from "../../assets/images/buttonImg.svg";
 
 export const IntelligentReportList = ({ history, onClick, handleClickList }) => {
   const MoveButton = ({ onClick }) => {
     return (
       <ButtonContainer onClick={onClick}>
         <ButtonContents>
           <ButtonTitle>지능형 탐색 시작하기</ButtonTitle>
-          <ButtonDescription>조건을 입력하여 추가적으로 지능형 탐색을</ButtonDescription>
-          <ButtonDescription>진행할 수 있습니다.</ButtonDescription>
+          <ButtonDescription>조건을 입력하여 추가적으로</ButtonDescription>
+          <ButtonDescription>지능형 탐색을 진행할 수 있습니다.</ButtonDescription>
         </ButtonContents>
+        <ImageContainer>
+          <ButtonImage src={AddSearchBtnImg} />
+        </ImageContainer>
       </ButtonContainer>
     );
   };
@@ -43,29 +48,46 @@ const Title = styled.p`
   }
 `;
 
-const ButtonContainer = styled(Button)`
+const ButtonContainer = styled.div`
   display: flex;
   flex-direction: row;
   width: 100%;
   height: 11.5rem;
-  border-radius: 0.5rem;
-  background-color: white;
+
+  position: relative;
+  padding: 0;
+  margin-bottom: 1rem;
+  background-color: none;
+
   @media all and (max-width: 1500px) {
     height: 9rem;
   }
+
+  &:hover {
+    cursor: pointer;
+  }
 `;
 
 const ButtonContents = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
+  width: 100%;
   height: 100%;
+  padding: 0rem 0 0 2rem;
+  margin-top: 1rem;
+  background-color: white;
+  border-radius: 0.5rem;
+
+  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
 `;
 
 const ButtonTitle = styled.p`
   font-size: 1.6rem;
-  @media all and (max-width: 1500px) {
+  color: #1677ff;
+  line-height: 1.5;
+  @media all and (max-width: 1600px) {
     font-size: 1.4rem;
   }
 `;
@@ -74,7 +96,30 @@ const ButtonDescription = styled.p`
   font-size: 1.2rem;
   white-space: pre-line;
   color: #686767;
-  @media all and (max-width: 1500px) {
+  line-height: 1.5;
+  @media all and (max-width: 1600px) {
     font-size: 1rem;
   }
 `;
+const ImageContainer = styled.div`
+  display: flex;
+  justify-content: end;
+  /* align-items: end; */
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  /* padding-bottom: 1rem; */
+  /* padding-right: 6rem; */
+  @media all and (max-width: 1600px) {
+    padding-top: 1rem;
+  }
+`;
+
+const ButtonImage = styled.img`
+  width: 24rem;
+  height: 10rem;
+  @media all and (max-width: 1600px) {
+    width: 12rem;
+    height: 8rem;
+  }
+`;

frontend/src/components/reportIntelligent/IntelligentBasicInfo.js

@@ -27,6 +27,7 @@ export const IntelligentBasicInfo = ({ data }) => {
 
   return (
     <StIntelligentBasicInfo>
+      <Title>실종자 정보</Title>
       <InfoForm form={form}>
         <ImageContainer>
           {data.profileImage ? (
@@ -69,8 +70,19 @@ const StIntelligentBasicInfo = styled.div`
   padding: 2rem;
   border-radius: 1.5rem;
   background-color: white;
+  @media all and (max-width: 1536px) {
+    padding: 1rem 2rem;
+  }
+`;
+const Title = styled.p`
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  font-size: 1.8rem;
+  font-weight: 600;
+  @media all and (max-width: 1500px) {
+    font-size: 1.3rem;
+  }
 `;
-
 const InfoForm = styled(Form)`
   display: flex;
   flex-direction: row;
@@ -96,19 +108,26 @@ const ImageWrapper = styled(Image)`
     height: 17rem;
     object-fit: cover;
 
-    @media all and (max-width: 1536px) {
-      width: 12rem;
-      height: 15rem;
-      object-fit: cover;
+    @media (max-width: 1440px) and (min-width: 1367px), (max-width: 1366px) and (min-width: 1281px) {
+      width: 11.2rem;
+      height: 13.6rem;
+    }
+    @media (max-width: 1280px) and (min-width: 0px) {
+      width: 9.8rem;
+      height: 11.8rem;
     }
   }
-  &.custom-image.ant-imag {
+  &.custom-image.ant-image {
     width: 14rem;
     height: 17rem;
-    @media all and (max-width: 1536px) {
-      width: 12rem;
-      height: 15rem;
-      object-fit: cover;
+
+    @media (max-width: 1440px) and (min-width: 1367px), (max-width: 1366px) and (min-width: 1281px) {
+      width: 11.2rem;
+      height: 13.6rem;
+    }
+    @media (max-width: 1280px) and (min-width: 0px) {
+      width: 9.8rem;
+      height: 11.8rem;
     }
   }
 `;

frontend/src/components/reportIntelligent/IntelligentSearchBox.js

@@ -125,29 +125,54 @@ const SearchBoxContainer = styled.div`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  width: 40.5rem;
-  height: 3.2rem;
+  width: 42.5rem;
+  height: 4.2rem;
   border: 0.1rem solid #d9d9d9;
   border-radius: 0.5rem;
-  @media (max-width: 1440px) and (min-width: 1367px), (max-width: 1366px) and (min-width: 1281px) {
-    width: 32.5rem;
+
+  @media (max-width: 1600px) and (min-width: 1401px) {
+    width: 36rem;
+    height: 3.5rem;
   }
-  @media (max-width: 1280px) and (min-width: 0px) {
-    width: 32.5rem;
+
+  @media (max-width: 1400px) and (min-width: 1301px) {
+    width: 30.5rem;
+    height: 3.5rem;
+  }
+  @media (max-width: 1300px) and (min-width: 1280px) {
+    width: 28.5rem;
+    height: 3rem;
   }
 `;
 
 const SearchInput = styled(Input)`
   display: flex;
   width: 34rem;
   font-size: 1.6rem;
-  @media (max-width: 1440px) and (min-width: 1367px), (max-width: 1366px) and (min-width: 1281px) {
+  /* @media (max-width: 1440px) and (min-width: 1367px), (max-width: 1366px) and (min-width: 1281px) {
     width: 30rem;
     font-size: 1.2rem;
   }
   @media (max-width: 1280px) and (min-width: 0px) {
     width: 30rem;
     font-size: 1.2rem;
+  } */
+
+  @media (max-width: 1600px) and (min-width: 1401px) {
+    width: 27rem;
+    height: 3.5rem;
+    font-size: 1.2rem;
+  }
+
+  @media (max-width: 1400px) and (min-width: 1301px) {
+    width: 27rem;
+    height: 3.5rem;
+    font-size: 1.2rem;
+  }
+  @media (max-width: 1300px) and (min-width: 1280px) {
+    width: 26rem;
+    height: 3rem;
+    font-size: 1.2rem;
   }
 `;