@edu-tosel/design 1.0.212 → 1.0.214

package/layout/template/Event/Event.d.ts

@@ -1,15 +1,29 @@
 import { Button as _Button } from "../../../interface";
-type EventCategory = "event" | "notice";
+export type EventCategory = "event" | "notice";
 export interface Event {
     id: number;
     category: EventCategory;
     thumbnail: string;
-    createdAt: string;
-    startedAt?: string;
-    expiredAt?: string;
-    endData?: string;
+    createdAt: number;
+    startedAt?: number;
+    expiredAt?: number;
+    endData?: number;
     title: string;
     content: string;
     button?: _Button;
 }
+interface EventButton extends _Button {
+    option?: {
+        background?: string;
+        text?: string;
+    };
+}
+interface EventElement {
+    tag: {
+        text: string;
+        style?: string;
+    };
+    button: EventButton;
+}
+export declare function convertEventElement(event: Event, diffTime?: string): EventElement;
 export {};

package/layout/template/Event/Event.js

@@ -1 +1,76 @@
-export {};
+import moment from "moment-timezone";
+import { toMoment } from "../../../util/moment";
+import { gradient } from "../../../util";
+export function convertEventElement(event, diffTime) {
+    const now = moment().tz("Asia/Seoul");
+    const startedAt = toMoment(event.startedAt);
+    const expiredAt = toMoment(event.expiredAt);
+    if (event.category === "notice") {
+        return {
+            tag: { text: "토셀 소식", style: "bg-blue-navy/10 text-blue-navy" },
+            button: {
+                title: "자세히 보기",
+                onClick: event.button?.onClick,
+                option: {
+                    background: "bg-green-light",
+                    text: "text-green-dark",
+                },
+            },
+        };
+    }
+    if (event.category === "event") {
+        if (now.isBefore(startedAt))
+            return {
+                tag: {
+                    text: "오픈예정",
+                    style: "bg-green-dark text-white",
+                },
+                button: {
+                    title: `오픈까지 ${diffTime}`,
+                    onClick: () => { },
+                    option: {
+                        background: "bg-gray-light",
+                        text: "text-green-dark",
+                    },
+                },
+            };
+    }
+    if (now.isAfter(startedAt) && now.isSameOrBefore(expiredAt))
+        return {
+            tag: {
+                text: `진행중 | D-${now.diff(expiredAt, "days")}`,
+                style: "bg-green-light text-green-dark",
+            },
+            button: {
+                title: event.button?.title ?? "참여하기",
+                onClick: event.button?.onClick,
+                option: {
+                    background: gradient.bg.greenToRed,
+                    text: "text-white",
+                },
+            },
+        };
+    if (now.isAfter(expiredAt))
+        return {
+            tag: { text: "마감", style: "bg-gray-light text-gray-medium" },
+            button: {
+                title: "이벤트가 마감되었어요",
+                onClick: () => { },
+                option: {
+                    background: "bg-gray-light",
+                    text: "text-gray-medium",
+                },
+            },
+        };
+    return {
+        tag: { text: "토셀 소식", style: "bg-blue-navy/10 text-blue-navy" },
+        button: {
+            title: "자세히 보기",
+            onClick: event.button?.onClick,
+            option: {
+                background: "bg-green-light",
+                text: "text-green-dark",
+            },
+        },
+    };
+}

package/layout/template/Event/One.js

@@ -1,5 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { isHTMLString } from "../../../util";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, isHTMLString } from "../../../util";
+import BannerMolecule from "./molecule/Banner";
 export default function One({ event }) {
-    return (_jsx("div", { children: isHTMLString(event.content) ? (_jsx("div", { dangerouslySetInnerHTML: { __html: event.content } })) : (_jsx("div", { children: event.content })) }));
+    const container = {
+        displays: "flex flex-col xl:flex-row gap-x-8  gap-y-5",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx(BannerMolecule, { event: event }), _jsx("div", { className: "w-full max-w-[796px]", children: isHTMLString(event.content) ? (_jsx("div", { dangerouslySetInnerHTML: { __html: event.content } })) : (_jsx("div", { children: event.content })) })] }));
 }

package/layout/template/Event/molecule/Banner.d.ts

