Add Known Issues Page

src/app/pages/known-issues/known-issues.html

@@ -0,0 +1,9 @@
+<div class="container">
+  <h1>Known Issues</h1>
+
+  <section class="issue-item">
+    <h2>Issue #1: Dropdown Test UI Layout</h2>
+    <p>Dropdown Component를 테스트하기 위한 UI에서, 상위 컨테이너의 크기가 충분하지 않은 경우 드롭다운이 상위 컨테이너 바깥의 공간을 침범하는 문제가 발생했습니다.</p>
+    <div class="status-tag resolved">Resolved</div>
+  </section>
+</div>

src/app/pages/known-issues/known-issues.scss

@@ -0,0 +1,38 @@
+.container {
+  padding: 40px;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+section {
+  margin-bottom: 24px;
+  padding: 20px;
+  border: 2px solid rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+
+  p {
+    line-height: 1.4;
+  }
+
+  .status-tag {
+    display: inline-block;
+    padding: 4px 12px;
+    border: 2px solid rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    font-size: 0.8rem;
+    font-weight: bold;
+    text-transform: uppercase;
+
+    &.reported {
+      background-color: oklch(0.786 0.1379 18.69); // FF9396
+    }
+
+    &.wip {
+      background-color: oklch(0.786 0.1379 64.49); // F6A550
+    }
+
+    &.resolved {
+      background-color: oklch(0.786 0.1379 154.52); // 68D391
+    }
+  }
+}

src/app/pages/known-issues/known-issues.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-known-issues',
+  standalone: true,
+  imports: [],
+  templateUrl: './known-issues.html',
+  styleUrl: './known-issues.scss'
+})
+export class KnownIssuesPage {}

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);
+  }
+}