회원가입 페이지

1. MSW를 이용한 백엔드 API 모킹 및 React Hook Form을 활용한 폼 유효성 검사

로잇_회원가입_기본 동작.mp4

• 백엔드 API 개발이 지연되어 프론트엔드 작업과 QA 진행에 어려움이 있었습니다. 이를 해결하기 위해 MSW로 API를 모킹하여 회원가입 로직을 테스트하고, QA를 빠르게 진행할 수 있도록 준비했습니다.
• React Hook Form을 활용해 폼 상태를 관리하고, Zustand를 사용하여 이메일 및 휴대폰 인증 상태를 독립적으로 유지할 수 있도록 구성했습니다.

2. 뒤로 가기 및 새로고침 시 경고 모달 표시, 모달 내 포커스 트랩 구현

• 회원가입 도중 뒤로 가기 또는 새로고침 시, 입력한 정보가 사라지는 것을 방지하기 위해 경고 모달과 alert 메시지를 구현했습니다.
• 사용자가 키보드로 탐색할 때 포커스가 모달 외부로 빠지는 문제를 발견했습니다. 특히 접근성(Accessibility) 측면에서 불편할 수 있다고 판단해 포커스 트랩을 적용, 키보드 사용자도 불편함 없이 회원가입을 진행할 수 있도록 개선했습니다.

로그인 페이지

• React Hook Form을 이용해 로그인 폼을 효율적으로 관리했습니다.
• 백엔드 API가 구현되기 전, 디자인 팀의 QA 진행을 원활하게 하기 위해 페이지 우측 하단에 상태를 조절할 수 있는 리모컨을 추가했습니다.
• 툴팁, 탭 전환, 모달 애니메이션 등을 부드럽게 만들기 위해 CSS keyframe과 setTimeout을 활용한 자연스러운 전환 효과를 적용했습니다.

변호사 상세 페이지

• 변호사 상세 페이지의 토스트 메시지, 모달, 그래프, 탭바, 지도 UI 등을 구현했습니다.

• 반응형 디자인에서도 UI가 깨지지 않도록 최대 글자 수 제한 및 디자인 조정을 진행했습니다.