refactor: 즐겨찾기 기능 -> render props 패턴 적용

techeer-sv · May 14, 2024 · 3f31c76 · 3f31c76
1 parent eeaa602
commit 3f31c76
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 67 deletions.
diff --git 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<HTMLOrSVGElement>) => void;
+    isFavorites: boolean;
+  }) => React.ReactNode;
 }
 
-const ResultList = ({
-  location,
-  searchResult,
-  toggleFavorites,
-}: ResultProps) => {
+const ResultList = ({ searchResult, renderBookmark }: ResultProps) => {
   const [isFavorites, setIsFavorites] = useState<boolean>(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<HTMLOrSVGElement>) => {
+    e.stopPropagation();
+    setIsFavorites((prev) => !prev);
+  };
+
   return (
-    <Wrapper onClick={() => gotoLink(searchResult.id)}>
+    <Wrapper
+      onClick={() =>
+        (window.location.href = `https://clinicaltrialskorea.com/studies/${searchResult.id}`)
+      }
+    >
       <Head>
         <Title>{searchResult.lead_sponsor_name}</Title>
-
-        {isFavorites ? (
-          <Bookmark
-            onClick={(e: React.MouseEvent<HTMLOrSVGElement>) => {
-              e.stopPropagation();
-              if (location === "main") {
-                setIsFavorites((prev) => !prev);
-                toggleFavorites(searchResult);
-              }
-
-              if (location === "favorites") {
-                toggleFavorites();
-              }
-            }}
-            width="16"
-            height="16"
-            cursor={"pointer"}
-          />
-        ) : (
-          <BookmarkBorder
-            onClick={(e: React.MouseEvent<HTMLOrSVGElement>) => {
-              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 })}
       </Head>
       <Contents>{searchResult.title}</Contents>
       <Location>실시기관지역 | {searchResult.locations[0]?.city}</Location>

diff --git 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<ResultListType[]>([]);
   const { isOpen, closeModal, openModal } = useHandleModal();
   const [clickedIndex, setClickedIndex] = useState<number>(0);
+
   useEffect(() => {
     const favorites = localStorage.getItem("favorites");
     if (favorites) {
@@ -30,19 +33,41 @@ const Favorites = () => {
     setFavoritesLists(newFavorites);
     closeModal();
   };
+
   return (
     <Page>
       <FavoritesLists>
         {favoritesLists?.map((list: ResultListType, index: number) => {
           return (
             <ResultItem key={list.id} index={index}>
               <ResultList
-                location="favorites"
-                toggleFavorites={() => {
-                  setClickedIndex(index);
-                  openModal();
-                }}
                 searchResult={list}
+                renderBookmark={({ isFavorites }) =>
+                  isFavorites ? (
+                    <Bookmark
+                      onClick={(e: React.MouseEvent<HTMLOrSVGElement>) => {
+                        e.stopPropagation();
+                        setClickedIndex(index);
+                        openModal();
+                      }}
+                      width="16"
+                      height="16"
+                      cursor="pointer"
+                    />
+                  ) : (
+                    <BookmarkBorder
+                      onClick={(e: React.MouseEvent<HTMLOrSVGElement>) => {
+                        e.stopPropagation();
+                        setClickedIndex(index);
+                        openModal();
+                      }}
+                      width="16"
+                      height="16"
+                      fill="#007BE9"
+                      cursor="pointer"
+                    />
+                  )
+                }
               />
             </ResultItem>
           );

diff --git 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 (
               <ResultItem key={result.id} index={index}>
                 <ResultList
-                  location="main"
-                  toggleFavorites={() => toggleFavorites(result)}
                   searchResult={result}
+                  renderBookmark={({ onClick, isFavorites }) =>
+                    isFavorites ? (
+                      <Bookmark
+                        onClick={(e: React.MouseEvent<HTMLOrSVGElement>) => {
+                          e.stopPropagation();
+                          onClick(e);
+                          toggleFavorites(result);
+                        }}
+                        width="16"
+                        height="16"
+                        cursor="pointer"
+                      />
+                    ) : (
+                      <BookmarkBorder
+                        onClick={(e: React.MouseEvent<HTMLOrSVGElement>) => {
+                          e.stopPropagation();
+                          onClick(e);
+                          toggleFavorites(result);
+                        }}
+                        width="16"
+                        height="16"
+                        fill="#007BE9"
+                        cursor="pointer"
+                      />
+                    )
+                  }
                 />
               </ResultItem>
             );