motaju/msgapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

header

Browse Source
This commit is contained in:
koreacomp5
2025-11-05 23:03:53 +09:00
parent 7d9c241d17
commit 808fe5fc68
2 changed files with 34 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/components/AppHeader.tsx
View File

@@ -377,7 +377,7 @@ export function AppHeader() {
if (!e.currentTarget.contains(next)) setMegaOpen(false); if (!e.currentTarget.contains(next)) setMegaOpen(false);
}} }}
> >
<div className="relative flex items-center gap-8" ref={navRowRef}> <div className="relative flex items-center gap-0" ref={navRowRef}>
{categories.map((cat, idx) => ( {categories.map((cat, idx) => (
<div <div
key={cat.id} key={cat.id}
@@ -389,7 +389,7 @@ export function AppHeader() {
> >
<Link <Link
href={cat.boards?.[0]?.slug ? `/boards/${cat.boards[0].slug}` : `/boards?category=${cat.slug}`} href={cat.boards?.[0]?.slug ? `/boards/${cat.boards[0].slug}` : `/boards?category=${cat.slug}`}
className={`block w-full px-2 py-2 text-sm font-medium transition-colors duration-200 whitespace-nowrap ${ className={`block w-full px-6 py-2 text-sm font-medium transition-colors duration-200 whitespace-nowrap ${
(megaOpen && openSlug === cat.slug) || activeCategorySlug === cat.slug ? "" : "text-neutral-700" (megaOpen && openSlug === cat.slug) || activeCategorySlug === cat.slug ? "" : "text-neutral-700"
}`} }`}
style={(megaOpen && openSlug === cat.slug) || activeCategorySlug === cat.slug ? { color: "var(--red-50, #F94B37)" } : undefined} style={(megaOpen && openSlug === cat.slug) || activeCategorySlug === cat.slug ? { color: "var(--red-50, #F94B37)" } : undefined}
@@ -423,7 +423,7 @@ export function AppHeader() {
/> />
</div> </div>
<div <div
className={`fixed left-0 right-0 z-50 bg-white shadow-[0_12px_32px_rgba(0,0,0,0.12)] transition-all duration-200 ${ className={`fixed left-0 right-0 z-50 bg-white/80 backdrop-blur supports-[backdrop-filter]:bg-white/60 shadow-[0_12px_32px_rgba(0,0,0,0.12)] transition-all duration-200 ${
megaOpen ? "opacity-100" : "pointer-events-none opacity-0" megaOpen ? "opacity-100" : "pointer-events-none opacity-0"
}`} }`}
style={{ top: headerBottom }} style={{ top: headerBottom }}
@@ -442,15 +442,16 @@ export function AppHeader() {
style={{ left: (leftPositions[cat.slug] ?? 0), width: blockWidths[cat.slug] ?? undefined }} style={{ left: (leftPositions[cat.slug] ?? 0), width: blockWidths[cat.slug] ?? undefined }}
> >
{/* <div className="mb-2 font-semibold text-neutral-800">{cat.name}</div> */} {/* <div className="mb-2 font-semibold text-neutral-800">{cat.name}</div> */}
<div className="mx-auto flex flex-col items-center gap-3 w-full"> <div className="mx-auto flex flex-col items-center gap-0 w-full">
{cat.boards.map((b) => ( {cat.boards.map((b) => (
<Link <Link
key={b.id} key={b.id}
href={`/boards/${b.slug}`} href={`/boards/${b.slug}`}
className={`rounded px-2 py-1 text-sm transition-colors duration-150 text-center whitespace-nowrap ${ className={`rounded px-2 pb-4 text-sm transition-colors duration-150 text-center whitespace-nowrap ${
activeBoardId === b.slug ? "font-semibold" : "text-neutral-700 hover:text-neutral-900 hover:bg-neutral-100" activeBoardId === b.slug
? "text-[var(--red-50,#F94B37)] font-semibold"
: "text-neutral-700 hover:text-[var(--red-50,#F94B37)]"
}`} }`}
style={activeBoardId === b.slug ? { color: "var(--red-50, #F94B37)" } : undefined}
aria-current={activeBoardId === b.slug ? "page" : undefined} aria-current={activeBoardId === b.slug ? "page" : undefined}
> >
{b.name} {b.name}

26
src/app/components/HeroBanner.tsx
View File

@@ -130,6 +130,32 @@ export function HeroBanner({ subItems, activeSubId, hideSubOnMobile }: { subItem
))} ))}
</div> </div>
{/* 좌우 내비게이션 버튼 */}
{numSlides > 1 && (
<div className="pointer-events-none absolute inset-0 flex items-center justify-between px-1 sm:px-2">
<button
type="button"
onClick={goPrev}
aria-label="이전 배너"
className="pointer-events-auto inline-flex items-center justify-center h-8 w-8 text-white/80 hover:text-[var(--red-50,#F94B37)] transition-colors focus:outline-none"
>
<svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5 15L7.5 10L12.5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
<button
type="button"
onClick={goNext}
aria-label="다음 배너"
className="pointer-events-auto inline-flex items-center justify-center h-8 w-8 text-white/80 hover:text-[var(--red-50,#F94B37)] transition-colors focus:outline-none"
>
<svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 5L12.5 10L7.5 15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
</div>
)}
{/* Pagination - Figma 스타일: 활성은 주황 바, 비활성은 회색 점 (배너 위에 오버랩) */} {/* Pagination - Figma 스타일: 활성은 주황 바, 비활성은 회색 점 (배너 위에 오버랩) */}
{numSlides > 1 && ( {numSlides > 1 && (
<div className="pointer-events-auto absolute bottom-3 left-1/2 -translate-x-1/2 z-10 flex items-center gap-[10px]"> <div className="pointer-events-auto absolute bottom-3 left-1/2 -translate-x-1/2 z-10 flex items-center gap-[10px]">