Api(extension): 익스텐션 api (수정,생성) 연결 및 페이지 구조 수정

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}/>
+      )}
+    </>
   );
 };
 

apps/extension/src/apis/axiosInstance.ts

@@ -6,7 +6,25 @@
     'Content-Type': 'application/json',
   },
 });
-
+localStorage.setItem("token", 'eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJwaW5iYWNrIiwiaWQiOiI4NjA1NTBiMS1kZDBhLTQyMjMtYjM4OS0wNTEwYWU3MmNkMzUiLCJzdWIiOiJBY2Nlc3NUb2tlbiIsImV4cCI6MTc1NzYyOTAyMn0.qm-zqkuG2rpLlbUKJd9lUdh-4SStittgzXiwBeUMzA6NuKh_aEJmgoVInhUU-VSFtTlXP8eO9Ivao5K29LCRJA');
+chrome.storage.local.set(
+  { token: 'eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJwaW5iYWNrIiwiaWQiOiI4NjA1NTBiMS1kZDBhLTQyMjMtYjM4OS0wNTEwYWU3MmNkMzUiLCJzdWIiOiJBY2Nlc3NUb2tlbiIsImV4cCI6MTc1NzYyOTAyMn0.qm-zqkuG2rpLlbUKJd9lUdh-4SStittgzXiwBeUMzA6NuKh_aEJmgoVInhUU-VSFtTlXP8eO9Ivao5K29LCRJA',
+    email:'test@gmail2.com'
+   },
+  () => {
+    console.log("토큰 저장 완료 ✅");
+  }
+);
+// apiRequest.interceptors.request.use((config) => {
+//   // signup은 토큰 필요 없음
+//   if (config.url !== "/auth/signup") {
+//     const token = localStorage.getItem("accessToken"); 
+//     if (token) {
+//       config.headers.Authorization = `Bearer ${token}`;
+//     }
+//   }
+//   return config;
+// });
 const fetchToken = async (email?: string) => {
   const response = await axios.get(
     `${import.meta.env.VITE_BASE_URL}/api/v1/auth/token`,
@@ -16,7 +34,7 @@
   );
   const newToken = response.data.data.token;
   chrome.storage.local.set({ token: newToken }, () => {
     console.log('Token re-saved to chrome storage');
   });
   return newToken;
 };
@@ -72,3 +90,71 @@
 );
 
 export default apiRequest;
+
+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 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 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;
+};

apps/extension/src/apis/query/queries.ts

@@ -0,0 +1,72 @@
+import { useMutation,useQuery } from "@tanstack/react-query";
+import { postArticle, PostArticleRequest,postSignup, postSignupRequest, getCategoriesExtension, postCategories, postCategoriesRequest, getRemindTime, getArticleSaved,putArticle, PutArticleRequest} from "../axiosInstance";
+
+export const usePostArticle = () => {
+  return useMutation({
+    mutationFn: (data: PostArticleRequest) => postArticle(data),
+    onSuccess: (data) => {
+      console.log("저장 성공:", data);
+    },
+    onError: (error) => {
+      console.error("저장 실패:", error);
+    },
+  });
+};
+
+export const usePostSignup = () => {
+  return useMutation({
+    mutationFn: (data: postSignupRequest) => postSignup(data),
+    onSuccess: (data) => {
+      console.log("회원가입 성공:", data);
+    },
+    onError: (error) => {
+      console.error("회원가입 실패:", error);
+    },
+  });
+}
+
+export const usePostCategories = () => {
+  return useMutation({
+    mutationFn: (data: postCategoriesRequest) => postCategories(data),
+    onSuccess: (data) => {
+      console.log("카테고리 저장", data);
+    },
+    onError: (error) => {
+      console.error("카테고리 저장 실패", error);
+    },
+  });
+}
+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 usePutArticle = () => {
+  return useMutation({
+    mutationFn: ({ articleId, data }: { articleId: number; data: PutArticleRequest }) =>
+      putArticle(articleId, data),
+    onSuccess: (data) => {
+      console.log("아티클 수정 성공:", data);
+    },
+    onError: (error) => {
+      console.error("아티클 수정 실패:", error);
+    },
+  });
+};