From 0e4322d1f42d9aa695250b3a7733844a24474316 Mon Sep 17 00:00:00 2001
From: Jiwon <87058411+raipen@users.noreply.github.com>
Date: Sat, 1 Apr 2023 18:16:16 +0900
Subject: [PATCH] Feat: graph title and description (#34)

---
 summe/public/index.html                    |  2 ++
 summe/src/component/graph/Blog.jsx         |  9 ++----
 summe/src/component/graph/GraphTitle.css   | 33 ++++++++++++++++++++++
 summe/src/component/graph/GraphWrapper.jsx | 17 ++++++++++-
 summe/src/index.css                        | 13 +++++++--
 5 files changed, 64 insertions(+), 10 deletions(-)
 create mode 100644 summe/src/component/graph/GraphTitle.css

diff --git a/summe/public/index.html b/summe/public/index.html
index aa069f2..eb7c04b 100644
--- a/summe/public/index.html
+++ b/summe/public/index.html
@@ -15,6 +15,8 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/summe/src/component/graph/Blog.jsx b/summe/src/component/graph/Blog.jsx
index a60cecb..16841d7 100644
--- a/summe/src/component/graph/Blog.jsx
+++ b/summe/src/component/graph/Blog.jsx
@@ -41,11 +41,8 @@ export default function Blog({ state }) {
           chart: {
             height: 350,
             type: "treemap",
-          },
-          title: {
-            text: "Basic Treemap",
-          },
-        },
+          }
+        }
       });
     } catch (error) {
       console.error(error);
@@ -57,6 +54,6 @@ export default function Blog({ state }) {
   }, []);
 
   return (
-    <GraphWrapper data={data} type="treemap" height="350px" width="100%"/>
+    <GraphWrapper data={data} type="treemap" height="350px" width="100%" title="그래프 테스트" description="그래프 설명"/>
   );
 }
diff --git a/summe/src/component/graph/GraphTitle.css b/summe/src/component/graph/GraphTitle.css
new file mode 100644
index 0000000..14b3e7b
--- /dev/null
+++ b/summe/src/component/graph/GraphTitle.css
@@ -0,0 +1,33 @@
+.description{
+    position: relative;
+    margin-left: 0.5rem;
+}
+
+.description>div{
+    display: none;
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    left: 0;
+    width: max-content;
+    font-size: 1rem;
+    background-color: #B0BEC5;
+    padding: 0.5rem;
+    color: white;
+    z-index: 1;
+}
+
+.description>div::before{
+    content: "";
+    position: absolute;
+    top: -0.5rem;
+    left: 0.5rem;
+    width: 0;
+    height: 0;
+    border-left: 0.5rem solid transparent;
+    border-right: 0.5rem solid transparent;
+    border-bottom: 0.5rem solid #B0BEC5;
+}
+
+.description:hover>div{
+    display: inline-block;
+}
\ No newline at end of file
diff --git a/summe/src/component/graph/GraphWrapper.jsx b/summe/src/component/graph/GraphWrapper.jsx
index 05cadc4..c70e9f8 100644
--- a/summe/src/component/graph/GraphWrapper.jsx
+++ b/summe/src/component/graph/GraphWrapper.jsx
@@ -1,4 +1,5 @@
 import ApexCharts from "react-apexcharts";
+import "./GraphTitle.css";
 
 const LoadingBox = () => {
     return (
@@ -8,9 +9,23 @@ const LoadingBox = () => {
     );
 };
 
-export default function GraphWrapper({ data, type, height, width }) {
+const GraphTitle = ({ title, description }) => {
+    return (
+        <div style={{ display: "flex", alignItems: "center" }}>
+            <div style={{ fontSize: "1.5rem", fontWeight: "bold" }}>{title}</div>
+            <div className="material-icons description" style={{color: "gray" }}>
+                help_outline
+                <div>{description}</div>
+            </div>
+        </div>
+    );
+    
+};
+
+export default function GraphWrapper({ data, type, height, width, title = "그래프 제목", description = "그래프 설명"}) {
     return (
         <div style={{width:width,height:height,display:"inline-block"}}>
+            <GraphTitle title={title} description={description}/>
             {data
                 ? <ApexCharts
                     options={data.options}
diff --git a/summe/src/index.css b/summe/src/index.css
index ec2585e..6a67bdb 100644
--- a/summe/src/index.css
+++ b/summe/src/index.css
@@ -1,8 +1,15 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
+
+html,body{
+  margin: 0;
+  padding: 0;
+}
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }