@edu-tosel/design 1.0.147 → 1.0.149

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

@@ -1,11 +1,15 @@
 export interface LegacyExam {
     examNo: string;
     examName: string;
+    examDate: string;
     reports: {
         name: string;
         level: string;
         url: string;
         birthday: string;
+        section1: number;
+        section2: number;
+        grade: number;
     }[];
     groupReport?: string;
 }

package/layout/template/Legacy/Integrate.js

@@ -22,7 +22,7 @@ export default function Integrate({ isLoading, isUser, usernameState: [oldUserna
                                         "토셀 사이트가 리뉴얼되었습니다.",
                                         "2024.08.26까지 사용하던 계정(구 tosel.org) 연동으로",
                                         "이전 시험 데이터를 확인하세요!",
-                                    ], className: "text-xs md:text-sm" }) })] }), _jsx(Input.Form, { title: "\uC544\uC774\uB514/\uB2E8\uCCB4\uCF54\uB4DC (\uAD6C \uC0AC\uC774\uD2B8)", state: [oldUsername, setUsername], option: {
+                                    ], className: "text-xs md:text-sm" }) })] }), _jsx(Input.Form, { title: "\uC544\uC774\uB514 \uB610\uB294 \uB2E8\uCCB4\uCF54\uB4DC (\uAD6C \uC0AC\uC774\uD2B8)", state: [oldUsername, setUsername], option: {
                             text: "text-green-dark",
                         } }), _jsx(Input.Form, { title: "\uBE44\uBC00\uBC88\uD638", type: "password", state: [oldPassword, setPassword], onKeyDown: (e) => {
                             if (oldUsername && oldPassword && e.key === "Enter") {

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

@@ -7,7 +7,7 @@ export default function LegacyLayout({ exams }) {
     const pageWrapper = {
         backgrounds: "bg-[#f6f6f6]/50",
         displays: "flex justify-center items-center",
-        sizes: "h-full",
+        sizes: "h-screen",
     };
     return (_jsx("div", { className: cn(pageWrapper), children: _jsx(Legacy.Table, { exams: exams }) }));
 }

package/layout/template/Legacy/Table.js

@@ -4,54 +4,114 @@ import Action from "../Action";
 import { useState } from "react";
 export default function Table({ exams }) {
     const container = {
+        displays: "flex flex-col lg:flex-row gap-x-16",
+    };
+    const cardDeckWrapper = {
+        displays: "relative flex h-screen lg:h-fit",
+    };
+    //페이지 제목 스타일링
+    const titleWrapperMobile = {
+        displays: "flex flex-col justify-center items-center lg:hidden",
+    };
+    const titleWrapperWeb = {
+        displays: "flex flex-col justify-center items-center ",
+        sizes: "w-full",
+    };
+    const mainTitle = {
+        sizes: "w-full h-fit",
+        textstyles: "text-green-dark text-center font-bold text-md",
+        responsive: "lg:text-2xl lg:text-left",
+    };
+    const subTitle = {
+        sizes: "w-full h-fit",
+        textstyles: "text-gray-medium text-center font-medium text-sm",
+        responsive: "lg:text-base lg:text-left",
+    };
+    //퀵메뉴 버튼
+    const buttonSetWrapper = {
+        display: "flex flex-col mt-12 w-full gap-2",
+    };
+    const buttonSet = {
+        sizes: "w-full h-fit select-none",
+        display: "flex flex-row gap-4",
+    };
+    const linkButton = {
+        sizes: "w-fit h-fit rounded-md",
+        spaces: "px-4 py-2",
+        backgrounds: "bg-gray-light ",
+        textstyles: "",
+        hoveractions: "hover:bg-green-dark hover:text-white hover:shadow-green",
+        animations: "duration-300",
+    };
+    //스크롤 액션 조절
+    const scrollWrapper = {
         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",
+        sizes: "w-screen h-screen scrollbar-hidden max-w-[480px] lg:max-h-[700px] overflow-y-auto",
+        displays: "flex flex-col select-none ",
+    };
+    //인풋 박스 간격 스타일링
+    const inputBoxWrapperWeb = {
+        displays: "hidden lg:flex justify-center items-center flex flex-col gap-10",
+        spacings: "p-0 w-100",
     };
-    const inputBoxWrapper = {
-        displays: "flex",
+    const inputBoxWrapperMobile = {
+        displays: "flex lg:hidden",
         spacings: "p-0",
-        scroll: "sticky top-10",
+        scroll: "sticky top-6",
     };
+    // 인풋 박스 요소 스타일링
     const inputBox = {
-        sizes: "w-full h-fit p-3 rounded-lg mx-10 focus:mx-5",
+        sizes: "w-full h-fit p-3 rounded-lg mx-8 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 scrollBlurTop = {
+        displays: "absolute top-0",
+        backgrounds: "bg-gradient-to-b from-[#fafafa] to-[#f6f6f6]/0",
+        sizes: "w-full h-20",
     };
-    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 scrollBlurBottom = {
+        displays: "absolute bottom-0",
+        backgrounds: "bg-gradient-to-t from-[#fafafa] to-[#f6f6f6]/0",
+        sizes: "w-full h-20",
     };
+    //시험카드 간격조절
     const examsWrapper = {
-        displays: "flex flex-col gap-6 mt-15",
-        spacings: "px-5 mb-6",
+        displays: "flex flex-col gap-4 mt-24",
+        spacings: "px-5 mb-24",
     };
     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 noResultWrapper = {
+        displays: "flex flex-col justify-center items-center",
+        sizes: "w-full h-fit",
+    };
+    const noResultImg = {
+        spacings: "p-10",
+        sizes: "w-full max-w-80",
+    };
+    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: [
+                                        [
+                                            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" })] }),
+                                        ],
+                                    ], children: [_jsx("div", { className: "text-center font-medium text-sm mt-3 text-green-dark", children: "\uCE74\uB4DC\uB97C \uB20C\uB7EC \uD3BC\uCCD0\uBCFC \uC218 \uC788\uC5B4\uC694" }), filteredExam.map((exam) => (_jsx(Row, { examName: exam.examName, examNo: exam.examNo, examDate: exam.examDate, reports: exam.reports.map((report) => ({
+                                                ...report,
+                                                level: LevelConvert[report.level],
+                                            })), groupReport: exam.groupReport })))] })] }) }), _jsx("div", { className: cn(scrollBlurTop), children: _jsx("div", { className: cn(inputBoxWrapperMobile), 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" }) }) }), _jsx("div", { className: cn(scrollBlurBottom) })] })] }));
 }
 const LevelConvert = {
     10: "PS",
@@ -70,54 +130,80 @@ const TextColorConvert = {
     CC: "text-gray-dark",
     IN: "text-gray-dark",
 };
-function Row({ examName, reports, groupReport }) {
+function Row({ examName, examDate, reports, groupReport }) {
+    const [isTableVisible, setIsTableVisible] = useState(false);
     const examWrapper = {
         displays: "flex flex-col",
         backgrounds: "bg-white",
         spacings: "p-5",
-        sizes: "rounded-2xl",
-        shadows: "hover:shadow-main",
-        animations: "duration-300",
+        sizes: "rounded-xl",
+        shadows: "hover:shadow-green",
+        animations: "duration-300 hover:scale-105",
+        cursor: "cursor-pointer",
+    };
+    const titleWrapper = {
+        displays: "flex flex-col gap-1 mb-2",
+        cursor: "cursor-default",
     };
     const examTitle = {
-        textStyling: "font-medium",
+        textStyling: "font-bold text-md leading-none",
+    };
+    const subTitle = {
+        textStyling: "font-medium text-xs",
     };
     const divider = {
-        sizes: "w-full h-0.5 mt-1 mb-5",
+        sizes: "w-full h-0.5 mt-1 ",
         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",
+        displays: isTableVisible ? "flex flex-col" : "hidden",
         spacings: "gap-4",
     };
     const rowWrapper = {
         displays: "flex flex-row justify-between w-full font-medium",
     };
-    const textWrapper = {
+    const leftWrapper = {
         displays: "flex flex-row gap-2",
         sizes: "w-fit h-fit",
     };
+    const textWrapper = {
+        displays: "flex flex-col w-fit h-fit",
+    };
     const levelTag = {
         textStyling: "font-bold",
         sizes: "w-fit h-fit",
         spacings: "px-2 rounded-md",
         backgrounds: "bg-[#f6f6f6]/50",
     };
+    const rightWrapper = {
+        displays: "flex flex-row",
+    };
+    //성적 태그
+    const scoreTag = {
+        sizes: "w-fit h-fit",
+        spacings: "px-2 py-1 rounded-md",
+        textstyles: "text-xs",
+        responsivity: "hidden lg:block",
+    };
+    //개인성적표 조회 버튼
     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" }) }) }))] }));
+    //단체성적표 조회 버튼
+    const groupButton = {
+        sizes: "w-full h-10 rounded-lg",
+        displays: "flex justify-center items-center",
+        backgrounds: "bg-gray-light/50",
+        hoveractions: "hover:bg-green-dark hover:text-white",
+        animations: "duration-300",
+    };
+    const groupText = {
+        textStyles: "text-sm",
+    };
+    return (_jsxs("div", { className: cn(examWrapper), onClick: () => {
+            setIsTableVisible(!isTableVisible);
+        }, children: [_jsxs("div", { className: cn(titleWrapper), children: [_jsx("div", { className: cn(examTitle), children: examName }), _jsx("div", { className: cn(subTitle), children: examDate })] }), isTableVisible && (_jsxs("div", { className: cn(tableWrapper), children: [_jsx("div", { className: cn(divider) }), reports.map((report) => (_jsxs("div", { className: cn(rowWrapper), children: [_jsxs("div", { className: cn(leftWrapper), children: [_jsx("div", { className: cn(levelTag), children: _jsx("p", { className: cn(TextColorConvert[report.level]), children: report.level }) }), _jsxs("div", { className: cn(textWrapper), children: [_jsx("p", { className: "font-medium", children: report.name }), _jsx("p", { className: "font-medium text-xs", children: report.birthday })] })] }), _jsxs("div", { className: cn(rightWrapper), children: [_jsx("div", { className: cn(scoreTag), children: report.section1 }), _jsx("div", { className: cn(scoreTag), children: report.section2 }), _jsx("div", { className: "h-full text-lg font-bold text-green-dark/50 mx-4", children: report.section1 + report.section2 }), _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, className: "mt-4", children: _jsx("div", { className: cn(groupButton), children: _jsx("div", { className: cn(groupText), children: "\uB2E8\uCCB4 \uC131\uC801\uD45C \uBCF4\uAE30" }) }) }))] }));
 }

package/layout/template/home/layout/Carousel.js

@@ -86,8 +86,8 @@ export default function Carousel({ contents, }) {
         paddings: "px-1.5 mt-0 mb-5 md:mt-12 ",
     };
     const buttonBoxPosition = {
-        display: "absolute flex justify-center items-center md:static md:justify-start",
+        display: "absolute flex justify-center items-center md:static md:justify-start ",
         sizes: "w-full h-fit left-0 bottom-0 z-10",
     };
-    return (_jsx("div", { onClick: contents[index].onClick, className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "duration-500 w-fit h-fit flex flex-col mt-4 xxs:mt-8 xxs:flex-row xxs:gap-8 md:flex-col md:flex-none md:w-72 md:pl-7.5 md:gap-6 md:mt-0", children: [_jsxs("div", { className: cn(titleSet), children: [_jsx("div", { className: cn(tagBox), children: tagString[tag.type] }), _jsx("div", { className: "font-pretendard-bold text-xl md:text-2xl", children: titles.title })] }), _jsx(LineBreaks, { className: "w-fit flex flex-col justify-center text-sm my-2 xxs:mt-0 md:text-base", texts: titles.subtitle }), _jsx("div", { className: cn(buttonBoxPosition), children: _jsxs("div", { className: cn(buttonBox), children: [_jsx("button", { onClick: handlePrev, className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.LessThan, {}) }), _jsxs("div", { className: "flex flex-row md:gap-2 gap-4 justify-center items-center", children: [_jsx("div", { className: "text-white w-2 text-sm", children: index + 1 }), _jsx("div", { className: "w-0.5 h-3 bg-gray-medium" }), _jsx("div", { className: "text-white w-2 text-sm", children: contents.length })] }), _jsx("button", { onClick: handleNext, className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.GreaterThan, {}) })] }) })] }), _jsx("div", { className: "h-full overflow-hidden w-fit", children: image && (_jsx(animated.img, { src: image, alt: "carousel-image", onLoad: () => setLoaded(true), className: "object-cover h-full z-0", style: transitionStyles })) })] }) }));
+    return (_jsx("div", { onClick: contents[index].onClick, className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "duration-500 w-fit h-fit flex flex-col mt-4 xxs:mt-8 xxs:flex-row xxs:gap-8 md:flex-col md:flex-none md:w-72 md:pl-7.5 md:gap-6 md:mt-0", children: [_jsxs("div", { className: cn(titleSet), children: [_jsx("div", { className: cn(tagBox), children: tagString[tag.type] }), _jsx("div", { className: "font-pretendard-bold text-xl md:text-2xl", children: titles.title })] }), _jsx(LineBreaks, { className: "w-fit flex flex-col justify-center text-sm my-2 xxs:mt-0 md:text-base", texts: titles.subtitle }), _jsx("div", { className: cn(buttonBoxPosition), onClick: (e) => e.stopPropagation(), children: _jsxs("div", { className: cn(buttonBox), children: [_jsx("button", { onClick: handlePrev, className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.LessThan, {}) }), _jsxs("div", { className: "flex flex-row md:gap-2 gap-4 justify-center items-center", children: [_jsx("div", { className: "text-white w-2 text-sm", children: index + 1 }), _jsx("div", { className: "w-0.5 h-3 bg-gray-medium" }), _jsx("div", { className: "text-white w-2 text-sm", children: contents.length })] }), _jsx("button", { onClick: handleNext, className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.GreaterThan, {}) })] }) })] }), _jsx("div", { className: "h-full overflow-hidden w-fit", children: image && (_jsx(animated.img, { src: image, alt: "carousel-image", onLoad: () => setLoaded(true), className: "object-cover h-full z-0", style: transitionStyles })) })] }) }));
 }

package/package.json

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

package/tailwind.config.ts

@@ -33,6 +33,7 @@ export default {
       boxShadow: {
         main: "0 2px 10px 0px rgba(0, 0, 0, 0.14)",
         "main-hover": "0 10px 12px 0px rgba(0, 0, 0, 0.3)",
+        green: "0 0px 10px 0px rgba(16, 86, 82, 0.38)",
       },
       keyframes: {
         slideBackground: {

package/version.txt

@@ -1 +1 @@
-1.0.147
+1.0.149