Design System 기반 회원관리앱 Migration

본 글은 PWA를 이용한 회원관리 앱만들기와 이어집니다

 

서론

회원관리앱으로 몇달간 회원관리를 해본 결과 몇몇 문제점들이 발견되었고 이를 개선하고자 본 프로젝트를 이어서 진행하게되었습니다.

문제점으로는 다음과 같았습니다

1. mui 기반으로 수많은 커스텀을 진행하여야했고 코드가 지저분해져 유지보수에 어려움이 있었습니다

2. PWA 앱이여서 브라우저 히스토리 삭제시 로그인 풀리는 현상이 있었습니다.

3. nextjs app router에는 pwa가 제대로 지원하지않아 기능을 추가하기 어려웠습니다

4. 게임참여관리를 1~4부로 나누어 관리하였는데 게임을 참여한 날짜만 중요하다는 것을 깨닫고 entity 수정을 해야했습니다

 

Migration 과정

FRONT END

asis

tobe

 

기존 nextjs를 걷어내고 react  vite 기반으로 migration 하는 과정을 거쳤습니다

 

UI UX 변경점으로는 다음과 같습니다

- Mui를 걷어내고 leeyc design system 디자인 시스템을 적용

- 다크모드 지원 추가

- 홈화면 신규회원 목록, 참여왕 추가

- 게임 목록 ui ux개편

 

ASIS

 

TOBE