Pinback-Team · jllee000 · Sep 13, 2025 · Sep 11, 2025 · Sep 11, 2025 · Sep 11, 2025
diff --git a/apps/extension/popup.html b/apps/extension/popup.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <title>PinBack Extension</title>
+    <title>PinBack</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/apps/extension/src/App.tsx b/apps/extension/src/App.tsx
@@ -1,179 +1,43 @@
 import './App.css';
-import {
-  InfoBox,
-  Button,
-  Textarea,
-  DateTime,
-  Switch,
-  PopupContainer,
-  Dropdown,
-  validateDate, 
-  validateTime
-} from '@pinback/design-system/ui';
-import { useState } from 'react';
+import DuplicatePop from './pages/DuplicatePop';
+import MainPop from './pages/MainPop';
+import { useState, useEffect } from 'react';
+import { useGetArticleSaved } from '@apis/query/queries';
 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 App = () => {
+  const { url } = usePageMeta();
+  const { data: isSaved } = useGetArticleSaved(url);
 
-  const handleDateChange = (value: string) => {
-    setDate(value);
-    setDateError(validateDate(value));
-  };
+  const [isDuplicatePop, setIsDuplicatePop] = useState(false);
+  const [mainPopType, setMainPopType] = useState<"add" | "edit">("add");
 
-  const handleTimeChange = (value: string) => {
-    setTime(value);
-    setTimeError(validateTime(value));
-  };
+  useEffect(() => {
+    if (isSaved?.data) {
+      setIsDuplicatePop(true);
+    }
+  }, [isSaved]);
 
-  // 스위치
-  const handleSwitchChange = (checked: boolean) => {
-    setIsRemindOn(checked);
+  const handleDuplicateLeftClick = () => {
+    setIsDuplicatePop(false);
+    setMainPopType("edit");
   };
 
-  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 handleDuplicateRightClick = () => {
+    window.location.href = "/dashboard";
   };
-  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="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>
+    <>
+      {isDuplicatePop ? (
+        <DuplicatePop
+          onLeftClick={handleDuplicateLeftClick}
+          onRightClick={handleDuplicateRightClick}
+        />
+      ) : (
+        <MainPop type={mainPopType} savedData={isSaved?.data}/>
+      )}
+    </>
   );
 };
 

