@edu-tosel/design 1.0.1 → 1.0.3

package/README.md

@@ -1,33 +1,47 @@
 # TOSEL Design Library
+
 TOSEL 통합 디자인 시스템에 맞춘 UI 라이브러리
 
-## Tech Stack
-- tailwindcss 3.4.1
-- React 18
-- Vite 5
-
-## Getting Start
-```bash
-# 설치
-npm install @edu-tosel/ui@latest
-
-# 개발환경
-npm install # 의존성 설치
-npm run dev # 개발자 환경에서 실행
-npm run test # jest 실행
-npm run build # 빌드
-npm run publish # npm 배포
-```
-
-## Folder Structure
-### asset
-tailwindcss를 조합한 커스텀 클래스 보관
-
-### board
-### card
-### deck
-### header
-### modal
-### navigation
-### text
-문자열 조작 컴포넌트 보관
+## Component
+
+컴포넌트들은 기본적으로 기능 단위로만 구성한다.
+
+도메인은 구분하지 않는다. 단, Layout 컴포넌트에 대해서만 예외적으로 허용한다.
+
+### Board
+
+Board 컴포넌트는 가장 큰 단위의 컨테이너이다.
+
+일반적으로
+
+### Card
+
+Card 컴포넌트는 여러가지 요소를 담고 있는 컨테이너이다.
+
+일반적으로 가장 최소 단위의 컴포넌트로 사용되며, 다양한 요소를 담을 수 있다.
+
+### Deck
+
+Deck 컴포넌트는 여러가지 Card 컴포넌트를 담고 있는 컨테이너이다.
+
+Deck 컴포넌트는 담고있는 Card 컴포넌트들을 수평 정렬한다.
+
+### Layout
+
+Layout 컴포넌트는 여러가지 컴포넌트를 담고 있는 컨테이너이다.
+
+Layout 컴포넌트는 특정 프로젝트에서 반복적으로 사용되는 컴포넌트의 구조를 형성한다.
+
+### Navigation
+
+Navigation 컴포넌트는 여러가지 링크를 담고 있는 컨테이너이다.
+
+각각의 링크 컴포넌트의 스타일링은 buttonClassNames로 전달받는다.
+
+(Next.js의 Link Component와 React의 Link Component는 호환이 되지 않기 때문.)
+
+### Shelf
+
+Shelf 컴포넌트는 Board 컴포넌트 내부에 위치하며 여러가지 Deck 컴포넌트를 담고 있는 컨테이너이다.
+
+Shelf 컴포넌트는 담고있는 Deck 컴포넌트들을 수직 정렬한다.

package/asset/json/credit-lottie.json

