diff --git a/src/components/GraphBox/GraphBox.jsx b/src/components/GraphBox/GraphBox.jsx
index 187f1ee..ea8cf12 100644
--- a/src/components/GraphBox/GraphBox.jsx
+++ b/src/components/GraphBox/GraphBox.jsx
@@ -1,14 +1,12 @@
-import React, { useState } from 'react';
+import React from 'react';
import * as S from './GraphBox.style';
-const GraphBox = ({ category, children }) => {
+const GraphBox = ({ title, children }) => {
return (
- <>
-
- {category}
- {children}
-
- >
+
+ {title}
+ {children}
+
);
};
diff --git a/src/components/GraphBox/GraphBox.style.js b/src/components/GraphBox/GraphBox.style.js
index 4785af2..c7eb3db 100644
--- a/src/components/GraphBox/GraphBox.style.js
+++ b/src/components/GraphBox/GraphBox.style.js
@@ -1,33 +1,31 @@
-import styled, { css } from 'styled-components';
+import { BREAKPOINTS } from '@/styles';
+import styled from 'styled-components';
-export const Wrapper = styled.div`
+export const ChartWrapper = styled.div`
display: flex;
flex-direction: column;
- margin: 20px 0;
+ gap: 10px;
+ width: calc(50% - 16px);
+
+ @media (max-width: ${BREAKPOINTS[1]}px) {
+ width: 100%;
+ }
`;
-export const Label = styled.div`
- position: relative;
- font-size: 28px;
+export const ChartTitle = styled.h2`
+ font-size: 18px;
font-weight: 600;
- color: #0d0d0d;
- text-align: left;
`;
-export const Box = styled.div`
- max-width: 100%;
- position: relative;
+export const Chart = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
border-radius: 20px;
border: 1px solid #aecfff;
- box-sizing: border-box;
- overflow: auto;
- padding: 20px;
- margin: 28px 0;
- height: 332px;
-
- * {
- max-width: 100%;
- height: auto;
- display: block;
- }
+ background: #fff;
+ padding: 0 30px;
+ width: 100%;
+ height: 100%;
+ max-height: 300px;
`;