@@ -0,0 +1,6 @@
+import { Event } from "../Event";
+interface BannerProps {
+    event: Event;
+}
+export default function BannerMolecule({ event }: BannerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/Event/molecule/Banner.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { LineBreaks } from "../../../../text";
+import { cn } from "../../../../util";
+import { Label } from "../../../../widget";
+import { convertEventElement } from "../Event";
+import moment from "moment-timezone";
+import { toDiffFromCurrent } from "../../../../util/moment";
+export default function BannerMolecule({ event }) {
+    const { thumbnail, title } = event;
+    const [currentTime, setCurrentTime] = useState(moment);
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setCurrentTime(moment.tz("Asia/Seoul"));
+        }, 1000);
+        return () => clearInterval(timer);
+    }, []);
+    const diffTime = toDiffFromCurrent(event.expiredAt, currentTime);
+    const { button } = convertEventElement(event, diffTime);
+    const container = {
+        positions: "relative",
+        displays: "flex flex-col sm:flex-row xl:flex-col xl:gap-5 justify-center xl:justify-start items-center xl:items-start",
+        sizes: "w-full xl:w-[320px]",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: "w-full max-w-[320px] sm:max-w-[352px] xl:max-w-max h-[200px] overflow-hidden bg-cover rounded-[12px]", children: _jsx("img", { src: thumbnail, className: "w-full h-full object-cover" }) }), _jsxs("div", { className: "flex flex-col gap-y-5 p-5 xl:p-0 w-full max-w-[320px] xl:max-w-full xl:w-full", children: [_jsxs("div", { className: "flex flex-col gap-y-3", children: [_jsx(Tag, { event: event }), _jsx(LineBreaks, { texts: title, className: "text-[16px] font-bold" })] }), _jsx(Label.Button, { title: button?.title, onClick: button?.onClick, option: {
+                            width: "full",
+                            background: button?.option?.background,
+                            text: [button?.option?.text, "font-bold"].join(" "),
+                        } })] })] }));
+}
+function Tag({ event }) {
+    const { tag } = convertEventElement(event);
+    const container = {
+        selfAligns: "self-start",
+        displays: "flex  items-center",
+        sizes: "h-[22px]",
+        paddings: "px-2",
+        texts: "leading-none text-[12px]",
+        boundaries: "rounded-[4px]",
+        styles: tag.style,
+    };
+    return _jsx("div", { className: cn(container), children: tag.text });
+}

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