@@ -0,0 +1 @@
+{"v":"5.9.0","fr":30,"ip":0,"op":60,"w":1920,"h":1080,"nm":"creditcard","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":3,"nm":"checkmaster_position","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[762,406,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0,0,0.833],"y":[1,1,-15.667]},"o":{"x":[0.62,0.62,0.167],"y":[0,0,16.667]},"t":34,"s":[0,0,100]},{"t":42,"s":[100,100,100]}],"ix":6,"l":2}},"ao":0,"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"checksvg 윤곽선","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-2.47,-0.784,0],"ix":2,"l":2},"a":{"a":0,"k":[22.287,23.657,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.163,0],[0.775,0.96],[0,0],[-1.743,1.408],[-1.409,-1.743],[0,0],[0,0],[-2.028,-0.952],[0.951,-2.029],[0,0],[1.389,-0.168]],"o":[[-1.217,0],[0,0],[-1.408,-1.743],[1.743,-1.408],[0,0],[0,0],[0.949,-2.03],[2.03,0.949],[0,0],[-0.592,1.267],[-0.163,0.02]],"v":[[-0.436,23.407],[-3.592,21.899],[-20.63,0.805],[-20.023,-4.9],[-14.318,-4.293],[-1.359,11.752],[13.739,-20.501],[19.132,-22.455],[21.086,-17.062],[3.237,21.07],[0.052,23.377]],"c":true},"ix":2},"nm":"패스 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"칠 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[22.287,23.657],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"변형"}],"nm":"그룹 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"check_bg 윤곽선","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-2,-3,0],"ix":2,"l":2},"a":{"a":0,"k":[48.25,48.25,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-26.51],[26.51,0],[0,26.51],[-26.51,0]],"o":[[0,26.51],[-26.51,0],[0,-26.51],[26.51,0]],"v":[[48,0],[0,48],[-48,0],[0,-48]],"c":true},"ix":2},"nm":"패스 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.462745127958,0,0.137254901961,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"칠 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[48.25,48.25],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"변형"}],"nm":"그룹 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":3,"nm":"card master position","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[960,540,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0,0,0.833],"y":[1,1,-0.667]},"o":{"x":[0.46,0.46,0.167],"y":[0,0,1.667]},"t":21,"s":[90,90,100]},{"i":{"x":[0.607,0.607,0.833],"y":[1,1,1.682]},"o":{"x":[0.475,0.475,0.167],"y":[-0.027,-0.027,-0.682]},"t":29,"s":[100,100,100]},{"t":38,"s":[95,95,100]}],"ix":6,"l":2}},"ao":0,"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"credit_logo 윤곽선","parent":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.284],"y":[1]},"o":{"x":[0.568],"y":[0]},"t":25,"s":[0]},{"t":33,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-129,-38.5,0],"ix":2,"l":2},"a":{"a":0,"k":[45.75,25.75,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[14.025,0],[0,0],[0,14.025],[-14.025,0],[0,0],[0,-14.025]],"o":[[0,0],[-14.025,0],[0,-14.025],[0,0],[14.025,0],[0,14.025]],"v":[[20,25.5],[-20,25.5],[-45.5,0],[-20,-25.5],[20,-25.5],[45.5,0]],"c":true},"ix":2},"nm":"패스 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.811764765721,0.866666726505,0.862745157878,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"칠 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[45.75,25.75],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"변형"}],"nm":"그룹 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"credit_text 윤곽선","parent":4,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[195,-79.5,0],"ix":2,"l":2},"a":{"a":0,"k":[180.75,22.75,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.329,0.167,0.167],"y":[0,0,0]},"t":24,"s":[0,100,100]},{"t":30,"s":[100,100,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[54.5,6.5],[-54.5,6.5],[-54.5,-6.5],[54.5,-6.5]],"c":true},"ix":2},"nm":"패스 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.458823559331,0.61568627451,0.607843137255,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"칠 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[124.75,38.75],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"변형"}],"nm":"그룹 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[89.5,6.5],[-89.5,6.5],[-89.5,-6.5],[89.5,-6.5]],"c":true},"ix":2},"nm":"패스 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.458823559331,0.61568627451,0.607843137255,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"칠 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[89.75,6.75],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"변형"}],"nm":"그룹 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"credit_magnet 윤곽선","parent":4,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[225.75,75,0],"ix":2,"l":2},"a":{"a":0,"k":[451.75,31.25,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.097,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.488,0.167,0.167],"y":[0,0,0]},"t":12,"s":[0,100,100]},{"t":21.0283203125,"s":[100,100,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[225.5,31],[-225.5,31],[-225.5,-31],[225.5,-31]],"c":true},"ix":2},"nm":"패스 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.054901964524,0.337254901961,0.321568627451,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"칠 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[225.75,31.25],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"변형"}],"nm":"그룹 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"credit_BG 2 윤곽선","parent":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":15,"s":[0]},{"t":25,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[0,4,0],"ix":2,"l":2},"a":{"a":0,"k":[225.75,148.25,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[12.592,0],[0,0],[0,12.592],[0,0],[-12.593,0],[0,0],[0,-12.592],[0,0]],"o":[[0,0],[-12.593,0],[0,0],[0,-12.592],[0,0],[12.592,0],[0,0],[0,12.592]],"v":[[202.7,148],[-202.699,148],[-225.5,125.2],[-225.5,-125.2],[-202.699,-148],[202.7,-148],[225.5,-125.2],[225.5,125.2]],"c":true},"ix":2},"nm":"패스 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.623529411765,0.733333333333,0.729411764706,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"칠 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[225.75,148.25],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"변형"}],"nm":"그룹 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60,"st":0,"bm":0}],"markers":[]}

package/asset/json/loading-lottie.json

