GlobalNomad

Trouble Shooting

• # React-Quill SSR 미지원 이슈

  [문제]ReactQuill 에디터가 SSR을 지원하지 않아 초기 로딩 시 UI가 비정상적으로 표시되고, 전환 과정이 매끄럽지 않았습니다.

  [해결]dynamic import를 사용해 ReactQuill을 클라이언트에서만 렌더링하도록 설정하여 SSR 미지원 문제를 해결했습니다. 또한, 초기 상태에서 textarea 컴포넌트를 에디터와 동일한 크기로 설정해 로딩 시 발생하던 UI 불일치와 이질감을 해소했습니다.

• # 후기 작성 프로세스의 사용자 경험 혼란

  [문제]기존 후기 작성 모달은 '작성하기' 버튼을 클릭하면 별도의 확인 과정 없이 즉시 등록되었고, 후기 등록 시 성공 또는 실패 여부를 알 수 없는 문제가 있었습니다. 또한 제출에 성공한 뒤에도 예약 내역이 갱신되지 않아 후기 작성 버튼이 그대로 남아, 사용자가 제출 실패로 오인해 중복 제출을 시도할 수 있었습니다.

  [해결]후기는 등록 후 수정이나 삭제가 불가능한 정책이라, 제출 전에는 신중한 확인이, 제출 후에는 확실한 결과 전달이 필요하다고 판단했습니다. 이를 위해 모달 위에 Bottom Sheet를 추가해 "수정·삭제 불가" 안내와 함께 등록 여부를 재확인하는 절차를 도입하고, Lottie 애니메이션으로 성공 또는 실패 결과를 즉시 시각화했습니다. 또한 제출 성공 여부가 확정되기 전에 버튼이 사라지지 않도록 낙관적 업데이트 대신 서버 응답 이후 갱신하는 방식을 택해, 제출 성공 후 invalidateQueries로 예약 상세 데이터를 재조회해 후기 작성 버튼이 남는 중복 제출 가능 상태를 제거했습니다.

• # 시작 시간이 종료 시간보다 늦은 스케줄 등록 이슈

  [문제]체험 예약 시 시작 시간이 종료 시간보다 늦어도 스케줄이 추가되는 문제가 발생했습니다. 이는 예약 가능한 시간대를 선택할 때 시간 유효성 검사가 없었기 때문입니다.

  [해결]시간 유효성 검사를 추가하고 버튼 활성화/비활성화 로직을 적용하여 문제를 해결했습니다. 사용자가 날짜, 시작 시간, 종료 시간을 선택할 때마다 유효성 검사를 실행하고, 시작 시간이 종료 시간보다 빠를 때만 버튼을 활성화했습니다. 조건이 충족되지 않으면 버튼을 비활성화하고, 하단에 적절한 에러 메시지를 표시하여 사용자에게 문제를 명확히 전달하도록 수정했습니다.

• # 가격 필드 입력값 포맷 문제

  [문제]가격 입력 시 맨 앞에 '0'이 들어갈 수 있었고, 쉼표 구분이 없어 사용자가 금액을 쉽게 확인하거나 읽기 어려운 문제가 발생했습니다.

  [해결]유틸리티 함수를 추가하여 문제를 해결했습니다. 가격 필드에 입력할 때마다 toLocaleString 내장 함수를 사용하여 한국 기준으로 가격을 자동 포맷팅하도록 구현했습니다. 또한, API 요청 시에는 숫자 형식으로 전송해야 하므로, 쉼표를 제거하는 별도의 유틸리티 함수도 추가하여 데이터 전송 시 적절한 형식으로 변환했습니다.

• # 내 정보 수정 전 비밀번호 재확인 UX

  [문제]기존에는 내 정보 수정 페이지에 진입하자마자 비밀번호 변경 폼이 바로 노출되어, 자리를 비운 사이 열려 있던 화면에서 본인 확인 없이 계정 정보가 수정될 수 있었습니다.

  [해결]수정 폼을 바로 보여주는 대신, 페이지 진입 시 로그인 API로 비밀번호를 재확인하는 단계를 앞에 두었습니다. 이 화면에서는 프로필 사진과 이메일만 표시하고 비밀번호 재입력을 요구했으며, 확인에 성공하면 authConfirm 키를 쿠키에 저장해 해당 세션 동안만 수정 폼을 렌더링하도록 구현했습니다. 페이지를 벗어나면 쿠키를 만료시켜 재진입 시 다시 확인 절차를 거치게 했습니다. 계정 정보 변경 자체는 서버가 검증하므로, 이 절차는 실수·무단 수정을 한 단계 걸러 내는 확인 흐름으로 설계했습니다.