@edu-tosel/design 1.0.143 → 1.0.145

package/_test/asset/sample.d.ts

@@ -0,0 +1,2 @@
+import { Exam } from "../../layout/template/Legacy/Exam";
+export declare const exams: Exam[];

package/_test/asset/sample.js

@@ -0,0 +1,84 @@
+// sampleData.tsx
+// 샘플 데이터 정의
+export const exams = [
+    {
+        examNo: "2025",
+        examName: "테스트 기관시험",
+        reports: [
+            {
+                name: "박민형",
+                level: "10",
+                url: "https://www.tosel.org/admin/grade/gradeSpecialTableAdmin_n?receipt_no=000000000001&gradeturn=2025&gradelevel=10&area=3&birthday=2020-03-16&rqtype=",
+                birthday: "2015-07-28",
+            },
+            {
+                name: "탄단지",
+                level: "6",
+                url: "https://www.tosel.org/admin/grade/gradeSpecialTableAdmin_n?receipt_no=000000000001&gradeturn=2025&gradelevel=10&area=3&birthday=2020-03-16&rqtype=",
+                birthday: "2015-05-11",
+            },
+        ],
+        groupReport: "https://ai.tosel.co.kr/grade/print?receipt_no=580040100001,580040100002,580040100003,580040100004,580040100005,580040100006,580040050001,580040050002,580040040001,580040050003,580040100007&gradeturn=1331",
+    },
+    {
+        examNo: "216",
+        examName: "토셀 제 53회 정기시험",
+        reports: [
+            {
+                name: "김하늘",
+                level: "6",
+                url: "https://ai.tosel.co.kr/grade/?receipt_no=101001069999&gradeturn=216",
+                birthday: "2015-07-15",
+            },
+        ],
+        groupReport: "https://ai.tosel.co.kr/grade/print?receipt_no=580040100001,580040100002,580040100003,580040100004,580040100005,580040100006,580040050001,580040050002,580040040001,580040050003,580040100007&gradeturn=1331",
+    },
+    {
+        examNo: "217",
+        examName: "토셀 제 54회 정기시험",
+        reports: [
+            {
+                name: "이수민",
+                level: "4",
+                url: "https://ai.tosel.co.kr/grade/?receipt_no=101001070000&gradeturn=217",
+                birthday: "2015-07-28",
+            },
+            {
+                name: "최지원",
+                level: "3",
+                url: "https://ai.tosel.co.kr/grade/?receipt_no=101001070001&gradeturn=217",
+                birthday: "2015-07-28",
+            },
+            {
+                name: "최지원",
+                level: "3",
+                url: "https://ai.tosel.co.kr/grade/?receipt_no=101001070001&gradeturn=217",
+                birthday: "2015-07-28",
+            },
+        ],
+    },
+    {
+        examNo: "219",
+        examName: "토셀 제 52회 정기시험",
+        reports: [
+            {
+                name: "이수민",
+                level: "4",
+                url: "https://ai.tosel.co.kr/grade/?receipt_no=101001070000&gradeturn=217",
+                birthday: "2015-07-28",
+            },
+            {
+                name: "최지원",
+                level: "3",
+                url: "https://ai.tosel.co.kr/grade/?receipt_no=101001070001&gradeturn=217",
+                birthday: "2015-07-28",
+            },
+            {
+                name: "유남생",
+                level: "3",
+                url: "https://ai.tosel.co.kr/grade/?receipt_no=101001070001&gradeturn=217",
+                birthday: "2015-07-28",
+            },
+        ],
+    },
+];

package/layout/index.d.ts

@@ -7,6 +7,7 @@ export * from "./template/dashboard";
 export { default as Event } from "./template/Event";
 export { default as Olympiad } from "./template/Olympiad";
 export { default as Regexam } from "./template/Regexam";
+export { default as Legacy } from "./template/Legacy";
 export { default as Sign } from "./template/Sign";
 export { default as DataField } from "./template/DataField";
 export { default as Gallery } from "./template/Gallery";
@@ -17,3 +18,4 @@ export { default as TextBox } from "./template/TextBox";
 export { default as OlympiadLayout } from "./template/Olympiad/Olympiad.layout";
 export { default as Gomito } from "./template/Gomito";
 export { default as RegexamLayout } from "./template/Regexam/Regexam.layout";
