|
@@ -7,7 +7,7 @@ import { usePathname } from 'next/navigation';
|
|
|
import useAuth from '@/hooks/useAuth';
|
|
import useAuth from '@/hooks/useAuth';
|
|
|
import useDragScroll from '@/hooks/useDragScroll';
|
|
import useDragScroll from '@/hooks/useDragScroll';
|
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
|
-import { faBars, faXmark, faCartShopping, faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
|
|
|
|
|
|
|
+import { faBars, faXmark, faCartShopping, faChevronLeft, faChevronRight, faSun, faMoon } from '@fortawesome/free-solid-svg-icons';
|
|
|
import NotificationBell from '@/app/component/NotificationBell';
|
|
import NotificationBell from '@/app/component/NotificationBell';
|
|
|
import HeaderSearch from '@/app/component/HeaderSearch';
|
|
import HeaderSearch from '@/app/component/HeaderSearch';
|
|
|
import SearchCommand from '@/app/component/SearchCommand';
|
|
import SearchCommand from '@/app/component/SearchCommand';
|
|
@@ -15,6 +15,7 @@ import Profile from '@/app/component/Profile';
|
|
|
import Logo from '@/app/component/Logo';
|
|
import Logo from '@/app/component/Logo';
|
|
|
import PointChargeIcon from '@/public/icons/layout/point.svg';
|
|
import PointChargeIcon from '@/public/icons/layout/point.svg';
|
|
|
import useCart from '@/hooks/useCart';
|
|
import useCart from '@/hooks/useCart';
|
|
|
|
|
+import useTheme from '@/hooks/useTheme';
|
|
|
import { FEATURE_CHANNEL } from '@/constants/features';
|
|
import { FEATURE_CHANNEL } from '@/constants/features';
|
|
|
import { useConfigContext } from '@/contexts/configProvider';
|
|
import { useConfigContext } from '@/contexts/configProvider';
|
|
|
|
|
|
|
@@ -51,6 +52,7 @@ export default function Header({ sidebarOpen, onToggle, showAside = true }: Prop
|
|
|
{
|
|
{
|
|
|
const { isAuthenticated } = useAuth();
|
|
const { isAuthenticated } = useAuth();
|
|
|
const { totalCount: cartCount } = useCart();
|
|
const { totalCount: cartCount } = useCart();
|
|
|
|
|
+ const { toggleTheme, isDark } = useTheme();
|
|
|
const pathname = usePathname();
|
|
const pathname = usePathname();
|
|
|
const dragScroll = useDragScroll<HTMLDivElement>();
|
|
const dragScroll = useDragScroll<HTMLDivElement>();
|
|
|
const config = useConfigContext();
|
|
const config = useConfigContext();
|
|
@@ -106,6 +108,10 @@ export default function Header({ sidebarOpen, onToggle, showAside = true }: Prop
|
|
|
<div className={Styles.headerActions}>
|
|
<div className={Styles.headerActions}>
|
|
|
{/* 통합 검색 — 디바운스 suggest + combobox (Ctrl+K/'/' 포커스 포함) */}
|
|
{/* 통합 검색 — 디바운스 suggest + combobox (Ctrl+K/'/' 포커스 포함) */}
|
|
|
<HeaderSearch />
|
|
<HeaderSearch />
|
|
|
|
|
+ {/* 라이트/다크 토글 — 장바구니 좌측. 해(라이트로) / 달(다크로) */}
|
|
|
|
|
+ <button type="button" className={Styles.themeBtn} onClick={toggleTheme} aria-label={isDark ? '라이트 모드로 전환' : '다크 모드로 전환'} title={isDark ? '라이트 모드' : '다크 모드'}>
|
|
|
|
|
+ <FontAwesomeIcon icon={isDark ? faSun : faMoon} />
|
|
|
|
|
+ </button>
|
|
|
<Link href="/cart" className={Styles.cartBtn} title="장바구니" aria-label="장바구니">
|
|
<Link href="/cart" className={Styles.cartBtn} title="장바구니" aria-label="장바구니">
|
|
|
<FontAwesomeIcon icon={faCartShopping} />
|
|
<FontAwesomeIcon icon={faCartShopping} />
|
|
|
{cartCount > 0 && (
|
|
{cartCount > 0 && (
|