HeuJung
0d1105abfc
저장소가 총 건수를 상한까지만 세게 되면서 마지막 페이지 번호가 없는 목록이 생겼는데, 화면은 그 값을 1 로 접거나 페이저 노출 조건으로만 쓰고 있었다. 앞은 "1페이지뿐" 으로 잘못 말하고 뒤는 페이저를 통째로 지워 뒤쪽 페이지로 갈 방법 자체를 없앤다. 둘 다 예외도 404 도 내지 않아 화면은 정상으로 보이고 기능만 없다. Pagination 컴포넌트가 세 형태를 모두 이해하도록 넓혔다. 마지막 페이지를 알면 페이지 산술이 우선이고, 모를 때만 다음 페이지 존재 여부로 판정한다. 처음·마지막 버튼을 따로 켜고 끌 수 있게 나눠, 마지막 페이지를 모르는 목록에서는 그 버튼만 감춰지고 나머지 이동은 그대로 열려 있다. DataGrid 는 페이저를 그리는 두 경로 모두에 그 값을 전달한다 — 한쪽만 전달하면 그 화면만 첫 페이지에 갇힌다. 마이페이지 주문·마일리지·위시리스트·알림함, 게시판 목록, 상품 리뷰·문의, 내가 쓴 글, 관리자 설정 탭과 스케줄 이력의 소비 지점을 전건 옮겼다. 검색 화면은 총 건수를 정확히 세지 못한 경우 "N건 이상" 으로 표기하고 검색어를 좁히면 정확한 건수를 볼 수 있다고 안내한다. 탭 배지도 세지 못한 값을 정확한 숫자처럼 보여주지 않는다. 최신순은 첫 페이지부터 커서로 이동하며, 주소로 특정 페이지를 지목한 딥링크는 종전 동작을 유지한다. 쇼핑 첫 화면과 분류 화면을 단일 요청으로 재배선하고, 섹션 partial 이 부모가 선언한 이름을 읽도록 통일했다. 데이터소스 이름에 직결돼 있으면 다른 화면이 재사용할 때 폴백에 걸려 예외도 로그도 없이 섹션이 사라진다. 상품 상세의 "최근 본 상품" 이 계속 비어 있던 것은 존재하지 않는 라우트 파라미터를 읽고 있어서였다. 게시판 목록 세 스킨의 블라인드 아이콘 대비와 이미지 위 공통 색의 다크 모드 표기를 정리했다.
1686 lines
50 KiB
JSON
1686 lines
50 KiB
JSON
{
|
|
"$schema": "https://json-schema.org/draft/2020-12/schema",
|
|
"templateId": "sirsoft-basic",
|
|
"version": "1.0.0",
|
|
"components": {
|
|
"basic": [
|
|
{
|
|
"name": "Button",
|
|
"type": "basic",
|
|
"description": "HTML button element wrapper",
|
|
"path": "src/components/basic/Button.tsx",
|
|
"props": {
|
|
"variant": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "primary",
|
|
"description": "버튼 변형 (primary | secondary | danger | success | ghost | outline)"
|
|
},
|
|
"size": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "md",
|
|
"description": "버튼 크기 (sm | md | lg)"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "",
|
|
"description": "사용자 정의 클래스"
|
|
},
|
|
"children": {
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"description": "버튼 내용"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "Input",
|
|
"type": "basic",
|
|
"description": "HTML input element wrapper",
|
|
"path": "src/components/basic/Input.tsx",
|
|
"bindingType": "checkable",
|
|
"props": {
|
|
"label": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "레이블 텍스트"
|
|
},
|
|
"error": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "에러 메시지"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "",
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "Textarea",
|
|
"type": "basic",
|
|
"description": "HTML textarea element wrapper",
|
|
"path": "src/components/basic/Textarea.tsx",
|
|
"props": {
|
|
"label": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "레이블 텍스트"
|
|
},
|
|
"error": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "에러 메시지"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "",
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "Select",
|
|
"type": "basic",
|
|
"description": "HTML select element wrapper",
|
|
"path": "src/components/basic/Select.tsx",
|
|
"props": {
|
|
"label": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "레이블 텍스트"
|
|
},
|
|
"error": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "에러 메시지"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "",
|
|
"description": "사용자 정의 클래스"
|
|
},
|
|
"children": {
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"description": "옵션 요소들"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "Option",
|
|
"type": "basic",
|
|
"description": "HTML option element wrapper",
|
|
"path": "src/components/basic/Option.tsx",
|
|
"props": {
|
|
"value": {
|
|
"type": "string | number",
|
|
"required": true,
|
|
"description": "옵션 값"
|
|
},
|
|
"disabled": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": false,
|
|
"description": "비활성화 여부"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "Checkbox",
|
|
"type": "basic",
|
|
"description": "HTML checkbox input wrapper",
|
|
"path": "src/components/basic/Checkbox.tsx",
|
|
"bindingType": "checked",
|
|
"props": {
|
|
"label": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "레이블 텍스트"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "",
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "PasswordInput",
|
|
"type": "basic",
|
|
"description": "비밀번호 입력 컴포넌트 (보기/숨기기, 조건 검증, 확인 일치)",
|
|
"path": "src/components/basic/PasswordInput.tsx",
|
|
"props": {
|
|
"label": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "레이블 텍스트"
|
|
},
|
|
"error": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "에러 메시지"
|
|
},
|
|
"showToggle": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": true,
|
|
"description": "비밀번호 보기/숨기기 버튼 표시"
|
|
},
|
|
"showValidation": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": false,
|
|
"description": "비밀번호 조건 검증 표시"
|
|
},
|
|
"isConfirmField": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": false,
|
|
"description": "비밀번호 확인 필드로 사용"
|
|
},
|
|
"confirmTarget": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "비밀번호 확인 대상 값"
|
|
},
|
|
"showRules": {
|
|
"type": "array",
|
|
"required": false,
|
|
"description": "표시할 규칙 키 목록 (minLength, hasUppercase, hasLowercase, hasNumber, hasSpecial)"
|
|
},
|
|
"wrapperClassName": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "입력 필드 wrapper 클래스"
|
|
},
|
|
"validationClassName": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "검증 결과 표시 영역 클래스"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "",
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "Div",
|
|
"type": "basic",
|
|
"description": "HTML div element wrapper",
|
|
"path": "src/components/basic/Div.tsx",
|
|
"props": {
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "Span",
|
|
"type": "basic",
|
|
"description": "HTML span element wrapper",
|
|
"path": "src/components/basic/Span.tsx",
|
|
"props": {
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "P",
|
|
"type": "basic",
|
|
"description": "HTML p element wrapper",
|
|
"path": "src/components/basic/P.tsx",
|
|
"props": {
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "H1",
|
|
"type": "basic",
|
|
"description": "HTML h1 element wrapper",
|
|
"path": "src/components/basic/H1.tsx",
|
|
"props": {
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "H2",
|
|
"type": "basic",
|
|
"description": "HTML h2 element wrapper",
|
|
"path": "src/components/basic/H2.tsx",
|
|
"props": {
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "H3",
|
|
"type": "basic",
|
|
"description": "HTML h3 element wrapper",
|
|
"path": "src/components/basic/H3.tsx",
|
|
"props": {
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "H4",
|
|
"type": "basic",
|
|
"description": "HTML h4 element wrapper",
|
|
"path": "src/components/basic/H4.tsx",
|
|
"props": {
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "Label",
|
|
"type": "basic",
|
|
"description": "HTML label element wrapper",
|
|
"path": "src/components/basic/Label.tsx",
|
|
"props": {
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "A",
|
|
"type": "basic",
|
|
"description": "HTML a element wrapper",
|
|
"path": "src/components/basic/A.tsx",
|
|
"props": {
|
|
"href": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "링크 URL"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "Nav",
|
|
"type": "basic",
|
|
"description": "HTML nav element wrapper",
|
|
"path": "src/components/basic/Nav.tsx",
|
|
"props": {
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "Ul",
|
|
"type": "basic",
|
|
"description": "HTML ul element wrapper",
|
|
"path": "src/components/basic/Ul.tsx",
|
|
"props": {
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "Li",
|
|
"type": "basic",
|
|
"description": "HTML li element wrapper",
|
|
"path": "src/components/basic/Li.tsx",
|
|
"props": {
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "Form",
|
|
"type": "basic",
|
|
"description": "HTML form element wrapper",
|
|
"path": "src/components/basic/Form.tsx",
|
|
"props": {
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "Table",
|
|
"type": "basic",
|
|
"description": "HTML table element wrapper",
|
|
"path": "src/components/basic/Table.tsx",
|
|
"props": {
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "Thead",
|
|
"type": "basic",
|
|
"description": "HTML thead element wrapper",
|
|
"path": "src/components/basic/Thead.tsx",
|
|
"props": {
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "Tbody",
|
|
"type": "basic",
|
|
"description": "HTML tbody element wrapper",
|
|
"path": "src/components/basic/Tbody.tsx",
|
|
"props": {
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "Tr",
|
|
"type": "basic",
|
|
"description": "HTML tr element wrapper",
|
|
"path": "src/components/basic/Tr.tsx",
|
|
"props": {
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "Th",
|
|
"type": "basic",
|
|
"description": "HTML th element wrapper",
|
|
"path": "src/components/basic/Th.tsx",
|
|
"props": {
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "Td",
|
|
"type": "basic",
|
|
"description": "HTML td element wrapper",
|
|
"path": "src/components/basic/Td.tsx",
|
|
"props": {
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "Icon",
|
|
"type": "basic",
|
|
"description": "FontAwesome icon wrapper",
|
|
"path": "src/components/basic/Icon.tsx",
|
|
"props": {
|
|
"name": {
|
|
"type": "string",
|
|
"required": true,
|
|
"description": "아이콘 이름 (FontAwesome)"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "Img",
|
|
"type": "basic",
|
|
"description": "HTML img element wrapper",
|
|
"path": "src/components/basic/Img.tsx",
|
|
"props": {
|
|
"src": {
|
|
"type": "string",
|
|
"required": true,
|
|
"description": "이미지 URL"
|
|
},
|
|
"alt": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "대체 텍스트"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "Hr",
|
|
"type": "basic",
|
|
"description": "HTML hr element wrapper",
|
|
"path": "src/components/basic/Hr.tsx",
|
|
"props": {
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
}
|
|
],
|
|
"composite": [
|
|
{
|
|
"name": "Header",
|
|
"type": "composite",
|
|
"description": "사이트 헤더 (로고, 네비게이션, 검색, 사용자 메뉴)",
|
|
"path": "src/components/composite/Header.tsx",
|
|
"props": {
|
|
"siteName": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "그누보드7",
|
|
"description": "사이트 이름"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "Footer",
|
|
"type": "composite",
|
|
"description": "사이트 푸터 (저작권, 링크, 소셜)",
|
|
"path": "src/components/composite/Footer.tsx",
|
|
"props": {
|
|
"siteName": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "그누보드7",
|
|
"description": "사이트 이름"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "MobileNav",
|
|
"type": "composite",
|
|
"description": "모바일 네비게이션 드로어",
|
|
"path": "src/components/composite/MobileNav.tsx",
|
|
"props": {
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "ProductCard",
|
|
"type": "composite",
|
|
"description": "상품 카드",
|
|
"path": "src/components/composite/ProductCard.tsx",
|
|
"props": {
|
|
"product": {
|
|
"type": "object",
|
|
"required": true,
|
|
"description": "상품 데이터"
|
|
},
|
|
"showDiscount": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": true,
|
|
"description": "할인율 표시 여부"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "RichTextEditor",
|
|
"type": "composite",
|
|
"description": "리치 텍스트 에디터",
|
|
"path": "src/components/composite/RichTextEditor.tsx",
|
|
"props": {
|
|
"value": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "에디터 내용"
|
|
},
|
|
"placeholder": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "플레이스홀더"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "ImageGallery",
|
|
"type": "composite",
|
|
"description": "이미지 갤러리 (썸네일 + 메인 이미지)",
|
|
"path": "src/components/composite/ImageGallery.tsx",
|
|
"props": {
|
|
"images": {
|
|
"type": "array",
|
|
"required": true,
|
|
"description": "이미지 URL 배열"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "ProductImageViewer",
|
|
"type": "composite",
|
|
"description": "상품 이미지 뷰어 (메인 이미지 + 썸네일 + 라이트박스)",
|
|
"path": "src/components/composite/ProductImageViewer.tsx",
|
|
"props": {
|
|
"images": {
|
|
"type": "array",
|
|
"required": true,
|
|
"description": "상품 이미지 배열 (ProductImageResource 응답)"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "QuantitySelector",
|
|
"type": "composite",
|
|
"description": "수량 선택기 (+/- 버튼)",
|
|
"path": "src/components/composite/QuantitySelector.tsx",
|
|
"props": {
|
|
"value": {
|
|
"type": "number",
|
|
"required": false,
|
|
"default": 1,
|
|
"description": "현재 수량"
|
|
},
|
|
"min": {
|
|
"type": "number",
|
|
"required": false,
|
|
"default": 1,
|
|
"description": "최소 수량"
|
|
},
|
|
"max": {
|
|
"type": "number",
|
|
"required": false,
|
|
"default": 99,
|
|
"description": "최대 수량"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "PostReactions",
|
|
"type": "composite",
|
|
"description": "게시글 리액션 버튼 그룹",
|
|
"path": "src/components/composite/PostReactions.tsx",
|
|
"props": {
|
|
"postId": {
|
|
"type": "number",
|
|
"required": true,
|
|
"description": "게시글 ID"
|
|
},
|
|
"reactions": {
|
|
"type": "object",
|
|
"required": false,
|
|
"description": "리액션 데이터"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "SocialLoginButtons",
|
|
"type": "composite",
|
|
"description": "소셜 로그인 버튼 그룹",
|
|
"path": "src/components/composite/SocialLoginButtons.tsx",
|
|
"props": {
|
|
"providers": {
|
|
"type": "array",
|
|
"required": false,
|
|
"default": [
|
|
"google",
|
|
"naver",
|
|
"kakao"
|
|
],
|
|
"description": "활성화할 소셜 로그인 프로바이더"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "FileUploader",
|
|
"type": "composite",
|
|
"description": "파일 업로드 컴포넌트",
|
|
"path": "src/components/composite/FileUploader.tsx",
|
|
"props": {
|
|
"accept": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "허용 파일 타입"
|
|
},
|
|
"maxSize": {
|
|
"type": "number",
|
|
"required": false,
|
|
"default": 10485760,
|
|
"description": "최대 파일 크기 (bytes)"
|
|
},
|
|
"multiple": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": false,
|
|
"description": "다중 파일 허용 여부"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "Toast",
|
|
"type": "composite",
|
|
"description": "토스트 알림 컴포넌트",
|
|
"path": "src/components/composite/Toast.tsx",
|
|
"props": {
|
|
"toasts": {
|
|
"type": "array",
|
|
"required": false,
|
|
"description": "토스트 배열 (전역 상태 _global.toasts)"
|
|
},
|
|
"position": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "top-right",
|
|
"description": "토스트 표시 위치 (top-left | top-center | top-right | bottom-left | bottom-center | bottom-right)"
|
|
},
|
|
"duration": {
|
|
"type": "number",
|
|
"required": false,
|
|
"default": 3000,
|
|
"description": "기본 자동 닫힘 시간 (ms)"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "PageTransitionIndicator",
|
|
"type": "composite",
|
|
"description": "페이지 전환 로딩 인디케이터",
|
|
"path": "src/components/composite/PageTransitionIndicator.tsx",
|
|
"props": {
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "PageTransitionBlur",
|
|
"type": "composite",
|
|
"description": "페이지 전환 시 전체 콘텐츠 블러 오버레이",
|
|
"path": "src/components/composite/PageTransitionBlur.tsx",
|
|
"props": {
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "PageSkeleton",
|
|
"type": "composite",
|
|
"description": "레이아웃 컴포넌트 트리 기반 동적 스켈레톤 UI 렌더러",
|
|
"path": "src/components/composite/PageSkeleton.tsx",
|
|
"props": {
|
|
"components": {
|
|
"type": "array",
|
|
"required": true,
|
|
"description": "레이아웃 JSON의 components 배열 (엔진에서 자동 전달)"
|
|
},
|
|
"options": {
|
|
"type": "object",
|
|
"required": true,
|
|
"description": "스켈레톤 옵션 (animation, iteration_count) (엔진에서 자동 전달)"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "PageLoading",
|
|
"type": "composite",
|
|
"description": "페이지 로딩 인디케이터 (스피너 + 텍스트)",
|
|
"path": "src/components/composite/PageLoading.tsx",
|
|
"props": {
|
|
"options": {
|
|
"type": "object",
|
|
"required": false,
|
|
"description": "로딩 옵션 (text) (엔진에서 자동 전달)"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "ThemeToggle",
|
|
"type": "composite",
|
|
"description": "테마 전환 토글 (auto/light/dark)",
|
|
"path": "src/components/composite/ThemeToggle.tsx",
|
|
"props": {
|
|
"autoText": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "System",
|
|
"description": "자동 모드 텍스트"
|
|
},
|
|
"lightText": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "Light",
|
|
"description": "라이트 모드 텍스트"
|
|
},
|
|
"darkText": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "Dark",
|
|
"description": "다크 모드 텍스트"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "NotificationCenter",
|
|
"type": "composite",
|
|
"description": "알림 센터 드롭다운 — 알림 목록 표시, 무한스크롤, 읽음 추적, 안 읽은 필터, 개별/전체 삭제",
|
|
"path": "src/components/composite/NotificationCenter.tsx",
|
|
"props": {
|
|
"notifications": {
|
|
"type": "array",
|
|
"required": false,
|
|
"default": [],
|
|
"description": "알림 아이템 목록 (id, title, message, time, read, iconName, data)"
|
|
},
|
|
"unreadCount": {
|
|
"type": "number",
|
|
"required": false,
|
|
"default": 0,
|
|
"description": "서버 기반 미읽음 알림 수"
|
|
},
|
|
"hasMore": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": false,
|
|
"description": "추가 로드 가능 여부 (무한스크롤)"
|
|
},
|
|
"loading": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": false,
|
|
"description": "로딩 상태"
|
|
},
|
|
"titleText": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "알림",
|
|
"description": "드롭다운 제목"
|
|
},
|
|
"emptyText": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "알림 없음 텍스트"
|
|
},
|
|
"markAllReadText": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "모두 읽음 버튼 텍스트"
|
|
},
|
|
"deleteAllText": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "모두 삭제 버튼 텍스트"
|
|
},
|
|
"unreadOnlyText": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "안 읽은 알림만 체크박스 텍스트"
|
|
},
|
|
"unreadOnly": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": false,
|
|
"description": "안 읽은 알림만 필터 상태"
|
|
},
|
|
"dropdownAlign": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "right",
|
|
"description": "드롭다운 정렬 방향 (right/left)"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "추가 CSS 클래스"
|
|
}
|
|
},
|
|
"events": [
|
|
"onClose",
|
|
"onNotificationClick",
|
|
"onLoadMore",
|
|
"onMarkAllRead",
|
|
"onDeleteAll",
|
|
"onDelete",
|
|
"onUnreadOnlyToggle"
|
|
]
|
|
},
|
|
{
|
|
"name": "Pagination",
|
|
"type": "composite",
|
|
"description": "페이지네이션 컴포넌트 (페이지 번호, 이전/다음, 처음/마지막 버튼)",
|
|
"path": "src/components/composite/Pagination.tsx",
|
|
"props": {
|
|
"currentPage": {
|
|
"type": "number",
|
|
"required": true,
|
|
"description": "현재 페이지 번호"
|
|
},
|
|
"totalPages": {
|
|
"type": "number",
|
|
"required": false,
|
|
"description": "전체 페이지 수. 총 건수를 정확히 세지 못한 목록은 null (페이지 번호 목록과 마지막 페이지 점프가 감춰지고 이전/다음만 남음)"
|
|
},
|
|
"maxVisiblePages": {
|
|
"type": "number",
|
|
"required": false,
|
|
"default": 5,
|
|
"description": "표시할 최대 페이지 번호 수"
|
|
},
|
|
"showFirstLast": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": true,
|
|
"description": "처음/마지막 버튼 표시 여부"
|
|
},
|
|
"showFirst": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"description": "처음 버튼 표시 여부 (미지정 시 showFirstLast 를 따름)"
|
|
},
|
|
"showLast": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"description": "마지막 버튼 표시 여부 (미지정 시 showFirstLast 를 따름). 총 건수가 부정확해 totalPages 가 null 이면 이 값과 무관하게 감춰짐"
|
|
},
|
|
"hasMorePages": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"description": "다음 페이지 존재 여부. 총 건수를 모르는 목록에서 '다음' 버튼 활성 여부를 이 값으로 판정"
|
|
},
|
|
"prevText": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "이전 버튼 텍스트"
|
|
},
|
|
"nextText": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "다음 버튼 텍스트"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "SearchBar",
|
|
"type": "composite",
|
|
"description": "검색 바 컴포넌트 (입력 필드, 선택적 버튼, 자동완성 지원)",
|
|
"path": "src/components/composite/SearchBar.tsx",
|
|
"props": {
|
|
"name": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "search",
|
|
"description": "입력 필드 name 속성"
|
|
},
|
|
"placeholder": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "플레이스홀더 텍스트"
|
|
},
|
|
"value": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "입력 필드 값"
|
|
},
|
|
"showButton": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": false,
|
|
"description": "검색 버튼 표시 여부"
|
|
},
|
|
"suggestions": {
|
|
"type": "array",
|
|
"required": false,
|
|
"description": "자동완성 제안 목록"
|
|
},
|
|
"showSuggestions": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": false,
|
|
"description": "자동완성 표시 여부"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "Avatar",
|
|
"type": "composite",
|
|
"description": "사용자 아바타 (이미지 또는 이름 첫 글자)",
|
|
"path": "src/components/composite/Avatar.tsx",
|
|
"props": {
|
|
"name": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 이름"
|
|
},
|
|
"avatar": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "아바타 이미지 URL"
|
|
},
|
|
"size": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "md",
|
|
"description": "아바타 크기 (xs | sm | md | lg | xl)"
|
|
},
|
|
"text": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "레이아웃 JSON에서 text 속성으로 전달되는 이름"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "UserInfo",
|
|
"type": "composite",
|
|
"description": "사용자 정보 표시 및 드롭다운 메뉴 (이름, 서브텍스트, 프로필 링크, 비회원 배지)",
|
|
"path": "src/components/composite/UserInfo.tsx",
|
|
"props": {
|
|
"name": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 이름"
|
|
},
|
|
"userId": {
|
|
"type": "string | number",
|
|
"required": false,
|
|
"description": "사용자 ID"
|
|
},
|
|
"subText": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "서브 텍스트 (날짜, 시간 등)"
|
|
},
|
|
"isGuest": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": false,
|
|
"description": "비회원 여부"
|
|
},
|
|
"showDropdown": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": true,
|
|
"description": "드롭다운 표시 여부"
|
|
},
|
|
"clickable": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": true,
|
|
"description": "프로필 클릭 가능 여부"
|
|
},
|
|
"profilePath": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "/users/{userId}",
|
|
"description": "프로필 경로 패턴"
|
|
},
|
|
"text": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "레이아웃 JSON에서 text 속성으로 전달되는 이름"
|
|
},
|
|
"menuItems": {
|
|
"type": "array",
|
|
"required": false,
|
|
"description": "커스텀 메뉴 항목"
|
|
},
|
|
"hideMenuItems": {
|
|
"type": "array",
|
|
"required": false,
|
|
"description": "숨길 기본 메뉴 키 배열"
|
|
},
|
|
"appendMenuItems": {
|
|
"type": "array",
|
|
"required": false,
|
|
"description": "추가할 메뉴 항목"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "HtmlContent",
|
|
"type": "composite",
|
|
"description": "HTML 또는 일반 텍스트 콘텐츠 표시 (DOMPurify XSS 보호)",
|
|
"path": "src/components/composite/HtmlContent.tsx",
|
|
"props": {
|
|
"content": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "표시할 콘텐츠"
|
|
},
|
|
"text": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "레이아웃 JSON에서 text 속성으로 전달되는 콘텐츠"
|
|
},
|
|
"isHtml": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": true,
|
|
"description": "HTML 렌더링 여부"
|
|
},
|
|
"purifyConfig": {
|
|
"type": "object",
|
|
"required": false,
|
|
"description": "DOMPurify 설정 객체"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "BrandMark",
|
|
"type": "composite",
|
|
"description": "결제 브랜드 마크 (색 배지 또는 인라인 SVG 로고, DOMPurify 화이트리스트 sanitize)",
|
|
"path": "src/components/composite/BrandMark.tsx",
|
|
"props": {
|
|
"brandMark": {
|
|
"type": "object",
|
|
"required": false,
|
|
"description": "브랜드 마크 데이터 { text, class } 또는 { svg }"
|
|
},
|
|
"size": {
|
|
"type": "number",
|
|
"required": false,
|
|
"default": 32,
|
|
"description": "마크 컨테이너 크기(px)"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "HtmlEditor",
|
|
"type": "composite",
|
|
"description": "HTML/텍스트 에디터 (WYSIWYG, 미리보기, Form 자동 바인딩)",
|
|
"path": "src/components/composite/HtmlEditor.tsx",
|
|
"props": {
|
|
"name": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "content",
|
|
"description": "입력 필드 name 속성"
|
|
},
|
|
"value": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "에디터 초기 값"
|
|
},
|
|
"placeholder": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "플레이스홀더 텍스트"
|
|
},
|
|
"isHtml": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": true,
|
|
"description": "HTML 모드 여부"
|
|
},
|
|
"showPreview": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": false,
|
|
"description": "미리보기 모드 활성화"
|
|
},
|
|
"minHeight": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "200px",
|
|
"description": "최소 높이"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "Modal",
|
|
"type": "composite",
|
|
"description": "모달 다이얼로그 (ESC 키 닫기, 포커스 트랩, 오버레이 클릭 닫기)",
|
|
"path": "src/components/composite/Modal.tsx",
|
|
"props": {
|
|
"isOpen": {
|
|
"type": "boolean",
|
|
"required": true,
|
|
"description": "모달 열림 상태"
|
|
},
|
|
"onClose": {
|
|
"type": "function",
|
|
"required": true,
|
|
"description": "모달 닫기 핸들러"
|
|
},
|
|
"title": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "모달 제목"
|
|
},
|
|
"width": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "500px",
|
|
"description": "모달 너비"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
},
|
|
"children": {
|
|
"type": "ReactNode",
|
|
"required": false,
|
|
"description": "모달 내용"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "ConfirmDialog",
|
|
"type": "composite",
|
|
"description": "확인/취소 다이얼로그",
|
|
"path": "src/components/composite/ConfirmDialog.tsx",
|
|
"props": {
|
|
"isOpen": {
|
|
"type": "boolean",
|
|
"required": true,
|
|
"description": "다이얼로그 열림 상태"
|
|
},
|
|
"onClose": {
|
|
"type": "function",
|
|
"required": true,
|
|
"description": "닫기 핸들러"
|
|
},
|
|
"title": {
|
|
"type": "string",
|
|
"required": true,
|
|
"description": "다이얼로그 제목"
|
|
},
|
|
"message": {
|
|
"type": "string | ReactNode",
|
|
"required": true,
|
|
"description": "다이얼로그 메시지"
|
|
},
|
|
"confirmText": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "확인 버튼 텍스트"
|
|
},
|
|
"cancelText": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "취소 버튼 텍스트"
|
|
},
|
|
"onConfirm": {
|
|
"type": "function",
|
|
"required": true,
|
|
"description": "확인 버튼 클릭 핸들러"
|
|
},
|
|
"confirmButtonVariant": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "primary",
|
|
"description": "확인 버튼 스타일 (primary | secondary | danger | ghost)"
|
|
},
|
|
"isLoading": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": false,
|
|
"description": "로딩 상태"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "AvatarUploader",
|
|
"type": "composite",
|
|
"description": "아바타 이미지 업로드 컴포넌트 (원형 UI, 즉시 업로드)",
|
|
"path": "src/components/composite/AvatarUploader.tsx",
|
|
"props": {
|
|
"src": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "현재 아바타 URL"
|
|
},
|
|
"fallbackText": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "U",
|
|
"description": "이미지 없을 때 표시할 텍스트 (이니셜)"
|
|
},
|
|
"size": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "lg",
|
|
"description": "아바타 크기 (sm | md | lg | xl)"
|
|
},
|
|
"uploadEndpoint": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "/api/me/avatar",
|
|
"description": "업로드 API 엔드포인트"
|
|
},
|
|
"deleteEndpoint": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "/api/me/avatar",
|
|
"description": "삭제 API 엔드포인트"
|
|
},
|
|
"showDeleteButton": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": true,
|
|
"description": "삭제 버튼 표시 여부"
|
|
},
|
|
"accept": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "image/*",
|
|
"description": "허용 파일 타입"
|
|
},
|
|
"maxSize": {
|
|
"type": "number",
|
|
"required": false,
|
|
"default": 5,
|
|
"description": "최대 파일 크기 (MB)"
|
|
},
|
|
"readOnly": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": false,
|
|
"description": "읽기 전용 모드"
|
|
},
|
|
"confirmDelete": {
|
|
"type": "boolean",
|
|
"required": false,
|
|
"default": true,
|
|
"description": "삭제 확인 다이얼로그 표시 여부"
|
|
},
|
|
"deleteConfirmMessage": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "삭제 확인 메시지"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "TabNavigation",
|
|
"type": "composite",
|
|
"description": "탭 네비게이션 (underline/pills/enclosed 변형)",
|
|
"path": "src/components/composite/TabNavigation.tsx",
|
|
"props": {
|
|
"tabs": {
|
|
"type": "array",
|
|
"required": true,
|
|
"description": "탭 목록 (id, label, iconName)"
|
|
},
|
|
"activeTabId": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "활성 탭 ID"
|
|
},
|
|
"variant": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "underline",
|
|
"description": "탭 스타일 (underline | pills | enclosed)"
|
|
},
|
|
"onTabChange": {
|
|
"type": "function",
|
|
"required": false,
|
|
"description": "탭 변경 핸들러"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "SlotContainer",
|
|
"type": "composite",
|
|
"description": "동적 슬롯 컨테이너 — 레이아웃 JSON 노드(slot)/확장 주입 조각을 떙겨 렌더 (빈 슬롯=미렌더). 헤더 통화 등 모듈 주입 UI 소비",
|
|
"path": "src/components/composite/SlotContainer.tsx",
|
|
"props": {
|
|
"slotId": {
|
|
"type": "string",
|
|
"required": true,
|
|
"description": "렌더할 슬롯 ID"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "컨테이너 클래스"
|
|
},
|
|
"emptyContent": {
|
|
"type": "node",
|
|
"required": false,
|
|
"description": "빈 슬롯일 때 표시할 내용"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "ExpandableContent",
|
|
"type": "composite",
|
|
"description": "콘텐츠 펼치기/접기 (높이 초과 시 그라데이션 + 버튼 표시)",
|
|
"path": "src/components/composite/ExpandableContent.tsx",
|
|
"props": {
|
|
"maxHeight": {
|
|
"type": "number",
|
|
"required": false,
|
|
"default": 500,
|
|
"description": "접힌 상태 최대 높이 (px)"
|
|
},
|
|
"expandText": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "펼치기 버튼 텍스트"
|
|
},
|
|
"collapseText": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "접기 버튼 텍스트"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
}
|
|
],
|
|
"layout": [
|
|
{
|
|
"name": "Container",
|
|
"type": "layout",
|
|
"description": "레이아웃 컨테이너",
|
|
"path": "src/components/layout/Container.tsx",
|
|
"props": {
|
|
"maxWidth": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "7xl",
|
|
"description": "최대 너비 (sm | md | lg | xl | 2xl | 7xl)"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "Flex",
|
|
"type": "layout",
|
|
"description": "Flexbox 레이아웃",
|
|
"path": "src/components/layout/Flex.tsx",
|
|
"props": {
|
|
"direction": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "row",
|
|
"description": "정렬 방향 (row | col)"
|
|
},
|
|
"gap": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "간격"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "Grid",
|
|
"type": "layout",
|
|
"description": "Grid 레이아웃",
|
|
"path": "src/components/layout/Grid.tsx",
|
|
"props": {
|
|
"cols": {
|
|
"type": "number",
|
|
"required": false,
|
|
"default": 1,
|
|
"description": "열 수"
|
|
},
|
|
"gap": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "간격"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "SectionLayout",
|
|
"type": "layout",
|
|
"description": "섹션 레이아웃 (제목, 부제목, 패딩 등)",
|
|
"path": "src/components/layout/SectionLayout.tsx",
|
|
"props": {
|
|
"title": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "섹션 제목"
|
|
},
|
|
"subtitle": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "섹션 부제목"
|
|
},
|
|
"padding": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "md",
|
|
"description": "패딩 크기 (none | sm | md | lg | xl)"
|
|
},
|
|
"background": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "white",
|
|
"description": "배경색 (white | gray | transparent)"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "ThreeColumnLayout",
|
|
"type": "layout",
|
|
"description": "3단 레이아웃 (좌측, 중앙, 우측)",
|
|
"path": "src/components/layout/ThreeColumnLayout.tsx",
|
|
"props": {
|
|
"leftWidth": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "1fr",
|
|
"description": "좌측 열 너비"
|
|
},
|
|
"centerWidth": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "2fr",
|
|
"description": "중앙 열 너비"
|
|
},
|
|
"rightWidth": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "1fr",
|
|
"description": "우측 열 너비"
|
|
},
|
|
"gap": {
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "6",
|
|
"description": "열 간격"
|
|
},
|
|
"className": {
|
|
"type": "string",
|
|
"required": false,
|
|
"description": "사용자 정의 클래스"
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|