Pinback-Team · jllee000 · Sep 10, 2025 · Sep 7, 2025 · Sep 7, 2025 · Sep 7, 2025
diff --git a/apps/extension/manifest.json b/apps/extension/manifest.json
@@ -4,16 +4,17 @@
   "version": "0.1.0",
   "action": { "default_popup": "popup.html" },
   "icons": {
-    "128": "icon128.png"
+    "128": "icon.png"
   },
+  "permissions": ["activeTab", "tabs", "storage", "scripting", "bookmarks"],
   "background": {
-    "service_worker": "src/background.ts",
+    "service_worker": "src/background.js",
     "type": "module"
   },
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
-      "js": ["src/content.ts"]
+      "js": ["src/content.js"]
     }
   ],
   "host_permissions": ["<all_urls>"]

diff --git a/apps/extension/popup.html b/apps/extension/popup.html
@@ -1,12 +1,11 @@
 <!doctype html>
-<html>
+<html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="UTF-8" />
+    <title>PinBack Extension</title>
   </head>
   <body>
     <div id="root"></div>
-    <!-- src 경로는 프로젝트 루트 기준으로 모듈 import -->
     <script type="module" src="/src/popup.tsx"></script>
   </body>
 </html>
diff --git a/apps/extension/public/icon.png b/apps/extension/public/icon.png
diff --git a/apps/extension/public/icon128.png b/apps/extension/public/icon128.png
diff --git a/apps/extension/src/App.tsx b/apps/extension/src/App.tsx
@@ -1,10 +1,177 @@
 import './App.css';