@@ -21,6 +21,38 @@ export interface TranscriptProps {
         isHonor: boolean;
     };
     data: {
+        graph: {
+            user: {
+                section1: {
+                    partA: number;
+                    partB: number;
+                    partC: number;
+                    partD: number;
+                };
+                section2: {
+                    partA: number;
+                    partB: number;
+                    partC: number;
+                    partD: number;
+                };
+            };
+            average: {
+                user: {
+                    section1: {
+                        partA: number;
+                        partB: number;
+                        partC: number;
+                        partD: number;
+                    };
+                    section2: {
+                        partA: number;
+                        partB: number;
+                        partC: number;
+                        partD: number;
+                    };
+                };
+            };
+        };
         analysis: {
             total: {
                 section1: number;
@@ -50,6 +82,7 @@ export interface TranscriptProps {
             section1: string | string[];
             section2: string | string[];
         };
+        multipleIntelligence: MultipleIntelligenceRate;
     };
 }
 interface Score {
@@ -62,6 +95,21 @@ interface Score {
     part7: number;
     part8: number;
 }
+interface Score1 {
+    section1: {
+        partA: number;
+        partB: number;
+        partC: number;
+        partD: number;
+    };
+    section2: {
+        partA: number;
+        partB: number;
+        partC: number;
+        partD: number;
+    };
+    total: number;
+}
 interface LSWRPercent {
     listening: number;
     speaking: number;
@@ -122,4 +170,46 @@ export interface TranscriptAdvancedProps {
     oci: OccupationalCompetency[];
 }
 export declare const example: TranscriptAdvancedProps;
+interface MultipleIntelligenceRate {
+    musical: number;
+    bodilyKinesthetic: number;
+    logicalMathematical: number;
+    linguistic: number;
+    spatial: number;
+    interpersonal: number;
+    naturalist: number;
+    intrapersonal: number;
+}
+export interface TranscriptProps1 {
+    info: {
+        name: string;
+        nickname?: string;
+        imgSrc?: string;
+        qrSrc?: string;
+        sharedSrc?: string;
+        code: string;
+        birthday: string;
+        examName: string;
+        examDate: string;
+        examType: ExamType;
+        examValidAt: string;
+        level: Level;
+        gender: string;
+    };
+    result: {
+        score: number;
+        grade: number;
+        isHonor: boolean;
+        percentRank: number;
+    };
+    score: {
+        result: Score1;
+        average: Score1;
+        ageAverage: Score1;
+        examHallAverage: Score1;
+        percent10Average: Score1;
+        percent30Average: Score1;
+    };
+    multipleIntelligence: MultipleIntelligenceRate;
+}
 export {};

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

@@ -8,6 +8,9 @@ import ScoreCard from "./organism/ScoreCard";
 import HonorCard from "./organism/HonorCard";
 import ResultGaugeCard from "./organism/ResultGaugeCard";
 import PerformanceCard from "./organism/PerformanceCard";
+import { MIChart } from "./molecule/MIChart";
+import { IntelligenceCard } from "./organism/IntelligenceCard";
+import { SectionRadarCard } from "./organism/SectionRadarCard";
 export const EXAM_TYPE = {
     REG: "REG",
     CMP: "CMP",
@@ -38,7 +41,7 @@ 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: "images/logos/logo-tosel-white.svg", alt: "", className: "h-10" }), _jsxs("div", { className: "text-white font-bold text-base", children: [getStringfromType(info.examType), " \uC131\uC801\uD45C"] })] }), _jsx(IdCard, { info: info }), _jsxs("div", { className: "flex flex-col gap-5 xs:flex-row mt-5 items-stretch", children: [_jsx(ResultGaugeCard, { result: result, theme: "green" }), _jsx(HonorCard, { result: result })] }), _jsx(PerformanceCard, { data: data, info: info }), _jsx(ScoreCard, { data: data }), _jsx(BarCardRow, { section1: section1Data, section2: section2Data, theme: "green" })] }));
+    return (_jsxs("div", { ref: ref, className: cn(container), children: [_jsxs("div", { className: cn(headerBox), children: [_jsx("img", { src: "images/logos/logo-tosel-white.svg", alt: "", className: "h-10" }), _jsxs("div", { className: "text-white font-bold text-base", children: [getStringfromType(info.examType), " \uC131\uC801\uD45C"] })] }), _jsx(IdCard, { info: info }), _jsxs("div", { className: "flex flex-col gap-5 xs:flex-row mt-5 items-stretch", children: [_jsx(ResultGaugeCard, { result: result, theme: "green" }), _jsx(HonorCard, { result: result })] }), _jsx(PerformanceCard, { data: data, info: info }), _jsx(ScoreCard, { data: data }), _jsx(BarCardRow, { section1: section1Data, section2: section2Data, theme: "green" }), _jsx(SectionRadarCard, { data: data, section: "section1", info: info, theme: "red", title: "Section1" }), _jsx(IntelligenceCard, { data: data.multipleIntelligence, theme: "green" }), _jsx(MIChart, {})] }));
 }
 export default forwardRef(TranscriptDesign);
 function SectionBarGraphProps(title, score, total, script, subScripts, scale, subScore) {

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

@@ -58,4 +58,124 @@ export const example = {
         },
     ],
 };
