Răsfoiți Sursa

feat(ui): 푸터 회사소개·YouTube 고지 숨김 + 헤더 라이트/다크 토글 + 채팅 하단 패딩 제거

- Footer: 회사소개·YouTube 고지 링크 JSX 주석 처리(임시 숨김, 되살릴 때 antooza 도메인 교체)
- Header: 장바구니 좌측에 해/달 테마 토글 버튼(useTheme, hover 회전 연출, prefers-reduced-motion 존중)
- chat-dock: .chat-dock #chat-room 에 padding-bottom:0

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
KIM-JINO5 1 săptămână în urmă
părinte
comite
b10d795ab7

+ 2 - 2
app/component/Footer.tsx

@@ -11,10 +11,10 @@ export default function Footer()
     return (
         <footer id='footer' className={`${Styles.footer} px-4`}>
             <nav className={Styles.footerLinks} aria-label='하단 메뉴'>
-                <Link href='https://dpot.company'>회사소개</Link>
+                {/* 회사소개 임시 숨김 (되살릴 때 antooza 도메인으로 교체 필요): <Link href='https://dpot.company'>회사소개</Link> */}
                 <Link href='/docs/terms-of-service'>이용약관</Link>
                 <Link href='/docs/privacy-policy'>개인정보처리방침</Link>
-                <Link href='/docs/youtube-api-disclosure'>YouTube 고지</Link>
+                {/* YouTube 고지 임시 숨김: <Link href='/docs/youtube-api-disclosure'>YouTube 고지</Link> */}
                 <Link href={`https://www.ftc.go.kr/bizCommPop.do?wrkr_no=${config.company.regNo?.replace(/-/g, '') ?? ''}`} target='_blank' rel='noopener noreferrer'>
                     사업자 정보
                 </Link>

+ 7 - 1
app/component/Header.tsx

@@ -7,7 +7,7 @@ import { usePathname } from 'next/navigation';
 import useAuth from '@/hooks/useAuth';
 import useDragScroll from '@/hooks/useDragScroll';
 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 HeaderSearch from '@/app/component/HeaderSearch';
 import SearchCommand from '@/app/component/SearchCommand';
@@ -15,6 +15,7 @@ import Profile from '@/app/component/Profile';
 import Logo from '@/app/component/Logo';
 import PointChargeIcon from '@/public/icons/layout/point.svg';
 import useCart from '@/hooks/useCart';
+import useTheme from '@/hooks/useTheme';
 import { FEATURE_CHANNEL } from '@/constants/features';
 import { useConfigContext } from '@/contexts/configProvider';
 
@@ -51,6 +52,7 @@ export default function Header({ sidebarOpen, onToggle, showAside = true }: Prop
 {
 	const { isAuthenticated } = useAuth();
 	const { totalCount: cartCount } = useCart();
+	const { toggleTheme, isDark } = useTheme();
 	const pathname = usePathname();
 	const dragScroll = useDragScroll<HTMLDivElement>();
 	const config = useConfigContext();
@@ -106,6 +108,10 @@ export default function Header({ sidebarOpen, onToggle, showAside = true }: Prop
 				<div className={Styles.headerActions}>
 					{/* 통합 검색 — 디바운스 suggest + combobox (Ctrl+K/'/' 포커스 포함) */}
 					<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="장바구니">
 						<FontAwesomeIcon icon={faCartShopping} />
 						{cartCount > 0 && (

+ 1 - 0
app/styles/chat-dock.scss

@@ -58,6 +58,7 @@
 		flex: 1;
 		min-width: 0;
 		padding: var(--sp-3);
+		padding-bottom: 0;
 		gap: var(--sp-2);
 
 		// 좁은 폭: 참여자 수 버튼 타이포 축소

+ 38 - 0
app/styles/layout.module.scss

@@ -183,6 +183,44 @@
 		}
 	}
 
+	.themeBtn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 36px;
+		height: 36px;
+		padding: 0;
+		border: none;
+		border-radius: 18px;
+		background: transparent;
+		color: var(--text-head);
+		font-size: 1rem;
+		cursor: pointer;
+
+		svg {
+			transition: transform 0.3s ease;
+		}
+
+		&:hover {
+			outline: 1px solid var(--outline-default);
+			background: var(--bg-icon);
+
+			svg {
+				transform: rotate(-20deg) scale(1.1);
+			}
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			svg {
+				transition: none;
+			}
+
+			&:hover svg {
+				transform: none;
+			}
+		}
+	}
+
 	.cartBadge {
 		position: absolute;
 		top: -2px;