[FEAT] 익스텐션 에러 페이지 수정 및 에러 코드 추가, 버그 수정, 디자인 수정

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;

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('서버에서 알 수 없는 에러가 발생했습니다.');
           }

frontend/techpick-extension/src/components/CreatePickForm.css.ts

@@ -51,6 +51,11 @@ export const submitButtonStyle = style({
   height: 'auto',
   backgroundColor: colorVars.point,
   cursor: 'pointer',
+
+  ':focus': {
+    outline: '1px solid',
+    outlineColor: colorVars.orange10,
+  },
 });
 
 export const labelLayout = style({
@@ -73,6 +78,13 @@ export const footerStyle = style({
 });
 
 export const footerLinkStyle = style({
+  ':focus': {
+    outline: '1px solid',
+    outlineColor: colorVars.gold7,
+  },
+});
+
+export const footerLinkTextStyle = style({
   paddingRight: '4px',
   color: colorVars.gray9,
   fontSize: '12px',

frontend/techpick-extension/src/components/CreatePickForm.tsx

@@ -16,6 +16,7 @@ import {
   footerTextStyle,
   pickFormFieldListLayout,
   footerLinkStyle,
+  footerLinkTextStyle,
 } from './CreatePickForm.css';
 import { useEffect, useRef, useState } from 'react';
 import { FolderType } from '@/types';
@@ -107,8 +108,8 @@ export function CreatePickForm({
           />
         </div>
         <div className={footerStyle}>
-          <a href={PUBLIC_DOMAIN} target="_blank">
-            <p className={footerLinkStyle}>app.techpick.org</p>
+          <a href={PUBLIC_DOMAIN} target="_blank" className={footerLinkStyle}>
+            <p className={footerLinkTextStyle}>app.techpick.org</p>
           </a>
           <p className={footerTextStyle}>새로 만들기</p>
         </div>

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,12 +91,13 @@ export function TagAutocompleteDialog({
     }
   };
 
-  useEffect(
-    function fetchTagList() {
-      fetchingTagList();
-    },
-    [fetchingTagList]
-  );
+  useEffect(() => {
+    if (open) {
+      requestAnimationFrame(() => {
+        focusTagInput();
+      });
+    }
+  }, [open]);
 
   useEffect(
     function checkIsCreatableTag() {

frontend/techpick-extension/src/components/UpdatePickForm.tsx

@@ -16,6 +16,7 @@ import {
   footerStyle,
   footerTextStyle,
   footerLinkStyle,
+  footerLinkTextStyle,
 } from './CreatePickForm.css';
 import { useEffect, useRef, useState } from 'react';
 import { FolderSelect } from './FolderSelect';
@@ -25,7 +26,6 @@ import { PUBLIC_DOMAIN } from '@/constants';
 export function UpdatePickForm({
   id,
   title,
-
   imageUrl,
   folderId,
   folderInfoList,
@@ -108,8 +108,8 @@ export function UpdatePickForm({
         </div>
 
         <div className={footerStyle}>
-          <a href={PUBLIC_DOMAIN} target="_blank">
-            <p className={footerLinkStyle}>app.techpick.org</p>
+          <a href={PUBLIC_DOMAIN} className={footerLinkStyle} target="_blank">
+            <p className={footerLinkTextStyle}>app.techpick.org</p>
           </a>
           <p className={footerTextStyle}>수정하기</p>
         </div>

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';

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': '이 링크는 넣을 수 없습니다. ㅠㅠ',
 };

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 };