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