diff --git a/frontend/techpick/src/apis/apiConstants.ts b/frontend/techpick/src/apis/apiConstants.ts index 7f71003f1..130d380cf 100644 --- 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 deleted file mode 100644 index 590d9f00f..000000000 --- a/frontend/techpick/src/apis/getLinkOgDataByUrl.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { HTTPError } from 'ky'; -import { apiClient } from './apiClient'; -import { API_URLS } from './apiConstants'; -import { returnErrorFromHTTPError } from './error'; -import { GetOgTagDataResponseType } from '@/types'; - -export const getOgDataByUrl = async (url: string) => { - try { - const response = await apiClient.get( - API_URLS.GET_LINK_OG_DATA(encodeURIComponent(url)) - ); - - const data = await response.json(); - return data; - } catch (httpError) { - if (httpError instanceof HTTPError) { - const error = await returnErrorFromHTTPError(httpError); - throw error; - } - throw httpError; - } -}; diff --git a/frontend/techpick/src/components/ChromeExtensionLinkButton/ChromeExtensionLinkButton.tsx b/frontend/techpick/src/components/ChromeExtensionLinkButton/ChromeExtensionLinkButton.tsx new file mode 100644 index 000000000..defe450c2 --- /dev/null +++ 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 ( + + + + ); +} diff --git a/frontend/techpick/src/components/ChromeExtensionLinkButton/chromeExtensionLinkButton.css.ts b/frontend/techpick/src/components/ChromeExtensionLinkButton/chromeExtensionLinkButton.css.ts new file mode 100644 index 000000000..6f32d187d --- /dev/null +++ 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 deleted file mode 100644 index bb92399b8..000000000 --- a/frontend/techpick/src/components/CreatePickPopover/CreatePickPopoverButton.tsx +++ /dev/null @@ -1,91 +0,0 @@ -'use client'; - -import { useState } from 'react'; -import * as Popover from '@radix-ui/react-popover'; -import { PlusIcon } from 'lucide-react'; -import { getOgDataByUrl } from '@/apis/getLinkOgDataByUrl'; -import { getPickByUrl } from '@/apis/pick'; -import { usePickStore, useTreeStore } from '@/stores'; -import { notifyError, notifySuccess } from '@/utils'; -import { - popoverContentStyle, - urlInputStyle, - createPickButtonStyle, - inputLabelStyle, - popoverTriggerStyle, - wrongDescriptionTextStyle, -} from './createPickPopoverButton.css'; - -export function CreatePickPopoverButton() { - const focusFolderId = useTreeStore((state) => state.focusFolderId); - const createPick = usePickStore((state) => state.createPick); - const [urlInputValue, setUrlInputValue] = useState(''); - - const handleSubmit = async () => { - const urlValue = urlInputValue.trim(); - - if (!urlValue || urlValue === '') { - return; - } - - const pick = await getPickByUrl(urlValue); - if (pick.exist) { - notifyError('이미 북마크가 존재합니다.'); - return; - } - - try { - const ogData = await getOgDataByUrl(urlValue); - if (focusFolderId) { - await createPick({ - title: ogData.title, - parentFolderId: focusFolderId, - tagIdOrderedList: [], - linkInfo: ogData, - }); - notifySuccess('성공했습니다!'); - } - } catch { - /* empty */ - } - }; - - return ( - - - - 북마크 추가하기 - - - -
{ - e.preventDefault(); - handleSubmit(); - }} - > - - - { - setUrlInputValue(e.target.value); - }} - /> - - -
- - - - ); -} diff --git a/frontend/techpick/src/components/CreatePickPopover/createPickPopoverButton.css.ts b/frontend/techpick/src/components/CreatePickPopover/createPickPopoverButton.css.ts deleted file mode 100644 index 904570b54..000000000 --- a/frontend/techpick/src/components/CreatePickPopover/createPickPopoverButton.css.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { style } from '@vanilla-extract/css'; -import { colorVars } from 'techpick-shared'; -import { greenOutlineButtonStyle } from '@/styles/greenButtonStyle.css'; - -export const popoverTriggerStyle = style({ - display: 'flex', - flexShrink: 0, - gap: '4px', - alignItems: 'center', - width: '100px', - fontSize: '12px', - cursor: 'pointer', -}); - -export const popoverContentStyle = style({ - width: '240px', - height: '100px', - border: '1px solid', - borderColor: colorVars.gold6, - borderRadius: '4px', - padding: '8px', - paddingTop: '4px', - backgroundColor: colorVars.gold3, -}); - -export const inputLabelStyle = style({ - fontSize: '12px', - fontWeight: '500', - color: colorVars.sand11, -}); - -export const urlInputStyle = style({ - width: '100%', - margin: 0, - border: '1px solid', - borderColor: colorVars.gold6, - borderRadius: '4px', - backgroundColor: colorVars.gold3, - fontSize: '12px', - color: colorVars.secondary, - - ':focus': { - border: `1px solid ${colorVars.gold7}`, - outline: 'none', - backgroundColor: colorVars.gold4, - transition: 'border 0.3s ease, background-color 0.3s ease', - }, -}); - -export const createPickButtonStyle = style([ - greenOutlineButtonStyle, - { - marginTop: '8px', - width: '100%', - height: '20px', - fontSize: '12px', - }, -]); - -export const wrongDescriptionTextStyle = style({ - display: 'inline-block', - paddingLeft: '4px', - fontSize: '12px', - fontWeight: '400', - color: colorVars.red11, -}); diff --git a/frontend/techpick/src/components/FolderContentHeader/FolderContentHeader.tsx b/frontend/techpick/src/components/FolderContentHeader/FolderContentHeader.tsx index 5d8ad7bd7..53449b2d0 100644 --- 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() {
{folderInfo?.folderType !== 'RECYCLE_BIN' && ( - + )}
diff --git a/frontend/techpick/src/types/pick.type.ts b/frontend/techpick/src/types/pick.type.ts index c8b1e2204..3fb14980b 100644 --- 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'] >;