[web-filter] 간단 UI

projects/web-filter/src/components/Button/Button.module.css

@@ -0,0 +1,26 @@
+.Button {
+  padding: 7px 18px;
+  font-size: 11px;
+  line-height: 120%;
+  border-radius: 100px;
+  transition: 0.1s ease;
+  cursor: pointer;
+}
+
+/* theme */
+.Button.blue {
+  color: white;
+  background-color: rgba(11, 153, 255, 1);
+}
+.Button.gray {
+  color: rgba(78, 78, 78, 1);
+  background-color: rgba(180, 180, 180, 1);
+}
+
+/* interaction */
+.Button:hover {
+  opacity: 0.7;
+}
+.Button:active {
+  opacity: 0.5;
+}

projects/web-filter/src/components/Button/Button.tsx

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+
+import styles from './Button.module.css';
+
+type ButtonProps = PropsWithChildren<{
+  theme?: 'blue' | 'gray';
+}>;
+
+export const Button = ({ children, theme = 'blue' }: ButtonProps) => {
+  return (
+    <button className={`${styles.Button} ${styles[theme]}`}>{children}</button>
+  );
+};

projects/web-filter/src/components/Header/Header.module.css

@@ -0,0 +1,15 @@
+.Header {
+  padding-left: 21px;
+  padding-right: 14px;
+  flex: 0 0 51px;
+  display: flex;
+  align-items: center;
+}
+
+.title {
+  flex: 1 1 auto;
+  font-size: 17px;
+  font-weight: 400;
+  line-height: 20px;
+  color: white;
+}

projects/web-filter/src/components/Header/Header.tsx

@@ -0,0 +1,9 @@
+import styles from './Header.module.css';
+
+export const Header = () => {
+  return (
+    <header className={styles.Header}>
+      <h1 className={styles.title}>SVG filter for Web</h1>
+    </header>
+  );
+};

projects/web-filter/src/content-old.tsx

@@ -0,0 +1,20 @@
+import { createRoot } from 'react-dom/client';
+
+import { WaveFilter } from './filters/WaveFilter';
+
+const app = document.createElement('div');
+
+app.id = 'web-filter-app';
+app.style.display = 'none';
+
+document.body.appendChild(app);
+
+createRoot(app).render(
+  <svg>
+    <defs>
+      <WaveFilter />
+    </defs>
+  </svg>,
+);
+
+document.body.style.filter = 'url(#filter)';

projects/web-filter/src/content.tsx

@@ -1,20 +1,3 @@
-import { createRoot } from 'react-dom/client';
+import { popup } from './functions/popup';
 
-import { WaveFilter } from './filters/WaveFilter';
-
-const app = document.createElement('div');
-
-app.id = 'web-filter-app';
-app.style.display = 'none';
-
-document.body.appendChild(app);
-
-createRoot(app).render(
-  <svg>
-    <defs>
-      <WaveFilter />
-    </defs>
-  </svg>,
-);
-
-document.body.style.filter = 'url(#filter)';
+popup.open();

projects/web-filter/src/functions/constant.ts

@@ -0,0 +1 @@
+export const POPUP_ID = 'web-filter-popup';

projects/web-filter/src/functions/popup.tsx

@@ -0,0 +1,17 @@
+import { createRoot } from 'react-dom/client';
+
+import { Popup } from '../pages/Popup/Popup';
+import { POPUP_ID } from './constant';
+
+// open & close
+
+const open = () => {
+  if (document.querySelector(`#${POPUP_ID}`) !== null) return;
+  const app = document.createElement('div');
+  app.id = POPUP_ID;
+  document.body.appendChild(app);
+  createRoot(app).render(<Popup />);
+};
+const close = () => document.querySelector(`#${POPUP_ID}`)?.remove();
+
+export const popup = { open, close };

projects/web-filter/src/functions/popupNative.tsx

@@ -0,0 +1,5 @@
+import { createRoot } from 'react-dom/client';
+
+import { PopupNative } from '../pages/PopupNative/PopupNative';
+
+createRoot(document.body).render(<PopupNative />);

projects/web-filter/src/manifest-content.json

@@ -0,0 +1,21 @@
+{
+  "{{chrome}}.manifest_version": 3,
+  "{{firefox}}.manifest_version": 2,
+  "icons": {
+    "16": "icon/16.png",
+    "32": "icon/32.png",
+    "48": "icon/48.png",
+    "96": "icon/96.png",
+    "128": "icon/128.png"
+  },
+  "background": {
+    "{{chrome}}.service_worker": "src/background.ts",
+    "{{firefox}}.scripts": ["src/background.ts"]
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["src/content.tsx"]
+    }
+  ]
+}