@@ -0,0 +1 @@
+{"v":"5.9.0","fr":30,"ip":0,"op":60,"w":1920,"h":1080,"nm":"컴포지션 1","ddd":0,"assets":[{"id":"comp_0","nm":"wrap","fr":30,"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"모양 레이어 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.404,"y":1},"o":{"x":0.948,"y":0},"t":0,"s":[1122.296,595.538,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":12,"s":[1052,662,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":20,"s":[1052,662,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":23,"s":[1052,642,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.093,"y":0.093},"o":{"x":0.167,"y":0.167},"t":26,"s":[1052,662,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.367,"y":1},"o":{"x":0.897,"y":0},"t":44,"s":[1052,662,0],"to":[0,0,0],"ti":[0,0,0]},{"t":56,"s":[1122.296,595.538,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[254.616,190],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":30,"ix":4},"nm":"사각형 패스 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.643137254902,0.78431372549,0.956862745098,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"칠 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-165.331,-80.583],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":50,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"변형"}],"nm":"사각형 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":900,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"모양 레이어 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.497,"y":1},"o":{"x":0.937,"y":0},"t":0,"s":[1122.3,595.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.098,"y":0.098},"t":12,"s":[1087.148,628.769,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":23,"s":[1087.148,628.769,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":26,"s":[1087.148,608.769,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.031,"y":0.856},"o":{"x":0.167,"y":0.167},"t":29,"s":[1087.148,628.769,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.367,"y":1},"o":{"x":0.897,"y":0},"t":44,"s":[1087.148,628.769,0],"to":[0,0,0],"ti":[0,0,0]},{"t":56,"s":[1122.296,595.538,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[254.616,190],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":30,"ix":4},"nm":"사각형 패스 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.643137254902,0.78431372549,0.956862745098,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"칠 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-165.331,-80.583],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":50,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"변형"}],"nm":"사각형 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":900,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"모양 레이어 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":12,"s":[1122.296,595.538,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":26,"s":[1122.296,595.538,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":29,"s":[1122.296,575.538,0],"to":[0,0,0],"ti":[0,0,0]},{"t":32,"s":[1122.296,595.538,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[254.616,190],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":30,"ix":4},"nm":"사각형 패스 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.643137254902,0.78431372549,0.956862745098,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"칠 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-165.331,-80.583],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":50,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"변형"}],"nm":"사각형 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":900,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"모양 레이어 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.527,"y":1},"o":{"x":0.948,"y":0},"t":0,"s":[1122.296,595.538,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":12,"s":[1157.444,562.308,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":29,"s":[1157.444,562.308,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":32,"s":[1157.444,542.308,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":0},"o":{"x":0.167,"y":0.167},"t":35,"s":[1157.444,562.308,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.367,"y":1},"o":{"x":0.897,"y":0},"t":44,"s":[1157.444,562.308,0],"to":[0,0,0],"ti":[0,0,0]},{"t":56,"s":[1122.296,595.538,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[254.616,190],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":30,"ix":4},"nm":"사각형 패스 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.643137254902,0.78431372549,0.956862745098,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"칠 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-165.331,-80.583],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":50,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"변형"}],"nm":"사각형 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":900,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"모양 레이어 5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.404,"y":1},"o":{"x":0.948,"y":0},"t":0,"s":[1122.296,595.538,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":12,"s":[1192.592,529.077,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":32,"s":[1192.592,529.077,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":35,"s":[1192.592,509.077,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":0},"o":{"x":0.167,"y":0.167},"t":38,"s":[1192.592,529.077,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.367,"y":1},"o":{"x":0.897,"y":0},"t":44,"s":[1192.592,529.077,0],"to":[0,0,0],"ti":[0,0,0]},{"t":56,"s":[1122.296,595.538,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[254.616,190],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":30,"ix":4},"nm":"사각형 패스 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.643137254902,0.78431372549,0.956862745098,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"칠 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-165.331,-80.583],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":50,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"변형"}],"nm":"사각형 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":900,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"wrap","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[960,540,0],"ix":2,"l":2},"a":{"a":0,"k":[960,540,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":1920,"h":1080,"ip":0,"op":900,"st":0,"bm":0}],"markers":[]}

package/asset/json/test.svg

@@ -0,0 +1 @@
+<svg width="21" height="21" class="as-svgicon as-svgicon-close as-svgicon-tiny as-svgicon-closetiny" role="img" aria-hidden="true"><path fill="none" d="M0 0h21v21H0z"></path><path d="m12.12 10 4.07-4.06a1.5 1.5 0 1 0-2.11-2.12L10 7.88 5.94 3.81a1.5 1.5 0 1 0-2.12 2.12L7.88 10l-4.07 4.06a1.5 1.5 0 0 0 0 2.12 1.51 1.51 0 0 0 2.13 0L10 12.12l4.06 4.07a1.45 1.45 0 0 0 1.06.44 1.5 1.5 0 0 0 1.06-2.56Z"></path></svg>

package/board/index.d.ts

@@ -1,3 +1,3 @@
 import "../globals.css";
