@teamsparta/stack-font/README.md

stack font

# Font

## Installation

```sh
pnpm add @teamsparta/stack-font
```

```sh
yarn add @teamsparta/stack-font
```

## 사용설명서

### 1. 폰트 스타일 가져오기

`@teamsparta/stack-font` 패키지에서 필요한 폰트 스타일을 가져옵니다.

```typescript
import { heroTitle, bodyM, captionSb } from "@teamsparta/stack-font";
```

### 2. 스타일 적용하기

emotion의 `css` 프로퍼티나 `emotion/styled`를 사용하여 스타일을 적용할 수 있습니다.

#### emotion 사용 예시:

```typescript
import { css } from "@emotion/react";
import { heroTitle } from "@teamsparta/stack-font";

const MyComponent = () => (
  <div css={css`
    ${heroTitle}
    color: blue;
  `}>
    Hero Title Text
  </div>
);
```

```typescript
import styled from "@emotion/styled";
import { bodyM } from "@teamsparta/stack-font";

const StyledParagraph = styled.p`
  ${bodyM}
  color: gray;
`;

const MyComponent = () => (
  <StyledParagraph>
    This is a body text with medium weight.
  </StyledParagraph>
);
```

### 3. 사용 가능한 폰트 스타일

- `heroTitle`: 대형 제목용 (40px, 700 weight)
- `largeTitle`: 큰 제목용 (32px, 700 weight)
- `title1`: 제목 1 (28px, 700 weight)
- `title2`: 제목 2 (22px, 700 weight)
- `subTitle1`: 부제목 1 (22px, 700 weight)
- `subTitle2`: 부제목 2 (18px, 700 weight)
- `subTitle3`: 부제목 3 (16px, 700 weight)
- `bodyB`: 본문 굵은 글씨 (15px, 700 weight)
- `bodyM`: 본문 중간 굵기 (15px, 500 weight)
- `bodyLong`: 긴 본문용 (15px, 500 weight, 행간 넓음)
- `captionSb`: 캡션 세미볼드 (13px, 600 weight)
- `captionM`: 캡션 중간 굵기 (13px, 600 weight)
- `tag1`: 태그 1 (12px, 600 weight)
- `tag2`: 태그 2 (10px, 600 weight)

각 스타일은 이미 font-family, font-size, font-weight, line-height가 설정되어 있어 일관된 디자인을 유지할 수 있습니다.

### 4. 주의사항

- 모든 폰트 스타일은 Pretendard 폰트를 기본으로 사용합니다.
- 필요에 따라 색상이나 다른 스타일 속성을 추가로 적용할 수 있습니다.
- 반응형 디자인을 위해 미디어 쿼리와 함께 사용할 수 있습니다.

이 가이드를 참고하여 프로젝트 전반에 걸쳐 일관된 타이포그래피를 유지하세요.