LEXUS

전시장 상담신청 폼

전시장 상담신청 입력 폼과 API·본인인증 연동, 약관·안내 모달을 구현했습니다.

외부 달력 라이브러리 없이 예약 달력 구현

서비스 예약 달력 컴포넌트를 직접 만들고, 날짜·시간 선택 UI와 Zustand 기반 상태 관리를 구성했습니다. 고객·서비스 유형별 예약 가능일 정책과 차량·센터 변경 시 종속 선택값 초기화를 적용했습니다.

마이페이지 공통 LNB 컴포넌트

마이페이지의 여러 화면에서 사용하는 공통 LNB 컴포넌트를 개발했습니다.

Three.js를 사용한 메인 별 표현

메인 페이지 인터랙션 중 Three.js를 사용한 별 표현을 직접 구현했습니다.

오픈 전 기능·반응형·브라우저 QA

오픈 시나리오에 맞춰 화면 크기별 표시와 주요 기능, 삼성 인터넷·Safari 등의 브라우저 점검 항목을 정하고 수동으로 확인했습니다.

시승 신청의 연속 제출과 이전 폼 노출 수정

동일 사용자의 연속 신청에서 발생한 중복 처리 알림을 수동 재현하고, 신청 완료 전후의 버튼과 화면 전환 흐름을 수정했습니다.

문제

동일 사용자가 1~2초 간격으로 연속 신청해 중복 처리 알림이 발생했습니다.

재현

테스트 서버에서 신청 버튼을 연속 클릭하며 상황을 수동으로 재현했습니다.

원인 확인

완료 팝업이 표시되는 동안 이전 폼의 신청 버튼이 다시 노출됐고, 초기 화면으로 이동하는 과정에서도 이전 폼이 잠깐 보이는 것을 확인했습니다.

수정

신청 버튼의 중복 클릭을 막고, 팝업 종료와 화면 전환 사이에 이전 신청 폼이 노출되지 않도록 흐름을 수정했습니다.

중복 신청 안내 후 다른 전시장을 선택하도록 개선

같은 안내가 반복되는 흐름을 확인하고, 기획팀과 정책·변경 이력을 검토한 뒤 다른 전시장에 신청을 이어갈 수 있도록 변경했습니다.

문제

이미 신청한 전시장에 다시 시승을 신청하면 안내 팝업이 나왔습니다. 닫은 뒤에도 이전 폼으로 돌아가 같은 신청과 팝업이 반복됐습니다.

정책 확인

동작 배경을 추측하지 않고 기획팀과 기존 정책·변경 이력을 확인해 수정 방향을 정했습니다.

변경

중복 신청 안내 후 시작 단계로 이동하도록 바꿨습니다. 사용자가 다른 전시장을 선택해 같은 차종의 시승을 신청할 수 있게 했습니다.

이미지 시퀀스 기반 360° 차량 뷰어

프론트엔드에서 이미지 시퀀스를 전환해 차량이 회전하는 모습을 보여주는 뷰어를 구현했습니다.