-export * from "./CanvasBoard";
-export * from "./ListBoard";
+export { default as CanvasBoard } from "./template/CanvasBoard";
+export { default as ManageBoard } from "./template/ManageBoard";

package/board/index.js

@@ -1,3 +1,3 @@
 import "../globals.css";
-export * from "./CanvasBoard";
-export * from "./ListBoard";
+export { default as CanvasBoard } from "./template/CanvasBoard";
+export { default as ManageBoard } from "./template/ManageBoard";

package/board/template/CanvasBoard.d.ts

@@ -0,0 +1,2 @@
+import { BoardProps } from "../../interface/Board";
+export default function CanvasBoard({ children, options }: BoardProps): import("react/jsx-runtime").JSX.Element;

package/board/template/CanvasBoard.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../util";
+import { Board } from "../widget/Board";
+export default function CanvasBoard({ children, options }) {
+    const layouts = "flex flex-col lg:flex-row lg:flex-wrap gap-7.5 ";
+    const sizes = "h-full ";
+    const paddings = "pb-36 xl:pb-0 px-2 xs:px-4 xl:pl-8 xl:pr-2 pt-2 xs:pt-4 xl:pt-8";
+    const styles = "overflow-y-scroll ";
+    return (_jsx(Board, { options: options, children: _jsx("div", { className: cn(layouts, sizes, paddings, styles), children: children }) }));
+}

package/board/template/ManageBoard.d.ts

@@ -0,0 +1,4 @@
+import { ManageBoardProps } from "../../interface/Board";
+type Item = Record<string, any>;
+export default function ManageBoard<T extends Item>({ header, data, subWidget, options, }: ManageBoardProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/board/template/ManageBoard.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Deck } from "../../deck";
+import { SideMenu } from "../../menu";
+import { cn } from "../../util";
+import { Board } from "../widget/Board";
+import BoardHeader from "../widget/Header";
+import BoardDataField from "../widget/DataField";
+import { useWidgetStore } from "../../store";
+export default function ManageBoard({ header, data, subWidget, options, }) {
+    const { order: [orderBy, orderHow], } = useWidgetStore();
+    const { dataSets, dataField, gap } = data;
+    const positions = `flex flex-col gap-${gap ?? 0}`;
+    const sizes = `h-full ${dataField ? "xl:h-135" : "xl:h-158"}`;
+    const paddings = "pb-60 xl:pb-0 px-2 xs:px-4 xl:pl-8";
+    const styles = "overflow-y-scroll";
+    return (_jsxs(Board, { options: options, children: [_jsx(BoardHeader, { ...header }), dataField && _jsx(BoardDataField, { dataField: dataField }), _jsx("div", { className: cn(positions, sizes, paddings, styles), children: dataSets.map(({ title: deckTitle, items, renderItem }) => deckTitle ? (_jsx("div", { className: "pt-4", children: _jsx(Deck, { titles: { title: deckTitle ?? "" }, children: items.map((item) => renderItem(item)) }) }, deckTitle)) : (items
+                    .slice()
+                    .sort((a, b) => {
+                    if (orderBy) {
+                        if (orderHow === "asc")
+                            return a[orderBy] > b[orderBy] ? 1 : -1;
+                        return a[orderBy] < b[orderBy] ? 1 : -1;
+                    }
+                    return 0;
+                })
+                    .map((item) => renderItem(item)))) }), subWidget && _jsx(SideMenu, {})] }));
+}

package/board/widget/Board.d.ts

@@ -0,0 +1,2 @@
+import { BoardProps } from "../../interface/Board";
+export declare function Board({ children, options }: BoardProps): import("react/jsx-runtime").JSX.Element;

package/board/widget/Board.js

@@ -0,0 +1,29 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useWidgetStore } from "../../store";
+import { cn } from "../../util";
+import { useState } from "react";
+export function Board({ children, options }) {
+    const { events } = useWidgetStore();
+    const { widgets, tabs } = options ?? {};
+    const classNames = [
+        `h-full xl:min-h-0 `,
+        "xl:rounded-xl bg-white relative w-full z-10 overflow-hidden",
+    ].join(" ");
+    return (_jsxs("div", { className: "h-full xl:min-h-0 xl:h-178 w-full relative ", children: [_jsxs("div", { className: classNames, children: [children, widgets?.map(([widgetEvent, Component]) => {
+                        return events?.some(({ event }) => event === widgetEvent) ? (_jsx(_Fragment, { children: Component })) : null;
+                    })] }), tabs && _jsx(BottomTab, { tabs: tabs })] }));
+}
+function BottomTab({ tabs }) {
+    const [tabsSelection, setTabsSelection] = useState(tabs.map((_, i) => i === 0));
+    const positions = "xl:absolute xl:-bottom-14 xl:left-0 z-5";
+    const displays = "hidden xl:flex xl:items-end xl:gap-4";
+    const sizes = "xl:h-16";
+    const paddings = "xl:px-8 xl:pb-2 ";
+    const styles = "bg-white/50 rounded-b-xl ";
+    return (_jsx("div", { className: cn(displays, positions, sizes, paddings, styles), children: tabs.map(([title, onClick], index) => (_jsx("button", { onClick: () => {
+                setTabsSelection(tabsSelection.map((_, i) => i === index));
+                return onClick();
+            }, className: `h-9 w-32 rounded-md ${tabsSelection[index]
+                ? "border-4 border-blue-500"
+                : "border-4 border-red-500"}`, children: title }, title))) }));
+}

