클론코딩 개요

프로젝트자체는 프론트와 백이 연동되지만,
이 게시글에는 제가 담당한 프론트에 관한 내용만 기재합니다.
(1.21기준 이미지나 gif는 삽입 준비중)

• 개발기간 : 14일 (1월 8일 ~ 1월 21일)
• 개발인원 : front 1명, back 1명

기술 스택

처음적는거라 이렇게 적는게 맞는지는 모르겠지만....

• 프론트엔드
  React
  Redux
  styled-components
  axios-RESTful API

구현 사항

1. 로그인 / 회원가입 연동 및 자동로그인
2. 마이 원티드 페이지.
3. 채용 - 채용공고 화면 제작.
4. 채용 - 메인 제작.
5. 기업상세화면.
6. 검색기능.
8. 직군별 연봉.
9. 커뮤니티.
10. 이벤트 페이지

상세

GNB (Global Navigation Bar)

• 로그인, 회원가입 기능
  원티드는 (회원가입/로그인)으로 버튼이 통합되어있고, 누르면 이메일을 먼저입력한다. 이메일이 DB에 있는지 확인하는 api를 통해서 있으면 회원가입 폼을, 없으면 로그인 폼을 보여준다.
• 자동로그인
  로그인시 발급되는 userIdx와 jwt를 localStorage에 저장해서 새로고침하더라도 로그인상태가 유지되도록 구성.(야매이긴한듯)
• 로그인되면 그에 맞게 일부 내용 변경
• 로그아웃 기능 (로그아웃시 localStorage값 제거)
• NAV바에서 검색 구현
  쿼리스트링을 통해서 키워드를 전달하면 기업과 포지션이 각각 리스트로 리턴되어 이를 기반으로 화면에 표시해준다.

홈 화면

• 홈의 캐러셀들은 원티드+나 아티클이고, 이는 계획에 없는 부분이라 임의의 내용들로만 채워넣음.
• 로그인시 홈의 이력서 안내부분이 변경되고 하단 캐러셀이 생겨남

채용 탭

• 채용부분에는 로그인이 되어있으면 ~~님! 바로 지원해볼까요? 캐러셀과 wanted ai가 제안하는 합격률 높은 포지션 캐러셀이 보인다.
• 각 채용공고나 회사별 아이템들은 모두 좋아요와 팔로우 버튼을 누르면 백으로 보내서 마이원티드등에서도 확인이 가능하도록 되어있다.
• 저장된 태그중 랜덤으로 2개를 골라서 태그에 맞는 기업들을 보여주는 캐러셀

채용 공고 리스트 탭

• 무한스크롤로 아이템들을 볼 수 있도록 구성했다.

각 채용 포지션 탭

• 각 포지션별로 index가 할당되어있고 이를 uri 파라미터로 받아와서 api통신-> 페이지에 뿌려준다. 이 탭에는 포지션이 속한 기업으로의 링크, 기업 팔로우, 포지션 북마크, 포지션 좋아요, 지원하기 기능이 구현되어있고 이또한 rest api를 이용해서 다른화면에서도 확인이 가능하다.

각 기업 탭

• 각 포지션별로 index가 할당되어있고 이를 uri 파라미터로 받아와서 api통신-> 페이지에 뿌려준다.
• 실제 페이지에서 이미지 캐러셀이 끝에 도달하면 다시 맨처음으로 이동시켜줘서, 똑같이 클론할때도 맨앞으로 이동하도록 구현했다.
• 기업에 등록된 포지션들은 북마크도 누르면 연동되고 기업자체에도 팔로우가 가능하다.

이벤트 탭

• 이벤트는 태그별로 검색이 가능하게 구현했다. 캐러셀과 모달을 이용해서 태그를 선택하고 이에 맞춰 쿼리스트링을 이용해 필터링이 가능하다.

이력서

비로그인시 이력서 안내 페이지로 연결되고, 로그인시 이력서 리스트를 보여준다.
이력서를 제작하는 페이지도 퍼블리싱은 했지만, api와 연동하지않아서 기능상으로는 작동하지 않는다.

커뮤니티

우선 각 게시판별로 글들이 다르도록 구성되어있다.
각 게시글은 생성과 수정이 가능하고, 댓글은 생성과 삭제가 가능하다.

마이원티드 관련

네비게이션 바에서 아바타 이미지를 누르면 모달창이 뜨는데 여기서 mywanted와 지원 현황, 좋아요, 북마크 가 구현되어있다.

마이원티드 탭

여기에서는 개인정보와 관심사 지원현황 북마크 좋아요 등 종합적인 정보를 볼 수 있다.

관심사

이를 누르면 관심사를 설정하는 탭으로 넘어가고 값들을 저장할 수 있다. 이 값들또한 서버에 저장되어서 다시확인해도 그대로 유지된다.

지원현황

모달창에서나 마이원티드 탭내의 지원현황을 눌러서 접근이 가능하다. 여기서 지원했던 포지션들의 리스트를 확인 할 수 있다.

좋아요, 북마크

각각 값을 받아오는데로 화면에 표현해주고 여기도 마찬가지로 좋아요나 북마크 해제가 가능하다.