Merge pull request #75 from kusitms-28th-Meetup-E/design/#74/chartRes…

…ponsive design : chart responsive
kusitms-28th-Meetup-E · Nov 22, 2023 · ed65eb4 · ed65eb4
2 parents e6d0704 + 908fa6a
commit ed65eb4
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 10 deletions.
diff --git a/src/components/molecules/packbubble/index.tsx b/src/components/molecules/packbubble/index.tsx
@@ -6,6 +6,7 @@ import HighchartsAccessibility from "highcharts/modules/accessibility";
 import HighchartsExporting from "highcharts/modules/exporting";
 import HighchartsReact from "highcharts-react-official";
 import { useNavigate } from "react-router-dom";
+import styled from "styled-components";
 
 import { packbubbleDummydata } from "@/dummy/packBubbleData";
 
@@ -30,7 +31,7 @@ const PackBubble = () => {
     chart: {
       type: "packedbubble",
       width: width,
-      height: 524,
+      height: 524, //524
       backgroundColor: "transparent",
       zIndex: 9,
     },
@@ -120,11 +121,29 @@ const PackBubble = () => {
     series: packbubbleDummydata, // 데이터 값
   };
   return (
-    <HighchartsReact
-      highcharts={Highcharts}
-      options={options}
-    />
+    <Container>
+      <HighchartsReact
+        highcharts={Highcharts}
+        options={options}
+      />
+    </Container>
   );
 };
 
 export default PackBubble;
+
+export const Container = styled.div`
+  @media (max-width: 590px) {
+    .highcharts-legend-item {
+      display: none !important;
+    }
+    .highcharts-root {
+      padding-top: 30px;
+    }
+  }
+  @media (max-width: 400px) {
+    .highcharts-root {
+      padding-top: 80px;
+    }
+  }
+`;
diff --git a/src/components/organisms/Home/BubbleChart.tsx b/src/components/organisms/Home/BubbleChart.tsx
@@ -47,12 +47,11 @@ const Container = styled.div`
 `;
 
 const BubbleCover = styled.div`
-  width: 1080px; // 여기 반응형 작업 잘하기
+  max-width: 1080px;
+  width: 94.12%; // 여기 반응형 작업 잘하기
   height: 474px;
   position: absolute;
   top: 0;
-  left: 0;
-  right: 0;
   margin: 0 auto;
 `;
 
@@ -66,6 +65,28 @@ const Date = styled.div`
     margin-top: 8px;
     width: 60px;
   }
+  @media (max-width: 850px) {
+    font-size: 1.2rem;
+    line-height: 28px;
+    img {
+      width: 50px;
+    }
+  }
+  @media (max-width: 590px) {
+    left: 0;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    font-size: 1.3rem;
+    .firstLine,
+    .secondLine {
+      margin-right: 10px;
+    }
+    img {
+      width: 60px;
+      margin-top: 5px;
+    }
+  }
   @media (max-width: 400px) {
     top: 30px;
     left: 0;
@@ -80,6 +101,7 @@ const Date = styled.div`
     }
     img {
       width: 60px;
+      margin-top: 5px;
     }
   }
 `;
@@ -99,6 +121,19 @@ const Title = styled.div`
 
   position: absolute;
   bottom: 0;
+  @media (max-width: 850px) {
+    font-size: 1.6rem;
+    line-height: 28px;
+  }
+  @media (max-width: 590px) {
+    left: 0;
+    right: 0;
+    bottom: -50px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    font-size: 1.3rem;
+  }
 
   @media (max-width: 400px) {
     left: 0;

diff --git a/src/components/organisms/Home/MainTopic.tsx b/src/components/organisms/Home/MainTopic.tsx
@@ -90,7 +90,7 @@ const TopicWrapper = styled.div`
   @media (max-width: 880px) {
     display: flex;
     flex-wrap: wrap;
-    width: 400px;
+    width: 560px;
     justify-content: center;
     margin: 0 auto;
     & > div {
@@ -102,7 +102,7 @@ const TopicWrapper = styled.div`
 
   @media (max-width: 564px) {
     flex-wrap: wrap;
-    width: 200px;
+    width: 340px;
     justify-content: center;
     margin: 0 auto;
     & > div {