How to write easy-to-maintain React code - (1) Project design

export { default as Alert } from './Alert'
export { default as Backdrop } from './Backdrop'
export { default as Button } from './Button'
export { default as ButtonGroup } from './ButtonGroup'
export { default as Card } from './Card'

export { default as request } from './api'
export * from './hooks'
export * from './store'
export * from './utils'
export * from './data'

import axios from 'axios'
import type { AxiosError } from 'axios'
 
const IS_DEV = process.env.NODE_ENV === 'development'
 
const request = axios.create({
  baseURL: 'baseURL',
  timeout: 15000,
  headers: {
    'Content-Type': 'application/json'
  }
})
 
request.interceptors.request.use((config) => {
  if (IS_DEV) {
    console.log(
      '%c%s',
      'color: #d9480f; font-weight: bold',
      `${config.method?.toUpperCase()} ${config.url}`
    )
    if (config.params) {
      console.log('%c%s', 'color: #d9480f', 'req.query:')
      console.table(config.params)
    }
    if (config.data) {
      console.log('%c%s', 'color: #d9480f', 'req.body:')
      console.table(config.data)
    }
  }
  return config
})
 
request.interceptors.response.use(({ data, config }) => {
  if (IS_DEV) {
    console.log(
      '%c%s',
      'color: #d9480f',
      `${config.method?.toUpperCase()} ${config.url} | data:`
    )
    if (Array.isArray(data)) console.log(data)
    else console.table(data)
  }
  return data
})
 
export default request

import { request } from 'services'
 
const Page = () => {
  ...
  const get = async () => {
    try {
      await request.post('url')
    } catch (err) {
      console.log(err)
    }
  }
  ...
}

export function useObjectState() {
  ...
}
 
export const useUser = () => {
  ...
}
 
export function useOnClickOutside() {
  ...
}

import { atom } from 'recoil'
 
export const userState = atom<IUser | null>({
  key: 'userState',
  default: null
})

export const randomString = () => Math.random().toString(36).slice(2)
 
export function throttle(func: Function, wait: number) {
  let waiting = false
  return function () {
    if (!waiting) {
      // @ts-ignore
      func.apply(this, arguments)
      waiting = true
      setTimeout(() => {
        waiting = false
      }, wait)
    }
  }
}

export const IS_DEV = process.env.NODE_ENV === 'development'
 
export const IS_CLIENT = typeof window !== 'undefined'
 
export enum AUTH_TYPE {
  LOGIN = '로그인',
  SIGN_UP = '회원가입',
  FIND_PASSWORD = '비밀번호 찾기',
  RESIGN = '회원탈퇴'
}

export const add = (
  type: string,
  listener: EventListenerOrEventListenerObject
) => window.addEventListener(type, listener)
 
export const remove = (
  type: string,
  listener: EventListenerOrEventListenerObject
) => window.removeEventListener(type, listener)
 
export const once = (type: string, listener: any) => {
  const emitOnce = (event: any) => {
    listener(event)
    remove(type, emitOnce)
  }
 
  add(type, emitOnce)
}
 
export function emit<T>(type: string, detail?: T) {
  const event = new CustomEvent<T>(type, { detail })
  window.dispatchEvent(event)
}

export * as EventListener from './event'

const [isOpen, setIsOpen] = useState<boolean>(false)
 
const onBackdrop = ({ detail }: any) => setIsOpen(detail.open)
 
useEffect(() => {
  EventListener.add('backdrop', onBackdrop)
  return () => EventListener.remove('backdrop', onBackdrop)
}, [])
 
<button
  onClick={() => EventListener.emit('backdrop', { detail: { open: true } })}
>
  Open
</button>

interface ModalProps {
  ...
}
 
interface IUser {
  ...
}