Next.js에서 localStorage 상태 복원 시 UI가 한 번 튀는 문제 해결하기

const [viewMode, setViewMode] = useState<'card' | 'list'>('card');

useEffect(() => {
  const storedView = window.localStorage.getItem('posts-feed-view-mode');
  if (storedView === 'card' || storedView === 'list') {
    setViewMode(storedView);
  }
}, []);

const [mode, setMode] = useState<'default' | 'expanded' | 'minimized'>('default');

useEffect(() => {
  const storedMode = window.localStorage.getItem('hbr_audio_shell_mode');
  if (storedMode === 'default' || storedMode === 'expanded' || storedMode === 'minimized') {
    setMode(storedMode);
  }
}, []);

const [isViewReady, setIsViewReady] = useState(false);

useEffect(() => {
  const storedView = window.localStorage.getItem('posts-feed-view-mode');
  if (storedView === 'card' || storedView === 'list') {
    setViewMode(storedView);
  }
  setIsViewReady(true);
}, []);

export type PostsViewMode = 'card' | 'list';
export type AudioShellMode = 'default' | 'expanded' | 'minimized';

export const POSTS_VIEW_MODE_STORAGE_KEY = 'posts-feed-view-mode';
export const POSTS_VIEW_MODE_COOKIE_KEY = 'posts_feed_view_mode';

export const AUDIO_SHELL_MODE_STORAGE_KEY = 'hbr_audio_shell_mode';
export const AUDIO_SHELL_MODE_COOKIE_KEY = 'hbr_audio_shell_mode';

export function parsePostsViewMode(value: string | undefined): PostsViewMode | undefined {
  return value === 'card' || value === 'list' ? value : undefined;
}

export function parseAudioShellMode(value: string | undefined): AudioShellMode | undefined {
  return value === 'default' || value === 'expanded' || value === 'minimized'
    ? value
    : undefined;
}

import { cookies } from 'next/headers';

const cookieStore = await cookies();
const initialViewMode =
  parsePostsViewMode(cookieStore.get(POSTS_VIEW_MODE_COOKIE_KEY)?.value) ?? 'card';

<PostsResultsPanel
  currentPage={currentPage}
  totalPages={totalPages}
  initialViewMode={initialViewMode}
  query={q}
  posts={visiblePostsWithLabels}
/>

const [viewMode, setViewMode] = useState<PostsViewMode>(initialViewMode);

useEffect(() => {
  window.localStorage.setItem(POSTS_VIEW_MODE_STORAGE_KEY, viewMode);
  document.cookie = `${POSTS_VIEW_MODE_COOKIE_KEY}=${viewMode}; path=/; max-age=31536000; samesite=lax`;
}, [viewMode]);

const cookieStore = await cookies();
const initialAudioShellMode =
  parseAudioShellMode(cookieStore.get(AUDIO_SHELL_MODE_COOKIE_KEY)?.value) ?? 'default';

<PersistentAudioShell initialMode={initialAudioShellMode} />

const [mode, setMode] = useState<AudioShellMode>(initialMode);

useEffect(() => {
  window.localStorage.setItem(AUDIO_SHELL_MODE_STORAGE_KEY, mode);
  document.cookie = `${AUDIO_SHELL_MODE_COOKIE_KEY}=${mode}; path=/; max-age=31536000; samesite=lax`;
}, [mode]);