[FE-data] Fix an issue where a database could not be selected when entering the Create Dataset menu in the navigation bar #287

frontend-web/src/assets/images/icon/angle-left.svg

@@ -1,3 +1,3 @@
 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M9 13a.996.996 0 0 1-.707-.293l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 1 1 1.414 1.414L5.414 7l4.294 4.294A1 1 0 0 1 9 13z" fill="#fff"/>
+    <path d="M9 13a.996.996 0 0 1-.707-.293l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 1 1 1.414 1.414L5.414 7l4.294 4.294A1 1 0 0 1 9 13z" />
 </svg>

frontend-web/src/pages/Data/DataSet/index.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useLayoutEffect, useState } from 'react';
-import { MenuItem, Select, Stack, TextField } from '@mui/material';
+import { MenuItem, Select, Stack, TextField, Typography } from '@mui/material';
 import { useAlert } from 'react-alert';
 import PageTitleBox from '@/components/PageTitleBox';
 import SubmitButton from '@/components/button/SubmitButton';
@@ -58,7 +58,7 @@ const DataSet = () => {
   }, [tableList]);
 
   useEffect(() => {
-    getDatabaseId();
+    if (!databaseId) getDatabaseId();
   }, [databaseList, datasetInfo]);
 
   /**
@@ -153,6 +153,7 @@ const DataSet = () => {
           console.log('tableList ', response.data.data.tables);
         } else {
           alert.error('데이터베이스 조회에 실패했습니다.');
+          setTableList([]);
         }
       })
       .catch(error => {
@@ -174,6 +175,8 @@ const DataSet = () => {
         console.log('selectDataset', response.data.data.id, response.data.data.databaseId);
         if (response.data.status === 'SUCCESS') {
           setDatasetInfo(response.data.data);
+        } else {
+          alert.error('데이터베이스 조회에 실패했습니다.');
         }
       })
       .finally(() => {
@@ -186,9 +189,6 @@ const DataSet = () => {
    */
   const excuteQuery = () => {
     showLoading();
-    if (datasetInfo.query.trim().length < 1) {
-      snackbar.info('쿼리를 입력해주세요.');
-    }
     const param = {
       id: databaseId,
       query: datasetInfo.query,
@@ -310,6 +310,14 @@ const DataSet = () => {
           disabled={isModifyMode}
           size="small"
           value={databaseId ?? ''}
+          // renderValue={selected => {
+          //   if (selected.length === 0) {
+          //     return <Typography sx={{ color: '#929292', fontStyle: 'italic' }}>데이터베이스를 선택해 주세요.</Typography>;
+          //   } else {
+          //     const item = databaseList?.find(({ id: value }) => value === selected);
+          //     return item?.name;
+          //   }
+          // }}
           onChange={onChangeDatabaseId}
         >
           {databaseList.map(item => (

frontend-web/src/pages/Widget/WidgetCreate/index.tsx

@@ -120,13 +120,26 @@ const WidgetCreate = () => {
         button={
           <Stack direction="row" gap="10px">
             <Button
-              variant="contained"
+              variant="outlined"
               onClick={handleBack}
               disabled={activeStep === 0}
               startIcon={
-                <SvgIcon component={LeftArrow} sx={{ width: '14px', height: '14px', padding: '1px' }} inheritViewBox />
+                <SvgIcon
+                  component={LeftArrow}
+                  sx={{
+                    width: '14px',
+                    height: '14px',
+                    padding: '1px',
+                  }}
+                  inheritViewBox
+                />
               }
-              sx={{ backgroundColor: '#043f84', color: '#fff' }}
+              sx={{
+                color: '#043f84',
+                '&.Mui-disabled &.MuiButton-startIcon': {
+                  color: '#fff',
+                },
+              }}
             >
               이전
             </Button>