2022-04-25

components/common/PageTemplate.tsx

@@ -21,7 +21,7 @@ const TemplateContainer = styled.div`
 `;
 
 const TemplateChildrenWrap = styled.div`
-  width: 1130px;
+  width: 1052px;
   min-height: calc(100vh - 74px);
   height: auto;
   display: flex;

components/header/style.ts

@@ -9,7 +9,7 @@ export const HeaderContainer = styled.div`
 `;
 
 export const HeaderWrap = styled.div`
-  width: 1130px;
+  width: 1052px;
   height: 100%;
   display: flex;
   align-items: center;

components/main/Main.tsx

@@ -1,5 +1,6 @@
 import { Coin } from "../../types/common/common.type";
 import MainCardList from "./mainCardList/MainCardList";
+import MainFavoriteCardList from "./mainFavoriteCardList/MainFavoriteCardList";
 import { MainContainer } from "./style";
 
 type Props = {
@@ -10,6 +11,7 @@ const Main = ({ data }: Props) => {
   return (
     <MainContainer>
       <MainCardList data={data === null ? null : data} />
+      <MainFavoriteCardList />
     </MainContainer>
   );
 };

components/main/mainCardList/mainCard/MainCard.tsx

@@ -2,21 +2,45 @@ import { Coin } from "../../../../types/common/common.type";
 import {
   MainCardContainer,
   MainCardDetailButton,
+  MainCardFavIcon,
   MainCardTitle,
+  MainCardTitleWrap,
 } from "./style";
 import { FiArrowRight } from "@react-icons/all-files/fi/FiArrowRight";
+import { FaRegStar } from "@react-icons/all-files/fa/FaRegStar";
+import { FaStar } from "@react-icons/all-files/fa/FaStar";
 import Link from "next/link";
+import useFavorites from "../../../../hooks/main/useFavorites";
+import { useRecoilValue } from "recoil";
+import { mainFavoriteAtom } from "../../../../store/main/main.store";
+import { useMemo, useState } from "react";
 
 type Props = {
   data: Coin;
 };
 
 const MainCard = ({ data }: Props) => {
+  const favorites = useRecoilValue(mainFavoriteAtom);
+  const isPick = useMemo(() => {
+    return favorites.find((prev) => prev === data.market) === undefined
+      ? false
+      : true;
+  }, [data.market, favorites]);
+
+  const [pick, setPick] = useState(isPick);
+
+  const { handlePick } = useFavorites({ pick, setPick });
+
   return (
     <MainCardContainer>
-      <MainCardTitle>
-        {data.korean_name}({data.english_name})
-      </MainCardTitle>
+      <MainCardTitleWrap>
+        <MainCardTitle>
+          {data.korean_name}({data.english_name})
+        </MainCardTitle>
+        <MainCardFavIcon onClick={() => handlePick(data.market)}>
+          {pick ? <FaStar /> : <FaRegStar />}
+        </MainCardFavIcon>
+      </MainCardTitleWrap>
       <MainCardDetailButton>
         <Link href={`/coinDetail/${data.market}`}>
           <a>

components/main/mainCardList/mainCard/style.ts

@@ -11,13 +11,28 @@ export const MainCardContainer = styled.div`
   padding: 20px;
 `;
 
+export const MainCardTitleWrap = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
 export const MainCardTitle = styled.h1`
   font-size: 14px;
   line-height: 1.86;
   font-weight: 700;
   color: ${({ theme }) => theme.contrast};
 `;
 
+export const MainCardFavIcon = styled.div`
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`;
+
 export const MainCardDetailButton = styled.button`
   background: none;
   border: 0px;

components/main/mainFavoriteCardList/MainFavoriteCardList.tsx

@@ -0,0 +1,12 @@
+import { Coin } from "../../../types/common/common.type";
+import { MainFavCardListContainer } from "./style";
+
+type Props = {
+  data: Coin[] | null;
+};
+
+const MainFavoriteCardList = () => {
+  return <MainFavCardListContainer></MainFavCardListContainer>;
+};
+
+export default MainFavoriteCardList;

components/main/mainFavoriteCardList/style.ts

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+export const MainFavCardListContainer = styled.div`
+  width: 516px;
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 20px;
+  row-gap: 20px;
+`;

components/main/style.ts

@@ -1,5 +1,6 @@
 import styled from "styled-components";
 
 export const MainContainer = styled.div`
-  background-color: ${({ theme }) => theme.backgroundColor};
+  display: flex;
+  justify-content: space-between;
 `;

constants/localStorage.contants.ts

@@ -0,0 +1 @@
+export const LOCAL_FAVORITES_KEY = "favorites" as const;

constants/product.constants.ts

@@ -2,7 +2,7 @@ export const COINS_MAX_NUM = 200 as const;
 
 export const COIN_DETAIL_CATEGORY = [
   { title: "일별시세" },
-  { title: "기업정보" },
+  { title: "화폐정보" },
 ] as const;
 
 export const COIN_TICKERS_START_DATE = "14" as const;

hooks/main/useFavorites.ts

@@ -0,0 +1,47 @@
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { useRecoilState } from "recoil";
+import { LOCAL_FAVORITES_KEY } from "../../constants/localStorage.contants";
+import { mainFavoriteAtom } from "../../store/main/main.store";
+import local from "../../util/local";
+
+type Props = {
+  pick: boolean;
+  setPick: Dispatch<SetStateAction<boolean>>;
+};
+
+const useFavorites = ({ pick, setPick }: Props) => {
+  const [favorites, setFavorites] = useRecoilState(mainFavoriteAtom);
+
+  const handlePick = (coinid: string) => {
+    handleFavorites(coinid, pick);
+    setPick((prev) => !prev);
+  };
+
+  const handleFavorites = (coinid: string, pick: boolean) => {
+    const copyFav = favorites;
+
+    if (!pick) {
+      const isOverlap = favorites.find((prev) => prev === coinid);
+
+      if (isOverlap !== undefined) {
+        return;
+      }
+
+      const addFav = copyFav.concat(coinid);
+
+      setFavorites(addFav);
+      local.set(LOCAL_FAVORITES_KEY, JSON.stringify(addFav));
+    } else {
+      const removeFav = copyFav.filter((prev) => prev !== coinid);
+      setFavorites(removeFav);
+      local.set(LOCAL_FAVORITES_KEY, JSON.stringify(removeFav));
+    }
+  };
+
+  return {
+    pick,
+    handlePick,
+  };
+};
+
+export default useFavorites;

store/main/main.store.ts

@@ -0,0 +1,11 @@
+import { atom } from "recoil";
+import { LOCAL_FAVORITES_KEY } from "../../constants/localStorage.contants";
+import local from "../../util/local";
+
+export const mainFavoriteAtom = atom<string[]>({
+  key: "mainFavoriteAtom",
+  default:
+    local.get(LOCAL_FAVORITES_KEY) === null
+      ? []
+      : JSON.parse(local.get(LOCAL_FAVORITES_KEY) as string),
+});