import React, { useEffect, useState } from 'react'; const HeaderMenuWidget = () => { // 모바일 브레이크포인트 설정 const MOBILE_BREAKPOINT = 'sm'; // State 관리 const [menuItems, setMenuItems] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [currentPath, setCurrentPath] = useState('/'); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [isMobile, setIsMobile] = useState(window.innerWidth < 640); const [hasAnimated, setHasAnimated] = useState(false); // 컴포넌트 초기화 useEffect(() => { loadMenuItems(); setCurrentPath(window.location.pathname); // 페이지 네비게이션 이벤트 리스너 const handlePathChange = () => { setCurrentPath(window.location.pathname); }; window.addEventListener('popstate', handlePathChange); // 화면 크기 변화 감지 const handleResize = () => { setIsMobile(window.innerWidth < 640); }; window.addEventListener('resize', handleResize); // 레이아웃 초기화 injectLayoutStyles(); const cleanupLayout = initializeLayout(); // 슬라이드 애니메이션 실행 (한 번만) if (!hasAnimated) { const timer = setTimeout(() => { setHasAnimated(true); }, 100); // 약간의 지연을 두어 자연스러운 애니메이션 return () => clearTimeout(timer); } return () => { window.removeEventListener('popstate', handlePathChange); window.removeEventListener('resize', handleResize); if (cleanupLayout) cleanupLayout(); removeLayoutStyles(); }; }, [hasAnimated]); // CSS 스타일 주입 함수 const injectLayoutStyles = () => { if (document.getElementById('sidebar-layout-styles')) { return; } const style = document.createElement('style'); style.id = 'sidebar-layout-styles'; style.textContent = ` /* Body 기본 설정 */ body { margin: 0; padding: 0; font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* 데스크톱: 좌측메뉴를 위한 고정 사이드바 영역 (2단 그리드 메뉴용) */ @media (min-width: 640px) { /* 좌측메뉴 위젯은 왼쪽 고정 */ widget-placeholder[data-widget-id="0681765f26944a1e843b"] { position: fixed !important; left: 0 !important; top: 0 !important; width: 280px !important; height: 100vh !important; z-index: 10001 !important; display: block !important; visibility: visible !important; } /* 슬라이드 인 애니메이션 */ .sidebar-slide-in { animation: slideInFromLeft 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } /* 초기 숨김 상태 */ .sidebar-hidden { transform: translateX(-100%); opacity: 0; } @keyframes slideInFromLeft { 0% { transform: translateX(-100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } /* PC에서만 좌측메뉴 오른쪽 외곽 그림자 */ .sidebar-desktop-shadow { box-shadow: 4px 0 12px rgba(0, 0, 0, 0.08) !important; } /* 다른 모든 콘텐츠는 우측에 배치 */ body > *:not([data-widget-id="0681765f26944a1e843b"]) { margin-left: 280px !important; width: calc(100% - 280px) !important; box-sizing: border-box !important; } .main-content-wrapper { margin-left: 280px !important; min-height: 100vh !important; padding: 0 !important; } .main-content-wrapper section { max-width: 100% !important; margin: 0 auto !important; } /* Footer 위젯 특별 처리 */ widget-placeholder[data-widget-id="561b30f938504579843e"] { margin-left: 280px !important; width: calc(100% - 280px) !important; box-sizing: border-box !important; } } /* 모바일: 좌측메뉴 이외의 모든 콘텐츠를 전체 폭으로 배치 */ @media (max-width: 639px) { /* 모바일에서 좌측메뉴 위젯은 기본 위치 */ widget-placeholder[data-widget-id="0681765f26944a1e843b"] { position: relative !important; width: 100% !important; height: auto !important; z-index: 40 !important; display: block !important; visibility: visible !important; } body > *:not([data-widget-id="0681765f26944a1e843b"]) { margin-left: 0 !important; width: 100% !important; } .main-content-wrapper { margin-left: 0 !important; } widget-placeholder[data-widget-id="561b30f938504579843e"] { margin-left: 0 !important; width: 100% !important; } } `; document.head.appendChild(style); console.log('Layout styles injected'); }; // CSS 스타일 제거 함수 const removeLayoutStyles = () => { const existingStyle = document.getElementById('sidebar-layout-styles'); if (existingStyle) { existingStyle.remove(); console.log('Layout styles removed'); } }; // 메인 콘텐츠 래퍼 생성 함수 const createMainContentWrapper = () => { const existingWrapper = document.querySelector('.main-content-wrapper'); const currentWidget = document.querySelector('widget-placeholder[data-widget-id="0681765f26944a1e843b"]'); if (!currentWidget) return; const bodyChildren = Array.from(document.body.children).filter(child => child !== currentWidget && !child.classList.contains('main-content-wrapper') && child.id !== 'sidebar-layout-styles' ); if (bodyChildren.length > 0 && !existingWrapper) { const wrapper = document.createElement('div'); wrapper.className = 'main-content-wrapper'; bodyChildren.forEach(child => { wrapper.appendChild(child); }); document.body.appendChild(wrapper); console.log('Main content wrapper created and content relocated'); } }; // 메뉴 아이템 로드 함수 const loadMenuItems = async () => { try { setLoading(true); setError(null); const response = await window.GachiAI.loadMenuItems(); if (response && response.items) { setMenuItems(response.items); } else { setMenuItems([]); } } catch (err) { console.error('Failed to load menu items:', err); setError('Failed to load navigation menu'); setMenuItems([]); } finally { setLoading(false); } }; // 레이아웃 초기화 함수 const initializeLayout = () => { createMainContentWrapper(); console.log('Basic layout initialized'); return function() { // 정리 작업 없음 }; }; // 페이지 네비게이션 핸들러 const handlePageNavigation = (path, e) => { e.preventDefault(); setIsMobileMenuOpen(false); if (path && path !== window.location.pathname) { window.location.href = path; } }; // 메뉴 아이템 반환 (정렬 없이 그대로 사용) const displayMenuItems = loading ? [] : menuItems; const getMenuItems = () => displayMenuItems; const showEmptyState = !loading && displayMenuItems.length === 0; const isContactItem = (item) => item.title === '문의하기' || item.title.includes('お問い合わせ') || item.title.includes('contact') || item.title.includes('Contact'); const contactItem = getMenuItems().find(isContactItem); const navMenuItems = getMenuItems().filter((item) => !isContactItem(item)); // PC용 2단 그리드 메뉴 (아이콘 + 레이블) const PC_GRID_MENU_ITEMS = [ { img: 'https://firebasestorage.googleapis.com/v0/b/sunbisites-jp.firebasestorage.app/o/sites%2F0b9bf9cdf4a640e0aa35%2Fassets%2Fmenu_01.png?alt=media&token=b7a9118a-48c8-4cbc-a1de-7fc7f12b64d3', label: 'メッセージ', path: '/message' }, { img: 'https://firebasestorage.googleapis.com/v0/b/sunbisites-jp.firebasestorage.app/o/sites%2F0b9bf9cdf4a640e0aa35%2Fassets%2Fmenu_02.png?alt=media&token=f3dcafe5-98e1-47fa-97ea-95034b270242', label: 'お部屋について', path: '/room' }, { img: 'https://firebasestorage.googleapis.com/v0/b/sunbisites-jp.firebasestorage.app/o/sites%2F0b9bf9cdf4a640e0aa35%2Fassets%2Fmenu_03.png?alt=media&token=1e159203-acb7-4808-9336-e80511e5f6c9', label: 'レビュー', path: '/review' }, { img: 'https://firebasestorage.googleapis.com/v0/b/sunbisites-jp.firebasestorage.app/o/sites%2F0b9bf9cdf4a640e0aa35%2Fassets%2Fmenu_04.png?alt=media&token=19acaca2-d46a-4361-88ed-ba24ca7eadfd', label: 'ブログ', path: '/blog' }, { img: 'https://firebasestorage.googleapis.com/v0/b/sunbisites-jp.firebasestorage.app/o/sites%2F0b9bf9cdf4a640e0aa35%2Fassets%2Fmenu_05.png?alt=media&token=c22c905e-6741-4b6f-9cb1-c82871399b37', label: 'アクセス', path: '/access' }, { img: 'https://firebasestorage.googleapis.com/v0/b/sunbisites-jp.firebasestorage.app/o/sites%2F0b9bf9cdf4a640e0aa35%2Fassets%2Fmenu_06.png?alt=media&token=e1c8bbe2-7837-49e0-8b8f-13f8ca7eccc2', label: '周辺スポット', path: '/nearbyspots' }, ]; const PC_BOTTOM_BUTTONS = [ { label: '料金/予約', path: '/reservation' }, { label: 'お問い合わせ', path: contactItem?.path || '/contact' }, ]; // 에러 상태 렌더링 if (error) { return (

); } return ( <> {/* 데스크톱 레이아웃 - 2단 그리드 메뉴 */}

{/* 데스크톱 사이드바 - 푸른 계열 배경 */}

{/* 로고 섹션 - 상단 가운데 정렬 */}