Add Settings Popup

src/app/components/dropdown/dropdown.scss

@@ -36,7 +36,7 @@ $dropdown_animation_duration: 0.2s;
 .dropdown-box {
   display: flex;
   align-items: center;
-  padding: 0 12px;
+  padding: 0 10px;
   height: $dropdown_height;
   box-sizing: border-box;
   gap: 8px;

src/app/components/popup/popup.html

@@ -1,13 +1,17 @@
-<header class="popup-header">
-  <div class="header-left">
-    <ng-content select="[header-left]"></ng-content>
-  </div>
+<div class="popup-backdrop" (click)="onClose()">
+  <div class="popup-container" (click)="$event.stopPropagation()">
+    <header class="popup-header">
+      <div class="header-left">
+        <ng-content select="[header-left]"></ng-content>
+      </div>
 
-  <div class="header-right">
-    <button class="material-symbols-outlined icon-24 chevron" (click)="onClose()">close</button>
-  </div>
-</header>
+      <div class="header-right">
+        <button class="material-symbols-outlined icon-24 close-btn" (click)="onClose()">close</button>
+      </div>
+    </header>
 
-<div class="popup-body">
-  <ng-content></ng-content>
+    <div class="popup-body">
+      <ng-content></ng-content>
+    </div>
+  </div>
 </div>

src/app/components/popup/popup.scss

@@ -0,0 +1,78 @@
+:host {
+  display: block;
+}
+
+.popup-backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 100; /* .popup-outlet 내부에서의 상대적 순서 */
+}
+
+.popup-container {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 0 40px oklch(0 0 0 / 15%);
+  min-width: 40px;
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+  animation: popup-enter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+
+  border: oklch(0 0 0 / 20%) 2px solid;
+  gap: 15px;
+}
+
+@keyframes popup-enter {
+  from {
+    transform: scale(0.95) translateY(10px);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1) translateY(0);
+    opacity: 1;
+  }
+}
+
+.popup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 12px;
+  height: 40px;
+  border-bottom: 1px solid oklch(0 0 0 / 5%);
+
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .header-right {
+    .close-btn {
+      background: none;
+      border: none;
+      padding: 4px;
+      cursor: pointer;
+      border-radius: 50%;
+      color: oklch(0.4 0 0);
+      transition: background-color 0.2s, color 0.2s;
+
+      &:hover {
+        background-color: oklch(0 0 0 / 5%);
+        color: oklch(0 0 0);
+      }
+    }
+  }
+}
+
+.popup-body {
+  padding: 0 12px;
+  overflow-y: visible;
+  flex-grow: 1;
+}

src/app/components/popup/popup.ts

@@ -1,16 +1,18 @@
-import { Component, input, model, output } from '@angular/core';
-import { Dropdown } from '../../components/dropdown/dropdown';
-import { Switch } from '../../components/switch/switch';
+import { Component, output } from '@angular/core';
 
 @Component({
-  selector: 'popup',
+  selector: 'app-popup',
+  standalone: true,
   templateUrl: './popup.html',
   styleUrl: './popup.scss',
 })
 export class PopupComponent {
-  close = output<void>();
+  /**
+   * 팝업 닫기 요청 (배경 클릭 또는 닫기 버튼)
+   */
+  closeRequest = output<void>();
 
   onClose() {
-    this.close.emit()
+    this.closeRequest.emit();
   }
 }