Merge pull request #40 from primus-teoSprint/feat/#24

[#24] 검증 결과 페이지
primus-teoSprint · Apr 7, 2024 · f25649b · f25649b
2 parents 89fc79e + 522ea0d
commit f25649b
Show file tree

Hide file tree

Showing 5 changed files with 173 additions and 44 deletions.
diff --git a/app/(route)/indicators/_components/result/Pyramid.tsx b/app/(route)/indicators/_components/result/Pyramid.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react'
 import dynamic from 'next/dynamic'
+import { useEffect, useState } from 'react'
 
 const DynamicChart = dynamic(() => import('react-apexcharts'), { ssr: false })
 
@@ -12,7 +12,7 @@ function Pyramid() {
 
   const series = [
     {
-      name: '분포도',
+      name: '최종 점수',
       data: [10, 30, 50, 70, 90],
     },
   ]
@@ -23,6 +23,7 @@ function Pyramid() {
         show: false,
       },
     },
+    colors: ['#afb0fe', '#a576f4', '#c676f4', '#e676f4', '#6c76f4'],
     plotOptions: {
       bar: {
         borderRadius: 0,
@@ -32,6 +33,7 @@ function Pyramid() {
         isFunnel: true,
       },
     },
+
     legend: {
       show: true,
     },
@@ -57,17 +59,17 @@ function Pyramid() {
   }
 
   return (
-    <div>
+    <>
       {isClient && (
         <DynamicChart
           options={options}
           series={series}
           type="bar"
-          width={270}
-          height={220}
+          width={290}
+          height={300}
         />
       )}
-    </div>
+    </>
   )
 }
 

diff --git a/app/(route)/indicators/_components/result/index.tsx b/app/(route)/indicators/_components/result/index.tsx
@@ -2,8 +2,9 @@ import Nav from '@/app/_common/nav'
 import Title from '@/app/_common/text/title'
 import { selectedItemAtom, totalinputValueAtom } from '@/app/_store/atom'
 import { useRecoilValue } from 'recoil'
-import S from './result.module.css'
 import Pyramid from './Pyramid'
+import S from './result.module.css'
+import ResultItem from './resultItem'
 
 //* 결과페이지 입니다.
 //TODO: 사용자가 클릭한 아이디어 이름과 해당 툴을 사용한 사용자 수가 보여집니다.
@@ -20,35 +21,73 @@ function Result() {
         100,
     )
 
+  let resultAmount = ''
+  if (result! >= 90) {
+    resultAmount += '매우 높음'
+  } else if (result! >= 70) {
+    resultAmount += '높음'
+  } else if (result! >= 50) {
+    resultAmount += '보통'
+  } else if (result! >= 30) {
+    resultAmount += '낮음'
+  } else if (result! >= 10) {
+    resultAmount += '매우 낮음'
+  }
+
   return (
-    <div className={S.wrapper}>
-      <Nav />
-      <div className={S.contentwrap}>
-        <Title title="검증 결과" />
-        <Title title="아이디어 이름" />
-        <span className={S.totaluser}>전체 사용자 162명</span>
-      </div>
-      <div className={S.scorewrap}>
-        <Pyramid />
-        <div className={S.myscore}>100점 달성</div>
-      </div>
-      <div className={S.contentwrap}>
-        <span className={S.showscore}>
-          매우 높음 (~90점), 높음 (~70점), 보통(~50점),
-        </span>
-        <span className={S.showscore}>낮음(~30점), 매우낮음 (~10점)</span>
+    <>
+      <div className={S.wrapper}>
+        <Nav />
+        <div className={S.contentwrap}>
+          <Title title="검증 결과" />
+          <span className={S.title}>아이디어 불패의 법칙</span>
+          <span className={S.totaluser}>전체 사용자 162명</span>
+        </div>
+        <div className={S.scorewrap}>
+          <div>
+            <Pyramid />
+            <span className={S.showscore}>
+              매우 높음 (~90점), 높음 (~70점), 보통(~50점),
+              <br />
+              낮음(~30점), 매우낮음 (~10점)
+            </span>
+          </div>
 
-        <div>
+          <div className={S.myscore}>100점 달성</div>
+        </div>
+        <div className={S.contentwrap}>
           <span className={S.title}>검증 지표</span>
-          <p className={S.subTitle}>계산 결과지입니다.</p>
-          <p>전체 이용자 수 : {totalinputValue}</p>
-          <p>선택한 아이템 이름: {selectedItem?.name}</p>
-          <p>선택한 아이템 점수: {selectedItem?.score}</p>
-          <p>선택한 아이템 사람 수: {selectedItem?.people}</p>
-          <p>최종 점수: {result}</p>
+          <p className={S.totaluser}>
+            [{selectedItem?.name}]기준 점수 환산 결과지입니다.
+          </p>
+          <div className={S.itemWrapper}>
+            <ResultItem
+              itemTitle="전체 이용자 수"
+              itemValue={totalinputValue}
+            />
+
+            <ResultItem itemTitle="점수" itemValue={selectedItem?.score} />
+            <ResultItem itemTitle="인원 수" itemValue={selectedItem?.people} />
+
+            <div className={S.totalResultWrapper}>
+              <span className={S.calculation}>
+                (({selectedItem?.people} * {selectedItem?.score} )/({' '}
+                {selectedItem?.score} *{totalinputValue} )) * 100
+              </span>
+              <p className={S.resultTitle}>
+                = {result} 이라는 결과가 도출되었습니다.
+                <br />
+                해당 아이디어의 적극적 투자 지표는 [{resultAmount}]단계에
+                속합니다.
+              </p>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
+      <div className={S.bottomWrapper}>
+        <button className={S.submitBtnWrapper}>공유하기</button>
+      </div>
+    </>
   )
 }
 

