Merge pull request #264 from kookmin-sw/feature/203

Feat : 보호자용 화면 action 처리 및 ui 수정
kookmin-sw · May 23, 2024 · 9b780b9 · 9b780b9
2 parents 22401a5 + ef0b7e9
commit 9b780b9
Show file tree

Hide file tree

Showing 12 changed files with 562 additions and 75 deletions.
diff --git a/frontend/src/assets/icons/betweenStepIcon.svg b/frontend/src/assets/icons/betweenStepIcon.svg
diff --git a/frontend/src/assets/icons/findStepIcon.svg b/frontend/src/assets/icons/findStepIcon.svg
diff --git a/frontend/src/assets/icons/searchStepIcon.svg b/frontend/src/assets/icons/searchStepIcon.svg
diff --git a/frontend/src/components/guardianMain/CustomSteps.js b/frontend/src/components/guardianMain/CustomSteps.js
@@ -1,6 +1,9 @@
 import styled from "styled-components";
-import { LoadingOutlined, SmileOutlined, SolutionOutlined, UserOutlined } from "@ant-design/icons";
 import { useEffect, useState } from "react";
+import { LoadingOutlined, SmileOutlined, SolutionOutlined, UserOutlined } from "@ant-design/icons";
+import SearchStepIcon from "../../assets/icons/searchStepIcon.svg";
+import BetweenStepIcon from "../../assets/icons/betweenStepIcon.svg";
+import FindStepIcon from "../../assets/icons/findStepIcon.svg";
 import { StepContents } from "./StepContents";
 export const CustomSteps = ({ currentStep }) => {
   const [current, setCurrent] = useState(0);
@@ -9,16 +12,16 @@ export const CustomSteps = ({ currentStep }) => {
   const [state, setState] = useState("current");
 
   const iconList = [
-    { title: "1차 탐색", icon: <SmileOutlined /> },
-    { title: "이미지 선별", icon: <SmileOutlined /> },
-    { title: "2차 탐색", icon: <SmileOutlined /> },
-    { title: "실종자 수색", icon: <SmileOutlined /> },
+    { title: "1차 탐색", icon: SearchStepIcon },
+    { title: "이미지 선별", icon: BetweenStepIcon },
+    { title: "2차 탐색", icon: SearchStepIcon },
+    { title: "실종자 수색", icon: FindStepIcon },
   ];
 
   useEffect(() => {
     setCurrent(currentStep);
     setView(currentStep);
-  }, []);
+  }, [currentStep]);
 
   const clickItem = (idx) => {
     console.log("clickItem:", idx);
@@ -34,7 +37,9 @@ export const CustomSteps = ({ currentStep }) => {
         {idx != 3 && <StepTail color={idx >= current ? "#E7E7E7" : view == current ? "#1890FF" : "#A9D6FF"}></StepTail>}
         {idx == view ? (
           <IconContainer>
-            <IconWrapper color={idx > current ? "#E7E7E7" : "#1890FF"}></IconWrapper>
+            <IconWrapper color={idx > current ? "#E7E7E7" : "#1890FF"}>
+              <img src={iconList[idx].icon} />
+            </IconWrapper>
           </IconContainer>
         ) : (
           <IconContainer>
@@ -96,11 +101,17 @@ const IconContainer = styled.div`
 const IconWrapper = styled.div`
   display: flex;
   justify-content: center;
+  align-items: center;
   width: 11.5rem;
   height: 11.5rem;
   margin-top: 1.5rem;
   border-radius: 50%;
   background-color: ${(props) => props.color || "#1890FF"};
+
+  img {
+    width: 6rem;
+    height: 6rem;
+  }
 `;
 const DotWrapper = styled.div`
   width: 4rem;

diff --git a/frontend/src/components/guardianMain/StepContents.js b/frontend/src/components/guardianMain/StepContents.js
@@ -22,31 +22,49 @@ export const StepContents = ({ index, current }) => {
       title: "1차 탐색",
       wait: { content: "지능형 탐색을 시작합니다." },
       process: { content: "등록된 정보로 지능형 탐색 중입니다." },
-      finish: { content: "탐색 완료했습니다.", buttonText: "탐색 결과 확인하기", callBack: () => {} },
+      finish: {
+        content: "탐색 완료했습니다.",
+        buttonText: "탐색 결과 확인하기",
+        callBack: () => {
+          navigate("/result", { state: { title: "1차 탐색 결과", step: "first" } });
+        },
+      },
     },
     {
       step: 1,
       title: "탐색 이미지 선별",
       wait: {
         content:
-          "1차 탐색 결과 중 실종자와 유사한 이미지를 선택해주세요. 선택된 이미지는 2차 탐색에 활용되니 신중하고 빠른 선택 부탁드립니다.",
+          "1차 탐색 결과 이미지 중 실종자와 유사한 이미지를 선택해주세요. 선택된 이미지는 2차 탐색에 활용되니 신중한 선택 부탁드립니다.",
       },
       process: {
         content:
-          "1차 탐색 결과 중 실종자와 유사한 이미지를 선택해주세요. 선택된 이미지는 2차 탐색에 활용되니 신중하고 빠른 선택 부탁드립니다.",
+          "1차 탐색 결과 이미지 중 실종자와 유사한 이미지를 선택해주세요. 선택된 이미지는 2차 탐색에 활용되니 신중한 선택 부탁드립니다.",
         buttonText: "이미지 선별하기",
         callBack: () => {
           navigate("/select");
         },
       },
-      finish: { content: "이미지 선택 완료했습니다.", buttonText: "선별 이미지 확인하기", callBack: () => {} },
+      finish: {
+        content: "이미지 선택 완료했습니다.",
+        buttonText: "선별 이미지 확인하기",
+        callBack: () => {
+          navigate("/result", { state: { title: "선별 이미지 확인", step: "between" } });
+        },
+      },
     },
     {
       step: 2,
       title: "2차 탐색",
       wait: { content: "선별된 이미지를 바탕으로 지능형 탐색을 시작합니다." },
       process: { content: "등록된 정보로 지능형 탐색 중입니다." },
-      finish: { content: "탐색 완료했습니다.", buttonText: "탐색 결과 확인하기", callBack: () => {} },
+      finish: {
+        content: "탐색 완료했습니다.",
+        buttonText: "탐색 결과 확인하기",
+        callBack: () => {
+          navigate("/result", { state: { title: "2차 탐색 결과", step: "second" } });
+        },
+      },
     },
     {
       step: 3,
@@ -101,7 +119,7 @@ const StStepContents = styled.div`
   align-items: center;
   gap: 3.5rem;
   margin-top: 4.75rem;
-  width: 75.5rem;
+  width: 77.5rem;
 `;
 const Title = styled.p`
   font-size: 5rem;

diff --git a/frontend/src/components/guardianSelect/AllResultList.js b/frontend/src/components/guardianSelect/AllResultList.js
@@ -1,8 +1,10 @@
 import { List, Image, Button } from "antd";
+import { useState } from "react";
 import styled from "styled-components";
+import { CloseOutlined } from "@ant-design/icons";
 
+/*1차 탐색 결과를 보여주는 리스트 */
 export const AllResultList = ({ onSelect, data, selectedList }) => {
-  console.log("data", data);
   return (
     <StAllResultList>
       <Title>1차 탐색 결과</Title>
@@ -13,30 +15,46 @@ export const AllResultList = ({ onSelect, data, selectedList }) => {
         }}
         dataSource={data}
         renderItem={(item) => (
-          <List.Item>
-            <ItemImage
-              className="custom-image"
-              src={item.imgUrl}
-              select={selectedList.includes(item) ? "true" : "false"}
-              preview={{
-                width: 900,
-
-                toolbarRender: () => (
-                  <BottomContainer>
-                    <BottomButton onClick={() => onSelect(item)}>
-                      {selectedList.includes(item) ? "선택해제" : "선택"}
-                    </BottomButton>
-                  </BottomContainer>
-                ),
-              }}
-            />
-          </List.Item>
+          <ImageItem key={item.imgUrl} item={item} onSelect={onSelect} isSelected={selectedList.includes(item)} />
         )}
       />
     </StAllResultList>
   );
 };
 
+/*각 이미지 아이템 */
+const ImageItem = ({ item, onSelect, isSelected }) => {
+  const [isPreviewVisible, setPreviewVisible] = useState(false);
+
+  return (
+    <List.Item>
+      <ItemImage
+        className="custom-image"
+        src={item.imgUrl}
+        select={isSelected ? "true" : "false"}
+        preview={{
+          width: 900,
+          visible: isPreviewVisible,
+          closeIcon: <CloseOutlined />,
+          onVisibleChange: (visible) => setPreviewVisible(visible),
+          toolbarRender: () => (
+            <BottomContainer onClick={(e) => e.stopPropagation()}>
+              <BottomButton
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onSelect(item);
+                  setPreviewVisible(false);
+                }}>
+                {isSelected ? "선택해제" : "선택"}
+              </BottomButton>
+            </BottomContainer>
+          ),
+        }}
+        onClick={() => setPreviewVisible(true)}
+      />
+    </List.Item>
+  );
+};
 const StAllResultList = styled.div`
   display: flex;
   flex-direction: column;
@@ -70,11 +88,23 @@ const ItemImage = styled(Image)`
     width: 27.5rem;
     height: 45rem;
     border-radius: 2.5rem;
-    border: ${(props) => (props.select == "true" ? "0.8rem solid #0580F1" : "none")};
+    border: ${(props) => (props.select == "true" ? "1rem solid #0580F1" : "none")};
     &.ant-image-preview {
       width: 100%;
       background-color: #fff;
     }
+    &.ant-image-preview-footer {
+      width: 50%;
+      right: 0;
+    }
+  }
+  &.custom-image.ant-image-preview-close > .anticon {
+    width: 60rem;
+    font-size: 60rem;
+  }
+  &.custom-image.ant-image-preview-footer {
+    width: 50%;
+    right: 0;
   }
 `;
 
@@ -90,6 +120,7 @@ const BottomContainer = styled.div`
 const BottomButton = styled(Button)`
   width: 31.5rem;
   height: 12.5rem;
+
   border: none;
   border-radius: 2.5rem;
   background: #0580f1;

diff --git a/frontend/src/components/guardianSelect/SelectImgList.js b/frontend/src/components/guardianSelect/SelectImgList.js
@@ -1,5 +1,5 @@
-import { List, Image, Button, Modal } from "antd";
-import { useState } from "react";
+import { List, Image, Button, Modal, Empty } from "antd";
+import { useEffect, useState } from "react";
 import styled from "styled-components";
 
 export const SelectImgList = ({ onSelect, data }) => {
@@ -11,47 +11,35 @@ export const SelectImgList = ({ onSelect, data }) => {
   const handleClose = () => {
     setOpenPreview(false);
   };
+  useEffect(() => {}, [data]);
 
   return (
     <StSelectImgList>
       <CountText>선택한 이미지({data.length})</CountText>
       <ScrollContainer>
-        {data.map((item) => (
-          <>
+        {data && data.length > 0 ? (
+          data.map((item) => (
             <ImageItem
               key={`select-${item.resultId}`}
               className="custom-image"
               src={item.imgUrl}
               onClick={() => setOpenPreview(true)}
-              preview={false}
-              // preview={{
-              //   width: 900,
-              //   toolbarRender: () => (
-              //     <BottomContainer>
-              //       <BottomButton onClick={() => onSelect(item)}>선택해제</BottomButton>
-              //     </BottomContainer>
-              //   ),
-              // }}
-            />{" "}
-            <PreviewModal
-              key={`preview-${item.resultId}`}
-              className="custom-modal"
-              open={openPreview}
-              centered
-              onCancel={handleClose}
-              footer={<BottomButton onClick={() => onSelect(item)}>선택해제</BottomButton>}
-              closeIcon={null}
-              width={1000}>
-              <PreviewItem
-                key={`preview-i-${item.resultId}`}
-                className="custom-image"
-                src={item.imgUrl}
-                onClick={() => setOpenPreview(true)}
-                preview={false}
-              />{" "}
-            </PreviewModal>
-          </>
-        ))}
+              // preview={false}
+              preview={{
+                width: 900,
+                toolbarRender: () => (
+                  <BottomContainer>
+                    <BottomButton onClick={() => onSelect(item)}>선택해제</BottomButton>
+                  </BottomContainer>
+                ),
+              }}
+            />
+          ))
+        ) : (
+          <EmptyContainer>
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+          </EmptyContainer>
+        )}
       </ScrollContainer>
     </StSelectImgList>
   );
@@ -166,3 +154,11 @@ const BottomButton = styled(Button)`
   line-height: 5.5rem;
   right: 0;
 `;
+const EmptyContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 100%;
+  height: 100%;
+`;