💄 Fix: 스타일 수정

romantech · Mar 10, 2022 · b740135 · b740135
1 parent 3734c21
commit b740135
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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;