fix: visithistory style
This commit is contained in:
parent
7bbaebc4d0
commit
7afb21f1f0
1 changed files with 149 additions and 146 deletions
295
src/Header.tsx
295
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 (
|
||||
<div className="w-[1160px] mx-auto relative"> {/* Added relative positioning for children */}
|
||||
return (
|
||||
<div className="w-[1160px] mx-auto relative"> {/* Added relative positioning for children */}
|
||||
|
||||
{/* --- Horizontal Recent Visit Bar --- */}
|
||||
<div className="bg-custom-dropdown-bg h-[38px] leading-[38px] pr-[66px] pl-[12px] align-top box-border text-[rgb(68,68,68)] w-[1160px] relative"> {/* Adjusted position to relative, or keep absolute if intended */}
|
||||
|
||||
<h3 className="float-left text-xs text-custom-blue-dark align-top tracking-[-0.075em] leading-[38px]">
|
||||
{activeTab === 'recent' ? '최근 방문' : '즐겨찾기 갤러리'} {/* Dynamic text based on active tab */}
|
||||
</h3>
|
||||
{/* --- Horizontal Recent Visit Bar --- */}
|
||||
<div className="bg-custom-dropdown-bg h-[38px] leading-[38px] pr-[66px] pl-[12px] align-top box-border text-[rgb(68,68,68)] w-[1160px] relative"> {/* Adjusted position to relative, or keep absolute if intended */}
|
||||
|
||||
{/* "Open Layer" Button - Toggles Dropdown */}
|
||||
<button
|
||||
onClick={() => setIsDropdownOpen(!isDropdownOpen)} // Example state toggle
|
||||
aria-label="최근 방문/즐겨찾기 레이어 열기"
|
||||
className="bg-transparent cursor-pointer align-middle font-apple-dotum text-xs relative top-[12px] float-left w-[15px] h-[15px] ml-[10px]"
|
||||
>
|
||||
<span className="sr-only">레이어 열기</span>
|
||||
<em className={`bg-transparent inline-block w-[15px] h-[15px] bg-sp-img bg-[-56px_-168px] mt-[1px] align-top`}></em>
|
||||
</button>
|
||||
<h3 className="float-left text-xs text-custom-blue-dark align-top tracking-[-0.075em] leading-[38px]">
|
||||
{activeTab === 'recent' ? '최근 방문' : '즐겨찾기 갤러리'} {/* Dynamic text based on active tab */}
|
||||
</h3>
|
||||
|
||||
{/* "Previous" Button */}
|
||||
<button aria-label="이전 목록" className="cursor-pointer align-middle font-apple-dotum
|
||||
{/* "Open Layer" Button - Toggles Dropdown */}
|
||||
<button
|
||||
onClick={() => setIsDropdownOpen(!isDropdownOpen)} // Example state toggle
|
||||
aria-label="최근 방문/즐겨찾기 레이어 열기"
|
||||
className="bg-transparent cursor-pointer align-middle font-apple-dotum text-xs relative top-[12px] float-left w-[15px] h-[15px] ml-[10px]"
|
||||
>
|
||||
<span className="sr-only">레이어 열기</span>
|
||||
<em className={`bg-transparent inline-block w-[15px] h-[15px] bg-sp-img bg-[-56px_-168px] mt-[1px] align-top`}></em>
|
||||
</button>
|
||||
|
||||
{/* "Previous" Button */}
|
||||
<button aria-label="이전 목록" className="cursor-pointer align-middle font-apple-dotum
|
||||
text-[12px] float-left relative top-[13px] left-0
|
||||
text-xs ml-[15px] mr-[9px] leading-[12px]">
|
||||
<span className="sr-only">이전</span>
|
||||
<em className={`inline-block w-[5px] h-[11px] bg-sp-img bg-[-119px_-56px] leading-[38px]`}></em>
|
||||
</button>
|
||||
|
||||
{/* Visit List Container */}
|
||||
<div className="overflow-hidden float-left"> {/* Added margins to avoid overlap with buttons */}
|
||||
<ul className="list-none relative whitespace-nowrap space-x-[15px]">
|
||||
{recentVisits.map((item) => (
|
||||
<li key={item.id} className="inline-block text-xs align-middle leading-[38px]"> {/* Adjusted alignment */}
|
||||
<a href="#" className="bg-transparent text-[rgb(68,68,68)] inline-block tracking-[-0.075em] leading-[38px]">
|
||||
{item.name}
|
||||
</a>
|
||||
{item.isMinor && (
|
||||
<em className="inline-block h-[12px] leading-[12px] mt-[1px] ml-[2px] align-text-top text-[13px] not-italic text-custom-dropdown-text">
|
||||
ⓜ
|
||||
</em>
|
||||
)}
|
||||
<button aria-label={`${item.name} 삭제`} className="bg-transparent cursor-pointer align-top font-apple-dotum text-xs h-[36px] ml-[12px] leading-[38px]">
|
||||
<span className="sr-only hidden">삭제</span> {/* Hidden in original */}
|
||||
<em className={`bg-transparent inline-block w-[7px] h-[7px] align-[1px] bg-sp-img bg-[-264px_-961px] cursor-pointer`}></em>
|
||||
<span className="sr-only">이전</span>
|
||||
<em className={`inline-block w-[5px] h-[11px] bg-sp-img bg-[-119px_-56px] leading-[38px]`}></em>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{/* Hidden list from original HTML */}
|
||||
<ul className="list-none relative whitespace-nowrap bg-transparent hidden"></ul>
|
||||
</div>
|
||||
|
||||
{/* "Next" Button */}
|
||||
<button aria-label="다음 목록" className="bg-transparent cursor-pointer align-middle font-apple-dotum text-xs right-[51px] absolute top-[13px] leading-[12px]">
|
||||
<span className="sr-only">다음</span>
|
||||
<em className={`bg-transparent inline-block w-[5px] h-[11px] bg-sp-img bg-[-110px_-56px] leading-[38px]`}></em>
|
||||
</button>
|
||||
|
||||
{/* "All" Button */}
|
||||
<button
|
||||
onClick={() => setIsDropdownOpen(true)} // Example: Open dropdown on click
|
||||
className="bg-transparent cursor-pointer align-middle font-apple-dotum text-xs absolute right-[12px] top-0 leading-[38px] text-custom-blue-dark underline">
|
||||
전체
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
{/* --- Dropdown/Modal (Initially Hidden) --- */}
|
||||
{/* Controlled by isDropdownOpen state */}
|
||||
<div className={cn(
|
||||
`bg-white absolute z-[4000] text-left border border-custom-border-gray w-[1160px] box-border left-0 top-[52px]`,
|
||||
isDropdownOpen ? 'block' : 'hidden'
|
||||
)}>
|
||||
{/* Adjusted top position relative to bar */}
|
||||
<div className="bg-transparent overflow-hidden relative w-full h-auto py-[12px] px-[8px] min-h-[197px] text-xs leading-normal box-border">
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="bg-transparent">
|
||||
<ul className="list-none">
|
||||
<li className={`float-left w-1/2 text-center border-b ${activeTab === 'recent' ? 'border-custom-blue-hover' : 'border-custom-dropdown-bg'}`}> {/* Adjusted border color */}
|
||||
<button
|
||||
onClick={() => setActiveTab('recent')} // Example state change
|
||||
className={`bg-transparent cursor-pointer align-middle font-apple-dotum text-sm relative w-full h-[40px] font-bold ${activeTab === 'recent' ? 'text-custom-blue-hover' : 'text-custom-gray-dark'}`}
|
||||
>
|
||||
최근 방문
|
||||
</button>
|
||||
</li>
|
||||
<li className={`float-left w-1/2 text-center border-b ${activeTab === 'favorites' ? 'border-custom-blue-hover' : 'border-custom-dropdown-bg'}`}> {/* Adjusted border color */}
|
||||
<button
|
||||
onClick={() => setActiveTab('favorites')} // Example state change
|
||||
className={`bg-transparent cursor-pointer align-middle font-apple-dotum text-sm relative w-full h-[40px] font-bold ${activeTab === 'favorites' ? 'text-custom-blue-hover' : 'text-custom-gray-dark'}`}
|
||||
>
|
||||
즐겨찾기
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-transparent clear-both pt-2"> {/* Added clear-both and padding */}
|
||||
{/* Recent Visit Content (Visible when activeTab is 'recent') */}
|
||||
<div className={`${activeTab === 'recent' ? 'block' : 'hidden'} bg-transparent`}>
|
||||
<div className="bg-transparent">
|
||||
<ul className="list-none overflow-hidden min-h-[123px] mt-[10px] -ml-[17px] px-[10px]">
|
||||
{recentVisits.map((item) => (
|
||||
<li key={`dd-${item.id}`} className="overflow-hidden float-left w-[146px] relative ml-[16px] mr-[3px] text-custom-gray-dark">
|
||||
<a href="#" className="bg-transparent text-custom-gray-dark leading-[22px] inline-block max-w-[82%] align-top text-ellipsis overflow-hidden whitespace-nowrap">
|
||||
{item.name}
|
||||
</a>
|
||||
{item.isMinor && (
|
||||
<em className="bg-transparent inline-block h-[12px] leading-[12px] mt-[2px] ml-[2px] align-text-top text-[13px] text-custom-dropdown-text">
|
||||
ⓜ
|
||||
</em>
|
||||
)}
|
||||
<button aria-label={`${item.name} 삭제`} className="bg-transparent cursor-pointer align-top font-apple-dotum text-xs h-[22px] absolute top-0 right-0">
|
||||
<span className="sr-only">삭제</span>
|
||||
<em className={`bg-transparent inline-block w-[7px] h-[7px] align-[1px] bg-sp-img bg-[-127px_-153px] cursor-pointer`}></em>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="bg-transparent relative h-[20px] mt-[5px] mb-[13px]">
|
||||
<button className="bg-transparent cursor-pointer align-middle font-apple-dotum text-xs absolute right-[6px] bottom-[-1px] text-custom-blue-dark underline p-[3px]">
|
||||
전체 삭제
|
||||
</button>
|
||||
{/* Visit List Container */}
|
||||
<div className="overflow-hidden float-left"> {/* Added margins to avoid overlap with buttons */}
|
||||
<ul className="list-none relative whitespace-nowrap space-x-[15px]">
|
||||
{recentVisits.map((item) => (
|
||||
<li key={item.id} className="inline-block text-xs align-middle leading-[38px]"> {/* Adjusted alignment */}
|
||||
<a href="#" className="bg-transparent text-[rgb(68,68,68)] inline-block tracking-[-0.075em] leading-[38px]">
|
||||
{item.name}
|
||||
</a>
|
||||
{item.isMinor && (
|
||||
<em className="inline-block h-[12px] leading-[12px] mt-[1px] ml-[2px] align-text-top text-[13px] not-italic text-custom-dropdown-text">
|
||||
ⓜ
|
||||
</em>
|
||||
)}
|
||||
<button aria-label={`${item.name} 삭제`} className="bg-transparent cursor-pointer align-top font-apple-dotum text-xs h-[36px] ml-[12px] leading-[38px]">
|
||||
<span className="sr-only hidden">삭제</span> {/* Hidden in original */}
|
||||
<em className={`bg-transparent inline-block w-[7px] h-[7px] align-[1px] bg-sp-img bg-[-264px_-961px] cursor-pointer`}></em>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{/* Hidden list from original HTML */}
|
||||
<ul className="list-none relative whitespace-nowrap bg-transparent hidden"></ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* "Next" Button */}
|
||||
<button aria-label="다음 목록" className="bg-transparent cursor-pointer align-middle font-apple-dotum text-xs right-[51px] absolute top-[13px] leading-[12px]">
|
||||
<span className="sr-only">다음</span>
|
||||
<em className={`bg-transparent inline-block w-[5px] h-[11px] bg-sp-img bg-[-110px_-56px] leading-[38px]`}></em>
|
||||
</button>
|
||||
|
||||
{/* "All" Button */}
|
||||
<button
|
||||
onClick={() => setIsDropdownOpen(true)} // Example: Open dropdown on click
|
||||
className="bg-transparent cursor-pointer align-middle font-apple-dotum text-xs absolute right-[12px] top-0 leading-[38px] text-custom-blue-dark underline">
|
||||
전체
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Favorites Content (Visible when activeTab is 'favorites') */}
|
||||
<div className={`${activeTab === 'favorites' ? 'block' : 'hidden'} bg-transparent min-h-[158px] relative`}> {/* Added min-height and relative */}
|
||||
{/* In a real app, you'd fetch and display favorites or show login prompt */}
|
||||
<p className="bg-transparent float-left px-[19px] text-xs text-custom-gray-medium absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 mt-[24px]">
|
||||
<a href="#" className="bg-transparent text-custom-gray-medium">
|
||||
<span className="bg-transparent underline">로그인</span> 후 이용 가능합니다.
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* --- Dropdown/Modal (Initially Hidden) --- */}
|
||||
{/* Controlled by isDropdownOpen state */}
|
||||
<div className={cn(
|
||||
`bg-white absolute z-[4000] text-left border border-custom-border-gray w-[1160px] left-0 top-[38px]`,
|
||||
isDropdownOpen ? 'block' : 'hidden'
|
||||
)}>
|
||||
{/* Adjusted top position relative to bar */}
|
||||
<div className="bg-transparent overflow-hidden relative w-full h-auto px-[8px] min-h-[197px] text-xs leading-normal box-border">
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="">
|
||||
<ul className="list-none box-border">
|
||||
<li className="float-left w-1/2 text-center border-b border-custom-blue-hover relative"> {/* Adjusted border color */}
|
||||
<button
|
||||
onClick={() => setActiveTab('recent')} // Example state change
|
||||
className={`cursor-pointer align-middle font-apple-dotum text-sm relative w-full h-[40px] font-bold ${
|
||||
activeTab === 'recent' ? 'text-custom-blue-hover' : 'text-custom-gray-dark'}`}
|
||||
>
|
||||
최근 방문
|
||||
</button>
|
||||
{activeTab === 'recent' && (
|
||||
<div className='absolute left-0 bottom-0 w-full right-0 h-1 bg-custom-blue-dark'></div>
|
||||
)}
|
||||
</li>
|
||||
<li className={cn`float-left w-1/2 text-center border-b border-custom-blue-hover relative` /* Adjusted border color */}>
|
||||
<button
|
||||
onClick={() => setActiveTab('favorites')} // Example state change
|
||||
className={`cursor-pointer align-middle font-apple-dotum text-sm relative w-full h-[40px] font-bold ${
|
||||
activeTab === 'favorites' ? 'text-custom-blue-hover' : 'text-custom-gray-dark'}`}>
|
||||
즐겨찾기
|
||||
</button>
|
||||
{activeTab === 'favorites' && (
|
||||
<div className='absolute left-0 bottom-0 w-full right-0 h-1 bg-custom-blue-dark'></div>
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="clear-both"> {/* Added clear-both and padding */}
|
||||
{/* Recent Visit Content (Visible when activeTab is 'recent') */}
|
||||
<div className={cn`${activeTab === 'recent' ? 'block' : 'hidden'}`}>
|
||||
<div className="overflow-hidden">
|
||||
<ul className="list-none overflow-hidden min-h-[123px] mt-[10px] -ml-[17px] px-[10px]">
|
||||
{recentVisits.map((item) => (
|
||||
<li key={`dd-${item.id}`} className="overflow-hidden float-left w-[146px] relative ml-[16px] mr-[3px] text-custom-gray-dark">
|
||||
<a href="#" className="bg-transparent text-custom-gray-dark leading-[22px] inline-block max-w-[82%] align-top text-ellipsis overflow-hidden whitespace-nowrap">
|
||||
{item.name}
|
||||
</a>
|
||||
{item.isMinor && (
|
||||
<em className="bg-transparent
|
||||
not-italic
|
||||
inline-block h-[12px] leading-[12px] mt-[2px] ml-[2px] align-text-top text-[13px] text-custom-dropdown-text">
|
||||
ⓜ
|
||||
</em>
|
||||
)}
|
||||
<button aria-label={`${item.name} 삭제`} className="bg-transparent cursor-pointer align-top font-apple-dotum text-xs h-[22px] absolute top-0 right-0">
|
||||
<span className="sr-only">삭제</span>
|
||||
<em className={`bg-transparent inline-block w-[7px] h-[7px] align-[1px] bg-sp-img bg-[-127px_-153px] cursor-pointer`}></em>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="bg-transparent relative h-[20px] mt-[5px] mb-[13px]">
|
||||
<button className="bg-transparent cursor-pointer align-middle font-apple-dotum text-xs absolute right-[6px] bottom-[-1px] text-custom-blue-dark underline p-[3px]">
|
||||
전체 삭제
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Favorites Content (Visible when activeTab is 'favorites') */}
|
||||
<div className={cn`${activeTab === 'favorites' ? 'block' : 'hidden'} min-h-[158px] relative`}> {/* Added min-height and relative */}
|
||||
{/* In a real app, you'd fetch and display favorites or show login prompt */}
|
||||
<p className="bg-transparent float-left px-[19px] text-xs text-custom-gray-medium absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 mt-[24px]">
|
||||
<a href="#" className="bg-transparent text-custom-gray-medium">
|
||||
<span className="bg-transparent underline">로그인</span> 후 이용 가능합니다.
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Another hidden overlay div from original HTML - Purpose unclear */}
|
||||
<div className="bg-white absolute z-[4001] text-left border-l border-r border-b border-custom-blue-dark border-t-2 border-t-custom-blue-dark right-[-1px] top-[79px] hidden">
|
||||
{/* Content if any */}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue