Add Known Issues Page

Dockerfile

@@ -10,7 +10,7 @@ RUN npm install
 # 소스 코드 복사 및 빌드
 COPY . .
 RUN npm install -g @angular/cli
-RUN ng build
+RUN ng build --configuration production
 
 # 2. Production Stage
 FROM node:24-alpine AS runner

build.ps1

@@ -1,7 +1,7 @@
 # AefComponentTest Docker 이미지 빌드 및 추출 스크립트
 
 $IMAGE_NAME = "aef-component-test"
-$TAG = "0.0.1"
+$TAG = "0.0.2"
 $OUTPUT_FILE = "aef-component-test.tar"
 
 Write-Host "--- Docker 이미지 빌드 시작: ${IMAGE_NAME}:${TAG} ---" -ForegroundColor Cyan

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

src/index.html

@@ -2,10 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>AefComponentTest</title>
+    <title>AEF Component Test</title>
     <base href="/">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="icon" type="image/x-icon" href="favicon.ico">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,300,0..1,-50..200" />
   </head>
   <body>

src/styles.scss

@@ -37,3 +37,20 @@ strong {
   font-weight: 900;
 }
 
+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;
+}
+