Add Known Issues Page

src/app/pages/main/main.html

@@ -0,0 +1,36 @@
+<div class="container">
+  <h1>AEF Component Test</h1>
+
+  <section id="switch-test" class="test-container">
+    <h2>Switch Component</h2>
+    <switch [(isActive)]="isToggled" (toggle)="handleToggle($event)"></switch>
+    <p>Switch is: {{ isToggled() ? 'ON' : 'OFF' }}</p>
+  </section>
+
+  <section id="dropdown-test">
+    <h2>Dropdown Component</h2>
+    <div style="display: flex; flex-direction: column; gap: 40px; align-items: flex-start;">
+      <div class="test-container">
+        <h3>Object Options</h3>
+        <dropdown
+          [options]="dropdownOptions"
+          [(value)]="selectedDropdownValue"
+          [defaultIndex]="0"
+          (selectionChange)="handleDropdownChange($event)"
+          icon="language">
+        </dropdown>
+        <p>Selected Value: {{ selectedDropdownValue() }}</p>
+      </div>
+
+      <div class="test-container">
+        <h3>String Options (Simple)</h3>
+        <dropdown
+          [options]="['Small', 'Medium', 'Large']"
+          [(value)]="selectedSize"
+          placeholder="Choose Size">
+        </dropdown>
+        <p>Selected Size: {{ selectedSize() }}</p>
+      </div>
+    </div>
+  </section>
+</div>

src/app/pages/main/main.scss

@@ -0,0 +1,22 @@
+.container {
+  padding: 40px;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+section {
+  margin-bottom: 40px;
+  padding: 20px;
+  border: 2px solid rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+}
+
+section#dropdown-test {
+  dropdown {
+    width: 324px;
+  }
+}
+
+.test-container {
+  max-width: 100%;
+}

src/app/pages/main/main.ts

@@ -0,0 +1,31 @@
+import { Component, signal } from '@angular/core';
+import { Switch } from '../../components/switch/switch';
+import { Dropdown, DropdownOption } from '../../components/dropdown/dropdown';
+
+@Component({
+  selector: 'app-main-page',
+  standalone: true,
+  imports: [Switch, Dropdown],
+  templateUrl: './main.html',
+  styleUrl: './main.scss'
+})
+export class MainPage {
+  isToggled = signal(false);
+
+  dropdownOptions: DropdownOption[] = [
+    { label: 'English', value: "EN" },
+    { label: '한국어', value: "KR" },
+    { label: '日本語', value: "JP" },
+  ];
+
+  selectedDropdownValue = signal<any>(null);
+  selectedSize = signal<string | null>(null);
+
+  handleToggle(state: boolean) {
+    console.log('Toggle state:', state);
+  }
+
+  handleDropdownChange(value: any) {
+    console.log('Dropdown value:', value);
+  }
+}