엘리스 SW Engineer 트랙 3기 2차 프로젝트에 참여한 총 17팀 중 2등인 최우수상을 수상했습니다. 기획부터 개발까지 각자 분담하여 맡은 부분을 담당하였으며, 협업의 중요성과 기획의 중요성을 알게되었습니다.

Netflix의 UI를 React를 사용해 클론코딩했습니다. 메인페이지의 헤더와 푸터, 프로필 이전 페이지를 구현했으며, 재사용 가능하도록 컴포넌트로 헤더와 푸터를 구현했습니다. 라우팅은 로그인 시 부여한 토큰의 유무에 따라 토큰이 없을 시 인트로 페이지가 첫 페이지, 토큰이 없을 시 메인 페이지가 첫 페이지가 되도록 구현했으며, 모든 아이콘은 react-icon을 사용하여 구현했습니다. 또, 영상은 react-player를 사용하여 링크를 재생하도록 해주는 방식을 사용했습니다.

국내 혼행객 중 동행자가 없어 고민인 사람들을 위한 여행 동행자 매칭 서비스를 만들었습니다. 나의 게시물, 댓글, 내가 신청받은, 신청한 내역, 리뷰 모달 기능을 구현했습니다. 이 중 리뷰 모달 기능은 UI와 기본 기능만 작성된 모달에 API를 연결해 점수로서 활용하게 만들었으며, 신청한 내역은 여행이 끝난 후 7일간만 리뷰 버튼이 보이도록 UI를 구현했습니다. 또, 토큰이 필요한 부분에 커스텀 axios를 사용하여 코드를 효과적으로 관리했으며, 모달 UI를 재사용 가능하게 만들어 필요한 부분에 빠른 추가가 가능했습니다.

판매자가 직접 농산물을 등록하여 소비자와 거래할 수 있는 쇼핑몰을 만들었습니다. 마이페이지, 과거 주문내역 페이지, 주문내역 상세 페이지, 관리자 페이지, 에러페이지, 푸터를 구현했으며, 마이페이지, 주문 내역페이지는 jwt 토큰을 받아와서 로그인 한 사용자에게만 보이게 해주었으며, 푸터는 재사용 가능한 컴포넌트로서 이용하기 위해 모든 코드를 ejs로 바꾸어 구현했습니다. 모든 코드를 ejs로 바꾸어 구현함으로써 코드가 간결해졌고, 서버에서 보낸 변수를 프론트 단에서 바로 사용할 수 있어 효율적인 코드 작성이 가능했습니다.

집을 나설때마다 오늘 뭐입지 고민하는 사람들을 위해 open weather API를 사용하여 기온별 옷차림을 알려주는 웹페이지를 만들었습니다. JS를 이용하여 로그인 페이지 UI를 구현했으며, 날씨에 따라 변하는 배경화면을 구현했습니다.