f9027f5365
Three lower-sidebar panels are now wrapped in a shared Collapsible so mobile readers can fold away sections they're not actively using. New shared pieces: - lib/collapsible.ts — readOpen/writeOpen helpers backed by localStorage under 'panel-open:<name>'. Per-panel-name (not per-code) because the preference is a panel-level habit; users don't want different fold state for every symbol. - components/Collapsible.tsx — button-as-header + chevron + body. aria-expanded for AT. Body uses 'hidden' instead of conditional unmount so textarea text, partial alert form input, and RelatedStocks fetch results all survive collapse cycles. SSR-safe: useState(defaultOpen) then useEffect-sync to avoid React hydration mismatch when localStorage diverges from default. Panel refactors: - RelatedStocks: outer rounded div + header replaced with Collapsible; loading/error/empty/data states all rendered inside body (header stays visible so user can still toggle/recognize the section even while loading). - InvestmentNote: same swap. saved.updatedAt drives the subtitle. - AlertsPanel: same swap. current price drives the subtitle. Defaults are open=true everywhere; the surface area is the toggle itself, not a forced collapse. User's first interaction sets the sticky preference.
80 lines
2.6 KiB
TypeScript
80 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState, type ReactNode } from "react";
|
|
import { readOpen, writeOpen } from "../lib/collapsible";
|
|
|
|
// 사이드바 패널의 공용 collapsible 래퍼.
|
|
// - 헤더 row 가 button 으로 동작 → 클릭 시 본문 토글, aria-expanded 로 보조기술 알림.
|
|
// - 사용자 선택은 localStorage 에 panel-open:<storageKey> 로 영속.
|
|
// - 본문은 `hidden` 으로 숨겨 unmount 시키지 않음 → InvestmentNote 입력 텍스트,
|
|
// AlertsPanel 폼 partial 입력, RelatedStocks fetch 결과 등이 토글 사이클 동안
|
|
// 보존. (조건부 렌더로 children 을 끄면 re-mount → 데이터 재요청/입력 손실.)
|
|
//
|
|
// SSR 안전:
|
|
// 초기 state 를 readOpen() 으로 lazy 초기화하면 서버는 window 가 없어 defaultOpen 을
|
|
// 반환하고, 클라이언트 hydration 첫 렌더에서 localStorage 값과 다르면 React 가
|
|
// hydration mismatch 를 경고함. useState(defaultOpen) → useEffect 에서 sync 패턴으로
|
|
// 해결 — 1프레임 미세 jank 는 감수 (localStorage 값이 default 와 다를 때만, 사이드바
|
|
// 패널이라 시선 끄는 위치도 아님).
|
|
|
|
type Props = {
|
|
title: ReactNode;
|
|
subtitle?: ReactNode;
|
|
storageKey: string;
|
|
defaultOpen?: boolean;
|
|
children: ReactNode;
|
|
className?: string;
|
|
};
|
|
|
|
export function Collapsible({
|
|
title,
|
|
subtitle,
|
|
storageKey,
|
|
defaultOpen = true,
|
|
children,
|
|
className = "rounded-md border border-zinc-800 bg-zinc-900/40",
|
|
}: Props) {
|
|
const [open, setOpen] = useState(defaultOpen);
|
|
|
|
useEffect(() => {
|
|
setOpen(readOpen(storageKey, defaultOpen));
|
|
}, [storageKey, defaultOpen]);
|
|
|
|
const toggle = () => {
|
|
setOpen((cur) => {
|
|
const next = !cur;
|
|
writeOpen(storageKey, next);
|
|
return next;
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className={className}>
|
|
<button
|
|
type="button"
|
|
onClick={toggle}
|
|
aria-expanded={open}
|
|
className="flex w-full items-baseline justify-between gap-2 px-4 py-3 text-left transition hover:bg-zinc-900/60"
|
|
>
|
|
<span className="flex items-center gap-2 text-sm font-medium text-zinc-200">
|
|
<span
|
|
className={`inline-block text-[10px] text-zinc-500 transition-transform ${
|
|
open ? "rotate-90" : ""
|
|
}`}
|
|
aria-hidden
|
|
>
|
|
▶
|
|
</span>
|
|
{title}
|
|
</span>
|
|
{subtitle != null && (
|
|
<span className="shrink-0 text-[10px] text-zinc-500">{subtitle}</span>
|
|
)}
|
|
</button>
|
|
<div className={open ? "border-t border-zinc-800 px-4 pb-4 pt-3" : "hidden"}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|