오늘 구현한 내용

예약하기 페이지에서 뒤로가기 후 다시 예약할 때의 문제

import { atom } from 'recoil'
import { recoilPersist } from 'recoil-persist'

// 클라이언트 측에서만 sessionStorage를 사용
const isClient = typeof window !== 'undefined'

// RecoilPersist 설정
const { persistAtom } = recoilPersist({
  key: 'reserveState', // 고유한 key 값
  storage: isClient ? sessionStorage : undefined, // 서버 사이드에서는 undefined
})

export const reserveIdState = atom({
  key: 'reserveIdState', // 고유한 키
  default: '', // 기본값
  effects_UNSTABLE: [persistAtom], // 상태 영속화
});

이렇게 Recoil로 전역 상태의 reserveId를 저장할 수 있게 설정을 한다.
상태 영속화는 새로고침을 해도 값이 지워지지 않게 하는 것이다.

그리고 예약하기 페이지에서는 전역 상태의 reserveId가 null인지 아닌지 확인한다.
null인 경우에는 아직 예약 데이터 생성된 게 없다는 뜻이므로 POST로 예약 데이터를 전송해서 디비에 새 데이터를 생성하고, reserveId를 생성된 id로 값을 변경해준다.
null이 아닌 경우에는 예약 데이터 생성된 게 있다는 뜻(임시 데이터 존재)이므로, PUT으로 예약 데이터를 전송해서 디비에 존재하는 id가 reserveId인 데이터를 찾아서 수정해준다.

그리고 결제하기 페이지에서는 결제까지 완료되면 그때 reserveId를 null로 초기화해준다.
원래는 결제하기 페이지에서 뒤로가기를 하는 경우를 제외하고 다른 페이지로 이동하면 무조건 null로 값을 초기화하려고 했다.
그런데 찾아본 코드가 Next.js 14버전에서는 사용을 못하는 코드였다.
router.events가 14부터는 사라졌다고 한다.

이걸 지금 버전에 맞게 고치려고 하니 힘들어서 다른 방법이 없을까 고민하고 테스트해보다가, 그냥 다른 페이지로 이동하는 경우까지 확인하지 않고 결제가 완료됐을 때만 null로 바꿔도 되겠다고 생각했다.
다른 페이지로 이동했다가 다른 숙소를 예약하려고 할 때에도 그 숙소 id를 보내서 기존 데이터의 숙소 정보도 바꿔주면 문제가 없을 것 같았다.
그렇게 생각하고 테스트해보니 잘 되었고 생각보다 금방 구현이 끝나버렸다.