@edu-tosel/design 1.0.207 → 1.0.210

package/asset/url.d.ts

@@ -0,0 +1,5 @@
+declare const urlAsset: {
+    homepage: (pathname?: string) => string;
+    resource: (pathname?: string) => string;
+};
+export default urlAsset;

package/asset/url.js

@@ -0,0 +1,7 @@
+const homepage = (pathname) => ["https://new.tosel.org", pathname].filter((v) => v).join("");
+const resource = (pathname) => ["https://resource.tosel.co.kr", pathname].filter((v) => v).join("");
+const urlAsset = {
+    homepage,
+    resource,
+};
+export default urlAsset;

package/asset/url.ts

@@ -0,0 +1,10 @@
+const homepage = (pathname?: string) =>
+  ["https://new.tosel.org", pathname].filter((v) => v).join("");
+const resource = (pathname?: string) =>
+  ["https://resource.tosel.co.kr", pathname].filter((v) => v).join("");
+
+const urlAsset = {
+  homepage,
+  resource,
+};
+export default urlAsset;

package/interaction/template/ErrorPage.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import urlAsset from "../../asset/url";
 import { LineBreaks } from "../../text";
 export default function ErrorPage({ message, statusCode, button, }) {
-    return (_jsx("div", { className: "flex justify-center items-center w-full h-screen", children: _jsxs("div", { className: "flex flex-col justify-center items-center", children: [_jsx("div", { className: "w-full h-fit flex justify-center items-center mb-5 text-green-dark", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", className: "md:size-10 size-6", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" }) }) }), _jsx(LineBreaks, { texts: message, className: "w-full text-center text-sm md:text-base font-medium text-gray-dark" }), _jsxs("div", { className: "relative flex justify-center items-center md:size-80 size-40", children: [_jsx("div", { className: "absolute flex justify-center items-center left-0 top-0 w-full h-full overflow-visible", children: _jsx("div", { className: "font-medium md:text-[200px] text-[100px] text-green-dark", children: statusCode }) }), _jsx("div", { className: "absolute flex justify-center items-center left-0 top-0 w-full h-full overflow-visible", children: _jsx("img", { src: "https://resource.tosel.co.kr/images/img-character-cocoon-main-new.png", alt: "", className: "size-40 md:size-80 z-10 hover:scale-105 duration-300" }) })] }), _jsx("div", { className: "w-full text-center text-base font-medium text-gray-dark", children: _jsx("button", { onClick: () => button?.onClick ? button.onClick() : window.history.back(), className: "font-medium text-green-dark w-fit h-fit bg-green-light px-4 py-3 rounded-lg hover:shadow-green duration-300 text-sm hover:bg-white", children: button?.title ?? "이전 페이지로 돌아가기" }) })] }) }));
+    return (_jsx("div", { className: "flex justify-center items-center w-full h-screen", children: _jsxs("div", { className: "flex flex-col justify-center items-center", children: [_jsx("div", { className: "w-full h-fit flex justify-center items-center mb-5 text-green-dark", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", className: "md:size-10 size-6", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" }) }) }), _jsx(LineBreaks, { texts: message, className: "w-full text-center text-sm md:text-base font-medium text-gray-dark" }), _jsxs("div", { className: "relative flex justify-center items-center md:size-80 size-40", children: [_jsx("div", { className: "absolute flex justify-center items-center left-0 top-0 w-full h-full overflow-visible", children: _jsx("div", { className: "font-medium md:text-[200px] text-[100px] text-green-dark", children: statusCode }) }), _jsx("div", { className: "absolute flex justify-center items-center left-0 top-0 w-full h-full overflow-visible", children: _jsx("img", { src: urlAsset.resource("/images/img-character-cocoon-main-new.png"), alt: "", className: "size-40 md:size-80 z-10 hover:scale-105 duration-300" }) })] }), _jsx("div", { className: "w-full text-center text-base font-medium text-gray-dark", children: _jsx("button", { onClick: () => button?.onClick ? button.onClick() : window.history.back(), className: "font-medium text-green-dark w-fit h-fit bg-green-light px-4 py-3 rounded-lg hover:shadow-green duration-300 text-sm hover:bg-white", children: button?.title ?? "이전 페이지로 돌아가기" }) })] }) }));
 }

package/layout/template/Event/One.js

@@ -48,5 +48,5 @@ export default function One({ event }) {
             : event.button?.title;
     return (_jsxs("div", { className: "flex flex-col mmd:flex-row", children: [_jsx("div", { className: "min-w-[320px] h-auto p-5 mmd:sticky mmd:top-20 mmd:self-start", children: _jsxs("div", { className: "w-full h-auto rounded-xl sm:flex mmd:flex-col", children: [_jsx("div", { className: "w-full mmd:h-50 overflow-hidden", children: _jsx("img", { src: event.thumbnail, alt: event.title, className: "rounded-xl h-full object-cover w-full" }) }), _jsxs("div", { className: "w-full h-auto pt-5 sm:p-5 mmd:p-0 mmd:pt-5 gap-3 flex flex-col", children: [_jsx("div", { className: "flex items-center", children: _jsx(StatusText, { event: event }) }), _jsx("div", { className: "text-sm font-bold text-gray-dark flex flex-col items-start mb-2", children: lines.map((line, index) => (_jsxs("span", { children: [line, _jsx("br", {})] }, index))) }), event.button && (_jsx("div", { className: cn(button), onClick: () => {
                                         event.button?.onClick && event.button.onClick();
-                                    }, children: buttonText }))] })] }, event.id) }), _jsxs("div", { className: "flex-grow p-5", children: [_jsx("div", { children: isHTMLString(event.content) ? (_jsx("div", { dangerouslySetInnerHTML: { __html: event.content }, className: "w-full rounded-xl object-cover overflow-hidden max-w-[810px]" })) : (_jsx("div", { children: event.content })) }), _jsx("button", { onClick: () => history.back(), className: "mt-8 p-5 bg-green-dark/5 text-green-dark rounded-xl flex items-center justify-center hover:bg-green-dark/20 transition-all", children: "\uBAA9\uB85D\uC73C\uB85C \uB3CC\uC544\uAC00\uAE30" })] })] }));
+                                    }, children: buttonText }))] })] }, event.id) }), _jsxs("div", { className: "flex-grow p-5", children: [_jsx("div", { className: "w-full rounded-xl object-cover overflow-hidden max-w-[810px]", children: isHTMLString(event.content) ? (_jsx("div", { dangerouslySetInnerHTML: { __html: event.content } })) : (_jsx("div", { children: event.content })) }), _jsx("button", { onClick: () => history.back(), className: "mt-8 p-5 bg-green-dark/5 text-green-dark rounded-xl flex items-center justify-center hover:bg-green-dark/20 transition-all", children: "\uBAA9\uB85D\uC73C\uB85C \uB3CC\uC544\uAC00\uAE30" })] })] }));
 }

