From 654becb9c2a86a95295787872aaf45b522da346f Mon Sep 17 00:00:00 2001 From: solmee Date: Wed, 28 Aug 2024 17:22:14 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=EB=A7=81=ED=81=AC=EC=9D=98=20?= =?UTF-8?q?=EC=83=81=EC=9C=84=20=EB=8F=84=EB=A9=94=EC=9D=B8=20=EC=B6=94?= =?UTF-8?q?=EC=B6=9C=ED=95=98=EB=8A=94=20=ED=95=A8=EC=88=98=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 --- src/search/components/ResultList/ResultList.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/search/components/ResultList/ResultList.tsx b/src/search/components/ResultList/ResultList.tsx index 57f01764..c3231c07 100644 --- a/src/search/components/ResultList/ResultList.tsx +++ b/src/search/components/ResultList/ResultList.tsx @@ -32,12 +32,22 @@ export const ResultList = () => { const { data: currentUser } = useGetUserData(); const userId = currentUser?.email || ''; + const handleExtractDomain = (url: string) => { + try { + const { origin } = new URL(url); + return origin; + } catch (error) { + return url; + } + }; + return ( }> }> {data?.pages.map((page) => { return page.resultList.map((item, itemIndex) => { const isLastItem = page.resultList.length === itemIndex + 1; + const domain = handleExtractDomain(item.link); return (
{ > window.open(item.link)} ref={isLastItem ? lastElementRef : null} /> From 7d5b24ce2eb4ea08940dba9250ff8ae9c641e9f6 Mon Sep 17 00:00:00 2001 From: solmee Date: Wed, 28 Aug 2024 17:23:16 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=EB=8F=84=EB=A9=94=EC=9D=B8?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=A7=81=ED=81=AC=20=EC=97=AC=EB=8A=94=20?= =?UTF-8?q?=EB=B6=80=EB=B6=84=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ResultList/ResultListItem.style.ts | 11 ++++++++ .../components/ResultList/ResultListItem.tsx | 26 ++++++++++++++----- 2 files changed, 30 insertions(+), 7 deletions(-) diff --git a/src/search/components/ResultList/ResultListItem.style.ts b/src/search/components/ResultList/ResultListItem.style.ts index 58f2d979..9cc0ac37 100644 --- a/src/search/components/ResultList/ResultListItem.style.ts +++ b/src/search/components/ResultList/ResultListItem.style.ts @@ -47,6 +47,17 @@ export const StyledLinkImage = styled.img` export const StyledLinkTitle = styled.span` ${(props) => props.theme.typo.body1} color: ${(props) => props.theme.color.textSecondary}; + text-decoration: none; + + &:hover { + text-decoration: underline; + } +`; + +export const StyledDomain = styled.div` + cursor: pointer; + display: flex; + align-items: center; `; export const StyledDate = styled.span` diff --git a/src/search/components/ResultList/ResultListItem.tsx b/src/search/components/ResultList/ResultListItem.tsx index fc793c65..c43f62d2 100644 --- a/src/search/components/ResultList/ResultListItem.tsx +++ b/src/search/components/ResultList/ResultListItem.tsx @@ -17,23 +17,35 @@ import { StyledTitle, StyledContentWrap, StyledInformationWrap, + StyledDomain, } from './ResultListItem.style'; interface ResultListItemProps extends Pick, 'onClick'>, - ResultListItemResponse {} + ResultListItemResponse { + domain?: string; +} export const ResultListItem = forwardRef( - ({ title, content, date, thumbnail, favicon, source, onClick }, ref) => { + ({ title, content, date, thumbnail, favicon, source, domain, onClick }, ref) => { + const handleDomainClick = (e: React.MouseEvent) => { + e.stopPropagation(); + if (domain) { + window.open(domain, '_blank'); + } + }; + return ( - - - - - {source} + + + + + + {source} + ยท From f48abcb463257d174f2e20a32477bec034ae4c9c Mon Sep 17 00:00:00 2001 From: solmee Date: Thu, 29 Aug 2024 02:13:27 +0900 Subject: [PATCH 3/4] =?UTF-8?q?refactor:=20=EC=83=81=EC=9C=84=20=EB=8F=84?= =?UTF-8?q?=EB=A9=94=EC=9D=B8=20=EC=B6=94=EC=B6=9C=ED=95=A8=EC=88=98?= =?UTF-8?q?=EB=A5=BC=20utils=EB=A1=9C=20=EB=B6=84=EB=A6=AC=20=EB=B0=8F=20R?= =?UTF-8?q?esultList=EC=97=90=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/search/components/ResultList/ResultList.tsx | 12 ++---------- src/search/utils/extractOrigin.ts | 8 ++++++++ 2 files changed, 10 insertions(+), 10 deletions(-) create mode 100644 src/search/utils/extractOrigin.ts diff --git a/src/search/components/ResultList/ResultList.tsx b/src/search/components/ResultList/ResultList.tsx index c3231c07..36570186 100644 --- a/src/search/components/ResultList/ResultList.tsx +++ b/src/search/components/ResultList/ResultList.tsx @@ -10,6 +10,7 @@ import { useScrollObserve } from '@/hooks/useScrollObserve'; import { useGetSearch } from '@/search/hooks/useGetSearch'; import { NoResult } from '@/search/pages/NoResult/NoResult'; import { SearchResponse } from '@/search/types/ResultListItem.type'; +import { extractOrigin } from '@/search/utils/extractOrigin'; import NoResultFallback from '../FallbackComponent/NoResultFallback'; @@ -32,22 +33,13 @@ export const ResultList = () => { const { data: currentUser } = useGetUserData(); const userId = currentUser?.email || ''; - const handleExtractDomain = (url: string) => { - try { - const { origin } = new URL(url); - return origin; - } catch (error) { - return url; - } - }; - return ( }> }> {data?.pages.map((page) => { return page.resultList.map((item, itemIndex) => { const isLastItem = page.resultList.length === itemIndex + 1; - const domain = handleExtractDomain(item.link); + const domain = extractOrigin(item.link); return (
{ + try { + const { origin } = new URL(url); + return origin; + } catch (error) { + return url; + } +}; From ef48e1bb8f7ab1e59526b87d386497b4a0e0ac18 Mon Sep 17 00:00:00 2001 From: solmee Date: Thu, 29 Aug 2024 02:18:10 +0900 Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20window.open()=EC=97=90=EC=84=9C?= =?UTF-8?q?=20=EA=B8=B0=EB=B3=B8=EA=B0=92=EC=9D=B8=20=5Fblank=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/search/components/ResultList/ResultListItem.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/search/components/ResultList/ResultListItem.tsx b/src/search/components/ResultList/ResultListItem.tsx index d1b5c04d..492a4234 100644 --- a/src/search/components/ResultList/ResultListItem.tsx +++ b/src/search/components/ResultList/ResultListItem.tsx @@ -7,18 +7,18 @@ import { onErrorImg } from '@/search/utils/onErrorImg'; import { StyledContent, + StyledContentWrap, StyledDate, - StyledLinkImageWrap, + StyledDomain, + StyledInformationWrap, StyledLinkImage, + StyledLinkImageWrap, StyledLinkTitle, StyledResultListItem, StyledThumbnail, StyledThumbnailCountBox, StyledThumbnailImage, StyledTitle, - StyledContentWrap, - StyledInformationWrap, - StyledDomain, } from './ResultListItem.style'; interface ResultListItemProps @@ -34,7 +34,7 @@ export const ResultListItem = forwardRef( const handleDomainClick = (e: React.MouseEvent) => { e.stopPropagation(); if (domain) { - window.open(domain, '_blank'); + window.open(domain); } };