🚸 Add: 데이터 없을 때 안내 문구 표시

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

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/src/components/FormOptions.tsx b/src/components/FormOptions.tsx
@@ -109,14 +109,13 @@ const StyledWrapper = styled.section`
   width: 100%;
   gap: 2rem;
   h1 {
-    //width: 15%;
     font-size: 1.8rem;
     font-weight: bold;
   }
 `;
 const StyledFields = styled.section`
   ${FlexCenterRow};
-  gap: 2rem;
+  gap: 3rem;
 
   & > div {
     ${FlexCenterRow};

diff --git a/src/components/TextInput.tsx b/src/components/TextInput.tsx
@@ -15,7 +15,7 @@ export default function TextInput({
   const [status, setStatus] = useState<'' | 'warning' | 'error'>('');
 
   const onChangeHandler = ({ target }: React.ChangeEvent<HTMLInputElement>) => {
-    const isValid = target.value.length >= 2;
+    const isValid = target.value.length >= 1;
     setStatus(isValid ? '' : 'error');
     callback(paramKey, target.value);
   };

diff --git a/src/pages/ShoppingInsight.tsx b/src/pages/ShoppingInsight.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components/macro';
 import { useSelector } from 'react-redux';
-import { Spin } from 'antd';
+import { Empty, Spin } from 'antd';
 import FormOptions from '../components/FormOptions';
 import Chart from '../components/Chart';
 import { RootState } from '../modules';
@@ -18,25 +18,37 @@ export default function ShoppingInsight(): JSX.Element {
     <StyledInsightWrapper>
       <StyledFormOptions>
         <FormOptions />
+        <StyledSpan>쇼핑인사이트 키워드 연령별 트렌드 조회</StyledSpan>
       </StyledFormOptions>
       <StyledLineChart>
         {loading ? (
           <Spin size="large" />
+        ) : data?.length > 0 && error === null ? (
+          <Chart data={data} />
         ) : (
-          data?.length > 0 && <Chart data={data} />
+          <Empty description="데이터가 없어요! 필수 항목을 모두 선택한 뒤 검색해보세요" />
         )}
       </StyledLineChart>
     </StyledInsightWrapper>
   );
 }
 
+const StyledSpan = styled.span`
+  font-size: 0.88rem;
+  color: #919191;
+  position: absolute;
+  right: 20px;
+  bottom: 20px;
+`;
+
 const StyledInsightWrapper = styled.section`
   width: 100%;
   height: 100%;
   overflow: hidden;
 `;
 
 const StyledFormOptions = styled.section`
+  position: relative;
   width: 100%;
   height: 30%;
   display: flex;
@@ -48,4 +60,9 @@ const StyledLineChart = styled.section`
   ${FlexCenterRow};
   background: rgba(234, 237, 237, 0.87);
   height: 70%;
+
+  .ant-empty-description {
+    font-size: 1rem;
+    color: #919191;
+  }
 `;