diff --git a/src/components/FormOptions.tsx b/src/components/FormOptions.tsx index a9b6f4c..6d47e7f 100644 --- a/src/components/FormOptions.tsx +++ b/src/components/FormOptions.tsx @@ -106,28 +106,20 @@ export default function FormOptions(): JSX.Element { const StyledWrapper = styled.section` ${FlexCenterColumn}; - gap: 1rem; + width: 100%; + gap: 2rem; h1 { - width: 15%; + //width: 15%; font-size: 1.8rem; font-weight: bold; } - - & > div { - width: 100%; - } `; const StyledFields = styled.section` - width: 100%; ${FlexCenterRow}; gap: 2rem; & > div { - width: 90%; - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: center; + ${FlexCenterRow}; gap: 1rem; } `; diff --git a/src/pages/ShoppingInsight.tsx b/src/pages/ShoppingInsight.tsx index a09e81e..0b5785a 100644 --- a/src/pages/ShoppingInsight.tsx +++ b/src/pages/ShoppingInsight.tsx @@ -33,18 +33,19 @@ export default function ShoppingInsight(): JSX.Element { const StyledInsightWrapper = styled.section` width: 100%; height: 100%; - padding: 1rem; + overflow: hidden; `; const StyledFormOptions = styled.section` width: 100%; height: 30%; - padding: 1.5rem; display: flex; align-items: center; + background: #f2f4f4; `; const StyledLineChart = styled.section` ${FlexCenterRow}; + background: rgba(234, 237, 237, 0.87); height: 70%; `; diff --git a/src/types/shoppingInsight.d.ts b/src/types/shoppingInsight.d.ts index b0106b0..cd38edf 100644 --- a/src/types/shoppingInsight.d.ts +++ b/src/types/shoppingInsight.d.ts @@ -1,3 +1,10 @@ +// process.env 타입 +declare namespace NodeJS { + interface ProcessEnv { + [key: string]: string; + } +} + type ValueType = string | number | boolean; type HandlerCallback = ( type: keyof RequestParams, @@ -22,13 +29,6 @@ type Category = | '50000009' // 여가/생활편의 | '50000010'; // 면세점 -// process.env 타입 -declare namespace NodeJS { - interface ProcessEnv { - [key: string]: string; - } -} - interface RequestParams { startDate: string; endDate: string;