diff --git a/apps/extension/manifest.json b/apps/extension/manifest.json index a4c956dc..3f14a19b 100644 --- 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": [""], - "js": ["src/content.ts"] + "js": ["src/content.js"] } ], "host_permissions": [""] diff --git a/apps/extension/popup.html b/apps/extension/popup.html index 0be8fd7e..ae786a6c 100644 --- a/apps/extension/popup.html +++ b/apps/extension/popup.html @@ -1,12 +1,11 @@ - + - - + + PinBack Extension
- diff --git a/apps/extension/public/icon.png b/apps/extension/public/icon.png new file mode 100644 index 00000000..0ea85207 Binary files /dev/null and b/apps/extension/public/icon.png differ diff --git a/apps/extension/public/icon128.png b/apps/extension/public/icon128.png deleted file mode 100644 index 1fe8b675..00000000 Binary files a/apps/extension/public/icon128.png and /dev/null differ diff --git a/apps/extension/src/App.tsx b/apps/extension/src/App.tsx index 196b93eb..7d65c95d 100644 --- 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(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 [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 (
-
- 자 핀백 앱잼 시작~오늘은 7월 7일임~ +
+ {isPopupOpen && ( + setIsPopupOpen(false)} + type="input" + title="카테고리 추가하기" + left="취소" + right="확인" + inputValue={categoryTitle} + isError={isPopError} + errortext={errorTxt} + onInputChange={setCategoryTitle} + placeholder="카테고리 제목을 입력해주세요" + onLeftClick={() => setIsPopupOpen(false)} + onRightClick={saveCategory} + /> + )} +
+
+ +
+ + + +
+

카테고리

+ setSelected(value)} + placeholder="선택해주세요" + onAddItem={() => setIsPopupOpen(true)} + addItemLabel="추가하기" + /> +
+ +
+

메모

+