package/layout/template/Legacy/Integrate.js

@@ -4,6 +4,7 @@ import { Input, Label } from "../../../widget";
 import Action from "../Action";
 import { Loading } from "../../../interaction";
 import { LineBreaks } from "../../../text";
+import urlAsset from "../../../asset/url";
 export default function Integrate({ isLoading, isUser, usernameState: [oldUsername, setUsername], passwordState: [oldPassword, setPassword], submit, }) {
     const container = {
         displays: "flex justify-center items-center",
@@ -36,5 +37,5 @@ export default function Integrate({ isLoading, isUser, usernameState: [oldUserna
                                     height: "md",
                                     text: "text-white",
                                     background: "bg-crimson-burgundy",
-                                } })] }), _jsx("button", { onClick: () => (window.location.href = "https://new.tosel.org/legacy"), className: "flex justify-end text-xs sm:text-sm text-gray-medium mt-3", children: "\uC5F0\uB3D9\uC774 \uC774\uBBF8 \uC644\uB8CC\uB418\uC5C8\uB098\uC694? \uBC14\uB85C \uC131\uC801\uC744 \uD655\uC778\uD574\uC8FC\uC138\uC694! (\uD074\uB9AD)" })] }) }) }));
+                                } })] }), _jsx("button", { onClick: () => (window.location.href = urlAsset.homepage("/legacy")), className: "flex justify-end text-xs sm:text-sm text-gray-medium mt-3", children: "\uC5F0\uB3D9\uC774 \uC774\uBBF8 \uC644\uB8CC\uB418\uC5C8\uB098\uC694? \uBC14\uB85C \uC131\uC801\uC744 \uD655\uC778\uD574\uC8FC\uC138\uC694! (\uD074\uB9AD)" })] }) }) }));
 }

package/layout/template/Legacy/Table.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../util";
 import Action from "../Action";
 import { useState } from "react";