diff --git a/apps/extension/src/apis/axios.ts b/apps/extension/src/apis/axios.ts
@@ -0,0 +1,68 @@
+import apiRequest from "./axiosInstance";
+export interface PostArticleRequest {
+  url: string;
+  categoryId: number;
+  memo?: string | null;
+  remindTime?: string | null; 
+}
+
+export const postArticle = async (data: PostArticleRequest) => {
+  const response = await apiRequest.post("/api/v1/articles", data);
+  return response.data;
+};
+
+
+export interface postSignupRequest {
+  email: string;
+  remindDefault: string
+  fcmToken: string;
+}
+
+export const postSignup = async (data: postSignupRequest) => {
+  const response = await apiRequest.post("/api/v1/auth/signup", data);
+  return response.data;
+};
+
+export const getCategoriesExtension = async () => {
+  const response = await apiRequest.get("/api/v1/categories/extension");
+  return response.data;
+};
-export const getCategoriesExtension = async () => {
-  const response = await apiRequest.get("/api/v1/categories/extension");
-  return response.data;
-};
+export const getCategoriesExtension = async () => {
+  const { data }  = await apiRequest.get("/api/v1/categories/extension");
+  return data;
+};
-export const getCategoriesExtension = async () => {
-  const response = await apiRequest.get("/api/v1/categories/extension");
-  return response.data;
-};
+export const getCategoriesExtension = async () => {
+  const { data }  = await apiRequest.get("/api/v1/categories/extension");
+  return data;
+};
+
+export interface postCategoriesRequest {
+  categoryName: string;
+}
+
+export const postCategories = async (data: postCategoriesRequest) => {
+  const response = await apiRequest.post("/api/v1/categories", data);
+  return response.data;
+}
+
+export const getRemindTime = async () => {
+  const now = new Date().toISOString().split(".")[0]; 
+
+  const response = await apiRequest.get("/api/v1/users/remind-time", {
+    params: { now },
+  });
+
+  return response.data;
+};
-export const getRemindTime = async () => {
-  const now = new Date().toISOString().split(".")[0]; 
-
-  const response = await apiRequest.get("/api/v1/users/remind-time", {
-    params: { now },
-  });
-
-  return response.data;
-};
+export const getRemindTime = async () => {
+  const now = new Date().toISOString(); // 예: 2025-09-12T03:21:45.123Z
+
+  const response = await apiRequest.get("/api/v1/users/remind-time", {
+    params: { now },
+  });
+
+  return response.data;
+};
-export const getRemindTime = async () => {
-  const now = new Date().toISOString().split(".")[0]; 
-
-  const response = await apiRequest.get("/api/v1/users/remind-time", {
-    params: { now },
-  });
-
-  return response.data;
-};
+export const getRemindTime = async () => {
+  const now = new Date().toISOString(); // 예: 2025-09-12T03:21:45.123Z
+
+  const response = await apiRequest.get("/api/v1/users/remind-time", {
+    params: { now },
+  });
+
+  return response.data;
+};
+
+
+export const getArticleSaved=async (url:string) => {
+  const response = await apiRequest.get("/api/v1/articles/saved", {
+    params: { url },
+  });
+  return response.data;
+}
+
+export interface PutArticleRequest {
+  categoryId: number;
+  memo: string;
+  now: string;
+  remindTime: string | null;
+}
+
+export const putArticle = async (articleId: number, data: PutArticleRequest) => {
+  const response = await apiRequest.put(`/api/v1/articles/${articleId}`, data);
+  return response.data;
+};
diff --git a/apps/extension/src/apis/query/queries.ts b/apps/extension/src/apis/query/queries.ts
@@ -0,0 +1,48 @@
+import { useMutation,useQuery } from "@tanstack/react-query";
+import { postArticle, PostArticleRequest,postSignup, postSignupRequest, getCategoriesExtension, postCategories, postCategoriesRequest, getRemindTime, getArticleSaved,putArticle, PutArticleRequest} from "@apis/axios";
+
+export const usePostArticle = () => {
+  return useMutation({
+    mutationFn: (data: PostArticleRequest) => postArticle(data),
+  });
+};
+
+export const usePostSignup = () => {
+  return useMutation({
+    mutationFn: (data: postSignupRequest) => postSignup(data)
+  });
+}
+
+export const usePostCategories = () => {
+  return useMutation({
+    mutationFn: (data: postCategoriesRequest) => postCategories(data),
+  });
+}
+export const useGetCategoriesExtension = () => {
+  return useQuery({
+    queryKey: ["categoriesExtension"],
+    queryFn: getCategoriesExtension,
+  });
+};
+
+export const useGetRemindTime = () => {
+  return useQuery({
+    queryKey: ["remindTime"],
+    queryFn: getRemindTime,
+  });
+}
+
+export const useGetArticleSaved = (url:string) => {
+  return useQuery({
+    queryKey: ["articleSaved", url],
+    queryFn: () => getArticleSaved(url),
+    enabled: !!url, 
+  });
+}
-export const useGetArticleSaved = (url:string) => {
-  return useQuery({
-    queryKey: ["articleSaved", url],
-    queryFn: () => getArticleSaved(url),
-    enabled: !!url, 
-  });
-}
+export const useGetArticleSaved = (url:string) => {
+  const isHttpUrl = /^https?:\/\//i.test(url);
+  return useQuery({
+    queryKey: ["articleSaved", url],
+    queryFn: () => getArticleSaved(url),
+    enabled: !!url && isHttpUrl,
+    refetchOnWindowFocus: false,
+    staleTime: 30 * 1000,
+  });
+}
-export const useGetArticleSaved = (url:string) => {
-  return useQuery({
-    queryKey: ["articleSaved", url],
-    queryFn: () => getArticleSaved(url),
-    enabled: !!url, 
-  });
-}
+export const useGetArticleSaved = (url:string) => {
+  const isHttpUrl = /^https?:\/\//i.test(url);
+  return useQuery({
+    queryKey: ["articleSaved", url],
+    queryFn: () => getArticleSaved(url),
+    enabled: !!url && isHttpUrl,
+    refetchOnWindowFocus: false,
+    staleTime: 30 * 1000,
+  });
+}
+
+export const usePutArticle = () => {
+  return useMutation({
+    mutationFn: ({ articleId, data }: { articleId: number; data: PutArticleRequest }) =>
+      putArticle(articleId, data)
+  });
+};
diff --git a/apps/extension/src/hooks/useCategoryManager.ts b/apps/extension/src/hooks/useCategoryManager.ts
@@ -0,0 +1,58 @@
+import { useState } from "react";
+import { usePostCategories, useGetCategoriesExtension } from "@apis/query/queries";
+import type { Category } from "@shared-types/types";
+import { AxiosError } from "axios";
+
+export const useCategoryManager = () => {
+  const { data: categoryData } = useGetCategoriesExtension();
+  const { mutate: postCategories } = usePostCategories();
+
+  const [categoryTitle, setCategoryTitle] = useState("");
+  const [isPopError, setIsPopError] = useState(false);
+  const [errorTxt, setErrorTxt] = useState("");
+
+  const options =
+    categoryData?.data?.categories?.map((c: Category) => c.categoryName) ?? [];
+
+  const saveCategory = (onSuccess?: (category: Category) => void) => {
+    if (categoryTitle.length > 20) {
+      setIsPopError(true);
+      setErrorTxt("20자 이내로 작성해주세요");
+      return;
+    }
+
+    postCategories(
+      { categoryName: categoryTitle },
+      {
+        onSuccess: (res) => {
+          const newCategory: Category = {
+            categoryId: res.data.categoryId,
+            categoryName: categoryTitle,
+            categoryColor: res.data.categoryColor ?? "#000000",
+          };
+          onSuccess?.(newCategory); 
+          resetPopup();
+        },
+        onError: (err: AxiosError<{ code: string; message: string }>) => {
+          alert(err.response?.data?.message ?? "카테고리 추가 중 오류가 발생했어요 😢");
+        },
+      }
+    );
+  };
+
+  const resetPopup = () => {
+    setCategoryTitle("");
+    setIsPopError(false);
+    setErrorTxt("");
+  };
+
+  return {
+    options,
+    categoryTitle,
+    setCategoryTitle,
+    isPopError,
+    errorTxt,
+    saveCategory,
+    resetPopup,
+  };
+};