[UI] Snackbar [UI요소 만들기]

스낵바

📌 스낵바(Snackbar) 컴포넌트란?

스낵바(Snackbar)는 사용자가 수행한 작업에 대한 간단한 피드백 메시지를 일시적으로 화면에 표시하는 UI 컴포넌트입니다. 일반적으로 화면 하단(또는 상단)에 잠깐 나타났다 사라지며, 사용자의 흐름을 크게 방해하지 않고 정보를 전달하는 데 사용됩니다.

🎯 주요 기능

• 짧은 메시지: 간결한 텍스트 (예: "저장되었습니다", "오류가 발생했습니다").
• 일시적으로 표시됨: 일정 시간(예: 3초) 후 자동으로 사라짐.
• 비차단적: 사용자의 인터랙션을 막지 않음.
• 선택적 액션 버튼: "되돌리기" 같은 간단한 동작 버튼 포함 가능.

❗️구현 내용

Provider를 활용한 스낵바 렌더링

const SnackbarContext = createContext<SnackbarState>([])
const SnackbarSetContext = createContext<Dispatch<{
  type: SnackbarActionType
  payload: Record<string, any>
}>>(() => {})


const SnackbarReducerMap: Record<SnackbarActionType, (state: SnackbarActionType, payload: any)> => {
    upsert: (state, payload: Partial<Snackbar>) => {
        const targetIndex = state.findIndex(item => item.id === payload.id)
        // 타겟이 이미 있는 상태면 상태 갱신
        if (targetIndex > -1) {
            return state.map((item, index) => {
                if (i === targetIndex) {
                    return {
                        ...state[targetIndex],
                        ...payload
                    }
                }
            })
            return item
        }
        return [...state, {...DefaultSnackbar, ...paylaod}]
    }

  remove: (state, {id}: {id: string}) => {
    const targetIndex = state.findIndex(item => item.id === id)
    return state.filter((item, index) => index !== targetIndex)
  }

} 


export const useSetSnackbar = () => {
  const dispatch = useContext(SnackbarSetContext)

  const createSnackbar = useCallback((id: string, children: ReactNode) => {
    const newItem : Snackbar = {
      id,
      children,
      isOpen: true,
      timeoutId: window.setTimeout(() => {
        dispatch({type: 'upsert', payload: {id, isOpen:false, timeoutId: null}})
      }, SNACKBAR_DURATION),
    }

    newItem.onMouseEnter = () => {
      if (newItem.timeoutId) clearTimeout(newItem.timeoutId)
    }

    newItem.onMouseLeave = () => {
      newItem.timeoutId = window.setTimeout(() => {
        dispatch({type: 'upsert', payload: {id, isOpen: false, timeoutId: null}})
      }, SNACKBAR_DURATION)
    }

      dispatch({type: 'upsert', payload: newItem})
  }, []);

  const removeSnackbar = useCallback((id: string) => {
    dispatch({type: 'remove', payload: {id}})
  }, []);

  return {
    createSnackbar,
    removeSnackbar,
  }

}

• 컨텍스트의 렌더링 최적화를 위해 state를 가지는 컨텍스트와 dispatch를 분리
• 스낵바를 생성 할 때에는, id와 children을 받아서 isOpen을 true로 관리
• timeoutId는 setTimeout의 id 값
  • setTimeout은 일정 시간 후의 해당 아이템의 아이디로 isOpen을 false로 업데이트 하는 함수 생성
• onMouseEnter는 newItem의 timeOutId를 지움
• onMouseLeave는 newItem의 setTimeOut을 새로 등록

Provider를 활용한 스낵바 렌더링

const useSnackbar = (children: ReactNode) => {
  const timeoutId = useRef<number | null>(null)
  const [status, setStatus] = useState<SnackbarStatus>(null)

  const openSnackbar = useCallback(() => {
    setStatus('open')
    timeoutId.current = window.setTimeout(() => setStatus('close'), SNACKBAR_DURATION)
  }, [])

  const handleMouseEnter = () => {
    if (timeoutId.current) clearTimeout(timeoutId.current)
  }
  const handleMouseLeave = () => {
    timeoutId.current = window.setTimeout(() => {
      setStatus('close')
    }, SNACKBAR_DURATION)
  }

  return {
    snackbar: !!status
      ? createPortal(
          <SnackbarItem
            status={status}
            setStatus={setStatus}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
          >
            {children}
          </SnackbarItem>,
          document.querySelector('#snackbarRoot')!,
        )
      : null,
    open: openSnackbar,
  }
}

• 기존 프로바이더보다는 보일러 플레이트가 비교적 단순하다는 장점이 있음
• timeoutID, status, handleMouse... 등 상태를 전체적으로 관리할 필요 없이 스낵바 컴포넌트 내부에서 관리
  • 하지만, 각각의 컴포넌트에서 관리하기 때문에 전체적으로 상태를 조절해야할 때는 (ex: 스낵바의 최대 갯수 조절) 조금 더 복잡한 로직이 필요할 수 있음

스낵바의 상태관리 프로세스

export type Snackbar = {
  id: string
  children: ReactNode
  isOpen: boolean
  timeoutId: number | null
  onMouseEnter?: EventHandler<any>
  onMouseLeave?: EventHandler<any>
}

const SnackbarItems = ({
  id, children, isOpen, onMouseLeave, onMouseEnter
}: Snackbar) => {

  const { createSnackbar, removeSnackbar } = useSetSnackbar()
  const elemRef = useRef<HTMLDivElement>(null);
  const [animationClassName, setAnimationClassName] = useState<string[]>()

  // enter => show => show exit => 삭제
  const handleAnimationEnd = () => {
    if (elemRef.current?.className.includes('enter')) {
      setAnimationClassName(['show'])
    }

    else {
      removeSnackbar(id)
    }

  }

  useEffect(() => {
    setAnimationClassName(isOpen ? ['enter']: ['show', 'exit'])
  }, [isOpen]);

  return (
    <div ref={elemRef} className={cx('SnackbarItem', animationClassName)} id={id}
      onAnimationEnd={handleAnimationEnd}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
    >
      {children}
      <button onClick={() => removeSnackbar(id)}>닫기</button>
    </div>
  )
}

• isOpen 값을 기반으로 처음 스낵바가 열릴 때, enter, 첫 애니메이션이 끝날 때, enter, show, 애니메이션이 끝날 때, show, exit로 변경
• 스낵바가 추가될 때, 보여지고 있을 때, 세가지의 상태를 나누어 애니메이션 관리
  • 스낵바가 처음 들어올 때는 class 에 enter 를 추가, isOpen 이 false 가 됐을 때, exit를 추가하고, exit 가 사라 졌을 때, 스낵바 제거

// animation
  &.enter {
    animation: enter 500ms ease-out forwards;
  }
  &.show {
    transform: translateY(0);
    opacity: 1;
  }
  &.exit {
    animation: exit 500ms ease-out forwards;
  }

@keyframes enter {
  0% {
    transform: translate(0, 50px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes exit {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(0, 50px);
    opacity: 0;
  }
}