• Next.js에서 다크모드

• 서버에서 pre-rendering을 할 때 다크모드 여부를 판단해야 함

• 다크모드 여부를 판단할 수 있도록 쿠키에 저장해놓고 서버가 쿠키 값에 따라 body에 className을 pcc-theme--dark 또는 pcc-theme--light 으로 적용
• 각각의 클래스에 따라 색상 변수의 값을 다르게 적용

• 문제는 다크모드 여부를 전역에서 판단할 수 있어야 함.
• css로 처리할 수 있는 부분은 className으로 다크모드가 다 구분이 되지만, svg파일같은 경우 다크모드 여부를 따로 판단해야 모드에 따라 다르게 렌더링할 수 있기 때문
• 서버컴포넌트에서는 서버의 쿠키값을 읽어서 pre-rendering 할 때부터 모드에 해당하는 svg파일 렌더링
• 클라이언트 컴포넌트의 경우, URL 최초 접속 시 서버에서 생성한 정적 HTML을 먼저 보여준 후 hydrate될 때 클라이언트 쪽에서 쿠키 값을 읽어 해당하는 svg파일을 렌더링