[URH-61] usePrefersColorScheme 신규

[Choozii]

👾 Pull Request

• 티켓: usePrefersColorScheme 신규

• 상태: 신규

1️⃣ Spec

• 사용자의 운영 체제의 색상 설정을 감지하는 훅
• 다크모드일때는 'dark', 라이트모드일때는 'light'를 리턴

2️⃣ 변경 사항

3️⃣ 예시 코드

import usePrefersColorScheme from './hooks/usePrefersColorScheme';

function App() {
  const colorScheme = usePrefersColorScheme();
  console.log('dark mode', colorScheme === 'dark');
  return (
    <div>
      <h1>USE-REACT-HOOKS</h1>
    </div>
  );
}

export default App;

4️⃣ 관련 문서 (선택 사항)

• https://ko.react.dev/reference/react/useSyncExternalStore
• https://developer.mozilla.org/ko/docs/Web/API/Window/matchMedia

[suhyeoonn]

[P4] 반복되는 !isClient || typeof window.matchMedia !== 'function' 체크 코드를 함수로 빼도 좋을 것 같아요!

[Choozii]

e23c234
여기에서 반영되었어요>.<

[suhyeoonn]

고생하셨습니다~! 저는 아직 useSyncExternalStore 훅이 익숙하지 않았는데, 지예님이 작업하신 코드를 분석하면서 많은 공부가 되었습니다!😊

[foresec]

저도 useSyncExternalStore훅은 처음 접하는데, 리팩토링 기간이나 앞으로 개발에 적용해볼 수 있을 거같아서 굉장히 좋은 것 같습니다. 수고 많으셨습니다:)