Merge branch 'feature' into develop

update path

backend-api/.env.ci

@@ -1,6 +1,7 @@
-
+DOCKER_LOCAL_VOLUME=/home/vanilla/data/jenkins-workspace/workspace/sellerking-dev/vanillameta-dev-serverless-api/backend-api/
+DOCKER_LOCAL_AWS=/home/vanilla/.aws
 ACCESS_SECRET=plzInsert
 REFRESH_SECRET=plzInsert
 JWT_ACCESS_SECRET=true
 URL_ACCESS_SECRET=plzInsert
-CORS_ORIGIN = [http://localhost:3000', 'undefined']
+CORS_ORIGIN = [http://localhost:3000', 'undefined', 'https://vanillameta.vanillabrain.com/']

backend-api/Dockerfile.dev

@@ -1,61 +1,26 @@
-#FROM mysql:5.7
-#
-##ENV DEBIAN_FRONTEND noninteractive
-#
-#RUN apt-get update
-##RUN echo "mysql-server mysql-server/root_password password" | debconf-set-selections
-##RUN echo "mysql-server mysql-server/root_password_again password" | debconf-set-selections
-##RUN apt-get install -y mysql-server
-#
-#ADD ./mysql-init-files /docker-entrypoint-initdb.d
-#
-#EXPOSE 3306
-#
-#CMD ['mysqld']
-#FROM mysql:5.7
-#
-#ADD ./mysql-init-files /docker-entrypoint-initdb.d
-##RUN brew install mysql
-#RUN ./init.sh
-#
-#EXPOSE 3306
-#
-#CMD ["mysqld"]
-FROM ubuntu:18.04
-
-RUN apt-get -qq update
-RUN apt-get -qq upgrade --yes
-RUN apt-get -qq install curl --yes
-RUN curl -sL https://deb.nodesource.com/setup_14.x | bash -
-RUN apt-get -qq install nodejs --yes
-
-RUN apt-get install chromium-browser --yes
-RUN useradd -ms /bin/bash frog
-
-WORKDIR /app
-
-COPY package*.json ./
-
-RUN npm install
-COPY . .
-COPY tsconfig.json .
-COPY tsconfig.build.json .
-RUN npm run build
-
-
-#ENTRYPOINT ["init.sh"]
-EXPOSE 4000
-CMD ["mysqld"]
-
-
-#
-#COPY init.sh .
-#USER root
-#RUN chmod +x init.sh
-#ENTRYPOINT ["sh", "init.sh"]
-
-
-
+##FROM mysql:5.7
+##
+###ENV DEBIAN_FRONTEND noninteractive
+##
+##RUN apt-get update
+###RUN echo "mysql-server mysql-server/root_password password" | debconf-set-selections
+###RUN echo "mysql-server mysql-server/root_password_again password" | debconf-set-selections
+###RUN apt-get install -y mysql-server
+##
+##ADD ./mysql-init-files /docker-entrypoint-initdb.d
+##
+##EXPOSE 3306
+##
+##CMD ['mysqld']
+##FROM mysql:5.7
+##
+##ADD ./mysql-init-files /docker-entrypoint-initdb.d
+###RUN brew install mysql
+##RUN ./init.sh
+##
+##EXPOSE 3306
+##
+##CMD ["mysqld"]
 #FROM ubuntu:18.04
 #
 #RUN apt-get -qq update
@@ -65,31 +30,66 @@ CMD ["mysqld"]
 #RUN apt-get -qq install nodejs --yes
 #
 #RUN apt-get install chromium-browser --yes
-#RUN chmod +x /tmp
 #RUN useradd -ms /bin/bash frog
-#USER frog
-#WORKDIR /home/frog
+#
+#WORKDIR /app
 #
 #COPY package*.json ./
 #
 #RUN npm install
-#FROM mysql:5.7
-#COPY init.sh .
-#EXPOSE 8000
-#ENTRYPOINT [ "sh", "init.sh" ]
-
-#end of Dockerfile.dev
-
-#FROM ubuntu:18.04
-#RUN apt-get -qq update
-#RUN apt-get -qq upgrade --yes
-#RUN apt-get -qq install curl --yes
-#RUN curl -sL https://deb.nodesource.com/setup_14.x | bash -
-#RUN apt-get -qq install nodejs --yes
+#COPY . .
+#COPY tsconfig.json .
+#COPY tsconfig.build.json .
+#RUN npm run build
 #
-#RUN apt-get install chromium-browser --yes
-#RUN chmod +x /tmp
-#RUN useradd -ms /bin/bash frog
-#USER frog
-#WORKDIR /home/frog
-#ADD mysql-init-files/dump_data.sql /docker-entrypoint-initdb.d/
+#
+##ENTRYPOINT ["init.sh"]
+#EXPOSE 4000
+#CMD ["mysqld"]
+#
+#
+##
+##COPY init.sh .
+##USER root
+##RUN chmod +x init.sh
+##ENTRYPOINT ["sh", "init.sh"]
+#
+#
+#
+##FROM ubuntu:18.04
+##
+##RUN apt-get -qq update
+##RUN apt-get -qq upgrade --yes
+##RUN apt-get -qq install curl --yes
+##RUN curl -sL https://deb.nodesource.com/setup_14.x | bash -
+##RUN apt-get -qq install nodejs --yes
+##
+##RUN apt-get install chromium-browser --yes
+##RUN chmod +x /tmp
+##RUN useradd -ms /bin/bash frog
+##USER frog
+##WORKDIR /home/frog
+##
+##COPY package*.json ./
+##
+##RUN npm install
+##FROM mysql:5.7
+##COPY init.sh .
+##EXPOSE 8000
+##ENTRYPOINT [ "sh", "init.sh" ]
+#
+##end of Dockerfile.dev
+#
+##FROM ubuntu:18.04
+##RUN apt-get -qq update
+##RUN apt-get -qq upgrade --yes
+##RUN apt-get -qq install curl --yes
+##RUN curl -sL https://deb.nodesource.com/setup_14.x | bash -
+##RUN apt-get -qq install nodejs --yes
+##
+##RUN apt-get install chromium-browser --yes
+##RUN chmod +x /tmp
+##RUN useradd -ms /bin/bash frog
+##USER frog
+##WORKDIR /home/frog
+##ADD mysql-init-files/dump_data.sql /docker-entrypoint-initdb.d/

backend-api/docker-compose.yml

@@ -1,40 +1,88 @@
+##
+##version: '3.3'
+##
+##services:
+##  db:
+##    build:
+##      context: .
+##      dockerfile: Dockerfile.dev
+##    image: mysql:5.7
+##    #    volumes:
+##    #      - ./mysql-init-files/:/docker-entrypoint-initdb.d/
+##    restart: always
+##    container_name: mmc
+##    environment:
+##      - MYSQL_ALLOW_EMPTY_PASSWORD="true"
+##      - MYSQL_DATABASE= ${DB_NAME}
+##      - MYSQL_USER= ${DB_USERNAME}
+##      - MYSQL_PASSWORD= ${DB_PASSWORD}
+##    env_file:
+##      - .env
+##    ports:
+##      - '3306:3306'
+##    expose:
+##      - '3306'
+##    command: --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
+##             --default_authentication_plugin=mysql_native_password
+##    volumes:
+##      - "./mysql-init-files/:/docker-entrypoint-initdb.d/"
+##      - mysql:/var/lib/mysql
+##      - ./db/conf.d:/etc/mysql/conf.d
 #
-#version: '3.3'
+##version: "3.5"
+##services:
+##  main:
+##    build:
+##      context: ./
+##      dockerfile: ./Dockerfile.dev
+##    ports:
+##      - "4000:4000"
+##    networks:
+##      - vanillameta
+##    depends_on:
+##      - mysql
+##    links:
+##      - "mysql"
+###      - "pg"
+##    env_file:
+##      - .env
+##    tty: true
+##    environment:
+##      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
+##    restart: always
+##
+##  mysql:
+##    container_name: vanillameta_mysql
+##    image: mysql:5.7
+##    ports:
+##      -  "3306:3306"
+##    networks:
+##      - vanillameta
+##    environment:
+##      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
+##      MYSQL_CHARSET: utf8mb4
+##      MYSQL_DATABASE: ${DB_NAME}
+##      MYSQL_USER: ${DB_USERNAME}
+##      MYSQL_PASSWORD: ${DB_PASSWORD}
+##      TZ: Asia/Seoul
+##    restart: always
+##
+##    command:
+##          --default-authentication-plugin=mysql_native_password
+###         --init-file /docker-entrypoint-initdb.d/dump_data.sql
+##    volumes:
+##      - ./mysql:/var/lib/mysql/
+##      - ./db/conf.d:/etc/mysql/conf.d
+##      - ./mysql-init-files/dump_data:/docker-entrypoint-initdb.d/dump_data
 #
-#services:
-#  db:
-#    build:
-#      context: .
-#      dockerfile: Dockerfile.dev
-#    image: mysql:5.7
-#    #    volumes:
-#    #      - ./mysql-init-files/:/docker-entrypoint-initdb.d/
-#    restart: always
-#    container_name: mmc
-#    environment:
-#      - MYSQL_ALLOW_EMPTY_PASSWORD="true"
-#      - MYSQL_DATABASE= ${DB_NAME}
-#      - MYSQL_USER= ${DB_USERNAME}
-#      - MYSQL_PASSWORD= ${DB_PASSWORD}
-#    env_file:
-#      - .env
-#    ports:
-#      - '3306:3306'
-#    expose:
-#      - '3306'
-#    command: --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
-#             --default_authentication_plugin=mysql_native_password
-#    volumes:
-#      - "./mysql-init-files/:/docker-entrypoint-initdb.d/"
-#      - mysql:/var/lib/mysql
-#      - ./db/conf.d:/etc/mysql/conf.d
-
-#version: "3.5"
+#
+#version: "3.7"
 #services:
 #  main:
 #    build:
 #      context: ./
 #      dockerfile: ./Dockerfile.dev
+#    image: mysql
 #    ports:
 #      - "4000:4000"
 #    networks:
@@ -43,7 +91,6 @@
 #      - mysql
 #    links:
 #      - "mysql"
-##      - "pg"
 #    env_file:
 #      - .env
 #    tty: true
@@ -53,11 +100,12 @@
 #
 #  mysql:
 #    container_name: vanillameta_mysql
-#    image: mysql:5.7
+#    image: mysql
 #    ports:
 #      -  "3306:3306"
 #    networks:
-#      - vanillameta
+#        - vanillameta
+#
 #    environment:
 #      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
 #      MYSQL_CHARSET: utf8mb4
@@ -66,148 +114,100 @@
 #      MYSQL_PASSWORD: ${DB_PASSWORD}
 #      TZ: Asia/Seoul
 #    restart: always
-#
-#    command:
-#          --default-authentication-plugin=mysql_native_password
-##         --init-file /docker-entrypoint-initdb.d/dump_data.sql
-#    volumes:
-#      - ./mysql:/var/lib/mysql/
-#      - ./db/conf.d:/etc/mysql/conf.d
-#      - ./mysql-init-files/dump_data:/docker-entrypoint-initdb.d/dump_data
-
-
-version: "3.7"
-services:
-  main:
-    build:
-      context: ./
-      dockerfile: ./Dockerfile.dev
-    image: mysql
-    ports:
-      - "4000:4000"
-    networks:
-      - vanillameta
-    depends_on:
-      - mysql
-    links:
-      - "mysql"
-    env_file:
-      - .env
-    tty: true
-    environment:
-      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
-    restart: always
-
-  mysql:
-    container_name: vanillameta_mysql
-    image: mysql
-    ports:
-      -  "3306:3306"
-    networks:
-        - vanillameta
-
-    environment:
-      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
-      MYSQL_CHARSET: utf8mb4
-      MYSQL_DATABASE: ${DB_NAME}
-      MYSQL_USER: ${DB_USERNAME}
-      MYSQL_PASSWORD: ${DB_PASSWORD}
-      TZ: Asia/Seoul
-    restart: always
-    command: --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
-             --default_authentication_plugin=mysql_native_password
-
-    volumes:
-        - mysql:/var/lib/mysql
-        - ./db/conf.d:/etc/mysql/conf.d
-        - ./mysql-init-files/dump_data:/docker-entrypoint-initdb.d
-
-  #  mariadb:
-  #    container_name: vanillameta_mariadb
-  #    extra_hosts:
-  #      - "host.docker.internal:host-gateway"
-  #    image: mariadb
-  #    ports:
-  #      -  "3308:3308"
-  #    networks:
-  #      - vanillameta
-  #    environment:
-  #      MYSQL_ROOT_PASSWORD: 'strongpassword'
-  #      MYSQL_CHARSET: utf8mb4
-  #      MYSQL_DATABASE: ${DB_NAME}
-  #      MYSQL_USER: ${DB_USERNAME}
-  #      MYSQL_PASSWORD: ${DB_PASSWORD}
-  #      TZ: Asia/Seoul
-  #    restart: always
-  #    volumes:
-  #      - ./db:/var/lib/maria
-
-#  pg:
-#    container_name: vanillameta_pg
-#    image: postgres
-#    ports:
-#      -  "5432:5432"
-#    networks:
-#      - vanillameta
-#    environment:
-#      POSTGRES_ROOT_PASSWORD: 'strongpassword'
-#      POSTGRES_CHARSET: utf8mb4
-#      POSTGRES_DATABASE: ${DB_NAME}
-#      POSTGRES_USER: ${DB_USERNAME}
-#      POSTGRES_PASSWORD: ${DB_PASSWORD}
-#      POSTGRES_HOST_AUTH_METHOD: "trust"
-#      TZ: Asia/Seoul
-#    restart: always
-#    #    command: --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
-#    volumes:
-#      - mysql:/var/lib/mysql
-#      - ./db/conf.d:/etc/porstgressql/data
-
-
-#  oracledb:
-#    container_name: vanillameta_oracle
-#    image: oracleinanutshell/oracle-xe-11g
-#    ports:
-#      - "1521:1521"
-#    networks:
-#      - vanillameta
-#    environment:
-#      ORACLE_CHARSET: utf8mb4
-#      ORACLE_DATABASE: ${DB_NAME}
-#      ORACLE_USER: ${DB_USERNAME}
-#      ORACLE_PASSWORD: ${DB_PASSWORD}
-#      TZ: Asia/Seoul
-#    restart: always
-#      #    command: --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
-#    volumes:
-#      - mysql:/var/lib/mysql
-#      - ./db/conf.d:/etc/porstgressql/data
-
-
-#
-#  mssql:
-#    container_name: vanillameta_mssql
-#    image: mcr.microsoft.com/mssql/server:2019-latest
-#    user: frog
-#    ports:
-#      -  "1433:1433"
-#    networks:
-#      - vanillameta
-#    environment:
-#      ACCEPT_EULA: "Y"
-#      MSSQL_SA_PASSWORD: 'Qkslffk@123123'
-#
-#
-#
-#    restart: always
+#    command: --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
+#             --default_authentication_plugin=mysql_native_password
 #
 #    volumes:
-#      - ./sqlvolume:/home/frog
+#        - mysql:/var/lib/mysql
+#        - ./db/conf.d:/etc/mysql/conf.d
+#        - ./mysql-init-files/dump_data:/docker-entrypoint-initdb.d
 #
-
+#  #  mariadb:
+#  #    container_name: vanillameta_mariadb
+#  #    extra_hosts:
+#  #      - "host.docker.internal:host-gateway"
+#  #    image: mariadb
+#  #    ports:
+#  #      -  "3308:3308"
+#  #    networks:
+#  #      - vanillameta
+#  #    environment:
+#  #      MYSQL_ROOT_PASSWORD: 'strongpassword'
+#  #      MYSQL_CHARSET: utf8mb4
+#  #      MYSQL_DATABASE: ${DB_NAME}
+#  #      MYSQL_USER: ${DB_USERNAME}
+#  #      MYSQL_PASSWORD: ${DB_PASSWORD}
+#  #      TZ: Asia/Seoul
+#  #    restart: always
+#  #    volumes:
+#  #      - ./db:/var/lib/maria
+#
+##  pg:
+##    container_name: vanillameta_pg
+##    image: postgres
+##    ports:
+##      -  "5432:5432"
+##    networks:
+##      - vanillameta
+##    environment:
+##      POSTGRES_ROOT_PASSWORD: 'strongpassword'
+##      POSTGRES_CHARSET: utf8mb4
+##      POSTGRES_DATABASE: ${DB_NAME}
+##      POSTGRES_USER: ${DB_USERNAME}
+##      POSTGRES_PASSWORD: ${DB_PASSWORD}
+##      POSTGRES_HOST_AUTH_METHOD: "trust"
+##      TZ: Asia/Seoul
+##    restart: always
+##    #    command: --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
+##    volumes:
+##      - mysql:/var/lib/mysql
+##      - ./db/conf.d:/etc/porstgressql/data
+#
+#
+##  oracledb:
+##    container_name: vanillameta_oracle
+##    image: oracleinanutshell/oracle-xe-11g
+##    ports:
+##      - "1521:1521"
+##    networks:
+##      - vanillameta
+##    environment:
+##      ORACLE_CHARSET: utf8mb4
+##      ORACLE_DATABASE: ${DB_NAME}
+##      ORACLE_USER: ${DB_USERNAME}
+##      ORACLE_PASSWORD: ${DB_PASSWORD}
+##      TZ: Asia/Seoul
+##    restart: always
+##      #    command: --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
+##    volumes:
+##      - mysql:/var/lib/mysql
+##      - ./db/conf.d:/etc/porstgressql/data
+#
+#
+##
+##  mssql:
+##    container_name: vanillameta_mssql
+##    image: mcr.microsoft.com/mssql/server:2019-latest
+##    user: frog
+##    ports:
+##      -  "1433:1433"
+##    networks:
+##      - vanillameta
+##    environment:
+##      ACCEPT_EULA: "Y"
+##      MSSQL_SA_PASSWORD: 'Qkslffk@123123'
+##
+##
+##
+##    restart: always
+##
+##    volumes:
+##      - ./sqlvolume:/home/frog
+##
+#
+##
+#volumes:
+#  mysql:
+#networks:
+#  vanillameta:
 #
-volumes:
-  mysql:
-networks:
-  vanillameta:
-

frontend-web/src/components/Copyright.tsx

@@ -9,7 +9,7 @@ const Copyright = (props: any) => {
         href="https://vanillabrain.com/"
         sx={{ fontSize: '13px', color: '#767676', fontWeight: 'bold', textDecoration: 'none' }}
       >
-        ⓒ VanillaBrain Icn.
+        ⓒ VanillaBrain Inc.
       </Link>
     </Typography>
   );

frontend-web/src/constant/index.ts

@@ -75,7 +75,9 @@ export const AGGREGATION_LIST = [
   { label: '최소', value: WIDGET_AGGREGATION.MIN },
 ];
 
-export const LABEL_LIST = [{ label: '표시', value: true }];
+export const DISPLAY_LIST = [{ label: '표시', value: true }];
+
+export const HIDDEN_LIST = [{ label: '숨기기', value: true }];
 
 export const PIE_LABEL_LIST = [
   { label: '이름', value: '{b}' },

frontend-web/src/layouts/Footer/Footer.tsx

@@ -27,7 +27,7 @@ const Footer = props => {
             color: '#767676',
           }}
         >
-          ⓒ VanillaBrain Icn.
+          ⓒ VanillaBrain Inc.
         </Typography>
       </Link>
     </Stack>

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

@@ -112,12 +112,7 @@ const WidgetAttributeSelect = props => {
           overflow: 'hidden',
         }}
       >
-        <WidgetViewer
-          title={widgetOption.title}
-          widgetType={widgetOption.componentType}
-          widgetOption={option}
-          dataSet={data}
-        />
+        <WidgetViewer title={title} widgetType={widgetOption.componentType} widgetOption={option} dataSet={data} />
       </Box>
       <WidgetSetting
         widgetTypeName={widgetTypeName}

frontend-web/src/widget/modules/gaugechart/GaugeChart.tsx

@@ -33,7 +33,6 @@ const GaugeChart = props => {
         },
         series: [
           {
-            name: option.title,
             type: 'gauge',
             progress: {
               show: true,
@@ -45,7 +44,7 @@ const GaugeChart = props => {
             data: [
               {
                 value: getAggregationData(option.aggregation, dataSet, option.field),
-                name: option.field,
+                name: option?.fieldLabel ? option.fieldLabel : option.field,
               },
             ],
             itemStyle: {

frontend-web/src/widget/modules/linechart/LineChart.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import ReactECharts from 'echarts-for-react';
 import { getAggregationDataForChart, getGridSize, getLegendOption } from '@/widget/modules/utils/chartUtil';
+import { AGGREGATION_LIST } from '@/constant';
 
 const LineChart = props => {
   const { option, dataSet, axis = 'x', seriesOp, defaultOp, createOp } = props;
@@ -49,7 +50,11 @@ const LineChart = props => {
       // console.log('aggrData : ', aggrData);
       if (item.field) {
         const series = {
-          name: option.legendAggregation ? `${item.field} (${item.aggregation})` : item.field,
+          name:
+            (item?.fieldLabel ? item.fieldLabel : item.field) +
+            (option?.legendAggregation
+              ? ` (${AGGREGATION_LIST.find(element => element.value === item.aggregation).label})`
+              : ''),
           data: aggrData.map(dataItem => dataItem[item.field]),
           type: item.type ? item.type : 'line',
           color: item.color,

frontend-web/src/widget/modules/mixedchart/MixedLinePieChart.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import ReactECharts from 'echarts-for-react';
 import { getAggregationDataForChart, getGridSize, getLegendOption } from '@/widget/modules/utils/chartUtil';
+import { AGGREGATION_LIST } from '@/constant';
 
 const MixedLinePieChart = props => {
   const { option, dataSet, axis = 'x', seriesOp, defaultOp, createOp } = props;
@@ -48,7 +49,11 @@ const MixedLinePieChart = props => {
       console.log('aggrData : ', aggrData);
       if (item.field) {
         const series = {
-          name: option.legendAggregation ? `${item.field} (${item.aggregation})` : item.field,
+          name:
+            (item?.fieldLabel ? item.fieldLabel : item.field) +
+            (option?.legendAggregation
+              ? ` (${AGGREGATION_LIST.find(element => element.value === item.aggregation).label})`
+              : ''),
           data: aggrData.map(dataItem => dataItem[item.field]),
           type: item.type ? item.type : 'line',
           color: item.color,

frontend-web/src/widget/modules/mixedchart/MixedLineStackedBarChart.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import ReactECharts from 'echarts-for-react';
 import { getAggregationDataForChart, getGridSize, getLegendOption } from '@/widget/modules/utils/chartUtil';
+import { AGGREGATION_LIST } from '@/constant';
 
 const LineChart = props => {
   const { option, dataSet, axis = 'x', seriesOp, defaultOp, createOp } = props;
@@ -49,7 +50,11 @@ const LineChart = props => {
       // console.log('aggrData : ', aggrData);
       if (item.field && item.type) {
         const series = {
-          name: option.legendAggregation ? `${item.field} (${item.aggregation})` : item.field,
+          name:
+            (item?.fieldLabel ? item.fieldLabel : item.field) +
+            (option?.legendAggregation
+              ? ` (${AGGREGATION_LIST.find(element => element.value === item.aggregation).label})`
+              : ''),
           data: aggrData.map(dataItem => dataItem[item.field]),
           type: item.type,
           color: item.color,

frontend-web/src/widget/modules/radarchart/RadarChart.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import ReactECharts from 'echarts-for-react';
 import { getAggregationDataForChart, getCenter, getLegendOption } from '@/widget/modules/utils/chartUtil';
+import { AGGREGATION_LIST } from '@/constant';
 
 const RadarChart = props => {
   const { option, dataSet, seriesOp, defaultOp, createOp } = props;
@@ -45,7 +46,11 @@ const RadarChart = props => {
       if (item.field) {
         const seriesData = {
           value: aggrData.map(dataItem => dataItem[item.field]),
-          name: option.legendAggregation ? `${item.field} (${item.aggregation})` : item.field,
+          name:
+            (item?.fieldLabel ? item.fieldLabel : item.field) +
+            (option?.legendAggregation
+              ? ` (${AGGREGATION_LIST.find(element => element.value === item.aggregation).label})`
+              : ''),
           itemStyle: {
             color: item.color,
           },

frontend-web/src/widget/settings/Bar3DChartSetting.tsx

@@ -3,7 +3,7 @@ import { Divider, ListItem, ListItemText } from '@mui/material';
 import SelectForm from '@/components/form/SelectForm';
 import { AddButton, RemoveButton } from '@/components/button/AddIconButton';
 import { handleAddClick, handleChange, handleRemoveClick, handleSeriesChange } from '@/widget/utils/handler';
-import { AGGREGATION_LIST, COLUMN_TYPE, LABEL_LIST, WIDGET_AGGREGATION } from '@/constant';
+import { AGGREGATION_LIST, COLUMN_TYPE, DISPLAY_LIST, WIDGET_AGGREGATION } from '@/constant';
 import ColorFieldForm from '@/components/form/ColorFieldForm';
 
 const Bar3DChartSetting = props => {
@@ -87,8 +87,8 @@ const Bar3DChartSetting = props => {
         ))}
         <SelectForm
           name="label"
-          label="레이블"
-          optionList={LABEL_LIST}
+          label="넘버 레이블"
+          optionList={DISPLAY_LIST}
           value={option.label}
           onChange={event => handleChange(event, setOption)}
         />

frontend-web/src/widget/settings/Bubble3DChartSetting.tsx

@@ -3,7 +3,7 @@ import { Divider, ListItem, ListItemText } from '@mui/material';
 import SelectForm from '@/components/form/SelectForm';
 import { AddButton, RemoveButton } from '@/components/button/AddIconButton';
 import { handleAddClick, handleChange, handleRemoveClick, handleSeriesChange } from '@/widget/utils/handler';
-import { COLUMN_TYPE, LABEL_LIST, LEGEND_LIST } from '@/constant';
+import { COLUMN_TYPE, DISPLAY_LIST, LEGEND_LIST } from '@/constant';
 import TextFieldForm from '@/components/form/TextFieldForm';
 import ColorButtonForm from '@/components/form/ColorButtonForm';
 
@@ -37,7 +37,7 @@ const Bubble3DChartSetting = props => {
             <TextFieldForm
               id={`title${index + 1}`}
               name={`title${index + 1}`}
-              label={`시리즈 ${index + 1} 이름`}
+              label={`시리즈 ${index + 1} 레이블`}
               value={item.title}
               onChange={event => handleSeriesChange(event, setOption)}
               endButton={<ColorButtonForm index={index} option={option} setOption={setOption} />}
@@ -98,8 +98,8 @@ const Bubble3DChartSetting = props => {
         ))}
         <SelectForm
           name="label"
-          label="레이블"
-          optionList={LABEL_LIST}
+          label="넘버 레이블"
+          optionList={DISPLAY_LIST}
           value={option.label}
           onChange={event => handleChange(event, setOption)}
         />

frontend-web/src/widget/settings/BubbleChartSetting.tsx

@@ -5,7 +5,7 @@ import ColorButtonForm from '@/components/form/ColorButtonForm';
 import TextFieldForm from '@/components/form/TextFieldForm';
 import { AddButton, RemoveButton } from '@/components/button/AddIconButton';
 import { handleAddClick, handleChange, handleRemoveClick, handleSeriesChange } from '@/widget/utils/handler';
-import { COLUMN_TYPE, LABEL_LIST, LEGEND_LIST } from '@/constant';
+import { COLUMN_TYPE, DISPLAY_LIST, LEGEND_LIST } from '@/constant';
 
 const BubbleChartSetting = props => {
   const { option, setOption, spec } = props;
@@ -36,7 +36,7 @@ const BubbleChartSetting = props => {
             <TextFieldForm
               id={`title${index + 1}`}
               name={`title${index + 1}`}
-              label={`시리즈 ${index + 1} 이름`}
+              label={`시리즈 ${index + 1} 레이블`}
               value={item.title}
               onChange={event => handleSeriesChange(event, setOption)}
               endButton={<ColorButtonForm index={index} option={option} setOption={setOption} />}
@@ -86,8 +86,8 @@ const BubbleChartSetting = props => {
         ))}
         <SelectForm
           name="label"
-          label="레이블"
-          optionList={LABEL_LIST}
+          label="넘버 레이블"
+          optionList={DISPLAY_LIST}
           value={option.label}
           onChange={event => handleChange(event, setOption)}
         />

frontend-web/src/widget/settings/CandlestickChartSetting.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Divider, ListItem, ListItemText } from '@mui/material';
 import SelectForm from '@/components/form/SelectForm';
 import { handleChange, handleSeriesChange } from '@/widget/utils/handler';
-import { AGGREGATION_LIST, COLUMN_TYPE, LABEL_LIST } from '@/constant';
+import { AGGREGATION_LIST, COLUMN_TYPE, DISPLAY_LIST } from '@/constant';
 import ColorPickerForm from '@/components/form/ColorPickerForm';
 
 const CandlestickChartSetting = props => {
@@ -65,7 +65,7 @@ const CandlestickChartSetting = props => {
         <SelectForm
           name="mark"
           label="마크 포인트"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
           value={option.mark}
           onChange={event => handleChange(event, setOption)}
         />

frontend-web/src/widget/settings/FunnelChartSetting.tsx

@@ -83,7 +83,7 @@ const FunnelChartSetting = props => {
         />
         <SelectForm
           name="label"
-          label="레이블"
+          label="레이블 타입"
           optionList={PIE_LABEL_LIST}
           value={option.series.label}
           onChange={handleSeriesChange}

frontend-web/src/widget/settings/GaugeChartSetting.tsx

@@ -33,6 +33,13 @@ const GaugeChartSetting = props => {
             />
           }
         />
+        <TextFieldForm
+          id="fieldLabel"
+          name="fieldLabel"
+          label="레이블"
+          value={option.fieldLabel ? option.fieldLabel : ''}
+          onChange={event => handleChange(event, setOption)}
+        />
         <SelectForm
           id="aggregation"
           name="aggregation"

frontend-web/src/widget/settings/HeatmapChartSetting.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ListItem, ListItemText } from '@mui/material';
 import SelectForm from '@/components/form/SelectForm';
 import { handleChange } from '@/widget/utils/handler';
-import { AGGREGATION_LIST, COLUMN_TYPE, LABEL_LIST } from '@/constant';
+import { AGGREGATION_LIST, COLUMN_TYPE, DISPLAY_LIST } from '@/constant';
 import ColorFieldForm from '@/components/form/ColorFieldForm';
 
 const HeatmapChartSetting = props => {
@@ -59,8 +59,8 @@ const HeatmapChartSetting = props => {
         />
         <SelectForm
           name="label"
-          label="레이블"
-          optionList={LABEL_LIST}
+          label="넘버 레이블"
+          optionList={DISPLAY_LIST}
           value={option.label}
           onChange={event => handleChange(event, setOption)}
         />

frontend-web/src/widget/settings/Line3DChartSetting.tsx

@@ -3,7 +3,7 @@ import { Divider, ListItem, ListItemText } from '@mui/material';
 import SelectForm from '@/components/form/SelectForm';
 import { AddButton, RemoveButton } from '@/components/button/AddIconButton';
 import { handleAddClick, handleChange, handleRemoveClick, handleSeriesChange } from '@/widget/utils/handler';
-import { AGGREGATION_LIST, COLUMN_TYPE, LABEL_LIST, LEGEND_LIST, WIDGET_AGGREGATION } from '@/constant';
+import { AGGREGATION_LIST, COLUMN_TYPE, DISPLAY_LIST, LEGEND_LIST, WIDGET_AGGREGATION } from '@/constant';
 import ColorButtonForm from '@/components/form/ColorButtonForm';
 
 const Line3DChartSetting = props => {
@@ -102,7 +102,7 @@ const Line3DChartSetting = props => {
           id="legendAggregation"
           name="legendAggregation"
           label="집계 방식 표시"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
           value={option.legendAggregation}
           onChange={event => handleChange(event, setOption)}
         />

frontend-web/src/widget/settings/LineChartSetting.tsx

@@ -4,7 +4,8 @@ import SelectForm from '@/components/form/SelectForm';
 import ColorButtonForm from '@/components/form/ColorButtonForm';
 import { AddButton, RemoveButton } from '@/components/button/AddIconButton';
 import { handleAddClick, handleChange, handleRemoveClick, handleSeriesChange } from '@/widget/utils/handler';
-import { AGGREGATION_LIST, COLUMN_TYPE, LABEL_LIST, LEGEND_LIST, WIDGET_AGGREGATION } from '@/constant';
+import { AGGREGATION_LIST, COLUMN_TYPE, DISPLAY_LIST, LEGEND_LIST, WIDGET_AGGREGATION } from '@/constant';
+import TextFieldForm from '@/components/form/TextFieldForm';
 
 const LineChartSetting = props => {
   const { option, setOption, seriesItem, axis = 'x', spec } = props;
@@ -56,6 +57,14 @@ const LineChartSetting = props => {
               onChange={event => handleSeriesChange(event, setOption)}
               endButton={<ColorButtonForm index={index} option={option} setOption={setOption} />}
             />
+            <TextFieldForm
+              id={`fieldLabel${index + 1}`}
+              name={`fieldLabel${index + 1}`}
+              label={`레이블`}
+              value={item.fieldLabel ? item.fieldLabel : ''}
+              onChange={event => handleSeriesChange(event, setOption)}
+              endButton={' '}
+            />
             <SelectForm
               id={`aggregation${index + 1}`}
               name={`aggregation${index + 1}`}
@@ -89,15 +98,15 @@ const LineChartSetting = props => {
         ))}
         <SelectForm
           name="label"
-          label="레이블"
-          optionList={LABEL_LIST}
+          label="넘버 레이블"
+          optionList={DISPLAY_LIST}
           value={option.label}
           onChange={event => handleChange(event, setOption)}
         />
         <SelectForm
           name="mark"
           label="마크 포인트"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
           value={option.mark}
           onChange={event => handleChange(event, setOption)}
         />
@@ -116,7 +125,7 @@ const LineChartSetting = props => {
           id="legendAggregation"
           name="legendAggregation"
           label="집계 방식 표시"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
           value={option.legendAggregation}
           onChange={event => handleChange(event, setOption)}
         />

frontend-web/src/widget/settings/MixedDonutPieChartSetting.tsx

@@ -88,7 +88,7 @@ const MixedDonutPieChartSetting = props => {
         />
         <SelectForm
           name="label"
-          label="레이블"
+          label="레이블 타입"
           optionList={PIE_LABEL_LIST}
           value={option.series.label}
           onChange={event => handleSeriesChange(event, setOption, 'series', 'label')}
@@ -131,7 +131,7 @@ const MixedDonutPieChartSetting = props => {
         />
         <SelectForm
           name="label"
-          label="레이블"
+          label="레이블 타입"
           optionList={PIE_LABEL_LIST}
           value={option.series.label}
           onChange={event => handleSeriesChange(event, setOption, 'pie', 'label')}

frontend-web/src/widget/settings/MixedLinePieChartSetting.tsx

@@ -4,7 +4,7 @@ import SelectForm from '@/components/form/SelectForm';
 import ColorButtonForm from '@/components/form/ColorButtonForm';
 import { AddButton, RemoveButton } from '@/components/button/AddIconButton';
 import { handleAddClick, handleChange, handleRemoveClick, handleSeriesChange } from '@/widget/utils/handler';
-import { AGGREGATION_LIST, COLUMN_TYPE, LABEL_LIST, LEGEND_LIST, PIE_LABEL_LIST, WIDGET_AGGREGATION } from '@/constant';
+import { AGGREGATION_LIST, COLUMN_TYPE, DISPLAY_LIST, LEGEND_LIST, PIE_LABEL_LIST, WIDGET_AGGREGATION } from '@/constant';
 import ColorFieldReForm from '@/components/form/ColorFieldReForm';
 import { getAggregationDataForChart, getColorArr } from '@/widget/modules/utils/chartUtil';
 import TextFieldForm from '@/components/form/TextFieldForm';
@@ -116,6 +116,14 @@ const MixedLinePieChartSetting = props => {
               onChange={event => handleSeriesChange(event, setOption)}
               endButton={<ColorButtonForm index={index} option={option} setOption={setOption} />}
             />
+            <TextFieldForm
+              id={`fieldLabel${index + 1}`}
+              name={`fieldLabel${index + 1}`}
+              label={`레이블`}
+              value={item.fieldLabel ? item.fieldLabel : ''}
+              onChange={event => handleSeriesChange(event, setOption)}
+              endButton={' '}
+            />
             <SelectForm
               id={`aggregation${index + 1}`}
               name={`aggregation${index + 1}`}
@@ -148,15 +156,15 @@ const MixedLinePieChartSetting = props => {
         ))}
         <SelectForm
           name="label"
-          label="레이블"
-          optionList={LABEL_LIST}
+          label="넘버 레이블"
+          optionList={DISPLAY_LIST}
           value={option.label}
           onChange={event => handleChange(event, setOption)}
         />
         <SelectForm
           name="mark"
           label="마크 포인트"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
           value={option.mark}
           onChange={event => handleChange(event, setOption)}
         />
@@ -176,7 +184,7 @@ const MixedLinePieChartSetting = props => {
         />
         <SelectForm
           name="label"
-          label="레이블"
+          label="레이블 타입"
           optionList={PIE_LABEL_LIST}
           value={option.pie.label}
           onChange={handlePieChange}
@@ -248,7 +256,7 @@ const MixedLinePieChartSetting = props => {
           id="legendAggregation"
           name="legendAggregation"
           label="집계 방식 표시"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
           value={option.legendAggregation}
           onChange={event => handleChange(event, setOption)}
         />

frontend-web/src/widget/settings/MixedLineStackedBarChartSetting.tsx

@@ -4,7 +4,8 @@ import SelectForm from '@/components/form/SelectForm';
 import ColorButtonForm from '@/components/form/ColorButtonForm';
 import { AddButton, RemoveButton } from '@/components/button/AddIconButton';
 import { handleAddClick, handleChange, handleRemoveClick, handleSeriesChange } from '@/widget/utils/handler';
-import { AGGREGATION_LIST, COLUMN_TYPE, LABEL_LIST, LEGEND_LIST, WIDGET_AGGREGATION } from '@/constant';
+import { AGGREGATION_LIST, COLUMN_TYPE, DISPLAY_LIST, LEGEND_LIST, WIDGET_AGGREGATION } from '@/constant';
+import TextFieldForm from '@/components/form/TextFieldForm';
 
 const MixedLineStackedBarChartSetting = props => {
   const { option, setOption, axis = 'x', spec } = props;
@@ -61,6 +62,14 @@ const MixedLineStackedBarChartSetting = props => {
               onChange={event => handleSeriesChange(event, setOption)}
               endButton={<ColorButtonForm index={index} option={option} setOption={setOption} />}
             />
+            <TextFieldForm
+              id={`fieldLabel${index + 1}`}
+              name={`fieldLabel${index + 1}`}
+              label={`레이블`}
+              value={item.fieldLabel ? item.fieldLabel : ''}
+              onChange={event => handleSeriesChange(event, setOption)}
+              endButton={' '}
+            />
             <SelectForm
               id={`aggregation${index + 1}`}
               name={`aggregation${index + 1}`}
@@ -81,7 +90,7 @@ const MixedLineStackedBarChartSetting = props => {
               required={true}
               id={`type${index + 1}`}
               name={`type${index + 1}`}
-              label={`종류 ${index + 1}`}
+              label={`종류`}
               optionList={chartTypeList}
               value={item.type}
               onChange={event => handleSeriesChange(event, setOption)}
@@ -92,15 +101,15 @@ const MixedLineStackedBarChartSetting = props => {
         ))}
         <SelectForm
           name="label"
-          label="레이블"
-          optionList={LABEL_LIST}
+          label="넘버 레이블"
+          optionList={DISPLAY_LIST}
           value={option.label}
           onChange={event => handleChange(event, setOption)}
         />
         <SelectForm
           name="mark"
           label="마크 포인트"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
           value={option.mark}
           onChange={event => handleChange(event, setOption)}
         />
@@ -119,7 +128,7 @@ const MixedLineStackedBarChartSetting = props => {
           id="legendAggregation"
           name="legendAggregation"
           label="집계 방식 표시"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
           value={option.legendAggregation}
           onChange={event => handleChange(event, setOption)}
         />

frontend-web/src/widget/settings/NumericBoardSetting.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ListItem, ListItemText, Divider } from '@mui/material';
 import SelectForm from '@/components/form/SelectForm';
 import ColorPickerForm from '@/components/form/ColorPickerForm';
-import { AGGREGATION_LIST, COLUMN_TYPE, LABEL_LIST } from '@/constant';
+import { AGGREGATION_LIST, COLUMN_TYPE, DISPLAY_LIST, HIDDEN_LIST } from '@/constant';
 import TextFieldForm from '@/components/form/TextFieldForm';
 
 const fontSizeList = [10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 40, 50, 60, 70, 80, 85, 90, 95, 100];
@@ -43,6 +43,13 @@ const NumericBoardSetting = props => {
           onChange={handleHeaderChange}
           endButton={<ColorPickerForm color={option.header.color} name="color" onChange={handleHeaderChange} />}
         />
+        <SelectForm
+          name="titleHidden"
+          label="위젯 이름 숨기기"
+          optionList={HIDDEN_LIST}
+          value={option.header.titleHidden}
+          onChange={handleHeaderChange}
+        />
       </ListItem>
       <ListItem>
         <ListItemText primary="숫자값 설정" />
@@ -78,7 +85,7 @@ const NumericBoardSetting = props => {
         <SelectForm
           name="numForm"
           label="숫자 서식"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
           value={option.content.numForm}
           onChange={handleContentChange}
         />

frontend-web/src/widget/settings/PieChartSetting.tsx

@@ -58,7 +58,7 @@ const PieChartSetting = props => {
         />
         <SelectForm
           name="label"
-          label="레이블"
+          label="레이블 타입"
           optionList={PIE_LABEL_LIST}
           value={option.series.label}
           onChange={handleSeriesChange}

frontend-web/src/widget/settings/PolarBarChartSetting.tsx

@@ -3,7 +3,7 @@ import { Divider, InputAdornment, ListItem, ListItemText } from '@mui/material';
 import SelectForm from '@/components/form/SelectForm';
 import ColorButtonForm from '@/components/form/ColorButtonForm';
 import { handleAddClick, handleChange, handleRemoveClick, handleSeriesChange } from '@/widget/utils/handler';
-import { AGGREGATION_LIST, COLUMN_TYPE, LABEL_LIST, LEGEND_LIST, WIDGET_AGGREGATION } from '@/constant';
+import { AGGREGATION_LIST, COLUMN_TYPE, DISPLAY_LIST, LEGEND_LIST, WIDGET_AGGREGATION } from '@/constant';
 import TextFieldForm from '@/components/form/TextFieldForm';
 import { AddButton, RemoveButton } from '@/components/button/AddIconButton';
 
@@ -48,8 +48,8 @@ const PolarBarChartSetting = props => {
         />
         <SelectForm
           name="label"
-          label="레이블"
-          optionList={LABEL_LIST}
+          label="넘버 레이블"
+          optionList={DISPLAY_LIST}
           value={option.label}
           onChange={event => handleChange(event, setOption)}
         />
@@ -133,7 +133,7 @@ const PolarBarChartSetting = props => {
           id="legendAggregation"
           name="legendAggregation"
           label="집계 방식 표시"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
           value={option.legendAggregation}
           onChange={event => handleChange(event, setOption)}
         />

frontend-web/src/widget/settings/RadarChartSetting.tsx

@@ -4,7 +4,8 @@ import SelectForm from '@/components/form/SelectForm';
 import ColorButtonForm from '@/components/form/ColorButtonForm';
 import { AddButton, RemoveButton } from '@/components/button/AddIconButton';
 import { handleAddClick, handleChange, handleRemoveClick, handleSeriesChange } from '@/widget/utils/handler';
-import { AGGREGATION_LIST, COLUMN_TYPE, LABEL_LIST, LEGEND_LIST, WIDGET_AGGREGATION } from '@/constant';
+import { AGGREGATION_LIST, COLUMN_TYPE, DISPLAY_LIST, LEGEND_LIST, WIDGET_AGGREGATION } from '@/constant';
+import TextFieldForm from '@/components/form/TextFieldForm';
 
 const RadarChartSetting = props => {
   const { option, setOption, seriesItem, spec } = props;
@@ -66,6 +67,14 @@ const RadarChartSetting = props => {
               onChange={event => handleSeriesChange(event, setOption)}
               endButton={<ColorButtonForm index={index} option={option} setOption={setOption} />}
             />
+            <TextFieldForm
+              id={`fieldLabel${index + 1}`}
+              name={`fieldLabel${index + 1}`}
+              label={`레이블`}
+              value={item.fieldLabel ? item.fieldLabel : ''}
+              onChange={event => handleSeriesChange(event, setOption)}
+              endButton={' '}
+            />
             <SelectForm
               id={`aggregation${index + 1}`}
               name={`aggregation${index + 1}`}
@@ -98,8 +107,8 @@ const RadarChartSetting = props => {
         ))}
         <SelectForm
           name="label"
-          label="레이블"
-          optionList={LABEL_LIST}
+          label="넘버 레이블"
+          optionList={DISPLAY_LIST}
           value={option.label}
           onChange={event => handleChange(event, setOption)}
         />
@@ -118,7 +127,7 @@ const RadarChartSetting = props => {
           id="legendAggregation"
           name="legendAggregation"
           label="집계 방식 표시"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
           value={option.legendAggregation}
           onChange={event => handleChange(event, setOption)}
         />

frontend-web/src/widget/settings/Scatter3DChartSetting.tsx

@@ -3,7 +3,7 @@ import { Divider, ListItem, ListItemText } from '@mui/material';
 import SelectForm from '@/components/form/SelectForm';
 import { AddButton, RemoveButton } from '@/components/button/AddIconButton';
 import { handleAddClick, handleChange, handleRemoveClick, handleSeriesChange } from '@/widget/utils/handler';
-import { COLUMN_TYPE, LABEL_LIST, LEGEND_LIST } from '@/constant';
+import { COLUMN_TYPE, DISPLAY_LIST, LEGEND_LIST } from '@/constant';
 import TextFieldForm from '@/components/form/TextFieldForm';
 import ColorButtonForm from '@/components/form/ColorButtonForm';
 
@@ -37,7 +37,7 @@ const Scatter3DChartSetting = props => {
             <TextFieldForm
               id={`title${index + 1}`}
               name={`title${index + 1}`}
-              label={`시리즈 ${index + 1} 이름`}
+              label={`시리즈 ${index + 1} 레이블`}
               value={item.title}
               onChange={event => handleSeriesChange(event, setOption)}
               endButton={<ColorButtonForm index={index} option={option} setOption={setOption} />}
@@ -95,8 +95,8 @@ const Scatter3DChartSetting = props => {
         ))}
         <SelectForm
           name="label"
-          label="레이블"
-          optionList={LABEL_LIST}
+          label="넘버 레이블"
+          optionList={DISPLAY_LIST}
           value={option.label}
           onChange={event => handleChange(event, setOption)}
         />

frontend-web/src/widget/settings/ScatterChartSetting.tsx

@@ -5,7 +5,7 @@ import ColorButtonForm from '@/components/form/ColorButtonForm';
 import TextFieldForm from '@/components/form/TextFieldForm';
 import { AddButton, RemoveButton } from '@/components/button/AddIconButton';
 import { handleAddClick, handleChange, handleRemoveClick, handleSeriesChange } from '@/widget/utils/handler';
-import { COLUMN_TYPE, LABEL_LIST, LEGEND_LIST } from '@/constant';
+import { COLUMN_TYPE, DISPLAY_LIST, LEGEND_LIST } from '@/constant';
 
 const ScatterChartSetting = props => {
   const { option, setOption, spec } = props;
@@ -36,7 +36,7 @@ const ScatterChartSetting = props => {
             <TextFieldForm
               id={`title${index + 1}`}
               name={`title${index + 1}`}
-              label={`시리즈 ${index + 1} 이름`}
+              label={`시리즈 ${index + 1} 레이블`}
               value={item.title}
               onChange={event => handleSeriesChange(event, setOption)}
               endButton={<ColorButtonForm index={index} option={option} setOption={setOption} />}
@@ -83,8 +83,8 @@ const ScatterChartSetting = props => {
         ))}
         <SelectForm
           name="label"
-          label="레이블"
-          optionList={LABEL_LIST}
+          label="넘버 레이블"
+          optionList={DISPLAY_LIST}
           value={option.label}
           onChange={event => handleChange(event, setOption)}
         />

frontend-web/src/widget/settings/TreemapChartSetting.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Divider, ListItem, ListItemText } from '@mui/material';
 import SelectForm from '@/components/form/SelectForm';
-import { AGGREGATION_LIST, COLUMN_TYPE, LABEL_LIST } from '@/constant';
+import { AGGREGATION_LIST, COLUMN_TYPE, DISPLAY_LIST } from '@/constant';
 import ColorFieldForm from '@/components/form/ColorFieldForm';
 import { handleChange } from '@/widget/utils/handler';
 
@@ -35,8 +35,8 @@ const TreemapChartSetting = props => {
         />
         <SelectForm
           name="label"
-          label="레이블"
-          optionList={LABEL_LIST}
+          label="넘버 레이블"
+          optionList={DISPLAY_LIST}
           value={option.label}
           onChange={event => handleChange(event, setOption)}
         />

frontend-web/src/widget/settings/WaterfallChartSetting.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Divider, ListItem, ListItemText } from '@mui/material';
 import SelectForm from '@/components/form/SelectForm';
 import { handleChange, handleSeriesChange } from '@/widget/utils/handler';
-import { AGGREGATION_LIST, COLUMN_TYPE, LABEL_LIST, LEGEND_LIST } from '@/constant';
+import { AGGREGATION_LIST, COLUMN_TYPE, DISPLAY_LIST, LEGEND_LIST } from '@/constant';
 import ColorFieldForm from '@/components/form/ColorFieldForm';
 
 const WaterfallChartSetting = props => {
@@ -50,7 +50,7 @@ const WaterfallChartSetting = props => {
         <SelectForm
           name="mark"
           label="마크 포인트"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
           value={option.mark}
           onChange={event => handleChange(event, setOption)}
         />

frontend-web/src/widget/wrapper/WidgetViewer.tsx

@@ -445,6 +445,14 @@ const WidgetViewer = props => {
     hideLoading();
   };
 
+  const renderTitle = () => {
+    if (widgetOption?.header?.titleHidden) {
+      return '';
+    } else {
+      return title;
+    }
+  };
+
   // const defaultComponentOption = {
   //   grid: { top: '3%', right: '3%', bottom: '3%', left: '3%' },
   //   tooltip: { trigger: 'axis' },
@@ -506,7 +514,7 @@ const WidgetViewer = props => {
             textOverflow: 'ellipsis',
           }}
         >
-          {title}
+          {renderTitle()}
         </Typography>
       </Stack>