+import urlAsset from "../../../asset/url";
 export default function Table({ exams }) {
     const container = {
         displays: "flex flex-col lg:flex-row gap-x-16",
@@ -100,8 +101,7 @@ export default function Table({ exams }) {
     };
     return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(inputBoxWrapperWeb), children: [_jsxs("div", { className: cn(titleWrapperWeb), children: [_jsx("div", { className: cn(mainTitle), children: "\uC774\uC804 \uC131\uC801 \uC870\uD68C\uD558\uAE30" }), _jsx("div", { className: cn(subTitle), children: "85\uD68C \uC774\uC804\uC758 \uC131\uC801\uC744 \uC870\uD68C\uD569\uB2C8\uB2E4." })] }), _jsx("input", { type: "text", className: cn(inputBox), onChange: (e) => {
                             setFilterKey(e.target.value);
-                        }, placeholder: "\uC2DC\uD5D8 \uC774\uB984\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694" }), _jsxs("div", { className: cn(buttonSetWrapper), children: [_jsx("div", { className: "text-xs text-green-dark", children: "\uB2E4\uB978 \uC11C\uBE44\uC2A4\uB97C \uC774\uC6A9\uD558\uACE0 \uC2F6\uB098\uC694?" }), _jsxs("div", { className: cn(buttonSet), children: [_jsx("div", { className: cn(linkButton), onClick: () => (window.location.href = "https://new.tosel.org/"), children: "\uD648\uC73C\uB85C" }), _jsx("div", { className: cn(linkButton), onClick: () => (window.location.href =
-                                            "https://new.tosel.org/legacy/integrate"), children: "\uC5F0\uB3D9 \uACC4\uC815 \uCD94\uAC00\uD558\uAE30" }), _jsx("div", { className: cn(linkButton), onClick: () => (window.location.href = "https://tosel.org/HallofFame/main"), children: "\uBA85\uC608\uC758 \uC804\uB2F9" })] })] })] }), _jsxs("div", { className: cn(cardDeckWrapper), children: [_jsx("div", { className: cn(scrollWrapper), children: _jsxs("div", { className: cn(examsWrapper), children: [_jsxs("div", { className: cn(titleWrapperMobile), children: [_jsx("div", { className: cn(mainTitle), children: "\uC774\uC804 \uC131\uC801 \uC870\uD68C\uD558\uAE30" }), _jsx("div", { className: cn(subTitle), children: "85\uD68C \uC774\uC804\uC758 \uC131\uC801\uC744 \uC870\uD68C\uD569\uB2C8\uB2E4." })] }), _jsxs(Action.Replace, { actions: [
+                        }, placeholder: "\uC2DC\uD5D8 \uC774\uB984\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694" }), _jsxs("div", { className: cn(buttonSetWrapper), children: [_jsx("div", { className: "text-xs text-green-dark", children: "\uB2E4\uB978 \uC11C\uBE44\uC2A4\uB97C \uC774\uC6A9\uD558\uACE0 \uC2F6\uB098\uC694?" }), _jsxs("div", { className: cn(buttonSet), children: [_jsx("div", { className: cn(linkButton), onClick: () => (window.location.href = urlAsset.homepage()), children: "\uD648\uC73C\uB85C" }), _jsx("div", { className: cn(linkButton), onClick: () => (window.location.href = urlAsset.homepage("/legacy/integrate")), children: "\uC5F0\uB3D9 \uACC4\uC815 \uCD94\uAC00\uD558\uAE30" }), _jsx("div", { className: cn(linkButton), onClick: () => (window.location.href = "https://tosel.org/HallofFame/main"), children: "\uBA85\uC608\uC758 \uC804\uB2F9" })] })] })] }), _jsxs("div", { className: cn(cardDeckWrapper), children: [_jsx("div", { className: cn(scrollWrapper), children: _jsxs("div", { className: cn(examsWrapper), children: [_jsxs("div", { className: cn(titleWrapperMobile), children: [_jsx("div", { className: cn(mainTitle), children: "\uC774\uC804 \uC131\uC801 \uC870\uD68C\uD558\uAE30" }), _jsx("div", { className: cn(subTitle), children: "85\uD68C \uC774\uC804\uC758 \uC131\uC801\uC744 \uC870\uD68C\uD569\uB2C8\uB2E4." })] }), _jsxs(Action.Replace, { actions: [
                                         [
                                             filteredExam.length === 0,
                                             _jsxs("div", { className: cn(noResultWrapper), children: [_jsx("div", { className: cn(noResultImg), children: _jsx("img", { src: "/images/legacy/img-legacy-noresult.png", alt: "\uACB0\uACFC \uC5C6\uC74C" }) }), _jsx("div", { className: "text-sm text-center w-full font-medium", children: "\uC774\uB7F0, \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC5B4\uC694" })] }),

package/layout/template/Regexam/Banner.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../util";
 import { useState, useEffect } from "react";
+import urlAsset from "../../../asset/url";
 export default function Banner() {
     const [isHidden, setIsHidden] = useState(false);
     useEffect(() => {
@@ -84,7 +85,7 @@ export default function Banner() {
         backgrounds: "bg-white group hover:bg-green-dark",
         other: "animate-bounce bg-white p-1 w-10 h-10 ring-1 ring-slate-900/5 shadow-lg rounded-full flex items-center justify-center",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex flex-col md:flex-row w-full max-w-6xl justify-between items-center", children: [_jsxs("div", { className: "flex flex-col w-full md:w-fit h-full shrink-0 justify-start", children: [_jsx("div", { className: cn(brandTextSub), children: "about" }), _jsx("div", { className: cn(brandTextCore), children: _jsx("img", { src: "/images/logos/logo-tosel-main.svg", alt: "", className: "h-full" }) }), _jsxs("div", { className: cn(explainer), children: ["15,000\uC5EC\uAC1C\uC758 \uD559\uAD50\uC640 \uD559\uC6D0\uC774 \uC120\uD0DD\uD55C ", _jsx("br", {}), "\uB300\uD55C\uBBFC\uAD6D \uB300\uD45C \uC601\uC5B4 \uC778\uC99D\uC2DC\uD5D8"] }), _jsxs("div", { onClick: () => (window.location.href = `https://new.tosel.org/dashboard`), className: cn(AdvertButton), children: [_jsx("div", { className: cn(buttonBackground1) }), _jsx("div", { className: cn(buttonBackground2) }), _jsx("div", { className: cn(buttonText), children: "\uC9C0\uAE08 \uC811\uC218\uD558\uAE30" })] })] }), _jsx("div", { className: cn(carouselWrapper), children: _jsx(InfiniteCarousel, {}) })] }), _jsxs("div", { className: cn(scrollGuideWrapper), children: [_jsx("div", { className: cn(scrollGuideText), children: "\uC790\uC138\uD55C \uB0B4\uC6A9\uC744 \uBCF4\uB824\uBA74 \uC544\uB798\uB85C \uC2A4\uD06C\uB864 \uD574\uBCF4\uC138\uC694" }), _jsx("div", { className: cn(scrollGuideButton), onClick: handleScroll, children: _jsx("svg", { className: "w-6 h-6 text-green-dark group-hover:text-white", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { d: "M19 14l-7 7m0 0l-7-7m7 7V3" }) }) })] })] }));
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex flex-col md:flex-row w-full max-w-6xl justify-between items-center", children: [_jsxs("div", { className: "flex flex-col w-full md:w-fit h-full shrink-0 justify-start", children: [_jsx("div", { className: cn(brandTextSub), children: "about" }), _jsx("div", { className: cn(brandTextCore), children: _jsx("img", { src: "/images/logos/logo-tosel-main.svg", alt: "", className: "h-full" }) }), _jsxs("div", { className: cn(explainer), children: ["15,000\uC5EC\uAC1C\uC758 \uD559\uAD50\uC640 \uD559\uC6D0\uC774 \uC120\uD0DD\uD55C ", _jsx("br", {}), "\uB300\uD55C\uBBFC\uAD6D \uB300\uD45C \uC601\uC5B4 \uC778\uC99D\uC2DC\uD5D8"] }), _jsxs("div", { onClick: () => (window.location.href = urlAsset.homepage("/dashboard")), className: cn(AdvertButton), children: [_jsx("div", { className: cn(buttonBackground1) }), _jsx("div", { className: cn(buttonBackground2) }), _jsx("div", { className: cn(buttonText), children: "\uC9C0\uAE08 \uC811\uC218\uD558\uAE30" })] })] }), _jsx("div", { className: cn(carouselWrapper), children: _jsx(InfiniteCarousel, {}) })] }), _jsxs("div", { className: cn(scrollGuideWrapper), children: [_jsx("div", { className: cn(scrollGuideText), children: "\uC790\uC138\uD55C \uB0B4\uC6A9\uC744 \uBCF4\uB824\uBA74 \uC544\uB798\uB85C \uC2A4\uD06C\uB864 \uD574\uBCF4\uC138\uC694" }), _jsx("div", { className: cn(scrollGuideButton), onClick: handleScroll, children: _jsx("svg", { className: "w-6 h-6 text-green-dark group-hover:text-white", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { d: "M19 14l-7 7m0 0l-7-7m7 7V3" }) }) })] })] }));
 }
 const InfiniteCarousel = () => {
     const slides = [

package/layout/template/Regexam/OfflineExam.js

@@ -4,6 +4,7 @@ import { gsap } from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 import { cn } from "../../../util";
 import { useResponsive } from "../../../hook";
+import urlAsset from "../../../asset/url";
 gsap.registerPlugin(ScrollTrigger);
 export default function OfflineExam() {
     const isMD = useResponsive("md");
@@ -95,7 +96,7 @@ export default function OfflineExam() {
         sizes: "w-full h-0.5 mt-1",
         colors: "bg-gradient-to-r from-crimson-burgundy to-green-dark flex-shrink-0",
     };
-    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(mainWrapper), children: [_jsxs("div", { className: cn(titleWrapper), ref: scrollWrapperRef, children: [_jsx("div", { className: cn(sectionTitle), children: "\uC815\uAE30\uC2DC\uD5D8 \uC548\uB0B4" }), _jsx("div", { className: cn(sectionSubTitle), children: "\uC5F0 4\uD68C, \uC624\uD504\uB77C\uC778\uC73C\uB85C \uAC1C\uCD5C\uB418\uB294 \uD1A0\uC140 \uC815\uAE30\uC2DC\uD5D8\uC785\uB2C8\uB2E4." }), isMD && (_jsxs("div", { onClick: () => (window.location.href = `https://olympiad.tosel.co.kr/dashboard`), className: cn(AdvertButton), children: [_jsx("div", { className: cn(buttonBackground1) }), _jsx("div", { className: cn(buttonBackground2) }), _jsx("div", { className: cn(buttonText), children: "\uC9C0\uAE08 \uC811\uC218\uD558\uAE30" })] }))] }), _jsxs("div", { className: cn(scrollWrapper), children: [_jsxs("div", { className: cn(miniBox), children: [_jsx("div", { className: cn(miniTitle), children: "\uC2DC\uD5D8\uAD6C\uC131" }), _jsx("div", { className: cn(miniDivider) }), _jsx("div", { className: "h-full w-full mt-5", children: _jsx(TableComponent, {}) })] }), _jsxs("div", { className: cn(miniBox), children: [_jsx("div", { className: cn(miniTitle), children: "\uC5F0\uAC04 \uC2DC\uD5D8 \uC77C\uC815" }), _jsx("div", { className: cn(miniDivider) }), _jsx("div", { className: "h-full w-full mt-5", children: _jsx(AnnualTableComponent, {}) })] }), _jsxs("div", { className: cn(miniBox), children: [_jsx("div", { className: cn(miniTitle), children: "\uB2F9\uC77C \uC138\uBD80\uC77C\uC815" }), _jsx("div", { className: cn(miniDivider) }), _jsx("div", { className: "h-full w-full mt-5", children: _jsx(TimeTableComponent, {}) }), _jsxs("div", { className: "flex flex-col mt-4", children: [_jsx("div", { className: "text-gray-medium font-medium text-sm", children: "*\uACE0\uC0AC\uC7A5 \uB0B4\uBD80\uC5D0\uB294 \uD559\uBD80\uBAA8\uC758 \uCD9C\uC785\uC774 \uC81C\uD55C\uB429\uB2C8\uB2E4." }), _jsx("div", { className: "text-gray-medium font-medium text-sm", children: "*\uC785\uC2E4\uB9C8\uAC10(13\uC2DC 10\uBD84)\uC2DC\uAC04\uC744 \uC900\uC218\uD574\uC8FC\uC2DC\uAE30 \uBC14\uB78D\uB2C8\uB2E4." })] })] })] }), !isMD && (_jsxs("div", { onClick: () => (window.location.href = `https://new.tosel.org/dashboard`), className: cn(AdvertButton), children: [_jsx("div", { className: cn(buttonBackground1) }), _jsx("div", { className: cn(buttonBackground2) }), _jsx("div", { className: cn(buttonText), children: "\uC9C0\uAE08 \uC811\uC218\uD558\uAE30" })] }))] }) }));
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(mainWrapper), children: [_jsxs("div", { className: cn(titleWrapper), ref: scrollWrapperRef, children: [_jsx("div", { className: cn(sectionTitle), children: "\uC815\uAE30\uC2DC\uD5D8 \uC548\uB0B4" }), _jsx("div", { className: cn(sectionSubTitle), children: "\uC5F0 4\uD68C, \uC624\uD504\uB77C\uC778\uC73C\uB85C \uAC1C\uCD5C\uB418\uB294 \uD1A0\uC140 \uC815\uAE30\uC2DC\uD5D8\uC785\uB2C8\uB2E4." }), isMD && (_jsxs("div", { onClick: () => (window.location.href = urlAsset.homepage("/dashboard")), className: cn(AdvertButton), children: [_jsx("div", { className: cn(buttonBackground1) }), _jsx("div", { className: cn(buttonBackground2) }), _jsx("div", { className: cn(buttonText), children: "\uC9C0\uAE08 \uC811\uC218\uD558\uAE30" })] }))] }), _jsxs("div", { className: cn(scrollWrapper), children: [_jsxs("div", { className: cn(miniBox), children: [_jsx("div", { className: cn(miniTitle), children: "\uC2DC\uD5D8\uAD6C\uC131" }), _jsx("div", { className: cn(miniDivider) }), _jsx("div", { className: "h-full w-full mt-5", children: _jsx(TableComponent, {}) })] }), _jsxs("div", { className: cn(miniBox), children: [_jsx("div", { className: cn(miniTitle), children: "\uC5F0\uAC04 \uC2DC\uD5D8 \uC77C\uC815" }), _jsx("div", { className: cn(miniDivider) }), _jsx("div", { className: "h-full w-full mt-5", children: _jsx(AnnualTableComponent, {}) })] }), _jsxs("div", { className: cn(miniBox), children: [_jsx("div", { className: cn(miniTitle), children: "\uB2F9\uC77C \uC138\uBD80\uC77C\uC815" }), _jsx("div", { className: cn(miniDivider) }), _jsx("div", { className: "h-full w-full mt-5", children: _jsx(TimeTableComponent, {}) }), _jsxs("div", { className: "flex flex-col mt-4", children: [_jsx("div", { className: "text-gray-medium font-medium text-sm", children: "*\uACE0\uC0AC\uC7A5 \uB0B4\uBD80\uC5D0\uB294 \uD559\uBD80\uBAA8\uC758 \uCD9C\uC785\uC774 \uC81C\uD55C\uB429\uB2C8\uB2E4." }), _jsx("div", { className: "text-gray-medium font-medium text-sm", children: "*\uC785\uC2E4\uB9C8\uAC10(13\uC2DC 10\uBD84)\uC2DC\uAC04\uC744 \uC900\uC218\uD574\uC8FC\uC2DC\uAE30 \uBC14\uB78D\uB2C8\uB2E4." })] })] })] }), !isMD && (_jsxs("div", { onClick: () => (window.location.href = urlAsset.homepage("/dashboard")), className: cn(AdvertButton), children: [_jsx("div", { className: cn(buttonBackground1) }), _jsx("div", { className: cn(buttonBackground2) }), _jsx("div", { className: cn(buttonText), children: "\uC9C0\uAE08 \uC811\uC218\uD558\uAE30" })] }))] }) }));
 }
 export function TableComponent() {
     const data = [

package/layout/template/Regexam/Types.js

@@ -5,6 +5,7 @@ import { useActionStore } from "../../../store";
 import Action from "../Action";
 import { ConfirmModal } from "../../../modal";
 import { useResponsive, useVisibilityObserver } from "../../../hook";
+import urlAsset from "../../../asset/url";
 export default function Types() {
     const scrollContainerRef = useRef(null);
     const cardWidth = 400; // card width
@@ -78,9 +79,9 @@ const examStyles = {
         isHallofFame: true,
         report: "기본제공",
         certificate: "3,900원",
-        link: "https://new.tosel.org/dashboard/user/applications",
+        link: urlAsset.homepage("/dashboard/user/applications"),
         majorColor: "text-crimson-burgundy bg-crimson-burgundy",
-        imgSrc: "https://resource.tosel.co.kr/images/img-buidling-official.png",
+        imgSrc: urlAsset.resource("/images/img-buidling-official.png"),
         buttonText: "개인 접수하기",
         mainPrice: "33,000원",
         subPrice: "39,000원",
@@ -106,7 +107,7 @@ const examStyles = {
         isHallofFame: true,
         report: "기본제공",
         certificate: "기본제공",
-        link: "https://new.tosel.org/dashboard/academy/applications",
+        link: urlAsset.homepage("/dashboard/academy/applications"),
         majorColor: "text-green-dark bg-green-dark",
         imgSrc: "https://resource.tosel.co.kr/images/img-buidling-official.png",
         buttonText: "단체 접수하기",
@@ -134,9 +135,9 @@ const examStyles = {
         isHallofFame: false,
         report: "기본제공",
         certificate: "미제공",
-        link: "https://new.tosel.org/events/28",
+        link: urlAsset.homepage("/events/28"),
         majorColor: "text-green-dark bg-green-dark",
-        imgSrc: "https://resource.tosel.co.kr/images/img-buidling-academy.png",
+        imgSrc: urlAsset.resource("/images/img-buidling-academy.png"),
         buttonText: "기관시험 신청하기",
         mainPrice: "33,000원",
         subPrice: "39,000원",
@@ -260,8 +261,7 @@ const ExamCard = ({ id, type, name, place, isHallofFame, report, certificate, ma
                         {
                             title: "등록하기",
                             onClick: () => {
-                                window.location.href =
-                                    "https://new.tosel.org/sign-up/academy";
+                                window.location.href = urlAsset.homepage("/sign-up/academy");
                             },
                             option: {
                                 text: "font-pretendard-var font-medium text-green-dark",

package/layout/template/Transcript/design/Transcript.js

@@ -49,12 +49,12 @@ export const example = {
         writingScript: { part5: "asd", part6: "qwe" },
     },
     oci: [
-        { category: "Communicative Competency (CC)", average: 0.25, result: 0.75 },
-        { category: "Problem-Solving Competency (PS)", average: 0.35, result: 0.9 },
+        { category: "Communicative Competency (CC)", average: 25, result: 75 },
+        { category: "Problem-Solving Competency (PS)", average: 35, result: 90 },
         {
             category: "Interpersonal/Social Competency (IS)",
-            average: 0.45,
-            result: 0.68,
+            average: 45,
+            result: 68,
         },
     ],
 };

package/layout/template/Transcript/design/TranscriptAdvanced.design.js

@@ -1,9 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { paperSize } from "../../../../style/size";
 import { cn } from "../../../../util";
 import IdCard from "./organism/IdCard";
 import { BarCardCol } from "./organism/BarCardCol";
+import { RadarCard } from "./organism/RadarCard";
+import { OCICard } from "./organism/OCICard";
+import { OCIChart } from "./molecule/OCIChart";
 function TranscriptDesign({ props }, ref) {
     const { info, score, lswr, oci } = props;
     const section1Score = score.result.part1 +
@@ -36,7 +39,11 @@ function TranscriptDesign({ props }, ref) {
         spacings: "px-5 py-2",
         backgrounds: "bg-gradient-to-r from-crimson-burgundy to-green-dark",
     };
-    return (_jsxs("div", { ref: ref, className: cn(container), children: [_jsxs("div", { className: cn(headerBox), children: [_jsx("img", { src: "https://resource.tosel.co.kr/images/header-logo2.png", alt: "\uD1A0\uC140 \uB85C\uACE0", className: "h-10 py-1" }), _jsx("div", { className: "text-white font-bold text-base", children: "Official Score Report" })] }), _jsx(IdCard, { info: info }), _jsx(BarCardCol, { section1: section1Data, section2: section2Data, theme: "red" })] }));
+    const RadarWrapper = {
+        displays: "flex flex-row gap-5",
+        siezs: "w-full h-fit",
+    };
+    return (_jsx(_Fragment, { children: _jsxs("div", { ref: ref, className: cn(container), children: [_jsxs("div", { className: cn(headerBox), children: [_jsx("img", { src: "https://resource.tosel.co.kr/images/header-logo2.png", alt: "\uD1A0\uC140 \uB85C\uACE0", className: "h-10 py-1" }), _jsx("div", { className: "text-white font-bold text-base", children: "Official Score Report" })] }), _jsx(IdCard, { info: info }), _jsx(BarCardCol, { section1: section1Data, section2: section2Data, theme: "red" }), _jsx(RadarCard, { data: lswr, theme: "red", title: "Section Scores" }), _jsxs("div", { className: cn("page-break"), children: [_jsx("div", { className: "w-full h-5 print:block" }), _jsxs("div", { className: cn(headerBox), children: [_jsx("img", { src: "https://resource.tosel.co.kr/images/header-logo2.png", alt: "\uD1A0\uC140 \uB85C\uACE0", className: "h-10 py-1" }), _jsx("div", { className: "text-white font-bold text-base", children: "Occupational Competency Index Report" })] }), _jsx(OCICard, { data: oci }), _jsx(OCIChart, {})] })] }) }));
 }
 function SectionBarGraphProps(title, score, total, script, subScripts, scale, subScore) {
     return {

package/layout/template/Transcript/design/atom/CardTitle.js

@@ -6,7 +6,7 @@ export default function CardTitle({ title, theme, }) {
         sizes: "h-7 shrink-0 w-full",
         theme: theme == "green"
             ? "text-green-dark bg-green-light"
-            : "text-crimson-burgundy bg-crimson-burgundy/10",
+            : "text-white bg-gradient-to-r from-crimson-burgundy to-green-dark",
         textStyles: "font-medium text-sm",
     };
     return _jsx("div", { className: cn(cardTitle), children: title });

package/layout/template/Transcript/design/molecule/BarGraphDuo.d.ts

@@ -0,0 +1,7 @@
+interface DuoBarProps {
+    score: number;
+    subScore: number;
+    total: number;
+}
+export declare function BarGraphDuo({ score, subScore, total }: DuoBarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/Transcript/design/molecule/BarGraphDuo.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function BarGraphDuo({ score, subScore, total }) {
+    const myWidthPercentage = (score / total) * 100;
+    const subWithPercentage = (subScore / total) * 100;
+    return (_jsxs("div", { className: "w-full h-fit flex flex-col gap-1 shrink-0 py-2 px-0 relative", children: [_jsx("div", { className: "h-fit text-[10px] bg-green-dark text-white text-start rounded-sm px-1", style: { width: `${myWidthPercentage}%` }, children: "My Score" }), _jsx("div", { className: "h-fit text-[10px] bg-crimson-burgundy text-white text-start px-1", style: { width: `${subWithPercentage}%` }, children: "Average" })] }));
+}

package/layout/template/Transcript/design/molecule/LSWRChart.d.ts

@@ -0,0 +1,11 @@
+interface LSWRCellProps {
+    data: {
+        subject: string;
+        A: number;
+        B: number;
+        fullMark: number;
+        partIndicies: number[];
+    }[];
+}
+export declare function LSWRChart({ data }: LSWRCellProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/Transcript/design/molecule/LSWRChart.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const partDescription = [
+    {
+        number: 1,
+        description: "Evaluates the ability to listen to and comprehend short conversations.",
+    },
+    {
+        number: 2,
+        description: "Evaluates the ability to comprehend short conversations and select the most appropriate picture.",
+    },
+    {
+        number: 3,
+        description: "Evaluates the ability to understand short conversations and answer questions about them.",
+    },
+    {
+        number: 4,
+        description: "Evaluates the ability to understand short talks and infer the intended meanings by answering questions.",
+    },
+    {
+        number: 5,
+        description: "Evaluates the ability to recognize topics and implications in various reading materials and select the best answers to questions about them.",
+    },
+    {
+        number: 6,
+        description: "Evaluates the ability to interpret sentence meanings and complete sentences using appropriate words, structure, and grammar.",
+    },
+    {
+        number: 7,
+        description: "Evaluates the ability to skim, analyze, and infer from practical reading materials and select the best answers to questions about them.",
+    },
+    {
+        number: 8,
+        description: "Evaluates the ability to recognize topics and implications in various reading materials and select the best answers to questions about them.",
+    },
+];
+// const partDescriptionRecord = createRecord(partDescription, "number");
+export function LSWRChart({ data }) {
+    return (_jsx("div", { className: "w-full h-full flex flex-col", children: data.map(({ partIndicies, subject, A, B }) => {
+            return (_jsxs("div", { className: "flex w-full h-full even:bg-white odd:bg-gray-light", children: [_jsx("div", { className: "p-2 font-bold bg-crimson-burgundy text-white w-10 shrink-0 text-center", children: subject }), _jsxs("div", { className: "w-16 shrink-0 flex flex-col justify-center items-center p-2 text-center leading-tight", children: [_jsxs("div", { className: "text-green-dark font-bold text-base", children: [A, "%"] }), _jsxs("div", { className: "text-crimson-burgundy font-medium text-xs leading-none", children: [B, "%"] })] }), _jsx("div", { className: "flex flex-col justify-center", children: partIndicies.map(() => {
+                            return (_jsx("div", { className: "text-[10px] leading-tight p-1 ", children: _jsx("span", { className: "font-bold" }) }));
+                        }) })] }));
+        }) }));
+}

package/layout/template/Transcript/design/molecule/OCIChart.d.ts

@@ -0,0 +1 @@
+export declare function OCIChart(): import("react/jsx-runtime").JSX.Element;

package/layout/template/Transcript/design/molecule/OCIChart.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../../util";
+const ociDescription = [
+    {
+        name: "CC",
+        title: "Communicative Competency",
+        description: "The ability to communicate by understanding written and spoken texts through one's lexical knowledge, reading comprehension skills, and grammatical knowledge, as well as by comprehending topics, main points, and details in each text.",
+        profession: "Humanities and Social Sciences, Language Professions, Humanities Education, Writing",
+    },
+    {
+        name: "PS",
+        title: "Problem-Solving Competency",
+        description: "The ability to recognize a problem, propose and apply alternatives through creativity, logic, critical organization, classification, and synthesis of information, and to assess potential consequences.",
+        profession: "Accounting, IT, Legal, Social Activities",
+    },
+    {
+        name: "RM",
+        title: "Resource Management Competency",
+        description: "The ability to plan the use and allocation of resources in practical settings by identifying and gathering various resources, and by understanding and evaluating their relationships.",
+        profession: "Planning Services, Social Services, Educational Services",
+    },
+    {
+        name: "IS",
+        title: "Interpersonal / Social Competency",
+        description: "The ability to discover shared interests with individuals from diverse backgrounds, to connect with and lead others, and to collaborate effectively.",
+        profession: "Management, Sales-related Services, Office Work, General Services",
+    },
+    {
+        name: "IU",
+        title: "Information Utilization and Processing Competency",
+        description: "The ability to collect task-related information and to process it quickly and skillfully by performing cognitive tasks such as classifying or sorting information by type, characteristic, or size.",
+        profession: "Engineering, Video Technology, Web, Games, Animation",
+    },
+    {
+        name: "OP",
+        title: "Organizational Performance Competency",
+        description: "The ability to understand and design organizational systems, and to think logically by applying deductive and inductive reasoning, classifying, identifying, and explaining information.",
+        profession: "Educational Services, Planning, Sales-related Services, Finance, and Management",
+    },
+    {
+        name: "SS",
+        title: "Self-development and Self-regulation Competency",
+        description: "The ability to understand one's own characteristics, aptitudes, and interests, to acquire necessary qualifications through self-management, to self-motivate, and to foster positive learning experiences for ongoing personal development.",
+        profession: "Safety Professions, Medical Professions, Environmental Professions",
+    },
+];
+export function OCIChart() {
+    const cellHeader = {
+        textStyles: "text-center text-white text-sm font-medium",
+        displays: "flex justify-center items-center",
+        spacings: "p-2",
+    };
+    const cellNormal = {
+        textStyles: "text-gray-dark",
+        displays: "flex justify-center items-center",
+    };
+    return (_jsx("div", { className: cn("overflow-auto w-full scrollbar-hidden rounded-lg mt-5 print:border print:border-gray-medium/70 cursor-default shadow-main print:shadow-none"), children: _jsxs("div", { className: "min-w-[172mm] w-full", children: [_jsxs("div", { className: "flex flex-row bg-gradient-to-r from-crimson-burgundy to-green-dark", children: [_jsx("div", { className: cn(cellHeader, "flex-[1] print:static sticky left-0 bg-crimson-burgundy"), children: "Category" }), _jsx("div", { className: cn(cellHeader, "flex-[5] p-2"), children: "Competency Category" }), _jsx("div", { className: cn(cellHeader, "flex-[2]"), children: "Professional Areas" })] }), ociDescription.map(({ description, profession, title }) => {
+                    return (_jsxs("div", { className: "flex flex-row text-sm bg-white odd:bg-gray-light", children: [_jsx("div", { className: cn(cellNormal, "flex-[1] print:static sticky left-0 border-r-1 p-2 border-crimson-burgundy backdrop-blur-md text-[10px]"), children: title }), _jsx("div", { className: cn(cellNormal, "flex-[5] text-xs p-2"), children: description }), _jsx("div", { className: cn(cellNormal, "flex-[2] text-xs p-2"), children: profession })] }));
+                })] }) }));
+}

package/layout/template/Transcript/design/molecule/RadarGraph.d.ts

@@ -0,0 +1,10 @@
+interface RadarGraphProps {
+    data: {
+        subject: string;
+        A: number;
+        B: number;
+        fullMark: number;
+    }[];
+}
+export declare function RadarGraph({ data }: RadarGraphProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/Transcript/design/molecule/RadarGraph.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer, } from "recharts";
+export function RadarGraph({ data }) {
+    return (_jsx("div", { className: "w-full aspect-square flex items-center justify-center relative", children: _jsx("div", { className: "absolute top-0 left-0 w-full", children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", aspect: 1, children: _jsxs(RadarChart, { cx: "50%", cy: "50%", outerRadius: "80%", data: data, width: 500, height: 500, children: [_jsx(PolarGrid, {}), _jsx(PolarAngleAxis, { dataKey: "subject" }), _jsx(PolarRadiusAxis, { angle: 30, domain: [0, 100] }), _jsx(Radar, { name: "My Score", dataKey: "A", stroke: "#105652", fill: "#105652", fillOpacity: 0.2 }), _jsx(Radar, { name: "Average", dataKey: "B", stroke: "#910023", fill: "#910023", fillOpacity: 0.1 })] }) }) }) }));
+}

package/layout/template/Transcript/design/organism/BarCardCol.js

@@ -18,13 +18,13 @@ export function BarCardCol({ section1, section2, theme }) {
         displays: "flex justify-center items-center align-center",
         spacings: "px-5",
         sizes: "w-full h-full",
-        textStyles: "text-sm break-keep",
+        textStyles: "break-keep leading-tight",
     };
     const subScriptStyles = {
         listStyles: "list-disc list-inside",
         sizes: "w-full",
         spacings: "p-5",
-        textStyles: "leading-tight text-xs",
+        textStyles: "leading-tight text-[10px]",
     };
-    return (_jsxs("div", { className: cn(cardWrapper, printBoxStyles), children: [_jsx(CardTitle, { title: "Grade and Average Score", theme: theme }), _jsxs("div", { className: "flex sm:flex-row flex-col sm:mt-0 mt-5", children: [_jsxs("div", { className: cn(SectionWrapper), children: [_jsx(BarGraph, { title: section1.title ? section1.title : "section1", score: section1.score, total: section1.total, subScore: section1.subScore, scale: section1.scale ? section1.scale : 10, theme: theme }), _jsx("div", { className: cn(ScriptStyles), children: section1.script }), _jsx("div", { className: cn(subScriptStyles), children: section1.subScripts?.map((text, index) => (_jsx("li", { children: text }, index))) })] }), _jsxs("div", { className: cn(SectionWrapper), children: [_jsx(BarGraph, { title: section2.title ? section2.title : "section2", score: section2.score, total: section2.total, subScore: section2.subScore, scale: section2.scale ? section2.scale : 10, theme: theme }), _jsx("div", { className: cn(ScriptStyles), children: section2.script }), _jsx("div", { className: cn(subScriptStyles), children: section2.subScripts?.map((text, index) => (_jsx("li", { children: text }, index))) })] })] })] }));
+    return (_jsxs("div", { className: cn(cardWrapper, printBoxStyles), children: [_jsx(CardTitle, { title: "Grade and Average Score", theme: theme }), _jsxs("div", { className: "flex sm:flex-row flex-col sm:mt-0 mt-5", children: [_jsxs("div", { className: cn(SectionWrapper), children: [_jsx(BarGraph, { title: section1.title ? section1.title : "section1", score: section1.score, total: section1.total, subScore: section1.subScore, scale: section1.scale ? section1.scale : 10, theme: theme }), _jsx("div", { className: cn(ScriptStyles, section1.subScripts ? "text-xs" : "text-sm"), children: section1.script }), _jsx("div", { className: cn(subScriptStyles), children: section1.subScripts?.map((text, index) => (_jsx("li", { children: text }, index))) })] }), _jsxs("div", { className: cn(SectionWrapper), children: [_jsx(BarGraph, { title: section2.title ? section2.title : "section2", score: section2.score, total: section2.total, subScore: section2.subScore, scale: section2.scale ? section2.scale : 10, theme: theme }), _jsx("div", { className: cn(ScriptStyles, section1.subScripts ? "text-xs" : "text-sm"), children: section2.script }), _jsx("div", { className: cn(subScriptStyles), children: section2.subScripts?.map((text, index) => (_jsx("li", { children: text }, index))) })] })] })] }));
 }

package/layout/template/Transcript/design/organism/OCICard.d.ts

@@ -0,0 +1,4 @@
+import { TranscriptAdvancedProps } from "../Transcript";
+export declare function OCICard({ data }: {
+    data: TranscriptAdvancedProps["oci"];
+}): import("react/jsx-runtime").JSX.Element;

package/layout/template/Transcript/design/organism/OCICard.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../../util";
+import { BarGraphDuo } from "../molecule/BarGraphDuo";
+export function OCICard({ data }) {
+    const cellHeader = {
+        textStyles: "text-center text-white text-sm font-medium",
+        displays: "flex justify-center items-center",
+        spacings: "p-2",
+    };
+    const cellNormal = {
+        textStyles: "text-center text-gray-dark",
+        displays: "flex justify-center items-center",
+    };
+    return (_jsx("div", { className: cn("overflow-auto w-full scrollbar-hidden rounded-lg mt-5 print:border print:border-gray-medium/70 cursor-default shadow-main print:shadow-none"), children: _jsxs("div", { className: "min-w-[172mm] w-full", children: [_jsxs("div", { className: "flex flex-row bg-gradient-to-r from-crimson-burgundy to-green-dark", children: [_jsx("div", { className: cn(cellHeader, "flex-[1] print:static sticky left-0 bg-crimson-burgundy"), children: "Rank" }), _jsx("div", { className: cn(cellHeader, "flex-[3]"), children: "Competency Category" }), _jsx("div", { className: cn(cellHeader, "flex-[1]"), children: "Index" }), _jsx("div", { className: cn(cellHeader, "flex-[4]"), children: "Graph" })] }), data.map(({ category, average, result }, key) => {
+                    return (_jsxs("div", { className: "flex flex-row text-sm bg-white", children: [_jsx("div", { className: cn(cellNormal, "flex-[1] print:static sticky left-0 border-r-1 px-1 border-crimson-burgundy bg-white/80 backdrop-blur-md"), children: key + 1 }), _jsx("div", { className: cn(cellNormal, "flex-[3] text-xs"), children: category }), _jsx("div", { className: cn(cellNormal, "flex-[1] text-base font-bold text-green-dark"), children: result }), _jsx("div", { className: cn(cellNormal, "flex-[4]"), children: _jsx(BarGraphDuo, { score: result, subScore: average, total: 100 }) })] }));
+                })] }) }));
+}

package/layout/template/Transcript/design/organism/RadarCard.d.ts

@@ -0,0 +1,7 @@
+import { Theme } from "../../interface";
+import { TranscriptAdvancedProps } from "../Transcript";
+export declare function RadarCard({ data, theme, title, }: {
+    data: TranscriptAdvancedProps["lswr"];
+    theme: Theme;
+    title?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/layout/template/Transcript/design/organism/RadarCard.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../../util";
+import CardTitle from "../atom/CardTitle";
+import { printBoxStyles } from "../atom/PrintBoxStyles";
+import { LSWRChart } from "../molecule/LSWRChart";
+import { RadarGraph } from "../molecule/RadarGraph";
+function prepareRadarChartData(averageLSWR, resultLSWR) {
+    return [
+        {
+            subject: "L",
+            A: resultLSWR.listening,
+            B: averageLSWR.listening,
+            fullMark: 100,
+            title: "Listening",
+            partIndicies: [1, 3, 4],
+        },
+        {
+            subject: "S",
+            A: resultLSWR.speaking,
+            B: averageLSWR.speaking,
+            fullMark: 100,
+            title: "Speaking",
+            partIndicies: [2],
+        },
+        {
+            subject: "R",
+            A: resultLSWR.reading,
+            B: averageLSWR.reading,
+            fullMark: 100,
+            title: "Reading",
+            partIndicies: [7, 8],
+        },
+        {
+            subject: "W",
+            A: resultLSWR.writing,
+            B: averageLSWR.writing,
+            fullMark: 100,
+            title: "Writing",
+            partIndicies: [5, 6],
+        },
+    ];
+}
+export function RadarCard({ data, theme, title, }) {
+    const cardWrapper = {
+        displays: "flex flex-col relative",
+        sizes: "w-full rounded-lg overflow-hidden",
+        backgrounds: "bg-white shadow-main",
+    };
+    const SectionWrapper = {
+        display: "flex flex-row items-center justify-center",
+        sizes: "w-full",
+    };
+    return (_jsxs("div", { className: "w-full h-fit flex flex-col-reverse md:flex-row gap-5 mt-5 print:flex-row", children: [_jsx("div", { className: cn(cardWrapper, printBoxStyles, "flex-[1]"), children: _jsx(LSWRChart, { data: prepareRadarChartData(data.average, data.result) }) }), _jsxs("div", { className: cn(cardWrapper, printBoxStyles, "flex-[1]"), children: [title && _jsx(CardTitle, { title: title, theme: theme }), _jsxs("div", { className: "flex flex-col p-5 h-full justify-center items-center", children: [_jsx("div", { className: cn(SectionWrapper), children: _jsx(RadarGraph, { data: prepareRadarChartData(data.average, data.result) }) }), _jsxs("div", { className: "w-full h-fit flex items-center justify-center gap-5", children: [_jsxs("div", { className: "flex flex-row justify-center items-center gap-2", children: [_jsx("div", { className: "rounded-full h-3 w-3 bg-green-dark" }), _jsx("div", { className: "text-green-dark text-xs", children: "My Score" })] }), _jsxs("div", { className: "flex flex-row justify-center items-center gap-2", children: [_jsx("div", { className: "rounded-full h-3 w-3 bg-crimson-burgundy" }), _jsx("div", { className: "text-crimson-burgundy text-xs", children: "Average" })] })] })] })] })] }));
+}

package/layout/template/Transcript/interface.d.ts

@@ -1,4 +1,5 @@
 export type Theme = "green" | "red";
+export type ScoreName = "Average" | "Your Score";
 export interface SectionBarProps {
     title: string;
     score: number;
@@ -8,3 +9,19 @@ export interface SectionBarProps {
     script: string | string[];
     subScripts?: string[];
 }
+export interface Score {
+    part1: number;
+    part2: number;
+    part3: number;
+    part4: number;
+    part5: number;
+    part6: number;
+    part7: number;
+    part8: number;
+}
+export interface LSWRPercent {
+    listening: number;
+    speaking: number;
+    writing: number;
+    reading: number;
+}

package/layout/template/home/layout/Footer.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import urlAsset from "../../../../asset/url";
 import { cn } from "../../../../util";
 export default function Footer() {
     const container = {
@@ -48,7 +49,7 @@ const buttons = [
     // },
     {
         title: "GLOBAL",
-        onClick: () => (window.location.href = "https://new.tosel.org/global"),
+        onClick: () => (window.location.href = urlAsset.homepage("/global")),
     },
     {
         title: "FAQ",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.207",
+  "version": "1.0.210",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",
@@ -14,6 +14,7 @@
   "type": "module",
   "scripts": {},
   "dependencies": {
+    "@edu-tosel/utils": "^0.0.30",
     "@gsap/react": "^2.1.1",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.1",

package/tailwind.config.ts

@@ -677,6 +677,11 @@ export default {
             "-ms-overflow-style": "none", // For Internet Explorer and Edge
             "scrollbar-width": "none", // For Firefox
           },
+          // ".page-break": {
+          //   "@media print": {
+          //     "page-break-before": "always",
+          //   },
+          // },
         },
         {
           respectPrefix: false,

package/version.txt

@@ -1 +1 @@
-1.0.207
+1.0.210