JOBKOK

< KDT3 Front-End : Final Project Team3 - SSAK3 >

1. 프로젝트 소개

지원자들에게는 투명하고 공정한 안내를 절차별로 도와주고, 사업주에게는 더 쉬운 자동화 채용 절차를 도와주는 서비스 입니다.

• 인재관리 페이지에서 인재 추천 기능을 통해 지원자의 정보를 효율적으로 확인할 수 있습니다.
• 폼 링크 관리를 통해 각 채용 플랫폼에 흩어져 있던 인재들을 한 곳에 모아 고스팅을 낮출 수 있습니다.
• 인재 보관함에서 합격 인재와 탈락 인재 관리를 통해 갑작스러운 결원 보충도 쉽게 가능합니다.
• 서비스 내에서 지원자와 관련된 알림을 쉽게 보내고 관리할 수 있습니다.

개발 기간

2023.03.03 ~ 2023.04.10

2. 팀원 소개 & 역할 분담

• 유지석
  • 프로젝트 설정
    • 프로젝트 초기 설정
  • 인재 관리(메인 페이지)
    • 채용 폼 목록 조회
    • 각 채용폼 별 당일 인재, 총 인재, 채용 일정 조회
    • 인재 목록 9명씩 슬라이드로 구현 (swiper) 키워드, 지원일, 채용 단계별 조회
    • 인재 찜
    • 칸반 보드를 활용한 채용 단계 수정 (react-beautiful-dnd)
  • 인재 현황
    • 칸반 보드를 활용한 채용 단계 수정 (react-beautiful-dnd)
    • 각 단계별 인재 조회 (전체, 서류제출, 면접, 최종조율)
      • useSearchParams를 활용하여 새로고침 시에도 필터링 유지
    • 페이지네이션 (10명)
      • useSearchParams를 활용하여 새로고침 시에도 페이지 유지
    • 선택 인재 (최대 4명) 채용 단계 수정
    • 인재 찜 및 탈락
  • 탈락 인재 보관함
    • 전체 탈락 인재 조회, 찜된 탈락 인재 조회
      • useSearchParams를 활용하여 새로고침 시에도 필터링 유지
• 이은영
  • 채용 폼 작성 및 조회
  • 기업 정보 변경
  • 지원자 인증 및 작성
• 이혜란
  • 로그인, 회원가입, 비밀번호 찾기
    • 로그인
      • zod, react-hook-form을 활용하여 이메일, 비밀번호 유효성 검사가 진행됩니다.
      • 아이디와 비밀번호 입력 형식이 다를 시 안내 메세지가 뜨고 로그인 버튼이 비활성화 상태로 되어있습니다.
      • 아이디와 비밀번호를 모두 올바르게 입력하면 로그인 버튼이 활성화됩니다.
    • 회원가입
      • zod, react-hook-form을 활용하여 이메일, 비밀번호, 전화번호, 대표자명 등 유효성 검사가 진행됩니다.
      • 리덕스 툴킷을 활용하여 회원가입 절차에 따른 회원 정보를 관리합니다.
      • 이메일 인증, 인증번호 확인을 거쳐 다음 단계로 넘어갈 수 있습니다.
      • 이메일 - 비밀번호 - 전화번호 - 대표자명 - 기업명 - 사업자 등록번호를 모두 입력해야 회원가입이 완료됩니다.
    • 비밀번호 찾기
      • 가입한 이메일 인증, 인증번호 확인을 거쳐 다음 단계로 넘어갈 수 있습니다.
      • 이메일 인증이 완료되면 새로운 비밀번호를 재설정 할 수 있습니다.
  • 채용 폼 관리 메인
    • 폼 작성하기 버튼
      • 상단 작성하기 버튼 클릭시 새로운 폼 작성하는 페이지로 넘어갑니다.
    • 타 기업 폼 리스트 출력
      • 타기업 폼 리스트를 스와이퍼를 활용하여 화면에 출력되도록 했습니다.
      • 클릭 시 폼 작성하는 페이지로 넘어갑니다.
    • 생성완료 된 폼 리스트 출력
      • 링크 생성이 완료된 폼 리스트를 출력되도록 했습니다.
      • 링크 생성이 완료된 폼을 클릭 하면 해당 상세 페이지로 넘어갑니다.
  • 채용 폼 검색
    • 검색 기능
      • 폼 리스트의 제목을 기준으로 검색 단어가 포함되어 있을 시 검색이 되도록 설정 되어있습니다.
• 조효림
  • 공통 레이아웃
    • navbar 구현
  • 인재 상세 페이지
    • 인재 찜하기, 취소하기, 탈락 처리
      • 새로고침시에도 정보가 날아가지 않고 다른 페이지에서 나타나는 인재 정보에도 같은 정보가 표시됩니다.
      • 탈락 처리가 된 인재는 탈락 인재 보관함으로 이동합니다.
    • 타임라인
      • 서류 검토, 면접일 지정, 채용 확정을 기반으로 날짜가 입력되고 막대가 칠해집니다. 이전의 단계를 진행하지 않으면 다음 절차로 진행할 수 없습니다.
    • 면접 정보
      • 역시 react-query 의 useMutation 을 사용하여 정보를 업데이트 합니다. invalidateQueries를 사용하여 화면을 즉각적으로 업데이트 합니다.
    • 평가 노트
      • 기존에 평가가 되어있다면 그 평가를, 없다면 기본 메세지가 출력되어 평가를 할 수 있습니다.
  • 알림센터
    • 필터링
      • react-query 의 select의 옵션을 사용해 채용 단계를 필터링하여 목록에 보여줍니다. 또한 useSearchParams 를 사용하여 새로고침시에도 정보가 유지됩니다.
    • 인재 선택 및 메세지 전송

3. 기술 스택

• vite, react, typescript, redux-toolkit, tailwindcss, axios, react-hook-form, zod, react-router-dom, react-query, netlify

4. 협업 방식

• 공통 소통 툴: 슬랙, 노션, 게더타운