React-universal

React 환경에서 전역적으로 사용할 수 있는 유틸리티 라이브러리입니다. 와 은 @toktokhan-dev/react-universal를 포함하고 있습니다.

Components

Components	Description
EmptyView({ children, data, fallback})	EmptyView 컴포넌트는 데이터가 비어있는 경우 fallback을, 데이터가 존재하는 경우 children을 렌더링합니다.
LoadingView({ children, isLoading, fallback})	LoadingView 컴포넌트는 로딩 상태를 처리하여 로딩 중일 때는 fallback을, 로딩이 완료되었을 때는 children을 렌더링합니다.

Hooks

Hooks	Description
useCallbackRef(callback)

Hooks/useTimer()

Hooks/useTimer()	Description
useTimer({ autoStart, timeLimit, interval, setTimeFormat, onTimeOver, onTimeUpdate})	Hooks/useTimer() 타이머를 관리하는 커스텀 훅입니다.

Hooks/useTimer()/Context(Optional)

Hooks/useTimer()/Context(Optional)	Description
TimerProvider({ children, params})	Hooks/useTimer()/Context(Optional) 이 프로바이더는 타이머 상태를 컨텍스트를 통해 지역/전역적으로 관리할 수 있도록 해줍니다.
useTimerContext(selector)	Hooks/useTimer()/Context(Optional) 타이머 컨텍스트를 사용하는 커스텀 훅입니다. selector를 통해 컨텍스트의 값을 가져올 수 있습니다.
withTimerProvider(Component, params)	Hooks/useTimer()/Context(Optional) 타이머 컨텍스트를 제공하는 컴포넌트 HOC입니다. 이 HOC를 사용하여 컴포넌트를 래핑하면, 해당 컴포넌트와 하위 컴포넌트에서 타이머 상태를 공유할 수 있습니다.

Types/Utility

Types/Utility	Description
PropsOf	주어진 컴포넌트의 props 타입을 추론하는 유틸리티 타입입니다. * T - props 타입을 추론할 컴포넌트.

Utils/File

Utils/File	Description
fileToBase64(file)

Utils/Format

Utils/Format	Description
formatNumberKR(num)
formatPhoneNumberKR(phone)

Utils/Logger

Utils/Logger	Description
apiLogger(params)
genErrorByServer(errors)	서버에서 발생한 오류를 기반으로 에러 메세지 객체를 반환합니다. 외부 백엔드와 협업시에 에러타입을 확인해주세요. api logger에서 사용하고 있으며, 에러 메세지를 통해 toast, alert 등에 적용시킬 수 있습니다. Utils/Logger T - AxiosError 타입의 제네릭 매개변수입니다.
styledConsole({ topic, title, data, topicColor, method, errors})

Utils/React

Utils/React	Description
createContextSelector(useHook, initialProps)	Utils/React 커스텀 훅을 기반으로 컨텍스트와 관련된 유틸리티를 생성하는 함수입니다. 이 함수는 주어진 훅을 컨텍스트로 감싸는 Provider, useContext 훅, 그리고 컴포넌트를 컨텍스트로 감싸는 withProvider HOC를 반환합니다. T - 컨텍스트에서 사용할 데이터 타입 P - 훅의 파라미터 타입
createSlice({ initialState, reducers})