diff --git a/src/components/main/ResultList.tsx b/src/components/main/ResultList.tsx index aaf63b8..fc2534c 100644 --- a/src/components/main/ResultList.tsx +++ b/src/components/main/ResultList.tsx @@ -1,83 +1,44 @@ -import Bookmark from "../../common/Image/Bookmark"; -import BookmarkBorder from "../../common/Image/BookmarkBorder"; -import { ResultListType } from "../../types/searchResult"; import React, { useEffect, useState } from "react"; import { styled } from "styled-components"; +import { ResultListType } from "../../types/searchResult"; interface ResultProps { searchResult: ResultListType; - toggleFavorites: (searchResult?: ResultListType) => void | (() => void); - location: "main" | "favorites"; + renderBookmark: (props: { + onClick: (e: React.MouseEvent) => void; + isFavorites: boolean; + }) => React.ReactNode; } -const ResultList = ({ - location, - searchResult, - toggleFavorites, -}: ResultProps) => { +const ResultList = ({ searchResult, renderBookmark }: ResultProps) => { const [isFavorites, setIsFavorites] = useState(false); - const gotoLink = (id: number) => { - window.location.href = `https://clinicaltrialskorea.com/studies/${id}`; - }; - useEffect(() => { const favorites = localStorage.getItem("favorites"); if (favorites) { const favoritesData = JSON.parse(favorites); - - const isExist = favoritesData?.some( - (item: ResultListType) => item.id === searchResult.id + setIsFavorites( + favoritesData.some( + (item: ResultListType) => item.id === searchResult.id + ) ); - if (isExist) { - setIsFavorites(true); - } else { - setIsFavorites(false); - } } }, [searchResult.id]); + const handleBookmarkClick = (e: React.MouseEvent) => { + e.stopPropagation(); + setIsFavorites((prev) => !prev); + }; + return ( - gotoLink(searchResult.id)}> + + (window.location.href = `https://clinicaltrialskorea.com/studies/${searchResult.id}`) + } + > {searchResult.lead_sponsor_name} - - {isFavorites ? ( - ) => { - e.stopPropagation(); - if (location === "main") { - setIsFavorites((prev) => !prev); - toggleFavorites(searchResult); - } - - if (location === "favorites") { - toggleFavorites(); - } - }} - width="16" - height="16" - cursor={"pointer"} - /> - ) : ( - ) => { - e.stopPropagation(); - if (location === "main") { - setIsFavorites((prev) => !prev); - toggleFavorites(searchResult); - } - - if (location === "favorites") { - toggleFavorites(); - } - }} - width="16" - height="16" - fill="#007BE9" - cursor={"pointer"} - /> - )} + {renderBookmark({ onClick: handleBookmarkClick, isFavorites })} {searchResult.title} 실시기관지역 | {searchResult.locations[0]?.city} diff --git a/src/pages/Favorites.tsx b/src/pages/Favorites.tsx index b80aafe..a9a5fbf 100644 --- a/src/pages/Favorites.tsx +++ b/src/pages/Favorites.tsx @@ -11,11 +11,14 @@ import { NO_FAVORITES_MESSAGE, NO_FAVORITES_MESSAGE_DESCRIPTION, } from "../constants/search"; +import Bookmark from "../common/Image/Bookmark"; +import BookmarkBorder from "../common/Image/BookmarkBorder"; const Favorites = () => { const [favoritesLists, setFavoritesLists] = useState([]); const { isOpen, closeModal, openModal } = useHandleModal(); const [clickedIndex, setClickedIndex] = useState(0); + useEffect(() => { const favorites = localStorage.getItem("favorites"); if (favorites) { @@ -30,6 +33,7 @@ const Favorites = () => { setFavoritesLists(newFavorites); closeModal(); }; + return ( @@ -37,12 +41,33 @@ const Favorites = () => { return ( { - setClickedIndex(index); - openModal(); - }} searchResult={list} + renderBookmark={({ isFavorites }) => + isFavorites ? ( + ) => { + e.stopPropagation(); + setClickedIndex(index); + openModal(); + }} + width="16" + height="16" + cursor="pointer" + /> + ) : ( + ) => { + e.stopPropagation(); + setClickedIndex(index); + openModal(); + }} + width="16" + height="16" + fill="#007BE9" + cursor="pointer" + /> + ) + } /> ); diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx index 5ebb39b..bdc15f1 100644 --- a/src/pages/Main.tsx +++ b/src/pages/Main.tsx @@ -10,6 +10,8 @@ import NoResult from "../components/main/NoResult"; import useSearchResult from "../hooks/useSearchResult"; import ResultList from "../components/main/ResultList"; import { ResultListType } from "../types/searchResult"; +import Bookmark from "../common/Image/Bookmark"; +import BookmarkBorder from "../common/Image/BookmarkBorder"; const Main = () => { const { @@ -47,9 +49,33 @@ const Main = () => { return ( toggleFavorites(result)} searchResult={result} + renderBookmark={({ onClick, isFavorites }) => + isFavorites ? ( + ) => { + e.stopPropagation(); + onClick(e); + toggleFavorites(result); + }} + width="16" + height="16" + cursor="pointer" + /> + ) : ( + ) => { + e.stopPropagation(); + onClick(e); + toggleFavorites(result); + }} + width="16" + height="16" + fill="#007BE9" + cursor="pointer" + /> + ) + } /> );