emotion

name	emotion
description	Emotion 스타일링 규칙. @emotion/styled, css prop 사용, 스타일 파일 분리 기준.

Emotion 스타일링 규칙

---

기본 규칙

• @emotion/styled 또는 css prop을 사용한다
• 전역 스타일은 packages/shared/styles/globalStyles에만 정의한다

---

스타일 컴포넌트 위치 기준

간단한 스타일: 컴포넌트 파일 하단

// components/OrderCard/index.tsx
const OrderCard = () => {
  return <Container>...</Container>;
};

export default OrderCard;

// 파일 하단에 스타일 정의
const Container = styled.div`
  padding: 16px;
`;

복잡한 스타일: *.styled.ts 파일로 분리

// components/OrderCard/styled.ts
export const Container = styled.div`...`;
export const Header = styled.div`...`;
export const Footer = styled.div`...`;

// components/OrderCard/index.tsx - named import 사용
import { Container, Header, Footer } from './styled';

---

색상 토큰 사용

직접 색상값을 쓰지 않고 semanticColor 토큰을 사용한다:

// ✅ 좋은 예
import { semanticColor } from '@repo/shared/styles/foundation/semanticColor';

const StyledDiv = styled.div`
  color: ${semanticColor.text.primary};
  background: ${semanticColor.bg.surface};
`;

// ❌ 나쁜 예
const StyledDiv = styled.div`
  color: #333333;
  background: #ffffff;
`;

---

파일 명명 규칙

유형	규칙	예시
스타일 파일	컴포넌트명.styles	OrderCard.styles.ts
분리된 스타일	styled.ts 또는 styled.tsx	styled.ts

---

체크리스트

스타일 작성 전:

• 스타일 양이 간단한가? → 컴포넌트 파일 하단
• 스타일이 복잡한가? → styled.ts로 분리
• 직접 색상값(hex, rgb) 없이 semanticColor 토큰 사용?
• 전역 스타일을 임의로 추가하지 않는가?