✨ feat: 다크 모드 구현

[ccconac]

✅ 체크리스트

• 설정 페이지 테마 클릭 시 테마 변경
• 다크 모드 적용
  • 소개 페이지
  • 메인 페이지
  • 작성 페이지
  • 수정 페이지
  • 상세 페이지
  • 설정 페이지
  • 공유 페이지
  • 마이 페이지

📝 작업 상세 내용

모든 페이지 다크 모드 구현이 완료되었습니다. 설정 페이지에서 테마 변경 시 localStorage에 다크 모드 여부가 boolean 타입으로 지정되며 이 값을 기반으로 페이지의 테마가 변경됩니다.

• 테마 변경 custom hook이 구현되었습니다.
• 사용자가 설정 페이지에서 테마 아이콘을 선택할 경우 다크 모드 여부가 localStorage에 boolean 타입으로 지정됩니다.

/hooks/useTheme.ts

import { useState } from 'react';

const useTheme = () => {
  const localTheme = localStorage.getItem('theme');
  const [isDarkMode, setIsDarkMode] = useState(localTheme === 'dark');

  const setDarkMode = () => {
    setIsDarkMode(true);
    localStorage.setItem('theme', 'dark');
  };

  const setLightMode = () => {
    setIsDarkMode(false);
    localStorage.setItem('theme', 'light');
  };

  return { isDarkMode, setDarkMode, setLightMode };
};

export default useTheme;

/components/Layout/Layout.tsx

• Layout 컴포넌트의 요소들을 styled-components의 ThemeProvider로 감싸 줬습니다.
  • 이렇게 함으로써 중복된 코드를 방지할 수 있었습니다. (직접적으로 theme를 관리해야 하는 설정 페이지 제외)
• isDarkMode 값이 true일 경우 semantic 상수의 dark 객체 하위 색상으로 변경됩니다.

import useTheme from '@hooks/useTheme';

const Layout = () => {
  const { isDarkMode } = useTheme();

  return (
    <ThemeProvider theme={isDarkMode ? semantic.dark : semantic.light}>
      <Header />
      <Outlet />
      <Toast />
      <Modal />
      <SnackBar />
      <Footer />
    </ThemeProvider>
  );
};

export default Layout;

🚨 버그 발생 이유 (선택 사항)

설정 페이지에서 테마 변경 시 헤더의 색상이 곧바로 업데이트되지 않는 버그가 발생 중입니다. 새로 고침 시에는 정상적으로 작동하지 않지만 곧바로 반영되지 않는 문제가 있어 원인 파악 후 해결해 보겠습니다. 🥹

🔎 후속 작업 (선택 사항)

모든 페이지에 다크 모드를 적용하느라 수정된 코드가 굉장히 많습니다. 또한, 급한 작업으로 인해 아이콘 등 누락된 부분이 있을 수 있어 추후 검토 및 부가 작업이 필요합니다. 🥲

• 헤더 메뉴 바의 아이콘들의 url을 컴포넌트의 props로 전달해 사용하고 있는 것을 확인했습니다.
  • 이 경우, svg의 색상 변경이 불가능해 코드 수정이 필요한 상태입니다. 로직 수정이 조금 필요해 보여 보류해 두었습니다.
• 이것 외에 누락된 아이콘 색상이 있다면 말씀해 주세요.... 🥺

🤔 질문 사항 (선택 사항)

📚 참고 자료 (선택 사항)

📸 스크린샷 (선택 사항)

✅ 셀프 체크리스트

• 브랜치 확인하기
• 불필요한 코드가 들어가지 않았는지 재확인하기
• issue 닫기
• reiewers, assignees, Lables 등록 확인하기

이슈 번호: #206