+export { default as LegacyLayout } from "./template/Legacy/Legacy.layout";

package/layout/index.js

@@ -7,6 +7,7 @@ export * from "./template/dashboard";
 export { default as Event } from "./template/Event";
 export { default as Olympiad } from "./template/Olympiad";
 export { default as Regexam } from "./template/Regexam";
+export { default as Legacy } from "./template/Legacy";
 export { default as Sign } from "./template/Sign";
 export { default as DataField } from "./template/DataField";
 export { default as Gallery } from "./template/Gallery";
@@ -17,3 +18,4 @@ export { default as TextBox } from "./template/TextBox";
 export { default as OlympiadLayout } from "./template/Olympiad/Olympiad.layout";
 export { default as Gomito } from "./template/Gomito";
 export { default as RegexamLayout } from "./template/Regexam/Regexam.layout";
+export { default as LegacyLayout } from "./template/Legacy/Legacy.layout";

package/layout/template/Legacy/Exam.d.ts

@@ -0,0 +1,11 @@
+export interface Exam {
+    examNo: string;
+    examName: string;
+    reports: {
+        name: string;
+        level: string;
+        url: string;
+        birthday: string;
+    }[];
+    groupReport?: string;
+}

package/layout/template/Legacy/Exam.js

@@ -0,0 +1 @@
+export {};

package/layout/template/Legacy/Legacy.layout.d.ts

@@ -0,0 +1,4 @@
+import { Exam } from "./Exam";
+export default function LegacyLayout({ exams }: {
+    exams: Exam[];
+}): import("react/jsx-runtime").JSX.Element;

package/layout/template/Legacy/Legacy.layout.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import Legacy from ".";
+import { cn } from "../../../util";
+export default function LegacyLayout({ exams }) {
+    const ref = useRef(null);
+    const pageWrapper = {
+        backgrounds: "bg-[#f6f6f6]/50",
+        displays: "flex justify-center items-center",
+        sizes: "h-full",
+    };
+    return (_jsx("div", { className: cn(pageWrapper), children: _jsx(Legacy.Table, { exams: exams }) }));
+}

package/layout/template/Legacy/Table.d.ts

@@ -0,0 +1,4 @@
+import { Exam } from "./Exam";
+export default function Table({ exams }: {
+    exams: Exam[];
+}): import("react/jsx-runtime").JSX.Element;

