coreui 소스를 ts 로 전환

src/components/AppHeader.tsx

@@ -0,0 +1,132 @@
+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,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CHeader,
+  CHeaderNav,
+  CHeaderToggler,
+  CNavLink,
+  CNavItem,
+  useColorModes,
+} from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+import {
+  cilBell,
+  cilContrast,
+  cilEnvelopeOpen,
+  cilList,
+  cilMenu,
+  cilMoon,
+  cilSun,
+} from '@coreui/icons'
+
+import { AppBreadcrumb } from './index'
+import { AppHeaderDropdown } from './header/index'
+
+const AppHeader = () => {
+  const headerRef = useRef<HTMLDivElement>(null)
+  const { colorMode, setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
+
+  const dispatch = useDispatch()
+  const sidebarShow = useSelector((state: RootState) => state.sidebarShow)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      headerRef.current &&
+        headerRef.current.classList.toggle('shadow-sm', document.documentElement.scrollTop > 0)
+    }
+
+    document.addEventListener('scroll', handleScroll)
+    return () => document.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  return (
+    <CHeader position="sticky" className="mb-4 p-0" ref={headerRef}>
+      <CContainer className="border-bottom px-4" fluid>
+        <CHeaderToggler
+          onClick={() => dispatch({ type: 'set', sidebarShow: !sidebarShow })}
+          style={{ marginInlineStart: '-14px' }}
+        >
+          <CIcon icon={cilMenu} size="lg" />
+        </CHeaderToggler>
+        <CHeaderNav className="d-none d-md-flex">
+          <AppBreadcrumb />
+        </CHeaderNav>
+        <CHeaderNav className="ms-auto">
+          <CNavItem>
+            <CNavLink href="#">
+              <CIcon icon={cilBell} size="lg" />
+            </CNavLink>
+          </CNavItem>
+          <CNavItem>
+            <CNavLink href="#">
+              <CIcon icon={cilList} size="lg" />
+            </CNavLink>
+          </CNavItem>
+          <CNavItem>
+            <CNavLink href="#">
+              <CIcon icon={cilEnvelopeOpen} size="lg" />
+            </CNavLink>
+          </CNavItem>
+        </CHeaderNav>
+        <CHeaderNav>
+          <li className="nav-item py-1">
+            <div className="vr h-100 mx-2 text-body text-opacity-75"></div>
+          </li>
+          <CDropdown variant="nav-item" placement="bottom-end">
+            <CDropdownToggle caret={false}>
+              {colorMode === 'dark' ? (
+                <CIcon icon={cilMoon} size="lg" />
+              ) : colorMode === 'auto' ? (
+                <CIcon icon={cilContrast} size="lg" />
+              ) : (
+                <CIcon icon={cilSun} size="lg" />
+              )}
+            </CDropdownToggle>
+            <CDropdownMenu>
+              <CDropdownItem
+                active={colorMode === 'light'}
+                className="d-flex align-items-center"
+                as="button"
+                type="button"
+                onClick={() => setColorMode('light')}
+              >
+                <CIcon className="me-2" icon={cilSun} size="lg" /> Light
+              </CDropdownItem>
+              <CDropdownItem
+                active={colorMode === 'dark'}
+                className="d-flex align-items-center"
+                as="button"
+                type="button"
+                onClick={() => setColorMode('dark')}
+              >
+                <CIcon className="me-2" icon={cilMoon} size="lg" /> Dark
+              </CDropdownItem>
+              <CDropdownItem
+                active={colorMode === 'auto'}
+                className="d-flex align-items-center"
+                as="button"
+                type="button"
+                onClick={() => setColorMode('auto')}
+              >
+                <CIcon className="me-2" icon={cilContrast} size="lg" /> Auto
+              </CDropdownItem>
+            </CDropdownMenu>
+          </CDropdown>
+          <li className="nav-item py-1">
+            <div className="vr h-100 mx-2 text-body text-opacity-75"></div>
+          </li>
+          <AppHeaderDropdown />
+        </CHeaderNav>
+      </CContainer>
+    </CHeader>
+  )
+}
+
+export default AppHeader