Merge branch 'develop'

Author: guesung

README.md

@@ -3,7 +3,7 @@
    <h1>웹 메모</h1>
    <p>웹 페이지를 읽으며 간편하게 기록하세요</p>
    <div>
-      <img src="https://github.com/user-attachments/assets/f6c29e51-30be-462e-9dcb-108af9dd69dd" alt="화면" />
+      <img src="https://github.com/user-attachments/assets/7cc006e4-846f-4b65-ac27-2dd1b23d449a" alt="화면" />
    </div>
    <br />
 </div>
@@ -33,22 +33,22 @@
 
 ## 📝 주요 기능
 
-1. 📝 **메모**: 웹 페이지에서 기록으로 남기고 싶은 내용을 손쉽게 작성할 수 있어요.
-2. 📊 **사이드 패널**: 웹 페이지의 화면을 방해하지 않고 분리된 사이드 패널에서 편리하게 기록할 수 있어요
-3. 📚 **페이지 요약**: ChatGPT가 웹사이트 내용을 요약해주어 효율적으로 글을 읽을 수 있도록 도와드려요.
-4. 🔍 **메모 확인**: 저장한 메모를 웹사이트에서 한눈에 볼 수 있어요.
-5. 🔄 **자동 저장**: 작성 중인 메모가 실시간으로 자동저장되요.
-6. 단축키 지원 : 사이드 패널을 열고 닫을 때 단축키로 가능해요.
-    - Windows : alt + s
-    - MacOS : option + s
+1. **메모** : 유튜브 영상을 보다가, 혹은 글을 읽다가 번뜩이는 아이디어가 떠오르면 언제든지 사이드 패널을 열어 기록하세요!
+2. **페이지 요약** : ChatGPT가 웹사이트 내용을 요약해주어 효율적으로 글을 읽을 수 있도록 도와드립니다.
+3. **메모 확인** : 한 눈에 들어
+4. **데이터 영구 저장 및 추출** : 데이터는 손실될 걱정 없이 영구 저장됩니다. 필요에 따라 엑셀 파일로 다운로드하실 수 있습니다.
+5. **단축키** 
+    - 사이드 패널을 쉽게 열고 닫을 수 있습니다 : Alt + S / Options + S
+    - 메모를 손쉽게 저장할 수 있습니다 : Windows + S / Command + S
 
 ## 🚨 주의 사항
 
 - 요약 기능의 경우 특정 사이트에서 동작하지 않아요
     - e.g. 크롬 웹스토어, 크롬 설정 페이지, 새 탭, PDF파일
     - 메모는 모든 사이트에서 가능하답니다.
 
-## 📞 문의
+
+## 📬 소통 창구:
 
 여러분의 의견이 웹 메모를 더 좋게 만들어요. 새로운 기능 제안이나 개선점이 있다면 언제든 알려주세요!
 

chrome-extension/lib/background/index.ts

