Skip to content

Commit 9378da8

Browse files
jaeho614jaeho614
authored
Refactor/code-cleanup (#40)
* rename: 컨벤션과 맞지 않는 파일명 수정 * refactor: React.FC 삭제, 컴포넌트 arrow function으로 통일 및 export default 삭제 * refactor: 폴더구조 변경 및 그에 따른 경로 변경 및 파일분리 * refactor: barrel export를 위한 폴더별 index.ts 파일 추가 및 그에 따른 import 수정 * refactor: auth와 signup파일 분리 * refactor: 폴더별 constant파일 생성 및 분리, 중복코드 제거 * refactor: signup-constants.ts 파일명 오타 수정 * refactor: import문 컨벤션에 맞춰서 정리
1 parent 9e35e5b commit 9378da8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+637
-588
lines changed

‎src/app/App.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { useEffect } from 'react';
2+
import { Routes, Route } from 'react-router';
3+
4+
import { useAppDispatch, useAppSelector } from './hooks';
5+
6+
import {
7+
useGetSystemThemeQuery,
8+
useGetUserThemeQuery,
9+
} from '../features/admin/theme';
10+
import {
11+
setSystemTheme,
12+
setThemeMode,
13+
} from '../features/admin/theme/slices/theme-slice';
14+
15+
import { HomePage } from '../pages/home/home-page';
16+
import { Signup } from '../features/signup/pages/sign-up';
17+
import { OAuthCallback } from '../features/auth';
18+
import { ThemeCustomizer } from '../features/admin/theme/pages/theme-customizer';
19+
20+
import '../App.css';
21+
22+
export const App = () => {
23+
const dispatch = useAppDispatch();
24+
const isAuthenticated = true;
25+
const themeMode = useAppSelector((state) => state.theme.mode);
26+
27+
// 시스템 테마 로드 (모든 사용자)
28+
const { data: systemTheme, isSuccess } = useGetSystemThemeQuery();
29+
30+
// 사용자 다크모드 설정 로드 (로그인 시만)
31+
const { data: userTheme } = useGetUserThemeQuery(undefined, {
32+
skip: !isAuthenticated,
33+
});
34+
35+
// 초기 다크모드 적용
36+
useEffect(() => {
37+
document.documentElement.classList.toggle('dark', themeMode === 'dark');
38+
}, [themeMode]);
39+
40+
// 시스템 테마 적용
41+
useEffect(() => {
42+
if (isSuccess && systemTheme) {
43+
dispatch(setSystemTheme(systemTheme));
44+
}
45+
}, [systemTheme, isSuccess, dispatch]);
46+
47+
// 사용자 다크모드 적용
48+
useEffect(() => {
49+
if (userTheme) {
50+
dispatch(setThemeMode(userTheme.mode));
51+
}
52+
}, [userTheme, dispatch]);
53+
54+
return (
55+
<Routes>
56+
<Route path="/" element={<HomePage />} />
57+
<Route path="/signup" element={<Signup />} />
58+
<Route path="/oauth/callback" element={<OAuthCallback />} />
59+
<Route path="/admin" element={<ThemeCustomizer />} />
60+
</Routes>
61+
);
62+
};

‎src/app/hooks.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import {
2+
useDispatch,
3+
useSelector,
4+
type TypedUseSelectorHook,
5+
} from 'react-redux';
6+
7+
import type { AppDispatch, RootState } from './store';
8+
9+
export const useAppDispatch = () => useDispatch<AppDispatch>();
10+
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

src/store/index.ts renamed to src/app/store.ts

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import { configureStore } from '@reduxjs/toolkit';
2-
import signupReducer from './slices/signup-slice';
3-
import signupAddressReducer from './slices/signup-address-slice';
4-
import themeReducer from './slices/themeSlice';
5-
import authReducer from './slices/authSlice';
6-
import { themeApi } from './api/themeApi';
7-
import { authApi } from './api/authApi';
8-
import { noticeApi } from './api/noticeApi';
2+
3+
import signupReducer from '../features/signup/slices/signup-slice';
4+
import signupAddressReducer from '../features/signup/slices/signup-address-slice';
5+
import themeReducer from '../features/admin/theme/slices/theme-slice';
6+
import authReducer from '../features/auth/slices/auth-slice';
7+
import { themeApi } from '../features/admin/theme';
8+
import { authApi } from '../features/auth';
9+
import { noticeApi } from '../features/notice';
10+
import { signupApi } from '../features/signup';
911

1012
export const store = configureStore({
1113
reducer: {
@@ -16,12 +18,14 @@ export const store = configureStore({
1618
[themeApi.reducerPath]: themeApi.reducer,
1719
[authApi.reducerPath]: authApi.reducer,
1820
[noticeApi.reducerPath]: noticeApi.reducer,
21+
[signupApi.reducerPath]: signupApi.reducer,
1922
},
2023
middleware: (getDefaultMiddleware) =>
2124
getDefaultMiddleware()
2225
.concat(themeApi.middleware)
2326
.concat(authApi.middleware)
24-
.concat(noticeApi.middleware),
27+
.concat(noticeApi.middleware)
28+
.concat(signupApi.middleware),
2529
});
2630

2731
export type RootState = ReturnType<typeof store.getState>;

‎src/components/notice/notice-list.tsx‎

Lines changed: 0 additions & 79 deletions
This file was deleted.

src/store/api/themeApi.ts renamed to src/features/admin/theme/api/theme-api.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { createApi, fakeBaseQuery } from '@reduxjs/toolkit/query/react';
2-
import type { SystemTheme } from '../../types/themeTypes';
3-
import { DEFAULT_SYSTEM_THEME } from '../../constants/defaultTheme';
2+
3+
import type { SystemTheme } from '../types/theme-types';
4+
import { DEFAULT_SYSTEM_THEME } from '../constants/default-theme';
45

56
interface UserThemePreference {
67
mode: 'light' | 'dark';

src/components/ThemeToggle.tsx renamed to src/features/admin/theme/components/theme-toggle.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import { Moon, Sun } from 'lucide-react';
2-
import { useAppDispatch, useAppSelector } from '../hooks/redux';
3-
import { useUpdateUserThemeMutation } from '../store/api/themeApi';
4-
import { toggleTheme } from '../store/slices/themeSlice';
52

6-
export function ThemeToggle() {
3+
import { useAppDispatch, useAppSelector } from '../../../../app/hooks';
4+
5+
import { toggleTheme } from '../slices/theme-slice';
6+
import { useUpdateUserThemeMutation } from '../api/theme-api';
7+
8+
export const ThemeToggle = () => {
79
const dispatch = useAppDispatch();
810
const mode = useAppSelector((state) => state.theme.mode);
911
// const isAuthenticated = useAppSelector(state => state.auth.isAuthenticated);
@@ -37,4 +39,4 @@ export function ThemeToggle() {
3739
)}
3840
</button>
3941
);
40-
}
42+
};

src/constants/defaultTheme.ts renamed to src/features/admin/theme/constants/default-theme.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { SystemTheme } from '../types/themeTypes';
1+
import type { SystemTheme } from '../types/theme-types';
22

33
export const DEFAULT_SYSTEM_THEME: SystemTheme = {
44
primary: {

‎src/features/admin/theme/index.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export { ThemeCustomizer } from './pages/theme-customizer';
2+
3+
export { themeApi } from './api/theme-api';
4+
export {
5+
useGetSystemThemeQuery,
6+
useUpdateSystemThemeMutation,
7+
useGetUserThemeQuery,
8+
} from './api/theme-api';
9+
10+
export { setThemeMode, setSystemTheme } from './slices/theme-slice';
11+
12+
export type { SystemTheme } from './types/theme-types';

src/page/admin/theme-customizer.tsx renamed to src/features/admin/theme/pages/theme-customizer.tsx

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
import { useState, useEffect } from 'react';
2-
import { useAppDispatch, useAppSelector } from '../../hooks/redux';
2+
3+
import { useAppDispatch, useAppSelector } from '../../../../app/hooks';
4+
5+
import { Button, ColorInput } from '../../../../shared/components/ui';
6+
7+
import { resetToDefaultTheme } from '../slices/theme-slice';
38
import {
49
useResetSystemThemeMutation,
510
useUpdateSystemThemeMutation,
6-
} from '../../store/api/themeApi';
7-
import { ThemeToggle } from '../../components/ThemeToggle';
8-
import { Button } from '../../components/ui/button';
9-
import type { SystemTheme } from '../../types/themeTypes';
10-
import { ColorInput } from '../../components/ui/colorinput';
11-
import { DEFAULT_SYSTEM_THEME } from '../../constants/defaultTheme';
12-
import { resetToDefaultTheme } from '../../store/slices/themeSlice';
13-
14-
export function ThemeCustomizer() {
11+
} from '../api/theme-api';
12+
import type { SystemTheme } from '../types/theme-types';
13+
import { DEFAULT_SYSTEM_THEME } from '../constants/default-theme';
14+
import { ThemeToggle } from '../components/theme-toggle';
15+
16+
export const ThemeCustomizer = () => {
1517
const dispatch = useAppDispatch();
1618
const currentTheme = useAppSelector((state) => state.theme.systemTheme);
1719
const [updateTheme, { isLoading: isUpdating }] =
@@ -783,4 +785,4 @@ export function ThemeCustomizer() {
783785
</div>
784786
</div>
785787
);
786-
}
788+
};

src/store/slices/themeSlice.ts renamed to src/features/admin/theme/slices/theme-slice.ts

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
2-
import type { SystemTheme } from '../../types/themeTypes';
3-
import { DEFAULT_SYSTEM_THEME } from '../../constants/defaultTheme';
2+
3+
import type { SystemTheme } from '../types/theme-types';
4+
import { DEFAULT_SYSTEM_THEME } from '../constants/default-theme';
45

56
interface ThemeState {
67
mode: 'light' | 'dark';
78
systemTheme: SystemTheme;
89
}
910

10-
function loadInitialTheme(): SystemTheme {
11+
const loadInitialTheme = (): SystemTheme => {
1112
try {
1213
const stored = localStorage.getItem('system-theme');
1314
if (!stored) return DEFAULT_SYSTEM_THEME;
@@ -29,7 +30,7 @@ function loadInitialTheme(): SystemTheme {
2930
console.error('Failed to load theme from localStorage:', error);
3031
return DEFAULT_SYSTEM_THEME;
3132
}
32-
}
33+
};
3334

3435
const initialState: ThemeState = {
3536
mode: (localStorage.getItem('theme-mode') as 'light' | 'dark') || 'light',
@@ -68,7 +69,7 @@ const themeSlice = createSlice({
6869
},
6970
});
7071

71-
function applyThemeToDOM(theme: SystemTheme) {
72+
const applyThemeToDOM = (theme: SystemTheme): void => {
7273
if (
7374
!theme ||
7475
!theme.primary ||
@@ -255,7 +256,7 @@ function applyThemeToDOM(theme: SystemTheme) {
255256
} catch (error) {
256257
console.error('Error applying theme to DOM:', error);
257258
}
258-
}
259+
};
259260

260261
export const {
261262
toggleTheme,

0 commit comments

Comments
 (0)