Skip to content

Commit

Permalink
feat :: 북마크 조회 개선
Browse files Browse the repository at this point in the history
  • Loading branch information
KANGYONGSU23 committed Nov 28, 2023
1 parent cbd5623 commit 6c54228
Show file tree
Hide file tree
Showing 5 changed files with 49 additions and 99 deletions.
5 changes: 3 additions & 2 deletions src/apis/bookmarks/index.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { instance } from "../axios";
import { BookmarkResponseType } from "./type";

const router = "/bookmarks";

export const useGetBookmarks = () => {
return useQuery(["GetBookmarks"], async () => {
const { data } = await instance.get(`${router}`);
const { data } = await instance.get<BookmarkResponseType>(`${router}`);
return data;
});
};
Expand All @@ -18,7 +19,7 @@ export const useSetBookmarks = () => {
},
{
onSuccess: () => {
queryClient.invalidateQueries(["getRecruitmentsList"]);
queryClient.invalidateQueries(["getRecruitmentsList", "GetBookmarks"]);
},
}
);
Expand Down
9 changes: 9 additions & 0 deletions src/apis/bookmarks/type.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
export interface BookmarkResponseType {
bookmarks: BookmarkItemsType[];
}

export interface BookmarkItemsType {
company_name: string;
recruitment_id: number;
created_at: string;
}
2 changes: 1 addition & 1 deletion src/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default function Home() {
return (
<main className="w-full py-[40px]">
<Banner />
<div className="flex flex-col items-center gap-[120px] mt-[80px]">
<div className="flex flex-col items-center gap-[120px] my-[80px]">
<Suggestion listType="Company" />
<Suggestion listType="Recruitments" />
<BandBanner />
Expand Down
10 changes: 9 additions & 1 deletion src/components/BandBanner.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,24 @@
"use client";

import { Icon } from "@team-return/design-system";
import { Icon, useToastStore } from "@team-return/design-system";
import Image from "next/image";
import BannerBackground from "@public/BannerBackground.png";
import Guy from "@public/Guy.webp";
import Link from "next/link";

export default function BandBanner() {
const { append } = useToastStore();
return (
<Link
className="w-full h-[120px] py-7 px-[100px] mt-15 cursor-pointer relative"
href={"/"}
onClick={() => {
append({
title: "",
message: "개발 중인 기능입니다.",
type: "YELLOW",
});
}}
>
<div className="flex flex-col w-full h-full">
<p className="text-white text-h6 leading-h6 font-b">
Expand Down
122 changes: 27 additions & 95 deletions src/components/BookmarkCard.tsx
Original file line number Diff line number Diff line change
@@ -1,107 +1,39 @@
import { useGetBookmarks } 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 Link from "next/link";
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 = useGetBookmarks();

// useEffect(() => {
// setBookmarksList((prev) => bookmarks.recruitments || prev);
// }, [bookmarks]);
const { data: bookmarks } = useGetBookmarks();

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>
)
{!bookmarks?.bookmarks.length && (
<div className="col-span-3 text-b3 leading-b3 font-m text-[#7f7f7f] ml-6 flex">
<p className="mr-2">⚠ 저장한 모집의뢰서가 존재하지 않습니다.</p>
<Link href={"/recruitments"} className="flex items-center underline">
모집의뢰서 보러가기
<Icon icon="Chevron" direction="right" size={16} />
</Link>
</div>
)}
{bookmarks?.bookmarks.map(({ company_name, recruitment_id }) => (
<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="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">
<Icon icon="BookmarkOn" color="skyblue" />
</button>
</div>
</div>
</HoverPrefetchLink>
))}
</div>
);
}

0 comments on commit 6c54228

Please sign in to comment.