package/layout/template/Legacy/Table.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+import Action from "../Action";
+import { useState } from "react";
+export default function Table({ exams }) {
+    const container = {
+        textstyling: "font-pretendard-var antialiased relative",
+        backgrounds: "text-gray-medium",
+        sizes: "w-screen h-screen scrollbar-hidden max-w-[480px] overflow-y-auto",
+        displays: "flex flex-col",
+    };
+    const inputBoxWrapper = {
+        displays: "flex",
+        spacings: "p-0",
+        scroll: "sticky top-10",
+    };
+    const inputBox = {
+        sizes: "w-full h-fit p-3 rounded-lg mx-10 focus:mx-5",
+        focus: "outline-none focus:shadow-main",
+        backgrounds: "bg-green-light/50 text-green-dark backdrop-blur-sm",
+        animations: "duration-300 appearance-none",
+        placeholder: "placeholder-green-dark/50",
+    };
+    const titleWrapper = {
+        displays: "flex flex-col justify-center items-center",
+    };
+    const mainTitle = {
+        sizes: "w-full h-fit",
+        textstyles: "text-green-dark text-center font-bold text-md",
+    };
+    const subTitle = {
+        sizes: "w-full h-fit",
+        textstyles: "text-gray-medium text-center font-medium text-sm",
+    };
+    const examsWrapper = {
+        displays: "flex flex-col gap-6 mt-15",
+        spacings: "px-5 mb-6",
+    };
+    const filter = (exams, str) => exams.filter((exam) => {
+        return exam.examName.includes(str);
+    });
+    const [filterKey, setFilterKey] = useState("");
+    const filteredExam = filter(exams, filterKey);
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(inputBoxWrapper), children: _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(examsWrapper), children: [_jsxs("div", { className: cn(titleWrapper), 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(Action.Replace, { actions: [
+                            [
+                                filteredExam.length === 0,
+                                _jsx("div", { className: "w-full text-center", children: "\uC870\uD68C \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }),
+                            ],
+                        ], children: filteredExam.map((exam) => (_jsx(Row, { examName: exam.examName, examNo: exam.examNo, reports: exam.reports.map((report) => ({
+                                ...report,
+                                level: LevelConvert[report.level],
+                            })), groupReport: exam.groupReport }))) })] })] }));
+}
+const LevelConvert = {
+    10: "PS",
+    5: "ST",
+    4: "BA",
+    3: "JR",
+    6: "HJ",
+};
+const TextColorConvert = {
+    PS: "text-ps-pink",
+    ST: "text-st-orange",
+    BA: "text-ba-yellow",
+    JR: "text-jr-blue",
+    HJ: "text-hj-blue",
+    AD: "text-gray-dark",
+    CC: "text-gray-dark",
+    IN: "text-gray-dark",
+};
+function Row({ examName, reports, groupReport }) {
+    const examWrapper = {
+        displays: "flex flex-col",
+        backgrounds: "bg-white",
+        spacings: "p-5",
+        sizes: "rounded-2xl",
+        shadows: "hover:shadow-main",
+        animations: "duration-300",
+    };
+    const examTitle = {
+        textStyling: "font-medium",
+    };
+    const divider = {
+        sizes: "w-full h-0.5 mt-1 mb-5",
+        backgrounds: "bg-gray-light",
+    };
+    const groupButton = {
+        sizes: "w-full h-10 rounded-lg",
+        displays: "flex justify-center items-center",
+        backgrounds: "bg-gray-light/50",
+        spacings: "mt-4",
+    };
+    const groupText = {
+        textStyles: "text-sm",
+    };
+    const tableWrapper = {
+        displays: "flex flex-col",
+        spacings: "gap-4",
+    };
+    const rowWrapper = {
+        displays: "flex flex-row justify-between w-full font-medium",
+    };
+    const textWrapper = {
+        displays: "flex flex-row gap-2",
+        sizes: "w-fit h-fit",
+    };
+    const levelTag = {
+        textStyling: "font-bold",
+        sizes: "w-fit h-fit",
+        spacings: "px-2 rounded-md",
+        backgrounds: "bg-[#f6f6f6]/50",
+    };
+    const button = {
+        sizes: "w-fit h-fit",
+        spacings: "px-2 py-1 rounded-md",
+        textstyles: "text-xs",
+        backgrounds: "bg-green-light/50",
+        shadows: "hover:shadow-main",
+    };
+    return (_jsxs("div", { className: cn(examWrapper), children: [_jsx("div", { className: cn(examTitle), children: examName }), _jsx("div", { className: cn(divider) }), _jsx("div", { className: cn(tableWrapper), children: reports.map((report) => (_jsxs("div", { className: cn(rowWrapper), children: [_jsxs("div", { className: cn(textWrapper), children: [_jsx("p", { className: "font-bold", children: report.name }), _jsx("div", { className: cn(levelTag), children: _jsx("p", { className: cn(TextColorConvert[report.level]), children: report.level }) })] }), _jsx("a", { href: report.url, target: "_blank", rel: "noopener noreferrer", children: _jsx("div", { className: cn(button), children: "\uC131\uC801\uD45C" }) })] }, report.name + report.level))) }), groupReport && (_jsx("a", { href: groupReport, children: _jsx("div", { className: cn(groupButton), children: _jsx("div", { className: cn(groupText), children: "\uB2E8\uCCB4 \uC131\uC801\uD45C \uBCF4\uAE30" }) }) }))] }));
+}

package/layout/template/Legacy/index.d.ts

@@ -0,0 +1,7 @@
+import LegacyLayout from "./Legacy.layout";
+import Table from "./Table";
+declare const Legacy: {
+    Table: typeof Table;
+    Layout: typeof LegacyLayout;
+};
+export default Legacy;

package/layout/template/Legacy/index.js

@@ -0,0 +1,7 @@
+import LegacyLayout from "./Legacy.layout";
+import Table from "./Table";
+const Legacy = {
+    Table,
+    Layout: LegacyLayout,
+};
+export default Legacy;

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.143
+1.0.145