feat 북마크 화면에 적용

apps/web/app/select/components/ChipContainer.tsx

@@ -3,8 +3,9 @@ import TargetMessage from "components/common/TargetMessage";
 import { useGetUserInfo } from "hooks/useGetUserInfo";
 import { deleteVoteAPI } from "lib/apis/vote";
 import Image from "next/image";
-import { HambergerIcon, SaveIcon } from "public/icons";
+import { HambergerIcon, InactiveBookmarkIcon, ActiveBookmarkIcon } from "public/icons";
 import React from "react";
+import useBookMarkService from "services/useVoteBookMarkService";
 import styled from "styled-components";
 import { Writer } from "types/vote";
 import ModifyDeleteButtonBox from "./ModifyDeleteButtonBox";
@@ -34,12 +35,17 @@ function ChipContainer({
 }: Props) {
   const { userInfo } = useGetUserInfo();
 
+  const { bookMarkCheckQuery, mutateBookMark } = useBookMarkService(voteId);
+  const { data, isError, isLoading } = bookMarkCheckQuery;
+
   const amIWriter = userInfo?.userId === writer?.userid;
 
   const onDeleteVote = async () => {
     await deleteVoteAPI(voteId);
   };
 
+  if (isError || isLoading) return <></>;
+
   return (
     <>
       <TagRow>
@@ -48,7 +54,16 @@ function ChipContainer({
           <TargetMessage>당신을 기다렸어요</TargetMessage>
         </FlexRow>
         <FlexRow>
-          <Image src={SaveIcon} alt="저장하기" width={32} height={32} />
+          {data.bookmarked ? (
+            <div onClick={() => mutateBookMark()}>
+              <ActiveBookmarkIcon />
+            </div>
+          ) : (
+            <div onClick={() => mutateBookMark()}>
+              <InactiveBookmarkIcon />
+            </div>
+          )}
+
           {amIWriter && (
             <Image
               ref={targetEl}

apps/web/public/icons/index.ts

@@ -10,7 +10,7 @@ export { default as PreviousIcon } from "./PreviousIcon.svg";
 export { default as SearchIcon } from "./SearchIcon";
 export { default as AmplifyIcon } from "./amplifyIcon.png";
 export { default as AddIcon } from "./addIcon.png";
-export { default as SaveIcon } from "./saveIcon.png";
+
 export { default as Career } from "./Career.png";
 export { default as Etc } from "./Etc.png";
 export { default as Food } from "./Food.png";
@@ -25,3 +25,5 @@ export { default as LightAString } from "./Light-A.png";
 export { default as DarkAString } from "./Dark-A.png";
 export { default as LightBString } from "./Light-B.png";
 export { default as DarkBString } from "./Dark-B.png";
+export { default as ActiveBookmarkIcon } from "./ActiveBookmark.svg";
+export { default as InactiveBookmarkIcon } from "./InactiveBookmark.svg";