Add Known Issues Page

src/app/app.html

@@ -1,40 +1,2 @@
 <header-menu></header-menu>
-
-<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>
-
 <router-outlet />

src/app/app.routes.ts

@@ -1,3 +1,8 @@
 import { Routes } from '@angular/router';
+import { MainPage } from './pages/main/main';
+import { KnownIssuesPage } from './pages/known-issues/known-issues';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  { path: '', component: MainPage },
+  { path: 'known-issues', component: KnownIssuesPage },
+];

src/app/app.scss

@@ -1,39 +0,0 @@
-.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;
-}
-
-h1 {
-  margin-bottom: 40px;
-  text-align: center;
-}
-
-h2 {
-  margin-top: 0;
-  margin-bottom: 20px;
-  font-size: 1.2rem;
-  color: #666;
-}
-
-p {
-  margin-top: 15px;
-  font-weight: 500;
-}
-
-section#dropdown-test {
-  dropdown {
-    width: 324px;
-  }
-}
-
-.test-container {
-  max-width: 100%;
-}

src/app/app.ts

@@ -1,32 +1,12 @@
-import { Component, signal } from '@angular/core';
+import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { Switch } from './components/switch/switch';
-import { Dropdown, DropdownOption } from './components/dropdown/dropdown';
 import { HeaderMenu } from './features/header-menu/header-menu';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, Switch, Dropdown, HeaderMenu],
+  standalone: true,
+  imports: [RouterOutlet, HeaderMenu],
   templateUrl: './app.html',
   styleUrl: './app.scss'
 })
-export class App {
-  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);
-  }
-}
+export class App {}

src/app/features/header-menu/header-menu.html

@@ -1,18 +1,19 @@
 <div class="menu-left">
-  <div class="brand">
+  <div class="brand" [routerLink]="['/']">
     <img src="/logo_inverted.svg" alt="logo"/>
     <span><strong>ADOFAI Editor Forum</strong></span>
   </div>
 
-  <span>Levels</span>
-  <span>Community</span>
-  <span>Leaderboard</span>
-  <span>About</span>
+  <span class="dummy-link">Levels</span>
+  <span class="dummy-link">Community</span>
+  <span class="dummy-link">Leaderboard</span>
+  <span class="dummy-link">About</span>
 </div>
 
 <div class="menu-right">
-  <span><strong>Login</strong></span>
-  <span>Signup</span>
+  <span class="nav-link" [routerLink]="['/known-issues']">Known Issues</span>
+  <span class="dummy-link"><strong>Login</strong></span>
+  <span class="dummy-link">Signup</span>
 
   <span class="material-symbols-outlined icon-40 settings">settings</span>
 </div>

src/app/features/header-menu/header-menu.scss

@@ -29,6 +29,22 @@
       line-height: 40px;
       vertical-align: middle;
       white-space: nowrap;
+
+      &.nav-link {
+        font-weight: 700;
+        cursor: pointer;
+        color: oklch(0.5 0.15 250); // Primary color highlight (blue-ish)
+
+        transition: opacity 0.3s;
+
+        &:hover {
+          opacity: 0.7;
+        }
+      }
+
+      &.dummy-link {
+        cursor: not-allowed;
+      }
     }
   }
 
@@ -42,6 +58,11 @@
       align-items: center;
       justify-content: start;
       gap: 0;
+      cursor: pointer;
+
+      &:hover {
+        opacity: 0.7;
+      }
 
       img {
         display: inline-block;

src/app/features/header-menu/header-menu.ts

@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'header-menu',
-  imports: [],
+  imports: [RouterLink],
   templateUrl: './header-menu.html',
   styleUrl: './header-menu.scss',
 })

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