From 3bd617ae1a8f9950a73bff45d1abfd6fd5cca6f0 Mon Sep 17 00:00:00 2001 From: dmdgpdi <33450285+dmdgpdi@users.noreply.github.com> Date: Wed, 11 Dec 2024 19:36:08 +0900 Subject: [PATCH 1/9] =?UTF-8?q?feat:=20=EC=9D=B5=EC=8A=A4=ED=85=90?= =?UTF-8?q?=EC=85=98=20=EC=97=90=EB=9F=AC=EC=BD=94=EB=93=9C=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../techpick-extension/src/constants/errorMessageJson.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/techpick-extension/src/constants/errorMessageJson.ts b/frontend/techpick-extension/src/constants/errorMessageJson.ts index 168ea9154..166ce07ec 100644 --- 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': '이 링크는 넣을 수 없습니다. ㅠㅠ', }; From 49c6d45fd79d963935d6de086d8a36d4a92db483 Mon Sep 17 00:00:00 2001 From: dmdgpdi <33450285+dmdgpdi@users.noreply.github.com> Date: Wed, 11 Dec 2024 19:37:32 +0900 Subject: [PATCH 2/9] =?UTF-8?q?chore:=20=EB=B0=B1=EC=97=94=EB=93=9C=20API?= =?UTF-8?q?=20=ED=83=80=EC=9E=85=20=EC=B5=9C=EC=8B=A0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/schema/schema.d.ts | 159 +++++++++++++++++++++++++++++++++++- 1 file changed, 158 insertions(+), 1 deletion(-) diff --git a/frontend/schema/schema.d.ts b/frontend/schema/schema.d.ts index c7def1a0c..db83f8024 100644 --- 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; From 9af076faacaf5a9903461f4c9d7b47c9c7600d56 Mon Sep 17 00:00:00 2001 From: dmdgpdi <33450285+dmdgpdi@users.noreply.github.com> Date: Wed, 11 Dec 2024 19:49:24 +0900 Subject: [PATCH 3/9] =?UTF-8?q?refactor:=20=EB=A7=81=ED=81=AC=EB=A1=9C=20?= =?UTF-8?q?=ED=94=BD=20=EC=A1=B0=ED=9A=8C=20=EB=B0=B1=EC=97=94=EB=93=9C=20?= =?UTF-8?q?API=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/techpick-extension/src/apis/apiClient.ts | 2 -- .../techpick-extension/src/constants/apiUrls.ts | 2 +- .../techpick-extension/src/hooks/useHasPick.ts | 10 ++++++---- .../src/types/GetPickByUrlResponseType.ts | 14 +++++++++++--- .../techpick-extension/src/types/PickInfoType.ts | 6 ++++++ frontend/techpick-extension/src/types/index.ts | 1 + 6 files changed, 25 insertions(+), 10 deletions(-) create mode 100644 frontend/techpick-extension/src/types/PickInfoType.ts diff --git a/frontend/techpick-extension/src/apis/apiClient.ts b/frontend/techpick-extension/src/apis/apiClient.ts index f912eb10f..29ffcf34a 100644 --- 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/constants/apiUrls.ts b/frontend/techpick-extension/src/constants/apiUrls.ts index ef9a02450..3483d6ee8 100644 --- 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/hooks/useHasPick.ts b/frontend/techpick-extension/src/hooks/useHasPick.ts index 2efa74769..62a6f39e7 100644 --- 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(); + const [data, setData] = useState(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/types/GetPickByUrlResponseType.ts b/frontend/techpick-extension/src/types/GetPickByUrlResponseType.ts index 8359ffeec..21c1a1bf7 100644 --- 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 new file mode 100644 index 000000000..a285d614f --- /dev/null +++ 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'] +>; diff --git a/frontend/techpick-extension/src/types/index.ts b/frontend/techpick-extension/src/types/index.ts index d4ce66691..fb299b9d0 100644 --- a/frontend/techpick-extension/src/types/index.ts +++ b/frontend/techpick-extension/src/types/index.ts @@ -16,3 +16,4 @@ export type { GetBasicFolderListType } from './GetBasicFolderListType'; export type { GetRootFolderChildFoldersResponseType } from './GetRootFolderChildFoldersResponseType'; export type { FolderType } from './FolderType'; export type { TabInfoFromWorkerMessageType } from './TabInfoFromWorkerMessageType'; +export type { PickInfoType } from './PickInfoType'; From 5c77dc573d36ff25d62372e63df182e21e816a58 Mon Sep 17 00:00:00 2001 From: dmdgpdi <33450285+dmdgpdi@users.noreply.github.com> Date: Wed, 11 Dec 2024 19:54:12 +0900 Subject: [PATCH 4/9] =?UTF-8?q?fix:=20=EC=88=98=EC=A0=95=20=EC=8B=9C?= =?UTF-8?q?=EC=97=90=20=EA=B8=B0=EC=A1=B4=20=ED=94=BD=EC=9D=B4=20=EB=B3=B4?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=95=8A=EB=8D=98=20=EB=B6=80=EB=B6=84=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/techpick-extension/src/components/UpdatePickForm.tsx | 1 - frontend/techpick-extension/src/pages/BookmarkPage.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/techpick-extension/src/components/UpdatePickForm.tsx b/frontend/techpick-extension/src/components/UpdatePickForm.tsx index e99587b60..b4cf32538 100644 --- 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/pages/BookmarkPage.tsx b/frontend/techpick-extension/src/pages/BookmarkPage.tsx index 1d175868c..0e1809940 100644 --- a/frontend/techpick-extension/src/pages/BookmarkPage.tsx +++ b/frontend/techpick-extension/src/pages/BookmarkPage.tsx @@ -68,7 +68,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)) From 7c480a280fbed20957058c31499a627ce2b047ee Mon Sep 17 00:00:00 2001 From: dmdgpdi <33450285+dmdgpdi@users.noreply.github.com> Date: Wed, 11 Dec 2024 20:00:23 +0900 Subject: [PATCH 5/9] =?UTF-8?q?refactor:=20fetchTagList=EB=A5=BC=20Bookmar?= =?UTF-8?q?kPage=EC=97=90=EC=84=9C=20=ED=98=B8=EC=B6=9C=ED=95=98=EA=B2=8C?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/TagAutocompleteDialog.tsx | 17 ++--------------- .../src/pages/BookmarkPage.tsx | 8 ++++++++ 2 files changed, 10 insertions(+), 15 deletions(-) diff --git a/frontend/techpick-extension/src/components/TagAutocompleteDialog.tsx b/frontend/techpick-extension/src/components/TagAutocompleteDialog.tsx index 4b4a769ae..822e6d686 100644 --- 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(false); const randomNumber = useRef(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/pages/BookmarkPage.tsx b/frontend/techpick-extension/src/pages/BookmarkPage.tsx index 0e1809940..9c478cb8e 100644 --- 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() { @@ -80,6 +81,13 @@ export function BookmarkPage() { [pickData, replaceSelectedTagList, tagList] ); + useEffect( + function fetchTagList() { + fetchingTagList(); + }, + [fetchingTagList] + ); + if (isGetPickInfoLoading || isFolderInfoListLoading) { return (
From 59404e29194973c0a27edfb10dda6c6713ec0ebc Mon Sep 17 00:00:00 2001 From: dmdgpdi <33450285+dmdgpdi@users.noreply.github.com> Date: Wed, 11 Dec 2024 20:03:26 +0900 Subject: [PATCH 6/9] =?UTF-8?q?feat:=20=EC=97=90=EB=9F=AC=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/techpick-extension/src/pages/ErrorPage.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/frontend/techpick-extension/src/pages/ErrorPage.tsx b/frontend/techpick-extension/src/pages/ErrorPage.tsx index add94bfcd..143735467 100644 --- a/frontend/techpick-extension/src/pages/ErrorPage.tsx +++ b/frontend/techpick-extension/src/pages/ErrorPage.tsx @@ -1,19 +1,13 @@ -import { useRouteError } from 'react-router-dom'; import { Text, Gap } from '@/libs/@components'; import { errorPageLayout } from './ErrorPage.css'; export function ErrorPage() { - const error = useRouteError(); - return (
-

Error가 발생했습니다.

+

죄송합니다. 에러가 발생했습니다.

 - -

{error instanceof Error ? error.message : '알 수 없는 에러'}

- 다시 확장 프로그램을 켜주세요.
From e6faf503300dd9a0e1a7dcb5f3e602487dc0f465 Mon Sep 17 00:00:00 2001 From: dmdgpdi <33450285+dmdgpdi@users.noreply.github.com> Date: Wed, 11 Dec 2024 20:13:15 +0900 Subject: [PATCH 7/9] =?UTF-8?q?design:=20=EC=97=90=EB=9F=AC=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/techpick-extension/src/pages/ErrorPage.css.ts | 4 ++-- frontend/techpick-extension/src/pages/ErrorPage.tsx | 6 +++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/frontend/techpick-extension/src/pages/ErrorPage.css.ts b/frontend/techpick-extension/src/pages/ErrorPage.css.ts index 13eb27591..8fbcfcd9f 100644 --- 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 index 143735467..9e6a6b6cc 100644 --- a/frontend/techpick-extension/src/pages/ErrorPage.tsx +++ b/frontend/techpick-extension/src/pages/ErrorPage.tsx @@ -5,7 +5,11 @@ export function ErrorPage() { return (
-

죄송합니다. 에러가 발생했습니다.

+

죄송합니다.

+ + + + 에러가 발생했습니다. From 7fdf8a6a8be97cd40298b96ae9a821e8f88a56d4 Mon Sep 17 00:00:00 2001 From: dmdgpdi <33450285+dmdgpdi@users.noreply.github.com> Date: Wed, 11 Dec 2024 20:35:11 +0900 Subject: [PATCH 8/9] =?UTF-8?q?feat:=20TagAutocompleteDialog=EB=A5=BC=20?= =?UTF-8?q?=EC=97=B4=20=EB=95=8C,=20=EC=9D=B8=ED=92=8B=EC=9C=BC=EB=A1=9C?= =?UTF-8?q?=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/TagAutocompleteDialog.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/frontend/techpick-extension/src/components/TagAutocompleteDialog.tsx b/frontend/techpick-extension/src/components/TagAutocompleteDialog.tsx index 822e6d686..afd1585e3 100644 --- a/frontend/techpick-extension/src/components/TagAutocompleteDialog.tsx +++ b/frontend/techpick-extension/src/components/TagAutocompleteDialog.tsx @@ -91,6 +91,14 @@ export function TagAutocompleteDialog({ } }; + useEffect(() => { + if (open) { + requestAnimationFrame(() => { + focusTagInput(); + }); + } + }, [open]); + useEffect( function checkIsCreatableTag() { const isUnique = !tagList.some((tag) => tag.name === tagInputValue); From 6f75463e1e2817f84cc589b4ea6caba8b8f5e971 Mon Sep 17 00:00:00 2001 From: dmdgpdi <33450285+dmdgpdi@users.noreply.github.com> Date: Wed, 11 Dec 2024 20:44:48 +0900 Subject: [PATCH 9/9] =?UTF-8?q?design:=20=ED=83=AD=20=EC=9D=B4=EB=8F=99=20?= =?UTF-8?q?=EC=8B=9C=EC=9D=98=20=EC=83=89=EA=B9=94=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/CreatePickForm.css.ts | 12 ++++++++++++ .../src/components/CreatePickForm.tsx | 5 +++-- .../src/components/UpdatePickForm.tsx | 5 +++-- 3 files changed, 18 insertions(+), 4 deletions(-) diff --git a/frontend/techpick-extension/src/components/CreatePickForm.css.ts b/frontend/techpick-extension/src/components/CreatePickForm.css.ts index ae7b33f19..2c09c2532 100644 --- a/frontend/techpick-extension/src/components/CreatePickForm.css.ts +++ b/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', diff --git a/frontend/techpick-extension/src/components/CreatePickForm.tsx b/frontend/techpick-extension/src/components/CreatePickForm.tsx index 619bf6085..29067d599 100644 --- a/frontend/techpick-extension/src/components/CreatePickForm.tsx +++ b/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({ />
diff --git a/frontend/techpick-extension/src/components/UpdatePickForm.tsx b/frontend/techpick-extension/src/components/UpdatePickForm.tsx index b4cf32538..8a79080a5 100644 --- a/frontend/techpick-extension/src/components/UpdatePickForm.tsx +++ b/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'; @@ -107,8 +108,8 @@ export function UpdatePickForm({
- -

app.techpick.org

+ +

app.techpick.org

수정하기