Merge pull request #87 from SVTeamB-POISON/fix/#86

fix : 랭킹 hotfix
SVTeamB-POISON · Feb 2, 2023 · d49dc8e · d49dc8e
2 parents fcb2d09 + 7c6db52
commit d49dc8e
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 21 deletions.
diff --git a/src/components/BarChart/index.tsx b/src/components/BarChart/index.tsx
@@ -14,7 +14,6 @@ export default function BarChart({
   for (let n in ranklabel) {
     dataSet.push({ x: ranklabel[n], y: rankdata[n] });
   }
-  const graphType = chartnumber === 1 ? "bar" : "pie";
   return (
     <ApexCharts
       type={"bar"}
@@ -63,7 +62,7 @@ export default function BarChart({
           },
           title: {
             text: "Flower",
-            offsetY: 140,
+            offsetY: 80,
             offsetX: -20,
             style: {
               color: "#fff",
@@ -99,12 +98,12 @@ export default function BarChart({
         },
 
         colors: [
-          "#4ecdc4",
-          "#c7f464",
-          "#f9a3a4",
-          "#f46036",
-          "#00b1f2",
-          "#13D8AA",
+          "#67E09C",
+          "#3E8DF3",
+          "#F3B344",
+          "#EB5564",
+          "#735EC9",
+          "#F2E416",
         ],
 
         stroke: {
@@ -115,6 +114,8 @@ export default function BarChart({
           labels: {
             colors: ["#fff"],
           },
+          offsetY: -5,
+          offsetX: 15,
         },
         responsive: [
           {
@@ -132,20 +133,29 @@ export default function BarChart({
                 title: {
                   text: "조회수",
                   rotate: 0,
-                  offsetY: -80,
+                  offsetY: -50,
                   offsetX: 25,
                   style: {
                     fontSize: "12",
                     color: "#fff",
                   },
                 },
               },
-              Xaxis: {
+              xaxis: {
                 title: {
-                  text: "Flower",
-                  offsetY: 85,
+                  text: "Flowers",
+                  offsetY: 140,
                   offsetX: -20,
+                  style: {
+                    fontSize: "12",
+                  },
+                },
+              },
+              legend: {
+                labels: {
+                  colors: ["#fff"],
                 },
+                offsetY: -45,
               },
             },
           },

diff --git a/src/components/NavigationBar/styles.module.scss b/src/components/NavigationBar/styles.module.scss
@@ -87,11 +87,11 @@
   }
 }
 .encyBTN {
-  color: #3d8a71;
+  color: #4833ad;
   margin-left: 1rem;
   font-size: 1.4rem;
   &:hover {
-    color: #002c1d;
+    color: var(--button-color);
   }
   @include tablet {
     margin-left: 2rem;
@@ -103,11 +103,11 @@
   }
 }
 .rankBTN {
-  color: #3d8a71;
+  color: #4833ad;
   margin-left: 1rem;
   font-size: 1.4rem;
   &:hover {
-    color: #002c1d;
+    color: var(--button-color);
   }
   @include tablet {
     margin-left: 2rem;

diff --git a/src/components/PieChart/index.tsx b/src/components/PieChart/index.tsx
@@ -14,7 +14,6 @@ export default function PieChart({
   for (let n in ranklabel) {
     dataSet.push({ x: ranklabel[n], y: rankdata[n] });
   }
-  const graphType = chartnumber === 1 ? "bar" : "pie";
   return (
     <ApexCharts
       type="pie"
@@ -31,6 +30,14 @@ export default function PieChart({
             enabled: false,
           },
         },
+        colors: [
+          "#67E09C",
+          "#3E8DF3",
+          "#F3B344",
+          "#EB5564",
+          "#735EC9",
+          "#F2E416",
+        ],
         plotOptions: {
           pie: {
             expandOnClick: true,
@@ -52,7 +59,7 @@ export default function PieChart({
         },
         title: {
           text: "검색랭킹",
-          align: "center",
+          align: "left",
           style: {
             color: "#fff",
           },

diff --git a/src/components/RankList/styles.module.scss b/src/components/RankList/styles.module.scss
@@ -28,7 +28,7 @@
 }
 
 .poison {
-  position: fixed;
+  position: absolute;
   left: 7rem;
   margin-top: 2.2rem;
   z-index: 700;

diff --git a/src/components/RankTop/styles.module.scss b/src/components/RankTop/styles.module.scss
@@ -44,7 +44,7 @@
 .poison {
   position: fixed;
   margin-left: 4rem;
-  margin-top: 6rem;
+  margin-top: 7rem;
   z-index: 700;
   width: 3.5rem;
   @include tablet {
@@ -56,7 +56,7 @@
 }
 
 .medal {
-  position: fixed;
+  position: absolute;
   margin-right: 4rem;
   margin-top: 7rem;
   width: 2.5rem;