테이블 없음 스토리북 추가

Author: prisml

src/components/ai_layout/TableChart.jsx

@@ -2061,6 +2061,45 @@ class TableChart extends Component {
                     </div>
                 </Fragment>
             )
+        } else if (ChartState == 'NoTable') {
+            return (
+                <Fragment>
+                    <div className={Styles.popup_wrap}>
+                        <header className={Styles.pop_header}>
+                            <h1>테이블 불러오기</h1>
+                            <button
+                                onClick={this.close}
+                                className={`${Styles.btn_back} ${Styles.imbtn_pop_close}`}
+                            >
+                                <span className={Styles.blind}>닫기</span>
+                            </button>
+                            <a href="/" className={Styles.btn} role="button">적용하기</a>
+                        </header>
+                        <div className={`${Styles.section_container} ${Styles.chart_container}`}>
+                            {/* [D] 메뉴 카테고리 선택에 따라 텍스트 변경  */}
+                            {/* 창 조절하기 버튼을 누르면 fold 클래스 추가 */}
+                            <section className={`${Styles.aside}`}>
+                                <h2 className={Styles.blind}>테이블 추가하기</h2>
+                                <div className={Styles.add_btn_box}>
+                                    <a href="/" role="button">테이블 추가하기</a>
+                                </div>
+                                <ul className={Styles.list}>
+                                </ul>
+                                <a href="/" role="button" className={Styles.split_bar}>
+                                    <span className={Styles.blind}>창 조절하기</span>
+                                </a>
+                            </section>
+                            <div className={Styles.container_inner}>
+                                <section className={Styles.content}>
+                                    <p className={Styles.caution_dsc}>
+                                        먼저 테이블을 추가해 주세요
+                                    </p>
+                                </section>
+                            </div>
+                        </div>
+                    </div>
+                </Fragment>
+            )
         } else {
             return (
                 <Fragment>

src/stories/index.js

@@ -52,22 +52,22 @@ export default function Provider({ story }) {
 Theme.type = 'entry';
 storiesOf('Popup', module)
     .addDecorator((story) => <Provider story={story()} />)
-    .add('오브젝트 선택 팝업', () => <Sample SampleState='ObjectSelect' />)
-    .add('파일 올리기 팝업', () => <Sample SampleState='FileUpload' />)
-    .add('그리기 팝업', () => <Sample SampleState='Drawing' />)
-    .add('짧은 글상자 팝업', () => <Sample SampleState='ShortWrite' />)
-    .add('여러줄 글상자 팝업', () => <Sample SampleState='MultiWrite' />)
-    .add('확장블럭 팝업', () => <Sample SampleState='ExpandBlock' />)
-    .add('소리선택 팝업', () => <Sample SampleState='SoundSelect' />)
-    .add('소리 올리기', () => <Sample SampleState='SoundUpload' />)
-    .add('회원가입1', () => <Sample SampleState='SignUp1' />)
-    .add('회원가입2', () => <Sample SampleState='SignUp2' />)
-    .add('회원가입3', () => <Sample SampleState='SignUp3' />)
-    .add('회원가입4', () => <Sample SampleState='SignUp4' />)
-    .add('회원가입5', () => <Sample SampleState='SignUp5' />)
-    .add('로그인', () => <Sample SampleState='Login' />)
-    .add('툴팁', () => <Sample SampleState='Tooltip' />)
-    .add('나의 작품 - 리스트', () => <Sample SampleState='MyProduct' />)
+    .add('오브젝트 선택 팝업', () => <Sample SampleState="ObjectSelect" />)
+    .add('파일 올리기 팝업', () => <Sample SampleState="FileUpload" />)
+    .add('그리기 팝업', () => <Sample SampleState="Drawing" />)
+    .add('짧은 글상자 팝업', () => <Sample SampleState="ShortWrite" />)
+    .add('여러줄 글상자 팝업', () => <Sample SampleState="MultiWrite" />)
+    .add('확장블럭 팝업', () => <Sample SampleState="ExpandBlock" />)
+    .add('소리선택 팝업', () => <Sample SampleState="SoundSelect" />)
+    .add('소리 올리기', () => <Sample SampleState="SoundUpload" />)
+    .add('회원가입1', () => <Sample SampleState="SignUp1" />)
+    .add('회원가입2', () => <Sample SampleState="SignUp2" />)
+    .add('회원가입3', () => <Sample SampleState="SignUp3" />)
+    .add('회원가입4', () => <Sample SampleState="SignUp4" />)
+    .add('회원가입5', () => <Sample SampleState="SignUp5" />)
+    .add('로그인', () => <Sample SampleState="Login" />)
+    .add('툴팁', () => <Sample SampleState="Tooltip" />)
+    .add('나의 작품 - 리스트', () => <Sample SampleState="MyProduct" />)
     .add('나의 작품 - 작품 없음', () => <Sample />)
     .add('툴팁', () => <Tooltips />)
     .add('확장블록', () => <Popup type="expansion" data={EXPANSION_SAMPLE} />)
@@ -416,8 +416,10 @@ storiesOf('AiLayout', module)
         <TableChart ChartState="DepthHistogram" NoResultText="계열을 선택해 주세요." />
     ))
     .add('데이터 차트 - 히스토그램 그래프', () => <TableChart ChartState="DepthHistogramGraph" />)
+    .add('데이터 차트 - 테이블 없음', () => <TableChart ChartState="NoTable" />)
     .add('데이터 차트 - 요약', () => <TableSummary />)
     .add('데이터 차트 - 요약 모두', () => <TableSummary SummaryState="Total" />)
+    .add('데이터 차트 - test', () => <DataAnalytics />)
     .add('차트', () => (
         <Chart table={[TABLE_SAMPLE2.fields, ...TABLE_SAMPLE2.origin]} type="line" />
     ))
@@ -547,7 +549,7 @@ storiesOf('AiLayout', module)
                             maxDepth: 8,
                             gainThreshold: 0.01,
                             distribution: [[0.9907407407407424, 0.009259259259259259]],
-                        }
+                        },
                     },
                     right: {
                         kind: 'classifier',