로그인 백엔드 구현 및 로그인 프론트 기능 구현

nuxt/constants/theme/grid/ConditionButtonRenderer.ts

@@ -0,0 +1,36 @@
+import type { CellRendererProps } from 'tui-grid/types/renderer';
+
+export class ConditionButtonRenderer {
+  el: HTMLElement;
+
+  constructor(props: CellRendererProps) {
+    const { rowKey, grid } = props;
+    const { options } = props.columnInfo.renderer;
+    const data = grid.getRow(rowKey);
+
+    console.log(!data.baAnswerYn);
+    if (!data.baAnswerYn) {
+      const el = document.createElement('button');
+      el.className = 'ant-btn ant-btn-primary';
+      el.onclick = () => options?.onClick(data);
+      el.innerHTML = `<span>${options?.buttonName}</span>`;
+      this.el = el;
+    } else {
+      const el = document.createElement('span');
+      el.innerHTML = options?.spanName;
+      this.el = el;
+    }
+  }
+
+  beforeDestroy(): void {}
+
+  focused(): void {}
+
+  getElement(): Element {
+    return this.el;
+  }
+
+  mounted(parent: HTMLElement): void {}
+
+  render(props: CellRendererProps): void {}
+}

nuxt/constants/theme/grid/ConditionIconButtonRenderer.ts

@@ -0,0 +1,39 @@
+import type { CellRendererProps } from 'tui-grid/types/renderer';
+
+export class ConditionIconButtonRenderer {
+  el: HTMLElement;
+
+  constructor(props: CellRendererProps) {
+    const { options } = props.columnInfo.renderer;
+    const data = props.grid.getRow(props.rowKey);
+
+    if (options?.condition(data)) {
+      const el = document.createElement('a');
+      // @ts-ignore
+      const { icon } = options;
+      el.innerHTML = `
+      <svg focusable="false" data-icon="${icon.name}" width="1em" height="2em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
+      <path d="${icon.icon.children[0].attrs.d}" />
+      </svg>
+`;
+      el.className = 'ant-btn ant-btn-primary';
+      el.onclick = () => options?.onClick(data);
+
+      this.el = el;
+    } else {
+      this.el = document.createElement('span');
+    }
+  }
+
+  beforeDestroy(): void {}
+
+  focused(): void {}
+
+  getElement(): Element {
+    return this.el;
+  }
+
+  mounted(parent: HTMLElement): void {}
+
+  render(props: CellRendererProps): void {}
+}

nuxt/constants/theme/grid/FunctionalButtonRenderer.ts

@@ -0,0 +1,28 @@
+import type { CellRendererProps } from 'tui-grid/types/renderer';
+
+export class FunctionalButtonRenderer {
+  el: HTMLElement;
+
+  constructor(props: CellRendererProps) {
+    const el = document.createElement('button');
+    const options = props.columnInfo.renderer.options;
+    const data = props.grid.getRow(props.rowKey);
+    el.className = 'ant-btn ant-btn-primary';
+    el.onclick = () => options?.onClick(data);
+    el.innerHTML = `<span>${options?.buttonName}</span>`;
+
+    this.el = el;
+  }
+
+  beforeDestroy(): void {}
+
+  focused(): void {}
+
+  getElement(): Element {
+    return this.el;
+  }
+
+  mounted(parent: HTMLElement): void {}
+
+  render(props: CellRendererProps): void {}
+}

nuxt/constants/theme/grid/MaxLengthTextEditor.ts

@@ -0,0 +1,27 @@
+import type { CellEditorProps } from 'tui-grid/types/editor';
+
+export class MaxLengthTextEditor {
+  el: HTMLInputElement;
+
+  constructor(props: CellEditorProps) {
+    const el = document.createElement('input');
+    el.type = 'text';
+    el.value = props.value as string;
+    el.maxLength = props.columnInfo.editor?.options?.maxlength;
+    el.placeholder = props.columnInfo.editor?.options?.placeholder;
+
+    this.el = el;
+  }
+
+  getElement() {
+    return this.el;
+  }
+
+  getValue() {
+    return this.el.value;
+  }
+
+  mounted() {
+    this.el.select();
+  }
+}

nuxt/constants/theme/grid/MenuSatisChargerRenderer.ts

