Kernel360 · dmdgpdi · Dec 11, 2024 · Dec 11, 2024 · Dec 11, 2024 · Dec 11, 2024
diff --git a/frontend/schema/schema.d.ts b/frontend/schema/schema.d.ts
@@ -199,6 +199,46 @@ export interface paths {
         patch: operations["updatePick"];
         trace?: never;
     };
+    "/api/picks/recommend": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * 추천 링크로 픽 생성
+         * @description 추천 링크로 픽을 생성합니다. 이미 픽으로 등록된 링크의 경우 기존 픽 정보를 응답으로 보냅니다.
+         */
+        post: operations["savePickFromRecommend"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/picks/bulk": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * 픽 10000개 insert
+         * @description 픽 10000개 insert - 1회만 가능합니다.
+         */
+        post: operations["bulkInsertPick"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/api/folders": {
         parameters: {
             query?: never;
@@ -231,6 +271,26 @@ export interface paths {
         patch: operations["updateFolder"];
         trace?: never;
     };
+    "/api/events/suggestion/view": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * 추천 페이지 링크 조회 이벤트 수집
+         * @description [인증 불필요] 서버에게 추천 페이지의 어떤 링크가 조회됬는지 알립니다.
+         */
+        post: operations["suggestionView"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/api/events/shared/view": {
         parameters: {
             query?: never;
@@ -446,7 +506,8 @@ export interface paths {
             cookie?: never;
         };
         /**
-         * 픽 리스트 검색
+         * [Deprecated] 픽 리스트 검색
+         * @deprecated
          * @description 페이지네이션 처리 되지 않은 픽 리스트 검색
          */
         get: operations["searchPick"];
@@ -675,6 +736,23 @@ export interface components {
             /** Format: date-time */
             updatedAt?: string;
         };
+        "techpick.api.application.pick.dto.PickApiResponse$CreateFromRecommend": {
+            exist?: boolean;
+            pick?: components["schemas"]["techpick.api.domain.pick.dto.PickResult$Pick"];
+        };
+        "techpick.api.domain.pick.dto.PickResult$Pick": {
+            /** Format: int64 */
+            id?: number;
+            title?: string;
+            linkInfo?: components["schemas"]["techpick.api.domain.link.dto.LinkInfo"];
+            /** Format: int64 */
+            parentFolderId?: number;
+            tagIdOrderedList?: number[];
+            /** Format: date-time */
+            createdAt?: string;
+            /** Format: date-time */
+            updatedAt?: string;
+        };
         "techpick.api.application.folder.dto.FolderApiRequest$Create": {
             /** @example backend */
             name: string;
@@ -705,6 +783,10 @@ export interface components {
              *      */
             folderAccessToken?: string | null;
         };
+        "techpick.api.application.event.dto.EventApiRequest$SuggestionView": {
+            /** @description 조회된 링크 url */
+            url: string;
+        };
         "techpick.api.application.event.dto.EventApiRequest$SharedBookmarkView": {
             /** @description 조회된 링크 url */
             url: string;
@@ -1314,6 +1396,59 @@ export interface operations {
             };
         };
     };
+    savePickFromRecommend: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["techpick.api.application.pick.dto.PickApiRequest$Create"];
+            };
+        };
+        responses: {
+            /** @description 픽 생성 성공 */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "*/*": components["schemas"]["techpick.api.application.pick.dto.PickApiResponse$CreateFromRecommend"];
+                };
+            };
+            /** @description 접근할 수 없는 폴더 */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "*/*": components["schemas"]["techpick.api.application.pick.dto.PickApiResponse$CreateFromRecommend"];
+                };
+            };
+        };
+    };
+    bulkInsertPick: {
+        parameters: {
+            query: {
+                folderId: number;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
     getAllRootFolderList: {
         parameters: {
             query?: never;
@@ -1439,6 +1574,28 @@ export interface operations {
             };
         };
     };
+    suggestionView: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["techpick.api.application.event.dto.EventApiRequest$SuggestionView"];
+            };
+        };
+        responses: {
+            /** @description 전송 성공 */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
     sharedFolderLinkView: {
         parameters: {
             query?: never;

diff --git a/frontend/techpick-extension/src/apis/apiClient.ts b/frontend/techpick-extension/src/apis/apiClient.ts
@@ -22,8 +22,6 @@ export const apiClient = ky.create({
             /* empty */
           } else if (ERROR_MESSAGE_JSON[errorCode]) {
             notifyError(ERROR_MESSAGE_JSON[errorCode]);
-          } else if (errorCode === 'PK-000') {
-            /* empty */
           } else if (errorCode === 'UNKNOWN') {
             notifyError('서버에서 알 수 없는 에러가 발생했습니다.');
           }

diff --git a/frontend/techpick-extension/src/components/TagAutocompleteDialog.tsx b/frontend/techpick-extension/src/components/TagAutocompleteDialog.tsx
@@ -39,14 +39,8 @@ export function TagAutocompleteDialog({
   const isCreateFetchPendingRef = useRef<boolean>(false);
   const randomNumber = useRef<number>(getRandomInt());
 
-  const {
-    tagList,
-    selectedTagList,
-    fetchingTagState,
-    selectTag,
-    fetchingTagList,
-    createTag,
-  } = useTagStore();
+  const { tagList, selectedTagList, fetchingTagState, selectTag, createTag } =
+    useTagStore();
   const { isDarkMode } = useThemeStore();
 
   const focusTagInput = () => {
@@ -97,13 +91,6 @@ export function TagAutocompleteDialog({
     }
   };
 
-  useEffect(
-    function fetchTagList() {
-      fetchingTagList();
-    },
-    [fetchingTagList]
-  );
-
   useEffect(
     function checkIsCreatableTag() {
       const isUnique = !tagList.some((tag) => tag.name === tagInputValue);

diff --git a/frontend/techpick-extension/src/components/UpdatePickForm.tsx b/frontend/techpick-extension/src/components/UpdatePickForm.tsx
@@ -25,7 +25,6 @@ import { PUBLIC_DOMAIN } from '@/constants';
 export function UpdatePickForm({
   id,
   title,
-
   imageUrl,
   folderId,
   folderInfoList,

diff --git a/frontend/techpick-extension/src/constants/apiUrls.ts b/frontend/techpick-extension/src/constants/apiUrls.ts
@@ -9,7 +9,7 @@ export const API_URLS = {
     return 'picks';
   },
   getPicksByLinkUrl: function (url: string) {
-    return `${this.getPicksUrl()}/link?link=${url}`;
+    return `${this.getPicksUrl()}/link-v2?link=${url}`;
   },
   getTagsUrl: function () {
     return 'tags';

diff --git a/frontend/techpick-extension/src/constants/errorMessageJson.ts b/frontend/techpick-extension/src/constants/errorMessageJson.ts
@@ -1,8 +1,9 @@
 export const ERROR_MESSAGE_JSON: { [key: string]: string } = {
   'TG-001': '중복된 태그가 존재합니다.',
   'TG-002': '유효하지 않는 태그 이름입니다.',
-  'PK-001': '북마크가 실패했습니다! 이미 존재하는 픽입니다!',
+  'TG-005': '태그가 허용된 최대 길이를 초과했습니다.',
+  'PK-001': '북마크가 실패했습니다! 이미 존재하는 북마크입니다!',
+  'PK-005': '제목이 허용된 최대 길이를 초과했습니다.',
   'LI-002': '이미 존재하는 링크입니다.',
-  'PK-005': '제목이 허용된 최대길이를 초과했습니다.',
   'LI-003': '이 링크는 넣을 수 없습니다. ㅠㅠ',
 };
diff --git a/frontend/techpick-extension/src/hooks/useHasPick.ts b/frontend/techpick-extension/src/hooks/useHasPick.ts
@@ -1,16 +1,18 @@
 import { useEffect, useState } from 'react';
 import { getPickByUrl } from '@/apis';
-import { GetPickByUrlResponseType } from '@/types';
+import { PickInfoType } from '@/types';
 
 export function useHasPick(url: string | undefined): UseHasLinkResponseType {
   const [isLoading, setIsLoading] = useState(true);
-  const [data, setData] = useState<GetPickByUrlResponseType>();
+  const [data, setData] = useState<PickInfoType | undefined>(undefined);
 
   useEffect(() => {
     const fetchHasPick = async (url: string) => {
       try {
         const pickData = await getPickByUrl(url);
-        setData(pickData);
+        if (pickData.exist) {
+          setData(pickData.pick);
+        }
         setIsLoading(false);
       } catch {
         setIsLoading(false);
@@ -34,5 +36,5 @@ export function useHasPick(url: string | undefined): UseHasLinkResponseType {
 }
 
 type UseHasLinkResponseType =
-  | { isLoading: boolean; hasLink: true; data: GetPickByUrlResponseType }
+  | { isLoading: boolean; hasLink: true; data: PickInfoType }
   | { isLoading: boolean; hasLink: false; data?: undefined };
diff --git a/frontend/techpick-extension/src/pages/BookmarkPage.tsx b/frontend/techpick-extension/src/pages/BookmarkPage.tsx
@@ -26,6 +26,7 @@ export function BookmarkPage() {
     (state) => state.replaceSelectedTagList
   );
   const tagList = useTagStore((state) => state.tagList);
+  const { fetchingTagList } = useTagStore();
   const isInitialLoadRef = useRef(true);
 
   useEffect(function onBookmarkPageLoad() {
@@ -68,7 +69,7 @@ export function BookmarkPage() {
 
   useEffect(
     function onUpdatePickFormLoad() {
-      if (pickData && isInitialLoadRef.current) {
+      if (pickData && isInitialLoadRef.current && 0 < tagList.length) {
         isInitialLoadRef.current = false;
         const initialData = pickData?.tagIdOrderedList
           ? tagList.filter((tag) => pickData.tagIdOrderedList.includes(tag.id))
@@ -80,6 +81,13 @@ export function BookmarkPage() {
     [pickData, replaceSelectedTagList, tagList]
   );
 
+  useEffect(
+    function fetchTagList() {
+      fetchingTagList();
+    },
+    [fetchingTagList]
+  );
+
   if (isGetPickInfoLoading || isFolderInfoListLoading) {
     return (
       <div className={bookmarkPageLayout}>

diff --git a/frontend/techpick-extension/src/pages/ErrorPage.css.ts b/frontend/techpick-extension/src/pages/ErrorPage.css.ts
@@ -5,8 +5,8 @@ export const errorPageLayout = style({
   flexDirection: 'column',
   justifyContent: 'center',
   alignItems: 'center',
-  width: '360px',
-  height: '400px',
+  width: '320px',
+  height: '220px',
   backgroundColor: '#f8d7da',
   color: '#721c24',
   textAlign: 'center',

diff --git a/frontend/techpick-extension/src/pages/ErrorPage.tsx b/frontend/techpick-extension/src/pages/ErrorPage.tsx
@@ -1,19 +1,17 @@
-import { useRouteError } from 'react-router-dom';
 import { Text, Gap } from '@/libs/@components';
 import { errorPageLayout } from './ErrorPage.css';
 
 export function ErrorPage() {
-  const error = useRouteError();
-
   return (
     <div className={errorPageLayout}>
       <Text size="2xl" weight="extrabold" asChild>
-        <h1>Error가 발생했습니다.</h1>
+        <h1>죄송합니다.</h1>
       </Text>
-      <Gap verticalSize="gap24" />
-      <Text size="xl" asChild>
-        <h2>{error instanceof Error ? error.message : '알 수 없는 에러'}</h2>
+      <Gap verticalSize="gap4" />
+      <Text size="xl" weight="bold">
+        에러가 발생했습니다.
       </Text>
+      <Gap verticalSize="gap24" />
       <Gap verticalSize="gap16" />
       <Text size="xl">다시 확장 프로그램을 켜주세요.</Text>
     </div>

diff --git a/frontend/techpick-extension/src/types/GetPickByUrlResponseType.ts b/frontend/techpick-extension/src/types/GetPickByUrlResponseType.ts
@@ -1,6 +1,14 @@
 import { components } from '@/schema';
 import { ConcreteType } from './ConcreteType';
 
-export type GetPickByUrlResponseType = ConcreteType<
-  components['schemas']['techpick.api.application.pick.dto.PickApiResponse$Pick']
->;
+export type GetPickByUrlResponseType =
+  | {
+      exist: true;
+      pick: ConcreteType<
+        components['schemas']['techpick.api.application.pick.dto.PickApiResponse$Pick']
+      >;
+    }
+  | {
+      exist: false;
+      pick: null;
+    };
diff --git a/frontend/techpick-extension/src/types/PickInfoType.ts b/frontend/techpick-extension/src/types/PickInfoType.ts
@@ -0,0 +1,6 @@
+import { components } from '@/schema';
+import { ConcreteType } from './ConcreteType';
+
+export type PickInfoType = ConcreteType<
+  components['schemas']['techpick.api.application.pick.dto.PickApiResponse$Pick']
+>;