✨ feat: 바다 소리 재생 기능, useBoolean 훅 작성

[bbearcookie]

🧩 이슈 번호

• close 바다 소리 재생 기능 #72

✅ 작업 사항

• useBoolean 훅 작성
• Audio 컴포넌트 작성
• MusicButton 컴포넌트에 파도 소리 재생 기능 추가
  • 스토리북에서도 확인 가능해요!

👩‍💻 공유 포인트 및 논의 사항

useBoolean 훅

on/off를 상태로 다루는데 자주 사용될만한 훅을 하나 만들어두었어요.

const useBoolean = (initialValue: boolean) => {
  const [value, setValue] = useState(initialValue);

  const on = useCallback(() => setValue(true), []);
  const off = useCallback(() => setValue(false), []);
  const toggle = useCallback(() => setValue((prev) => !prev), []);

  return { value, on, off, toggle };
};

useModal 훅에 대해서

사실 기존의 useModal 훅이 useBoolean 에 가깝다는 생각이 드는데..
그냥 useModal 훅을 제거하고 useBoolean 을 사용하는 형태로 바꿀까요??

[github-actions]

🚀 Storybook Preview 보러가기: https://65a6c73d536a3c43b7c5c9bb-vvzcuzbywb.chromatic.com/
🚀 React Preview 보러가기: https://dnd-10th-4-frontend-ll5jb3lzg-bbearcookie.vercel.app

[easyhyun00]

수고하셨습니다! 👍 그런데 소리를 켜도 다시 렌더링 되면 false 가 되기 때문에 저희 Zustand 사용하기로 하지 않았나요??
아래처럼 사용하면 될 것 같습니다...!?

import create from 'zustand';

const soundStore = create((set) => ({
  isPlaying: false,
  toggleSound: () => set((state) => ({ isPlaying: !state.isPlaying })),
}));

export default soundStore;

[easyhyun00]

사실 기존의 useModal 훅이 useBoolean 에 가깝다는 생각이 드는데.. 그냥 useModal 훅을 제거하고 useBoolean 을 사용하는 형태로 바꿀까요??

네! 내용이 겹치고 범용성있게 useBoolean 사용하면 좋을 것 같습니다