package/board/widget/DataField.d.ts

@@ -0,0 +1,6 @@
+export default function BoardDataField({ dataField, }: {
+    dataField: {
+        fields: Record<string, string>;
+        sizes: Record<string, string>;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/board/widget/DataField.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../../util";
+import { useWidgetStore } from "./../../store";
+export default function BoardDataField({ dataField, }) {
+    const { order: [orderBy, orderHow], setOrder, } = useWidgetStore();
+    const { fields, sizes } = dataField;
+    const container = {
+        positions: "fixed top-40 left-0  xl:static",
+        displays: "flex items-center",
+        styles: `bg-gray-200`,
+        sizes: "w-full h-23",
+    };
+    const dataFieldContainer = {
+        displays: "flex items-center",
+        sizes: "w-full h-12",
+        paddings: "px-2 xs:px-4 xl:pl-8 xl:pr-2 ",
+        styles: "bg-white-off",
+    };
+    const block = {
+        displays: "xl:hidden block ",
+        sizes: container.sizes,
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(container.positions, container.displays, container.sizes, container.styles), children: _jsx("div", { className: cn(dataFieldContainer.displays, dataFieldContainer.sizes, dataFieldContainer.paddings, dataFieldContainer.styles), children: Object.entries(fields).map(([key, value]) => (_jsx("div", { className: `w-${`${sizes[key]}/100`} ?? "auto"}`, children: _jsxs("button", { onClick: () => setOrder(key), className: "flex items-center gap-1", children: [_jsx("div", { children: value }), _jsx("div", { className: "text-xs", children: orderBy === key ? (orderHow === "asc" ? "▼" : "▲") : "" })] }) }, key))) }) }), _jsx("div", { className: cn(block.sizes, block.displays) })] }));
+}

package/board/widget/Header.d.ts

@@ -0,0 +1,2 @@
+import { BoardHeaderProps } from "./../../interface/Board";
+export default function BoardHeader({ title, tags, options, }: BoardHeaderProps): import("react/jsx-runtime").JSX.Element;

package/board/widget/Header.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../../util";
+import { Input, Select } from "./Tags";
+export default function BoardHeader({ title, tags, options, }) {
+    const { selects, inputs } = tags ?? {};
+    const { colors } = options ?? {};
+    const { bgColor, textColor } = colors ?? {
+        bgColor: "gray-200",
+        textColor: "black",
+    };
+    const container = {
+        positions: "fixed top-20 left-0 xl:static flex items-center",
+        paddings: "px-12",
+        styles: `bg-${bgColor} text-${textColor} pl-12 pr-9`,
+        sizes: "w-full h-20",
+    };
+    const block = {
+        displays: "xl:hidden block ",
+        sizes: container.sizes,
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container.positions, container.paddings, container.sizes, container.styles), children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsxs("div", { className: "flex items-center ml-auto gap-4", children: [selects?.map(({ width, title, options, onChange }) => (_jsx(Select, { width: width, title: title, selectOptions: options, onChange: onChange }, title))), inputs?.map(({ width, title, placeholder, onChange }) => (_jsx(Input, { width: width, title: title, placeholder: placeholder, onChange: onChange }, title + placeholder)))] })] }), _jsx("div", { className: cn(block.sizes, block.displays) })] }));
+}

package/board/widget/Tags.d.ts

@@ -0,0 +1,3 @@
+import { HTMLInputElement, HTMLSelectElement } from "../../interface/HTMLElement";
+export declare function Select({ title, width, onChange, selectOptions, }: HTMLSelectElement): import("react/jsx-runtime").JSX.Element;
+export declare function Input({ title, onChange, placeholder, width, }: HTMLInputElement): import("react/jsx-runtime").JSX.Element;

