fix :: ci 오류 해결

package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@next/font": "^13.5.2",
     "@tanstack/react-query": "^4.33.0",
-    "@team-return/design-system": "^1.1.8",
+    "@team-return/design-system": "^1.1.11",
     "axios": "^1.4.0",
     "debug": "^4.3.4",
     "next": "13.4.7",

src/components/CardList.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import CompanyCard from "./CompanyCard";
+import CompanyCard from "./company/CompanyCard";
 import RecruitmentsCard from "./recruitments/RecruitmentsCard";
 
 interface PropsType {

src/components/recruitments/RecruitmentsCard.tsx

@@ -1,27 +1,32 @@
 "use client";
 
 import { Icon } from "@team-return/design-system";
+import { SetBookmarks } from "@/apis/bookmarks";
 import Image from "next/image";
 import React, { useEffect, useState } from "react";
 import { useSearchParams } from "next/navigation";
 import { RecruitmentsListType } from "@/apis/recruitments/type";
 import { GetRecruitmentsList } from "@/apis/recruitments";
 import HoverPrefetchLink from "../common/HoverPrefetchLink";
+import RecruitmentSkelton from "../common/Skelton/SkeltonElement";
 
 export default function RecruitmentsCard() {
   const getParams = useSearchParams();
   const [list, setList] = useState<RecruitmentsListType[]>([]);
 
-  const res = GetRecruitmentsList(getParams.toString());
+  const { data: recruitmentsList, isLoading } = GetRecruitmentsList(getParams.toString());
   useEffect(() => {
-    setList((prev) => res.data?.data.recruitments || prev);
-  }, [res]);
+    setList((prev) => recruitmentsList?.data.recruitments || prev);
+  }, [recruitmentsList]);
+
+  const { mutate: SetBookmarksMutate } = SetBookmarks();
 
   const tagStyle =
     "text-caption leading-caption text-lightBlue font-r border rounded-full border-[#135C9D] py-1 px-2";
 
   return (
     <div className="w-full mt-5 grid grid-cols-3 md:grid-cols-4 gap-[1.5vw]">
+      {isLoading && <RecruitmentSkelton />}
       {list.map(
         (
           {
@@ -56,14 +61,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

yarn.lock

@@ -1906,15 +1906,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@team-return/design-system@npm:^1.1.8":
-  version: 1.1.8
-  resolution: "@team-return/design-system@npm:1.1.8"
+"@team-return/design-system@npm:^1.1.11":
+  version: 1.1.11
+  resolution: "@team-return/design-system@npm:1.1.11"
   dependencies:
     react: ^18.2.0
     react-dom: ^18.2.0
     uuid: ^9.0.0
     zustand: ^4.3.7
-  checksum: d87866fa3af2ef7a68269709e01923ab67a323ee887249b74323927dcf0df3e543dea8bc16125ed791b93613705c18f7e04d39805ee053aa1e59d6b0b0c0bce8
+  checksum: edc031f7245406b070d7055ec2659dfa04063db0a655793cec8aeab133b660a894acde7beb3c8e2d5a3526071e7df2a7921837fd51ddf101283279d4b5a5ef58
   languageName: node
   linkType: hard
 
@@ -5309,7 +5309,7 @@ __metadata:
   dependencies:
     "@next/font": ^13.5.2
     "@tanstack/react-query": ^4.33.0
-    "@team-return/design-system": ^1.1.8
+    "@team-return/design-system": ^1.1.11
     "@testing-library/jest-dom": ^5.16.5
     "@types/debug": ^4
     "@types/eslint": ^8