diff --git a/src/pages/OnboardingPage/StepService/AllowedServices/AllowedServices.tsx b/src/pages/OnboardingPage/StepService/AllowedServices/AllowedServices.tsx index ff3a6932..ffe7c87b 100644 --- a/src/pages/OnboardingPage/StepService/AllowedServices/AllowedServices.tsx +++ b/src/pages/OnboardingPage/StepService/AllowedServices/AllowedServices.tsx @@ -2,6 +2,7 @@ import { ButtonHTMLAttributes, InputHTMLAttributes, KeyboardEvent, ReactNode, us import HomeLargeBtn from '@/shared/components/ButtonHomeLarge/ButtonHomeLarge'; import ColorPalette from '@/shared/components/ColorPallete/ColorPallete'; +import FaviconImage from '@/shared/components/FaviconImage/FaviconImage'; import Spacer from '@/shared/components/Spacer/Spacer'; import useClickOutside from '@/shared/hooks/useClickOutside'; @@ -155,7 +156,7 @@ const AllowedServiceItem = ({ onClick, ...props }: AllowedServiceItemProps) => { return (
  • - {`${props.siteName} +

    {props.siteName}
    diff --git a/src/pages/OnboardingPage/StepService/StepService.tsx b/src/pages/OnboardingPage/StepService/StepService.tsx index be4b9d69..0cb21e95 100644 --- a/src/pages/OnboardingPage/StepService/StepService.tsx +++ b/src/pages/OnboardingPage/StepService/StepService.tsx @@ -11,13 +11,13 @@ import { ColorPaletteType } from '@/shared/types/allowedService'; import { AllowedSiteType, AllowedSitesType } from '@/shared/types/allowedSites'; import type { FieldType } from '@/shared/types/fileds'; -import { FIELDS } from '@/shared/constants/fields'; -import { SUGGESTED_STIES } from '@/shared/constants/suggestedSites'; +import { FIELDS, FIELDS_MAP } from '@/shared/constants/fields'; import BackIcon from '@/shared/assets/svgs/ic_back_btn.svg?react'; import { useGetUrlInfo } from '@/shared/apisV2/common/common.mutations'; import { usePostInterestArea } from '@/shared/apisV2/onboarding/onboarding.mutations'; +import { useGetSuggestedSites } from '@/shared/apisV2/onboarding/onboarding.queries'; import AllowedService from './AllowedServices/AllowedServices'; import ButtonService from './ButtonService/ButtonService'; @@ -40,6 +40,7 @@ const StepService = ({ setStep, selectedField }: StepServiceProps) => { const { mutateAsync: getUrlInfo, reset: resetGetUrlInfo, isError, isPending } = useGetUrlInfo(); const { mutate: postInterestArea } = usePostInterestArea(); + const { data: suggestedSites } = useGetSuggestedSites(); const getDomainFromUrl = (url: string) => { return url.replace(/^(https?:\/\/)?(www\.)?/, '').toLowerCase(); @@ -116,7 +117,7 @@ const StepService = ({ setStep, selectedField }: StepServiceProps) => { postInterestArea( { allowedSites: selectedServices, - interestArea: selectedField, + interestArea: FIELDS_MAP[selectedField], name: categoryNameInput, colorCode: selectedColor, }, @@ -158,8 +159,8 @@ const StepService = ({ setStep, selectedField }: StepServiceProps) => {

    작업 시 사용할 서비스들을 입력해주세요

    - 필요한 서비스에만 들어가고, 나의 온전한 집중 시간을 기록할 수 있어요. 만든 모립세트는 언제든 편집할 수 - 있어요. + 필요한 서비스에만 들어가고, 나의 온전한 집중 시간을 기록할 수 있어요. 만든 허용서비스 리스트는 언제든 편집할 + 수 있어요.

    @@ -170,7 +171,7 @@ const StepService = ({ setStep, selectedField }: StepServiceProps) => { - {SUGGESTED_STIES[activeTab].map((site) => ( + {suggestedSites?.data?.[FIELDS_MAP[activeTab]].map((site: AllowedSiteType) => ( => { + const { data } = await authClient.get(ONBOARDING_URL.GET_SUGGESTED_SITES); + return data; +}; diff --git a/src/shared/apisV2/onboarding/onboarding.keys.ts b/src/shared/apisV2/onboarding/onboarding.keys.ts new file mode 100644 index 00000000..5b0d25db --- /dev/null +++ b/src/shared/apisV2/onboarding/onboarding.keys.ts @@ -0,0 +1,3 @@ +export const onboardingKeys = { + suggestedSites: ['suggestedSites'] as const, +}; diff --git a/src/shared/apisV2/onboarding/onboarding.queries.ts b/src/shared/apisV2/onboarding/onboarding.queries.ts new file mode 100644 index 00000000..c269df4e --- /dev/null +++ b/src/shared/apisV2/onboarding/onboarding.queries.ts @@ -0,0 +1,11 @@ +import { useQuery } from '@tanstack/react-query'; + +import { getSuggestedSites } from './onboarding.api'; +import { onboardingKeys } from './onboarding.keys'; + +export const useGetSuggestedSites = () => { + return useQuery({ + queryKey: onboardingKeys.suggestedSites, + queryFn: getSuggestedSites, + }); +}; diff --git a/src/shared/constants/suggestedSites.ts b/src/shared/constants/suggestedSites.ts deleted file mode 100644 index 6aa42c7a..00000000 --- a/src/shared/constants/suggestedSites.ts +++ /dev/null @@ -1,244 +0,0 @@ -import { FieldType } from '@/shared/types/fileds'; - -import { AllowedSiteType } from '../types/allowedSites'; - -// LINK: https://www.notion.so/11a97d212fa28029992bdc1bef53c766?pvs=4 - -export const SUGGESTED_STIES: Record = { - 비즈니스: [ - { - favicon: 'https://www.gstatic.com/trends/favicon.ico', - siteName: 'Google Trends', - pageName: 'Google Trends', - siteUrl: 'https://trends.google.com/trends/?geo=US', - }, - { - favicon: 'https://trello.com/favicon.ico', - siteName: 'Trello', - pageName: 'Trello', - siteUrl: 'https://trello.com/en', - }, - { - favicon: `https://a.sfdcstatic.com/shared/images/c360-nav/salesforce-no-type-logo.svg`, - siteName: 'Salesforce', - pageName: 'Salesforce Korea', - siteUrl: 'https://www.salesforce.com/kr/?ir=1', - }, - { - favicon: 'https://slack.com/favicon.ico', - siteName: 'Slack', - pageName: 'Slack - 협업툴', - siteUrl: 'https://slack.com/intl/ko-kr/', - }, - { - favicon: 'https://cfl.dropboxstatic.com/static/metaserver/static/images/favicon.ico', - siteName: 'Dropbox', - pageName: 'Dropbox for Business', - siteUrl: 'https://www.dropbox.com/business', - }, - ], - 디자인: [ - { - favicon: 'https://static.figma.com/uploads/b6df2735e4cb368306acf5480b50f96e69f96099', - siteName: '피그마', - pageName: 'Figma - 디자인 협업툴', - siteUrl: 'https://www.figma.com/', - }, - { - favicon: 'https://unsplash.com/favicon.ico', - siteName: '언스플레쉬', - pageName: 'Unsplash', - siteUrl: 'https://unsplash.com/ko', - }, - { - favicon: 'https://www.google.com/s2/favicons?domain=freepik.com&sz=128', - siteName: '프리픽', - pageName: 'Freepik', - siteUrl: 'https://www.freepik.com/', - }, - { - favicon: 'https://kr.pinterest.com/favicon.ico', - siteName: '핀터레스트', - pageName: 'Pinterest', - siteUrl: 'https://kr.pinterest.com/', - }, - { - favicon: 'https://a5.behance.net/37b8f834c44e77b0120ebd66481759ccebaf636d/img/site/favicon.png?cb=264615658', - siteName: '비핸스', - pageName: 'Behance', - siteUrl: 'https://www.behance.net/', - }, - { - favicon: 'https://cdn-bastani.stunning.kr/static/feature/notefolioFavicon/favicon.ico', - siteName: '노트폴리오', - pageName: 'Notefolio', - siteUrl: 'https://notefolio.net/', - }, - { - favicon: `https://cdn.dribbble.com/assets/favicon-192x192-d70ad402693bdd1a8460da7f9f3c590e817da7369c5287789ac968cf6947d214.png`, - siteName: '드리블', - pageName: 'Dribbble', - siteUrl: 'https://dribbble.com/', - }, - ], - 마케팅: [ - { - favicon: 'https://newneek.co/icons/android-icon-192x192.png', - siteName: '뉴닉', - pageName: 'Newneek', - siteUrl: 'https://newneek.co/', - }, - { - favicon: 'https://www.careet.net/content/images/favicon.ico', - siteName: '캐릿', - pageName: 'Careet', - siteUrl: 'https://www.careet.net/', - }, - { - favicon: 'https://tsn.dmcmedia.co.kr/dmcreportCDN/DMCReportFront/images/favicon.png', - siteName: 'DMC리포트', - pageName: 'DMC Report', - siteUrl: 'https://www.dmcreport.co.kr/', - }, - { - favicon: 'https://www.mezzomedia.co.kr/images/favicon.ico', - siteName: '메조 미디어', - pageName: 'Mezzo Media', - siteUrl: 'https://www.mezzomedia.co.kr/', - }, - { - favicon: 'https://www.nasmedia.co.kr/wp-content/themes/nasmedia/images/favicon/favicon-180.png', - siteName: '나스 미디어', - pageName: 'Nas Media', - siteUrl: 'https://www.nasmedia.co.kr/', - }, - ], - 기획: [ - { - favicon: 'https://disquiet.io/favicons/favicon-96.png', - siteName: '디스콰이엇', - pageName: 'Disquiet', - siteUrl: 'https://disquiet.io/', - }, - { - favicon: 'https://brunch.co.kr/favicon.ico', - siteName: '브런치', - pageName: 'Brunch', - siteUrl: 'https://brunch.co.kr/', - }, - { - favicon: 'https://www.notion.so/images/logo-ios.png', - siteName: '노션', - pageName: 'Notion', - siteUrl: 'https://www.notion.so/', - }, - { - favicon: 'https://ph-static.imgix.net/ph-favicon-brand-500.ico?auto=format', - siteName: 'Product Hunt', - pageName: 'Product Hunt', - siteUrl: 'https://www.producthunt.com/', - }, - { - favicon: 'https://static.figma.com/uploads/b6df2735e4cb368306acf5480b50f96e69f96099', - siteName: '피그마', - pageName: 'Figma - 디자인 협업툴', - siteUrl: 'https://www.figma.com/', - }, - ], - 개발: [ - { - favicon: 'https://chatgpt.com/favicon.ico', - siteName: '챗지피티', - pageName: 'ChatGPT', - siteUrl: 'https://chatgpt.com/', - }, - { - favicon: 'https://www.acmicpc.net/favicon.ico', - siteName: '백준', - pageName: 'Baekjoon Online Judge', - siteUrl: 'https://www.acmicpc.net/', - }, - { - favicon: 'https://github.com/favicon.ico', - siteName: 'GitHub', - pageName: 'GitHub', - siteUrl: 'https://github.com/', - }, - { - favicon: 'https://slack.com/favicon.ico', - siteName: 'Slack', - pageName: 'Slack', - siteUrl: 'https://slack.com/intl/ko-kr/', - }, - { - favicon: 'https://stackoverflow.com/favicon.ico', - siteName: 'Stack Overflow', - pageName: 'Stack Overflow', - siteUrl: 'https://stackoverflow.com/', - }, - ], - 공부: [ - { - favicon: 'https://www.notion.so/images/logo-ios.png', - siteName: '노션', - pageName: 'Notion', - siteUrl: 'https://www.notion.so/', - }, - { - favicon: 'https://www.copykiller.com/common/img/logo/favicon_ck_platform_32x32.png', // 더 개선 필요 - siteName: '카피킬러라이트', - pageName: 'CopyKiller Lite', - siteUrl: 'https://www.copykiller.com/', - }, - { - favicon: 'https://www.riss.kr/commons/images/favicon.ico', - siteName: 'RISS', - pageName: 'RISS', - siteUrl: 'https://www.riss.kr/', - }, - { - favicon: 'https://drive.google.com/favicon.ico', - siteName: 'Google Drive', - pageName: 'Google Drive', - siteUrl: 'https://drive.google.com/', - }, - { - favicon: 'https://meet.google.com/favicon.ico', - siteName: 'Google Workspace', - pageName: 'Google Workspace', - siteUrl: 'https://meet.google.com/', - }, - ], - 기타: [ - { - favicon: 'https://papago.naver.com/favicon.ico', - siteName: '네이버 파파고', - pageName: 'Naver Papago', - siteUrl: 'https://papago.naver.com/', - }, - { - favicon: 'https://chatgpt.com/favicon.ico', - siteName: '챗지피티', - pageName: 'ChatGPT', - siteUrl: 'https://chatgpt.com/', - }, - { - favicon: 'https://www.ilovepdf.com/favicon.ico', - siteName: 'iLovePDF', - pageName: 'iLovePDF', - siteUrl: 'https://www.ilovepdf.com/ko', - }, - { - favicon: 'https://www.hancomdocs.com/favicon.ico', - siteName: 'Hancomdocs', - pageName: 'Hancomdocs', - siteUrl: 'https://www.hancomdocs.com/home', - }, - { - favicon: 'https://ssl.gstatic.com/ui/v1/icons/mail/rfr/gmail.ico', - siteName: 'Gmail', - pageName: 'Gmail', - siteUrl: 'https://mail.google.com/mail/', - }, - ], -}; diff --git a/src/shared/layout/Sidebar/Sidebar.tsx b/src/shared/layout/Sidebar/Sidebar.tsx index 32ceb5b7..c89cc5d4 100644 --- a/src/shared/layout/Sidebar/Sidebar.tsx +++ b/src/shared/layout/Sidebar/Sidebar.tsx @@ -34,7 +34,9 @@ const Sidebar = () => { return ( <> -