diff --git a/src/App.tsx b/src/App.tsx index 1fca0ce..536f14d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,7 +4,7 @@ import CommentHeader from './CommentHeader'; import { Footer } from './Footer'; import { GalleryContent } from './Gallery'; import { GalleryTitleHeader } from './GalleryTitleHeader'; -import { GlobalNavigationBar } from './Header'; +import { GlobalNavigationBar, Header, VisitHistory } from './Header'; import { GalleryTable, TableRowData } from './table'; @@ -164,7 +164,9 @@ const comments: SubCommentData[] = [ function App() { return (
+
+
diff --git a/src/Header.tsx b/src/Header.tsx index 38d0272..dac3fff 100644 --- a/src/Header.tsx +++ b/src/Header.tsx @@ -267,3 +267,273 @@ export function GlobalNavigationBar(): JSX.Element {
); } + +export function Header({ + isMinorGallery = true, // Default value for isMinorGallery +}: { + isMinorGallery?: boolean; +}) { + const [isNightAlertVisible, setIsNightAlertVisible] = useState(true); + const logo_img = "/dcin_logo.png"; // Hardcoded based on original script + const minor_gallery_img = "/tit_mgallery.png"; // Hardcoded based on original script + + return ( +
+
+ {/* Logo */} +

+ {/* Assuming two logo images or variations were intended */} + + DCInside Logo + + {isMinorGallery && ( + + DCInside Logo Alt + + )} +

+ + {/* Search Bar */} +
+

갤러리 검색

{/* Replaced complex styling with sr-only */} +
{/* Added form action/method placeholders */} +
+ 통합검색 {/* Replaced complex styling with sr-only */} +
+
+ +
+ +
+ {/* Search Suggestions Dropdown (Initially Hidden) */} +
+ {/* Dropdown content would go here */} +
+
+
+ {/* Another absolute positioned div from source (Initially Hidden) */} +
+ {/* Content, if any, would go here */} +
+
+ + {/* Top Right Navigation */} +
+
    + {['갤러리', '미니갤', '인물갤', '갤로그', '디시트렌드', '디시뉴스', '디시게임', '이벤트', '디시콘'].map((item) => ( +
  • + {/* Added padding/block */} + {item} + +
    • + ))} +
+ + {/* Night Mode Toggle */} +
{/* Added margin from style */} + + + 야간모드 + + {/* Night Mode Tooltip */} + {isNightAlertVisible && ( +
setIsNightAlertVisible(false)} + > +
{/* Used flex to center text */} +

+ 야간 모드를 이용해 보세요 +

+
+
+ )} +
+
+
+
+ ); +} + + +export function VisitHistory() { + // --- State for Interactivity (Example - not fully implemented in static version) --- + const [isDropdownOpen, setIsDropdownOpen] = useState(false); // To control the main dropdown visibility + const [activeTab, setActiveTab] = useState('recent'); // 'recent' or 'favorites' for the dropdown tabs + + // Dummy data matching the HTML snippet + const recentVisits = [ + { id: 1, name: '장르소설', isMinor: true }, + { id: 2, name: '실시간 베스트', isMinor: false }, + // Add more items as needed + ]; + + return ( +
{/* Added relative positioning for children */} + + {/* --- Horizontal Recent Visit Bar --- */} +
{/* Adjusted position to relative, or keep absolute if intended */} + +

+ {activeTab === 'recent' ? '최근 방문' : '즐겨찾기 갤러리'} {/* Dynamic text based on active tab */} +

+ + {/* "Open Layer" Button - Toggles Dropdown */} + + + {/* "Previous" Button */} + + + {/* Visit List Container */} +
{/* Added margins to avoid overlap with buttons */} +
    + {recentVisits.map((item) => ( +
  • {/* Adjusted alignment */} + + {item.name} + + {item.isMinor && ( + + ⓜ + + )} + +
    • + ))} +
+ {/* Hidden list from original HTML */} +
    +
    + + {/* "Next" Button */} + + + {/* "All" Button */} + + +
    + + {/* --- Dropdown/Modal (Initially Hidden) --- */} + {/* Controlled by isDropdownOpen state */} +
    + {/* Adjusted top position relative to bar */} +
    + + {/* Tabs */} +
    +
      +
    • {/* Adjusted border color */} + +
      • +
    • {/* Adjusted border color */} + +
      • +
    +
    + +
    {/* Added clear-both and padding */} + {/* Recent Visit Content (Visible when activeTab is 'recent') */} +
    +
    +
      + {recentVisits.map((item) => ( +
    • + + {item.name} + + {item.isMinor && ( + + ⓜ + + )} + +
      • + ))} +
    +
    + +
    +
    +
    + + {/* Favorites Content (Visible when activeTab is 'favorites') */} +
    {/* Added min-height and relative */} + {/* In a real app, you'd fetch and display favorites or show login prompt */} +

    + + 로그인 후 이용 가능합니다. + +

    +
    +
    + +
    +
    + + {/* Another hidden overlay div from original HTML - Purpose unclear */} +
    + {/* Content if any */} +
    + +
    + ); +}