diff --git a/src/search/components/ResultList/ResultList.tsx b/src/search/components/ResultList/ResultList.tsx index 57f01764..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'; @@ -38,6 +39,7 @@ export const ResultList = () => { {data?.pages.map((page) => { return page.resultList.map((item, itemIndex) => { const isLastItem = page.resultList.length === itemIndex + 1; + const domain = extractOrigin(item.link); return (
{ > window.open(item.link)} ref={isLastItem ? lastElementRef : null} /> diff --git a/src/search/components/ResultList/ResultListItem.style.ts b/src/search/components/ResultList/ResultListItem.style.ts index 151040eb..83e2eb8e 100644 --- a/src/search/components/ResultList/ResultListItem.style.ts +++ b/src/search/components/ResultList/ResultListItem.style.ts @@ -43,6 +43,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 507f55cb..492a4234 100644 --- a/src/search/components/ResultList/ResultListItem.tsx +++ b/src/search/components/ResultList/ResultListItem.tsx @@ -7,37 +7,48 @@ import { onErrorImg } from '@/search/utils/onErrorImg'; import { StyledContent, + StyledContentWrap, StyledDate, - StyledLinkImageWrap, + StyledDomain, + StyledInformationWrap, StyledLinkImage, + StyledLinkImageWrap, StyledLinkTitle, StyledResultListItem, StyledThumbnail, StyledThumbnailCountBox, StyledThumbnailImage, StyledTitle, - StyledContentWrap, - StyledInformationWrap, } 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 isVerticalLayout = thumbnail.length >= RESULT_LIST_ITEM_THUMBNAIL_LENGTH; const isHorizontalLayout = !isVerticalLayout && thumbnail.length > 0; + const handleDomainClick = (e: React.MouseEvent) => { + e.stopPropagation(); + if (domain) { + window.open(domain); + } + }; return ( - - - - - {source} + + + + + + {source} + ยท diff --git a/src/search/utils/extractOrigin.ts b/src/search/utils/extractOrigin.ts new file mode 100644 index 00000000..5afcebd6 --- /dev/null +++ b/src/search/utils/extractOrigin.ts @@ -0,0 +1,8 @@ +export const extractOrigin = (url: string): string => { + try { + const { origin } = new URL(url); + return origin; + } catch (error) { + return url; + } +};