+import type { ReactNode } from "react";

+

+interface SidebarGroupProps {

+  label: string;

+  icon?: ReactNode;

+  /** 펼침 상태 — 상태 소유는 소비처(feature)다. 이 컴포넌트는 비제어 프레젠테이션이다. */

+  isExpanded: boolean;

+  onToggle: () => void;

+  /** 자식 SidebarLink들(isNested로 들여쓰기). */

+  children: ReactNode;

+}

+

+/**

+ * 사이드바 그룹 헤딩 — 자식 내비게이션 항목(SidebarLink)을 펼침/접힘으로 묶는다.

+ * 상태를 갖지 않는 프레젠테이션 컴포넌트로, IconButton·SidebarLink와 동일한 관례로

+ * 'use client'를 붙이지 않는다: onToggle을 받아 <button onClick>에 연결하지만,

+ * 이 파일 자체는 훅을 쓰지 않는 순수 함수 컴포넌트다. Next.js App Router의 클라이언트

+ * 경계는 "이 모듈을 어느 파일이 import하는가"로 정해지므로, 실제 펼침 상태(useState 등)를

+ * 들고 있는 소비처(feature) 파일이 'use client'면 이 컴포넌트도 그 클라이언트 모듈

+ * 그래프에 포함되어 정상 동작한다(node_modules/next/dist/docs/01-app/01-getting-started/

+ * 05-server-and-client-components.md "module graph" 설명 참조).

+ *

+ * aria-controls는 의도적으로 생략했다 — 대상 id를 안전하게 만들 방법이 마땅치 않다

+ * (useId는 위 이유로 이 컴포넌트에서 쓸 수 없고, label을 id로 슬러그화하면 공백 포함

+ * 라벨이나 중복 라벨에서 깨질 수 있다). WAI-ARIA APG의 Disclosure 패턴에서 aria-controls는

+ * 필수가 아니라 선택 사항이며(스크린리더 지원도 일관적이지 않음), aria-expanded + 버튼

+ * 바로 다음에 내용이 오는 DOM 인접 구조만으로 충분하다고 판단했다.

+ */

+export function SidebarGroup({ label, icon, isExpanded, onToggle, children }: SidebarGroupProps) {

+  return (

+    <div>

+      <button

+        type="button"

+        onClick={onToggle}

+        aria-expanded={isExpanded}

+        className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-label-lg text-foreground transition-colors duration-200 hover:bg-surface-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"

+      >

+        {icon}

+        {/* min-w-0: SidebarLink와 동일한 truncate 대응(flex 아이템 기본 min-width:auto가

+            overflow-hidden을 무력화하는 문제). 접힘 폭(md:w-16)에서도 한 줄 유지 + 말줄임만

+            적용한다 — 아이콘 전용 표시로 전환하는 정식 해법은 아이콘 자산이 없어 이번

+            범위에서 다루지 않는다(SidebarLink와 동일 사유). */}

+        <span className="min-w-0 flex-1 truncate">{label}</span>

+        <ChevronIcon

+          className={`shrink-0 transition-transform duration-200 ${isExpanded ? "rotate-90" : "rotate-0"}`}

+        />

+      </button>

+      {isExpanded && <div className="flex flex-col">{children}</div>}

+    </div>

+  );

+}

+

+/**

+ * 펼침/접힘 표시용 셰브론(오른쪽 화살표 — 펼치면 90도 회전해 아래를 향한다). 그룹 헤딩

+ * 전용 장식 요소라 components/ui/icons/에 별도 파일로 승격하지 않고 이 파일 안에 둔다.

+ * moon-icon.tsx/sun-icon.tsx와 동일한 인라인 SVG 관례(stroke=currentColor로 상위 text

+ * 색 토큰 상속, 장식용이라 aria-hidden).

+ */

+function ChevronIcon({ className }: { className?: string }) {

+  return (

+    <svg

+      viewBox="0 0 24 24"

+      fill="none"

+      stroke="currentColor"

+      strokeWidth="2"

+      strokeLinecap="round"

+      strokeLinejoin="round"

+      aria-hidden="true"

+      className={`size-4 ${className ?? ""}`}

+    >

+      <path d="M9 6l6 6-6 6" />

+    </svg>

+  );

+}