projects/web-filter/src/manifest-native.json

@@ -0,0 +1,21 @@
+{
+  "{{chrome}}.manifest_version": 3,
+  "{{firefox}}.manifest_version": 2,
+  "icons": {
+    "16": "icon/16.png",
+    "32": "icon/32.png",
+    "48": "icon/48.png",
+    "96": "icon/96.png",
+    "128": "icon/128.png"
+  },
+  "{{chrome}}.action": {
+    "default_popup": "src/popup.html"
+  },
+  "{{firefox}}.browser_action": {
+    "default_popup": "src/popup.html"
+  },
+  "background": {
+    "{{chrome}}.service_worker": "src/background.ts",
+    "{{firefox}}.scripts": ["src/background.ts"]
+  }
+}

projects/web-filter/src/pages/Popup/Popup.module.css

@@ -0,0 +1,71 @@
+.Popup {
+  position: fixed;
+  top: 4px;
+  right: 8px;
+  width: 355px;
+  height: 451px;
+  background-color: rgba(17, 17, 17, 1);
+  border-radius: 16px;
+  z-index: 99999;
+  box-shadow: 3px 3px 11px rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+  animation: open 0.3s ease;
+}
+
+.Popup .slider {
+  display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.Popup .filterList {
+  display: flex;
+  padding: 12px 16px;
+  gap: 9px;
+}
+.Popup .filterItem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 73px;
+  gap: 6px;
+  transition: 0.1s ease;
+  cursor: pointer;
+}
+.Popup .filterItem:hover {
+  opacity: 0.7;
+}
+.Popup .filterItem:active {
+  opacity: 0.5;
+}
+.Popup .filterItem img {
+  width: 100%;
+}
+.Popup .filterName {
+  font-size: 10px;
+  color: white;
+  font-weight: 400;
+}
+
+.Popup .divider {
+  background-color: rgba(51, 51, 51, 1);
+  height: 1px;
+  margin: 0 10px;
+}
+.Popup .footer {
+  padding: 17px 22px 22px 22px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 9px;
+}
+
+@keyframes open {
+  0% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

projects/web-filter/src/pages/Popup/Popup.tsx

@@ -0,0 +1,31 @@
+import sampleSrc from '../../assets/sample-image.png';
+// static folder 사용 불가능
+import { Button } from '../../components/Button/Button';
+import { Header } from '../../components/Header/Header';
+import styles from './Popup.module.css';
+
+export const Popup = () => {
+  return (
+    <article className={styles.Popup}>
+      <Header />
+      <img src={sampleSrc} />
+      <div className={styles.slider}>
+        <div className={styles.filterList}>
+          {['적록색맹', '필름카메라', '유리창', '빛 번짐', '기타'].map(
+            (filterName) => (
+              <div key={filterName} className={styles.filterItem}>
+                <img src={sampleSrc} />
+                <h3 className={styles.filterName}>{filterName}</h3>
+              </div>
+            ),
+          )}
+        </div>
+      </div>
+      <div className={styles.divider} />
+      <footer className={styles.footer}>
+        <Button theme="gray">필터 초기화</Button>
+        <Button>적용하기</Button>
+      </footer>
+    </article>
+  );
+};

projects/web-filter/src/pages/PopupNative/PopupNative.module.css

@@ -0,0 +1,62 @@
+.PopupNative {
+  display: flex;
+  flex-direction: column;
+  animation: open 0.3s ease;
+}
+
+.PopupNative .slider {
+  display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.PopupNative .filterList {
+  display: flex;
+  padding: 12px 16px;
+  gap: 9px;
+}
+.PopupNative .filterItem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 73px;
+  gap: 6px;
+  transition: 0.1s ease;
+  cursor: pointer;
+}
+.PopupNative .filterItem:hover {
+  opacity: 0.7;
+}
+.PopupNative .filterItem:active {
+  opacity: 0.5;
+}
+.PopupNative .filterItem img {
+  width: 100%;
+}
+.PopupNative .filterName {
+  font-size: 10px;
+  color: white;
+  font-weight: 400;
+}
+
+.PopupNative .divider {
+  background-color: rgba(51, 51, 51, 1);
+  height: 1px;
+  margin: 0 10px;
+}
+.PopupNative .footer {
+  padding: 17px 22px 22px 22px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 9px;
+}
+
+@keyframes open {
+  0% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}