From 213a1d5fc00c1feefad8fc0320b337bc28e48522 Mon Sep 17 00:00:00 2001
From: copecone <controld3785@gmail.com>
Date: Tue, 17 Mar 2026 08:14:41 +0900
Subject: [PATCH] Add Popup Component

---
 src/app/components/popup/popup.html | 13 +++++++++++++
 src/app/components/popup/popup.scss |  0
 src/app/components/popup/popup.ts   | 16 ++++++++++++++++
 src/app/ui/settings/popup.html      | 16 ++++++++++++++++
 src/app/ui/settings/popup.scss      |  0
 src/app/ui/settings/settings.ts     | 12 ++++++++++++
 src/styles.scss                     |  1 +
 7 files changed, 58 insertions(+)
 create mode 100644 src/app/components/popup/popup.html
 create mode 100644 src/app/components/popup/popup.scss
 create mode 100644 src/app/components/popup/popup.ts
 create mode 100644 src/app/ui/settings/popup.html
 create mode 100644 src/app/ui/settings/popup.scss
 create mode 100644 src/app/ui/settings/settings.ts

diff --git a/src/app/components/popup/popup.html b/src/app/components/popup/popup.html
new file mode 100644
index 0000000..37d6140
--- /dev/null
+++ b/src/app/components/popup/popup.html
@@ -0,0 +1,13 @@
+<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="popup-body">
+  <ng-content></ng-content>
+</div>
diff --git a/src/app/components/popup/popup.scss b/src/app/components/popup/popup.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/popup/popup.ts b/src/app/components/popup/popup.ts
new file mode 100644
index 0000000..dff6d64
--- /dev/null
+++ b/src/app/components/popup/popup.ts
@@ -0,0 +1,16 @@
+import { Component, input, model, output } from '@angular/core';
+import { Dropdown } from '../../components/dropdown/dropdown';
+import { Switch } from '../../components/switch/switch';
+
+@Component({
+  selector: 'popup',
+  templateUrl: './popup.html',
+  styleUrl: './popup.scss',
+})
+export class PopupComponent {
+  close = output<void>();
+
+  onClose() {
+    this.close.emit()
+  }
+}
diff --git a/src/app/ui/settings/popup.html b/src/app/ui/settings/popup.html
new file mode 100644
index 0000000..cd30928
--- /dev/null
+++ b/src/app/ui/settings/popup.html
@@ -0,0 +1,16 @@
+<!--<popup (close)="handleClose()">
+  <div header-left class="profile-section">
+    <img [src]="userProfileImg" alt="profile" class="avatar">
+    <span>{{ userName }}</span>
+  </div>
+
+  <div class="settings-content">
+    <label>Language</label>
+    <dropdown [options]="languages"
+              placeholder="Choose Language"></dropdown>
+    <switch></switch>
+
+    <label>Appearance</label>
+
+  </div>
+</popup>-->
diff --git a/src/app/ui/settings/popup.scss b/src/app/ui/settings/popup.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/ui/settings/settings.ts b/src/app/ui/settings/settings.ts
new file mode 100644
index 0000000..71e5b8c
--- /dev/null
+++ b/src/app/ui/settings/settings.ts
@@ -0,0 +1,12 @@
+import { Component, input, model, output } from '@angular/core';
+import { Dropdown } from '../../components/dropdown/dropdown';
+import { Switch } from '../../components/switch/switch';
+import { PopupComponent } from '../../components/popup/popup';
+
+@Component({
+  selector: 'settings-popup',
+  imports: [PopupComponent, Dropdown, Switch],
+  templateUrl: './popup.html',
+  styleUrl: './popup.scss',
+})
+export class SettingsPopup {}
diff --git a/src/styles.scss b/src/styles.scss
index da724a8..56208ef 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -8,5 +8,6 @@ body {
   margin: 0;
 
   overscroll-behavior-x: none;
+  background-color: white;
 }