@lettealo/hanwha-life-ds 3.1.1

package/dist-lib/types/lib/generateStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateStore.d.ts","sourceRoot":"","sources":["../../../src/lib/generateStore.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,GAAI,GAAG,MAAM,SAAyB,CAAA;AACnE,eAAO,MAAM,gBAAgB,cAAqB,CAAA"}

package/dist-lib/types/types.d.ts

@@ -0,0 +1,208 @@
+export declare const NAV: readonly [{
+    readonly group: "Get started";
+    readonly items: readonly [{
+        readonly key: "overview";
+        readonly label: "Overview";
+        readonly keywords: readonly ["개요", "시작", "소개", "가이드", "홈"];
+    }, {
+        readonly key: "foundation";
+        readonly label: "Foundations";
+        readonly keywords: readonly ["파운데이션", "기초", "기본", "원칙"];
+    }, {
+        readonly key: "components";
+        readonly label: "Components";
+        readonly keywords: readonly ["컴포넌트", "갤러리", "목록", "전체", "지원환경"];
+    }, {
+        readonly key: "download";
+        readonly label: "Downloads";
+        readonly keywords: readonly ["다운로드", "에셋", "폰트", "아이콘", "토큰", "외주", "협력사", "패키지"];
+    }, {
+        readonly key: "generate";
+        readonly label: "AI Screen Builder";
+        readonly keywords: readonly ["생성", "AI", "자연어", "화면생성", "코드생성", "generate", "screen"];
+    }, {
+        readonly key: "changelog";
+        readonly label: "Releases";
+        readonly keywords: readonly ["변경사항", "업데이트", "릴리즈", "버전", "v3", "새기능", "changelog", "whatsnew"];
+    }];
+}, {
+    readonly group: "Foundations";
+    readonly items: readonly [{
+        readonly key: "color";
+        readonly label: "Color";
+        readonly keywords: readonly ["컬러", "색상", "색깔", "팔레트", "브랜드컬러", "오렌지"];
+    }, {
+        readonly key: "type";
+        readonly label: "Typography";
+        readonly keywords: readonly ["타이포그래피", "폰트", "글꼴", "텍스트", "서체", "글자", "자간", "행간"];
+    }, {
+        readonly key: "spacing";
+        readonly label: "Spacing";
+        readonly keywords: readonly ["스페이싱", "간격", "여백", "마진", "패딩", "레이아웃"];
+    }, {
+        readonly key: "shape";
+        readonly label: "Shape";
+        readonly keywords: readonly ["쉐이프", "모양", "둥글기", "라운드", "모서리", "테두리"];
+    }, {
+        readonly key: "elevation";
+        readonly label: "Elevation";
+        readonly keywords: readonly ["그림자", "엘리베이션", "섀도우", "깊이", "레이어"];
+    }, {
+        readonly key: "grid";
+        readonly label: "Grid & Layout";
+        readonly keywords: readonly ["그리드", "레이아웃", "격자", "컬럼", "열", "반응형"];
+    }, {
+        readonly key: "motion";
+        readonly label: "Motion";
+        readonly keywords: readonly ["모션", "애니메이션", "전환", "트랜지션", "움직임", "인터랙션"];
+    }, {
+        readonly key: "icons";
+        readonly label: "Icons";
+        readonly keywords: readonly ["아이콘", "아이콘셋", "심볼", "SVG"];
+    }, {
+        readonly key: "illustration";
+        readonly label: "Illustration";
+        readonly keywords: readonly ["일러스트", "그래픽", "이미지", "캐릭터", "피드백"];
+    }, {
+        readonly key: "writing";
+        readonly label: "Voice & Tone";
+        readonly keywords: readonly ["보이스", "톤", "글쓰기", "문체", "언어", "UX라이팅", "긍정표현", "금지어", "순화어", "보이스앤톤"];
+    }];
+}, {
+    readonly group: "Actions";
+    readonly items: readonly [{
+        readonly key: "button";
+        readonly label: "Button";
+        readonly keywords: readonly ["버튼", "클릭", "CTA", "액션", "확인", "취소"];
+    }];
+}, {
+    readonly group: "Forms";
+    readonly items: readonly [{
+        readonly key: "input";
+        readonly label: "Text Field";
+        readonly keywords: readonly ["입력", "텍스트필드", "인풋", "폼", "텍스트박스", "인풋필드"];
+    }, {
+        readonly key: "selection";
+        readonly label: "Selection";
+        readonly keywords: readonly ["체크박스", "라디오", "토글", "선택", "스위치"];
+    }, {
+        readonly key: "chip";
+        readonly label: "Chip";
+        readonly keywords: readonly ["칩", "태그", "필터칩", "선택칩"];
+    }, {
+        readonly key: "dropdown";
+        readonly label: "Dropdown";
+        readonly keywords: readonly ["드롭다운", "선택박스", "셀렉트", "셀렉박스", "선택목록"];
+    }, {
+        readonly key: "datepicker";
+        readonly label: "Date Picker";
+        readonly keywords: readonly ["날짜선택", "달력", "캘린더", "날짜", "데이트피커"];
+    }];
+}, {
+    readonly group: "Navigation";
+    readonly items: readonly [{
+        readonly key: "tabs";
+        readonly label: "Tabs & Stepper";
+        readonly keywords: readonly ["탭", "스테퍼", "단계", "진행", "스텝", "페이지전환"];
+    }, {
+        readonly key: "header";
+        readonly label: "Header (GNB)";
+        readonly keywords: readonly ["헤더", "GNB", "네비게이션", "상단바", "앱바", "툴바"];
+    }, {
+        readonly key: "bottombar";
+        readonly label: "BottomBar";
+        readonly keywords: readonly ["바텀바", "하단바", "탭바", "하단네비", "하단메뉴"];
+    }];
+}, {
+    readonly group: "Data Display";
+    readonly items: readonly [{
+        readonly key: "card";
+        readonly label: "Card";
+        readonly keywords: readonly ["카드", "리스트카드", "상품카드", "정보카드"];
+    }, {
+        readonly key: "list";
+        readonly label: "List";
+        readonly keywords: readonly ["리스트", "목록", "아이템", "항목"];
+    }, {
+        readonly key: "table";
+        readonly label: "Table";
+        readonly keywords: readonly ["테이블", "표", "데이터표", "그리드"];
+    }, {
+        readonly key: "accordion";
+        readonly label: "Accordion";
+        readonly keywords: readonly ["아코디언", "접기", "펼치기", "토글패널", "확장"];
+    }, {
+        readonly key: "avatar";
+        readonly label: "Avatar";
+        readonly keywords: readonly ["아바타", "프로필", "사진", "사용자이미지", "프로필사진"];
+    }, {
+        readonly key: "badge";
+        readonly label: "Badge";
+        readonly keywords: readonly ["뱃지", "알림표시", "숫자표시", "카운트", "N"];
+    }, {
+        readonly key: "notification";
+        readonly label: "Notification";
+        readonly keywords: readonly ["알림", "노티피케이션", "푸시", "공지"];
+    }, {
+        readonly key: "empty";
+        readonly label: "Empty State";
+        readonly keywords: readonly ["빈화면", "에러", "데이터없음", "결과없음", "에러화면", "오류"];
+    }];
+}, {
+    readonly group: "Feedback";
+    readonly items: readonly [{
+        readonly key: "modal";
+        readonly label: "Modal";
+        readonly keywords: readonly ["모달", "팝업", "다이얼로그", "레이어팝업", "확인창"];
+    }, {
+        readonly key: "sheet";
+        readonly label: "Bottom Sheet";
+        readonly keywords: readonly ["바텀시트", "슬라이드업", "하단시트", "드로어"];
+    }, {
+        readonly key: "toast";
+        readonly label: "Toast";
+        readonly keywords: readonly ["토스트", "스낵바", "알림메시지", "플로팅메시지"];
+    }, {
+        readonly key: "tooltip";
+        readonly label: "Tooltip";
+        readonly keywords: readonly ["툴팁", "도움말", "힌트", "말풍선"];
+    }, {
+        readonly key: "progress";
+        readonly label: "Progress";
+        readonly keywords: readonly ["프로그레스", "로딩", "진행률", "로더", "프로그레스바", "퍼센트"];
+    }, {
+        readonly key: "skeleton";
+        readonly label: "Skeleton";
+        readonly keywords: readonly ["스켈레톤", "로딩화면", "플레이스홀더", "뼈대"];
+    }];
+}, {
+    readonly group: "Patterns";
+    readonly items: readonly [{
+        readonly key: "patterns";
+        readonly label: "Overview";
+        readonly keywords: readonly ["패턴", "화면구성", "UX패턴", "플로우"];
+    }, {
+        readonly key: "signup";
+        readonly label: "회원가입";
+        readonly keywords: readonly ["가입", "약관동의", "인증", "회원", "신규가입", "계정생성"];
+    }, {
+        readonly key: "mypage";
+        readonly label: "마이페이지";
+        readonly keywords: readonly ["내정보", "계정", "프로필", "마이", "설정", "계약정보"];
+    }, {
+        readonly key: "subscription";
+        readonly label: "청약";
+        readonly keywords: readonly ["보험가입", "신청", "가입신청", "보험청약", "계약", "상품"];
+    }, {
+        readonly key: "mocking";
+        readonly label: "Mobile Mocking";
+        readonly keywords: readonly ["모킹", "목업", "모바일", "키보드", "상태바", "iOS", "안드로이드"];
+    }];
+}];
+export type PageKey = (typeof NAV)[number]['items'][number]['key'];
+export declare const PAGE_KEYS: PageKey[];
+export type NavAwareProps = {
+    onNavigate: (k: PageKey) => void;
+};
+export declare const STORYBOOK_URL: string | null;
+//# sourceMappingURL=types.d.ts.map

