[FE] 지원자(일반 사용자)가 기업 북마크 기능 화면 구현

[jiva-z]

개요

채용공고 북마크 기능을 구현하여 사용자가 관심 있는 채용공고를 저장하고 관리할 수 있도록 합니다.

기능 요구사항

1. 북마크 생성

• 채용공고 상세 페이지에서 북마크 버튼 추가
• 북마크 버튼 클릭 시 해당 채용공고를 북마크 목록에 추가
• 북마크 성공 시 토스트 메시지로 알림

2. 북마크 삭제

• 북마크 목록에서 개별 북마크 삭제 기능
• 북마크 삭제 시 확인 모달 표시
• 삭제 성공 시 토스트 메시지로 알림

3. 북마크 목록 조회

• 헤더에 북마크 메뉴 추가
• 북마크 목록 페이지 구현
• 북마크된 채용공고 목록 표시 (회사명, 직무명, 등록일 등)
• 북마크된 채용공고 클릭 시 상세 페이지로 이동

API 엔드포인트

POST /bookmarks
Authorization: Bearer {JWT토큰}
Content-Type: application/json
{
    "jobPostId": 1
}

DELETE /bookmarks/1
Authorization: Bearer {JWT토큰}

GET /bookmarks/my
Authorization: Bearer {JWT토큰}

구현 필요 사항

1. 컴포넌트

• BookmarkButton: 채용공고 상세 페이지에 추가할 북마크 버튼 컴포넌트
• BookmarkList: 북마크 목록을 표시하는 컴포넌트
• BookmarkCard: 개별 북마크 항목을 표시하는 컴포넌트

2. 페이지

• BookmarkPage: 북마크 목록을 보여주는 페이지

3. API 서비스

• bookmarkApi.js: 북마크 관련 API 호출 함수 구현
  • createBookmark
  • deleteBookmark
  • getBookmarks

4. 스타일링

• 북마크 버튼 디자인
• 북마크 목록 페이지 레이아웃
• 북마크 카드 디자인

우선순위

1. API 서비스 구현
2. 북마크 버튼 컴포넌트 구현
3. 북마크 목록 페이지 구현
4. 헤더 메뉴 추가
5. 스타일링 및 UI 개선

참고사항

• 북마크 기능은 로그인한 사용자만 사용 가능
• 북마크 목록은 최신순으로 정렬
• 북마크된 채용공고는 별도의 아이콘으로 표시