diff --git a/app/(route)/indicators/_components/result/result.module.css b/app/(route)/indicators/_components/result/result.module.css
@@ -20,12 +20,11 @@
   height: 40px;
 
   border-radius: 14px;
-  border: 2px solid #6c76f4;
+  border: 2px solid var(--purple-700);
   background: #fff;
 
-  color: #6c76f4;
+  color: var(--purple-700);
   font-size: 20px;
-  font-style: normal;
   font-weight: 600;
   line-height: 170%;
   text-align: center;
@@ -34,27 +33,99 @@
 .totaluser {
   color: #424242;
   font-size: 13px;
-  font-style: normal;
   font-weight: 300;
-  line-height: normal;
 }
 
 .showscore {
-  color: #424242;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   text-align: center;
+  color: #424242;
   font-size: 11px;
-  font-style: normal;
   font-weight: 300;
-  line-height: normal;
 }
 
 .title {
   font-size: 1.2rem;
   font-weight: 700;
+  margin-top: 25px;
 }
 
 .subTitle {
   font-size: 0.9rem;
   font-weight: 400;
+}
+
+.itemWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
+}
 
+.itemTitle {
+  font-size: 1.1rem;
+  letter-spacing: 0.1px;
+  font-weight: 700;
+}
+
+.itemValue {
+  font-size: 1.1rem;
+  font-weight: 300;
+}
+
+.resultItemWrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin: 5px 0;
+}
+
+.totalResultWrapper {
+  background-color: #f8f8f8;
+  border-radius: 14px;
+  width: 100%;
+  height: 100px;
+  padding: 10px 20px;
+  margin: 20px 0;
+}
+
+.calculation {
+  color: #aaaaaa;
+  font-size: 0.8rem;
+}
+
+.resultTitle {
+  font-size: 0.9rem;
+  font-weight: 700;
+  line-height: 25px;
+}
+
+.bottomWrapper {
+  position: relative;
+  background-color: #e7e9ff;
+  width: 480px;
+  height: 150px;
+  border-top-left-radius: 38px;
+  border-top-right-radius: 38px;
+}
+
+.submitBtnWrapper {
+  position: absolute;
+  right: 16px;
+  bottom: 50px;
+
+  color: white;
+  font-weight: 700;
+  font-size: 1.2rem;
+  text-align: center;
+  width: 100px;
+  height: auto;
+  padding: 10px 20px;
+  border-radius: 9px;
+  background-color: var(--purple-700);
 }
diff --git a/app/(route)/indicators/_components/result/resultItem.tsx b/app/(route)/indicators/_components/result/resultItem.tsx
@@ -0,0 +1,17 @@
+import S from './result.module.css'
+
+interface Props {
+  itemTitle: string
+  itemValue: string | number | undefined | null
+}
+
+function ResultItem({ itemTitle, itemValue }: Props) {
+  return (
+    <div className={S.resultItemWrapper}>
+      <span className={S.itemTitle}>{itemTitle}</span>
+      <p className={S.itemValue}>{itemValue}</p>
+    </div>
+  )
+}
+
+export default ResultItem
diff --git a/app/(route)/indicators/indicators.module.css b/app/(route)/indicators/indicators.module.css
@@ -30,19 +30,19 @@
 }
 
 .bottomWrapper {
-  position: absolute;
+  position: fixed;
   bottom: 0;
-  background-color: #fbfbfb;
-  width: 100%;
-  height: 150px;
+  background-color: #e3e6ff;
+  width: 480px;
+  height: 140px;
   border-top-left-radius: 38px;
   border-top-right-radius: 38px;
 }
 
 .submitBtnWrapper {
   position: absolute;
   right: 16px;
-  bottom: 50px;
+  bottom: 45px;
 
   color: white;
   font-weight: 700;