diff --git a/src/Header.tsx b/src/Header.tsx index dac3fff..cc73499 100644 --- a/src/Header.tsx +++ b/src/Header.tsx @@ -376,164 +376,167 @@ export function Header({ 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 + // --- 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 - ]; + // 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 */} + 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 */} -

+ {/* --- Horizontal Recent Visit Bar --- */} +
{/* Adjusted position to relative, or keep absolute if intended */} - {/* "Open Layer" Button - Toggles Dropdown */} - +

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

- {/* "Previous" Button */} - + + {/* "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 && ( - - ⓜ - - )} - -
      • - ))} -
    -
    - + {/* 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 */} + +
      - {/* 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 */} -

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

      -
      -
      + {/* --- Dropdown/Modal (Initially Hidden) --- */} + {/* Controlled by isDropdownOpen state */} +
      + {/* Adjusted top position relative to bar */} +
      + {/* Tabs */} +
      +
        +
      • {/* Adjusted border color */} + + {activeTab === 'recent' && ( +
        + )} +
        • +
      • + + {activeTab === 'favorites' && ( +
        + )} +
        • +
      +
      + +
      {/* 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 */} -
      - -
      - ); + ); }