From dfff98a11de32b0fa8fdc7ab12d7145da33eaba8 Mon Sep 17 00:00:00 2001
From: hckang17 <hckang17@naver.com>
Date: Wed, 13 Dec 2023 18:33:04 +0900
Subject: [PATCH] =?UTF-8?q?FIX:=EB=AA=A8=EB=B0=94=EC=9D=BC=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=EC=97=90=EC=84=9C=20=EB=B3=B4=EC=9D=B4=EB=8A=94=20?=
 =?UTF-8?q?=EC=B0=A8=ED=8A=B8=20=ED=81=AC=EA=B8=B0=20=EC=9C=A0=EB=8F=99?=
 =?UTF-8?q?=EC=A0=81=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                             |  2 +-
 src/views/examples/ResultPage.jsx        | 29 +++++++++++-------------
 src/views/index-sections/Calendar.jsx    | 28 +++++++++++++++++++----
 src/views/index-sections/ResultChart.jsx | 28 +++++++++++++++--------
 4 files changed, 57 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index a500014..43c6b65 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "yup": "^1.3.2"
   },
   "scripts": {
-    "start": "export PORT=80 && react-scripts start",
+    "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
diff --git a/src/views/examples/ResultPage.jsx b/src/views/examples/ResultPage.jsx
index b3816dd..2b1d362 100644
--- a/src/views/examples/ResultPage.jsx
+++ b/src/views/examples/ResultPage.jsx
@@ -1,5 +1,4 @@
 import React, {useState} from 'react';
-import { useNavigate } from 'react-router-dom';
 import axios from 'axios';
 import ResultGraph from 'views/index-sections/ResultChart';
 import VBarChart from 'views/index-sections/verticalBarChart';
@@ -111,14 +110,18 @@ function renderAvgGraphData(DATA) {
 }
 
 const renderRankText = (d) => {
+  const resultTextStyle = {
+    // marginBottom: 'px',
+  };
+
   return (
     <>
-      <h4> 미세각질 항목은 <span style={{color: 'red'}}>상위 {d.FINE_DEAD_SKIN_CELLS}%</span>입니다.</h4>
-      <h4> 피지과다 항목은 <span style={{color: 'red'}}>상위 {d.EXCESS_SEBUM}%</span>입니다.</h4>
-      <h4> 모낭간 홍반 항목 <span style={{color: 'red'}}>상위 {d.ERYTHEMA_BETWEEN_HAIR_FOLLICLES}%</span>입니다.</h4>
-      <h4> 비듬 항목은 상위 <span style={{color: 'red'}}>상위 {d.DANDRUFF}%</span>입니다.</h4>
-      <h4> 탈모위험성 항목은 <span style={{color: 'red'}}>상위 {d.HAIR_LOSS}%</span>입니다.</h4>
-      <h4> 모낭간 홍반농포 항목은 <span style={{color: 'red'}}>상위 {d.ERYTHEMA_PUSTULES}%</span>입니다.</h4>
+      <h5 style={resultTextStyle}> 미세각질 항목은 <span style={{color: 'red'}}>상위 {d.FINE_DEAD_SKIN_CELLS}%</span>입니다.</h5>
+      <h5 style={resultTextStyle}> 피지과다 항목은 <span style={{color: 'red'}}>상위 {d.EXCESS_SEBUM}%</span>입니다.</h5>
+      <h5 style={resultTextStyle}> 모낭간 홍반 항목 <span style={{color: 'red'}}>상위 {d.ERYTHEMA_BETWEEN_HAIR_FOLLICLES}%</span>입니다.</h5>
+      <h5 style={resultTextStyle}> 비듬 항목은 상위 <span style={{color: 'red'}}>상위 {d.DANDRUFF}%</span>입니다.</h5>
+      <h5 style={resultTextStyle}> 탈모위험성 항목은 <span style={{color: 'red'}}>상위 {d.HAIR_LOSS}%</span>입니다.</h5>
+      <h5 style={resultTextStyle}> 모낭간 홍반농포 항목은 <span style={{color: 'red'}}>상위 {d.ERYTHEMA_PUSTULES}%</span>입니다.</h5>
     </>
   );
 }
@@ -163,12 +166,6 @@ function ResultPage () {
    
   return (
     <>
-      {document.getElementById("GraphExplanation") ? 
-      <UncontrolledTooltip placement="top" target="GraphExplanation">
-            <p>육각형이 클수록 <span style={{color: 'blue'}}>양호하다는 것을</span>
-            작을수록 <span style={{color: 'red'}}>좋지않다는 것을</span>의미합니다.</p>
-      </UncontrolledTooltip> : <></>}
-
       {isMobile?
         <>
         <IndexNavbar />
@@ -210,12 +207,12 @@ function ResultPage () {
                             √ 검사결과 자세히 보기
                           </Button>
                           <Collapse isOpen={collapseIsOpen}>
-                            <div id="GraphExplanation">
+                            <div>
                               <ResultGraph old={old} graphData={renderGraphData(diagnosisData)} avgGraphData={renderAvgGraphData(diagnosisData)} />
                             </div>
                             <div className="text-center">
                               {renderRankText(diagnosisData)}
-                          </div>
+                            </div>
                           </Collapse>
                         </div>
                       </div>
@@ -274,7 +271,7 @@ function ResultPage () {
                           √ 검사결과 자세히 보기
                         </Button>
                         <Collapse isOpen={collapseIsOpen} >
-                          <div id="GraphExplanation">
+                          <div>
                               <ResultGraph old={old} graphData={renderGraphData(diagnosisData)} avgGraphData={renderAvgGraphData(diagnosisData)} />
                           </div>                          
                           <div className="text-center">
diff --git a/src/views/index-sections/Calendar.jsx b/src/views/index-sections/Calendar.jsx
index 3a1f85a..61bd395 100644
--- a/src/views/index-sections/Calendar.jsx
+++ b/src/views/index-sections/Calendar.jsx
@@ -28,7 +28,7 @@ function format2Json(d){
     "topPercentage": "67.2 70.3 42.9 48.4 38.8 49.0 84.1"
 }
   */
-  console.log(d.topPercentage);
+  // console.log(d.topPercentage);
   const rowDataArray = d.topPercentage.split(" ").map(Number);
   
   const JSONData = {
@@ -277,16 +277,36 @@ const getDetailResult = async (d) => {
         border:"1px solid #fff",
         width:"200px",
         height:"51px",
-        fontWeight: "#fff",
         fontWeight: '700',
         fontSize:"13px",
         paddingTop: "15px",
         borderRadius: "13px",
-        
       }}>파마&염색 기록하기</Button>
       <br /><br />
       <FullCalendar
-        defaultView={defaultView}
+        //   customButtons={{
+        //     myCustomButton: {
+        //         text: 'custom!',
+        //         click: function() {
+        //             alert('clicked the custom button!');
+        //         },
+        //         style : {
+        //           background:"#90d8de",
+        //           border:"1px solid #fff",
+        //           width:"200px",
+        //           height:"51px",
+        //           fontWeight: '700',
+        //           fontSize:"13px",
+        //           paddingTop: "15px",
+        //           borderRadius: "13px",
+        //         }
+        //     },
+        // }}
+        headerToolbar={{
+            left: 'prev',
+            center: 'title',
+            right: 'next'
+        }}
         plugins={[dayGridPlugin]}
         eventClick={handleDateClick}
         events={events}
diff --git a/src/views/index-sections/ResultChart.jsx b/src/views/index-sections/ResultChart.jsx
index 9d39227..134683a 100644
--- a/src/views/index-sections/ResultChart.jsx
+++ b/src/views/index-sections/ResultChart.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Radar } from 'react-chartjs-2';
 import { Chart as ChartJS, RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend } from 'chart.js';
+import {UncontrolledTooltip} from 'reactstrap';
 
 ChartJS.register(RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend);
 
@@ -71,7 +72,7 @@ function ResultGraph(props) {
     ],
   };
   const chartOptions = {
-    maintainAspectRatio: false,
+    maintainAspectRatio: true,
     scales: {
       r: {
         suggestedMin: -1,
@@ -99,17 +100,26 @@ function ResultGraph(props) {
   
   const chartStyle = {
     width: '100%',
-    height: '600px', 
+    height: '100%', 
   };
 
   return (
-    <div style={{ marginTop: 30, marginBottom: 30, }}> 
-      <Radar 
-        data={data}
-        options={chartOptions}
-        style={chartStyle}
-      />
-    </div>
+    <>
+      <div>
+        {document.getElementById("GraphExplanation") ? 
+        <UncontrolledTooltip placement="top" target="GraphExplanation">
+            <p>육각형이 클수록 <span style={{color: 'blue'}}>양호하다는 것을</span>
+              작을수록 <span style={{color: 'red'}}>좋지않다는 것을</span>의미합니다.</p>
+        </UncontrolledTooltip> : <></>}
+      </div>
+      <div id="GraphExplanation" style={{ marginTop: 30, marginBottom: 30, width: '100%', overflowX: 'auto'}}> 
+        <Radar 
+          data={data}
+          options={chartOptions}
+          style={chartStyle}
+        />
+      </div>
+    </>
   );
 };