Connection

Storybook

1

2

go to slide 1go to slide 2

• 디자이너와의 협업과 UI 리뷰의 간편화를 위해 Storybook을 도입하였습니다. 각 컴포넌트의 상태를 시각적으로 확인하고 테스트할 수 있어 디자이너와의 원활한 의사소통과 프로젝트의 전반적인 효율성이 향상되었습니다.
• 디자인 시스템 작성: 디자인 시스템을 구축하고, 총 32개의 공통 컴포넌트를 문서화하였습니다. 각 컴포넌트의 기능과 사용 방법에 대한 스토리 작성하여 팀원 모두가 일관된 이해를 바탕으로 개발 진행하였습니다.
• 🔗 스토리북 바로가기🔗 Figma 디자인 시스템🔗 Figma 전체 페이지 보기

대시보드

• 대시보드 구현: 클래스 일정을 달력을 통해 한 눈에 확인할 수 있도록 하였고 최근 신청한 수강생 및 최근 리뷰를 쉽게 볼 수 있도록 대시보드를 구현하였습니다.
• 반응형 웹 구현: PC, 태블릿, 모바일 등 다양한 디바이스에서 접근하는 사용자들에게 최적화된 화면을 제공하였습니다.
• 비동기 컴포넌트 로딩: React Suspense를 활용하여 컴포넌트가 필요한 데이터를 불러오는 동안 사용자에게 로딩 상태를 시각적으로 표현하였습니다.
• Viewport에 맞는 캘린더 로딩: Dynamic Import를 사용하여 뷰포트에 따라 적절한 캘린더를 로딩하는 기능을 구현하였습니다. 이를 통해 성능을 향상시켰습니다.

수익 관리

• 데이터 시각화: React-chartjs-2 라이브러리를 활용하여 수익 현황을 차트와 그래프로 시각화하였습니다. 이를 통해 사용자가 월별(Bar 차트)과 일별(Line 그래프) 수익 현황을 쉽고 직관적으로 이해할 수 있도록 하였습니다.
• 스켈레톤 UI 활용: 데이터 로딩 시 스켈레톤 UI를 활용하여 사용자 경험을 향상시키고 CLS (Cumulative Layout Shift) 성능 지표를 개선하였습니다.
• 번들 크기 최적화: Dynamic Import를 활용하여 번들 크기를 최적화하였습니다. 이를 통해 페이지 로딩 시간을 줄이고, 전반적인 웹 애플리케이션의 성능을 향상시켰습니다.

클래스 작성

• 클래스 전체 기간 선택 기능: react-day-picker를 사용하여 사용자가 클래스 전체 기간을 선택할 수 있도록 구현하였습니다. 이 기능을 통해 사용자는 특정 기간 동안의 전체 일정을 한눈에 확인할 수 있습니다.
• 클래스 운영 시간 자동 계산 기능: 시작 시간을 입력하면 끝나는 시간이 자동으로 계산되는 기능을 구현하였습니다. 이를 통해 사용자는 클래스 운영 시간을 효과적으로 관리할 수 있습니다.
• 요일 선택 및 휴무일 설정 기능: 사용자가 수업을 진행할 요일을 선택하고, 휴무일을 설정할 수 있도록 하였습니다. 휴무일이 있다면, 달력에서 해당 날짜를 필터링하여 보여줍니다. 이 기능은 사용자가 일정을 쉽게 조정할 수 있게 돕습니다.
• 최종 클래스 일정 확인 기능: 클래스가 있는 날짜를 클릭하면 해당 날짜에 있는 수업 시간을 보여주는 기능을 구현하였습니다. 이를 통해 사용자는 일정을 더욱 효과적으로 관리할 수 있습니다.
• React-hook-form을 사용하여 폼 데이터를 효율적으로 관리하였습니다. 클래스 일정, 운영 시간, 휴무일애 대한 유효성 검사 및 에러 메시지 처리 등을 처리하였습니다.
• 상태 관리: Zustand를 사용하여 클래스 일정, 운영 시간, 휴무일 상태를 관리하였습니다. 이를 통해 날짜 데이터의 상태를 명확하게 추적하고, 필요시 즉시 상태를 업데이트할 수 있었습니다.

로그인/회원가입

• 로그인/회원 가입 모달창 구현: NextJS의 Parallel Routing과 Intercepting Routes를 활용하여 로그인/회원가입 모달창을 구현하였습니다.
• OAuth 인증 구현: 카카오와 구글의 OAuth를 활용하여 소셜 로그인 기능을 구현하였습니다. 이를 통해 사용자가 기존의 소셜 계정을 활용하여 더욱 빠르고 편리하게 서비스를 이용할 수 있도록 하였습니다.
• URL과의 동기화: Intercepting Routes를 통해 모달창이 활성화되었을 때 URL이 업데이트되어 사용자는 URL을 통한 직접적인 모달창 접근이 가능합니다.

클래스 신청

• API 요청 최적화: Promise.all을 활용하여 다중 네트워크 요청을 병렬 처리함으로써 API 요청 시간을 50~70% 줄였습니다.
• 토스페이먼츠 연동: 결제 간편화를 위해 토스페이먼츠를 도입하였습니다.
• 결제 로직 구현
  • "결제하기" 버튼을 누르면, 먼저 POST 요청을 통해 백엔드 API와 연동하여 결제 정보 생성
  • 이후 토스페이먼츠와의 연동을 통한 결제 진행
  • 성공 여부에 따라 PATCH 요청으로 사용자의 결제 정보를 업데이트
  • 결제의 성공 여부에 따라 사용자를 결제 완료 페이지 혹은 실패 페이지로 이동

CI/CD

• 빌드 테스트 자동화: Github Actions을 활용하여 빌드 테스트 자동화 환경을 구축하였습니다.
• Docker 이미지 생성 및 Storybook 배포: dev 브랜치가 Merge 될 때마다 Docker 이미지를 자동으로 생성하고, Storybook을 배포하였습니다.
• 최적화: 패키지와 Docker 이미지 캐싱을 활용하여 빌드 시간을 최적화하였습니다. 이 과정을 통해 빌드 시간을 7분에서 2분으로 단축시켰습니다.