From 72a05db7c36446fc21193163820976bcfc5c7da1 Mon Sep 17 00:00:00 2001 From: zio Date: Mon, 1 Jun 2026 01:55:51 +0900 Subject: [PATCH] =?UTF-8?q?fix(ui):=20=EB=A9=94=EB=89=B4=20=ED=81=B4?= =?UTF-8?q?=EB=A6=AD=20=EB=84=A4=EB=B9=84=EA=B2=8C=EC=9D=B4=EC=85=98=20+?= =?UTF-8?q?=20=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4=20=EB=94=9C=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/layout/Header.jsx | 398 +++++++++++----------- 1 file changed, 200 insertions(+), 198 deletions(-) diff --git a/frontend/src/components/layout/Header.jsx b/frontend/src/components/layout/Header.jsx index 6d1250a..41237df 100644 --- a/frontend/src/components/layout/Header.jsx +++ b/frontend/src/components/layout/Header.jsx @@ -1,198 +1,200 @@ -import React, { useState, useEffect } from 'react'; -import { Link, useLocation, useNavigate } from 'react-router-dom'; -import './Header.css'; - -const MENU = [ - { - id: 'company', label: '회사소개', - children: [ - { label: 'CEO 인사말', path: '/company/greeting' }, - { label: '연혁', path: '/company/history' }, - { label: '조직도', path: '/company/organization' }, - { label: 'CI 소개', path: '/company/ci' }, - { label: '오시는 길', path: '/company/location' }, - ] - }, - { - id: 'solution', label: '솔루션', - children: [ - { label: 'GUARDiA ITSM', path: '/solution/guardia', badge: 'NEW' }, - { label: 'ERP', path: '/solution/erp' }, - { label: 'CRM', path: '/solution/crm' }, - { label: 'BI', path: '/solution/bi' }, - ] - }, - { - id: 'business', label: '사업실적', - children: [ - { label: '구축 레퍼런스', path: '/business/reference' }, - { label: '파트너', path: '/business/partner' }, - ] - }, - { - id: 'support', label: '고객지원', - children: [ - { label: '공지사항', path: '/support/notice' }, - { label: 'FAQ', path: '/support/faq' }, - { label: '카탈로그', path: '/support/catalog' }, - { label: '문의하기', path: '/support/contact' }, - ] - }, - { - id: 'recruit', label: '채용', - children: [ - { label: '채용공고', path: '/recruit/jobs' }, - { label: '복리후생', path: '/recruit/welfare' }, - { label: '지원하기', path: '/recruit/apply' }, - ] - }, - { - id: 'news', label: '뉴스', - children: [ - { label: '뉴스룸', path: '/news/newsroom' }, - { label: '기술 블로그', path: '/news/blog' }, - ] - }, -]; - -export default function Header() { - const [scrolled, setScrolled] = useState(false); - const [activeMenu, setActiveMenu] = useState(null); - const [mobileOpen, setMobileOpen] = useState(false); - const [member, setMember] = useState(null); - const location = useLocation(); - const navigate = useNavigate(); - - // 로그인 상태 동기화 - useEffect(() => { - const sync = () => { - const u = localStorage.getItem('member_user'); - setMember(u ? JSON.parse(u) : null); - }; - sync(); - window.addEventListener('storage', sync); - return () => window.removeEventListener('storage', sync); - }, [location]); - - const logout = () => { - localStorage.removeItem('member_token'); - localStorage.removeItem('member_user'); - setMember(null); - navigate('/'); - }; - - useEffect(() => { - const onScroll = () => setScrolled(window.scrollY > 60); - window.addEventListener('scroll', onScroll, { passive: true }); - return () => window.removeEventListener('scroll', onScroll); - }, []); - - useEffect(() => { - setMobileOpen(false); - setActiveMenu(null); - }, [location]); - - const isActive = (menu) => - menu.children?.some(c => location.pathname.startsWith(c.path)); - - return ( - <> - {/* 접근성 스킵 링크 */} - 본문 바로가기 - -
-
- {/* 로고 */} - - (주)지오정보기술 로고 { e.target.src='/zioinfo-logo.png'; e.target.onerror = () => { e.target.style.display='none'; e.target.nextSibling.style.display='flex'; }; }} /> - - ZioInfo - - - - {/* 데스크톱 메뉴 */} - - - {/* 우측 버튼 영역 */} -
- 문의하기 - {member ? ( -
- - {member.name}님 - - -
- ) : ( - 로그인 - )} -
- - {/* 햄버거 (모바일) */} - -
- - {/* 모바일 메뉴 */} - {mobileOpen && ( - - )} -
- - ); -} +import React, { useState, useEffect } from 'react'; +import { Link, useLocation, useNavigate } from 'react-router-dom'; +import './Header.css'; + +const MENU = [ + { + id: 'company', label: '회사소개', + children: [ + { label: 'CEO 인사말', path: '/company/greeting' }, + { label: '연혁', path: '/company/history' }, + { label: '조직도', path: '/company/organization' }, + { label: 'CI 소개', path: '/company/ci' }, + { label: '오시는 길', path: '/company/location' }, + ] + }, + { + id: 'solution', label: '솔루션', + children: [ + { label: 'GUARDiA ITSM', path: '/solution/guardia', badge: 'NEW' }, + { label: 'ERP', path: '/solution/erp' }, + { label: 'CRM', path: '/solution/crm' }, + { label: 'BI', path: '/solution/bi' }, + ] + }, + { + id: 'business', label: '사업실적', + children: [ + { label: '구축 레퍼런스', path: '/business/reference' }, + { label: '파트너', path: '/business/partner' }, + ] + }, + { + id: 'support', label: '고객지원', + children: [ + { label: '공지사항', path: '/support/notice' }, + { label: 'FAQ', path: '/support/faq' }, + { label: '카탈로그', path: '/support/catalog' }, + { label: '문의하기', path: '/support/contact' }, + ] + }, + { + id: 'recruit', label: '채용', + children: [ + { label: '채용공고', path: '/recruit/jobs' }, + { label: '복리후생', path: '/recruit/welfare' }, + { label: '지원하기', path: '/recruit/apply' }, + ] + }, + { + id: 'news', label: '뉴스', + children: [ + { label: '뉴스룸', path: '/news/newsroom' }, + { label: '기술 블로그', path: '/news/blog' }, + ] + }, +]; + +export default function Header() { + const [scrolled, setScrolled] = useState(false); + const [activeMenu, setActiveMenu] = useState(null); + const [mobileOpen, setMobileOpen] = useState(false); + const [member, setMember] = useState(null); + const closeTimer = React.useRef(null); + const location = useLocation(); + const navigate = useNavigate(); + + // 로그인 상태 동기화 + useEffect(() => { + const sync = () => { + const u = localStorage.getItem('member_user'); + setMember(u ? JSON.parse(u) : null); + }; + sync(); + window.addEventListener('storage', sync); + return () => window.removeEventListener('storage', sync); + }, [location]); + + const logout = () => { + localStorage.removeItem('member_token'); + localStorage.removeItem('member_user'); + setMember(null); + navigate('/'); + }; + + useEffect(() => { + const onScroll = () => setScrolled(window.scrollY > 60); + window.addEventListener('scroll', onScroll, { passive: true }); + return () => window.removeEventListener('scroll', onScroll); + }, []); + + useEffect(() => { + setMobileOpen(false); + setActiveMenu(null); + }, [location]); + + const isActive = (menu) => + menu.children?.some(c => location.pathname.startsWith(c.path)); + + return ( + <> + {/* 접근성 스킵 링크 */} + 본문 바로가기 + +
+
+ {/* 로고 */} + + (주)지오정보기술 로고 { e.target.src='/zioinfo-logo.png'; e.target.onerror = () => { e.target.style.display='none'; e.target.nextSibling.style.display='flex'; }; }} /> + + ZioInfo + + + + {/* 데스크톱 메뉴 */} + + + {/* 우측 버튼 영역 */} +
+ 문의하기 + {member ? ( +
+ + {member.name}님 + + +
+ ) : ( + 로그인 + )} +
+ + {/* 햄버거 (모바일) */} + +
+ + {/* 모바일 메뉴 */} + {mobileOpen && ( + + )} +
+ + ); +}