@edu-tosel/design 0.1.2 → 0.1.3

package/README.md

@@ -1,32 +1,32 @@
-# TOSEL UI Library
-TOSEL 통합 디자인 시스템에 맞춘 UI 라이브러리
-
-## Tech Stack
-- tailwindcss 3.4.0
-- React 18
-
-## Getting Start
-```bash
-# 설치
-npm install @edu-tosel/ui@latest
-
-# 개발환경
-npm install # 의존성 설치
-npm start # React 환경에서 실행
-npm run test # jest 실행
-npm run build # 빌드
-npm run publish # npm 배포
-```
-
-## Folder Structure
-### asset
-tailwindcss를 조합한 커스텀 클래스 보관
-
-### board
-### card
-### deck
-### header
-### modal
-### navigation
-### text
+# TOSEL UI Library
+TOSEL 통합 디자인 시스템에 맞춘 UI 라이브러리
+
+## Tech Stack
+- tailwindcss 3.4.0
+- React 18
+
+## Getting Start
+```bash
+# 설치
+npm install @edu-tosel/ui@latest
+
+# 개발환경
+npm install # 의존성 설치
+npm start # React 환경에서 실행
+npm run test # jest 실행
+npm run build # 빌드
+npm run publish # npm 배포
+```
+
+## Folder Structure
+### asset
+tailwindcss를 조합한 커스텀 클래스 보관
+
+### board
+### card
+### deck
+### header
+### modal
+### navigation
+### text
 문자열 조작 컴포넌트 보관

package/asset/classNames.d.ts

@@ -0,0 +1,2 @@
+declare function classNames(...props: string[]): string;
+export { classNames as cn };

package/asset/classNames.js

@@ -0,0 +1,9 @@
+function classNames() {
+    var props = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        props[_i] = arguments[_i];
+    }
+    var array = props.map(function (prop) { return prop.split(" "); });
+    return array.flat().join(" ");
+}
+export { classNames as cn };

package/asset/colors.d.ts

@@ -5,3 +5,6 @@ export declare const colorsByLevel: {
     JR: string;
     HJ: string;
 };
+export declare const gradient: {
+    lab: string;
+};

package/asset/colors.js

@@ -5,3 +5,6 @@ export var colorsByLevel = {
     JR: "jr-blue",
     HJ: "hj-blue",
 };
+export var gradient = {
+    lab: "bg-gradient-to-br from-violet-light/20 to-blue-sky/40 ",
+};

package/asset/display.d.ts

