Fix Popup Style

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

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"

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

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');
+
   /**
    * 팝업 닫기 요청 (배경 클릭 또는 닫기 버튼)
    */

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>

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">

src/app/pages/main/main.scss

@@ -4,7 +4,7 @@ section#dropdown-test {
   }
 }
 
-.test-container {
+div.test-container {
   max-width: 100%;
 }
 

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