-example.lswr.result.listening;
+const transcript = {
+    info: {
+        name: "김필립",
+        birthday: "1999-11-11",
+        code: "123456789012",
+        gender: "MAIL",
+        examDate: "2024-11-06",
+        examName: "제 12회 정기시험",
+        examType: "REG",
+        examValidAt: "2024-11-07",
+        level: "PS",
+    },
+    result: {
+        score: 90,
+        grade: 1,
+        isHonor: true,
+        percentRank: 0.1,
+    },
+    score: {
+        result: {
+            section1: {
+                partA: 1,
+                partB: 1,
+                partC: 1,
+                partD: 1,
+            },
+            section2: {
+                partA: 1,
+                partB: 1,
+                partC: 1,
+                partD: 1,
+            },
+            total: 11,
+        },
+        average: {
+            section1: {
+                partA: 2,
+                partB: 2,
+                partC: 2,
+                partD: 2,
+            },
+            section2: {
+                partA: 2,
+                partB: 2,
+                partC: 2,
+                partD: 2,
+            },
+            total: 22,
+        },
+        ageAverage: {
+            section1: {
+                partA: 3,
+                partB: 3,
+                partC: 3,
+                partD: 3,
+            },
+            section2: {
+                partA: 3,
+                partB: 3,
+                partC: 3,
+                partD: 3,
+            },
+            total: 33,
+        },
+        examHallAverage: {
+            section1: {
+                partA: 4,
+                partB: 4,
+                partC: 4,
+                partD: 4,
+            },
+            section2: {
+                partA: 4,
+                partB: 4,
+                partC: 4,
+                partD: 4,
+            },
+            total: 44,
+        },
+        percent10Average: {
+            section1: {
+                partA: 5,
+                partB: 5,
+                partC: 5,
+                partD: 5,
+            },
+            section2: {
+                partA: 5,
+                partB: 5,
+                partC: 5,
+                partD: 5,
+            },
+            total: 55,
+        },
+        percent30Average: {
+            section1: {
+                partA: 6,
+                partB: 6,
+                partC: 6,
+                partD: 6,
+            },
+            section2: {
+                partA: 6,
+                partB: 6,
+                partC: 6,
+                partD: 6,
+            },
+            total: 66,
+        },
+    },
+    multipleIntelligence: {
+        musical: 0.2,
+        bodilyKinesthetic: 0.2,
+        logicalMathematical: 0.428571,
+        linguistic: 0.2,
+        spatial: 0.285714,
+        interpersonal: 0.428571,
+        naturalist: 0.375,
+        intrapersonal: 0.166667,
+    },
+};

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

@@ -39,10 +39,6 @@ function TranscriptDesign({ props }, ref) {
         spacings: "px-5 py-2",
         backgrounds: "bg-gradient-to-r from-crimson-burgundy to-green-dark",
     };
