✨ frontend add

frontend/admin/src/stores/condition.ts

@@ -0,0 +1,67 @@
+import { atom, atomFamily, DefaultValue, selectorFamily } from 'recoil'
+
+/**
+ * 조회조건 상태관리
+ * key를 기준으로 메뉴별로 사용
+ */
+
+export type conditionValue = { [key: string]: string }
+
+export const conditionAtom = atomFamily<conditionValue, string>({
+  key: 'conditionAtom',
+  default: undefined,
+})
+
+export const fieldIdsAtom = atom<string[]>({
+  key: 'fieldIdsAtom',
+  default: [],
+})
+
+export const conditionSelector = selectorFamily<conditionValue, string>({
+  key: 'conditionSelector',
+  get:
+    id =>
+    ({ get }) =>
+      get(conditionAtom(id)),
+  set:
+    id =>
+    ({ set, get }, newValue) => {
+      set(conditionAtom(id), newValue)
+      const ids = get(fieldIdsAtom)
+      if (!ids.includes(id)) {
+        set(fieldIdsAtom, prev => [...prev, id])
+      }
+    },
+})
+
+export const conditionStateSelector = selectorFamily<
+  Record<string, conditionValue>,
+  string[]
+>({
+  key: 'conditionStateSelector',
+  get:
+    ids =>
+    ({ get }) => {
+      return ids.reduce<Record<string, conditionValue>>((result, id) => {
+        const value = get(conditionAtom(id))
+        return {
+          ...result,
+          [id]: value,
+        }
+      }, {})
+    },
+  set:
+    ids =>
+    ({ get, set, reset }, newValue) => {
+      if (newValue instanceof DefaultValue) {
+        reset(fieldIdsAtom)
+        const ids = get(fieldIdsAtom)
+        ids.forEach(id => reset(conditionAtom(id)))
+      } else {
+        set(fieldIdsAtom, Object.keys(newValue))
+        ids.forEach(id => {
+          set(conditionAtom(id), newValue[id])
+        })
+      }
+    },
+})

frontend/admin/src/stores/detailbuttons.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil'
+
+export const detailButtonsSnackAtom = atom<'none' | 'success' | 'loading'>({
+  key: 'detailButtonsSnackAtom',
+  default: 'none',
+})

frontend/admin/src/stores/error.ts

@@ -0,0 +1,57 @@
+import { AxiosError } from 'axios'
+import { atom, DefaultValue, selector } from 'recoil'
+import { DEFAULT_ERROR_MESSAGE } from '@constants'
+
+/**
+ * Global error 상태관리
+ */
+
+interface IErrors {
+  defaultMessage: string
+  field: string
+  rejectedValue?: string
+}
+
+export interface IErrorProps {
+  open?: boolean
+  error?: AxiosError
+  status?: number
+  message?: string
+  errors?: IErrors[]
+}
+
+export const errorStateAtom = atom<IErrorProps>({
+  key: 'errorStateAtom',
+  default: { error: null } as IErrorProps,
+})
+
+export const errorStateSelector = selector<IErrorProps>({
+  key: 'errorStateSelector',
+  get: ({ get }) => {
+    return get(errorStateAtom)
+  },
+  set: ({ set, reset }, newValue) => {
+    if (newValue instanceof DefaultValue) {
+      reset(errorStateAtom)
+    } else {
+      const error = newValue.error
+      let message = error?.message || DEFAULT_ERROR_MESSAGE
+      let errors: IErrors[] = []
+      let status = 500
+      if (error?.response) {
+        message = error.response.data.message || message
+
+        errors = error.response.data.errors
+        status = error.response.status
+      }
+
+      set(errorStateAtom, {
+        open: true,
+        error,
+        status,
+        message,
+        errors,
+      })
+    }
+  },
+})

frontend/admin/src/stores/index.ts

@@ -0,0 +1,6 @@
+export * from './menus'
+export * from './condition'
+export * from './error'
+export * from './tree'
+export * from './detailbuttons'
+export * from './page'

