From 8f256c6449e5ec51d9ede184f8e5b76c2ce453e0 Mon Sep 17 00:00:00 2001 From: AnCha Date: Wed, 22 May 2024 14:50:21 +0900 Subject: [PATCH 01/13] =?UTF-8?q?Chore=20:=20=EB=B3=B4=ED=98=B8=EC=9E=90?= =?UTF-8?q?=EC=9A=A9=20=ED=99=94=EB=A9=B4=20header=20=EC=A0=9C=EA=B1=B0=20?= =?UTF-8?q?#203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/GuardianMainPage.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/GuardianMainPage.js b/frontend/src/pages/GuardianMainPage.js index 8241b32c06..51ea4b9979 100644 --- a/frontend/src/pages/GuardianMainPage.js +++ b/frontend/src/pages/GuardianMainPage.js @@ -26,6 +26,7 @@ function GuardianMainPage() { //실종자 진행현황 가져오기 getGuardianMissingPersonStep().then((data) => { + console.log("step:", data.step); switch (data.step) { case "FIRST": setStep(0); @@ -47,9 +48,9 @@ function GuardianMainPage() { return ( - + {/* - + */} @@ -74,6 +75,7 @@ function GuardianMainPage() { export default GuardianMainPage; const StGuardianMainPage = styled(Layout)` + padding-top: 3rem; background-color: white; `; const MainHeader = styled(Header)` @@ -97,6 +99,7 @@ const ProfileSection = styled(Form)` align-items: center; justify-content: center; width: 100%; + margin-bottom: 5rem; `; const FloatButtonContainer = styled(FloatButton)` From c3a3983b3159cd784d0882a67925becd872e6119 Mon Sep 17 00:00:00 2001 From: AnCha Date: Wed, 22 May 2024 14:50:52 +0900 Subject: [PATCH 02/13] =?UTF-8?q?Chore=20:=20=EC=9D=B4=EB=AF=B8=EC=A7=80?= =?UTF-8?q?=EC=84=A0=EB=B3=84=20=EC=84=A4=EB=AA=85=20=ED=85=8D=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EC=88=98=EC=A0=95=20#203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/guardianMain/StepContents.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/guardianMain/StepContents.js b/frontend/src/components/guardianMain/StepContents.js index 6761bb9586..782421087f 100644 --- a/frontend/src/components/guardianMain/StepContents.js +++ b/frontend/src/components/guardianMain/StepContents.js @@ -29,11 +29,11 @@ export const StepContents = ({ index, current }) => { title: "탐색 이미지 선별", wait: { content: - "1차 탐색 결과 중 실종자와 유사한 이미지를 선택해주세요. 선택된 이미지는 2차 탐색에 활용되니 신중하고 빠른 선택 부탁드립니다.", + "1차 탐색 결과 이미지 중 실종자와 유사한 이미지를 선택해주세요. 선택된 이미지는 2차 탐색에 활용되니 신중한 선택 부탁드립니다.", }, process: { content: - "1차 탐색 결과 중 실종자와 유사한 이미지를 선택해주세요. 선택된 이미지는 2차 탐색에 활용되니 신중하고 빠른 선택 부탁드립니다.", + "1차 탐색 결과 이미지 중 실종자와 유사한 이미지를 선택해주세요. 선택된 이미지는 2차 탐색에 활용되니 신중한 선택 부탁드립니다.", buttonText: "이미지 선별하기", callBack: () => { navigate("/select"); @@ -101,7 +101,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; From 98384871d04ff6cab2c1c98fb425a3873044b558 Mon Sep 17 00:00:00 2001 From: AnCha Date: Wed, 22 May 2024 14:51:16 +0900 Subject: [PATCH 03/13] =?UTF-8?q?Chore=20:=20step=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20=EC=B6=94=EA=B0=80=20#203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/icons/betweenStepIcon.svg | 6 +++++ frontend/src/assets/icons/findStepIcon.svg | 3 +++ frontend/src/assets/icons/searchStepIcon.svg | 3 +++ .../components/guardianMain/CustomSteps.js | 23 ++++++++++++++----- 4 files changed, 29 insertions(+), 6 deletions(-) create mode 100644 frontend/src/assets/icons/betweenStepIcon.svg create mode 100644 frontend/src/assets/icons/findStepIcon.svg create mode 100644 frontend/src/assets/icons/searchStepIcon.svg diff --git a/frontend/src/assets/icons/betweenStepIcon.svg b/frontend/src/assets/icons/betweenStepIcon.svg new file mode 100644 index 0000000000..2e48b79198 --- /dev/null +++ b/frontend/src/assets/icons/betweenStepIcon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/src/assets/icons/findStepIcon.svg b/frontend/src/assets/icons/findStepIcon.svg new file mode 100644 index 0000000000..f238bb768a --- /dev/null +++ b/frontend/src/assets/icons/findStepIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/icons/searchStepIcon.svg b/frontend/src/assets/icons/searchStepIcon.svg new file mode 100644 index 0000000000..fe14d37615 --- /dev/null +++ b/frontend/src/assets/icons/searchStepIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/components/guardianMain/CustomSteps.js b/frontend/src/components/guardianMain/CustomSteps.js index fe84a5b081..8469eb8b64 100644 --- 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,10 +12,10 @@ export const CustomSteps = ({ currentStep }) => { const [state, setState] = useState("current"); const iconList = [ - { title: "1차 탐색", icon: }, - { title: "이미지 선별", icon: }, - { title: "2차 탐색", icon: }, - { title: "실종자 수색", icon: }, + { title: "1차 탐색", icon: SearchStepIcon }, + { title: "이미지 선별", icon: BetweenStepIcon }, + { title: "2차 탐색", icon: SearchStepIcon }, + { title: "실종자 수색", icon: FindStepIcon }, ]; useEffect(() => { @@ -34,7 +37,9 @@ export const CustomSteps = ({ currentStep }) => { {idx != 3 && = current ? "#E7E7E7" : view == current ? "#1890FF" : "#A9D6FF"}>} {idx == view ? ( - current ? "#E7E7E7" : "#1890FF"}> + current ? "#E7E7E7" : "#1890FF"}> + + ) : ( @@ -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; From c91898b033100f62362b1f46044e9b1513b2dfbb Mon Sep 17 00:00:00 2001 From: AnCha Date: Wed, 22 May 2024 15:35:14 +0900 Subject: [PATCH 04/13] =?UTF-8?q?Chore=20:=20step=20=EA=B0=B1=EC=8B=A0=20#?= =?UTF-8?q?203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/guardianMain/CustomSteps.js | 2 +- frontend/src/pages/GuardianMainPage.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/guardianMain/CustomSteps.js b/frontend/src/components/guardianMain/CustomSteps.js index 8469eb8b64..4319f9b5c3 100644 --- a/frontend/src/components/guardianMain/CustomSteps.js +++ b/frontend/src/components/guardianMain/CustomSteps.js @@ -21,7 +21,7 @@ export const CustomSteps = ({ currentStep }) => { useEffect(() => { setCurrent(currentStep); setView(currentStep); - }, []); + }, [currentStep]); const clickItem = (idx) => { console.log("clickItem:", idx); diff --git a/frontend/src/pages/GuardianMainPage.js b/frontend/src/pages/GuardianMainPage.js index 51ea4b9979..62b2be1a58 100644 --- a/frontend/src/pages/GuardianMainPage.js +++ b/frontend/src/pages/GuardianMainPage.js @@ -26,7 +26,7 @@ function GuardianMainPage() { //실종자 진행현황 가져오기 getGuardianMissingPersonStep().then((data) => { - console.log("step:", data.step); + console.log("getGuardianMissingPersonStep:", data.step); switch (data.step) { case "FIRST": setStep(0); @@ -41,7 +41,7 @@ function GuardianMainPage() { setStep(3); break; default: - setStep(1); + setStep(0); } }); }, []); From 73b55c3042213183304800fd0714ec2ff8435172 Mon Sep 17 00:00:00 2001 From: AnCha Date: Wed, 22 May 2024 19:48:21 +0900 Subject: [PATCH 05/13] =?UTF-8?q?Feat=20:=20=EB=AA=A8=EB=8B=AC=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20#203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/GuardianSelectImgPage.js | 184 +++++++++++++++++++- 1 file changed, 182 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/GuardianSelectImgPage.js b/frontend/src/pages/GuardianSelectImgPage.js index 90da4d7c41..7c3da31951 100644 --- a/frontend/src/pages/GuardianSelectImgPage.js +++ b/frontend/src/pages/GuardianSelectImgPage.js @@ -1,9 +1,11 @@ import styled from "styled-components"; import { SelectImgList } from "../components/guardianSelect/SelectImgList"; import { useEffect, useState } from "react"; +import { CloseOutlined } from "@ant-design/icons"; import { AllResultList } from "../components/guardianSelect/AllResultList"; -import { Button } from "antd"; +import { Button, Modal } from "antd"; import { getGuardianSelectImage, postGuardianSelectImage } from "../core/api"; +import Icon from "@ant-design/icons/lib/components/Icon"; // 더미 데이터 const dummyData = [ @@ -83,6 +85,8 @@ function GuardianSelectImgPage() { const [selectedImg, setSelectedImg] = useState([]); const [selctedImgId, setSelectedImgId] = useState([]); const [data, setData] = useState([]); + const [isCancelModalOpen, setIsCancelModalOpen] = useState(false); + const [isSubmitModalOpen, setIsSubmitModalOpen] = useState(false); useEffect(() => { getGuardianSelectImage().then((data) => { @@ -100,6 +104,34 @@ function GuardianSelectImgPage() { }); }; + const handleClose = { + // 버튼 클릭 이벤트 + showModal: () => { + setIsCancelModalOpen(true); + }, + + selectOK: () => { + setIsCancelModalOpen(false); + }, + selectCancel: () => { + setIsCancelModalOpen(false); + }, + }; + + const handleSubmit = { + // 버튼 클릭 이벤트 + showModal: () => { + setIsSubmitModalOpen(true); + }, + + selectOK: () => { + setIsSubmitModalOpen(false); + }, + selectCancel: () => { + setIsSubmitModalOpen(false); + }, + }; + const onFinish = () => { const value = [ selectedImg.map((item) => { @@ -113,11 +145,39 @@ function GuardianSelectImgPage() { return ( + + handleClose.showModal()}> + + + 탐색 이미지 선별 + - onFinish()}>제출 + handleSubmit.showModal()}>제출 + + +

