딸기시럽은 정규직, 기간제, 일용직, 예술인, 자영업자 등 근로 형태와 퇴직 사유, 이전 회사의 근로 정보, 근로 기간, 세부 근로 정보등 근로자에 대한 여러가지 정보를 확인하여 현재 근로자의 실업 급여에 대한 상황을 자세하게 계산해주는 근로자 맞춤형 실업 급여 계산기입니다.
실업 급여 계산에는 실제로 근로 형태, 퇴직 사유, 세부적인 근로 정보에 따른 나타날 수 있는 경우의 수가 근로자마다 굉장히 많습니다. 이런 정보들을 종합하여 실업 급여 및 퇴직금을 얼마나 받을 수 있는지, 정확하게 며칠 더 일하면 실업 급여 및 퇴직금을 받을 수 있는지 등을 자세하게 알 수 있는 계산기를 만들자는 취지에서 시작된 프로젝트입니다.
<aside> 💡 ⭐️ 팀 구성 : 기획자 2명 ,프론트엔드 1명, 백엔드 1명, 디자이너 1명 ⭐️ 나의 포지션 : 프론트엔드
</aside>
공용 컴포넌트 및 함수
<aside> 👉🏻 1. 팝업 컴포넌트 개발
계산기에 필요한 input 컴포넌트 개발 작업( 텍스트 필드, 텍스트 에이리어, 캘린더, 팝업 셀렉, 일반 셀렉 ,넘버 필드, 버튼, 라디오 버튼, 요일 선택 리스트, 체크 박스)
개별 입력 정보 컴포넌트 개발
입력값 유효성 검사 컴포넌트 개발
</aside>
메인 페이지
<aside> 👉🏻 1. 리액트 Slick 라이브러리를 활용해 기본형 , 상세형 , 복수형 등 계산기 선택 버튼 리스트 구현 2. 헤더 UI 및 헤더 메뉴 개발 작업 3. 푸터 UI 개발 작업 후 App.tsx 의 엔트리 파일에 공용 UI 지정 작업
</aside>
헤더 메뉴 작업
<aside> 👉🏻 1. 헤더 사이드 메뉴 UI 개발 작업 2. 햄버거 버튼 on/off 기능 개발 작업 3. 각 메뉴 링크 연결 2. 계산하기 기본형, 상세형, 복수형 옵션의 드롭 다운 구현 및 각 메뉴 계산기 페이지 링크 연결
</aside>
퇴직 여부 선택 컴포넌트
<aside> 👉🏻 1. 퇴직자 / 퇴직예정자 선택 UI 개발 작업 2. 기본형, 상세형, 복수형에 따라 다음 단계로 이동하도록 조건문에 따른 상태 관리 작업
</aside>