사업·서비스 목록

언제 사용하나요?

서로 독립적인 사업·서비스를 한눈에 살펴보고 필요한 상세 내용으로 이동할 때 선택합니다.

가격·권한·정렬·검색·페이지 나눔이 필요한 상품·관리 목록에는 전용 계약과 UI가 필요합니다.

항목은 한 개 이상입니다. 이미지와 링크는 생략할 수 있습니다. 긴 설명을 줄임표로 숨기지 않습니다. 1~4개 항목을 시연하며 목록이 길어지면 별도 탐색 구조를 검토합니다.

입력 조건

id필수

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

title필수

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

eyebrow선택

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

headingLevel선택

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

items필수

항목마다 고유 id·title·description, 선택 image·link. 이미지·링크의 구조는 소개 패턴과 동일합니다.

바꿀 수 있는 범위

• 프로젝트 항목·이미지·실제 링크 교체
• 제목·설명·조작을 유지하는 열 수·간격·테마 조정

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

사용 예시

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

import { ServicesSection, type ServicesSectionProps } from '@/patterns';

const content: ServicesSectionProps = {
  "id": "services-basic",
  "eyebrow": "예시 서비스",
  "title": "제작 과정에 필요한 지원",
  "items": [
    {
      "id": "planning",
      "title": "콘텐츠 정리",
      "description": "사용자에게 전달할 정보와 작업 목적을 먼저 정리합니다.",
      "link": {
        "label": "입력 조건 확인하기",
        "href": "#inputs"
      }
    },
    {
      "id": "ui",
      "title": "화면 구성",
      "description": "확정한 정보를 보존하면서 적합한 패턴을 선택합니다.",
      "link": {
        "label": "사용 안내 확인하기",
        "href": "#usage"
      }
    },
    {
      "id": "quality",
      "title": "품질 확인",
      "description": "반응형 배치와 조작, 콘텐츠의 누락 여부를 검수합니다."
    }
  ]
};

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

구현 자산과 적용 확인

원본

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