본 컴포넌트는 단일 파일 구조 내에서 **"사용자 인터랙션"**과 **"상태 시각화"**라는 역할을 유연하게 수행하도록 설계되었습니다. toggleName을 통한 웹 접근성(A11y) 속성이 자동으로 최적화된다.

✅ 컴포넌트 구조

파일명	유형	주요 역할
`Toggle.tsx`	Client	토글 상태와 스타일을 관리하는 공통 컴포넌트

toggleName 속성이 주입되면 자동으로 aria-label이 부여되어 스크린 리더 접근성이 활성화
data-state 속성(on | off)을 통해 현재 활성화 여부를 CSS 선택자로 제어
button 태그를 기반으로 하여 Enter 및 Space 키 입력을 통한 접근성을 기본적으로 지원

✅ ToggleProps (공통 속성)

모든 표준 HTML button 속성을 지원하며, 아래의 커스텀 속성을 추가로 가진다

Props	설명
`toggleName: string`	(필수) 접근성을 위한 레이블 입니다. 내부적으로 `aria-label`에 할당
`variant?: 'default'	'outline'`
`size?: 'default'	'sm'
`active?: boolean`	외부 상태에 의해 토글을 제어할 때 사용
`defaultActive?: boolean`	초기 활성 상태를 설정 (기본값: `false`)
`onActiveChange?: (active: boolean) => void`	상태가 변결될 때 실행되는 콜백 함수
`className?: string`	스타일 커스텀이 가능

✅ 사용 예시

1. 일반적인 사용 (비제어 컴포넌트)

별도의 상태 관리 없이 단독으로 사용합니다. 내부적으로 클릭 이벤트를 처리하며 활성 상태 스타일이 자동으로 적용

import { Toggle } from "@/shared/ui/toggle";

export default function Toolbar() {
  return (
    <div className="flex gap-2">
      <Toggle toggleName="굵게">
        <span className="font-bold">B</span>
      </Toggle>
      <Toggle toggleName="밑줄" variant="outline">
        <span className="underline">U</span>
      </Toggle>
    </div>
  );
}

2. 외부 상태와 연동하는 경우 (제어 컴포넌트)

"use client" 파일 내에서 호출할 경우, active 속성과 onActiveChange 이벤트를 주입하여 부모 컴포넌트의 상태와 동기화할 수 있다.

"use client";

import { useState } from "react";
import { Toggle } from "@/shared/ui/toggle";

export default function FilterGroup() {
  const [isFavorite, setIsFavorite] = useState(false);

  return (
    <Toggle 
      toggleName="즐겨찾기"
      variant="outline"
      active={isFavorite}
      onActiveChange={setIsFavorite}
    >
      {isFavorite ? "⭐ 즐겨찾기 취소" : "☆ 즐겨찾기 추가"}
    </Toggle>
  );
}