🌎 GlobalStyle 사용 가이드

이 문서는 프로젝트에서 사용하는 전역 스타일을 설명합니다.

📂 파일 위치

📁 src/components/common/GlobalStyle.jsx

📦 GlobalStyle 적용 방법

✅ 1. GlobalStyle 불러오기

현재 main.jsx 최상위 컴포넌트에서 GlobalStyle을 추가해주었습니다.

// Removed StrictMode import as it's no longer used
import { createRoot } from "react-dom/client";
import App from "./App.jsx";
import GlobalStyle from "./components/common/GlobalStyle.jsx";

createRoot(document.getElementById("root")).render(
  <>
    <GlobalStyle />
    <App />
  </>
);

🎨 전역 스타일 가이드

🎨 1. 색상 변수 (CSS Variables)

피그마를 참고해 색상을 CSS 변수(--변수명로 관리하고 있습니다.

📌 사용 가능한 색상 변수

:root {
  --gray10: #FFFFFF;   /* 밝은 회색 */
  --gray20: #F9F9F9;
  --gray30: #CFCFCF;
  --brown40: #542F1A;  /* 다크 브라운 */
}

📌 Styled-components에서 사용 예시

const Button = styled.button`
  background-color: var(--gray20);
  color: var(--brown40);
`;