feat(sidebar): collapsible AlertsPanel / InvestmentNote / RelatedStocks

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.

web/components/AlertsPanel.tsx

@@ -3,9 +3,11 @@
 // 종목 페이지의 가격 알람 패널.
 // 현재 종목의 활성 알람 리스트 + 새 알람 추가 폼 (≥ / ≤ + 가격).
 // 발사 자체는 AlertsToaster 가 글로벌로 처리. 여기는 입력/표시만.
+// Collapsible 본문은 hidden 으로만 가리므로 접어도 op/target partial 입력 유지.
 
 import { useEffect, useState } from "react";
 import { alerts, type Alert, type AlertOp } from "../lib/alerts";
+import { Collapsible } from "./Collapsible";
 
 type Props = {
   code: string;
@@ -32,14 +34,11 @@ export function AlertsPanel({ code, name, current }: Props) {
     setTarget("");
   };
 
+  const subtitle =
+    current != null ? `현재가 ${current.toLocaleString()}원` : undefined;
+
   return (
-    <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4">
-      <div className="mb-3 flex items-baseline justify-between">
-        <div className="text-sm font-medium text-zinc-200">가격 알람</div>
-        <div className="text-[10px] text-zinc-500">
-          {current != null ? `현재가 ${current.toLocaleString()}원` : ""}
-        </div>
-      </div>
+    <Collapsible title="가격 알람" subtitle={subtitle} storageKey="alerts">
       <div className="flex flex-wrap items-center gap-1.5">
         <div className="flex overflow-hidden rounded-md border border-zinc-700 text-[11px]">
           <button
@@ -138,6 +137,6 @@ export function AlertsPanel({ code, name, current }: Props) {
           ))}
         </ul>
       )}
-    </div>
+    </Collapsible>
   );
 }

web/components/Collapsible.tsx

@@ -0,0 +1,79 @@
+"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>
+  );
+}

web/components/InvestmentNote.tsx

@@ -3,9 +3,11 @@
 // 종목 페이지의 사이드 메모 패널.
 // Toss "투자 메모" 패턴 — 진입 이유, 관전 포인트를 짧게 적는 자리.
 // localStorage 만 사용, 서버 전송 없음.
+// Collapsible 본문은 hidden 으로만 가리므로 접어도 textarea dirty 텍스트 유지.
 
 import { useEffect, useMemo, useState } from "react";
 import { NOTE_MAX_LEN, readNote, writeNote, type Note } from "../lib/notes";
+import { Collapsible } from "./Collapsible";
 
 const FEEDBACK_TEXT: Record<"saved" | "deleted" | "failed", string> = {
   saved: "저장됨",
@@ -78,14 +80,10 @@ export function InvestmentNote({ code }: Props) {
     setFeedback(FEEDBACK_TEXT[res.status]);
   };
 
+  const subtitle = saved ? fmtUpdatedAt(saved.updatedAt) : "비공개 · 브라우저 저장";
+
   return (
-    <div className="rounded-lg border border-zinc-800 bg-zinc-900/40 p-3">
-      <div className="mb-2 flex items-baseline justify-between">
-        <h3 className="text-xs font-semibold text-zinc-300">투자 메모</h3>
-        <span className="text-[10px] text-zinc-500">
-          {saved ? fmtUpdatedAt(saved.updatedAt) : "비공개 · 브라우저 저장"}
-        </span>
-      </div>
+    <Collapsible title="투자 메모" subtitle={subtitle} storageKey="note">
       <textarea
         value={text}
         onChange={(e) => setText(e.target.value.slice(0, NOTE_MAX_LEN))}
@@ -114,6 +112,6 @@ export function InvestmentNote({ code }: Props) {
           </button>
         </div>
       </div>
-    </div>
+    </Collapsible>
   );
 }

web/components/RelatedStocks.tsx

@@ -2,10 +2,12 @@
 
 // 같은 시장 내 거래량/유동성 기준 관련 종목 8개.
 // /api/markets/related/{code} 응답을 좁은 list 카드로 렌더.
+// Collapsible 로 감싸 — 모바일에서 사이드바 길이가 부담되면 사용자가 접어 둠.
 
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { api, type RelatedResponse } from "../lib/api";
+import { Collapsible } from "./Collapsible";
 
 export function RelatedStocks({ code }: { code: string }) {
   const [data, setData] = useState<RelatedResponse | null>(null);
@@ -28,64 +30,58 @@ export function RelatedStocks({ code }: { code: string }) {
     };
   }, [code]);
 
