W Planner

W Planner는 2024.01 부터 진행중인 프로젝트로, 일정을 더 체계적으로 관리할 수 있게 카테고리, 우선순위 등의 기능을 추가한 캘린더 웹 서비스로, 현재 배포되어 운영되고 있습니다.

팀원

총 4인 (1 PM, 1 FE, 1 BE, 1 Design)으로, 저는 FE 담당으로 참여하였습니다.

사용한 기술

• Next.js
• typescript
• styled-components
• day.js
• ContextAPI
• SWR
• vercel

개발한 기능

• Google Login 구현
  • Google Login API 를 이용하여 소셜 로그인 구현하였습니다. JWT Token을 Local Storage에 저장하여 보관하고, 인증이 필요한 요청마다 헤더에 포함하여 전송하는 방식을 선택했습니다.
• v1.0.0의 모든 컴포넌트 구현
  • 캘린더를 포함한 W Planner v1.0.0에 사용된 모든 컴포넌트를 styled-component를 활용하여 직접 구현하였습니다.
• SWR을 활용한 Data-fetching
  • SWR을 활용하여 Data를 조회하여 사용자 경험을 높이기 위해 노력했습니다. 또, SWR 설정을 프로젝트에 맞게 수정하여 최적의 API 요청을 위해 노력하고 있습니다.
• Modal, Popup을 ContextAPI를 통해 관리
  • 모든 Modal과 Popup을 Context를 이용해 관리함으로써 특정 페이지, 컴포넌트에 의존하지 않는 구조를 구현하였습니다.
• CSS Animation, Transition을 활용한 애니메이션 처리
  • Modal이 열고 닫힐 때를 비롯한 많은 경우에 애니메이션을 추가하였습니다.