feat: #247 통계 전용 그래프 박스 컴포넌트

src/components/GraphBox/GraphBox.jsx

@@ -0,0 +1,15 @@
+import React, { useState } from 'react';
+import * as S from './GraphBox.style';
+
+const GraphBox = ({ category, children }) => {
+  return (
+    <>
+      <S.Wrapper>
+        <S.Label>{category}</S.Label>
+        <S.Box>{children}</S.Box>
+      </S.Wrapper>
+    </>
+  );
+};
+
+export default GraphBox;

src/components/GraphBox/GraphBox.style.js

@@ -0,0 +1,33 @@
+import styled, { css } from 'styled-components';
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 20px 0;
+`;
+
+export const Label = styled.div`
+  position: relative;
+  font-size: 28px;
+  font-weight: 600;
+  color: #0d0d0d;
+  text-align: left;
+`;
+
+export const Box = styled.div`
+  max-width: 100%;
+  position: relative;
+  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;
+  }
+`;

src/components/GraphBox/index.js

@@ -0,0 +1 @@
+export { default as GraphBox } from './GraphBox';

src/components/index.js

@@ -15,3 +15,5 @@ export * from './Sidebar';
 export * from './Table';
 export * from './TabMenu';
 export * from './Footer';
+export * from './DaterangePicker';
+export * from './GraphBox';