From c3f24f5e6d8d8a48dee63b9bfe2b45a943e686bb Mon Sep 17 00:00:00 2001
From: copecone <controld3785@gmail.com>
Date: Tue, 31 Mar 2026 03:17:43 +0900
Subject: [PATCH] Fix Popup Style

---
 build.ps1                                    |  2 +-
 src/app/components/popup/popup.html          |  1 +
 src/app/components/popup/popup.scss          | 11 ++++++++++-
 src/app/components/popup/popup.ts            |  7 +++++++
 src/app/pages/known-issues/known-issues.html |  4 ++--
 src/app/pages/main/main.html                 | 12 ++++++++----
 src/app/pages/main/main.scss                 |  2 +-
 src/styles.scss                              |  3 +--
 8 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/build.ps1 b/build.ps1
index 4f067cb..a33da70 100644
--- a/build.ps1
+++ b/build.ps1
@@ -1,7 +1,7 @@
 # AefComponentTest Docker 이미지 빌드 및 추출 스크립트
 
 $IMAGE_NAME = "aef-component-test"
-$TAG = "0.0.3"
+$TAG = "0.0.4"
 $OUTPUT_FILE = "aef-component-test.tar"
 
 Write-Host "--- Docker 이미지 빌드 시작: ${IMAGE_NAME}:${TAG} ---" -ForegroundColor Cyan
diff --git a/src/app/components/popup/popup.html b/src/app/components/popup/popup.html
index a2f85f9..4b5b901 100644
--- a/src/app/components/popup/popup.html
+++ b/src/app/components/popup/popup.html
@@ -1,5 +1,6 @@
 <div class="popup-backdrop" [class.center]="isCenter" (click)="onClose()">
   <div class="popup-container"
+       [class]="'variant-' + variant()"
        [class.custom-pos]="!isCenter"
        [style.top]="customStyle.top"
        [style.left]="customStyle.left"
diff --git a/src/app/components/popup/popup.scss b/src/app/components/popup/popup.scss
index d4796e8..d99bfac 100644
--- a/src/app/components/popup/popup.scss
+++ b/src/app/components/popup/popup.scss
@@ -16,7 +16,6 @@
 }
 
 .popup-container {
-  background: white;
   border-radius: 12px;
   box-shadow: 0 0 40px oklch(0 0 0 / 15%);
   min-width: 40px;
@@ -30,6 +29,16 @@
   border: oklch(0 0 0 / 20%) 2px solid;
   gap: 15px;
 
+  &.variant-glass {
+    background-color: oklch(1 0 0 / 60%);
+    backdrop-filter: blur(20px);
+  }
+
+  &.variant-solid {
+    background-color: white;
+    backdrop-filter: none;
+  }
+
   &.custom-pos {
     position: absolute;
   }
diff --git a/src/app/components/popup/popup.ts b/src/app/components/popup/popup.ts
index 54f3872..b548024 100644
--- a/src/app/components/popup/popup.ts
+++ b/src/app/components/popup/popup.ts
@@ -7,6 +7,8 @@ export type PopupPosition = {
   bottom?: string;
 };
 
+export type PopupVariant = 'glass' | 'solid';
+
 @Component({
   selector: 'app-popup',
   standalone: true,
@@ -20,6 +22,11 @@ export class PopupComponent {
    */
   position = input<PopupPosition | 'center'>('center');
 
+  /**
+   * 팝업의 스타일 변형 (기본값은 'glass')
+   */
+  variant = input<PopupVariant>('glass');
+
   /**
    * 팝업 닫기 요청 (배경 클릭 또는 닫기 버튼)
    */
diff --git a/src/app/pages/known-issues/known-issues.html b/src/app/pages/known-issues/known-issues.html
index c7b7d02..c2a822b 100644
--- a/src/app/pages/known-issues/known-issues.html
+++ b/src/app/pages/known-issues/known-issues.html
@@ -1,13 +1,13 @@
 <div class="container">
   <h1>Known Issues</h1>
 
-  <section class="issue-item">
+  <section class="issue-item feature-block">
     <h2>Issue #1: Dropdown Test UI Layout</h2>
     <p>Dropdown Component를 테스트하기 위한 UI에서, 상위 컨테이너의 크기가 충분하지 않은 경우 드롭다운이 상위 컨테이너 바깥의 공간을 침범하는 문제가 발생했습니다.</p>
     <div class="status-tag resolved">Resolved</div>
   </section>
 
-  <section class="issue-item">
+  <section class="issue-item feature-block">
     <h2>Issue #2: Dropdown Animation Control</h2>
     <p>Dropdown Component의 애니메이션 효과가 운영체제의 애니메이션 설정에 영향을 받지 않는 문제가 발생했습니다.</p>
     <div class="status-tag resolved">Resolved</div>
diff --git a/src/app/pages/main/main.html b/src/app/pages/main/main.html
index 0048483..bc74d93 100644
--- a/src/app/pages/main/main.html
+++ b/src/app/pages/main/main.html
@@ -3,13 +3,17 @@
 
   <h1>AEF Component Test</h1>
 
-  <section id="switch-test" class="test-container">
+  <section id="switch-test" class="feature-block">
     <h2>Switch Component</h2>
-    <switch [(isActive)]="isToggled" (toggle)="handleToggle($event)"></switch>
-    <p>Switch is: {{ isToggled() ? 'ON' : 'OFF' }}</p>
+    <div style="display: flex; flex-direction: column; gap: 40px; align-items: flex-start;">
+      <div class="test-container">
+        <switch [(isActive)]="isToggled" (toggle)="handleToggle($event)"></switch>
+        <p>Switch is: {{ isToggled() ? 'ON' : 'OFF' }}</p>
+      </div>
+    </div>
   </section>
 
-  <section id="dropdown-test">
+  <section id="dropdown-test" class="feature-block">
     <h2>Dropdown Component</h2>
     <div style="display: flex; flex-direction: column; gap: 40px; align-items: flex-start;">
       <div class="test-container">
diff --git a/src/app/pages/main/main.scss b/src/app/pages/main/main.scss
index 5fd92d9..7ee9ec7 100644
--- a/src/app/pages/main/main.scss
+++ b/src/app/pages/main/main.scss
@@ -4,7 +4,7 @@ section#dropdown-test {
   }
 }
 
-.test-container {
+div.test-container {
   max-width: 100%;
 }
 
diff --git a/src/styles.scss b/src/styles.scss
index 4e84fd0..a7b7abb 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -61,14 +61,13 @@ p {
   display: block;
 }
 
-section {
+section.feature-block {
   margin-bottom: 40px;
   padding: 20px;
   border: 2px solid oklch(0 0 0 / 20%); // rgba(0, 0, 0, 0.2)
   border-radius: 8px;
 
   background-color: oklch(1 0 0 / 60%);
-
   backdrop-filter: blur(20px);
 }