Add Switch Component

src/app/components/switch/switch.ts

@@ -0,0 +1,41 @@
+import { Component, input, model, output } from '@angular/core'
+
+@Component({
+  selector: 'switch',
+  imports: [],
+  templateUrl: './switch.html',
+  styleUrl: './switch.scss',
+  host: {
+    'role': 'switch',
+    'tabindex': '0',
+    '[attr.aria-checked]': 'isActive()',
+    '[class.active]': 'isActive()',
+    '[class.reduce-motion]': 'reduceMotion()',
+    '(click)': 'onClick()',
+    '(keydown.enter)': 'onClick()',
+    '(keydown.space)': 'onSpaceDown($event)'
+  }
+})
+export class Switch {
+  isActive = model<boolean>(false);
+  reduceMotion = input<boolean>(
+    typeof window !== 'undefined'
+      ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+      : false
+  );
+  toggle = output<boolean>()
+
+  onClick(): void {
+    this.isActive.update(value => !value)
+    this.onToggle()
+  }
+
+  onSpaceDown(event: Event): void {
+    event.preventDefault(); // 스페이스바 스크롤 방지
+    this.onClick();
+  }
+
+  onToggle(): void {
+    this.toggle.emit(this.isActive())
+  }
+}