coreui 소스를 ts 로 전환

package.json

@@ -1,4 +1,5 @@
 {
+  "type": "module",
   "name": "@coreui/coreui-free-react-admin-template",
   "version": "5.5.0",
   "description": "CoreUI Free React Admin Template",
@@ -27,6 +28,11 @@
     "@coreui/react-chartjs": "^3.0.0",
     "@coreui/utils": "^2.0.2",
     "@popperjs/core": "^2.11.8",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^25.0.3",
+    "@types/prop-types": "^15.7.15",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "chart.js": "^4.5.1",
     "classnames": "^2.5.1",
     "core-js": "^3.47.0",
@@ -36,7 +42,8 @@
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.11.0",
     "redux": "5.0.1",
-    "simplebar-react": "^3.3.2"
+    "simplebar-react": "^3.3.2",
+    "typescript": "^5.9.3"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^5.1.2",

src/App.tsx

@@ -1,6 +1,7 @@
 import React, { Suspense, useEffect } from 'react'
 import { HashRouter, Route, Routes } from 'react-router-dom'
 import { useSelector } from 'react-redux'
+import { RootState } from './store'
 
 import { CSpinner, useColorModes } from '@coreui/react'
 import './scss/style.scss'
@@ -19,11 +20,11 @@ const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
 
 const App = () => {
   const { isColorModeSet, setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
-  const storedTheme = useSelector((state) => state.theme)
+  const storedTheme = useSelector((state: RootState) => state.theme)
 
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.href.split('?')[1])
-    const theme = urlParams.get('theme') && urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
+    const theme = urlParams.get('theme')?.match(/^[A-Za-z0-9\s]+/)?.[0]
     if (theme) {
       setColorMode(theme)
     }
@@ -45,11 +46,11 @@ const App = () => {
         }
       >
         <Routes>
-          <Route exact path="/login" name="Login Page" element={<Login />} />
+          <Route path="/login" element={<Login />} />
-          <Route exact path="/register" name="Register Page" element={<Register />} />
+          <Route path="/register" element={<Register />} />
-          <Route exact path="/404" name="Page 404" element={<Page404 />} />
+          <Route path="/404" element={<Page404 />} />
-          <Route exact path="/500" name="Page 500" element={<Page500 />} />
+          <Route path="/500" element={<Page500 />} />
-          <Route path="*" name="Home" element={<DefaultLayout />} />
+          <Route path="*" element={<DefaultLayout />} />
         </Routes>
       </Suspense>
     </HashRouter>

src/components/AppContent.tsx

@@ -16,8 +16,6 @@ const AppContent = () => {
                 <Route
                   key={idx}
                   path={route.path}
-                  exact={route.exact}
-                  name={route.name}
                   element={<route.element />}
                 />
               )

src/components/AppHeader.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from 'react'
 import { NavLink } from 'react-router-dom'
 import { useSelector, useDispatch } from 'react-redux'
+import { RootState } from '../store'
 import {
   CContainer,
   CDropdown,
@@ -29,11 +30,11 @@ import { AppBreadcrumb } from './index'
 import { AppHeaderDropdown } from './header/index'
 
 const AppHeader = () => {
-  const headerRef = useRef()
+  const headerRef = useRef<HTMLDivElement>(null)
   const { colorMode, setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
 
   const dispatch = useDispatch()
-  const sidebarShow = useSelector((state) => state.sidebarShow)
+  const sidebarShow = useSelector((state: RootState) => state.sidebarShow)
 
   useEffect(() => {
     const handleScroll = () => {

src/components/AppSidebar.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
+import { NavLink } from 'react-router-dom'
 import { useSelector, useDispatch } from 'react-redux'
+import { RootState } from '../store'
 
 import {
   CCloseButton,
@@ -21,8 +23,8 @@ import navigation from '../_nav'
 
 const AppSidebar = () => {
   const dispatch = useDispatch()
-  const unfoldable = useSelector((state) => state.sidebarUnfoldable)
+  const unfoldable = useSelector((state: RootState) => state.sidebarUnfoldable)
-  const sidebarShow = useSelector((state) => state.sidebarShow)
+  const sidebarShow = useSelector((state: RootState) => state.sidebarShow)
 
   return (
     <CSidebar
@@ -36,7 +38,7 @@ const AppSidebar = () => {
       }}
     >
       <CSidebarHeader className="border-bottom">
-        <CSidebarBrand to="/">
+        <CSidebarBrand as={NavLink} to="/">
           <CIcon customClassName="sidebar-brand-full" icon={logo} height={32} />
           <CIcon customClassName="sidebar-brand-narrow" icon={sygnet} height={32} />
         </CSidebarBrand>

src/images.d.ts

@@ -0,0 +1,19 @@
+declare module '*.webp' {
+    const src: string;
+    export default src;
+}
+
+declare module '*.png' {
+    const src: string;
+    export default src;
+}
+
+declare module '*.jpg' {
+    const src: string;
+    export default src;
+}
+
+declare module '*.svg' {
+    const src: string;
+    export default src;
+}

src/index.tsx

@@ -6,7 +6,7 @@ import 'core-js'
 import App from './App'
 import store from './store'
 
-createRoot(document.getElementById('root')).render(
+createRoot(document.getElementById('root')!).render(
   <Provider store={store}>
     <App />
   </Provider>,

src/store.js

@@ -1,18 +0,0 @@
-import { legacy_createStore as createStore } from 'redux'
-
-const initialState = {
-  sidebarShow: true,
-  theme: 'light',
-}
-
-const changeState = (state = initialState, { type, ...rest }) => {
-  switch (type) {
-    case 'set':
-      return { ...state, ...rest }
-    default:
-      return state
-  }
-}
-
-const store = createStore(changeState)
-export default store

src/store.tsx

@@ -0,0 +1,33 @@
+import { legacy_createStore as createStore } from 'redux'
+
+// 상태(State) 타입 정의
+interface AppState {
+  sidebarShow: boolean
+  sidebarUnfoldable: boolean
+  theme: string
+}
+
+const initialState: AppState = {
+  sidebarShow: true,
+  sidebarUnfoldable: false,
+  theme: 'light',
+}
+
+// 액션(Action) 타입 정의
+interface Action {
+  type: string
+  [key: string]: any
+}
+
+const changeState = (state = initialState, { type, ...rest }: Action): AppState => {
+  switch (type) {
+    case 'set':
+      return { ...state, ...rest }
+    default:
+      return state
+  }
+}
+
+const store = createStore(changeState)
+export type RootState = ReturnType<typeof store.getState>
+export default store

src/styles.d.ts

@@ -0,0 +1,4 @@
+declare module '*.scss' {
+    const content: { [className: string]: string };
+    export default content;
+}

tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "ES5",
+    "strict": true,
+    "allowJs": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    // Stricter Typechecking Options
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    // Style Options
+    // "noImplicitReturns": true,
+    // "noImplicitOverride": true,
+    // "noUnusedLocals": true,
+    // "noUnusedParameters": true,
+    // "noFallthroughCasesInSwitch": true,
+    // "noPropertyAccessFromIndexSignature": true,
+    // Recommended Options
+    "verbatimModuleSyntax": false,
+    "isolatedModules": true,
+    "noUncheckedSideEffectImports": true,
+    "moduleDetection": "force",
+    "skipLibCheck": true,
+  },
+  "include": [
+    "src",
+    "src/images.d.ts",
+    "src/styles.d.ts"
+  ]
+}

vite.config.mjs

@@ -16,11 +16,6 @@ export default defineConfig(() => {
         ],
       },
     },
-    esbuild: {
-      loader: 'jsx',
-      include: /src\/.*\.jsx?$/,
-      exclude: [],
-    },
     optimizeDeps: {
       force: true,
       esbuildOptions: {
@@ -33,7 +28,7 @@ export default defineConfig(() => {
     resolve: {
       alias: [
         {
-          find: 'src/',
+          find: 'src',
           replacement: `${path.resolve(__dirname, 'src')}/`,
         },
       ],