package/board/widget/Tags.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+export function Select({ title, width, onChange, selectOptions, }) {
+    const id = useId();
+    const widthSize = {
+        xs: "w-32",
+        sm: "w-48",
+        md: "w-64",
+        lg: "w-96",
+        xl: "w-128",
+        "2xl": "w-144",
+        full: "w-full",
+    };
+    const classNames = `${widthSize[width ?? "md"]} h-10 rounded-full pl-4`;
+    return (_jsxs("div", { className: "flex justify-center items-center gap-4", children: [_jsx("label", { htmlFor: id, className: "font-bold", children: title }), _jsx("select", { id: id, onChange: (e) => onChange(e.target.value), className: classNames, children: selectOptions?.map(([id, title]) => (_jsx("option", { value: id, children: title }, id))) })] }));
+}
+export function Input({ title, onChange, placeholder, width, }) {
+    const id = useId();
+    const widthSize = {
+        xs: "w-28",
+        sm: "w-48",
+        md: "w-64",
+        lg: "w-96",
+        xl: "w-128",
+        "2xl": "w-144",
+        full: "w-full",
+    };
+    const classNames = `${widthSize[width ?? "md"]} h-10 rounded-full pl-4`;
+    return (_jsxs("div", { className: "flex justify-center items-center gap-4", children: [_jsx("label", { htmlFor: id, className: "font-bold", children: title }), _jsx("input", { className: classNames, id: id, type: "text", placeholder: placeholder ?? "", onChange: (e) => onChange(e.target.value) })] }));
+}

package/card/index.d.ts

@@ -1,4 +1,5 @@
-export * from "./ProfileCard";
-export * from "./TrumpCard";
-export * from "./ChartCard";
-export * from "./TableCard";
+export * from "./template/ProfileCard";
+export * from "./template/TrumpCard";
+export * from "./template/ChartCard";
+export * from "./template/TableCard";
+export * from "./template/RowCard";

package/card/index.js

@@ -1,4 +1,5 @@
-export * from "./ProfileCard";
-export * from "./TrumpCard";
-export * from "./ChartCard";
-export * from "./TableCard";
+export * from "./template/ProfileCard";
+export * from "./template/TrumpCard";
+export * from "./template/ChartCard";
+export * from "./template/TableCard";
+export * from "./template/RowCard";

package/card/{ChartCard.d.ts → template/ChartCard.d.ts}

@@ -1,3 +1,2 @@
-import "../globals.css";
-import { ChartCardProps } from "../interface/Card";
+import { ChartCardProps } from "../../interface/Card";
 export declare function ChartCard({ data, xAxis, yAxis, lines, bars, areas, }: ChartCardProps): import("react/jsx-runtime").JSX.Element;

package/card/{ChartCard.js → template/ChartCard.js}

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "../globals.css";
 import { Area, Bar, ComposedChart, Line, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts";
-import { Card } from "./Card";
+import { Card } from "../widget/Card";
 export function ChartCard({ data, xAxis, yAxis, lines, bars, areas, }) {
     return (_jsx(Card, { options: { width: "xl", height: "lg", text: { size: "xs" } }, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(ComposedChart, { data: data, children: [_jsx(XAxis, { dataKey: xAxis }), _jsx(YAxis, { dataKey: yAxis }), _jsx(Tooltip, {}), lines?.map((line) => (_jsx(Line, { ...line }, line.dataKey))), bars?.map((bar) => (_jsx(Bar, { ...bar }, bar.dataKey))), areas?.map((area) => (_jsx(Area, { ...area }, area.dataKey)))] }) }) }));
 }

