chore :: 북마크 리스트 개선

기업 로고 / 북마크 취소
Team-return · Apr 5, 2024 · 5e8b0b6 · 5e8b0b6
1 parent 2d5f969
commit 5e8b0b6
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 8 deletions.
diff --git a/src/apis/bookmarks/type.ts b/src/apis/bookmarks/type.ts
@@ -3,7 +3,8 @@ export interface BookmarkResponseType {
 }
 
 export interface BookmarkItemsType {
-  company_name: string;
-  recruitment_id: number;
-  created_at: string;
-}
+  "company_logo_url": string;
+  "company_name": string;
+  "recruitment_id": number;
+  "created_at": string;
+}
diff --git a/src/components/BookmarkCard.tsx b/src/components/BookmarkCard.tsx
@@ -1,10 +1,20 @@
-import { useGetBookmarks } from "@/apis/bookmarks";
+import { useGetBookmarks, useSetBookmarks } from "@/apis/bookmarks";
 import { Icon } from "@team-return/design-system";
 import Link from "next/link";
 import HoverPrefetchLink from "./common/HoverPrefetchLink";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import { BookmarkItemsType } from "@/apis/bookmarks/type";
 
 export default function BookmarkCard() {
   const { data: bookmarks } = useGetBookmarks();
+  const { mutate: SetBookmarksMutate } = useSetBookmarks();
+
+  const [localBookmarks, setLocalBookmarks] = useState<BookmarkItemsType[]>(bookmarks?.bookmarks || [])
+
+  useEffect(()=>{
+    if(bookmarks) setLocalBookmarks(bookmarks.bookmarks);
+  },[bookmarks?.bookmarks])
 
   return (
     <div className="w-full mt-5 grid grid-cols-3 md:grid-cols-4 gap-[1.5vw]">
@@ -17,17 +27,29 @@ export default function BookmarkCard() {
           </Link>
         </div>
       )}
-      {bookmarks?.bookmarks.map(({ company_name, recruitment_id }) => (
+      {localBookmarks.map(({ company_name, recruitment_id, company_logo_url }) => (
         <HoverPrefetchLink
           href={`/recruitments/detail?id=${recruitment_id}`}
           key={recruitment_id}
         >
           <div className="flex flex-col w-full overflow-hidden transition duration-200 cursor-pointer shadow-elevaiton rounded-xl hover:transition hover:scale-105">
+            <div className="w-[100px] h-[100px] overflow-hidden flex justify-center items-center mx-4">
+              <Image src={`${process.env.NEXT_PUBLIC_IMAGE_URL}/${company_logo_url}`} width={100} height={100} alt="기업로고" />
+            </div>
             <div className="relative bg-[#ffffff] p-[14px] flex-1 flex flex-col">
               <p className="mr-8 overflow-hidden text-black text-b2 leading-b2 font-b whitespace-nowrap text-ellipsis">
                 {company_name}
               </p>
-              <button className="w-6 h-6 absolute top-[14px] right-[14px] flex items-center justify-center bg-none border-none cursor-pointer">
+              <button className="w-6 h-6 absolute top-[14px] right-[14px] flex items-center justify-center bg-none border-none cursor-pointer" 
+                onClick={(event: React.MouseEvent<HTMLElement>) => {
+                  event.preventDefault();
+                  setLocalBookmarks(prev=>{
+                    const newLocalBookmarks = prev.filter(({recruitment_id: id}) => id !== recruitment_id);
+                    return newLocalBookmarks
+                  })
+                  SetBookmarksMutate(recruitment_id);
+                }}
+              >
                 <Icon icon="BookmarkOn" color="skyblue" />
               </button>
             </div>

diff --git a/src/components/recruitments/RecruitmentsCard.tsx b/src/components/recruitments/RecruitmentsCard.tsx
@@ -39,7 +39,6 @@ export default function RecruitmentsCard({ maxLength = 12 }: PropsType) {
 function RecruitmentsItem({
   company_profile_url,
   company_name,
-  train_pay,
   hiring_jobs,
   bookmarked,
   id,