개요

플레이어 우측 하단에 노출되는 ‘다음 영상 재생목록’을 진입 경로에 따라 다르게 제공하기 위해 플레이리스트의 출처와 재생 상태를 분리하여 보존하는 구조를 설계했습니다. URL 쿼리스트링을 통해 플레이리스트 출처를 유지하고, Zustand를 활용해 재생 상태를 전역으로 관리하는 방식으로 구현했습니다.

본문

1. 플레이리스트 출처 보존 (Query String)

콘텐츠 상세 페이지 진입 시, 어떤 플레이리스트에서 들어왔는지를 URL에 포함시켰습니다.

/contents/100?type=SERIES&playlist=tag&tagId=42

이를 통해 다음 정보를 유지합니다.

• playlist 타입 (trending, tag, search 등)
• 추가 파라미터 (tagId, query 등)

페이지 이동이나 새로고침이 발생해도 출처 정보가 유지됩니다.

2. 직렬화 / 역직렬화 구조

플레이리스트 정보를 객체 형태로 관리하고, URL로 변환 및 복원하는 구조를 적용했습니다.

• 진입 시: PlaylistSource → URL 쿼리스트링 변환
• 상세 페이지: URL → PlaylistSource로 복원

이 과정을 통해 URL 기반 상태 관리와 로직 분리를 동시에 달성했습니다.