package/card/{ProfileCard.js → template/ProfileCard.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card } from "./Card";
-import { colorsByLevel } from "../util";
+import { Card } from "../widget/Card";
+import { colorsByLevel } from "../../util";
 export function ProfileCard({ info, gradeData, }) {
     const { name, birthday, image } = info;
     const { level, score, grade } = gradeData ?? {};

package/card/template/RowCard.d.ts

@@ -0,0 +1,5 @@
+export default function RowCard<T extends Record<string, any>>({ row, fields, sizes, }: {
+    row: T;
+    fields: Partial<Record<keyof T, "text" | ["select", [string, string][]]>>;
+    sizes: Partial<Record<keyof T, string>>;
+}): import("react/jsx-runtime").JSX.Element;

package/card/template/RowCard.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from "../widget/Card";
+import { useWidgetStore } from "../../store";
+import { useId, useState } from "react";
+export default function RowCard({ row, fields, sizes, }) {
+    const [rowState, setRowState] = useState(row);
+    const { setView, setTempData } = useWidgetStore();
+    const entries = Object.entries(fields).map(([key, type]) => [type, key, rowState[key]]);
+    return (_jsx(Card, { options: {
+            width: "full",
+            height: "xs",
+            boundary: "none",
+            rounded: "none",
+        }, children: _jsxs("div", { className: "flex items-center h-full", children: [entries.map(([type, key, value]) => (_jsx("div", { className: `w-${`${sizes[key]}/100`} ?? "auto"}`, children: Array.isArray(type) && type[0] === "select" ? (_jsx(Select, { type: type, entry: [key, value], row: rowState, setRow: setRowState }, key + type + value.toString())) : (_jsx("div", { className: "w-full truncate", children: value ?? "No Data" }, key + value.toString())) }, key))), _jsx("button", { onClick: () => {
+                        setTempData(row);
+                        setView("sideMenu");
+                    }, children: "click" })] }) }));
+}
+function Select({ type, entry, row, setRow, }) {
+    const id = useId();
+    const [key, value] = entry;
+    return (_jsx("select", { value: value, onChange: (e) => setRow({
+            ...row,
+            [key]: e.target.value,
+        }), children: type[1].map(([value, title]) => (_jsx("option", { value: value, children: title }, id + value))) }, id));
+}

package/card/{TableCard.d.ts → template/TableCard.d.ts}

@@ -1,3 +1,2 @@
-import "../globals.css";
-import { TableCardProps } from "../interface/Card";
+import { TableCardProps } from "../../interface/Card";
 export declare function TableCard({ data, fields, sizes, options }: TableCardProps): import("react/jsx-runtime").JSX.Element;

package/card/{TableCard.js → template/TableCard.js}

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "../globals.css";
-import { Card } from "./Card";
+import { Card } from "../widget/Card";
 export function TableCard({ data, fields, sizes, options }) {
     const { color } = options ?? {};
     const { background: bgColor, text: textColor } = color ?? {};

package/card/{TrumpCard.d.ts → template/TrumpCard.d.ts}

@@ -1,2 +1,2 @@
-import { TrumpCardProps } from "../interface/Card";
+import { TrumpCardProps } from "../../interface/Card";
 export declare function TrumpCard({ titles, options }: TrumpCardProps): import("react/jsx-runtime").JSX.Element;

package/card/template/TrumpCard.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LineBreaks } from "../../text";
+import { Card } from "../widget/Card";
+export function TrumpCard({ titles, options }) {
+    const { title, subTitle, color: titleColor } = titles;
+    const { onClick, width, image, subButton } = options ?? {};
+    const [buttonText, buttonBgColor, buttonAction] = subButton ?? [
+        null,
+        "red-crimson",
+        () => { },
+    ];
+    const { path, size } = image ?? { size: "sub" };
+    const imageClassNames = () => {
+        if (size === "full")
+            return "w-full h-full object-cover";
+        return "absolute bottom-0 right-0 w-full xs:w-auto max-w-120 z-0 max-h-44 object-contain";
+    };
+    return (_jsxs(Card, { options: { width: width ?? "xs", onClick: onClick }, children: [_jsxs("div", { className: `absolute top-8 left-8 w-48 flex flex-col gap-2 z-10 text-${titleColor}`, children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsx(LineBreaks, { gap: 0, texts: subTitle ?? [""] }), subButton ? (_jsx("button", { className: `text-white rounded-md bg-${buttonBgColor} w-45 h-11 flex justify-center items-center`, onClick: buttonAction, children: buttonText })) : null] }), path ? (_jsx("img", { src: path, alt: "trump-image", loading: "lazy", className: imageClassNames() })) : null] }));
+}

package/card/{Card.d.ts → widget/Card.d.ts}

@@ -1,3 +1,2 @@
-import "../globals.css";
-import { CardProps } from "../interface/Card";
+import { CardProps } from "../../interface/Card";
 export declare function Card({ children, options }: CardProps): import("react/jsx-runtime").JSX.Element;

