feat-fe: 지원자 카드 컴포넌트의 UI 개선 적용

[github-actions]

Original issue description

목적

• 지원자 카드 컴포넌트의 UI를 수정안에 맞춰 개선합니다.
• "여러 지원자 선택" 기능을 위하여, 지원자 카드에 Prop 기반으로 체크박스 요소를 추가합니다.

작업 세부사항

• 지원자 카드 UI 수정
• "여러 지원자 선택" 관련 Prop 추가
• 체크박스 요소 추가

아래의 별표줄 밑에 요구사항 ID만 작성해주세요. Prefix 금지!

---

COM_REC_CARD_04

목적

• 지원자 카드 컴포넌트의 UI를 수정안에 맞춰 개선합니다.
• "여러 지원자 선택" 기능을 위하여, 지원자 카드에 Prop 기반으로 체크박스 요소를 추가합니다.

작업 세부사항

• 지원자 카드 UI 수정
• "여러 지원자 선택" 관련 Prop 추가
• 체크박스 요소 추가

참고사항

• 이번에 추가된 Props는 아래와 같습니다.
  • isSelectMode : 여러 지원자 선택 모드인지 여부를 boolean 타입으로 받습니다.
  • isSelected : 이 지원자 카드가 선택된 상태인지 boolean 타입으로 받습니다.
  • onSelectApplicant : 이 지원자 카드가 선택되었을 때 실행할 함수를 받습니다.
  • 선택 여부에 대한 상태를 상위 컴포넌트(ProcessColumn)에서 받기 때문에, 이 컴포넌트 자체적으로는 체크 표시에 필요한 내부 상태를 관리하고 있지 않습니다.
• CheckBox 컴포넌트는 onToggle prop으로 넘겨야 할 함수는 빈 함수(() => {})로 대체했어요.
  • 사용자 편의를 고려하여, 카드 자체에 대한 onClick 이벤트에 대해 조건부로 실행 함수를 달리 적용하는 형태를 취했기 때문이에요.
  • 즉, isSelectMode가 true라면 카드 클릭이 onSelectApplicant 실행으로 이어집니다.

참고 화면

지원자 카드 UI 수정 사항

개선 이전	개선 이후

지원자 카드 체크박스 요소 추가

관련 이슈

• closes feat-fe: 지원자 카드 컴포넌트의 UI 개선 적용 #807

[github-actions]

1728958638.215939

[github-actions]

1728958648.252969

[llqqssttyy]

고생하셨습니다! prop이 점점 많아지는군요..😵‍💫

[lurgi]

구현하신 부분 잘 확인했습니다!
isSelectMode에서는 hover가 안되도록 하면 어떨까 싶어 코멘트 남겨드려요!

[lurgi]

쵝오👍