[트러블슈팅] shadcn DatePicker로 Supabase에 날짜 저장 시 전날로 저장되는 문제

1. 문제

NextJS 토이프로젝트 진행 중, 날짜 데이터를 입력하고 Supabase에 저장했을 때, "2025-06-10"을 선택하고,

디버그를 통해 6월 10일 한국 시간 기준으로 저장되는 것도 확인하였지만,
Supabase DB에는 "2025-06-09T15:00:00.000Z"처럼 전날로 저장되는 현상이 발생

엥

2. 원인

자바스크립트의 new Date()는 브라우저 로컬 시간(KST, GMT+9) 기준으로 날짜 객체를 생성하지만,
이를 JSON으로 전송하거나 Supabase에 저장할 때는 자동으로 UTC(세계 표준시)로 변환된다.

즉, "2025-06-10" → 2025-06-09T15:00:00Z로 변환되어 저장됨
한국은 UTC보다 +9시간이므로, 자정 기준으로 날짜를 선택하면 하루가 당겨지는 문제 발생

 

3. 해결

렌더링 시, 한국 날짜로 변환 후 렌더링 해주기

물론 supabase에 저장할 때 변환해서 저장해줘도 되지만, 그냥 프론트에서 가공하는걸로 했다.

en-CA로 한 이유는, 날짜는 동일하고 프로젝트에서 시간데이터는 안쓸거라서 사용했는데,

나중에 결국 ko-KR로 바꿔줬다.

const formattedDate = new Date(date).toLocaleDateString("en-CA");

 

해결

 

---

프로젝트 할 때마다 느끼는건데, 시간 관련해서는 UTC 때문에 맨날 애먹이는 듯..

당연히 UTC 이슈인데 이런게 발생하면 맨날 찾아본다

오늘 이후로는 바로 생각날 수 있도록 기록하기