coreui 소스를 ts 로 전환

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 exact path="/register" name="Register Page" element={<Register />} />
-          <Route exact path="/404" name="Page 404" element={<Page404 />} />
-          <Route exact path="/500" name="Page 500" element={<Page500 />} />
-          <Route path="*" name="Home" element={<DefaultLayout />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/register" element={<Register />} />
+          <Route path="/404" element={<Page404 />} />
+          <Route path="/500" element={<Page500 />} />
+          <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 sidebarShow = useSelector((state) => state.sidebarShow)
+  const unfoldable = useSelector((state: RootState) => state.sidebarUnfoldable)
+  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;
+}