package/card/widget/Card.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../util";
+const widthSize = {
+    xs: "w-full md:w-60",
+    sm: "w-full md:w-90",
+    md: "w-full md:w-112.5",
+    lg: "w-full md:w-127.5",
+    xl: "w-full lg:w-187.5",
+    "2xl": "w-full lg:w-247.5",
+    full: "w-full",
+};
+const heightSize = {
+    xs: "min-h-16",
+    sm: "h-72 sm:h-48",
+    md: "h-72 sm:h-48",
+    lg: "h-80",
+    xl: "h-125",
+    "2xl": "",
+};
+export function Card({ children, options }) {
+    const { boundary, rounded, height, width, text, onClick } = options ?? {};
+    const { size: textSize, color: textColor } = text ?? {};
+    const setBoundary = () => {
+        if (boundary === "shadow")
+            return "box-shadow";
+        if (boundary === "border")
+            return "border-2";
+        if (boundary === "none")
+            return "";
+        return "box-shadow";
+    };
+    const sizes = [
+        `${heightSize[height ?? "sm"]}`,
+        `${widthSize[width ?? "sm"]}`,
+    ].join(" ");
+    const positions = "relative";
+    const styles = [
+        `${onClick ? "cursor-pointer" : ""}`,
+        `text-${textSize ?? "base"}`,
+        setBoundary(),
+        `rounded-${rounded ?? "xl"}`,
+        `bg-white/80 duration-500  overflow-hidden`,
+    ].join(" ");
+    return (_jsx("div", { onClick: onClick, className: cn(sizes, positions, styles), children: children }));
+}

package/deck/Deck.d.ts

@@ -7,6 +7,7 @@ export declare function Deck<T extends string | number>({ children, titles, opti
         gapTitle?: number;
     };
     options?: {
+        overflowScroll?: boolean;
         width?: T;
         height?: number;
         gapX?: number;

package/deck/Deck.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../util";
 export function Deck({ children, titles, options, }) {
     const { title, subTitle, gapTitle } = titles ?? {};
-    const { height, gapX, gapY } = options ?? {};
-    const containerClassNames = [
-        `flex sm:w-full flex-col h-${height ?? "auto"} gap-${gapTitle ?? 4} `,
-    ].join(" ");
-    const bodyClassNames = [
-        `flex flex-col sm:flex-row sm:w-full `,
-        `gap-x-${gapX ?? 5} gap-y-${gapY ?? 5}`,
-        "duration-500",
-    ].join(" ");
-    return (_jsxs("div", { className: containerClassNames, children: [_jsxs("div", { className: "pl-1", children: [_jsx("div", { className: "text-xl xl:text-2xl font-bold", children: title }), _jsx("div", { className: "", children: subTitle })] }), _jsx("div", { className: bodyClassNames, children: children })] }));
+    const { height, gapX, gapY, overflowScroll } = options ?? {};
+    const container = {
+        positions: `flex flex-col gap-${gapTitle ?? 4}`,
+        sizes: `sm:w-full  h-${height ?? "auto"} `,
+    };
+    const body = {
+        positions: `flex flex-col sm:flex-row sm:w-full gap-x-${gapX ?? 7.5} gap-y-${gapY ?? 5}`,
+        styles: `${overflowScroll ? "overflow-x-scroll" : ""} duration-500`,
+    };
+    return (_jsxs("div", { className: cn(container.positions, container.sizes), children: [_jsxs("div", { className: "pl-1", children: [_jsx("div", { className: "text-xl xl:text-2xl font-bold", children: title }), _jsx("div", { className: "", children: subTitle })] }), _jsx("div", { className: cn(body.positions, body.styles), children: children })] }));
 }

package/globals.css

@@ -4,33 +4,33 @@
 
 @font-face {
   font-family: "Pretendard-Medium";
-  src: url("../src/asset/fonts/Pretendard-Medium.otf") format("opentype");
+  src: url("./asset/fonts/Pretendard-Medium.otf") format("opentype");
 }
 
 @font-face {
   font-family: "Kostar";
-  src: url("../src/asset/fonts/Kostar.ttf") format("truetype");
+  src: url("./asset/fonts/Kostar.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "NicoMoji";
-  src: url("../src/asset/fonts/NicoMoji.ttf") format("truetype");
+  src: url("./asset/fonts/NicoMoji.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "Megrim";
-  src: url("../src/asset/fonts/Megrim.ttf") format("trueType");
+  src: url("./asset/fonts/Megrim.ttf") format("trueType");
 }
 
 ::-webkit-scrollbar {
-  width: 8px;
+  width: 3px;
 }
 
 ::-webkit-scrollbar-track {
   background-color: transparent;
 }
 ::-webkit-scrollbar-thumb {
-  background-color: #173a8b;
+  background-color: #808080;
   opacity: 0.5;
   border-radius: 10px;
 }