# UI v3 SCSS 스타일 가이드

본 디렉터리는 UI v3 디자인 시스템의 SCSS 기반 스타일 자산(토큰, 리셋, 타이포그래피, 믹스인, 함수)을 제공합니다. 사용 예시는 포함하지 않으며, 파일 구조와 제공 항목만 간결히 정리합니다.

## 디렉터리 구조

- figma.scss: 디자인 토큰 소스(색상, 간격 등)
- variable.scss: CSS 변수 및 테마 변수 정의
- font.scss: 폰트 페이스 및 폰트 관련 설정
- reset.scss: 기본 리셋 스타일
- typography.scss: 타이포그래피 믹스인 집합
- animations.scss: 공통 애니메이션 키프레임/믹스인
- functions.scss: SCSS 함수 모음(색상 합성 등)
- buttons.scss: 버튼 사이즈/타입/변형 로직과 아이콘 버튼 스타일 포워드
- \_icon-buttons.scss: 아이콘 버튼(V1) 스타일 믹스인 세트
- \_icon-buttons-2.scss: 아이콘 버튼(V2) 스타일 믹스인 세트
- mixin.scss: 공용 믹스인 집합(버튼, 리스트 아이템, 엘리베이션 등) 및 일부 모듈 재노출
- index.scss: 스타일 엔트리(variables, fonts, reset, animations 로드)
- README.md: 본 문서

## 모듈 로딩/연관 관계

- index.scss
  - reset.scss, variable.scss, font.scss, animations.scss를 로드
- mixin.scss
  - figma.scss, buttons.scss, animations.scss, typography.scss, functions.scss를 사용(@use)
  - typography, functions를 재노출(@forward)
- buttons.scss
  - figma.scss, typography.scss, functions.scss를 사용(@use)
  - \_icon-buttons.scss, \_icon-buttons-2.scss의 믹스인을 재노출(@forward)

## 제공 항목 요약

- 변수/토큰
  - variable.scss: CSS Custom Properties(테마 변수) 정의
  - figma.scss: 디자인 토큰 소스 매핑
- 함수(functions.scss)
  - hover-overlay(base, overlay?, opacity?)
  - add-opacity(baseColor, opacity?)
- 타이포그래피(typography.scss)
  - display-_, title-_, body-_, caption-_, label-\* 계열 믹스인
- 애니메이션(animations.scss)
  - fade, zoom, slide 계열 키프레임/헬퍼
- 버튼(buttons.scss + mixin.scss)
  - 버튼 크기: apply-button-size($size)
  - 버튼 스타일: apply-button-styles($type, $variant)
  - 아이콘 버튼(V1): apply-icon-button-size, apply-icon-button-styles
  - 아이콘 버튼(V2): apply-icon-button-size-2, apply-icon-button-styles-2
  - 공용 버튼 믹스인: button($size, $variant, $type)
  - 아이콘 버튼 믹스인: iconButton($options), iconButton2($options)
- 리스트 아이템(mixin.scss)
  - list-item-wrapper-content, list-item-wrapper-sub-content
  - list-item, list-item-has-left-icon, list-item-left-icon, list-item-group, list-item-label, list-item-separator, list-item-sub-trigger, list-item-shortcut, list-item-disabled
- 엘리베이션(mixin.scss)
  - elevation-10/20/30/40, elevation-blur-10/20/30/40, effect-style-200
- 유틸리티(mixin.scss)
  - text-overflow($whiteSpace)

## 사용 지침(요약)

- 엔트리: index.scss를 글로벌 엔트리로 사용하여 기본 리셋/변수/폰트를 우선 로드
- 컴포넌트 단: mixin.scss를 @use로 불러 공용 믹스인(버튼, 타이포그래피, 리스트 아이템, 엘리베이션)을 활용
- 버튼/아이콘 버튼 커스터마이징은 buttons.scss가 정의한 사이즈/타입/변형 체계를 따름

본 문서는 구조와 제공 항목만 요약합니다. 상세한 동작은 각 SCSS 파일 주석을 참고하세요.
