/* 시스템이 다크 모드일 때 */
@media (prefers-color-scheme: dark) {
  body {
    background: black;
    color: white;
  }
}
 
/* 시스템이 라이트 모드일 때 */
@media (prefers-color-scheme: light) {
  body {
    background: white;
    color: black;
  }
}

/* CSS */
body.dark {
  background: black;
  color: white;
}
 
body.light {
  background: white;
  color: black;
}

// JavaScript
 
// 다크 모드로 전환
window.document.body.classList.add('dark');
window.document.body.classList.remove('light');
 
// 라이트 모드로 전환
window.document.body.classList.add('light');
window.document.body.classList.remove('dark');

// JavaScript에서 Media query를 확인해 시스템 테마가 바뀔때 마다 자동으로 웹 페이지의 테마를 바꾼다.
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
  if (e.matches) {
    window.document.body.classList.add('dark');
    window.document.body.classList.remove('light');
  } else {
    window.document.body.classList.add('light');
    window.document.body.classList.remove('dark');
  }
});

/* 테마에 따라 CSS 변수 설정 */
body.dark {
  --bg-color-main: black;
  --text-color-main: white;
  --text-color-sub: #ddd;
}
 
body.light {
  --bg-color-main: white;
  --text-color-main: black;
  --text-color-sub: #333;
}
 
/* 엘리먼트에서 CSS 변수 사용 */
.my-container {
  background-color: var(--bg-color-main);
  color: var(--text-color-main);
}

// lib/store.ts
// zustand 라이브러리를 사용해 전역 다크 모드 상태를 생성/관리하는 모듈
 
import { useEffect } from "react";
import { create } from "zustand";
 
type Store = {
  isDarkMode: boolean;
  toggleDark: () => void;
  setIsDarkMode: (isDarkMode: boolean) => void;
};
 
const useStore = create<Store>()((set) => {
  return {
    isDarkMode: false,
    toggleDark: () => set((state) => ({ isDarkMode: !state.isDarkMode })),
    setIsDarkMode: (isDarkMode) => set((state) => ({ isDarkMode })),
  };
});
 
/**
 * 시스템 테마 설정 변경에 따라 다크 모드 상태가 변경되도록 설정하는 커스텀 훅
 */
export const useMatchMedia = () => {
  const { setIsDarkMode } = useStore();
 
  useEffect(() => {
    const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
    const updateDarkMode = (e: MediaQueryListEvent) => {
      setIsDarkMode(e.matches);
    };
 
    // 초기 상태 설정
    setIsDarkMode(mediaQueryList.matches);
 
    // 리스너 등록
    mediaQueryList.addEventListener("change", updateDarkMode);
 
    // 컴포넌트 언마운트 시 리스너 제거
    return () => {
      mediaQueryList.removeEventListener("change", updateDarkMode);
    };
  }, []);
};
 
/**
 * 모듈 외부에서 필요한 인터페이스만 사용할 수 있도록 캡슐화하고 싶다면 이렇게
 */
export const useDarkMode = () => {
  const { isDarkMode, toggleDark } = useStore();
 
  return { isDarkMode, toggleDark };
};
 
export default useStore;

// styles/theme.ts
// 전역 스타일 정의 모듈
 
import { createGlobalStyle } from "styled-components";
 
export const lightTheme = {
  colors: {
    bgMain: "#fbfbf8",
    textMain: "#222222",
    shadow: "#d4d4d4",
    textSub: "#797981",
    border: "#848484",
    bgInlineCode: "#22272e",
    textInlineCode: "#adbac7",
  },
};
 
export const darkTheme: CustomTheme = {
  colors: {
    bgMain: "#222222",
    textMain: "#fbfbf8",
    shadow: "#1b1b1b",
    textSub: "#c7c7b8",
    border: "#4a4a4a",
    bgInlineCode: "#443933",
    textInlineCode: "#f5ad8e",
  },
};
 
export type CustomTheme = typeof lightTheme;
 
const GlobalStyle = createGlobalStyle`
  :root {
    --bg-color-main: ${({ theme }) => theme.colors.bgMain};
    --bg-color-inline: ${({ theme }) => theme.colors.bgInlineCode};
    --text-color-main: ${({ theme }) => theme.colors.textMain};
    --text-color-sub: ${({ theme }) => theme.colors.textSub};
    --text-color-inline: ${({ theme }) => theme.colors.textInlineCode};
    --static-white: ${lightTheme.colors.bgMain};
    --static-black: ${lightTheme.colors.textMain};
    --shadow-color: ${({ theme }) => theme.colors.shadow};
    --border-color: ${({ theme }) => theme.colors.border}
  }
`;
 
export default GlobalStyle;

// lib/registry.tsx
// 사이트 로드시 초기 설정을 담당하는 레지스트리 모듈
// 이 경우 styled-component의 초기 설정을 진행
// 시스템 테마 설정 또한 여기서 불러옴
 
"use client";
 
import React, { useState } from "react";
import { useServerInsertedHTML } from "next/navigation";
import {
  ServerStyleSheet,
  StyleSheetManager,
  ThemeProvider,
} from "styled-components";
import { useDarkMode, useMatchMedia } from "./store";
import GlobalStyle, { darkTheme, lightTheme } from "@/styles/theme";
 
export default function StyledComponentsRegistry({
  children,
}: {
  children: React.ReactNode;
}) {
  // Only create stylesheet once with lazy initial state
  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
 
  // 페이지 최초 빌드 시 시스템 다크 모드 설정 불러오기
  useMatchMedia();
 
  useServerInsertedHTML(() => {
    const styles = styledComponentsStyleSheet.getStyleElement();
    styledComponentsStyleSheet.instance.clearTag();
    return <>{styles}</>;
  });
 
  const { isDarkMode } = useDarkMode();
 
  if (typeof window !== "undefined")
    return (
      <>
        <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
          <GlobalStyle />
          {children}
        </ThemeProvider>
      </>
    );
 
  return (
    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
      <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
        <GlobalStyle />
        {children}
      </ThemeProvider>
    </StyleSheetManager>
  );
}

// app/layout.tsx
// 웹 사이트 레이아웃
// <body /> 부분에서 앞서 정의한 StyledComponentsRegistry를 사용
 
import { HOME_OG_IMAGE_URL } from "@/lib/constants";
import type { Metadata } from "next";
 
import "../styles/statics/initialize.scss";
import "../styles/statics/ReactToastify.min.css";
 
import GlobalHeader from "./_components/GlobalHeader";
import StyledComponentsRegistry from "@/lib/registry";
import { GoogleAnalytics } from "@next/third-parties/google";
import PageUtilities from "./_components/PageUtilities";
import { ToastContainer } from "react-toastify";
 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <head>
        {/* ... */}
      </head>
      <body>
        <StyledComponentsRegistry>
          {children}
        </StyledComponentsRegistry>
      </body>
    </html>
  );
}

// Indicator.tsx
// 전역 상태를 사용하는 임의의 컴포넌트 모듈
"use client";
 
import { useDarkMode } from "@/lib/store";
 
function Indicator() {
  const { isDarkMode } = useDarkMode();
 
  return (
    <div className={`indicator ${isDarkMode ? "dark" : "light"}`}>
      {isDarkMode ? "어두운" : "밝은"}
    </div>
  );
}
 
export default Indicator;