[FIX] 익스텐션 url이 없는 상황에 북마크 생성 못하게 알림 생성, 익스텐션 아이콘 변경, 웹 관련 코드 변경에서만 액…

…션 동작 (#956)

* fix: url이 http로만 시작할 때만 북마크 저장할 수 있게 수정

* chore: eslint에서 node_modules ignore 설정

* feat: 익스텐션 default 아이콘을 비어있는 아이콘으로 변경

* ci/cd: 웹 관련 코드가 변경될 때만 액션 동작하게 수정

* ci/cd: 브랜치 변경에 따라 워크 플로우 타겟 변경

.github/workflows/baguni.test.client.deploy.yml

@@ -9,7 +9,8 @@ on:
     branches:
       - 'develop'
     paths:
-      - 'frontend/**'
+      - 'frontend/techpick/**'
+      - 'frontend/techpick-shared/**'
   workflow_dispatch:
 
 jobs:
@@ -70,7 +71,7 @@ jobs:
 
             echo "docker - pulling..."
             docker pull ${{ env.docker-hub-username }}/${{ env.docker-hub-repo }}:${{ env.module-name }}
-      
+
             echo "moving to project directory..."
             cd /home/project/baguni/develop
 

.github/workflows/playwright.test.yml

@@ -1,7 +1,10 @@
 name: Playwright Tests
 on:
   pull_request:
-    branches: [fe-develop]
+    branches: [develop]
+    paths:
+      - 'frontend/techpick/**'
+      - 'frontend/techpick-shared/**'
   workflow_dispatch:
 jobs:
   test:

frontend/.eslintrc.js

@@ -20,4 +20,5 @@ module.exports = {
   rules: {
     'react/react-in-jsx-scope': 'off',
   },
+  ignorePatterns: ['node_modules/**'],
 };

frontend/techpick-extension/eslint.config.js

@@ -5,7 +5,7 @@ import reactRefresh from 'eslint-plugin-react-refresh';
 import tseslint from 'typescript-eslint';
 
 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ['dist', 'node_modules/**'] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
     files: ['**/*.{ts,tsx}'],

frontend/techpick-extension/src/chrome-extension/background.ts

@@ -71,12 +71,12 @@ chrome.tabs.onUpdated.addListener(async (_tabId, changeInfo, tab) => {
         const { exist } = await checkPickByUrl(tab.url);
 
         if (exist) {
-          chrome.action.setIcon({ path: './pick128.png', tabId: tab.id });
-        } else {
           chrome.action.setIcon({
-            path: './uncheckedPick128.png',
+            path: './checkedPick128.png',
             tabId: tab.id,
           });
+        } else {
+          chrome.action.setIcon({ path: './pick128.png', tabId: tab.id });
         }
       } catch {
         /* empty */
@@ -98,12 +98,12 @@ chrome.tabs.onActivated.addListener(async (activeInfo) => {
         const { exist } = await checkPickByUrl(tab.url);
 
         if (exist) {
-          chrome.action.setIcon({ path: './pick128.png', tabId: tab.id });
-        } else {
           chrome.action.setIcon({
-            path: './uncheckedPick128.png',
+            path: './checkedPick128.png',
             tabId: tab.id,
           });
+        } else {
+          chrome.action.setIcon({ path: './pick128.png', tabId: tab.id });
         }
       } catch {
         /* empty */
@@ -122,7 +122,7 @@ chrome.runtime.onConnect.addListener(async function changeIcon(port) {
 
   const currentTabInfo = await getCurrentTabInfo();
   chrome.action.setIcon({
-    path: './pick128.png',
+    path: './checkedPick128.png',
     tabId: currentTabInfo.id,
   });
 });

frontend/techpick-extension/src/pages/BookmarkPage.tsx

@@ -15,6 +15,7 @@ import { filterSelectableFolder } from '@/utils';
 import type { CreatePickToUnclassifiedFolderResponseType } from '@/types';
 import { CHANGE_ICON_PORT_NAME } from '@/constants';
 import { useEventLogger } from '@/hooks/useEventLogger';
+import { notifyError } from '@/libs/@toast';
 
 export function BookmarkPage() {
   const [isLoading, setIsLoading] = useState(true);
@@ -33,8 +34,15 @@ export function BookmarkPage() {
       const fetchInitialData = async () => {
         const { title, url, favIconUrl } = await getCurrentTabInfo();
 
-        if (!title || !url || !favIconUrl) {
-          throw new Error('getCurrentTabInfo failed');
+        if (
+          !title ||
+          !url ||
+          !favIconUrl ||
+          url.trim() === '' ||
+          !url.startsWith('http')
+        ) {
+          notifyError('해당 url은 저장할 수 없습니다.');
+          return;
         }
 
         const slicedTitle = title.slice(0, 255);
@@ -70,7 +78,7 @@ export function BookmarkPage() {
         fetchInitialData();
       }
     },
-    [setTagList]
+    [setTagList, trackSaveBookmark]
   );
 
   if (isLoading || !pickInfo) {

frontend/techpick/.eslintrc.json

@@ -60,5 +60,6 @@
     ],
     "import/no-unresolved": "off",
     "@next/next/no-img-element": "off"
-  }
+  },
+  "ignorePatterns": ["node_modules/**"]
 }