Open ccconac opened 1 month ago
모든 페이지 다크 모드 구현이 완료되었습니다. 설정 페이지에서 테마 변경 시 localStorage에 다크 모드 여부가 boolean 타입으로 지정되며 이 값을 기반으로 페이지의 테마가 변경됩니다.
localStorage
boolean
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;
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
이슈 번호: #206
✅ 체크리스트
📝 작업 상세 내용
localStorage
에boolean
타입으로 지정됩니다./hooks/useTheme.ts
/components/Layout/Layout.tsx
Layout
컴포넌트의 요소들을styled-components
의ThemeProvider
로 감싸 줬습니다.theme
를 관리해야 하는 설정 페이지 제외)isDarkMode
값이true
일 경우semantic
상수의dark
객체 하위 색상으로 변경됩니다.🚨 버그 발생 이유 (선택 사항)
🔎 후속 작업 (선택 사항)
url
을 컴포넌트의props
로 전달해 사용하고 있는 것을 확인했습니다.🤔 질문 사항 (선택 사항)
📚 참고 자료 (선택 사항)
📸 스크린샷 (선택 사항)
✅ 셀프 체크리스트
이슈 번호: #206