Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix/UseTheme - Zustand Persist로 테마 데이터 변경 외 2개 수정사항 #75

Merged
merged 4 commits into from
Nov 6, 2024
Merged

Fix/UseTheme - Zustand Persist로 테마 데이터 변경 외 2개 수정사항 #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c6927ab
fix: ? Null 체크 추가
whitedev7773 Nov 6, 2024
83f2166
fix: zustand persist로 테마 데이터 저장
whitedev7773 Nov 6, 2024
eac0c7f
fix: theme*.css를 /public으로 이동
whitedev7773 Nov 6, 2024
dac2aa0
fix: 404 페이지 100vh로 수정
whitedev7773 Nov 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/logo/black_square.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link id="light-theme" rel="stylesheet" href="/src/styles/light.css" />
<link id="dark-theme" rel="stylesheet" href="/src/styles/dark.css" disabled />
<link id="light-theme" rel="stylesheet" href="/style/light.css" />
<link id="dark-theme" rel="stylesheet" href="/style/dark.css" disabled />
<title>KNU KERT</title>
</head>
<body>
Expand Down
0 src/styles/dark.css → public/style/dark.css
View file
Open in desktop
File renamed without changes.
0 src/styles/light.css → public/style/light.css
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion src/components/display/HistoryPreview.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,7 @@ export const HistoryPreview = () => {
return (
<PreviewWrapper>
<YearListWrapper>
{display_key.map((year, i) => (
{display_key?.map((year, i) => (
<YearWrapper
key={i}
className={display_year == year ? 'active' : ''}
Expand Down
90 changes: 35 additions & 55 deletions src/hooks/theme/useTheme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,46 @@
import { useState, useEffect } from 'react';

const useTheme = () => {
// 초기 테마 설정
const getInitialTheme = () => {
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
return savedTheme;
}
const systemPrefersDark = window.matchMedia(
'(prefers-color-scheme: dark)',
).matches;
return systemPrefersDark ? 'dark' : 'light';
};

const [theme, setTheme] = useState(getInitialTheme);

// 테마를 적용하는 함수
const applyTheme = (theme) => {
const lightThemeLink = document.getElementById('light-theme');
const darkThemeLink = document.getElementById('dark-theme');
import { useEffect } from 'react';
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const getInitialTheme = () => {
const savedTheme = localStorage.getItem('theme');
return (
savedTheme ||
(window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light')
);
};

if (theme === 'dark') {
if (darkThemeLink) darkThemeLink.disabled = false;
if (lightThemeLink) lightThemeLink.disabled = true;
} else {
if (darkThemeLink) darkThemeLink.disabled = true;
if (lightThemeLink) lightThemeLink.disabled = false;
}
};
const useThemeStore = create(
persist(
(set) => ({
theme: getInitialTheme(),
setTheme: (theme) => set({ theme }),
}),
{ name: 'theme' },
),
);

// 초기 로드 시 테마 적용
useEffect(() => {
applyTheme(theme);
localStorage.setItem('theme', theme);
}, [theme]);
const useTheme = () => {
const { theme, setTheme } = useThemeStore();

// 시스템 테마 변경 감지
useEffect(() => {
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

const systemThemeChangeListener = (e) => {
const newSystemPrefersDark = e.matches;
const savedTheme = localStorage.getItem('theme');

if (!savedTheme) {
setTheme(newSystemPrefersDark ? 'dark' : 'light');
}
const themes = {
light: { dark: true, light: false },
dark: { dark: false, light: true },
};

mediaQuery.addEventListener('change', systemThemeChangeListener);

return () => {
mediaQuery.removeEventListener('change', systemThemeChangeListener);
};
}, []);
['light', 'dark'].forEach((type) => {
const link = document.getElementById(`${type}-theme`);
if (link) link.disabled = themes[theme][type];
});
}, [theme]);

// 테마를 토글하는 함수
const toggleTheme = () => {
setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
return {
theme,
toggleTheme: () => setTheme(theme === 'light' ? 'dark' : 'light'),
};

return { theme, toggleTheme };
};

export default useTheme;
2 changes: 1 addition & 1 deletion src/pages/NotFound.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const Wrapper = styled.div`
position: relative;

width: 100%;
height: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
Expand Down