-
+import {
+  InfoBox,
+  Button,
+  Textarea,
+  DateTime,
+  Switch,
+  PopupContainer,
+  Dropdown,
+  validateDate, 
+  validateTime
+} from '@pinback/design-system/ui';
+import { useState } from 'react';
+import { usePageMeta } from './hooks/usePageMeta';
+import { useSaveBookmark } from './hooks/useSaveBookmarks';
+import { Icon } from '@pinback/design-system/icons';
 const App = () => {
+  const [isRemindOn, setIsRemindOn] = useState(false);
+  const [memo, setMemo] = useState('');
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+
+  const [selected, setSelected] = useState<string | null>(null);
+  // 시간,날짜 검사 구간!
+  const [date, setDate] = useState('2025.10.10');
+  const [time, setTime] = useState('19:00');
+  const [dateError, setDateError] = useState('');
+  const [timeError, setTimeError] = useState('');
+
+  const handleDateChange = (value: string) => {
+    setDate(value);
+    setDateError(validateDate(value));
+  };
+
+  const handleTimeChange = (value: string) => {
+    setTime(value);
+    setTimeError(validateTime(value));
+  };
+
+  // 스위치
+  const handleSwitchChange = (checked: boolean) => {
+    setIsRemindOn(checked);
+  };
+
+  const { url, title, description, imgUrl } = usePageMeta();
+  const { save } = useSaveBookmark();
+
+  const handleSave = async () => {
+    save({
+      url,
+      title,
+      description,
+      imgUrl,
+      memo,
+      isRemindOn,
+      selectedCategory: selected,
+      date: isRemindOn ? date : null,
+      time: isRemindOn ? time : null,
+    });
+    const saveData = {
+      url,
+      title,
+      description,
+      imgUrl,
+      memo,
+      isRemindOn,
+      selectedCategory: selected,
+      date: isRemindOn ? date : null,
+      time: isRemindOn ? time : null,
+      createdAt: new Date().toISOString(),
+    };
+    console.log('저장된 데이터:', saveData);
+  };
-  const handleSave = async () => {
-    save({
-      url,
-      title,
-      description,
-      imgUrl,
-      memo,
-      isRemindOn,
-      selectedCategory: selected,
-      date: isRemindOn ? date : null,
-      time: isRemindOn ? time : null,
-    });
-    const saveData = {
-      url,
-      title,
-      description,
-      imgUrl,
-      memo,
-      isRemindOn,
-      selectedCategory: selected,
-      date: isRemindOn ? date : null,
-      time: isRemindOn ? time : null,
-      createdAt: new Date().toISOString(),
-    };
-    console.log('저장 데이터:', saveData);
-  };
+  const handleSave = async () => {
+    if (isRemindOn) {
+      const dErr = validateDate(date);
+      const tErr = validateTime(time);
+      setDateError(dErr);
+      setTimeError(tErr);
+      if (dErr || tErr) return;
+    }
+    await save({
+      url,
+      title,
+      description,
+      imgUrl,
+      memo,
+      isRemindOn,
+      selectedCategory: selected,
+      date: isRemindOn ? date : null,
+      time: isRemindOn ? time : null,
+    });
+  };
-  const handleSave = async () => {
-    save({
-      url,
-      title,
-      description,
-      imgUrl,
-      memo,
-      isRemindOn,
-      selectedCategory: selected,
-      date: isRemindOn ? date : null,
-      time: isRemindOn ? time : null,
-    });
-    const saveData = {
-      url,
-      title,
-      description,
-      imgUrl,
-      memo,
-      isRemindOn,
-      selectedCategory: selected,
-      date: isRemindOn ? date : null,
-      time: isRemindOn ? time : null,
-      createdAt: new Date().toISOString(),
-    };
-    console.log('저장 데이터:', saveData);
-  };
+  const handleSave = async () => {
+    if (isRemindOn) {
+      const dErr = validateDate(date);
+      const tErr = validateTime(time);
+      setDateError(dErr);
+      setTimeError(tErr);
+      if (dErr || tErr) return;
+    }
+    await save({
+      url,
+      title,
+      description,
+      imgUrl,
+      memo,
+      isRemindOn,
+      selectedCategory: selected,
+      date: isRemindOn ? date : null,
+      time: isRemindOn ? time : null,
+    });
+  };
+  const [categoryTitle, setCategoryTitle] = useState('');
+  const [isPopError, setIsPopError] = useState(false);
+  const [errorTxt, setErrorTxt] = useState('');
+  const saveCategory = () => {
+    if (categoryTitle.length >20){
+      setIsPopError(true);
+      setErrorTxt('20자 이내로 작성해주세요');
+    } else{
+       setIsPopupOpen(false);
+    }
+  }
+
+
   return (
     <div className="App">
-      <div className="flex h-[50rem] w-[26rem] items-center justify-center bg-blue-500 text-2xl text-white">
-        자 핀백 앱잼 시작~오늘은 7월 7일임~
+      <div className="relative flex h-[56.8rem] w-[31.2rem] items-center justify-center">
+        {isPopupOpen && (
+          <PopupContainer
+            isOpen={isPopupOpen}
+            onClose={() => setIsPopupOpen(false)}
+            type="input"
+            title="카테고리 추가하기"
+            left="취소"
+            right="확인"
+            inputValue={categoryTitle}
+            isError={isPopError}
+            errortext={errorTxt}
+            onInputChange={setCategoryTitle}
+            placeholder="카테고리 제목을 입력해주세요"
+            onLeftClick={() => setIsPopupOpen(false)}
+            onRightClick={saveCategory}
+          />
+        )}
+        <div className="flex flex-col justify-between gap-[1.6rem] rounded-[12px] bg-white px-[3.2rem] py-[2.4rem] text-black">
+          <div className="mr-auto">
+            <Icon name="main_logo" width={72} height={20} />
+          </div>
+
+          <InfoBox
+            title={title || '제목 없음'}
+            source={description || '웹페이지'}
+            imgUrl={imgUrl}
+          />
+
+          <div>
+            <p className="caption1-sb mb-[0.4rem]">카테고리</p>
+            <Dropdown
+              options={['옵션1', '옵션2']}
+              selectedValue={selected}
+              onChange={(value) => setSelected(value)}
+              placeholder="선택해주세요"
+              onAddItem={() => setIsPopupOpen(true)}
+              addItemLabel="추가하기"
+            />
+          </div>
+
+          <div>
+            <p className="caption1-sb mb-[0.4rem]">메모</p>
+            <Textarea
+              maxLength={100}
+              placeholder="나중에 내가 꺼내줄 수 있게 살짝 적어줘!"
+              onChange={(e) => setMemo(e.target.value)}
+            />
+          </div>
+
+          <div>
+            <div className="mb-[0.4rem] flex items-center justify-between">
+              <p className="caption1-sb">리마인드</p>
+              <Switch
+                onCheckedChange={handleSwitchChange}
+                checked={isRemindOn}
+              />
+            </div>
+
+            <div className="mb-[0.4rem] flex items-center justify-between gap-[0.8rem]">
+              <DateTime
+                type="date"
+                state={
+                  dateError ? 'error' : isRemindOn ? 'default' : 'disabled'
+                }
+                value={date}
+                onChange={handleDateChange}
+              />
+              <DateTime
+                type="time"
+                state={
+                  timeError ? 'error' : isRemindOn ? 'default' : 'disabled'
+                }
+                value={time}
+                onChange={handleTimeChange}
+              />
+            </div>
+
+            {/* 에러 메시지 출력 */}
+            {dateError && <p className="body3-r text-error">{dateError}</p>}
+            {timeError && <p className="body3-r text-error">{timeError}</p>}
+          </div>
+
+          <Button size="medium" onClick={handleSave}>
+            저장
+          </Button>
+        </div>
       </div>
     </div>
   );

diff --git a/apps/extension/src/assets/logo.svg b/apps/extension/src/assets/logo.svg
diff --git a/apps/extension/src/background.ts b/apps/extension/src/background.ts
@@ -1 +1,39 @@
-console.log("백그라운드 기능")
+console.log('백그라운드 기능');
+chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
+  if (message.type === 'FETCH_OG_META') {
+    fetch(message.url)
+      .then((res) => res.text())
+      .then((html) => {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+
+        const getMeta = (prop) =>
+          doc
+            .querySelector(`meta[property="${prop}"]`)
+            ?.getAttribute('content') || '';
+
+        const makeAbsoluteUrl = (base, img) => {
+          try {
+            return img ? new URL(img, base).href : '';
+          } catch {
+            return img;
+          }
+        };
+
+        const image = getMeta('og:image');
+
+        sendResponse({
+          title: getMeta('og:title'),
+          description: getMeta('og:description'),
+          siteName: getMeta('og:site_name'),
+          image: makeAbsoluteUrl(message.url, image),
+          url: getMeta('og:url') || message.url,
+        });
+      })
+      .catch((err) => {
+        console.error('OG fetch 실패:', err);
+        sendResponse(null);
+      });
+    return true; // async 응답
+  }
+});
diff --git a/apps/extension/src/content.ts b/apps/extension/src/content.ts
@@ -1 +1 @@
-console.log("컨텐츠 스크립트")
+console.log('컨텐츠 스크립트 로드됨');
diff --git a/apps/extension/src/hooks/usePageMeta.ts b/apps/extension/src/hooks/usePageMeta.ts
@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+import { OgImageFetcher } from '@utils/OGFetch';
+
+export interface PageMeta {
+  url: string;
+  title: string;
+  description: string;
+  imgUrl: string;
+}
+
+export const usePageMeta = () => {
+  const [meta, setMeta] = useState<PageMeta>({
+    url: '',
+    title: '',
+    description: '',
+    imgUrl: '',
+  });
+
+  useEffect(() => {
+    chrome.tabs.query({ active: true, currentWindow: true }, async (tabs) => {
+      const activeTab = tabs[0];
+      if (!activeTab?.url) return;
+
+      const currentUrl = activeTab.url;
+
+      chrome.storage.local.set({ bookmarkedUrl: currentUrl });
+
+      const imageUrl = await OgImageFetcher({ url: currentUrl });
+      // 개발중에는 잠시 주석처리
+      //   const isInternalChromePage =
+      //     /^chrome:\/\//.test(currentUrl) ||
+      //     /^edge:\/\//.test(currentUrl) ||
+      //     /^about:/.test(currentUrl);
+      //   // chrome-extension:// 은 내부 페이지로 취급하지 않음
+
+      //   if (isInternalChromePage || !imageUrl?.title) {
+      //     window.close();
+      //     return;
+      //   }
+
+      const newMeta = {
+        url: currentUrl,
+        title: imageUrl.title ?? '',
+        description: imageUrl.description ?? '',
+        imgUrl: imageUrl.image ?? '',
+      };
+
+      setMeta(newMeta);
+
+      chrome.storage.local.set({ titleSave: newMeta.title });
+    });
+  }, []);
+
+  return meta;
+};
diff --git a/apps/extension/src/hooks/useSaveBookmarks.ts b/apps/extension/src/hooks/useSaveBookmarks.ts
@@ -0,0 +1,52 @@
+interface SaveBookmarkParams {
+  url: string;
+  title: string;
+  description: string;
+  imgUrl: string;
+  memo: string;
+  isRemindOn: boolean;
+  selectedCategory: string | null;
+  date: string | null;
+  time: string | null;
+}
+
+export const useSaveBookmark = () => {
+  const save = async (params: SaveBookmarkParams) => {
+    try {
+      const saveData = {
+        ...params,
+        createdAt: new Date().toISOString(),
+      };
+
+      console.log('저장 데이터:', saveData);
+
+      const result = await new Promise<{ bookmarks?: any[] }>((resolve) => {
+        chrome.storage.local.get(['bookmarks'], (items) => resolve(items));
+      });
+
+      const bookmarks = result.bookmarks || [];
+      bookmarks.push(saveData);
+
+      await new Promise<void>((resolve) => {
+        chrome.storage.local.set({ bookmarks }, resolve);
+      });
+
+      chrome.bookmarks.create(
+        {
+          parentId: '1',
+          title: params.title || params.url,
+          url: params.url,
+        },
+        (newBookmark) => {
+          console.log('크롬 북마크바에 저장 완료:', newBookmark);
+        }
+      );
+
+    //  window.close();
+    } catch (error) {
+      console.error('저장 중 오류:', error);
+    }
+  };
+
+  return { save };
+};
diff --git a/apps/extension/src/popup.tsx b/apps/extension/src/popup.tsx
@@ -1,5 +1,3 @@
-// src/popup.tsx
-import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -14,4 +12,4 @@ if (rootEl) {
   );
 } else {
   console.error('❌ root element not found!');
-}
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		console.log("컨텐츠 스크립트")
		console.log('컨텐츠 스크립트 로드됨');