feat: Snackbar 컴포넌트 구현

[seocylucky]

1️⃣ 어떤 작업을 했나요? (Summary)

Snackbar 구현 작업을 했습니다.

• resolved feat: Snackbar 컴포넌트 구현 #153

2️⃣ 알아두시면 좋아요!

상태를 전역에서 관리하기 위해 Context API를 사용했습니다.

  return (
    <SnackbarContext.Provider value={{ showSnackbar }}>
      {children}
      {ReactDOM.createPortal(
        <StyledSnackbarContainer position={snackbars[0]?.position || 'center'}>
          {snackbarList}
        </StyledSnackbarContainer>,
        document.body
      )}
    </SnackbarContext.Provider>
  );

선언적으로 스낵바를 호출하기 위해 useSnackbar 훅으로 빼서 사용할 수 있도록 하였습니다.

export const useSnackbar = () => {
  const { showSnackbar } = useSnackbarContext();

  const snackbar = (props: Omit<SnackbarProps, 'isClosing' | 'id'>) => {
    showSnackbar(props);
  };

  return { snackbar };
};

isClosing과 onClose의 차이

isClosing

isClosing은 스낵바가 닫히는 상태를 나타내는 boolean 값.
이 값으로 애니메이션 제어를 하고 스낵바가 DOM에서 제거되기 전에 닫히는 애니메이션을 끝까지 보여주기 위한 용도! 없으면 애니메이션 없이 그냥 닫혀버려요.

onClose

스낵바가 닫힐 때 호출되는 함수.
스낵바가 닫히는 애니메이션이 끝난 후, 스낵바를 실제로 DOM에서 제거하는 역할을 합니다. 스낵바의 ID를 인수로 받아, SnackbarProvider에서 해당 스낵바를 관리하는 리스트에서 제거하는데 사용됩니다.

useTouchMouseDrag가 무엇이냐

마우스 드래그 또는 터치 스와이프 동작을 감지하여 스낵바 닫기를 수행할 수 있도록 구현된 함수입니다.
info 스낵바만 드래그해서 닫습니다! error 스낵바는 X버튼으로만 닫을 수 있음 참고!

3️⃣ 추후 작업

리뷰 반영!
배경색 토큰 반영 시 코드 수정 필요
스낵바 최대 개수 확정 시 반영 필요

4️⃣ 체크리스트 (Checklist)

• main 브랜치의 최신 코드를 pull 받았나요?