🔀 :: 모집의뢰서 북마크

Team-return · Nov 17, 2023 · 98761f2 · 98761f2
2 parents 33f2f00 + 648eadc
commit 98761f2
Show file tree

Hide file tree

Showing 8 changed files with 154 additions and 14 deletions.
diff --git a/src/apis/bookmarks/index.ts b/src/apis/bookmarks/index.ts
@@ -0,0 +1,25 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { instance } from "../axios";
+
+const router = "/bookmarks";
+
+export const GetBookmarks = () => {
+  return useQuery(["GetBookmarks"], async () => {
+    const { data } = await instance.get(`${router}`);
+    return data;
+  });
+};
+
+export const SetBookmarks = () => {
+  const queryClient = useQueryClient();
+  return useMutation(
+    async (recruitmentId: number) => {
+      await instance.patch(`${router}/${recruitmentId}`);
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(["getRecruitmentsList"]);
+      },
+    }
+  );
+};
diff --git a/src/apis/recruitments/type.ts b/src/apis/recruitments/type.ts
@@ -1,12 +1,12 @@
 export interface RecruitmentsListResponseType {
-  recruitments: RecruitmentsListType[];
+  recruitments: RecruitmentsListType[]; 
 }
 
 export interface RecruitmentsListType {
   recruit_id: number;
   company_name: string;
   company_profile_url: string;
-  train_pay: string;
+  train_pay: number;
   military: boolean;
   total_hiring: number;
   job_code_list: string;

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -3,6 +3,9 @@
 @tailwind utilities;
 
 @layer components {
+  .tagStyle {
+    @apply text-caption leading-caption text-lightBlue font-r border rounded-full border-[#135C9D] py-1 px-2;
+  }
   .skeltonUi {
     @apply bg-[#f7f7f7] relative;
   }

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -12,7 +12,7 @@ export default function Home() {
         <Suggestion listType="Company" />
         <Suggestion listType="Recruitments" />
         <BandBanner />
-        <Suggestion listType="BookMark" />
+        <Suggestion listType="Bookmark" />
       </div>
     </main>
   );

diff --git a/src/components/BookmarkCard.tsx b/src/components/BookmarkCard.tsx
@@ -0,0 +1,107 @@
+import { GetBookmarks } from "@/apis/bookmarks";
+import { RecruitmentsListType } from "@/apis/recruitments/type";
+import { Icon } from "@team-return/design-system";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import HoverPrefetchLink from "./common/HoverPrefetchLink";
+
+//테스트
+//=========================
+
+const bookmarksList: RecruitmentsListType[] = [
+  {
+    recruit_id: 88,
+    company_name: "주식회사두잇(Doeat)",
+    company_profile_url: "LOGO_IMAGE/companydefault.png",
+    train_pay: 200,
+    military: true,
+    total_hiring: 0,
+    job_code_list:
+      "서버 개발자/프론트엔드/Android/iOS/임베디드 프로그래밍/인공지능 개발",
+    bookmarked: true,
+  },
+  {
+    recruit_id: 25,
+    company_name: "주식회사페이히어",
+    company_profile_url:
+      "LOGO_IMAGE/f9621d89-2e79-4ce6-94b0-fcac24346ddb-5.png",
+    train_pay: 0,
+    military: true,
+    total_hiring: 0,
+    job_code_list: "서버 개발자",
+    bookmarked: true,
+  },
+];
+
+//=========================
+
+export default function BookmarkCard() {
+  // const [bookmarksList, setBookmarksList] = useState<RecruitmentsListType[]>(
+  //   []
+  // );
+
+  // const bookmarks = GetBookmarks();
+
+  // useEffect(() => {
+  //   setBookmarksList((prev) => bookmarks.recruitments || prev);
+  // }, [bookmarks]);
+
+  return (
+    <div className="w-full mt-5 grid grid-cols-3 md:grid-cols-4 gap-[1.5vw]">
+      {bookmarksList.map(
+        (
+          {
+            company_profile_url,
+            company_name,
+            train_pay,
+            job_code_list,
+            bookmarked,
+            recruit_id,
+            military,
+          },
+          index
+        ) => (
+          <HoverPrefetchLink
+            href={`/recruitments/detail?id=${recruit_id}`}
+            key={index}
+          >
+            <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-full h-0 pb-[70%] relative">
+                <Image
+                  className="absolute object-contain"
+                  fill
+                  src={`${process.env.NEXT_PUBLIC_IMAGE_URL}/${company_profile_url}`}
+                  alt=""
+                />
+              </div>
+              <div className="relative bg-[#fafafa] p-[14px] flex-1 flex flex-col">
+                <p className="mr-8 text-black text-b2 leading-b2 font-b">
+                  {job_code_list}
+                </p>
+                <p className="text-b3 leading-b3 font-r text-[#444444] mt-1">
+                  {company_name}
+                </p>
+                <div className="flex content-end mt-[10px] flex-wrap w-full overflow-x-scroll whitespace-nowrap gap-1 flex-1">
+                  <div className="tagStyle">실습수당 {train_pay}만원</div>
+                  {military && <div className="tagStyle">병역특례</div>}
+                </div>
+                <button
+                  className="w-6 h-6 absolute top-[14px] right-[14px] flex items-center justify-center bg-none border-none cursor-pointer"
+                  aria-label="bookMarkBtn"
+                  onClick={(event: React.MouseEvent<HTMLElement>) => {
+                    event.stopPropagation();
+                  }}
+                >
+                  <Icon
+                    icon={`Bookmark${bookmarked ? "On" : "Off"}`}
+                    color={bookmarked ? "skyblue" : "gray60"}
+                  />
+                </button>
+              </div>
+            </div>
+          </HoverPrefetchLink>
+        )
+      )}
+    </div>
+  );
+}
diff --git a/src/components/Suggestion.tsx b/src/components/Suggestion.tsx
@@ -1,10 +1,10 @@
-
+import BookmarkCard from "./BookmarkCard";
 import CompanyCard from "./company/CompanyCard";
 import RecruitmentsCard from "./recruitments/RecruitmentsCard";
 import SuggestionHeader from "./SuggestionHeader";
 
 interface PropsType {
-  listType: "Company" | "Recruitments" | "BookMark";
+  listType: "Company" | "Recruitments" | "Bookmark";
 }
 
 export default function Suggestion({ listType }: PropsType) {
@@ -13,6 +13,7 @@ export default function Suggestion({ listType }: PropsType) {
       <SuggestionHeader listType={listType} />
       {listType === "Company" && <CompanyCard />}
       {listType === "Recruitments" && <RecruitmentsCard />}
+      {listType === "Bookmark" && <BookmarkCard />}
     </div>
   );
 }
diff --git a/src/components/SuggestionHeader.tsx b/src/components/SuggestionHeader.tsx
@@ -5,7 +5,7 @@ import { MyProfile } from "@/apis/students";
 import Link from "next/link";
 
 interface PropsType {
-  listType: "Company" | "Recruitments" | "BookMark";
+  listType: "Company" | "Recruitments" | "Bookmark";
 }
 
 export default function SuggestionHeader({ listType }: PropsType) {
@@ -18,9 +18,10 @@ export default function SuggestionHeader({ listType }: PropsType) {
     },
     Recruitments: {
       title: `👩‍💻 ${data?.data.student_name || "사용자"}님의 관심 분야에요`,
+
       router: "/recruitments",
     },
-    BookMark: {
+    Bookmark: {
       title: "📌 내가 저장한 모집의뢰서",
     },
   };
@@ -29,7 +30,7 @@ export default function SuggestionHeader({ listType }: PropsType) {
       <div className="flex gap-[10px] items-center text-h5 leading-h5 font-b">
         <p>{suggestionHeaderDummy[listType].title}</p>
       </div>
-      {listType !== "BookMark" && (
+      {listType !== "Bookmark" && (
         <Link
           href={suggestionHeaderDummy[listType].router}
           className="w-[120px] h-[32px] flex items-end justify-center text-b3 leading-b3 text-[#7f7f7f] font-m bg-none border-none cursor-pointer"

diff --git a/src/components/recruitments/RecruitmentsCard.tsx b/src/components/recruitments/RecruitmentsCard.tsx
@@ -6,20 +6,22 @@ import React, { useEffect, useState } from "react";
 import { useSearchParams } from "next/navigation";
 import { RecruitmentsListType } from "@/apis/recruitments/type";
 import { GetRecruitmentsList } from "@/apis/recruitments";
+import { SetBookmarks } from "@/apis/bookmarks";
 import HoverPrefetchLink from "../common/HoverPrefetchLink";
 import RecruitmentSkelton from "../common/Skelton/SkeltonElement";
 
 export default function RecruitmentsCard() {
   const getParams = useSearchParams();
   const [list, setList] = useState<RecruitmentsListType[]>([]);
 
-  const {data:recruitmentsList, isLoading} = GetRecruitmentsList(getParams.toString());
+  const { data: recruitmentsList, isLoading } = GetRecruitmentsList(
+    getParams.toString()
+  );
   useEffect(() => {
     setList((prev) => recruitmentsList?.data.recruitments || prev);
   }, [recruitmentsList]);
 
-  const tagStyle =
-    "text-caption leading-caption text-lightBlue font-r border rounded-full border-[#135C9D] py-1 px-2";
+  const { mutate: SetBookmarksMutate } = SetBookmarks();
 
   return (
     <div className="w-full mt-5 grid grid-cols-3 md:grid-cols-4 gap-[1.5vw]">
@@ -58,14 +60,15 @@ export default function RecruitmentsCard() {
                   {company_name}
                 </p>
                 <div className="flex content-end mt-[10px] flex-wrap w-full overflow-x-scroll whitespace-nowrap gap-1 flex-1">
-                  <div className={tagStyle}>실습수당 {train_pay}만원</div>
-                  {military && <div className={tagStyle}>병역특례</div>}
+                  <div className="tagStyle">실습수당 {train_pay}만원</div>
+                  {military && <div className="tagStyle">병역특례</div>}
                 </div>
                 <button
                   className="w-6 h-6 absolute top-[14px] right-[14px] flex items-center justify-center bg-none border-none cursor-pointer"
                   aria-label="bookMarkBtn"
                   onClick={(event: React.MouseEvent<HTMLElement>) => {
-                    event.stopPropagation();
+                    event.preventDefault();
+                    SetBookmarksMutate(recruit_id);
                   }}
                 >
                   <Icon