diff --git a/package.json b/package.json index 6b70e5dc..ed00c51e 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", + "react-switch": "^6.0.0", "redux": "^4.0.5", "redux-saga": "^1.1.3", "styled-components": "^5.2.3", diff --git a/src/App.js b/src/App.js index ce59cfd5..2ce72bea 100644 --- a/src/App.js +++ b/src/App.js @@ -25,6 +25,7 @@ import "swiper/swiper.min.css"; import "swiper/components/pagination/pagination.min.css"; import "swiper/components/navigation/navigation.min.css"; import initialize from "./utils/initialize"; +import Result from "./components/frame/Result"; const App = () => { const { checkLogIn, status } = useUser(); @@ -56,7 +57,10 @@ const App = () => { {/* Testing */} + {/* mypage */} + {/* result */} + diff --git a/src/components/Feed/Card.jsx b/src/components/Feed/Card.jsx index 792aa4b3..d8805c43 100644 --- a/src/components/Feed/Card.jsx +++ b/src/components/Feed/Card.jsx @@ -16,6 +16,7 @@ const Card = ({ sharedCnt, participatedCnt, testLink, + result = false, }) => { const { goPage } = usePage(); // const [bookMark, setBookMark] = useState(false); @@ -28,7 +29,11 @@ const Card = ({ const onClickTest = useCallback( (e) => { const testid = testLink.split("?")[1]; - goPage(`/testing/welcome`, testid); + if (result) { + goPage(`/result`, testid); + } else { + goPage(`/testing/welcome`, testid); + } }, [goPage, testLink] ); diff --git a/src/components/MyPage/TabTests.jsx b/src/components/MyPage/TabTests.jsx index ed09d93d..eb955ea3 100644 --- a/src/components/MyPage/TabTests.jsx +++ b/src/components/MyPage/TabTests.jsx @@ -65,6 +65,7 @@ const TabTests = (props) => { sharedCnt={test.sharedCnt} participatedCnt={test.participantsCnt} testLink={test.testLink} + result={selectedTab === MADETEST && true} /> ))} diff --git a/src/components/Result/ToggleSwitch.jsx b/src/components/Result/ToggleSwitch.jsx new file mode 100644 index 00000000..873ab303 --- /dev/null +++ b/src/components/Result/ToggleSwitch.jsx @@ -0,0 +1,21 @@ +import React, { useState } from "react"; +import Switch from "react-switch"; + +const ToggleSwitch = () => { + const [checked, setChecked] = useState(false); + const handleChange = (checked) => { + setChecked(checked); + }; + return ( + + ); +}; + +export default ToggleSwitch; diff --git a/src/components/frame/Result.jsx b/src/components/frame/Result.jsx new file mode 100644 index 00000000..4e06ad68 --- /dev/null +++ b/src/components/frame/Result.jsx @@ -0,0 +1,15 @@ +import React from "react"; +import queryString from "query-string"; +import Error from "../../view/Error"; +import InquireResult from "../../view/testresult/InquireResult"; + +const Result = ({ location }) => { + const { testid } = queryString.parse(location.search); + + if (testid) { + return ; + } + return ; +}; + +export default Result; diff --git a/src/constants/headerInfo.js b/src/constants/headerInfo.js index 32530a07..0757cb7c 100644 --- a/src/constants/headerInfo.js +++ b/src/constants/headerInfo.js @@ -83,15 +83,22 @@ const headerInfo = { background: "#fff", }, - "mypage/main": { + "/mypage/main": { leftType: BACK, title: { type: TITLE, title: "마이페이지" }, }, - "mypage/manage": { + "/mypage/manage": { leftType: BACK, title: { type: TITLE, title: "계정 관리" }, }, + + "/result": { + leftType: BACK, + title: { type: NOTHING }, + rightType: NOTHING, + background: theme.colors.lightblue, + }, }; export default headerInfo; diff --git a/src/view/testresult/InquireResult.jsx b/src/view/testresult/InquireResult.jsx new file mode 100644 index 00000000..99df524e --- /dev/null +++ b/src/view/testresult/InquireResult.jsx @@ -0,0 +1,103 @@ +import React from "react"; +import styled from "styled-components"; +import { SVG } from "../../components/common"; +import RoundContiner from "../testing/SubComponents/RoundContainer"; +import ENUM from "../../constants/Enum"; +import ToggleSwitch from "../../components/Result/ToggleSwitch"; + +const InquireResult = () => { + return ( + + + 참여인원 3,258명 + + 디프만 우정 테스트 + + +
4,473
+ + + + +
이 테스트를 피드에 공개하기
+
+ +
+ + +
테스트 링크 비활성화하기
+
+ +
+ + + + + + + ); +}; + +export default InquireResult; + +const Continer = styled.div` + display: flex; + flex-direction: column; +`; +const TopContiner = styled.div` + padding: 0 2rem 1.5rem 2rem; +`; +const PartNumber = styled.div` + padding-bottom: 0.3rem; + font-weight: normal; + font-size: 1.3rem; + line-height: 19px; + letter-spacing: -0.3px; + color: #b7bdcb; +`; +const Info = styled.div` + display: flex; + justify-content: space-between; + padding-bottom: ${({ theme: { fontSizes } }) => fontSizes.lg}rem; +`; +const TestName = styled.div` + font-weight: bold; + font-size: ${({ theme: { fontSizes } }) => fontSizes.xxl}rem; + line-height: 35px; + letter-spacing: -1px; + color: ${({ theme: { colors } }) => colors.bodyGray}; +`; +const ShareBox = styled.div` + font-weight: normal; + font-size: ${({ theme: { fontSizes } }) => fontSizes.xs}rem; + line-height: 21px; + letter-spacing: -0.3px; + color: ${({ theme: { colors } }) => colors.body}; + align-items: center; + display: flex; + .share-number { + margin-left: 5px; + } +`; +const ToggleArea = styled.div` + flex-direction: column; +`; +const ToggleBox = styled.div` + display: flex; + justify-content: space-between; + font-weight: normal; + font-size: 1.5rem; + line-height: 24px; + letter-spacing: -0.5px; + color: ${({ theme: { colors } }) => colors.darker}; + .toggle { + align-items: center; + display: flex; + } +`;