monoid/dc-copy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: visithistory style

Browse source
This commit is contained in:
monoid 2025-04-02 01:28:16 +09:00
parent 7bbaebc4d0
commit 7afb21f1f0
1 changed files with 149 additions and 146 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/Header.tsx
View file

@ -457,38 +457,45 @@ export function VisitHistory() {
{/* --- Dropdown/Modal (Initially Hidden) --- */} {/* --- Dropdown/Modal (Initially Hidden) --- */}
{/* Controlled by isDropdownOpen state */} {/* Controlled by isDropdownOpen state */}
<div className={cn( <div className={cn(
`bg-white absolute z-[4000] text-left border border-custom-border-gray w-[1160px] box-border left-0 top-[52px]`, `bg-white absolute z-[4000] text-left border border-custom-border-gray w-[1160px] left-0 top-[38px]`,
isDropdownOpen ? 'block' : 'hidden' isDropdownOpen ? 'block' : 'hidden'
)}> )}>
{/* Adjusted top position relative to bar */} {/* 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"> <div className="bg-transparent overflow-hidden relative w-full h-auto px-[8px] min-h-[197px] text-xs leading-normal box-border">
{/* Tabs */} {/* Tabs */}
<div className="bg-transparent"> <div className="">
<ul className="list-none"> <ul className="list-none box-border">
<li className={`float-left w-1/2 text-center border-b ${activeTab === 'recent' ? 'border-custom-blue-hover' : 'border-custom-dropdown-bg'}`}> {/* Adjusted border color */} <li className="float-left w-1/2 text-center border-b border-custom-blue-hover relative"> {/* Adjusted border color */}
<button <button
onClick={() => setActiveTab('recent')} // Example state change 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'}`} 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> </button>
{activeTab === 'recent' && (
<div className='absolute left-0 bottom-0 w-full right-0 h-1 bg-custom-blue-dark'></div>
)}
</li> </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 */} <li className={cn`float-left w-1/2 text-center border-b border-custom-blue-hover relative` /* Adjusted border color */}>
<button <button
onClick={() => setActiveTab('favorites')} // Example state change 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'}`} 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> </button>
{activeTab === 'favorites' && (
<div className='absolute left-0 bottom-0 w-full right-0 h-1 bg-custom-blue-dark'></div>
)}
</li> </li>
</ul> </ul>
</div> </div>
<div className="bg-transparent clear-both pt-2"> {/* Added clear-both and padding */} <div className="clear-both"> {/* Added clear-both and padding */}
{/* Recent Visit Content (Visible when activeTab is 'recent') */} {/* Recent Visit Content (Visible when activeTab is 'recent') */}
<div className={`${activeTab === 'recent' ? 'block' : 'hidden'} bg-transparent`}> <div className={cn`${activeTab === 'recent' ? 'block' : 'hidden'}`}>
<div className="bg-transparent"> <div className="overflow-hidden">
<ul className="list-none overflow-hidden min-h-[123px] mt-[10px] -ml-[17px] px-[10px]"> <ul className="list-none overflow-hidden min-h-[123px] mt-[10px] -ml-[17px] px-[10px]">
{recentVisits.map((item) => ( {recentVisits.map((item) => (
<li key={`dd-${item.id}`} className="overflow-hidden float-left w-[146px] relative ml-[16px] mr-[3px] text-custom-gray-dark"> <li key={`dd-${item.id}`} className="overflow-hidden float-left w-[146px] relative ml-[16px] mr-[3px] text-custom-gray-dark">
@ -496,7 +503,9 @@ export function VisitHistory() {
{item.name} {item.name}
</a> </a>
{item.isMinor && ( {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 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> </em>
)} )}
@ -516,7 +525,7 @@ export function VisitHistory() {
</div> </div>
{/* Favorites Content (Visible when activeTab is 'favorites') */} {/* Favorites Content (Visible when activeTab is 'favorites') */}
<div className={`${activeTab === 'favorites' ? 'block' : 'hidden'} bg-transparent min-h-[158px] relative`}> {/* Added min-height and relative */} <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 */} {/* 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]"> <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"> <a href="#" className="bg-transparent text-custom-gray-medium">
@ -528,12 +537,6 @@ export function VisitHistory() {
</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> </div>
); );
} }