성과 수치

언제 사용하나요?

이미 확정된 성과·규모·기간을 간결하게 설명할 때 선택합니다.

정밀한 표 비교·추세·필터·실시간 집계가 필요하면 차트·표 또는 전용 UI를 검토합니다.

수치 문자열의 서식을 자동으로 바꾸지 않습니다. 의미 있는 단위·기준·출처를 삭제하지 않습니다. 1~4개 항목을 예시로 확인하며 더 많은 항목은 적용 화면에서 검수합니다. 자동 카운트 애니메이션은 없습니다.

입력 조건

id필수

페이지 안에서 고유한 구간 ID. 제목과 구간의 접근성 연결에 사용합니다.

title필수

내용을 설명하는 제목. 빈 문자열을 사용하지 않습니다.

eyebrow선택

제목 위의 짧은 분류 문구. 생략하면 공간도 제거합니다.

headingLevel선택

2(기본) 또는 3. 적용 페이지의 제목 계층에 맞춥니다.

items필수

한 개 이상. 항목마다 고유 id·label·value, 선택 unit·description. 배열 순서대로 표시합니다.

note선택

집계 시점·범위·출처 등 구간 전체에 해당하는 기준 문구입니다.

바꿀 수 있는 범위

• 확정 수치·단위·기준 교체
• 순서와 의미를 유지하는 색상·열 배치 조정

입력 의미·정보 구조·동작이 바뀌면 신규 공통 패턴 또는 프로젝트 전용 UI로 구분합니다. 색상과 글꼴만 다른 경우에는 테마를 조정합니다.

사용 예시

패턴 폴더를 복사한 뒤 아래 입력을 실제 콘텐츠로 교체하세요. @/patterns 경로는 적용 프로젝트에 맞춥니다. 예시의 이미지와 앵커 링크도 교체 대상입니다.

import { StatsSection, type StatsSectionProps } from '@/patterns';

const content: StatsSectionProps = {
  "id": "stats-basic",
  "eyebrow": "예시 성과",
  "title": "숫자로 살펴보는 프로젝트",
  "items": [
    {
      "id": "projects",
      "label": "완료 프로젝트",
      "value": "24",
      "unit": "건",
      "description": "검수 완료 건수"
    },
    {
      "id": "patterns",
      "label": "재사용 패턴",
      "value": "12",
      "unit": "종",
      "description": "내부 시연 값"
    },
    {
      "id": "years",
      "label": "운영 기간",
      "value": "3",
      "unit": "년",
      "description": "가상 프로젝트 운영 기간"
    }
  ],
  "note": "예시 기준: 가상 데이터 · 실제 집계·성과와 관계없습니다."
};

export function ProjectSection() {
  return <StatsSection {...content} />;
}

구현 자산과 적용 확인

원본

src/patterns/StatsSection.tsx · src/patterns/patterns.module.css
복사 단위: src/patterns/ 전체. 카탈로그 코드는 필요하지 않습니다.

지원 조건

React 19 · TypeScript · CSS Modules · CSS container queries. Next.js 16의 정적 export 환경이 최초 검증 대상입니다. 다른 빌드 도구·브라우저는 적용 전 확인이 필요합니다.

의존성

패턴은 React와 자체 CSS만 사용합니다. 외부 UI 라이브러리·폰트·API·Tailwind 실행 의존성은 없습니다.

기록할 내용

자산 ID·초안 버전·복사 시점 Git 커밋·사용 위치·현지 수정 내용을 적용 프로젝트의 기존 작업 기록에 연결합니다. 공유 기준 커밋은 릴리스 단계에서 고정합니다. 복사할 때는 실제 커밋과 미커밋 변경 포함 여부를 확인합니다.

검수 위치

입력 보존 검사: scripts/test-patterns.cjs. 화면·조작의 실제 확인 결과는 해당 작업 기록이 원본입니다. 실기기·대표 조합·다른 프로젝트 복사 적용·배포는 별도 확인합니다.

담당자 확인 전에는 승인된 릴리스로 취급하지 않습니다. 시연 SVG는 이 저장소에서 제작했으며 외부 레퍼런스 자산을 가져오지 않았습니다.