frontend/admin/src/stores/menus.ts

@@ -0,0 +1,52 @@
+import { atom, selector } from 'recoil'
+
+/**
+ * 사이드 메뉴 상태관리
+ */
+export interface ISideMenu {
+  children: ISideMenu[]
+  engName: string
+  icon: string
+  id: number
+  isChecked: boolean
+  korName: string
+  level: number
+  menuRoleId: number
+  parentId: number
+  roleId: string
+  sortSeq: number
+  urlPath: string
+  expanded: boolean
+  isShow: boolean
+}
+
+export const menuStateAtom = atom({
+  key: 'menuStateAtom',
+  default: [] as ISideMenu[],
+})
+
+export const currentMenuStateAtom = atom({
+  key: 'currentMenuStateAtom',
+  default: {} as ISideMenu,
+})
+
+export const flatMenusSelect = selector({
+  key: 'flatMenusSelect',
+  get: ({ get }) => {
+    const menus = get(menuStateAtom)
+
+    let flatMenus = []
+    const getAllItems = (menu: ISideMenu) => {
+      flatMenus.push(menu)
+      if (menu.children) {
+        return menu.children.map(i => getAllItems(i))
+      }
+    }
+
+    menus.forEach(item => {
+      getAllItems(item)
+    })
+
+    return flatMenus
+  },
+})

frontend/admin/src/stores/page.ts

@@ -0,0 +1,61 @@
+import { atom, atomFamily, DefaultValue, selectorFamily } from 'recoil'
+import { fieldIdsAtom } from './condition'
+
+/**
+ * page 상태관리
+ * key를 기준으로 메뉴별로 사용
+ */
+
+export const pageAtom = atomFamily<number, string>({
+  key: 'pageAtom',
+  default: undefined,
+})
+
+export const pageSelector = selectorFamily<number, string>({
+  key: 'pageSelector',
+  get:
+    id =>
+    ({ get }) =>
+      get(pageAtom(id)),
+  set:
+    id =>
+    ({ set, get }, newValue) => {
+      set(pageAtom(id), newValue)
+      const ids = get(fieldIdsAtom)
+      if (!ids.includes(id)) {
+        set(fieldIdsAtom, prev => [...prev, id])
+      }
+    },
+})
+
+export const pageStateSelector = selectorFamily<
+  Record<string, number>,
+  string[]
+>({
+  key: 'pageStateSelector',
+  get:
+    ids =>
+    ({ get }) => {
+      return ids.reduce<Record<string, number>>((result, id) => {
+        const value = get(pageAtom(id))
+        return {
+          ...result,
+          [id]: value,
+        }
+      }, {})
+    },
+  set:
+    ids =>
+    ({ get, set, reset }, newValue) => {
+      if (newValue instanceof DefaultValue) {
+        reset(fieldIdsAtom)
+        const ids = get(fieldIdsAtom)
+        ids.forEach(id => reset(pageAtom(id)))
+      } else {
+        set(fieldIdsAtom, Object.keys(newValue))
+        ids.forEach(id => {
+          set(pageAtom(id), newValue[id])
+        })
+      }
+    },
+})

frontend/admin/src/stores/tree.ts

@@ -0,0 +1,25 @@
+import { IMenuTree } from '@service'
+import { atom } from 'recoil'
+
+type ExpandedType = 'expand' | 'collapse' | 'none'
+
+export const draggableTreeExpandedAtom = atom<ExpandedType>({
+  key: 'draggableTreeExpandedAtom',
+  default: 'none',
+})
+
+export const draggableTreeSelectedAtom = atom<IMenuTree | undefined>({
+  key: 'draggableTreeSelectedAtom',
+  default: undefined,
+})
+
+export const treeChangeNameAtom = atom<{
+  state: 'change' | 'complete' | 'none'
+  id?: number
+  name?: string
+}>({
+  key: 'treeChangeNameAtom',
+  default: {
+    state: 'none',
+  },
+})