@edu-tosel/design 1.0.0 → 1.0.2

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/Board.js

@@ -1,12 +1,14 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useWidgetStore } from "../store";
 export function Board({ children, widget, options }) {
+    const { events } = useWidgetStore();
     const { height } = options ?? {};
-    const { events, widgets } = widget ?? {};
+    const { widgets } = widget ?? {};
     const classNames = [
         `min-h-screen xl:min-h-0 xl:h-186 `,
         "xl:rounded-xl bg-white/80 relative w-full ",
     ].join(" ");
-    return (_jsxs("div", { className: classNames + "", children: [children, _jsx(_Fragment, { children: widgets?.map(([widgetEvent, Component]) => {
-                    return events?.some(({ event }) => event === widgetEvent) ? (_jsx(_Fragment, { children: Component })) : null;
-                }) })] }));
+    return (_jsxs("div", { className: classNames + "", children: [children, widgets?.map(([widgetEvent, Component]) => {
+                return events?.some(({ event }) => event === widgetEvent) ? (_jsx(_Fragment, { children: Component })) : null;
+            })] }));
 }

package/board/CanvasBoard.js

@@ -3,7 +3,7 @@ import { cn } from "../util";
 import { Board } from "./Board";
 export function CanvasBoard({ children, widget, options }) {
     const { height } = options ?? {};
-    const layouts = "flex flex-wrap gap-12 ";
+    const layouts = "flex flex-col lg:flex-row lg:flex-wrap gap-7.5 ";
     const sizes = "h-full ";
     const paddings = "pb-36 xl:pb-12 px-2 xs:px-4 xl:pl-8 xl:pr-2 pt-2 xs:pt-4 xl:pt-8";
     const styles = "xl:overflow-y-scroll ";

package/card/Card.js

@@ -2,11 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import "../globals.css";
 import { cn } from "../util";
 const widthSize = {
-    xs: "",
-    sm: "md:w-60",
-    md: "md:w-90",
-    lg: "md:w-135",
-    xl: "md:w-225",
+    xs: "md:w-60",
+    sm: "md:w-90",
+    md: "md:w-112.5",
+    lg: "md:w-127.5",
+    xl: "lg:w-187.5",
+    "2xl": "lg:w-247.5",
 };
 const heightSize = {
     xs: "",
@@ -14,6 +15,7 @@ const heightSize = {
     md: "h-72 sm:h-48",
     lg: "h-80",
     xl: "h-125",
+    "2xl": "",
 };
 export function Card({ children, options }) {
     const { height, width, text, onClick } = options ?? {};

package/card/TrumpCard.js

@@ -15,5 +15,5 @@ export function TrumpCard({ titles, options }) {
             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, 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] }));
+    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/deck/Deck.js

