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;
+ }
+`;