emotion

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 토큰 사용?
• [ ] 전역 스타일을 임의로 추가하지 않는가?