@@ -7,7 +7,7 @@ export function Deck({ children, titles, options, }) {
     ].join(" ");
     const bodyClassNames = [
         `flex flex-col sm:flex-row sm:w-full `,
-        `gap-x-${gapX ?? 5} gap-y-${gapY ?? 5}`,
+        `gap-x-${gapX ?? 7.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 })] }));

package/globals.css

@@ -4,22 +4,22 @@
 
 @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 {

package/interface/Board.d.ts

@@ -1,9 +1,7 @@
 /// <reference types="react" />
-import { WidgetEvent } from "./Widget";
 export interface BoardProps {
     children: React.ReactNode;
     widget?: {
-        events: WidgetEvent[];
         widgets: [[string, React.ReactNode]];
     };
     options?: {

package/interface/Modal.d.ts

@@ -5,7 +5,7 @@ export interface ModalProps {
     options?: {
         width?: Size;
         height?: Size;
-        padding?: Record<string, number>;
+        padding?: boolean;
         buttons?: Button[];
     };
 }

package/interface/Property.d.ts

@@ -9,7 +9,7 @@
  * @property {"lg"} lg - Large size
  * @property {"xl"} xl - Extra large size
  */
-export type Size = "xs" | "sm" | "md" | "lg" | "xl";
+export type Size = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 /**
  * Image size type
  * @enum {string}

package/layout/dashboard/index.js

@@ -6,5 +6,5 @@ import { cn } from "../../util";
 export function DashboardLayout({ subject, colors, navigations, children, }) {
     const [title, image, imageUrl] = subject ?? ["", "", ""];
     const [bgColor, textColor] = colors ?? ["white", "black"];
-    return (_jsxs("div", { className: cn(`bg-${bgColor}`, `text-${textColor}`, `min-h-screen font-pretendard-medium`), children: [_jsx(Header, { title: title, image: [image, imageUrl] }), _jsxs("div", { className: "flex gap-12  xl:px-9 xl:pt-12 mt-20 xl:m-0", children: [_jsx(NavigationContainer, { children: navigations.map((nav, index) => (_jsx(Fragment, { children: nav }, index))) }), children] })] }));
+    return (_jsxs("div", { className: cn(`bg-${bgColor}`, `text-${textColor}`, `min-h-screen font-pretendard-medium`), children: [_jsx(Header, { title: title, image: [image, imageUrl] }), _jsxs("div", { className: "flex gap-12 xl:gap-8 xl:pl-2 2xl:px-9 xl:pt-12 mt-20 xl:m-0", children: [_jsx(NavigationContainer, { children: navigations.map((nav, index) => (_jsx(Fragment, { children: nav }, index))) }), children] })] }));
 }

package/modal/ControllerModal.d.ts

@@ -0,0 +1,6 @@
+import { Button } from "../interface";
+export default function ControllerModal({ options, }: {
+    options?: {
+        buttons?: Button[];
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/modal/ControllerModal.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal } from "./Modal";
+export default function ControllerModal({ options, }) {
+    const { buttons } = options ?? {};
+    return (_jsx(Modal, { options: { width: "lg", height: "xl", buttons }, children: _jsx("div", { className: "w-full h-120 border-2 " }) }));
+}

package/modal/Modal.js

@@ -8,6 +8,7 @@ const widthSize = {
     md: "w-2/3 min-w-76 max-w-176",
     lg: "w-full min-w-76 max-w-360",
     xl: "w-2/3 min-w-76 max-w-176",
+    "2xl": "w-2/3 min-w-76 max-w-176",
 };
 const heightSize = {
     xs: "",
@@ -15,12 +16,14 @@ const heightSize = {
     md: "h-72 sm:h-48",
     lg: "h-120",
     xl: "h-180",
+    "2xl": "w-2/3 min-w-76 max-w-176",
 };
 export function Modal({ children, options }) {
     const { buttons, width, height } = options ?? {};
     const { clearModal } = useWidgetStore();
     const sizes = `${heightSize[height ?? "sm"]} ${widthSize[width ?? "md"]}`;
-    const styles = "rounded-xl bg-white relative";
-    return (_jsx("div", { className: background, children: _jsxs("div", { className: cn(sizes, styles), children: [children, _jsx(_Fragment, { children: buttons ? (_jsx("div", { className: `${absolute.br(5, 7)} flex justify-end gap-4`, children: buttons.map(([text, onClick]) => (_jsx("button", { className: "rounded-2xl bg-black px-8 py-2 text-lg font-bold text-white", onClick: onClick, children: text }, text))) })) : null }), _jsx("button", { className: absolute.tl(5, 7) +
+    const paddings = "pt-18 px-25";
+    const styles = "rounded-xl bg-white relative overflow-hidden";
+    return (_jsx("div", { className: background, children: _jsxs("div", { className: cn(sizes, styles, paddings), children: [children, _jsx(_Fragment, { children: buttons ? (_jsx("div", { className: `${absolute.br(8, 10)} flex justify-end gap-4`, children: buttons.map(([text, onClick]) => (_jsx("button", { className: "rounded-2xl bg-black px-8 py-2 text-2xl font-bold text-white", onClick: onClick, children: text }, text))) })) : null }), _jsx("button", { className: absolute.tl(5, 7) +
                         "bg-black rounded-full h-9 w-9 flex justify-center items-center", onClick: clearModal, children: _jsx("div", { className: "x-shape" }) })] }) }));
 }

package/modal/TestModal.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
-export default function TestModal({ children }: {
+import { Button } from "../interface";
+export default function TestModal({ children, options, }: {
     children: React.ReactNode;
+    options?: {
+        buttons?: Button[];
+    };
 }): import("react/jsx-runtime").JSX.Element;

package/modal/TestModal.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Modal } from "./Modal";
-export default function TestModal({ children }) {
-    return (_jsx(Modal, { options: { width: "lg", height: "xl", buttons: [["gd", () => { }]] }, children: _jsx("div", { className: "pt-18 pl-25", children: children }) }));
+export default function TestModal({ children, options, }) {
+    const { buttons } = options ?? {};
+    return (_jsx(Modal, { options: { width: "lg", height: "xl", buttons }, children: _jsx("div", { className: "pt-18 pl-25", children: children }) }));
 }

package/modal/index.d.ts

@@ -1,2 +1,3 @@
 export { default as TestModal } from "./TestModal";
 export { default as AlertModal } from "./AlertModal";
+export { default as ControllerModal } from "./ControllerModal";

package/modal/index.js

@@ -1,2 +1,3 @@
 export { default as TestModal } from "./TestModal";
 export { default as AlertModal } from "./AlertModal";
+export { default as ControllerModal } from "./ControllerModal";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",
@@ -14,11 +14,13 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-lottie-player": "^1.5.6",
     "react-router-dom": "^6.21.3",
     "recharts": "^2.11.0",
     "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "zustand": "^4.5.0"
   },
   "devDependencies": {}
 }

package/shelf/Shelf.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export function Shelf({ children }) {
-    return (_jsx("div", { className: "inline-flex flex-col gap-12 w-full xl:w-auto", children: children }));
+    return (_jsx("div", { className: "inline-flex flex-col gap-12 xl:w-auto", children: children }));
 }

package/tailwind.config.ts

@@ -115,6 +115,7 @@ export default {
         "sun-calc": "calc(50% - 6rem)",
         1: "0.25rem",
         7: "1.75rem",
+        7.5: "1.875rem",
         11: "2.75rem",
         12: "3rem",
         15: "3.75rem",
@@ -160,11 +161,13 @@ export default {
         108: "27rem",
         110: "27.5rem",
         112: "28rem",
+        112.5: "28.125rem",
         116: "29rem",
         120: "30rem",
         122: "30.5rem",
         124: "31rem",
         126: "31.5rem",
+        127.5: "31.875rem",
         128: "32rem",
         132: "33rem",
         135: "33.75rem",
@@ -180,6 +183,7 @@ export default {
         180: "45rem",
         182: "45.5rem",
         186: "46.5rem",
+        187.5: "46.875rem",
         190: "47.5rem",
         200: "50rem",
         216: "54rem",
@@ -189,6 +193,7 @@ export default {
         228: "57rem",
         232: "58rem",
         240: "60rem",
+        247.5: "61.875rem",
         248: "62rem",
         255: "63.75rem",
         256: "64rem",
@@ -269,6 +274,21 @@ export default {
         30: ".3",
         40: ".4",
       },
+      fontSize: {
+        xs: "0.75rem",
+        sm: "0.875rem",
+        base: "1rem",
+        lg: "1.125rem",
+        xl: "1.25rem",
+        "2xl": "1.5rem",
+        "3xl": "1.875rem",
+        "4xl": "2.25rem",
+        "5xl": "3rem",
+        "6xl": "3.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6rem",
+        "9xl": "8rem",
+      },
       screens: {
         xxxs: "332px",
         xxs: "393px",

package/version.txt

@@ -1 +1 @@
-1.0.0
+1.0.2