feat(symbol-page): split header into 2 rows so PeriodTabs has room on mobile
The single-row header packed nav + 비교/공유/Star + 7-tab PeriodTabs side by side. On narrow widths the line wrapped with PeriodTabs landing mid-row, which looked broken. Move PeriodTabs to its own row underneath, right-aligned with overflow-x-auto fallback. Action group keeps flex-wrap as a defensive fallback. Pure layout — no behavior change.
This commit is contained in:
@@ -182,7 +182,14 @@ export default function CodePage({ params }: { params: { code: string } }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="mx-auto max-w-5xl px-6 py-8">
|
<main className="mx-auto max-w-5xl px-6 py-8">
|
||||||
<div className="mb-4 flex items-center justify-between gap-3">
|
{/*
|
||||||
|
헤더 액션 바 — 2 행 구조:
|
||||||
|
1행) 좌: 페이지 nav 링크 (← 검색 / 관심종목), 우: 종목 액션 (비교/공유/Star)
|
||||||
|
2행) PeriodTabs (7 탭) 단독 — 항상 우측 정렬
|
||||||
|
한 줄에 nav+액션+7탭 을 모두 넣으면 모바일에서 wrap 되며 PeriodTabs 가 줄 중간에
|
||||||
|
끼어 어색해짐. 2행 분리 + flex-wrap + overflow-x-auto 로 모든 폭에서 일관.
|
||||||
|
*/}
|
||||||
|
<div className="mb-2 flex flex-wrap items-center justify-between gap-3">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<Link href="/" className="text-xs text-zinc-500 hover:text-zinc-300">
|
<Link href="/" className="text-xs text-zinc-500 hover:text-zinc-300">
|
||||||
← 검색
|
← 검색
|
||||||
@@ -194,7 +201,7 @@ export default function CodePage({ params }: { params: { code: string } }) {
|
|||||||
관심종목
|
관심종목
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex flex-wrap items-center justify-end gap-3">
|
||||||
<Link
|
<Link
|
||||||
href={`/compare?codes=${code}`}
|
href={`/compare?codes=${code}`}
|
||||||
className="rounded-md border border-zinc-700 px-2 py-0.5 text-[11px] text-zinc-400 hover:border-zinc-500 hover:text-zinc-200"
|
className="rounded-md border border-zinc-700 px-2 py-0.5 text-[11px] text-zinc-400 hover:border-zinc-500 hover:text-zinc-200"
|
||||||
@@ -204,9 +211,11 @@ export default function CodePage({ params }: { params: { code: string } }) {
|
|||||||
</Link>
|
</Link>
|
||||||
<ShareButton code={code} name={chart?.name} />
|
<ShareButton code={code} name={chart?.name} />
|
||||||
<StarButton code={code} name={chart?.name} />
|
<StarButton code={code} name={chart?.name} />
|
||||||
<PeriodTabs value={period} onChange={(id) => setPeriod(id)} />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="mb-4 flex justify-end overflow-x-auto">
|
||||||
|
<PeriodTabs value={period} onChange={(id) => setPeriod(id)} />
|
||||||
|
</div>
|
||||||
|
|
||||||
{err && <div className="mb-4 text-sm text-red-400">차트 로딩 실패: {err}</div>}
|
{err && <div className="mb-4 text-sm text-red-400">차트 로딩 실패: {err}</div>}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user