GlobalNomad

Trouble Shooting

• # 초기 데이터 로딩 지연 이슈

  [문제]체험 등록 및 예약 내역 페이지에서 초기 데이터 로딩이 지연되며, CLS가 0.617초로 측정되어 사용자 경험이 저하되었습니다.

  [해결]React Query의 SSR prefetching을 도입해 초기 데이터를 서버에서 미리 가져오는 방식으로 로딩 시간을 단축했습니다. 이를 통해 초기 CLS를 58% 단축하며 성능을 개선했습니다. 또한, 사용자의 행동에 따라 필요한 데이터를 즉시 업데이트할 수 있도록 invalidate 기능을 활용해 데이터 최신성을 유지하며 사용자 경험을 향상시켰습니다.

• # React-Quill SSR 미지원 이슈

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

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

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

  [문제]기존 후기 작성 모달은 '작성하기' 버튼을 클릭하면 별도의 확인 과정 없이 즉시 등록되었고, 후기 등록 시 성공 또는 실패 여부를 알 수 없는 문제가 있었습니다. 이로 인해 사용자 경험 측면에서 개선이 필요했습니다.

  [해결]후기 작성 모달에 기능과 애니메이션을 추가하여 완성도를 높였습니다. 후기는 등록 후 수정이나 삭제가 불가능하기 때문에, 이를 사용자에게 명확히 알릴 필요가 있었습니다. 이를 위해 모달 위에 Bottom Sheet를 추가하여 후기 등록 여부를 재확인하는 절차를 도입했습니다. 또한, Lottie 애니메이션을 사용해 후기 작성의 성공 또는 실패 여부를 시각적으로 표현함으로써 사용자 경험을 개선하고, 재미 요소를 더했습니다.

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

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

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

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

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

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

• # 내 정보 수정 시 보안 강화

  [문제]기존에는 내 정보 수정 페이지에 접근하자마자 비밀번호 수정이 가능해, 보안 취약성이 존재했습니다.

  [해결]내 정보 수정 페이지에 진입할 때 비밀번호 재확인 절차를 추가하여 보안을 강화했습니다. 로그인 API를 활용해 사용자에게 프로필 사진과 이메일만 표시하고, 비밀번호를 재입력하도록 요구했습니다. 비밀번호가 일치하면 쿠키에 authConfirm 키를 저장하고, 정보 수정 폼을 렌더링하도록 구현했습니다. 또한, 페이지를 벗어날 경우 해당 쿠키를 만료시켜 재진입 시 다시 비밀번호 확인 절차를 거치도록 했습니다.