Inquire-result (메이커결과조회)

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",

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 = () => {
           <Route exact path="/register/:module" component={RegisterFrame} />
           {/* Testing */}
           <Route exact path="/testing/:module" component={Testing} />
+          {/* mypage */}
           <Route exact path="/mypage/:module" component={Mypage} />
+          {/* result */}
+          <Route exact path="/result" component={Result} />
           <Route exact component={Error} />
         </Switch>
       </MainForm>

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]
   );

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}
           />
         ))}
       </InfinScroll>

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 (
+    <Switch
+      onChange={handleChange}
+      checked={checked}
+      uncheckedIcon={false}
+      checkedIcon={false}
+      width={36}
+      height={21}
+    />
+  );
+};
+
+export default ToggleSwitch;

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 <InquireResult testid={testid} />;
+  }
+  return <Error />;
+};
+
+export default Result;

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;

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 (
+    <Continer>
+      <TopContiner>
+        <PartNumber>참여인원 3,258명</PartNumber>
+        <Info>
+          <TestName>디프만 우정 테스트</TestName>
+          <ShareBox>
+            <SVG
+              type={ENUM.CONFIRM}
+              style={{
+                width: "22",
+                height: "22",
+              }}
+            />
+            <div className="share-number">4,473</div>
+          </ShareBox>
+        </Info>
+        <ToggleArea>
+          <ToggleBox>
+            <div className="setting">이 테스트를 피드에 공개하기</div>
+            <div className="toggle">
+              <ToggleSwitch />
+            </div>
+          </ToggleBox>
+          <ToggleBox>
+            <div className="setting">테스트 링크 비활성화하기</div>
+            <div className="toggle">
+              <ToggleSwitch />
+            </div>
+          </ToggleBox>
+        </ToggleArea>
+      </TopContiner>
+
+      <RoundContiner></RoundContiner>
+    </Continer>
+  );
+};
+
+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;
+  }
+`;