소개

언제 사용하나요?

조직·사업·프로젝트를 설명하는 하나의 주제와 본문이 있을 때 선택합니다.

여러 독립적인 항목을 비교하거나 입력·신청을 받아야 한다면 다른 구간이나 전용 UI를 사용합니다.

본문은 한 문단 이상입니다. 이미지가 없으면 본문형으로 표시하며 가짜 이미지·빈 칸을 만들지 않습니다. 모바일 읽기 순서는 제목 → 본문 → 링크 → 이미지입니다.

입력 조건

id필수

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

title필수

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

eyebrow선택

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

headingLevel선택

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

paragraphs필수

한 개 이상인 본문 문자열 배열. 모든 문단을 순서대로 표시합니다.

image선택

src·alt·width·height. 자체 준비한 이미지와 사용 권한을 확인합니다. 장식 이미지는 alt를 빈 문자열로 둡니다.

link선택

label·href. 실제 목적지가 있을 때만 제공하며 새 창을 강제하지 않습니다.

바꿀 수 있는 범위

• 프로젝트 테마 변수와 이미지·문구 교체
• 읽기 순서를 유지하는 간격·비율 조정

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

사용 예시

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

import { IntroSection, type IntroSectionProps } from '@/patterns';

const content: IntroSectionProps = {
  "id": "intro-basic",
  "eyebrow": "예시 프로젝트 소개",
  "title": "필요한 정보를, 이해하기 쉬운 화면으로",
  "paragraphs": [
    "웹사이트의 목적과 사용자에게 필요한 내용을 먼저 정리합니다. 그다음 적합한 UI 패턴을 선택하고 실제 콘텐츠로 화면을 구성합니다.",
    "이 화면은 소개 패턴을 살펴보기 위한 가상 콘텐츠입니다."
  ],
  "image": {
    "src": "/examples/workspace.svg",
    "alt": "문서와 이미지가 나란히 배치된 화면의 예시 일러스트",
    "width": 800,
    "height": 560
  },
  "link": {
    "label": "이 패턴 사용 안내 보기",
    "href": "#usage"
  }
};

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

구현 자산과 적용 확인

원본

src/patterns/IntroSection.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는 이 저장소에서 제작했으며 외부 레퍼런스 자산을 가져오지 않았습니다.