-  if (err)
-    return (
-      <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4 text-xs text-zinc-500">
-        관련 종목 로딩 실패: {err}
-      </div>
-    );
-  if (!data)
-    return (
-      <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4 text-xs text-zinc-500">
-        관련 종목 로딩 중…
-      </div>
-    );
-  if (!data.items.length)
-    return (
-      <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4 text-xs text-zinc-500">
-        같은 시장({data.market}) 데이터가 아직 부족합니다.
-      </div>
-    );
+  const subtitle = data?.market ? `${data.market} · 거래량 기준` : undefined;
 
   return (
-    <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4">
-      <div className="mb-2 flex items-baseline justify-between">
-        <div className="text-sm font-medium text-zinc-200">관련 종목</div>
-        <div className="text-[11px] text-zinc-500">{data.market} · 거래량 기준</div>
-      </div>
-      <ul className="divide-y divide-zinc-800">
-        {data.items.map((m) => {
-          const pct = m.pct_change;
-          const tone =
-            pct == null || pct === 0
-              ? "text-zinc-400"
-              : pct > 0
-              ? "text-rose-400"
-              : "text-sky-400";
-          return (
-            <li key={m.code}>
-              <Link
-                href={`/${m.code}`}
-                className="flex items-center justify-between gap-2 py-1.5 text-xs hover:bg-zinc-800/40"
-              >
-                <span className="min-w-0 truncate text-zinc-100">{m.name}</span>
-                <span className="shrink-0 text-right tabular-nums">
-                  <span className="text-zinc-100">
-                    {m.close != null
-                      ? m.close.toLocaleString(undefined, { maximumFractionDigits: 0 })
-                      : "—"}
+    <Collapsible title="관련 종목" subtitle={subtitle} storageKey="related">
+      {err && (
+        <div className="text-xs text-zinc-500">관련 종목 로딩 실패: {err}</div>
+      )}
+      {!err && !data && (
+        <div className="text-xs text-zinc-500">관련 종목 로딩 중…</div>
+      )}
+      {!err && data && !data.items.length && (
+        <div className="text-xs text-zinc-500">
+          같은 시장({data.market}) 데이터가 아직 부족합니다.
+        </div>
+      )}
+      {!err && data && data.items.length > 0 && (
+        <ul className="divide-y divide-zinc-800">
+          {data.items.map((m) => {
+            const pct = m.pct_change;
+            const tone =
+              pct == null || pct === 0
+                ? "text-zinc-400"
+                : pct > 0
+                  ? "text-rose-400"
+                  : "text-sky-400";
+            return (
+              <li key={m.code}>
+                <Link
+                  href={`/${m.code}`}
+                  className="flex items-center justify-between gap-2 py-1.5 text-xs hover:bg-zinc-800/40"
+                >
+                  <span className="min-w-0 truncate text-zinc-100">{m.name}</span>
+                  <span className="shrink-0 text-right tabular-nums">
+                    <span className="text-zinc-100">
+                      {m.close != null
+                        ? m.close.toLocaleString(undefined, {
+                            maximumFractionDigits: 0,
+                          })
+                        : "—"}
+                    </span>
+                    <span className={`ml-2 ${tone}`}>
+                      {pct != null
+                        ? `${pct >= 0 ? "+" : ""}${pct.toFixed(2)}%`
+                        : ""}
+                    </span>
                   </span>
-                  <span className={`ml-2 ${tone}`}>
-                    {pct != null
-                      ? `${pct >= 0 ? "+" : ""}${pct.toFixed(2)}%`
-                      : ""}
-                  </span>
-                </span>
-              </Link>
-            </li>
-          );
-        })}
-      </ul>
-    </div>
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </Collapsible>
   );
 }

web/lib/collapsible.ts

@@ -0,0 +1,29 @@
+// 사이드바 collapsible 패널의 펼침/접힘 상태 영속 저장.
+// 키 형식: `panel-open:<name>` — 종목별이 아닌 panel-name 단위. 사용자는 "관련 종목은 늘
+// 접어 둔다" 같은 panel 단위 습관이 있지 종목별로 다르게 설정하지 않음. 모든 종목 페이지에서
+// 같은 상태로 보이는 것이 직관적.
+//
+// 값 형식: '1' = open, '0' = closed. 다른 값은 default 로 폴백.
+// 쿼타/잠금 환경에선 silently fail — 그 세션 동안 default 상태 유지.
+
+const STORAGE_PREFIX = "panel-open:";
+
+export function readOpen(key: string, defaultOpen: boolean): boolean {
+  if (typeof window === "undefined") return defaultOpen;
+  try {
+    const v = window.localStorage.getItem(STORAGE_PREFIX + key);
+    if (v === null) return defaultOpen;
+    return v === "1";
+  } catch {
+    return defaultOpen;
+  }
+}
+
+export function writeOpen(key: string, open: boolean): void {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(STORAGE_PREFIX + key, open ? "1" : "0");
+  } catch {
+    // quota / private mode — 다음 페이지 진입엔 default 로 되돌아감.
+  }
+}