add Headers
This commit is contained in:
parent
eea0832a42
commit
ea83864396
2 changed files with 274 additions and 2 deletions
|
|
@ -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 (
|
||||
<div>
|
||||
<Header />
|
||||
<GlobalNavigationBar />
|
||||
<VisitHistory />
|
||||
<div className='relative w-[1450px] mx-auto'>
|
||||
<main
|
||||
className='w-[1160px] m-[20px_auto_0]'
|
||||
|
|
@ -172,7 +174,7 @@ function App() {
|
|||
<section className='' >
|
||||
<GalleryTitleHeader />
|
||||
<div
|
||||
className='border-custom-blue-dark border-2 w-[1158px]'
|
||||
className='border-custom-blue-dark border w-[1158px]'
|
||||
/>
|
||||
<GalleryContent />
|
||||
<CommentHeader />
|
||||
|
|
|
|||
270
src/Header.tsx
270
src/Header.tsx
|
|
@ -267,3 +267,273 @@ export function GlobalNavigationBar(): JSX.Element {
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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 (
|
||||
<header className="bg-transparent">
|
||||
<div className="relative w-[1160px] h-[105px] mx-auto bg-transparent">
|
||||
{/* Logo */}
|
||||
<h1 className="overflow-hidden absolute left-0 top-[40px] text-center bg-transparent">
|
||||
{/* Assuming two logo images or variations were intended */}
|
||||
<a href="/" className="text-custom-gray-dark float-left">
|
||||
<img src={logo_img} alt="DCInside Logo" className="bg-transparent" />
|
||||
</a>
|
||||
{isMinorGallery && (
|
||||
<a href="/" className="text-custom-gray-dark float-left">
|
||||
<img src={minor_gallery_img} alt="DCInside Logo Alt" className="bg-transparent" />
|
||||
</a>
|
||||
)}
|
||||
</h1>
|
||||
|
||||
{/* Search Bar */}
|
||||
<div className="absolute left-1/2 top-[37px] -ml-[182px] bg-transparent">
|
||||
<h2 className="sr-only">갤러리 검색</h2> {/* Replaced complex styling with sr-only */}
|
||||
<form action="/search" method="get" className="bg-transparent"> {/* Added form action/method placeholders */}
|
||||
<fieldset className="bg-transparent">
|
||||
<legend className="sr-only">통합검색</legend> {/* Replaced complex styling with sr-only */}
|
||||
<div className="bg-custom-blue-hover w-[364px] h-[46px]">
|
||||
<div className="bg-white float-left w-[315px] mt-1 ml-1">
|
||||
<input
|
||||
type="text"
|
||||
name="keyword" // Added name attribute
|
||||
placeholder="갤러리 & 통합 검색" // Added placeholder
|
||||
className="align-middle text-sm font-apple-dotum w-[297px] h-[38px] px-[9px] bg-transparent text-custom-gray-dark font-bold border-none outline-none"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="cursor-pointer align-middle text-xs font-apple-dotum bg-transparent bg-[url('https://nstatic.dcinside.com/dc/w/images/sp/sp_img.png?1112')] bg-no-repeat float-left w-[45px] h-[44px] bg-[0px_-89px]"
|
||||
aria-label="검색" // Added aria-label for accessibility
|
||||
>
|
||||
<span className="sr-only">검색</span> {/* Replaced complex styling with sr-only */}
|
||||
</button>
|
||||
</div>
|
||||
{/* Search Suggestions Dropdown (Initially Hidden) */}
|
||||
<div className="bg-white absolute w-full box-border border-2 border-custom-blue-dark z-[4001] left-0 top-[46px] hidden">
|
||||
{/* Dropdown content would go here */}
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
{/* Another absolute positioned div from source (Initially Hidden) */}
|
||||
<div className="bg-white absolute w-full box-border border-2 border-custom-blue-dark z-[4001] left-0 top-[45px] hidden">
|
||||
{/* Content, if any, would go here */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Top Right Navigation */}
|
||||
<div className="absolute top-[9px] right-0 flex items-center">
|
||||
<ul className="list-none flex items-center overflow-inherit leading-[17px] divide-solid divide-x divide-custom-border-gray">
|
||||
{['갤러리', '미니갤', '인물갤', '갤로그', '디시트렌드', '디시뉴스', '디시게임', '이벤트', '디시콘'].map((item) => (
|
||||
<li key={item} className="h-[10px] flex items-center">
|
||||
<a href="#" className="text-custom-dropdown-text text-[11px] px-1.5 py-0.5 block"> {/* Added padding/block */}
|
||||
{item}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="flex items-center">
|
||||
<a
|
||||
href="#"
|
||||
className="bg-custom-blue-hover text-white text-[11px] inline-block px-[3px] h-[16px] box-content leading-[16px]
|
||||
border border-custom-blue-dark shadow-[0_-1px_0_rgb(29,39,97)] ml-1.5
|
||||
" // Added margin
|
||||
>
|
||||
로그인
|
||||
</a>
|
||||
</div>
|
||||
{/* Night Mode Toggle */}
|
||||
<div className="relative ml-[10px]"> {/* Added margin from style */}
|
||||
<a href="#" className="text-custom-dropdown-text text-[11px] leading-[18px] flex items-center">
|
||||
<em className="inline-block w-[11px] h-[11px] bg-sp-img bg-[-255px_-844px] mr-1 align-[-1px]"></em>
|
||||
야간모드
|
||||
</a>
|
||||
{/* Night Mode Tooltip */}
|
||||
{isNightAlertVisible && (
|
||||
<div className="bg-transparent absolute z-[999] left-[-35px] top-[25px] cursor-pointer"
|
||||
onClick={() => setIsNightAlertVisible(false)}
|
||||
>
|
||||
<div className="bg-custom-green-light relative border border-custom-border-gray px-[10px] text-white text-xs h-[23px] rounded-full flex items-center"> {/* Used flex to center text */}
|
||||
<p className="bg-transparent whitespace-nowrap overflow-hidden max-w-[780px]">
|
||||
야간 모드를 이용해 보세요
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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
|
||||
|
||||
// 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 */}
|
||||
|
||||
{/* --- 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>
|
||||
|
||||
{/* "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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
</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