[FEAT] 웹 사이트에서 북마크 생성하는 컴포넌트 및 로직 제거. 익스텐션 이동하는 방식으로 변경 (#931)

* feat: 사용하지 않는 OG Data 호출 함수 삭제 * feat: 북마크 생성 버튼 익스텐션 링크 이동으로 기능 변경
Kernel360 · Jan 8, 2025 · 5c45164 · 5c45164
1 parent 4c9c0b9
commit 5c45164
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 187 deletions.
diff --git a/frontend/techpick/src/apis/apiConstants.ts b/frontend/techpick/src/apis/apiConstants.ts
@@ -6,7 +6,6 @@ const API_ENDPOINTS = {
   BASIC: 'basic',
   PICKS: 'picks',
   TAGS: 'tags',
-  LINKS: 'links',
   SHARED: 'shared',
   LOGOUT: 'logout',
   VIEW: 'view',
@@ -48,7 +47,6 @@ export const API_URLS = {
   GET_TAGS: `${API_ENDPOINTS.TAGS}`,
   GET_PICK_BY_URL: (url: string) =>
     `${API_ENDPOINTS.PICKS}/link-v2?link=${url}`,
-  GET_LINK_OG_DATA: (url: string) => `${API_ENDPOINTS.LINKS}?url=${url}`,
   SHARE_FOLDER: API_ENDPOINTS.SHARED,
   GET_SHARED_FOLER_BY_UUID: (uuid: string) => `${API_ENDPOINTS.SHARED}/${uuid}`,
   DELETE_SHARED_FOLER_BY_FOLDER_ID: (sourceFolderId: number) =>

diff --git a/frontend/techpick/src/apis/getLinkOgDataByUrl.ts b/frontend/techpick/src/apis/getLinkOgDataByUrl.ts
diff --git a/frontend/techpick/src/components/ChromeExtensionLinkButton/ChromeExtensionLinkButton.tsx b/frontend/techpick/src/components/ChromeExtensionLinkButton/ChromeExtensionLinkButton.tsx
@@ -0,0 +1,17 @@
+import { PlusIcon } from 'lucide-react';
+import { chromeExtensionLinkButtonStyle } from './chromeExtensionLinkButton.css';
+
+export function ChromeExtensionLinkButton() {
+  return (
+    <a
+      href="https://chromewebstore.google.com/detail/%EB%B0%94%EA%B5%AC%EB%8B%88-%EC%9D%B5%EC%8A%A4%ED%85%90%EC%85%98/gfkkgllophliamkdclhekgfiohnbdddl"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <button className={chromeExtensionLinkButtonStyle}>
+        <PlusIcon size={12} />
+        <span>북마크 추가하기</span>
+      </button>
+    </a>
+  );
+}
diff --git a/frontend/techpick/src/components/ChromeExtensionLinkButton/chromeExtensionLinkButton.css.ts b/frontend/techpick/src/components/ChromeExtensionLinkButton/chromeExtensionLinkButton.css.ts
@@ -0,0 +1,17 @@
+import { style } from '@vanilla-extract/css';
+import { orangeOutlineButtonStyle } from '@/styles/orangeButtonStyle.css';
+
+export const chromeExtensionLinkButtonStyle = style([
+  orangeOutlineButtonStyle,
+  {
+    display: 'flex',
+    flexShrink: 0,
+    gap: '4px',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '112px',
+    height: '24px',
+    fontSize: '12px',
+    cursor: 'pointer',
+  },
+]);
diff --git a/frontend/techpick/src/components/CreatePickPopover/CreatePickPopoverButton.tsx b/frontend/techpick/src/components/CreatePickPopover/CreatePickPopoverButton.tsx
diff --git a/frontend/techpick/src/components/CreatePickPopover/createPickPopoverButton.css.ts b/frontend/techpick/src/components/CreatePickPopover/createPickPopoverButton.css.ts
diff --git a/frontend/techpick/src/components/FolderContentHeader/FolderContentHeader.tsx b/frontend/techpick/src/components/FolderContentHeader/FolderContentHeader.tsx
@@ -11,7 +11,7 @@ import {
   folderContentHeaderStyle,
   folderDescriptionStyle,
 } from './folderContentHeader.css';
-import { CreatePickPopoverButton } from '../CreatePickPopover/CreatePickPopoverButton';
+import { ChromeExtensionLinkButton } from '../ChromeExtensionLinkButton/ChromeExtensionLinkButton';
 
 export function FolderContentHeader() {
   const pathname = usePathname();
@@ -33,7 +33,7 @@ export function FolderContentHeader() {
 
           <div className={createPickPopoverButtonLayoutStyle}>
             {folderInfo?.folderType !== 'RECYCLE_BIN' && (
-              <CreatePickPopoverButton />
+              <ChromeExtensionLinkButton />
             )}
           </div>
         </div>

diff --git a/frontend/techpick/src/types/pick.type.ts b/frontend/techpick/src/types/pick.type.ts
@@ -54,10 +54,6 @@ export type CreatePickRequestType = ConcreteType<
   components['schemas']['baguni.api.application.pick.dto.PickApiRequest$Create']
 >;
 
-export type GetOgTagDataResponseType = ConcreteType<
-  components['schemas']['baguni.api.application.link.dto.LinkApiResponse']
->;
-
 export type CreatePickResponseType = ConcreteType<
   components['schemas']['baguni.api.application.pick.dto.PickApiResponse$Pick']
 >;