중단하면 선택했던 이미지 정보는 삭제됩니다.

+ + +

제출 후에는 선택한 이미지를 변경할 수 없어요.

+ ); } @@ -132,6 +192,48 @@ const StGuardianSelectImgPage = styled.div` height: 100vh; `; +const HeaderContainer = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + height: 12.5rem; + top: 0; + + padding: 0 5rem; + + background-color: white; +`; + +const CloseButton = styled.div` + display: flex; + justify-content: center; + align-items: center; + width: 11rem; + height: 11rem; + + &:hover { + background-color: #f2f2f2; + border-radius: 2rem; + } +`; + +const CloseIcon = styled(Icon)` + font-size: 5rem; +`; + +const Title = styled.div` + display: flex; + justify-content: center; + align-items: center; + width: 100%; + font-size: 5.5rem; + font-weight: 600; + color: black; + margin-right: 5rem; +`; + const BottomContainer = styled.div` display: flex; flex-direction: row; @@ -156,3 +258,81 @@ const BottomButton = styled(Button)` font-weight: 500; line-height: 5.5rem; `; + +const ModalContainer = styled(Modal)` + &.custom-modal { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 0; + } + + &.ant-modal .ant-modal-content { + display: flex; + flex-direction: column; + align-items: center; + height: 57.5rem; + min-width: 86.5rem; + max-width: 125rem; + min-height: 57.5rem; + max-height: 75rem; + + margin-bottom: 60rem; + padding: 4rem 4.5rem; + + box-shadow: none; + border-radius: 5rem; + } + + &.ant-modal .ant-modal-body { + width: 100%; + padding: 0; + display: flex; + justify-content: center; + width: 48rem; + margin-bottom: 7rem; + p { + font-size: 3.75rem; + font-style: normal; + font-weight: 400; + line-height: 140%; + text-align: center; + word-break: keep-all; + } + } + + &.ant-modal .ant-modal-title { + width: 45rem; + margin-bottom: 2.5rem; + font-size: 5rem; + font-style: normal; + font-weight: 600; + line-height: 140%; + text-align: center; + word-break: keep-all; + } + + &.ant-modal .ant-modal-footer { + display: flex; + justify-content: space-around; + align-items: center; + width: 100%; + } + &.ant-modal .ant-modal-footer .ant-btn { + width: 35rem; + height: 12.5rem; + border-radius: 2.5rem; + span { + font-size: 4rem; + font-style: normal; + font-weight: 500; + line-height: 5.5rem; + } + } + + &.ant-modal .ant-modal-footer .ant-btn-default { + background: #dedede; + } +`; From 6b99bbc5551328e3348151eec1fc5b10b9b6d149 Mon Sep 17 00:00:00 2001 From: AnCha Date: Wed, 22 May 2024 20:18:34 +0900 Subject: [PATCH 06/13] =?UTF-8?q?Chore=20:=20=EB=AA=A8=EB=8B=AC=20?= =?UTF-8?q?=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=B2=98=EB=A6=AC=20#203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/GuardianSelectImgPage.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/src/pages/GuardianSelectImgPage.js b/frontend/src/pages/GuardianSelectImgPage.js index 7c3da31951..26f78ad165 100644 --- a/frontend/src/pages/GuardianSelectImgPage.js +++ b/frontend/src/pages/GuardianSelectImgPage.js @@ -6,6 +6,7 @@ import { AllResultList } from "../components/guardianSelect/AllResultList"; import { Button, Modal } from "antd"; import { getGuardianSelectImage, postGuardianSelectImage } from "../core/api"; import Icon from "@ant-design/icons/lib/components/Icon"; +import { useNavigate } from "react-router-dom"; // 더미 데이터 const dummyData = [ @@ -82,6 +83,7 @@ const dummyData = [ ]; function GuardianSelectImgPage() { + const navigate = useNavigate(); const [selectedImg, setSelectedImg] = useState([]); const [selctedImgId, setSelectedImgId] = useState([]); const [data, setData] = useState([]); @@ -112,6 +114,7 @@ function GuardianSelectImgPage() { selectOK: () => { setIsCancelModalOpen(false); + navigate("/m"); }, selectCancel: () => { setIsCancelModalOpen(false); @@ -126,6 +129,7 @@ function GuardianSelectImgPage() { selectOK: () => { setIsSubmitModalOpen(false); + onFinish(); }, selectCancel: () => { setIsSubmitModalOpen(false); @@ -156,7 +160,6 @@ function GuardianSelectImgPage() { handleSubmit.showModal()}>제출 - Date: Thu, 23 May 2024 04:08:09 +0900 Subject: [PATCH 07/13] =?UTF-8?q?Feat=20:=20=ED=83=90=EC=83=89=20=EA=B2=B0?= =?UTF-8?q?=EA=B3=BC=20=ED=99=95=EC=9D=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20#203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/guardianMain/StepContents.js | 24 ++- frontend/src/core/api/index.js | 71 +++++++- frontend/src/core/router.js | 3 +- frontend/src/pages/GuardianShowResultPage.js | 153 ++++++++++++++++++ 4 files changed, 242 insertions(+), 9 deletions(-) create mode 100644 frontend/src/pages/GuardianShowResultPage.js diff --git a/frontend/src/components/guardianMain/StepContents.js b/frontend/src/components/guardianMain/StepContents.js index 782421087f..73fcffad72 100644 --- a/frontend/src/components/guardianMain/StepContents.js +++ b/frontend/src/components/guardianMain/StepContents.js @@ -22,7 +22,13 @@ 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, @@ -39,14 +45,26 @@ export const StepContents = ({ index, current }) => { 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, diff --git a/frontend/src/core/api/index.js b/frontend/src/core/api/index.js index 81bf2da72c..b9e7ccb788 100644 --- a/frontend/src/core/api/index.js +++ b/frontend/src/core/api/index.js @@ -206,7 +206,9 @@ export const getGuardianMissingPerson = async () => { { headers: { - Authorization: `${getCookie("authToken")}`, + // Authorization: `${getCookie("authToken")}`, + Authorization: `${process.env.REACT_APP_TOKEN}`, + "Content-Type": "application/json", }, }, @@ -232,7 +234,9 @@ export const getGuardianMissingPersonStep = async () => { { headers: { - Authorization: `${getCookie("authToken")}`, + // Authorization: `${getCookie("authToken")}`, + Authorization: `${process.env.REACT_APP_TOKEN}`, + "Content-Type": "application/json", }, }, @@ -259,7 +263,8 @@ export const postProfileImg = async (value) => { { headers: { - Authorization: `${getCookie("authToken")}`, + // Authorization: `${getCookie("authToken")}`, + Authorization: `${process.env.REACT_APP_TOKEN}`, "Content-Type": "multipart/form-data", }, }, @@ -285,7 +290,8 @@ export const getGuardianSelectImage = async () => { { headers: { - Authorization: `${getCookie("authToken")}`, + // Authorization: `${getCookie("authToken")}`, + Authorization: `${process.env.REACT_APP_TOKEN}`, "Content-Type": "application/json", }, }, @@ -311,7 +317,8 @@ export const postGuardianSelectImage = async (value) => { { resultIds: value[0] }, { headers: { - Authorization: `${getCookie("authToken")}`, + // Authorization: `${getCookie("authToken")}`, + Authorization: `${process.env.REACT_APP_TOKEN}`, "Content-Type": "application/json", }, }, @@ -328,3 +335,57 @@ export const postGuardianSelectImage = async (value) => { }); return data; }; + +/*의뢰인용 탐색 결과 보여주기 - 선별된 이미지 (Get) */ +export const getGuardianSelectedResult = async () => { + const data = axios + .get( + `${process.env.REACT_APP_API_ROOT}/api/guardian/between-result`, + + { + headers: { + // Authorization: `${getCookie("authToken")}`, + Authorization: `${process.env.REACT_APP_TOKEN}`, + "Content-Type": "application/json", + }, + }, + ) + .then(function (response) { + console.log("response:", response.data); + return response.data.data; + }) + .catch(function (e) { + // 실패 시 처리 + console.error(e); + console.log(e.response.data); + alert("선별된 이미지 가져오기 실패."); + }); + return data; +}; + +/*의뢰인용 탐색 결과 보여주기 - 2차 탐색 이미지 (Get) */ +export const getGuardianSecondResult = async () => { + const data = axios + .get( + `${process.env.REACT_APP_API_ROOT}/api/guardian/second`, + + { + headers: { + // Authorization: `${getCookie("authToken")}`, + Authorization: `${process.env.REACT_APP_TOKEN}`, + "Content-Type": "application/json", + }, + }, + ) + .then(function (response) { + console.log("response:", response.data); + return response.data.data; + }) + .catch(function (e) { + // 실패 시 처리 + console.error(e); + console.log(e.response.data); + alert("2차 탐색 결과 가져오기 실패."); + }); + return data; +}; diff --git a/frontend/src/core/router.js b/frontend/src/core/router.js index 7b4ddd5600..84fe677781 100644 --- a/frontend/src/core/router.js +++ b/frontend/src/core/router.js @@ -6,7 +6,7 @@ import MissingPersonReportPage from "../pages/MissingPersonReportPage"; import MissingPersonListPage from "../pages/MissingPersonListPage"; import GuardianMainPage from "../pages/GuardianMainPage"; import GuardianSelectImgPage from "../pages/GuardianSelectImgPage"; - +import GuardianShowResultPage from "../pages/GuardianShowResultPage"; function Router() { return ( @@ -20,6 +20,7 @@ function Router() { } /> } /> + } /> ); diff --git a/frontend/src/pages/GuardianShowResultPage.js b/frontend/src/pages/GuardianShowResultPage.js new file mode 100644 index 0000000000..33359ed373 --- /dev/null +++ b/frontend/src/pages/GuardianShowResultPage.js @@ -0,0 +1,153 @@ +import { Image, List } from "antd"; +import styled from "styled-components"; +import { CloseOutlined } from "@ant-design/icons"; + +import Icon from "@ant-design/icons/lib/components/Icon"; +import { getGuardianSecondResult, getGuardianSelectImage, getGuardianSelectedResult } from "../core/api"; +import { useEffect, useState } from "react"; +import { useLocation } from "react-router-dom"; + +function GuardianShowResultPage() { + const location = useLocation(); + + const [data, setData] = useState([]); + const handleClose = () => { + window.history.back(); + }; + + useEffect(() => { + fetchData(); + }, []); + + useEffect(() => {}, [data]); + + const fetchData = () => { + if (location.state.step === "first") { + getGuardianSelectImage().then((res) => { + console.log("res", res); + setData(res); + }); + } else if (location.state.step === "second") { + getGuardianSecondResult().then((res) => { + setData(res); + }); + } else { + getGuardianSelectedResult().then((res) => { + setData(res); + }); + } + }; + return ( + + + handleClose()}> + + + {location.state.title} + + + ( + + + + )} + /> + + + ); +} +export default GuardianShowResultPage; + +const StGuardianShowResultPage = styled.div` + display: flex; + flex-direction: column; + width: 100%; + height: 100vh; + overflow: hidden; +`; +const HeaderContainer = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + height: 14rem; + top: 0; + + padding: 2rem 5rem; + + background-color: white; +`; + +const CloseButton = styled.div` + display: flex; + justify-content: center; + align-items: center; + width: 11rem; + height: 11rem; + + &:hover { + background-color: #f2f2f2; + border-radius: 2rem; + } +`; + +const CloseIcon = styled(Icon)` + font-size: 5rem; +`; + +const Title = styled.div` + display: flex; + justify-content: center; + align-items: center; + width: 100%; + font-size: 5.5rem; + font-weight: 600; + color: black; + margin-right: 5rem; +`; + +const ContentsContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + padding: 0 5rem; + background-color: white; + border-radius: 1rem; +`; +const ListContainer = styled(List)` + width: 100%; + height: 100%; + overflow-y: auto; + -ms-overflow-style: none; + scrollbar-width: none; + scroll-snap-align: center; +`; + +const ItemImage = styled(Image)` + &.custom-image { + width: 27.5rem; + height: 45rem; + border-radius: 2.5rem; + border: ${(props) => (props.select == "true" ? "0.8rem solid #0580F1" : "none")}; + &.ant-image-preview { + width: 100%; + background-color: #fff; + } + } +`; From 59ba80d5bbae6b2c74502e25a5f9989a7dbf4873 Mon Sep 17 00:00:00 2001 From: AnCha Date: Thu, 23 May 2024 10:01:52 +0900 Subject: [PATCH 08/13] =?UTF-8?q?Chore=20:=20float=20btn=20=ED=81=AC?= =?UTF-8?q?=EA=B8=B0=20=EC=88=98=EC=A0=95=20#203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/GuardianMainPage.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/frontend/src/pages/GuardianMainPage.js b/frontend/src/pages/GuardianMainPage.js index 62b2be1a58..3828310fc4 100644 --- a/frontend/src/pages/GuardianMainPage.js +++ b/frontend/src/pages/GuardianMainPage.js @@ -62,6 +62,7 @@ function GuardianMainPage() { } style={{ width: "12.5rem", @@ -103,8 +104,13 @@ const ProfileSection = styled(Form)` `; const FloatButtonContainer = styled(FloatButton)` - &.ant-float-btn .ant-float-btn-body .ant-float-btn-content { - width: 12.5rem; - height: 12.5rem; + &.custom-float-btn.ant-float-btn .ant-float-btn-body .ant-float-btn-content .ant-float-btn-icon { + width: 6rem; + height: 6rem; + margin: 0; + svg { + font-size: 6rem; + color: #848484; + } } `; From 6728cb1a49071ee31d1c23d64079c8af297558b2 Mon Sep 17 00:00:00 2001 From: AnCha Date: Thu, 23 May 2024 10:03:27 +0900 Subject: [PATCH 09/13] =?UTF-8?q?Chore=20:=20=EC=84=A0=ED=83=9D=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=88=98=EC=A0=95=20#203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../guardianSelect/AllResultList.js | 71 +++++++++++++------ .../guardianSelect/SelectImgList.js | 62 ++++++++-------- 2 files changed, 80 insertions(+), 53 deletions(-) diff --git a/frontend/src/components/guardianSelect/AllResultList.js b/frontend/src/components/guardianSelect/AllResultList.js index 1f01916399..38691bcb68 100644 --- 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 ( 1차 탐색 결과 @@ -13,30 +15,46 @@ export const AllResultList = ({ onSelect, data, selectedList }) => { }} dataSource={data} renderItem={(item) => ( - - ( - - onSelect(item)}> - {selectedList.includes(item) ? "선택해제" : "선택"} - - - ), - }} - /> - + )} /> ); }; +/*각 이미지 아이템 */ +const ImageItem = ({ item, onSelect, isSelected }) => { + const [isPreviewVisible, setPreviewVisible] = useState(false); + + return ( + + , + onVisibleChange: (visible) => setPreviewVisible(visible), + toolbarRender: () => ( + e.stopPropagation()}> + { + e.stopPropagation(); + onSelect(item); + setPreviewVisible(false); + }}> + {isSelected ? "선택해제" : "선택"} + + + ), + }} + onClick={() => setPreviewVisible(true)} + /> + + ); +}; 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 index 7221ffd93c..c45b7f0060 100644 --- 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 ( 선택한 이미지({data.length}) - {data.map((item) => ( - <> + {data && data.length > 0 ? ( + data.map((item) => ( setOpenPreview(true)} - preview={false} - // preview={{ - // width: 900, - // toolbarRender: () => ( - // - // onSelect(item)}>선택해제 - // - // ), - // }} - />{" "} - onSelect(item)}>선택해제} - closeIcon={null} - width={1000}> - setOpenPreview(true)} - preview={false} - />{" "} - - - ))} + // preview={false} + preview={{ + width: 900, + toolbarRender: () => ( + + onSelect(item)}>선택해제 + + ), + }} + /> + )) + ) : ( + + + + )} ); @@ -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%; +`; From 1516c44ca3bdfb739cd19c360356429bed0dbc2c Mon Sep 17 00:00:00 2001 From: AnCha Date: Thu, 23 May 2024 10:08:52 +0900 Subject: [PATCH 10/13] =?UTF-8?q?Chore=20:=20=EC=A0=9C=EC=B6=9C=20?= =?UTF-8?q?=EC=8B=9C=20=ED=99=94=EB=A9=B4=20=EC=9D=B4=EB=8F=99=20#203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/GuardianSelectImgPage.js | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/pages/GuardianSelectImgPage.js b/frontend/src/pages/GuardianSelectImgPage.js index 26f78ad165..2abdc92e19 100644 --- a/frontend/src/pages/GuardianSelectImgPage.js +++ b/frontend/src/pages/GuardianSelectImgPage.js @@ -130,6 +130,7 @@ function GuardianSelectImgPage() { selectOK: () => { setIsSubmitModalOpen(false); onFinish(); + window.location.replace("/m"); }, selectCancel: () => { setIsSubmitModalOpen(false); From 2bca1348bf7788d53e2cb8b2a6d899b00277a251 Mon Sep 17 00:00:00 2001 From: AnCha Date: Thu, 23 May 2024 10:48:04 +0900 Subject: [PATCH 11/13] =?UTF-8?q?Feat=20:=20=EC=BA=A1=EC=B3=90=EB=B0=A9?= =?UTF-8?q?=EC=A7=80=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80=20#203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/GuardianSelectImgPage.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/frontend/src/pages/GuardianSelectImgPage.js b/frontend/src/pages/GuardianSelectImgPage.js index 2abdc92e19..428b88f39a 100644 --- a/frontend/src/pages/GuardianSelectImgPage.js +++ b/frontend/src/pages/GuardianSelectImgPage.js @@ -96,6 +96,15 @@ function GuardianSelectImgPage() { }); }, []); + // JavaScript로 화면 캡처 방지 설정 + document.addEventListener("contextmenu", (e) => e.preventDefault()); + document.addEventListener("keydown", (e) => { + if (e.key === "PrintScreen" || (e.ctrlKey && e.key === "p")) { + e.preventDefault(); + alert("Screen capture is disabled"); + } + }); + const onSelect = (select) => { setSelectedImg((prev) => { if (prev.includes(select)) { From d9b9e2e1b29fa897c971ee7d23562d947e63380d Mon Sep 17 00:00:00 2001 From: AnCha Date: Thu, 23 May 2024 10:56:40 +0900 Subject: [PATCH 12/13] =?UTF-8?q?Chore=20:=20header=20=EC=88=98=EC=A0=95?= =?UTF-8?q?=20#203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/GuardianSelectImgPage.js | 6 ++++-- frontend/src/pages/GuardianShowResultPage.js | 2 ++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/GuardianSelectImgPage.js b/frontend/src/pages/GuardianSelectImgPage.js index 428b88f39a..90c8e6b950 100644 --- a/frontend/src/pages/GuardianSelectImgPage.js +++ b/frontend/src/pages/GuardianSelectImgPage.js @@ -211,12 +211,14 @@ const HeaderContainer = styled.div` justify-content: space-between; align-items: center; width: 100%; - height: 12.5rem; + height: 14rem; top: 0; + z-index: 1; - padding: 0 5rem; + padding: 2rem 5rem; background-color: white; + box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.1); `; const CloseButton = styled.div` diff --git a/frontend/src/pages/GuardianShowResultPage.js b/frontend/src/pages/GuardianShowResultPage.js index 33359ed373..575b9f25c8 100644 --- a/frontend/src/pages/GuardianShowResultPage.js +++ b/frontend/src/pages/GuardianShowResultPage.js @@ -85,10 +85,12 @@ const HeaderContainer = styled.div` width: 100%; height: 14rem; top: 0; + z-index: 1; padding: 2rem 5rem; background-color: white; + box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.1); `; const CloseButton = styled.div` From ef0b7e91fd4b3c732a1307c10420c1194de64de5 Mon Sep 17 00:00:00 2001 From: AnCha Date: Thu, 23 May 2024 11:06:36 +0900 Subject: [PATCH 13/13] =?UTF-8?q?Chore=20:=20=ED=85=8C=EC=8A=A4=ED=8A=B8?= =?UTF-8?q?=20=EC=BD=94=EB=93=9C=20=EC=A3=BC=EC=84=9D=20=EC=B2=98=EB=A6=AC?= =?UTF-8?q?=20#203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/core/api/index.js | 30 ++++++++++++++---------------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/frontend/src/core/api/index.js b/frontend/src/core/api/index.js index b9e7ccb788..d8f6a996d0 100644 --- a/frontend/src/core/api/index.js +++ b/frontend/src/core/api/index.js @@ -206,9 +206,8 @@ export const getGuardianMissingPerson = async () => { { headers: { - // Authorization: `${getCookie("authToken")}`, - Authorization: `${process.env.REACT_APP_TOKEN}`, - + Authorization: `${getCookie("authToken")}`, + // Authorization: `${process.env.REACT_APP_TOKEN}`, "Content-Type": "application/json", }, }, @@ -234,9 +233,8 @@ export const getGuardianMissingPersonStep = async () => { { headers: { - // Authorization: `${getCookie("authToken")}`, - Authorization: `${process.env.REACT_APP_TOKEN}`, - + Authorization: `${getCookie("authToken")}`, + // Authorization: `${process.env.REACT_APP_TOKEN}`, "Content-Type": "application/json", }, }, @@ -263,8 +261,8 @@ export const postProfileImg = async (value) => { { headers: { - // Authorization: `${getCookie("authToken")}`, - Authorization: `${process.env.REACT_APP_TOKEN}`, + Authorization: `${getCookie("authToken")}`, + // Authorization: `${process.env.REACT_APP_TOKEN}`, "Content-Type": "multipart/form-data", }, }, @@ -290,8 +288,8 @@ export const getGuardianSelectImage = async () => { { headers: { - // Authorization: `${getCookie("authToken")}`, - Authorization: `${process.env.REACT_APP_TOKEN}`, + Authorization: `${getCookie("authToken")}`, + // Authorization: `${process.env.REACT_APP_TOKEN}`, "Content-Type": "application/json", }, }, @@ -317,8 +315,8 @@ export const postGuardianSelectImage = async (value) => { { resultIds: value[0] }, { headers: { - // Authorization: `${getCookie("authToken")}`, - Authorization: `${process.env.REACT_APP_TOKEN}`, + Authorization: `${getCookie("authToken")}`, + // Authorization: `${process.env.REACT_APP_TOKEN}`, "Content-Type": "application/json", }, }, @@ -344,8 +342,8 @@ export const getGuardianSelectedResult = async () => { { headers: { - // Authorization: `${getCookie("authToken")}`, - Authorization: `${process.env.REACT_APP_TOKEN}`, + Authorization: `${getCookie("authToken")}`, + // Authorization: `${process.env.REACT_APP_TOKEN}`, "Content-Type": "application/json", }, }, @@ -371,8 +369,8 @@ export const getGuardianSecondResult = async () => { { headers: { - // Authorization: `${getCookie("authToken")}`, - Authorization: `${process.env.REACT_APP_TOKEN}`, + Authorization: `${getCookie("authToken")}`, + // Authorization: `${process.env.REACT_APP_TOKEN}`, "Content-Type": "application/json", }, },