package/dist-lib/types/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6DN,CAAA;AAEV,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAA;AAElE,eAAO,MAAM,SAAS,EAAE,OAAO,EAAoD,CAAA;AAEnF,MAAM,MAAM,aAAa,GAAG;IAAE,UAAU,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;CAAE,CAAA;AAIhE,eAAO,MAAM,aAAa,EAAE,MAAM,GAAG,IACyD,CAAA"}

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@lettealo/hanwha-life-ds",
+  "version": "3.1.1",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist-lib/index.cjs",
+  "module": "./dist-lib/index.mjs",
+  "types": "./dist-lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist-lib/types/index.d.ts",
+      "import": "./dist-lib/index.mjs",
+      "require": "./dist-lib/index.cjs"
+    },
+    "./styles": "./dist-lib/index.css",
+    "./tokens": "./src/styles/tokens.css",
+    "./layout": "./src/styles/layout.css"
+  },
+  "files": [
+    "dist-lib",
+    "src/styles/tokens.css",
+    "src/styles/layout.css",
+    "src/assets/fonts"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "build:lib": "vite build --config vite.lib.config.ts && tsc -p tsconfig.lib.json",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "ds:sync": "npx tsx scripts/syncSpec.ts",
+    "check:tokens": "bash scripts/check-tokens.sh"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.1.2",
+    "@eslint/js": "^10.0.1",
+    "@storybook/addon-a11y": "^10.3.6",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/addon-onboarding": "^10.3.6",
+    "@storybook/addon-vitest": "^10.3.6",
+    "@storybook/react-vite": "^10.3.6",
+    "@types/node": "^24.12.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/browser-playwright": "^4.1.5",
+    "@vitest/coverage-v8": "^4.1.5",
+    "eslint": "^10.2.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "eslint-plugin-storybook": "^10.3.6",
+    "globals": "^17.5.0",
+    "playwright": "^1.59.1",
+    "storybook": "^10.3.6",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.58.2",
+    "vite": "^8.0.10",
+    "vitest": "^4.1.5"
+  }
+}