@@ -0,0 +1,82 @@
+import type { CellRendererProps } from 'tui-grid/types/renderer';
+import type { MenuType } from '~/types/sys/menu';
+
+export class MenuSatisChargerRenderer {
+  el: HTMLElement;
+
+  constructor(props: CellRendererProps) {
+    const el = document.createElement('div');
+
+    el.style['gap'] = '8px';
+    el.className = 'flex justify-center';
+
+    const { rowKey, grid } = props;
+    const options = props.columnInfo.renderer.options as any;
+
+    const data = grid.getRow(rowKey) as unknown as MenuType;
+    if (!data.menuType.endsWith('API')) {
+      if (data?.menuMngId) {
+        const { onView, onDelete } = options;
+        const viewLink = document.createElement('a');
+        const deleteLink = document.createElement('a');
+
+        viewLink.innerHTML = '보기';
+        viewLink.onclick = () => onView(data);
+
+        deleteLink.innerHTML = '삭제';
+        deleteLink.onclick = () => onDelete(data);
+
+        el.append(viewLink, deleteLink);
+      } else {
+        const { onEdit } = options;
+        const link = document.createElement('a');
+        link.innerHTML = '등록';
+        link.onclick = () => onEdit(data);
+
+        el.append(link);
+      }
+    }
+
+    this.el = el;
+  }
+
+  beforeDestroy(): void {}
+
+  focused(): void {}
+
+  getElement(): Element {
+    return this.el;
+  }
+
+  mounted(parent: HTMLElement): void {}
+
+  render(props: CellRendererProps): void {
+    this.el.innerHTML = '';
+    const { rowKey, grid } = props;
+    const options = props.columnInfo.renderer.options as any;
+
+    const data = grid.getRow(rowKey) as unknown as MenuType;
+    if (!data.menuType.endsWith('API')) {
+      if (data?.menuMngId) {
+        const { onView, onDelete } = options;
+        const viewLink = document.createElement('a');
+        const deleteLink = document.createElement('a');
+
+        viewLink.innerHTML = '보기';
+        viewLink.onclick = () => onView(data);
+
+        deleteLink.innerHTML = '삭제';
+        deleteLink.onclick = () => onDelete(data);
+
+        this.el.append(viewLink, deleteLink);
+      } else {
+        const { onEdit } = options;
+        const link = document.createElement('a');
+        link.innerHTML = '등록';
+        link.onclick = () => onEdit(data);
+
+        this.el.append(link);
+      }
+    }
+  }
+}

nuxt/constants/theme/grid/RadioHeaderRenderer.ts

@@ -0,0 +1,32 @@
+import type { CellRendererProps } from 'tui-grid/types/renderer';
+
+export class RadioHeaderRenderer {
+  el: HTMLElement;
+
+  constructor(props: CellRendererProps) {
+    const { rowKey, grid } = props;
+
+    const { options } = props.columnInfo.renderer;
+    const data = grid.getRow(rowKey);
+
+    const el = document.createElement('input');
+    el.name = 'gridRadio';
+    el.type = 'radio';
+    el.className = '';
+    el.addEventListener('change', () => options?.onChange(data));
+
+    this.el = el;
+  }
+
+  beforeDestroy(): void {}
+
+  focused(): void {}
+
+  getElement(): Element {
+    return this.el;
+  }
+
+  mounted(parent: HTMLElement): void {}
+
+  render(props: CellRendererProps): void {}
+}

nuxt/constants/theme/grid/index.ts

@@ -0,0 +1,65 @@
+import type { OptPreset } from 'tui-grid/types/options';
+
+export const TUI_GRID_THEME: OptPreset = {
+  selection: {
+    background: '#4daaf9',
+    border: '#004082'
+  },
+  scrollbar: {
+    background: '#f5f5f5',
+    thumb: '#d9d9d9',
+    active: '#c1c1c1'
+  },
+  outline: {
+    border: '#e1e2e5'
+  },
+  area: {
+    header: {
+      border: '#e1e2e5',
+      background: '#f8f8f9'
+    }
+  },
+  row: {
+    even: {
+      background: '#EFFAFF'
+    }
+  },
+  cell: {
+    normal: {
+      background: 'white',
+      border: '#eee',
+      showVerticalBorder: true
+    },
+    header: {
+      background: '#f8f8f9',
+      showHorizontalBorder: true,
+      showVerticalBorder: true
+    },
+    rowHeader: {
+      border: '#e1e2e5',
+      background: '#f8f8f9',
+      showHorizontalBorder: false,
+      showVerticalBorder: false
+    },
+    editable: {
+      // 수정 가능 셀 색상은 아래에
+      background: 'white'
+    },
+    selectedHeader: {
+      background: '#e0e0e0'
+    },
+    focused: {
+      border: '#418ed4'
+    },
+    disabled: {
+      text: '#333',
+      background: 'white'
+    },
+    invalid: {
+      background: '#D60440'
+    },
+    required: {
+      background: 'white'
+    }
+  }
+};