Link : https://github.com/likelion-onetool

[프로젝트 소개]

• 당뇨병 환자를 위한 간편식 구매 사이트
• 대한민국 전단계 당뇨환자는 1500만 명 시대
• 원툴은 당뇨의 식사관리를 위한 나트륨, 단백질, 열량 맞춤식 구매 서비스
• 현재 총 20개의 간편식으로, 일주일 5끼 × 4주간 직장인의 하루 한끼 당뇨관리를 돕는다.

[사용 기술]

• React, TypeScript
• axios, styled-component, framer-motion, react-router, tanstack query, react-hook-form, react-helmet-async

[역할]

• 프론트엔드 개발
• UI
  1. 로그인, 회원가입, 아이디&비밀번호 찾기
  2. 유저 프로필 페이지
  3. 장바구니, 결제 관련 페이지
  4. FAQ 페이지
• 기능

  1. axios를 이용한 api통신

  2. 페이지를 이동할 때 마다 계속 로딩 시간이 길어지는 문제 발생

     react-query의 staleTime, mutation을 이용한 불필요한 로딩줄임 https://github.com/likelion-onetool/diabetes-frontend/commit/0dca604e35ae59c69f7e0ecc7ba193251da13e9e

  3. Figma를 통해 메인페이지에 디자인 했던 슬라이더를 구현해야 했음.

     styled-component와 framer-motion을 이용한 슬라이더 구현함

  4. 한 페이지에 많은 양의 데이터를 불러오는 것은 서버에도 부담이 가고, 사용자의 경험을 해친다고 판단.

     페이지네이션 적용으로 서버의 부담을 줄임

  5. react-hook-form을 이용한 회원가입, 로그인 로직 생성

  6. 로그인 → 장바구니 → 구매까지 이루어지는 과정 로직 생성

[배운점]

• cors에러를 처음 겪어보았다. 프론트엔드 local포트와 서버의 url이 달라서 생겼던 오류여서 백엔드에서 해당 접근 권한을 설정해주어야 했다. 해당 오류를 해결하기 위한 이슈 분석 및 백엔드와의 소통방법을 배웠다.
• framer-motion을 이용한 슬라이더 구현이 생각보다 쉽지 않았다. AnimatePresence의 onExitComplete 속성을 제대로 설정하지 않아서 생긴 문제였고, 공식문서를 통해 해당 속성을 익히고 해결함으로써 애니메이션을 조작할 때에는 끝나는 타이밍, 상태변화점을 잘 조율해야 한다는 점을 깨달았다.