캡처한 공개 테마에서는 기본 작업 색상을 blue-60, 기본 전경색을 neutral-100, 보조 전경색을 neutral-80으로 정의합니다. 이 두 단계 구조를 사용하면 애플리케이션 곳곳에 리터럴 색상을 중복해서 쓰지 않고도 맞춤 양식을 테마에 맞출 수 있습니다.
공개 토큰 페이지에서는 Core, Dark, Contrast 모드를 제공합니다. 이 가이드의 값은 해당 페이지의 코어/라이트 스타일시트 스냅샷에서 가져왔습니다. 미리보기는 파란색 헥스 값이 세 모드에서 모두 동일하다고 주장하지 않습니다. 프로덕션 컴포넌트에서는 시맨틱 별칭을 사용하고 선택한 테마가 값을 결정하도록 해야 합니다.
간격 별칭에는 8픽셀 프리미티브를 사용하는 xs, 16픽셀의 sm, 24픽셀의 md, 32픽셀의 lg가 있습니다. 제공된 네이티브 CSS에서는 주요 안쪽 여백에 md를, 필드 사이 간격에 sm을 사용합니다. 이렇게 하면 참조 표의 구체적인 값을 유지하면서 소스 코드에 의도를 드러낼 수 있습니다.
기본 글꼴은 Source Sans Pro이고 고정폭 글꼴은 Source Code Pro입니다. font-size-default 별칭은 16픽셀 스케일 항목을 가리킵니다. 패키지 README에 설명된 글꼴 에셋을 별도로 제공해야 하며, 라이브러리를 불러온다고 이 과정이 생략되지는 않습니다. 오프라인 미리보기에서는 일반적인 대체 글꼴을 사용합니다.
모서리 반경 이름은 간격 이름과 별개입니다. radius-sm은 8픽셀, space-sm은 16픽셀에 해당합니다. 두 이름 모두 sm으로 끝난다는 이유로 기억해 둔 숫자를 재사용하면 잘못된 값이 적용됩니다.
공식 예제에서는 읽기 전용, 비활성화, 변경 추적, 지우기 가능, 대문자, 소문자, 논리적 텍스트 정렬 기능을 보여 줍니다. 요청 예제에서는 자산 식별자에 읽기 전용을, 작업 요약에 지우기 가능 상태를 사용하면 됩니다. 이메일 입력에 자동 대소문자 변환을 적용하거나 자유 형식 설명을 사용자 모르게 변환하지 않습니다.
네이티브 입력 예시에서는 연락처 필드에 validate="email required"를 선언합니다. 공개된 타입 선언에는 value, focus(), checkValidation()이 포함되어 있습니다. checkValidation은 void를 반환하므로 Boolean 형식의 폼 유효성 결과로 오인하지 않고, 로컬 기록을 준비할 수 있는 조건을 별도로 확인합니다.
공식 IDS 입력 갤러리에서는 초기값이 있는 입력에 dirty-tracker="true"를 적용한 예시를 보여줍니다. 변경 추적은 필드의 편집 여부에 관한 기능이며, 허용되는 입력값을 정의하는 email 및 required 규칙의 validate 속성과는 별개입니다. 연락처 필드를 수정했더라도 주소가 유효하지 않을 수 있습니다.
공개된 Input 선언에는 checkValidation(): void가 정의되어 있습니다. 이 메서드는 컴포넌트의 유효성 검사 동작을 실행하는 데 사용하며, 작업 지시 동작을 허용하는 Boolean 조건으로 사용하지 않습니다. 네이티브 예시에서도 초안을 만들기 전에 애플리케이션에서 필수 값을 확인합니다. 지우기 기능이 있는 요약 필드와 읽기 전용 자산 필드는 서로 독립적인 입력 기능을 보여줍니다.
변경 추적은 문서화된 확장 기능이며, 이 미리보기에서는 활성화되어 있지 않습니다. 데모는 편집 후 준비된 요약을 지우고 작업 요약 필드에 포커스를 다시 맞춥니다. 유지보수 요청이 저장되었다고 알리지는 않습니다.
확인된 패키지의 버전은 1.17.1이며, ES 모듈 진입점은 enterprise-wc.js이고 현재 소스 저장소는 Infor에서 호스팅합니다. 따라서 이전 GitHub 위치는 신뢰할 수 있는 설치 안내가 아닙니다. 코드는 공개 패키지를 가져와 컴포지션을 삽입한 뒤, 동작을 연결하기 전에 커스텀 요소가 정의될 때까지 기다립니다.
공식 라이브 예시에는 빌드에 따라 달라지는 청크 URL이 포함되어 있습니다. 임의의 청크 이름을 애플리케이션에 복사하면 배포 산출물에 종속될 수 있습니다. 패키지 진입점을 사용하면 번들러가 해당 종속성을 확인합니다. 이 가이드에서는 공개 메서드 선언을 확인하고, 브라우저 예시와 네이티브 빌드에 관한 주장을 명확히 구분합니다.
Vite vanilla 스캐폴드에 고정된 패키지를 설치하고, 애플리케이션의 에셋 정책에 따라 문서화된 글꼴을 포함합니다.
제공된 진입점을 사용하고 CSS, 커스텀 요소가 정의될 때까지 기다린 다음 기본 동작과 초기화 동작을 연결합니다.
요약이 비어 있는 경우, 형식이 잘못된 이메일, 유효한 로컬 초안, 이후 편집을 테스트하고 표시된 스냅샷이 오래된 상태로 남지 않는지 확인합니다.
사용할 수 없는 컴포넌트는 흐리게 표시하는 것만으로 표현하지 말고 disabled를 적용합니다.
04
Infor 디자인 시스템 에이전트 설정
구현 시작점
#app을 사용하는 Vite vanilla 스캐폴드용 전체 진입점과 스타일시트입니다. 패키지 버전과 메서드는 공개 패키지에서 확인했으며, 여기서는 컴파일을 실행하지 않았습니다. 승인된 글꼴 제공처에서 Source Sans Pro를 가져오세요. 포함된 미리보기는 독립적인 네이티브 HTML 구현입니다.
JavaScript / CSS
// Vite vanilla project: npm install [email protected]
// src/main.js. Add Source Sans Pro through your approved font-hosting setup.
import 'ids-enterprise-wc';
import './style.css';
document.querySelector('#app').innerHTML=`<ids-container><main>
<h1>Maintenance request</h1><p>Local draft only; no work order is sent.</p>
<ids-input id="asset" label="Asset identifier" value="02006" readonly="true"></ids-input>
<ids-input id="summary" label="Work summary" validate="required" clearable="true"></ids-input>
<ids-input id="contact" label="Contact email" validate="email required"></ids-input>
<ids-button id="prepare" appearance="primary"><span>Prepare local draft</span></ids-button>
<ids-button id="reset" appearance="secondary"><span>Clear draft</span></ids-button>
<p id="message" role="status"></p><pre id="draft"></pre>
</main></ids-container>`;
await Promise.all(['ids-input','ids-button','ids-container'].map(n=>customElements.whenDefined(n)));
const summary=document.querySelector('#summary'),contact=document.querySelector('#contact');
const message=document.querySelector('#message'),draft=document.querySelector('#draft');
document.querySelector('#prepare').addEventListener('click',()=>{
summary.checkValidation();contact.checkValidation();
const title=summary.value.trim(),email=contact.value.trim();
if(!title){message.textContent='Enter a work summary.';summary.focus();return;}
if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){message.textContent='Enter a complete contact email.';contact.focus();return;}
draft.textContent=JSON.stringify({asset:'02006',summary:title,contact:email},null,2);
message.textContent='Draft prepared in this page only. No request sent.';
});
function clearResult(){draft.textContent='';message.textContent='';}
summary.addEventListener('input',clearResult);contact.addEventListener('input',clearResult);
document.querySelector('#reset').addEventListener('click',()=>{summary.value='';contact.value='';clearResult();summary.focus();});
/* src/style.css — application layout using the loaded IDS token roles */
main{max-width:44rem;margin:auto;padding:var(--ids-space-md);color:var(--ids-color-foreground-default-default)}
ids-input{display:block;margin-bottom:var(--ids-space-sm)}
ids-button{margin-inline-end:var(--ids-space-xs)}
pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--ids-color-accent-neutral-weakest);padding:var(--ids-space-sm)}
프로젝트를 위한 프롬프트
에이전트 프롬프트
검증된 밝은 테마 별칭과 문서화된 입력 및 버튼 구조를 사용해 Infor IDS 유지보수 초안을 만드세요. 자산 식별자는 문자열이자 읽기 전용 값으로 유지합니다. 편집 가능한 필드의 유효성을 검사하고, 편집 후 오래된 출력을 지우며, 로컬 초안과 제출된 작업 지시를 구분하세요. checkValidation()이 Boolean을 반환한다고 간주하지 마세요.
05
Infor 디자인 시스템 출처 및 범위
독립적인 OpenDesign 가이드입니다. 자산과 워크플로는 가상이며 아무것도 제출되지 않습니다. 네이티브 코드에서는 확인된 1.17.1 패키지를 참조하며, 토큰 값은 별도의 실시간 core/light 테마 스냅샷으로 표시합니다.
