Preline 4.2.0 HSTabs 및 HSInputNumber와 Tailwind CSS 4.3.3, 패키지 기본 테마를 사용합니다. · 구현 레퍼런스
02
Preline UI 디자인 시스템 디자인 참고 자료
Preline npm 4.2.0과 Tailwind CSS 4.3.3을 사용하며, 설치된 패키지의 기본 테마를 적용합니다. 마케팅 및 문서 사이트에는 최신 버전 배너가 표시될 수 있으므로, 실행 가능한 예제는 사용할 버전을 명시적으로 고정했습니다. 테마 별칭은 그대로 유지하며, 근거 없이 16진수 색상값으로 변환하지 않습니다.
Preline UI 디자인 시스템: Preline은 유틸리티 마크업과 동작 플러그인을 결합합니다
Preline은 유틸리티 마크업과 동작 플러그인을 결합합니다
이 플래너는 기본 Preline 플러그인 두 가지를 사용합니다. HSTabs는 세션 패널을 선택하고, HSInputNumber는 값의 범위가 제한된 증가 및 감소 컨트롤을 관리합니다. 시각적 스타일 대부분은 Tailwind 클래스가 제공합니다. 오리지널 세션 일러스트와 예산 계산은 애플리케이션 자체의 기능이며, 모든 기능이 포함된 예약 컴포넌트가 제공되는 것은 아닙니다.
예제를 복사할 때는 이 차이를 이해해야 합니다. JavaScript 패키지만 설치해도 유틸리티 클래스가 컴파일되거나 애플리케이션 마크업이 제공되는 것은 아닙니다. 반대로 플러그인을 초기화하지 않고 HTML만 복사하면 탭과 숫자 입력 동작이 완성되지 않습니다. 아래 전체 통합 예제에서는 필요한 각 요소를 명시적으로 제공합니다.
패키지 기본 라이트 테마에서 --primary는 --color-primary-600을 참조하며, 기본 primary 색상 단계는 파란색입니다. primary 전경색은 흰색으로 지정되고, 호버·포커스·활성 상태에는 700 역할이 사용됩니다. 선택된 탭과 저장 동작은 시맨틱 유틸리티 클래스를 통해 같은 계열을 공유합니다.
카드에는 --card와 --card-line을 사용하고, 수량 입력 필드에는 --layer와 --layer-line을 사용합니다. 이러한 역할을 분리하면 곳곳에 흰색과 회색을 직접 지정하는 것보다 이후 테마 변경을 예측하기 쉽습니다. 아래 표에서는 공식 별칭을 그대로 유지해 계산으로 추정한 값을 소스 토큰인 것처럼 표시하지 않습니다.
Preline UI 디자인 시스템: Tailwind의 실제 스케일을 사용하고 오리지널 예외를 표시하세요
Tailwind의 실제 스케일을 사용하고 오리지널 예외를 표시하세요
페이지 제목과 예상 금액에는 text-3xl, 세션 제목에는 text-2xl, 폼 설명에는 text-sm을 사용합니다. 카드 패딩 p-5는 기본 간격 단위 기준 1.25rem입니다. 페이지 여백이 sm:p-8로 넓어지는 기준은 Tailwind의 640px 소형 중단점이며, 오리지널 그리드는 760px에서 한 열로 전환됩니다.
로컬 스타일시트는 system-ui를 사용하며 Preline 테마 파일에 지정된 선택 글꼴은 불러오지 않습니다. 화면 너비가 280px일 때는 탭이 두 줄로 배치되고 그룹 카드가 세션 아래로 이동합니다. 이는 오리지널 애플리케이션 구성에 따른 선택이며, 모든 Preline 레이아웃이 이와 같은 형태라는 뜻은 아닙니다.
각 탭의 data-hs-tab은 고유한 패널 하나를 가리킵니다. 보조 기술에서도 관계를 확인할 수 있도록 탭의 aria-controls와 패널의 aria-labelledby에 같은 연결 정보를 지정합니다. 처음에는 탭 하나에만 active와 aria-selected=true를 설정하고, 나머지 패널은 숨김 상태로 둡니다. HSTabs가 사용자의 탐색에 따라 해당 상태를 업데이트합니다.
현재 시각 스타일은 hs-tab-active:bg-primary와 hs-tab-active:text-primary-foreground를 사용합니다. 이 변형은 Preline의 variants.css에서 제공되므로 해당 파일을 가져오지 않으면 JavaScript가 클래스를 올바르게 변경해도 선택 상태가 모호하게 보일 수 있습니다. 애플리케이션은 선택 변경을 감지해 인접한 요약을 새로 고칩니다.
수량 래퍼는 data-hs-input-number에서 최소값 1, 최대값 6, 증가 단위 1을 설정합니다. 기본 숫자 입력에도 같은 제약 조건을 지정합니다. 이렇게 하면 플러그인 버튼과 브라우저 유효성 검사에 동일한 허용 범위가 적용되어, 버튼 핸들러에만 있는 제한을 직접 입력한 숫자로 우회할 수 없습니다.
요약은 input, change, 플러그인의 change 콜백을 감지합니다. 직접 입력한 값이 유효하지 않으면 합계 대신 긴 대시를 표시하고 저장을 비활성화합니다. 저장 핸들러도 값을 읽기 전에 reportValidity를 호출합니다. 6명 제한은 계획 예시의 제약 조건이며 실제 예약 가능 인원을 의미하지 않습니다.
각 패널에는 세션 이름, 가격, 소요 시간을 안정적인 데이터 속성으로 저장합니다. 업데이트 함수는 현재 표시되는 패널을 읽고, 유효한 참가자 수에 재료비를 곱합니다. 따라서 Print studio, Clay workshop, Drawing walk는 같은 자리 표시자 카드만 보여 주는 탭이 아니라 실제로 서로 다른 선택지가 됩니다.
표시되는 예상 금액에는 재료비만 포함됩니다. 원래 설명에 비용에 포함되는 항목을 명시하고, 이 페이지가 예약을 진행하지 않는다는 점도 분명히 밝힙니다. 금액과 연결된 결제, 재고 확인, 외부 일정 기능은 없습니다. 실제 예약 흐름을 구현하려면 이러한 별도 시스템과 서버 측 유효성 검사가 필요합니다.
Preline UI 디자인 시스템: 이 패키지 버전에서 내보내는 수동 초기화 항목을 사용하세요
이 패키지 버전에서 내보내는 수동 입력 컴포넌트를 사용하세요
검증된 4.2.0 패키지는 preline/non-auto에서 이름이 지정된 HSTabs 및 HSInputNumber 내보내기를 제공합니다. 예제는 이를 가져온 뒤 마크업이 준비되면 autoInit 메서드를 호출합니다. 이름과 달리 여기서 autoInit은 애플리케이션이 명시적으로 호출하는 스캔 함수이지, 페이지 로드 시 패키지 전체를 암묵적으로 초기화하는 훅이 아닙니다.
검증 과정에서 플러그인별 .mjs 경로는 기본 클래스를 내보내지 않았으며, 패키지의 부수 효과 메타데이터 때문에 해당 경로에서 직접 가져온 항목이 제거될 수 있었습니다. 내보내는 수동 초기화 항목을 사용해 실제 빌드 문제를 해결했습니다. 따라서 설정에는 검증되지 않은 일반 플러그인 가져오기 방식이 아니라, 해당 버전에서 작동하는 가져오기 방식이 제시되어 있습니다.
Save local plan을 누르면 정확한 세션명, 인원수, 재료비 합계가 포함된 상태 문구가 표시된 뒤 버튼이 비활성화됩니다. 수량을 편집하거나 선택한 탭을 변경하면 update가 호출되어 기본 안내 문구로 돌아가고 저장 가능 여부를 다시 계산합니다. 이전에 저장한 문구가 새 계획에 그대로 남지 않습니다.
로컬 테스트에서 Clay workshop을 선택하고 인원수를 3명으로 늘린 다음, 결과 상태에 $54가 표시되는지 확인했습니다. 또한 280px 너비에서 실제 렌더링된 페이지를 살펴봤습니다. 고정된 합계나 버튼 레이블만 바꾸는 버튼으로는 기본 플러그인 두 개와 애플리케이션 상태가 연결되었음을 증명할 수 없습니다.
스타일시트는 먼저 Tailwind를 가져온 다음 Preline 변형과 패키지의 기본 테마를 가져옵니다. 명시적인 소스 경로에는 로컬 HTML, 애플리케이션 JavaScript, Preline 배포 파일이 포함되므로 상태에 따라 달라지는 유틸리티를 생성된 CSS에서 사용할 수 있습니다. 기존 레이아웃 스타일시트는 이러한 가져오기 뒤에 배치합니다.
독립 실행형 미리보기는 컴파일된 CSS과 번들로 묶인 JavaScript을 인라인으로 포함하며 CDN에 요청을 보내지 않습니다. 프로덕션 프로젝트에서는 같은 결과물을 별도 파일로 제공할 수 있습니다. 파일 경로는 실제 CSS 항목을 기준으로 지정하세요. 아래의 재현 가능한 예제에서는 숨겨진 임시 작업 공간에 의존하지 않도록 모든 소스 파일을 프로젝트 루트에 둡니다.
기본 Preline 4.2.0을 사용하고 검증했습니다. 전체 마크업, 로직, CSS은 위에 제공되어 있습니다. input.css의 소스 경로는 네 개의 소스 파일이 모두 프로젝트 루트에 있다고 가정합니다.
bash
# Create an empty directory and run:
npm init -y
npm install [email protected][email protected] @tailwindcss/[email protected] esbuild
# Save the complete examples above as body.html, app.js and style.css.
# Create input.css with exactly:
# @import "tailwindcss" source(none);
# @import "./node_modules/preline/variants.css";
# @import "./node_modules/preline/css/themes/theme.css";
# @source "./body.html";
# @source "./app.js";
# @source "./node_modules/preline/dist/*.js";
# @import "./style.css";
npx @tailwindcss/cli -i input.css -o bundle.css --minify
npx esbuild app.js --bundle --format=iife --outfile=bundle.js
# Assemble the actual root document without placeholder markup:
node -e 'const f=require("fs");f.writeFileSync("index.html",`<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Studio planner</title><link rel="stylesheet" href="bundle.css"></head><body>${f.readFileSync("body.html","utf8")}<script src="bundle.js"></script></body></html>`)'
# Serve this directory with your existing static server.
프로젝트를 위한 프롬프트
에이전트 프롬프트
preline/non-auto에서 이름이 지정된 HSTabs 및 HSInputNumber를 가져오는 Preline 4.2.0을 사용하고 두 플러그인을 명시적으로 초기화하세요. Studio Saturday 워크숍 세 곳, 수량 범위 1~6, 선택한 워크숍의 재료비를 유지하세요. 활성 패널과 수량을 기준으로 합계를 계산하고, 둘 중 하나가 변경되면 저장된 계획을 무효화하며, 로컬에 저장하기 전에 숫자 범위를 검증하세요. 제공된 Tailwind 테마 및 변형 설정과 오리지널 레이아웃을 포함하세요. 로컬 스튜디오 계획을 예약 또는 결제 확인으로 바꾸지 마세요.
05
Preline UI 디자인 시스템의 출처와 범위
Preline 네이티브 npm 4.2.0과 Tailwind CSS 4.3.3. 세션 설명과 일러스트, 가상의 재료비는 원본 그대로입니다. 저장하면 페이지의 로컬 상태만 저장되며, 예약이나 결제 또는 외부 메시지는 발생하지 않습니다.
