Merge pull request #64 from Team-return/feature/63-BookmarkFix

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;
+}

src/apis/recruitments/type.ts

@@ -18,6 +18,8 @@ export interface RecruitmentsDetailType extends RecruitmentsDetailTable {
   company_id: number;
   company_profile_url: string;
   company_name: string;
+  bookmarked: boolean;
+  recruitment_id: number;
 }
 
 export interface RecruitmentsDetailTable {

src/app/recruitments/detail/page.tsx

@@ -11,7 +11,7 @@ export default function RecruitmentsDetailPage() {
   const navigator = useRouter();
   const { data: RecruitmentsDetial } = useGetRecruitmentsDetail(param.get("id")!);
   if (RecruitmentsDetial) {
-    const { company_id, company_name, company_profile_url, ...rest } =
+    const { company_id, company_name, company_profile_url, bookmarked, recruitment_id, ...rest } =
       RecruitmentsDetial;
 
     return (
@@ -20,6 +20,8 @@ export default function RecruitmentsDetailPage() {
           company_name={company_name}
           company_profile_url={company_profile_url}
           company_id={company_id}
+          bookmarked={bookmarked}
+          recruitmentId={recruitment_id}
         >
           <GhostBtn
             onClick={() => {

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,26 @@ 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=>prev.filter(({recruitment_id: id}) => id !== recruitment_id))
+                  SetBookmarksMutate(recruitment_id);
+                }}
+              >
                 <Icon icon="BookmarkOn" color="skyblue" />
               </button>
             </div>

src/components/company/CompanyTitle.tsx

@@ -4,7 +4,10 @@ import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { getCompanyKebabItems } from "@/util/object/kebabMenuItems";
 import { KebabItemType } from "@/util/type/kebabMenu";
+import { useSetBookmarks } from "@/apis/bookmarks";
 import KebabMenu from "../common/Dropdown/KebabMenu";
+import { Icon } from "@team-return/design-system";
+import { useState } from "react";
 
 interface PropsType {
   business_number?: string;
@@ -14,6 +17,8 @@ interface PropsType {
   onClickInterview?: () => void;
   children?: React.ReactNode;
   company_id?: number;
+  bookmarked?: boolean; 
+  recruitmentId?: number;
 }
 
 export default function CompanyTitle({
@@ -24,11 +29,17 @@ export default function CompanyTitle({
   onClickInterview,
   children,
   company_id,
+  bookmarked,
+  recruitmentId
 }: PropsType) {
   const kebabItems: KebabItemType[] = getCompanyKebabItems(
     onClickRecruitments,
     onClickInterview
   );
+  const { mutate: SetBookmarksMutate } = useSetBookmarks();
+  const [localBookmarked, setLocalBookmarked] = useState<boolean>(
+    bookmarked || false
+  );
 
   const navigator = useRouter();
 
@@ -45,7 +56,26 @@ export default function CompanyTitle({
           />
         </div>
         <div className="flex flex-col justify-center drag">
-          <p className="mb-2 text-h4 leading-h4 font-b">{company_name}</p>
+          <div className="flex items-center gap-2">
+            <p className="mb-2 text-h4 leading-h4 font-b">{company_name}</p>
+            {
+              recruitmentId && (
+                <button 
+                  className="mt-[-8px]" 
+                  onClick={()=>{
+                    setLocalBookmarked(prev=>!prev);
+                    SetBookmarksMutate(recruitmentId);
+                  }}
+                >
+                  <Icon 
+                    icon={localBookmarked ? "BookmarkOn" : "BookmarkOff"}
+                    color={localBookmarked ? "skyblue" : "gray60"}
+                  />
+                </button>
+              )
+            }
+
+          </div>
           {business_number && (
             <p className="text-b2 leading-b2 font-m text-[#7f7f7f]">
               사업자 번호 : {business_number}

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,