package/src/styles/layout.css

@@ -0,0 +1,69 @@
+/* =========================================================================
+   Hanwha Life Design System — Shared Page Layout Utilities
+   모든 제품에서 공통으로 사용하는 페이지 레이아웃 클래스
+   ========================================================================= */
+
+/* ---- Page Shell ---- */
+.page-shell {
+  min-height: 100vh;
+  background: var(--bg-neutral, #F5F5F5);
+  padding-bottom: 80px;
+}
+
+/* ---- Top Bar ---- */
+.page-topbar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: var(--basic-white, #FFFFFF);
+  border-bottom: 1px solid var(--gray-200, #F0F0F0);
+  padding: 16px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.page-topbar h1 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--basic-black, #272B2F);
+}
+
+/* ---- Content Area ---- */
+.page-content {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+/* ---- Section Title ---- */
+.page-section-title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--basic-black, #272B2F);
+  margin: 0 0 12px 0;
+}
+
+/* ---- Divider ---- */
+.page-divider {
+  border: none;
+  border-top: 1px solid var(--gray-200, #F0F0F0);
+  margin: 0;
+}
+
+/* ---- Skeleton Loading ---- */
+.skeleton {
+  background: var(--gray-200, #F0F0F0);
+  border-radius: 8px;
+  animation: ds-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes ds-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}