shape

여러 타입의 데이터를 받는 Form과 validation 구현

프로젝트 설명

사이드 프로젝트 "티끌"
공유 가계부 플랫폼의 작성하기 로직과 로그인 상태 관리 개발

기술 스택

  • React.js
  • typescript
  • Antd
  • Redux
  • Storybook
  • Styled-components
  • Webpack
  • Vite
  • Figma

참여인원

4명 (FE 2, BE 2)

기간

2023.07 ~ 2024.07

관련 링크

티끌 Github

상세 내용

  1. 거래 상세보기 페이지, 거래 생성/수정하기 페이지 페이지, 프로필 수정하기 페이지 개발
    • 거래 조회/수정/삭제 기능 구현, 프로필 조회/수정 기능 구현
    • 이미지 업로드 및 미리보기 기능을 제공하는 useUpload hook 작성
    • form 상태 관리 및 validation 구현 (React-hook-form 이용)
  2. 내 거래 모아보기 페이지 개발, 거래 필터링 기능 구현
    • Context를 통해 컴포넌트의 form 상태 관리 (React-hook-form의 formContext 이용)
    • BottomSheet, Popover, Modal 등 Overlay Components 구현
  3. 로그인 상태 관리 로직 작성
    • 로그인 완료 후 기존 페이지로 돌아가도록 하는 continueUrl 상태관리 구현 (Redux, Redux-persist 활용)
    • 로그인 여부 및 로그인 관련 메소드 제공하는 useLogin hook 작성
    • 페이지 진입 전 로그인 여부를 확인하고 props에 profile을 전달하는 withAuth HOC 작성