-    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) {

package/layout/template/Transcript/design/atom/GetPartDescriptionFromLevel.d.ts

@@ -0,0 +1,3 @@
+import { Level } from "../../../../../_test/interface";
+import { PartPercent, SectionType } from "../../interface";
+export declare function GetPartTitleFromLevel(level: Level, section: SectionType, part: keyof PartPercent): string;

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

@@ -0,0 +1,4 @@
+import { LevelToPartDescriptionMap } from "./LevelToPartDescriptionMap";
+export function GetPartTitleFromLevel(level, section, part) {
+    return LevelToPartDescriptionMap[level]?.[section]?.[part] || "Unknown";
+}

package/layout/template/Transcript/design/atom/GetPartTitleFromLevel.d.ts

@@ -0,0 +1,3 @@
+import { Level } from "../../../../../_test/interface";
+import { PartPercent, SectionType } from "../../interface";
+export declare function GetPartDescriptionFromLevel(level: Level, section: SectionType, part: keyof PartPercent): string;

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

@@ -0,0 +1,4 @@
+import { LevelToPartTitleMap } from "./LevelToPartTitleMap";
+export function GetPartDescriptionFromLevel(level, section, part) {
+    return LevelToPartTitleMap[level]?.[section]?.[part] || "Unknown";
+}

package/layout/template/Transcript/design/atom/LevelToPartDescriptionMap.d.ts

@@ -0,0 +1,6 @@
+import { Level } from "../../../../../_test/interface";
+import { partText } from "../../interface";
+export declare const LevelToPartDescriptionMap: Record<Level, {
+    section1: partText;
+    section2: partText;
+}>;

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

@@ -0,0 +1,95 @@
+export const LevelToPartDescriptionMap = {
+    CO: {
+        section1: {
+            partA: "Listen and Recognize",
+            partB: "Listen and Respond",
+            partC: "Listen and Retell",
+        },
+        section2: {
+            partA: "Spell the Words",
+            partB: "Look and Recognize",
+            partC: "Look and Respond",
+            partD: "Read and Retell",
+        },
+    },
+    PS: {
+        section1: {
+            partA: "Listen and Recognize",
+            partB: "Listen and Respond",
+            partC: "Listen and Retell",
+        },
+        section2: {
+            partA: "Spell the Words",
+            partB: "Look and Recognize",
+            partC: "Look and Respond",
+            partD: "Read and Retell",
+        },
+    },
+    ST: {
+        section1: {
+            partA: "Listen and Recognize",
+            partB: "Listen and Respond",
+            partC: "Listen and Retell",
+        },
+        section2: {
+            partA: "Sentence Completion",
+            partB: "Situational Writing",
+            partC: "Reading and Retelling",
+        },
+    },
+    BA: {
+        section1: {
+            partA: "Listen and Recognize",
+            partB: "Listen and Respond",
+            partC: "Listen and Retell",
+            partD: "Listen and Speak",
+        },
+        section2: {
+            partA: "Sentence Completion",
+            partB: "Situational Writing",
+            partC: "Practical Reading and Retelling",
+            partD: "General Reading and Retelling",
+        },
+    },
+    JR: {
+        section1: {
+            partA: "Listen and Respond",
+            partB: "Listen and Retell",
+            partC: "Listen and Speak",
+        },
+        section2: {
+            partA: "Sentence Completion",
+            partB: "Situational Writing",
+            partC: "Practical Reading and Retelling",
+            partD: "General Reading and Retelling",
+        },
+    },
+    HJ: {
+        section1: {
+            partA: "Listen and Recognize",
+            partB: "Listen and Respond",
+            partC: "Short Conversations",
+            partD: "Talks",
+        },
+        section2: {
+            partA: "Picture Description",
+            partB: "Sentence Completion",
+            partC: "Practical Reading and Comprehension",
+            partD: "General Reading and Comprehension",
+        },
+    },
+    AD: {
+        section1: {
+            partA: "Listen and Recognize",
+            partB: "Listen and Respond",
+            partC: "Short Conversations",
+            partD: "Talks",
+        },
+        section2: {
+            partA: "Picture Description",
+            partB: "Sentence Completion",
+            partC: "Practical Reading and Comprehension",
+            partD: "General Reading and Comprehension",
+        },
+    },
+};

package/layout/template/Transcript/design/atom/LevelToPartTitleMap.d.ts

@@ -0,0 +1,6 @@
+import { Level } from "../../../../../_test/interface";
+import { partText } from "../../interface";
+export declare const LevelToPartTitleMap: Record<Level, {
+    section1: partText;
+    section2: partText;
+}>;

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

@@ -0,0 +1,95 @@
+export const LevelToPartTitleMap = {
+    CO: {
+        section1: {
+            partA: "Listen and Recognize",
+            partB: "Listen and Respond",
+            partC: "Listen and Retell",
+        },
+        section2: {
+            partA: "Spell the Words",
+            partB: "Look and Recognize",
+            partC: "Look and Respond",
+            partD: "Read and Retell",
+        },
+    },
+    PS: {
+        section1: {
+            partA: "Listen and Recognize",
+            partB: "Listen and Respond",
+            partC: "Listen and Retell",
+        },
+        section2: {
+            partA: "Spell the Words",
+            partB: "Look and Recognize",
+            partC: "Look and Respond",
+            partD: "Read and Retell",
+        },
+    },
+    ST: {
+        section1: {
+            partA: "Listen and Recognize",
+            partB: "Listen and Respond",
+            partC: "Listen and Retell",
+        },
+        section2: {
+            partA: "Sentence Completion",
+            partB: "Situational Writing",
+            partC: "Reading and Retelling",
+        },
+    },
+    BA: {
+        section1: {
+            partA: "Listen and Recognize",
+            partB: "Listen and Respond",
+            partC: "Listen and Retell",
+            partD: "Listen and Speak",
+        },
+        section2: {
+            partA: "Sentence Completion",
+            partB: "Situational Writing",
+            partC: "Practical Reading and Retelling",
+            partD: "General Reading and Retelling",
+        },
+    },
+    JR: {
+        section1: {
+            partA: "Listen and Respond",
+            partB: "Listen and Retell",
+            partC: "Listen and Speak",
+        },
+        section2: {
+            partA: "Sentence Completion",
+            partB: "Situational Writing",
+            partC: "Practical Reading and Retelling",
+            partD: "General Reading and Retelling",
+        },
+    },
+    HJ: {
+        section1: {
+            partA: "Listen and Recognize",
+            partB: "Listen and Respond",
+            partC: "Short Conversations",
+            partD: "Talks",
+        },
+        section2: {
+            partA: "Picture Description",
+            partB: "Sentence Completion",
+            partC: "Practical Reading and Comprehension",
+            partD: "General Reading and Comprehension",
+        },
+    },
+    AD: {
+        section1: {
+            partA: "Listen and Recognize",
+            partB: "Listen and Respond",
+            partC: "Short Conversations",
+            partD: "Talks",
+        },
+        section2: {
+            partA: "Picture Description",
+            partB: "Sentence Completion",
+            partC: "Practical Reading and Comprehension",
+            partD: "General Reading and Comprehension",
+        },
+    },
+};