From 751eb73a941506c0c14118bffdef64641a2084e3 Mon Sep 17 00:00:00 2001 From: copecone Date: Thu, 19 Mar 2026 14:26:57 +0900 Subject: [PATCH] Add Known Issues Page --- Dockerfile | 2 +- build.ps1 | 2 +- public/favicon.ico | Bin 15086 -> 0 bytes src/app/app.html | 38 ----------------- src/app/app.routes.ts | 7 +++- src/app/app.scss | 39 ------------------ src/app/app.ts | 28 ++----------- src/app/features/header-menu/header-menu.html | 15 +++---- src/app/features/header-menu/header-menu.scss | 21 ++++++++++ src/app/features/header-menu/header-menu.ts | 3 +- src/app/pages/known-issues/known-issues.html | 9 ++++ src/app/pages/known-issues/known-issues.scss | 38 +++++++++++++++++ src/app/pages/known-issues/known-issues.ts | 10 +++++ src/app/pages/main/main.html | 36 ++++++++++++++++ src/app/pages/main/main.scss | 22 ++++++++++ src/app/pages/main/main.ts | 31 ++++++++++++++ src/index.html | 3 +- src/styles.scss | 17 ++++++++ 18 files changed, 207 insertions(+), 114 deletions(-) delete mode 100644 public/favicon.ico create mode 100644 src/app/pages/known-issues/known-issues.html create mode 100644 src/app/pages/known-issues/known-issues.scss create mode 100644 src/app/pages/known-issues/known-issues.ts create mode 100644 src/app/pages/main/main.html create mode 100644 src/app/pages/main/main.scss create mode 100644 src/app/pages/main/main.ts diff --git a/Dockerfile b/Dockerfile index 9b2ea4a..2b339dd 100644 --- a/Dockerfile +++ b/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 diff --git a/build.ps1 b/build.ps1 index ab5f743..13adee7 100644 --- a/build.ps1 +++ b/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 diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index 57614f9c967596fad0a3989bec2b1deff33034f6..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15086 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 Nr__JTFzvMr^FKp4S3v*( diff --git a/src/app/app.html b/src/app/app.html index 5d3198e..a18cc5f 100644 --- a/src/app/app.html +++ b/src/app/app.html @@ -1,40 +1,2 @@ - -
-

AEF Component Test

- -
-

Switch Component

- -

Switch is: {{ isToggled() ? 'ON' : 'OFF' }}

-
- - -
- diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index dc39edb..29046d3 100644 --- a/src/app/app.routes.ts +++ b/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 }, +]; diff --git a/src/app/app.scss b/src/app/app.scss index 7a30e9f..e69de29 100644 --- a/src/app/app.scss +++ b/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%; -} diff --git a/src/app/app.ts b/src/app/app.ts index 8623dbe..f0769dc 100644 --- a/src/app/app.ts +++ b/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(null); - selectedSize = signal(null); - - handleToggle(state: boolean) { - console.log('Toggle state:', state); - } - - handleDropdownChange(value: any) { - console.log('Dropdown value:', value); - } -} +export class App {} diff --git a/src/app/features/header-menu/header-menu.html b/src/app/features/header-menu/header-menu.html index 9238ab9..90b6eff 100644 --- a/src/app/features/header-menu/header-menu.html +++ b/src/app/features/header-menu/header-menu.html @@ -1,18 +1,19 @@
-
+
logo ADOFAI Editor Forum
- Levels - Community - Leaderboard - About + Levels + Community + Leaderboard + About
- Login - Signup + Known Issues + Login + Signup settings
diff --git a/src/app/features/header-menu/header-menu.scss b/src/app/features/header-menu/header-menu.scss index 0d93636..73518bd 100644 --- a/src/app/features/header-menu/header-menu.scss +++ b/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; diff --git a/src/app/features/header-menu/header-menu.ts b/src/app/features/header-menu/header-menu.ts index cbbff50..13a29fc 100644 --- a/src/app/features/header-menu/header-menu.ts +++ b/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', }) diff --git a/src/app/pages/known-issues/known-issues.html b/src/app/pages/known-issues/known-issues.html new file mode 100644 index 0000000..c30697d --- /dev/null +++ b/src/app/pages/known-issues/known-issues.html @@ -0,0 +1,9 @@ +
+

Known Issues

+ +
+

Issue #1: Dropdown Test UI Layout

+

Dropdown Component를 테스트하기 위한 UI에서, 상위 컨테이너의 크기가 충분하지 않은 경우 드롭다운이 상위 컨테이너 바깥의 공간을 침범하는 문제가 발생했습니다.

+
Resolved
+
+
diff --git a/src/app/pages/known-issues/known-issues.scss b/src/app/pages/known-issues/known-issues.scss new file mode 100644 index 0000000..878fd31 --- /dev/null +++ b/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 + } + } +} diff --git a/src/app/pages/known-issues/known-issues.ts b/src/app/pages/known-issues/known-issues.ts new file mode 100644 index 0000000..8d23fad --- /dev/null +++ b/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 {} diff --git a/src/app/pages/main/main.html b/src/app/pages/main/main.html new file mode 100644 index 0000000..dfb081a --- /dev/null +++ b/src/app/pages/main/main.html @@ -0,0 +1,36 @@ +
+

AEF Component Test

+ +
+

Switch Component

+ +

Switch is: {{ isToggled() ? 'ON' : 'OFF' }}

+
+ + +
diff --git a/src/app/pages/main/main.scss b/src/app/pages/main/main.scss new file mode 100644 index 0000000..5d5ce55 --- /dev/null +++ b/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%; +} diff --git a/src/app/pages/main/main.ts b/src/app/pages/main/main.ts new file mode 100644 index 0000000..cc275c4 --- /dev/null +++ b/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(null); + selectedSize = signal(null); + + handleToggle(state: boolean) { + console.log('Toggle state:', state); + } + + handleDropdownChange(value: any) { + console.log('Dropdown value:', value); + } +} diff --git a/src/index.html b/src/index.html index e811fda..9b98d16 100644 --- a/src/index.html +++ b/src/index.html @@ -2,10 +2,9 @@ - AefComponentTest + AEF Component Test - diff --git a/src/styles.scss b/src/styles.scss index 6c688d1..ec80ac3 100644 --- a/src/styles.scss +++ b/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; +} +