@@ -9,6 +9,11 @@ export declare const center: {
     row: (gap?: number) => string;
     colO: (gap?: number) => string;
     rowO: (gap?: number) => string;
+    screen: {
+        default: string;
+        col: (gap?: number) => string;
+        row: (gap?: number) => string;
+    };
 };
 export declare const grid: {
     col: (col: number, gap?: number) => string;

package/asset/display.js

@@ -27,6 +27,17 @@ export var center = {
         if (gap === void 0) { gap = 0; }
         return "gap-".concat(gap, " flex flex-row justify-center items-center ");
     },
+    screen: {
+        default: "flex justify-center items-center min-h-screen w-full overflow-hidden min-h-screen relative ",
+        col: function (gap) {
+            if (gap === void 0) { gap = 0; }
+            return "gap-".concat(gap, " flex flex-col justify-center items-center min-h-screen w-full ");
+        },
+        row: function (gap) {
+            if (gap === void 0) { gap = 0; }
+            return "gap-".concat(gap, " flex flex-row justify-center items-center min-h-screen w-full ");
+        },
+    },
 };
 export var grid = {
     col: function (col, gap) {

package/asset/pattern.d.ts

@@ -0,0 +1,7 @@
+type Color = [string, string];
+export declare const buttonStyle: {
+    default: (colorSet: [Color, Color] | [Color], size?: {
+        width: number;
+    } | undefined) => string;
+};
+export {};

package/asset/pattern.js

@@ -0,0 +1,15 @@
+export var buttonStyle = {
+    default: function (colorSet, size) {
+        var colors = colorSet[0], hoverColors = colorSet[1];
+        var bgColor = colors[0], textColor = colors[1];
+        var _a = hoverColors || ["", ""], bgHoverColor = _a[0], textHoverColor = _a[1];
+        var width = (size || { width: 32 }).width;
+        var classNames = [
+            "w-".concat(width),
+            "bg-".concat(bgColor, " ").concat(bgHoverColor ? "hover:bg-".concat(bgHoverColor) : ""),
+            "text-".concat(textColor, " ").concat(textHoverColor ? "hover:text-".concat(textHoverColor) : ""),
+            "font-bold py-2 px-4 rounded",
+        ];
+        return classNames.join(" ");
+    },
+};

package/asset/position.d.ts

@@ -3,8 +3,12 @@ export declare const fixed: {
     br: (bottom: number | string, right: number | string) => string;
 };
 export declare const absolute: {
-    tl: (top?: number, left?: number) => string;
-    tr: (top?: number, right?: number) => string;
+    tl: (top?: number | string, left?: number | string) => string;
+    tr: (top?: number | string, right?: number | string) => string;
     br: (bottom?: number, right?: number) => string;
     bl: (bottom?: number, left?: number) => string;
+    full: {
+        tl: (top?: number | string, left?: number | string) => string;
+        bl: (bottom?: number | string, left?: number | string) => string;
+    };
 };

package/asset/position.js

@@ -6,14 +6,30 @@ export var fixed = {
 };
 export var absolute = {
     tl: function (top, left) {
-        if (top === void 0) { top = 0; }
-        if (left === void 0) { left = 0; }
-        return "absolute top-".concat(top, " left-").concat(left, " ");
+        var topClass = function () {
+            if (typeof top === "number" && top < 0)
+                return "-top-".concat(Math.abs(top));
+            return "top-".concat(top);
+        };
+        var leftClass = function () {
+            if (typeof left === "number" && left < 0)
+                return "-left-".concat(Math.abs(left));
+            return "left-".concat(left);
+        };
+        return "absolute ".concat(topClass(), " ").concat(leftClass(), " ");
     },
     tr: function (top, right) {
-        if (top === void 0) { top = 0; }
-        if (right === void 0) { right = 0; }
-        return "absolute top-".concat(top, " right-").concat(right, " ");
+        var topClass = function () {
+            if (typeof top === "number" && top < 0)
+                return "-top-".concat(Math.abs(top), " ");
+            return "top-".concat(top);
+        };
+        var rightClass = function () {
+            if (typeof right === "number" && right < 0)
+                return "-right-".concat(Math.abs(right), " ");
+            return "right-".concat(right);
+        };
+        return "absolute ".concat(topClass(), " ").concat(rightClass(), " ");
     },
     br: function (bottom, right) {
         if (bottom === void 0) { bottom = 0; }
@@ -25,4 +41,16 @@ export var absolute = {
         if (left === void 0) { left = 0; }
         return "absolute bottom-".concat(bottom, " left-").concat(left, " ");
     },
+    full: {
+        tl: function (top, left) {
+            if (!(typeof top === "number") || !(typeof left === "number"))
+                return "absolute top-".concat(top, " left-").concat(left, " w-full ");
+            var topClass = top >= 0 ? "top-".concat(top) : "-top-".concat(Math.abs(top));
+            var leftClass = left >= 0 ? "left-".concat(left) : "-left-".concat(Math.abs(left));
+            return "absolute w-full ".concat(topClass, " ").concat(leftClass, " ");
+        },
+        bl: function (bottom, left) {
+            return "absolute bottom-".concat(bottom !== null && bottom !== void 0 ? bottom : 0, " left-").concat(left !== null && left !== void 0 ? left : 0, " w-full ");
+        },
+    },
 };

package/board/index.d.ts

@@ -10,7 +10,7 @@ export declare function ListBoard({ children, header, options, }: {
     children: React.ReactNode;
     header: {
         title: string;
-        bgColor?: string;
+        colors?: [string, string];
         childrens?: React.ReactNode[];
     };
     options?: {

package/board/index.js

@@ -11,12 +11,14 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "../style.css";
-import { center, between } from "../asset/display";
+import { center, between } from "../util";
 function Header(_a) {
-    var title = _a.title, bgColor = _a.bgColor, childrens = _a.childrens;
+    var title = _a.title, colors = _a.colors, childrens = _a.childrens;
+    var _b = colors !== null && colors !== void 0 ? colors : ["bg", "text"], bgColor = _b[0], textColor = _b[1];
     var headerClassNames = [
         center.row + between.row,
-        "bg-".concat(bgColor || "off-white"),
+        "bg-".concat(bgColor || "white-off"),
+        "text-".concat(textColor || "black"),
         "w-full h-22 px-12",
     ].join(" ");
     return (_jsxs("div", __assign({ className: headerClassNames }, { children: [_jsx("div", __assign({ className: "text-xl font-bold" }, { children: title })), _jsx("div", __assign({ className: "flex" }, { children: childrens === null || childrens === void 0 ? void 0 : childrens.map(function (children) { return children; }) }))] })));
@@ -26,7 +28,7 @@ function Board(_a) {
     var height = (options !== null && options !== void 0 ? options : {}).height;
     var classNames = [
         "h-".concat(height !== null && height !== void 0 ? height : 186, " ").concat(header ? "" : "pt-8"),
-        "rounded-xl bg-white/80 overflow-hidden relative",
+        "rounded-xl bg-white/80 overflow-hidden relative w-full",
     ].join(" ");
     return (_jsxs("div", __assign({ className: classNames }, { children: [header ? _jsx(Header, __assign({}, header)) : null, _jsx("div", __assign({ className: "h-full" }, { children: children }))] })));
 }
@@ -38,8 +40,8 @@ export function CanvasBoard(_a) {
 }
 export function ListBoard(_a) {
     var children = _a.children, header = _a.header, options = _a.options;
-    var title = header.title, bgColor = header.bgColor, childrens = header.childrens;
+    var title = header.title, colors = header.colors, childrens = header.childrens;
     var height = (options !== null && options !== void 0 ? options : {}).height;
     var classNames = ["scrollbar pt-8 px-12 overflow-y-scroll h-full pb-32"].join(" ");
-    return (_jsx(Board, __assign({ header: { title: title, bgColor: bgColor, childrens: childrens }, options: { height: height } }, { children: _jsx("div", __assign({ className: classNames }, { children: children })) })));
+    return (_jsx(Board, __assign({ header: { title: title, colors: colors, childrens: childrens }, options: { height: height } }, { children: _jsx("div", __assign({ className: classNames }, { children: children })) })));
 }

package/card/Card.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import "../style.css";
+export declare function Card<T extends string | number>({ children, header, options, }: {
+    children: React.ReactNode;
+    header?: {
+        title: string;
+        bgColor?: string;
+        childrens?: React.ReactNode[];
+    };
+    options?: {
+        height?: number;
+        width?: T;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/card/Card.js

@@ -0,0 +1,32 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../style.css";
+import { center, between } from "../util";
+function Header(_a) {
+    var title = _a.title, bgColor = _a.bgColor, childrens = _a.childrens;
+    var headerClassNames = [
+        center.row + between.row,
+        "".concat(bgColor || "bg-white-off"),
+        "w-full h-12 px-12",
+    ].join(" ");
+    return (_jsxs("div", __assign({ className: headerClassNames }, { children: [_jsx("div", __assign({ className: "text-xl font-bold" }, { children: title })), _jsx("div", __assign({ className: "flex" }, { children: childrens === null || childrens === void 0 ? void 0 : childrens.map(function (children) { return children; }) }))] })));
+}
+export function Card(_a) {
+    var children = _a.children, header = _a.header, options = _a.options;
+    var _b = options !== null && options !== void 0 ? options : {}, height = _b.height, width = _b.width;
+    var classNames = [
+        "h-".concat(height !== null && height !== void 0 ? height : 48, " w-").concat(width !== null && width !== void 0 ? width : "full", " p-4 max-w-232 "),
+        "rounded-xl bg-white/80 overflow-hidden relative box-shadow duration-500",
+    ].join(" ");
+    return (_jsxs("div", __assign({ className: classNames }, { children: [header ? _jsx(Header, __assign({}, header)) : null, _jsx("div", __assign({ className: "h-full" }, { children: children }))] })));
+}

package/card/ProfileCard.d.ts

@@ -0,0 +1,14 @@
+type Level = "PS" | "ST" | "BA" | "JR" | "HJ";
+export declare function ProfileCard<T extends string | number>({ info, gradeData, }: {
+    info: {
+        name: string;
+        birthday: string;
+        image?: string;
+    };
+    gradeData?: {
+        level?: Level;
+        score?: number;
+        grade?: number;
+    };
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/card/ProfileCard.js

@@ -0,0 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from "./Card";
+import { colorsByLevel } from "../util";
+export function ProfileCard(_a) {
+    var info = _a.info, gradeData = _a.gradeData;
+    var name = info.name, birthday = info.birthday, image = info.image;
+    var _b = gradeData !== null && gradeData !== void 0 ? gradeData : {}, level = _b.level, score = _b.score, grade = _b.grade;
+    return (_jsx(Card, __assign({ options: { width: 84 } }, { children: _jsxs("div", __assign({ className: "flex" }, { children: [_jsx("img", { src: image, alt: "profile", className: "h-20 w-20 overflow-hidden rounded-full object-cover " }), _jsxs("div", __assign({ className: "ml-auto flex flex-col gap-4" }, { children: [_jsxs("div", __assign({ className: "flex w-52 items-end gap-2 border-b-2 border-blue-navy pb-2" }, { children: [_jsx("div", __assign({ className: "text-xl font-bold" }, { children: name })), _jsx("div", { children: birthday })] })), _jsxs("div", { children: [_jsx("div", { children: "\uD559\uC6D0\uC0DD" }), _jsx("div", { children: level ? colorsByLevel[level] : "" })] })] }))] })) })));
+}

package/card/index.d.ts

@@ -1,29 +1 @@
-/// <reference types="react" />
-import "../style.css";
-type Level = "PS" | "ST" | "BA" | "JR" | "HJ";
-export declare function Card<T extends string | number>({ children, header, options, }: {
-    children: React.ReactNode;
-    header?: {
-        title: string;
-        bgColor?: string;
-        childrens?: React.ReactNode[];
-    };
-    options?: {
-        height?: number;
-        width?: T;
-    };
-}): import("react/jsx-runtime").JSX.Element;
-export declare function ProfileCard<T extends string | number>({ studentInfo, gradeData, }: {
-    studentInfo: {
-        name: string;
-        age: T;
-        birthday: string;
-        image?: [string, string];
-    };
-    gradeData: {
-        level?: Level;
-        score?: number;
-        grade?: number;
-    };
-}): import("react/jsx-runtime").JSX.Element;
-export {};
+export * from "./ProfileCard";

package/card/index.js

@@ -1,40 +1 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "../style.css";
-import { center, between } from "../asset/display";
-import { colorsByLevel } from "../asset/colors";
-function Header(_a) {
-    var title = _a.title, bgColor = _a.bgColor, childrens = _a.childrens;
-    var headerClassNames = [
-        center.row + between.row,
-        "".concat(bgColor || "bg-off-white"),
-        "w-full h-12 px-12",
-    ].join(" ");
-    return (_jsxs("div", __assign({ className: headerClassNames }, { children: [_jsx("div", __assign({ className: "text-xl font-bold" }, { children: title })), _jsx("div", __assign({ className: "flex" }, { children: childrens === null || childrens === void 0 ? void 0 : childrens.map(function (children) { return children; }) }))] })));
-}
-export function Card(_a) {
-    var children = _a.children, header = _a.header, options = _a.options;
-    var _b = options !== null && options !== void 0 ? options : {}, height = _b.height, width = _b.width;
-    var classNames = [
-        "h-".concat(height !== null && height !== void 0 ? height : 48, " w-").concat(width !== null && width !== void 0 ? width : "full", " p-4 max-w-232 "),
-        "rounded-xl bg-white/80 overflow-hidden relative box-shadow duration-500",
-    ].join(" ");
-    return (_jsxs("div", __assign({ className: classNames }, { children: [header ? _jsx(Header, __assign({}, header)) : null, _jsx("div", __assign({ className: "h-full" }, { children: children }))] })));
-}
-export function ProfileCard(_a) {
-    var studentInfo = _a.studentInfo, gradeData = _a.gradeData;
-    var name = studentInfo.name, age = studentInfo.age, birthday = studentInfo.birthday, image = studentInfo.image;
-    var _b = image !== null && image !== void 0 ? image : [], src = _b[0], url = _b[1];
-    var level = gradeData.level, score = gradeData.score, grade = gradeData.grade;
-    return (_jsx(Card, __assign({ options: { width: 84 } }, { children: _jsxs("div", __assign({ className: "flex" }, { children: [_jsx("div", { className: "h-20 w-20 overflow-hidden rounded-full bg-black" }), _jsxs("div", __assign({ className: "ml-auto flex flex-col gap-4" }, { children: [_jsxs("div", __assign({ className: "flex w-52 items-end gap-2 border-b-2 border-navy-blue pb-2" }, { children: [_jsx("div", __assign({ className: "text-xl font-bold" }, { children: name })), _jsxs("div", { children: [age, "\uC138"] }), _jsx("div", { children: birthday })] })), _jsxs("div", { children: [_jsx("div", { children: "\uD559\uC6D0\uC0DD" }), _jsx("div", { children: level ? colorsByLevel[level] : "" })] })] }))] })) })));
-}
+export * from "./ProfileCard";

package/header/index.d.ts

@@ -1,3 +1,4 @@
+import "../style.css";
 export declare function DashboardHeader({ title, image }: {
     title: string;
     image?: [string, string];

package/header/index.js

@@ -10,8 +10,9 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../style.css";
 import { useState } from "react";
-import { circle } from "../asset/shape";
+import { circle } from "../util";
 function Menu() {
     var classNames = ["absolute -left-24 z-40 h-80 w-48 border-2 bg-white "].join(" ");
     return (_jsxs("div", __assign({ className: classNames + " fade-in-100 animate-in" }, { children: [_jsx("div", { children: "\u314E\u3147" }), _jsx("div", { children: "\u314E\u3147" })] })));
@@ -19,8 +20,6 @@ function Menu() {
 export function DashboardHeader(_a) {
     var title = _a.title, image = _a.image;
     var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
-    var _c = image !== null && image !== void 0 ? image : [], src = _c[0], url = _c[1];
-    return (_jsxs("div", __assign({ className: "relative flex h-20 w-full items-center justify-between bg-white px-19 shadow-black/10 shadow-b-md" }, { children: [_jsxs("div", __assign({ className: "flex h-12 items-center gap-9" }, { children: [src && url ? (_jsx("button", __assign({ onClick: function () {
-                            window.location.href = url;
-                        } }, { children: _jsx("img", { src: src, alt: "logo", className: "h-12" }) }))) : (_jsx("div", { children: "TOSEL Lab" })), _jsx("div", __assign({ className: "text-3xl font-bold" }, { children: title }))] })), _jsxs("div", __assign({ className: "relative" }, { children: [_jsx("button", __assign({ onClick: function () { return setIsOpen(!isOpen); }, className: circle(9) + "border-2" }, { children: "+" })), isOpen ? _jsx(Menu, {}) : null] }))] })));
+    var _c = image !== null && image !== void 0 ? image : [], src = _c[0], href = _c[1];
+    return (_jsxs("div", __assign({ className: "relative flex h-20 w-full items-center justify-between bg-white px-19 shadow-black/10 shadow-b-md" }, { children: [_jsxs("div", __assign({ className: "flex h-12 items-center gap-9" }, { children: [src && href ? (_jsx("a", __assign({ href: href }, { children: _jsx("img", { src: src, alt: "logo", className: "h-12" }) }))) : (_jsx("div", { children: "TOSEL Lab" })), _jsx("div", __assign({ className: "text-3xl font-bold" }, { children: title }))] })), _jsxs("div", __assign({ className: "relative" }, { children: [_jsx("button", __assign({ onClick: function () { return setIsOpen(!isOpen); }, className: circle(9) + "border-2" }, { children: "+" })), isOpen ? _jsx(Menu, {}) : null] }))] })));
 }

package/modal/index.js

@@ -11,8 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "../style.css";
-import { absolute } from "../asset/position";
-import { col } from "../asset/display";
+import { col, absolute } from "../util";
 function Modal(_a) {
     var children = _a.children;
     var classNames = [

package/navigation/index.d.ts

@@ -1,8 +1,6 @@
+/// <reference types="react" />
 import "../style.css";
-export default function Navigation({ contents, }: {
-    contents: {
-        title: string;
-        href: string;
-        icon: string;
-    }[];
+export declare const buttonClassNames: (href: string, nowPath: string, color?: [string, string]) => string;
+export declare function NavigationContainer({ children }: {
+    children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

package/navigation/index.js

@@ -11,23 +11,14 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import "../style.css";
-import { useState } from "react";
-import { center } from "../asset/display";
-export default function Navigation(_a) {
-    var contents = _a.contents;
-    var pathname = window.location.pathname;
-    var _b = useState(pathname), nowPath = _b[0], setNowPath = _b[1];
-    var bgColor = function (href) {
-        if (nowPath === href)
-            return "bg-white ";
-        return "bg-transparent ";
-    };
-    var buttonClassNames = [center.row(6), "w-50 h-11 rounded-2xl pl-5 h"].join(" ");
-    return (_jsx("div", __assign({ className: center.col() + "w-54" }, { children: contents.map(function (_a) {
-            var title = _a.title, href = _a.href;
-            return (_jsx("button", __assign({ onClick: function () {
-                    setNowPath(href);
-                    window.history.pushState({ data: href }, "", href);
-                }, className: bgColor(href) + buttonClassNames }, { children: title }), href));
-        }) })));
+import { center } from "../util";
+export var buttonClassNames = function (href, nowPath, color) {
+    var _a = color !== null && color !== void 0 ? color : ["black", "white"], text = _a[0], bg = _a[1];
+    var classNames = [center.row(6), "text-".concat(text), "font-bold w-50 h-11 rounded-2xl pl-5"].join(" ");
+    var toggle = nowPath === href ? "bg-".concat(bg) : "bg-transparent";
+    return [classNames, toggle].join(" ");
+};
+export function NavigationContainer(_a) {
+    var children = _a.children;
+    return _jsx("div", __assign({ className: center.col() + "w-54" }, { children: children }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",

package/style.css

@@ -1,20 +1,41 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-::-webkit-scrollbar {
-  width: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background-color: #173a8b;
-  opacity: 0.5;
-  border-radius: 10px;
-}
-
-.box-shadow {
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  font-family: "Pretendard-Medium";
+  src: url("../public/fonts/Pretendard-Medium.otf") format("opentype");
+}
+
+@font-face{
+  font-family: "Kostar";
+  src: url("../public/fonts/Kostar.ttf") format("truetype");  
+}
+
+@font-face{
+  font-family: "NicoMoji";
+  src: url("../public/fonts/NicoMoji.ttf") format("truetype");
+}
+
+@font-face{
+  font-family: "Megrim";
+  src: url("../public/fonts/Megrim.ttf") format("trueType");
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background-color: #173a8b;
+  opacity: 0.5;
+  border-radius: 10px;
+}
+
+
+.box-shadow {
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
+}