From 42667cfea9507ec0ce71736bbd7467685f4fd82b Mon Sep 17 00:00:00 2001 From: AnCha Date: Fri, 31 May 2024 04:55:26 +0900 Subject: [PATCH] =?UTF-8?q?Feat=20:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EC=84=A0=EB=B3=84=20=EC=84=A4=EB=AA=85=20=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20#129?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/assets/images/help_select1.svg | 9 ++ frontend/src/assets/images/help_select2.svg | 9 ++ frontend/src/assets/images/help_select3.svg | 9 ++ frontend/src/assets/images/help_select4.svg | 9 ++ frontend/src/assets/images/help_select5.svg | 9 ++ .../components/guardianMain/StepContents.js | 2 +- frontend/src/core/router/index.js | 3 + frontend/src/pages/HelpPage.js | 2 +- frontend/src/pages/HelpSelectPage.js | 135 ++++++++++++++++++ 9 files changed, 185 insertions(+), 2 deletions(-) create mode 100644 frontend/src/assets/images/help_select1.svg create mode 100644 frontend/src/assets/images/help_select2.svg create mode 100644 frontend/src/assets/images/help_select3.svg create mode 100644 frontend/src/assets/images/help_select4.svg create mode 100644 frontend/src/assets/images/help_select5.svg create mode 100644 frontend/src/pages/HelpSelectPage.js diff --git a/frontend/src/assets/images/help_select1.svg b/frontend/src/assets/images/help_select1.svg new file mode 100644 index 0000000000..149befd22c --- /dev/null +++ b/frontend/src/assets/images/help_select1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/assets/images/help_select2.svg b/frontend/src/assets/images/help_select2.svg new file mode 100644 index 0000000000..a810702991 --- /dev/null +++ b/frontend/src/assets/images/help_select2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/assets/images/help_select3.svg b/frontend/src/assets/images/help_select3.svg new file mode 100644 index 0000000000..4ce8c933fe --- /dev/null +++ b/frontend/src/assets/images/help_select3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/assets/images/help_select4.svg b/frontend/src/assets/images/help_select4.svg new file mode 100644 index 0000000000..450c4e483d --- /dev/null +++ b/frontend/src/assets/images/help_select4.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/assets/images/help_select5.svg b/frontend/src/assets/images/help_select5.svg new file mode 100644 index 0000000000..f5b94fcbce --- /dev/null +++ b/frontend/src/assets/images/help_select5.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/components/guardianMain/StepContents.js b/frontend/src/components/guardianMain/StepContents.js index c73cc140e2..25d70bc9e6 100644 --- a/frontend/src/components/guardianMain/StepContents.js +++ b/frontend/src/components/guardianMain/StepContents.js @@ -101,7 +101,7 @@ export const StepContents = ({ index, current }) => { )} {index == 1 && ( - + navigate("/help/select", { state: "main" })}> 이미지 선별 설명보기 diff --git a/frontend/src/core/router/index.js b/frontend/src/core/router/index.js index fcc12d911a..a2166f62ef 100644 --- a/frontend/src/core/router/index.js +++ b/frontend/src/core/router/index.js @@ -10,6 +10,7 @@ import MissingPersonReportPage from "../../pages/MissingPersonReportPage"; import Nav from "../../components/common/Nav"; import HelpPage from "../../pages/HelpPage"; import HelpMainPage from "../../pages/HelpMainPage"; +import HelpSelectPage from "../../pages/HelpSelectPage"; function Router() { return ( @@ -22,6 +23,8 @@ function Router() { } /> } /> } /> + } /> + }> } /> } />} /> diff --git a/frontend/src/pages/HelpPage.js b/frontend/src/pages/HelpPage.js index b8388a0362..9c734af444 100644 --- a/frontend/src/pages/HelpPage.js +++ b/frontend/src/pages/HelpPage.js @@ -19,7 +19,7 @@ function HelpPage() {

메인화면 설명 확인하기

- + navigate("/help/select", { state: "help" })}>

이미지 선별 설명 확인하기

 diff --git a/frontend/src/pages/HelpSelectPage.js b/frontend/src/pages/HelpSelectPage.js new file mode 100644 index 0000000000..4706bbf3b3 --- /dev/null +++ b/frontend/src/pages/HelpSelectPage.js @@ -0,0 +1,135 @@ +import styled from "styled-components"; +import { useState } from "react"; +import { useLocation, useNavigate } from "react-router-dom"; +import Icon, { LeftOutlined, RightOutlined } from "@ant-design/icons"; +import HelpSelect1 from "../assets/images/help_select1.svg"; +import HelpSelect2 from "../assets/images/help_select2.svg"; +import HelpSelect3 from "../assets/images/help_select3.svg"; +import HelpSelect4 from "../assets/images/help_select4.svg"; +import HelpSelect5 from "../assets/images/help_select5.svg"; + +function HelpSelectPage() { + const navigate = useNavigate(); + const location = useLocation(); + const { pre } = location.state || { pre: "main" }; + + const [index, setIndex] = useState(0); + const images = [HelpSelect1, HelpSelect2, HelpSelect3, HelpSelect4, HelpSelect5]; + + const handleNext = () => { + if (index < images.length - 1) { + setIndex(index + 1); + } else { + if (pre === "main") navigate("/m"); + else navigate("/help"); + } + }; + const handlePrev = () => { + if (index > 0) { + setIndex(index - 1); + } + }; + + return ( + + + handlePrev()}> + {index > 0 && } + + 이미지 선별 설명 + handleNext()}> + + + + + + + + ); +} + +export default HelpSelectPage; + +const StHelpPage = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + overflow: hidden; + width: 100vw; + height: 100vh; + padding: 0; + + background-color: ${(props) => (props.color == "true" ? "#272727" : "#404040")}; + + overflow-y: hidden; + -ms-overflow-style: none; + scrollbar-width: none; + scroll-snap-align: center; +`; +const HeaderContainer = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + position: fixed; + width: 100%; + height: 14rem; + top: 0; + z-index: 1; + + padding: 2rem 5rem; + + /* background-color: #404040; */ + opacity: 0.8; + /* box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.1); */ +`; + +const ButtonWrapper = styled.div` + display: flex; + justify-content: center; + align-items: center; + width: 11rem; + height: 11rem; + &:hover { + background-color: #404040; + border-radius: 2rem; + } +`; + +const IconWrapper = styled(Icon)` + font-size: 5rem; + color: ${(props) => props.color || "white"}; +`; + +const Title = styled.div` + display: flex; + justify-content: center; + align-items: center; + width: 100%; + font-size: 5.5rem; + font-weight: 600; + color: white; +`; + +const ContentContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + padding: 0; + margin-top: 13rem; + background-color: #404040; + + overflow-y: hidden; + -ms-overflow-style: none; + scrollbar-width: none; + scroll-snap-align: center; + img { + width: 100%; + height: 100%; + object-fit: cover; + } +`;