Adjust Settings Popup Position

src/app/components/popup/popup.html

@@ -1,5 +1,11 @@
-<div class="popup-backdrop" (click)="onClose()">
-  <div class="popup-container" (click)="$event.stopPropagation()">
+<div class="popup-backdrop" [class.center]="isCenter" (click)="onClose()">
+  <div class="popup-container"
+       [class.custom-pos]="!isCenter"
+       [style.top]="customStyle.top"
+       [style.left]="customStyle.left"
+       [style.right]="customStyle.right"
+       [style.bottom]="customStyle.bottom"
+       (click)="$event.stopPropagation()">
     <header class="popup-header">
       <div class="header-left">
         <ng-content select="[header-left]"></ng-content>

src/app/components/popup/popup.scss

@@ -6,10 +6,13 @@
   position: fixed;
   inset: 0;
   background-color: transparent;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 100; /* .popup-outlet 내부에서의 상대적 순서 */
+  z-index: 100;
+
+  &.center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
 
 .popup-container {
@@ -26,6 +29,10 @@
 
   border: oklch(0 0 0 / 20%) 2px solid;
   gap: 15px;
+
+  &.custom-pos {
+    position: absolute;
+  }
 }
 
 @keyframes popup-enter {

src/app/components/popup/popup.ts

@@ -1,4 +1,11 @@
-import { Component, output } from '@angular/core';
+import { Component, input, output } from '@angular/core';
+
+export type PopupPosition = {
+  top?: string;
+  left?: string;
+  right?: string;
+  bottom?: string;
+};
 
 @Component({
   selector: 'app-popup',
@@ -7,6 +14,12 @@ import { Component, output } from '@angular/core';
   styleUrl: './popup.scss',
 })
 export class PopupComponent {
+  /**
+   * 팝업의 위치 (기본값은 'center')
+   * 'center' 또는 { top, left, right, bottom } 객체를 받습니다.
+   */
+  position = input<PopupPosition | 'center'>('center');
+
   /**
    * 팝업 닫기 요청 (배경 클릭 또는 닫기 버튼)
    */
@@ -15,4 +28,13 @@ export class PopupComponent {
   onClose() {
     this.closeRequest.emit();
   }
+
+  get isCenter() {
+    return this.position() === 'center';
+  }
+
+  get customStyle() {
+    const pos = this.position();
+    return pos === 'center' ? {} : pos;
+  }
 }