@edu-tosel/design 1.0.233 → 1.0.235
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/asset/SVG.d.ts
CHANGED
package/asset/svg/Icon.d.ts
CHANGED
|
@@ -10,8 +10,10 @@ declare const Icon: {
|
|
|
10
10
|
Browser: typeof Browser;
|
|
11
11
|
Event: typeof Event;
|
|
12
12
|
Document: typeof Document;
|
|
13
|
+
Tosel: typeof Tosel;
|
|
13
14
|
};
|
|
14
15
|
export default Icon;
|
|
16
|
+
declare function Tosel(): import("react/jsx-runtime").JSX.Element;
|
|
15
17
|
declare function Calendar({ size, onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
16
18
|
declare function Notification({ size, onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
17
19
|
declare function Search({ size, onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
|
package/asset/svg/Icon.js
CHANGED
|
@@ -6,8 +6,12 @@ const Icon = {
|
|
|
6
6
|
Browser,
|
|
7
7
|
Event,
|
|
8
8
|
Document,
|
|
9
|
+
Tosel
|
|
9
10
|
};
|
|
10
11
|
export default Icon;
|
|
12
|
+
function Tosel() {
|
|
13
|
+
return _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 32 32", fill: "none", children: [_jsx("mask", { id: "mask0_11735_6688", maskUnits: "userSpaceOnUse", x: "5", y: "5", width: "22", height: "22", children: _jsx("path", { d: "M25.0656 8.67629L11.2926 5.31786C10.1657 5.04307 9.03321 5.7496 8.76309 6.89593L5.46158 20.9064C5.19145 22.0527 5.886 23.2047 7.0129 23.4795L20.7858 26.838C21.9127 27.1127 23.0453 26.4062 23.3154 25.2599L26.6169 11.2495C26.887 10.1031 26.1925 8.95108 25.0656 8.67629Z", fill: "white" }) }), _jsxs("g", { mask: "url(#mask0_11735_6688)", children: [_jsx("path", { d: "M10.7722 12.8021H14.5937V22.2518L18.1969 23.1306V12.9115H21.2326C21.2563 12.1733 21.2802 11.435 21.304 10.6968C17.7943 10.1401 14.2846 9.58329 10.7748 9.02661C10.7738 10.285 10.773 11.5436 10.7721 12.802L10.7722 12.8021Z", fill: "url(#paint0_linear_11735_6688)" }), _jsx("path", { d: "M27.106 9.17384L9.2522 4.82031L4.97247 22.982L22.8263 27.3355L27.106 9.17384Z", fill: "url(#paint1_linear_11735_6688)" }), _jsx("path", { d: "M15.6311 0H3.15723C1.41354 0 0 1.43791 0 3.21167V10.6436C0 12.4174 1.41354 13.8553 3.15723 13.8553H15.6311C17.3748 13.8553 18.7884 12.4174 18.7884 10.6436V3.21167C18.7884 1.43791 17.3748 0 15.6311 0Z", fill: "url(#paint2_linear_11735_6688)" }), _jsx("path", { d: "M28.8427 18.1448H16.3688C14.6251 18.1448 13.2115 19.5827 13.2115 21.3564V28.7884C13.2115 30.5621 14.6251 32 16.3688 32H28.8427C30.5864 32 31.9999 30.5621 31.9999 28.7884V21.3564C31.9999 19.5827 30.5864 18.1448 28.8427 18.1448Z", fill: "url(#paint3_linear_11735_6688)" }), _jsx("path", { d: "M12.5135 11.3384V13.8506H14.8235V20.8187H17.2529V13.8506H19.5627V12.4175L12.5135 11.3384Z", fill: "white" })] }), _jsxs("defs", { children: [_jsxs("linearGradient", { id: "paint0_linear_11735_6688", x1: "10.7722", y1: "16.0787", x2: "21.304", y2: "16.0787", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { "stop-color": "white" }), _jsx("stop", { offset: "0.1", "stop-color": "white", "stop-opacity": "0.98" }), _jsx("stop", { offset: "0.23", "stop-color": "white", "stop-opacity": "0.92" }), _jsx("stop", { offset: "0.36", "stop-color": "white", "stop-opacity": "0.83" }), _jsx("stop", { offset: "0.5", "stop-color": "white", "stop-opacity": "0.7" }), _jsx("stop", { offset: "0.65", "stop-color": "white", "stop-opacity": "0.53" }), _jsx("stop", { offset: "0.8", "stop-color": "white", "stop-opacity": "0.32" }), _jsx("stop", { offset: "0.95", "stop-color": "white", "stop-opacity": "0.08" }), _jsx("stop", { offset: "1", "stop-color": "white", "stop-opacity": "0" })] }), _jsxs("linearGradient", { id: "paint1_linear_11735_6688", x1: "7.11194", y1: "6.99765", x2: "25.2717", y2: "24.8477", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { "stop-color": "#105652" }), _jsx("stop", { offset: "1", "stop-color": "#910023" })] }), _jsxs("linearGradient", { id: "paint2_linear_11735_6688", x1: "0.00335254", y1: "6.92763", x2: "18.7457", y2: "6.92763", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { "stop-color": "white" }), _jsx("stop", { offset: "0.15", "stop-color": "white", "stop-opacity": "0.88" }), _jsx("stop", { offset: "0.46", "stop-color": "white", "stop-opacity": "0.57" }), _jsx("stop", { offset: "0.93", "stop-color": "white", "stop-opacity": "0.08" }), _jsx("stop", { offset: "1", "stop-color": "white", "stop-opacity": "0" })] }), _jsxs("linearGradient", { id: "paint3_linear_11735_6688", x1: "31.9249", y1: "25.0724", x2: "13.1825", y2: "25.0724", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { "stop-color": "white" }), _jsx("stop", { offset: "0.15", "stop-color": "white", "stop-opacity": "0.88" }), _jsx("stop", { offset: "0.46", "stop-color": "white", "stop-opacity": "0.57" }), _jsx("stop", { offset: "0.93", "stop-color": "white", "stop-opacity": "0.08" }), _jsx("stop", { offset: "1", "stop-color": "white", "stop-opacity": "0" })] })] })] });
|
|
14
|
+
}
|
|
11
15
|
function Calendar({ size = "md", onClick }) {
|
|
12
16
|
return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: size === "lg" ? 36 : 24, height: size === "lg" ? 36 : 24, viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M6.75 3V5.25M17.25 3V5.25M3 18.75V7.5C3 6.90326 3.23705 6.33097 3.65901 5.90901C4.08097 5.48705 4.65326 5.25 5.25 5.25H18.75C19.3467 5.25 19.919 5.48705 20.341 5.90901C20.7629 6.33097 21 6.90326 21 7.5V18.75M3 18.75C3 19.3467 3.23705 19.919 3.65901 20.341C4.08097 20.7629 4.65326 21 5.25 21H18.75C19.3467 21 19.919 20.7629 20.341 20.341C20.7629 19.919 21 19.3467 21 18.75M3 18.75V11.25C3 10.6533 3.23705 10.081 3.65901 9.65901C4.08097 9.23705 4.65326 9 5.25 9H18.75C19.3467 9 19.919 9.23705 20.341 9.65901C20.7629 10.081 21 10.6533 21 11.25V18.75", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
13
17
|
}
|
package/asset/svg/Icon.tsx
CHANGED
|
@@ -13,10 +13,56 @@ const Icon = {
|
|
|
13
13
|
Browser,
|
|
14
14
|
Event,
|
|
15
15
|
Document,
|
|
16
|
+
Tosel
|
|
16
17
|
};
|
|
17
18
|
|
|
18
19
|
export default Icon;
|
|
19
20
|
|
|
21
|
+
function Tosel(){
|
|
22
|
+
return <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 32 32" fill="none">
|
|
23
|
+
<mask id="mask0_11735_6688" maskUnits="userSpaceOnUse" x="5" y="5" width="22" height="22">
|
|
24
|
+
<path d="M25.0656 8.67629L11.2926 5.31786C10.1657 5.04307 9.03321 5.7496 8.76309 6.89593L5.46158 20.9064C5.19145 22.0527 5.886 23.2047 7.0129 23.4795L20.7858 26.838C21.9127 27.1127 23.0453 26.4062 23.3154 25.2599L26.6169 11.2495C26.887 10.1031 26.1925 8.95108 25.0656 8.67629Z" fill="white"/>
|
|
25
|
+
</mask>
|
|
26
|
+
<g mask="url(#mask0_11735_6688)">
|
|
27
|
+
<path d="M10.7722 12.8021H14.5937V22.2518L18.1969 23.1306V12.9115H21.2326C21.2563 12.1733 21.2802 11.435 21.304 10.6968C17.7943 10.1401 14.2846 9.58329 10.7748 9.02661C10.7738 10.285 10.773 11.5436 10.7721 12.802L10.7722 12.8021Z" fill="url(#paint0_linear_11735_6688)"/>
|
|
28
|
+
<path d="M27.106 9.17384L9.2522 4.82031L4.97247 22.982L22.8263 27.3355L27.106 9.17384Z" fill="url(#paint1_linear_11735_6688)"/>
|
|
29
|
+
<path d="M15.6311 0H3.15723C1.41354 0 0 1.43791 0 3.21167V10.6436C0 12.4174 1.41354 13.8553 3.15723 13.8553H15.6311C17.3748 13.8553 18.7884 12.4174 18.7884 10.6436V3.21167C18.7884 1.43791 17.3748 0 15.6311 0Z" fill="url(#paint2_linear_11735_6688)"/>
|
|
30
|
+
<path d="M28.8427 18.1448H16.3688C14.6251 18.1448 13.2115 19.5827 13.2115 21.3564V28.7884C13.2115 30.5621 14.6251 32 16.3688 32H28.8427C30.5864 32 31.9999 30.5621 31.9999 28.7884V21.3564C31.9999 19.5827 30.5864 18.1448 28.8427 18.1448Z" fill="url(#paint3_linear_11735_6688)"/>
|
|
31
|
+
<path d="M12.5135 11.3384V13.8506H14.8235V20.8187H17.2529V13.8506H19.5627V12.4175L12.5135 11.3384Z" fill="white"/>
|
|
32
|
+
</g>
|
|
33
|
+
<defs>
|
|
34
|
+
<linearGradient id="paint0_linear_11735_6688" x1="10.7722" y1="16.0787" x2="21.304" y2="16.0787" gradientUnits="userSpaceOnUse">
|
|
35
|
+
<stop stop-color="white"/>
|
|
36
|
+
<stop offset="0.1" stop-color="white" stop-opacity="0.98"/>
|
|
37
|
+
<stop offset="0.23" stop-color="white" stop-opacity="0.92"/>
|
|
38
|
+
<stop offset="0.36" stop-color="white" stop-opacity="0.83"/>
|
|
39
|
+
<stop offset="0.5" stop-color="white" stop-opacity="0.7"/>
|
|
40
|
+
<stop offset="0.65" stop-color="white" stop-opacity="0.53"/>
|
|
41
|
+
<stop offset="0.8" stop-color="white" stop-opacity="0.32"/>
|
|
42
|
+
<stop offset="0.95" stop-color="white" stop-opacity="0.08"/>
|
|
43
|
+
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
|
44
|
+
</linearGradient>
|
|
45
|
+
<linearGradient id="paint1_linear_11735_6688" x1="7.11194" y1="6.99765" x2="25.2717" y2="24.8477" gradientUnits="userSpaceOnUse">
|
|
46
|
+
<stop stop-color="#105652"/>
|
|
47
|
+
<stop offset="1" stop-color="#910023"/>
|
|
48
|
+
</linearGradient>
|
|
49
|
+
<linearGradient id="paint2_linear_11735_6688" x1="0.00335254" y1="6.92763" x2="18.7457" y2="6.92763" gradientUnits="userSpaceOnUse">
|
|
50
|
+
<stop stop-color="white"/>
|
|
51
|
+
<stop offset="0.15" stop-color="white" stop-opacity="0.88"/>
|
|
52
|
+
<stop offset="0.46" stop-color="white" stop-opacity="0.57"/>
|
|
53
|
+
<stop offset="0.93" stop-color="white" stop-opacity="0.08"/>
|
|
54
|
+
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
|
55
|
+
</linearGradient>
|
|
56
|
+
<linearGradient id="paint3_linear_11735_6688" x1="31.9249" y1="25.0724" x2="13.1825" y2="25.0724" gradientUnits="userSpaceOnUse">
|
|
57
|
+
<stop stop-color="white"/>
|
|
58
|
+
<stop offset="0.15" stop-color="white" stop-opacity="0.88"/>
|
|
59
|
+
<stop offset="0.46" stop-color="white" stop-opacity="0.57"/>
|
|
60
|
+
<stop offset="0.93" stop-color="white" stop-opacity="0.08"/>
|
|
61
|
+
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
|
62
|
+
</linearGradient>
|
|
63
|
+
</defs>
|
|
64
|
+
</svg>
|
|
65
|
+
}
|
|
20
66
|
function Calendar({ size = "md", onClick }: IconProps) {
|
|
21
67
|
return (
|
|
22
68
|
<svg
|
|
@@ -3,6 +3,7 @@ import { useState } from "react";
|
|
|
3
3
|
import { useResponsive } from "../../../../../hook";
|
|
4
4
|
import { cn, copyToClipboard } from "../../../../../util";
|
|
5
5
|
import { GetStyleFromLevel } from "../atom/GetStyleFromLevel";
|
|
6
|
+
import SVG from "../../../../../asset/SVG";
|
|
6
7
|
export default function IdCard({ info }) {
|
|
7
8
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
8
9
|
const togglecard = () => setIsExpanded(!isExpanded);
|
|
@@ -52,5 +53,5 @@ export default function IdCard({ info }) {
|
|
|
52
53
|
textStyles: "text-xs text-green-dark font-medium text-center",
|
|
53
54
|
animations: "hover:bg-green-dark hover:text-white duration-300 cursor-pointer",
|
|
54
55
|
};
|
|
55
|
-
return _jsxs("div", { className: "flex flex-row w-full h-fit mt-5 gap-5", children: [_jsxs("div", { className: cn(cardWrapper), children: [_jsxs("div", { className: "flex flex-row justify-between items-center pb-1 w-full h-fit border-b-2 border-green-dark", children: [_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex flex-[3] text-sm truncate font-bold text-green-dark", children: [info.name, " ", info.nickname && _jsxs("span", { children: [" \u00A0/ ", info.nickname] })] }), _jsx("div", { className: "flex flex-[1] text-sm", children: info.birthday })] }), _jsx("div", { className: "w-fit h-full xs:block hidden", children: _jsx("div", { className: cn(levelTag), children: GetStyleFromLevel(info.level, "name") }) })] }), _jsxs("div", { className: "flex flex-col xs:flex-row w-full h-fit mt-2", children: [_jsxs("div", { className: "flex flex-3 text-sm truncate", children: [_jsx("div", { className: "flex flex-2 text-green-dark font-bold", children: "\uC218\uD5D8\uBC88\uD638:" }), _jsx("div", { className: "flex flex-3", children: info.code })] }), _jsxs("div", { className: "flex flex-3 text-sm truncate", children: [_jsx("div", { className: "flex flex-2 text-green-dark font-bold", children: "\uC2DC\uD5D8\uC77C:" }), _jsx("div", { className: "flex flex-3", children: info.examDate })] })] }), _jsxs("div", { className: "flex flex-col xs:flex-row w-full h-fit", children: [_jsxs("div", { className: "flex flex-3 text-sm truncate", children: [_jsx("div", { className: "flex flex-2 text-green-dark font-bold", children: "\uC720\uD6A8\uAE30\uAC04:" }), _jsx("div", { className: "flex flex-3", children: info.examValidAt })] }), _jsxs("div", { className: "flex flex-3 text-sm truncate", children: [_jsx("div", { className: "flex flex-2 text-green-dark font-bold", children: "\uC2DC\uD5D8\uD68C\uCC28:" }), _jsx("div", { className: "flex flex-3", children: info.examName })] })] })] }), _jsxs("div", { className: cn(qrBox), children: [!info.qr && (_jsx("div", { className: "absolute top-0 left-0 w-full h-full flex justify-center items-center", children: _jsx("img", { src: "https://resource.tosel.co.kr/images/logo-itc-classic.png", alt: "qr" }) })), info.qr && (_jsxs(_Fragment, { children: [info.qr, _jsx("div", { className: "absolute top-0 left-0 w-full h-full flex justify-center items-center ", children: _jsx(
|
|
56
|
+
return _jsxs("div", { className: "flex flex-row w-full h-fit mt-5 gap-5", children: [_jsxs("div", { className: cn(cardWrapper), children: [_jsxs("div", { className: "flex flex-row justify-between items-center pb-1 w-full h-fit border-b-2 border-green-dark", children: [_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex flex-[3] text-sm truncate font-bold text-green-dark", children: [info.name, " ", info.nickname && _jsxs("span", { children: [" \u00A0/ ", info.nickname] })] }), _jsx("div", { className: "flex flex-[1] text-sm", children: info.birthday })] }), _jsx("div", { className: "w-fit h-full xs:block hidden", children: _jsx("div", { className: cn(levelTag), children: GetStyleFromLevel(info.level, "name") }) })] }), _jsxs("div", { className: "flex flex-col xs:flex-row w-full h-fit mt-2", children: [_jsxs("div", { className: "flex flex-3 text-sm truncate", children: [_jsx("div", { className: "flex flex-2 text-green-dark font-bold", children: "\uC218\uD5D8\uBC88\uD638:" }), _jsx("div", { className: "flex flex-3", children: info.code })] }), _jsxs("div", { className: "flex flex-3 text-sm truncate", children: [_jsx("div", { className: "flex flex-2 text-green-dark font-bold", children: "\uC2DC\uD5D8\uC77C:" }), _jsx("div", { className: "flex flex-3", children: info.examDate })] })] }), _jsxs("div", { className: "flex flex-col xs:flex-row w-full h-fit", children: [_jsxs("div", { className: "flex flex-3 text-sm truncate", children: [_jsx("div", { className: "flex flex-2 text-green-dark font-bold", children: "\uC720\uD6A8\uAE30\uAC04:" }), _jsx("div", { className: "flex flex-3", children: info.examValidAt })] }), _jsxs("div", { className: "flex flex-3 text-sm truncate", children: [_jsx("div", { className: "flex flex-2 text-green-dark font-bold", children: "\uC2DC\uD5D8\uD68C\uCC28:" }), _jsx("div", { className: "flex flex-3", children: info.examName })] })] })] }), _jsxs("div", { className: cn(qrBox), children: [!info.qr && (_jsx("div", { className: "absolute top-0 left-0 w-full h-full flex justify-center items-center", children: _jsx("img", { src: "https://resource.tosel.co.kr/images/logo-itc-classic.png", alt: "qr" }) })), info.qr && (_jsxs(_Fragment, { children: [info.qr, _jsx("div", { className: "absolute top-0 left-0 w-full h-full flex justify-center items-center ", children: _jsx(SVG.Icon.Tosel, {}) }), _jsx("div", { className: cn(copyButtonWrapper), children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "flex justify-center items-center ", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", className: "size-6 stroke-green-dark", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" }) }) }), _jsx("div", { className: cn(copyButton), onClick: () => copyToClipboard(info.qrSrc), children: "\uACF5\uC720\uD558\uAE30" })] }) })] }))] }), _jsxs("div", { className: "flex flex-col shrink-0", children: [_jsxs("div", { className: cn(imgBox), children: [_jsx("img", { src: info.imgSrc, alt: "", className: "object-cover w-auto h-full" }), _jsx("div", { className: "absolute w-full h-full flex items-center justify-center", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", className: "size-6 stroke-jr-blue/50", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" }) }) })] }), !isXS && (_jsx("div", { className: "w-full h-full mt-3 flex", children: _jsx("div", { className: "w-full h-full block xs:hidden", children: _jsx("div", { className: cn(levelTag), children: GetStyleFromLevel(info.level, "name") }) }) }))] })] });
|
|
56
57
|
}
|
package/package.json
CHANGED
package/version.txt
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
1.0.
|
|
1
|
+
1.0.235
|