@@ -53,7 +53,7 @@ if (chrome.contextMenus)
   chrome.contextMenus.onClicked.addListener(async item => {
     switch (item.menuItemId) {
       case CONTEXT_MENU_ID_CHECK_MEMO:
-        await Tab.create({ url: `${WEB_URL}/memo` });
+        await Tab.create({ url: `${WEB_URL}/memos` });
         break;
       case CONTEXT_MENU_ID_SHOW_GUIDE:
         if (I18n.getUILanguage() === 'ko') Tab.create({ url: URL_GUIDE_KO });

chrome-extension/manifest.js

@@ -22,7 +22,7 @@ const manifest = deepmerge(
     name: '__MSG_extensionName__',
     version: packageJson.version,
     description: '__MSG_extensionDescription__',
-    default_locale: 'en',
+    default_locale: 'ko',
     permissions: ['sidePanel', 'storage', 'tabs', 'contextMenus', 'cookies'],
     host_permissions: ['<all_urls>'],
     options_page: 'options/index.html',

chrome-extension/public/_locales/ko/messages.json

@@ -1,9 +1,9 @@
 {
   "extensionDescription": {
-    "message": "웹 서핑 중 편하게 기록할 수 있도록 돕는 확장 프로그램입니다."
+    "message": "웹 어시스턴트 & 웹 페이지 요약를 위해 ChatGPT 사용"
   },
   "extensionName": {
-    "message": "웹 메모"
+    "message": "웹 메모: 웹 어시스턴트 & 웹 페이지 요약"
   },
   "no_memo": {
     "message": "메모가 없습니다."

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "chrome-extension-boilerplate-react-vite",
+  "name": "web-memo",
   "version": "1.4.2",
   "description": "Web Memo - Chrome Extension",
   "bugs": "https://github.com/guesung/Web-Memo/issues",
@@ -43,10 +43,14 @@
     "@tanstack/react-query": "^5.59.0",
     "@tanstack/react-query-devtools": "^5.59.0",
     "dotenv": "^16.4.5",
+    "driver.js": "^1.3.1",
+    "framer-motion": "^11.11.8",
     "next": "14.2.10",
     "openai": "^4.57.0",
+    "postcss-import": "^16.1.0",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "react-toastify": "^10.0.6"
   },
   "devDependencies": {
     "@playwright/test": "^1.47.0",

packages/shared/src/hooks/index.ts

@@ -5,6 +5,7 @@ export { default as useThrottle } from './useThrottle';
 export { default as useUserPreferDarkMode } from './useUserPreferDarkMode';
 export { default as useTabQuery } from './useTabQuery';
 export { default as useMemoPostMutation } from './useMemoPostMutation';
+export { default as useMemoPatchMutation } from './useMemoPatchMutation';
 export { default as useMemoListQuery } from './useMemoListQuery';
 export { default as useSupabaseClient } from './useSupabaseClient';
 export { default as useSupabaseUser } from './useSupabaseUser';

packages/shared/src/hooks/useMemoPatchMutation.ts

@@ -0,0 +1,45 @@
+import { queryKeys } from '@src/constants';
+import { MemoSupabaseClient, MemoSupabaseResponse } from '@src/types';
+import { NoMemoError, NoMemoListError, updateMemo, UpdateMemoProps } from '@src/utils';
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query';
+
+interface UseMemoPostMutationProps extends UseMutationOptions<MemoSupabaseResponse, Error, UpdateMemoProps> {
+  supabaseClient: MemoSupabaseClient;
+  handleSuccess: () => void;
+}
+
+export default function useMemoPatchMutation({
+  supabaseClient,
+  handleSuccess,
+  ...useMutationProps
+}: UseMemoPostMutationProps) {
+  const queryClient = useQueryClient();
+  return useMutation<MemoSupabaseResponse, Error, UpdateMemoProps>({
+    ...useMutationProps,
+    mutationFn: async (updateMemoProps: UpdateMemoProps) => await updateMemo(supabaseClient, updateMemoProps),
+    onMutate: async currentMemo => {
+      await queryClient.cancelQueries({ queryKey: queryKeys.memoList() });
+      const previousMemoList = queryClient.getQueryData<MemoSupabaseResponse>(queryKeys.memoList());
+
+      if (!previousMemoList) throw new NoMemoListError();
+
+      const { data: previousMemoListData } = previousMemoList;
+
+      if (!previousMemoListData) throw new NoMemoListError();
+
+      const currentMemoIndex = previousMemoListData.findIndex(memo => memo.id === currentMemo.id);
+      const currentMemoBase = previousMemoListData.find(memo => memo.id === currentMemo.id);
+
+      if (currentMemoIndex === -1 || !currentMemoBase) throw new NoMemoError();
+
+      previousMemoListData.splice(currentMemoIndex, 1, { ...currentMemoBase, ...currentMemo });
+
+      await queryClient.setQueryData(queryKeys.memoList(), { ...previousMemoList, data: previousMemoListData });
+
+      return { previousMemoList };
+    },
+    onSuccess: async () => {
+      handleSuccess();
+    },
+  });
+}

packages/shared/src/hooks/useMemoPostMutation.ts

@@ -1,46 +1,27 @@
 import { queryKeys } from '@src/constants';
-import { MemoSupabaseClient, MemoSupabaseResponse } from '@src/types';
-import { formatUrl, insertMemo, updateMemo } from '@src/utils';
-import { getSupabaseClient } from '@src/utils/extension';
+import { MemoSupabaseClient, MemoSupabaseResponse, MemoTableInsert } from '@src/types';
+import { insertMemo } from '@src/utils';
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query';
-import useMemoListQuery from './useMemoListQuery';
 
-interface SaveMemoProps {
-  memo: string;
-  url: string;
-  title: string;
-  category: string;
-}
+interface PostMemoProps extends MemoTableInsert {}
 
-interface UseMemoPostMutationProps extends UseMutationOptions<MemoSupabaseResponse, Error, SaveMemoProps> {
+interface UseMemoPostMutationProps extends UseMutationOptions<MemoSupabaseResponse, Error, PostMemoProps> {
   supabaseClient: MemoSupabaseClient;
-  handleSettled: () => void;
+  handleSuccess: () => void;
 }
 
 export default function useMemoPostMutation({
   supabaseClient,
-  handleSettled,
+  handleSuccess,
   ...useMutationProps
 }: UseMemoPostMutationProps) {
   const queryClient = useQueryClient();
-  const { data: memoList } = useMemoListQuery({ supabaseClient });
-
-  const saveMemo = async ({ memo, title, url, category }: SaveMemoProps) => {
-    const currentMemo = memoList?.data?.find(memo => memo.url === formatUrl(url));
-    const supabaseClient = await getSupabaseClient();
-
-    console.log(memo, title, url, category);
-
-    if (currentMemo) return await updateMemo(supabaseClient, { ...currentMemo, memo, category });
-    else return await insertMemo(supabaseClient, { memo, title, url, category });
-  };
-
-  return useMutation<MemoSupabaseResponse, Error, SaveMemoProps>({
+  return useMutation<MemoSupabaseResponse, Error, PostMemoProps>({
     ...useMutationProps,
-    mutationFn: saveMemo,
-    onSettled: async () => {
+    mutationFn: async (postMemoProps: PostMemoProps) => await insertMemo(supabaseClient, postMemoProps),
+    onSuccess: async () => {
       queryClient.invalidateQueries({ queryKey: queryKeys.memoList() });
-      handleSettled();
+      handleSuccess();
     },
   });
 }