@edu-tosel/design 1.0.266 → 1.0.267

package/util/createSearch.js

@@ -1,31 +1,166 @@
 import { getChoseong } from "es-hangul";
-const record = {
-    "/": ["새로운 소식", "공지사항", "서비스"],
-    "/about": ["리더십", "위원장", "총재", "언론", "학회"],
-    "/exams": [
-        "시험 종류",
-        "Cocoon",
+const defaultRecord = {
+    //소개 페이지
+    "/about": ["About TOSEL", "About", "토셀소개"],
+    "/about#leadership": [
+        "리더십",
+        "임원",
+        "위원장",
+        "총재",
+        "출제위원장",
+        "이기수",
+        "김임득",
+        "leadership",
+        "board",
+    ],
+    "/about#mission": ["Our Mission", "비전", "목표", "미션", "철학", "가치관"],
+    "/about#history": ["연혁", "역사", "history", "설립연도"],
+    "/about#area": ["분야", "사업분야", "비즈니스", "bussiness"],
+    "/about#partner": [
+        "협업",
+        "파트너",
+        "인증",
+        "고려대학교",
+        "학회인증",
+        "partner",
+        "이용기관",
+    ],
+    "/about#media": ["보도자료", "미디어", "media", "뉴스", "언론 속의 토셀"],
+    //시험소개
+    "/exams": ["시험소개", "레벨", "TOSEL"],
+    "/exams#evaluation": [
+        "평가방식",
+        "연령별 인지단계",
+        "평가 기준",
+        "CALP",
+        "BICS",
+        "언어능력 평가",
+        "PBT",
+        "레벨",
+        "Level",
+    ],
+    "/exams#offlineExam": [
+        "정기시험 안내",
+        "시험 구성",
+        "연간 일정",
+        "당일 일정",
         "Pre-Starter",
         "Starter",
         "Basic",
         "Junior",
         "High Junior",
-        "고사장 정기시험",
+        "PS",
+        "ST",
+        "BA",
+        "JR",
+        "HJ",
+        "프리스타터",
+        "스타터",
+        "베이직",
+        "주니어",
+        "하이주니어",
+    ],
+    "/exams#types": [
+        "시험 종류",
+        "고사장시험",
         "가정시험",
-        "토셀 랩 특별시험",
+        "학원정기",
+        "특별기관시험",
+        "기관시험",
+        "랩 특별시험",
+    ],
+    //게시판
+    "/events": ["이벤트", "새로운 소식"],
+    "/books": ["교재", "교재안내"],
+    //토셀 북스
+    "https://smartstore.naver.com/tosel": [
+        "토셀북스",
+        "책 구매",
+        "TOSEL Books",
+        "북스토어",
+        "교재구입",
+        "교재몰",
+        "쇼핑",
+        "스마트스토어",
+        "네이버스토어",
+        "구매하기",
+        "문제집",
     ],
-    "/books": ["교재", "교재몰"],
-    "https://labentry.tosel.co.kr/": ["토셀 랩", "토셀 랩 심사신청"],
+    //토셀북스-시험대비교재
+    "https://smartstore.naver.com/tosel/category/3345d808450940f3a81077bb29b95e55?cp=1": ["시험대비교재"],
+    "https://smartstore.naver.com/tosel/category/00590516c9ea4041b17bcea6527850ed?cp=1": ["유형분석집"],
+    "https://smartstore.naver.com/tosel/category/263ed55441ee47fc994b7e2e7d77c37f?cp=1": ["예상문제집"],
+    "https://smartstore.naver.com/tosel/category/50ea23099a1344d99b0902bfb65305aa?cp=1": ["실전문제집"],
+    "https://smartstore.naver.com/tosel/category/f3c92dd261b7497aace96620f760aacd?cp=1": ["심화문제집"],
+    "https://smartstore.naver.com/tosel/category/20990897bf944d82861c8a4600b56d82?cp=1": ["기출", "기출연습", "기출세트"],
+    //토셀북스-학습교재
+    "https://smartstore.naver.com/tosel/category/6099b9ce3fec4f2a8111cb5a2fa153c2?cp=1": ["학습교재", "개념학습"],
+    "https://smartstore.naver.com/tosel/category/bde68e05417e4db99a86ebbd4aa3e925?cp=1": ["Reading Series", "리딩", "읽기"],
+    "https://smartstore.naver.com/tosel/category/2f11488810464cb5bbe77b004965f4ae?cp=1": ["Listening Series", "리스닝", "듣기"],
+    "https://smartstore.naver.com/tosel/category/28dc52dc67a3443ea010812d40accb69?cp=1": ["Speaking Series", "스피킹", "말하기"],
+    "https://smartstore.naver.com/tosel/category/78551dca50de4636bc212c46543d4137?cp=1": ["VOCA Series", "보카", "영단어", "단어학습"],
+    "https://smartstore.naver.com/tosel/category/c88067049a904b8e8d78ada305b2779b?cp=1": ["Grammar Series", "그래머", "영문법", "문법"],
+    "https://smartstore.naver.com/tosel/category/cd8df3ab036942f7a3ea6e14a7ab3a9a?cp=1": ["Story Series", "스토리", "읽기"],
+    //토셀북스-레벨별교재
+    "https://smartstore.naver.com/tosel/category/637c92ebd5af435b98c89926ebdcf4d5?cp=1": ["Cocoon 교재", "Cocoon", "코쿤"],
+    "https://smartstore.naver.com/tosel/category/b0fc9b0937854a8baffb9a2bd8c35d0f?cp=1": ["Pre-Starter 교재", "Pre-Starter", "프리스타터", "PS", "초등"],
+    "https://smartstore.naver.com/tosel/category/3db386ace57846d2a52bb95b21b47954?cp=1": ["Starter 교재", "Starter", "스타터", "ST", "초등"],
+    "https://smartstore.naver.com/tosel/category/cd2d05f9b3014ead8b6da998eff17c9b?cp=1": ["Basic 교재", "Basic", "베이직", "BA", "초등"],
+    "https://smartstore.naver.com/tosel/category/52cdb446f4ae45c7a865401f14d3cd6b?cp=1": ["Junior 교재", "Junior", "주니어", "JR", "중등"],
+    "https://smartstore.naver.com/tosel/category/abb1a40e47754d8ebd229daa3d7a0fe9?cp=1": ["High Junior 교재", "하이주니어", "HJ", "고등"],
+    "https://smartstore.naver.com/tosel/category/216102719f724819a9d55f40ab032be5?cp=1": ["Advanced 교재", "어드밴스트", "성인"],
+    //토셀북스-굿즈
+    "https://smartstore.naver.com/tosel/category/19e0ceb5c1d84b09a3b4b8110edb1803?cp=1": ["굿즈", "책받침", "볼펜", "다이어리", "캘린더", "오답노트", "단어장"],
+    // 올림피아드 랜딩페이지
+    "/olympiad": ["올림피아드", "보카", "VOCA", "단어"],
+    "/olympiad#features": [
+        "올림피아드 특징",
+        "특징",
+        "올림피아드",
+        "보카",
+        "VOCA",
+    ],
+    // 토셀랩 랜딩페이지
+    "https://labentry.tosel.co.kr/": ["토셀 랩", "토셀 랩 심사신청", "Lab", "랩"],
     "/dashboard/academy/students": [
-        "학생",
         "학생 관리",
         "학생 추가",
-        "원생 관리",
+        "원생관리",
         "원생 삭제",
         "원생 아이디",
     ],
+    // 고객센터
+    "https://connect.tosel.co.kr/": [
+        "고객센터",
+        "CS",
+        "홈",
+        "Customer",
+        "문의하기",
+    ],
+    "https://connect.tosel.co.kr/agencies": [
+        "지역본부 정보",
+        "본부장",
+        "영업코드",
+        "전화",
+    ],
+    "https://tosel-faq.notion.site/": [
+        "TOSEL 이용 가이드",
+        "FAQ",
+        "Q&A",
+        "질문",
+        "help center",
+        "헬프 센터",
+        "안내",
+        "도움말",
+    ],
+    "https://tosel-faq.notion.site/150de6b860e280f4a30fe49d8c300584": [
+        "정기시험 관리규정",
+    ],
+    "/dashboard/user/applications": ["접수하기", "정기시험"],
+    "http://localhost:5174/olympiad#features": ["올림피아드 안내"],
 };
-export default function createSearch({ record, }) {
+function createSearch({ record, } = {}) {
+    record = record ?? defaultRecord;
     const recordEntries = Object.entries(record);
     const isHangul = (str) => /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/.test(str);
     const entries = recordEntries
@@ -33,19 +168,68 @@ export default function createSearch({ record, }) {
         .flat();
     const choseongEntries = entries.map(([key, value]) => [
         key,
-        isHangul(value) ? getChoseong(value).replace(/ /g, "") : value,
+        isHangul(value)
+            ? getChoseong(value).replace(/ /g, "")
+            : value.toLowerCase(),
     ]);
+    const calculateMatchScore = (value, query) => {
+        const queryIndex = value.indexOf(query);
+        if (queryIndex === -1)
+            return 0;
+        // 일치율 = (검색어 길이 / 전체 단어 길이) * 100
+        const matchRatio = (query.length / value.length) * 100;
+        // 점수 계산: 앞에 있을수록 + 검색어 비율이 높을수록 가산점
+        return 100 - queryIndex * 5 + matchRatio * 2;
+    };
     const search = (query) => {
-        const entireMatch = entries.filter(([_, value]) => value.includes(query));
-        const queryChoseong = getChoseong(query);
-        const choseongIndexes = choseongEntries
-            .map((value, index) => ({ index, value }))
-            .filter(({ value: [_, value] }) => value.includes(queryChoseong))
-            .map(({ index }) => index);
-        const choseongMatch = choseongIndexes.map((index) => entries[index]);
-        return { entireMatch, choseongMatch };
+        const lowerQuery = query.toLowerCase();
+        const isHangulQuery = isHangul(query);
+        const queryChoseong = isHangulQuery ? getChoseong(query) : "";
+        // **정확한 일치 (Exact Match)**
+        const entireMatch = entries
+            .filter(([_, value]) => {
+            const normalizedValue = value.toLowerCase();
+            return (normalizedValue === lowerQuery ||
+                new RegExp(`\\b${lowerQuery}`).test(normalizedValue));
+        })
+            .map(([key, value]) => [
+            key,
+            record[key]?.[0] ?? value, // 첫 번째 키워드가 없을 경우 value를 기본값으로 사용
+            value,
+        ]);
+        // **초성 매칭 (Choseong Match)**
+        const choseongMatch = isHangulQuery
+            ? choseongEntries
+                .map((value, index) => ({ index, value }))
+                .filter(({ value: [_, value] }) => value.includes(queryChoseong))
+                .map(({ index }) => {
+                const key = entries[index][0];
+                return [
+                    key,
+                    record[key]?.[0] ?? entries[index][1], // 첫 번째 키워드가 없을 경우 대체
+                    entries[index][1],
+                ];
+            })
+            : [];
+        // **중복 제거 (EntireMatch에 포함된 키 제거)**
+        const entireMatchKeys = new Set(entireMatch.map(([key]) => key));
+        const filteredChoseongMatch = choseongMatch.filter(([key]) => !entireMatchKeys.has(key));
+        // **가장 유사한 결과를 먼저 정렬**
+        const sortResults = (results) => {
+            return results
+                .map((item) => ({
+                data: item,
+                score: calculateMatchScore(item[2], query), // 검색어 포함도 계산
+            }))
+                .sort((a, b) => b.score - a.score) // 높은 점수순으로 정렬
+                .map((item) => item.data);
+        };
+        return {
+            entireMatch: sortResults(entireMatch),
+            choseongMatch: sortResults(filteredChoseongMatch),
+        };
     };
     return { search };
 }
-const { search } = createSearch({ record });
-console.log(search("관리"));
+const { search } = createSearch();
+export default search;

package/util/index.d.ts

@@ -11,7 +11,7 @@ export { default as copyToClipboard } from "./copyToClipboard";
 export { default as createRecord } from "./createRecord";
 export { default as formatMobileNum } from "./formatPhoneNumberToE164";
 export { default as formatKorPhoneNum } from "./formatKoreanPhoneNumber";
-export { default as createSearch } from "./createSearch";
+export { default as search } from "./createSearch";
 export * from "../style/colors";
 export * from "./pattern";
 export * from "./shape";

package/util/index.js

@@ -11,7 +11,7 @@ export { default as copyToClipboard } from "./copyToClipboard";
 export { default as createRecord } from "./createRecord";
 export { default as formatMobileNum } from "./formatPhoneNumberToE164";
 export { default as formatKorPhoneNum } from "./formatKoreanPhoneNumber";
-export { default as createSearch } from "./createSearch";
+export { default as search } from "./createSearch";
 export * from "../style/colors";
 export * from "./pattern";
 export * from "./shape";

package/version.txt

@@ -1 +1 @@
-1.0.266
+1.0.267

package/widget/template/Input/index.js

@@ -3,6 +3,8 @@ import { useId, useRef, useState } from "react";
 import { cn } from "../../../util";
 import Obstacle from "../Obstacle";
 import Form from "./Form";
+import { useResponsive } from "../../../hook";
+import Label from "../Label";
 const widthSize = {
     xs: "w-28",
     sm: "w-48",
@@ -13,6 +15,7 @@ const widthSize = {
     full: "w-full",
 };
 function Input({ state, onKeyDown, placeholder, option }) {
+    const isSm = useResponsive("sm");
     const { width, disabled } = option ?? {};
     const [value, setValue] = state;
     const ref = useRef(null);
@@ -42,6 +45,11 @@ function Input({ state, onKeyDown, placeholder, option }) {
         styles: "focus:outline-none bg-transparent",
         pointers: "cursor-default",
     };
+    if (!isSm)
+        return (_jsx(Label.Button, { title: "\uAC80\uC0C9", option: {
+                width: "3xs",
+                height: "2xs",
+            } }));
     return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), onClick: () => ref.current?.focus(), children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M21.8758 21.8748L16.4623 16.4613M16.4623 16.4613C17.9275 14.9961 18.7506 13.0089 18.7506 10.9368C18.7506 8.86474 17.9275 6.87752 16.4623 5.41234C14.9971 3.94715 13.0099 3.12402 10.9378 3.12402C8.86571 3.12402 6.8785 3.94715 5.41331 5.41234C3.94813 6.87752 3.125 8.86474 3.125 10.9368C3.125 13.0089 3.94813 14.9961 5.41331 16.4613C6.8785 17.9265 8.86571 18.7496 10.9378 18.7496C13.0099 18.7496 14.9971 17.9265 16.4623 16.4613Z", stroke: "#105652", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }), _jsx("input", { id: id, ref: ref, className: cn(inputBox), type: "text", value: value, onFocus: () => setIsFocus(true), onBlur: () => setIsFocus(false), placeholder: typeof placeholder === "function"
                         ? placeholder()
                         : placeholder ?? "입력해주세요", onKeyDown: onKeyDown && ((e) => onKeyDown(e, value ?? "")), onChange: (e) => setValue(e.target.value) }), _jsx(Obstacle, { disabled: disabled })] }) }));

package/layout/template/About/SectionA.d.ts

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

package/layout/template/About/SectionA.js

@@ -1,51 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { cn } from "../../../util";
-import { useVisibilityObserver } from "../../../hook";
-export default function SectionA() {
-    const [isHidden, setIsHidden] = useState(false);
-    useEffect(() => {
-        const handleScroll = () => {
-            if (window.scrollY > 50) {
-                setIsHidden(true);
-            }
-            else {
-                setIsHidden(false);
-            }
-        };
-        window.addEventListener("scroll", handleScroll);
-        return () => {
-            window.removeEventListener("scroll", handleScroll);
-        };
-    }, []);
-    const handleScroll = () => {
-        window.scrollBy({
-            top: window.innerHeight,
-            behavior: "smooth",
-        });
-    };
-    const scrollGuideWrapper = {
-        display: "absolute hidden md:flex flex-col justify-center items-center z-10",
-        sizes: "w-full",
-        spacings: "bottom-0 mb-10",
-        scrollAction: `transition-opacity duration-500 ${isHidden ? "opacity-0" : "opacity-100"}`,
-    };
-    const scrollGuideText = {
-        sizes: "w-full",
-        textstyles: "font-medium text-white text-base",
-        spacings: "text-center",
-    };
-    const scrollGuideButton = {
-        sizes: "w-10 h-10 mt-10",
-        other: "animate-bounce p-1 w-10 h-10 ring-1 ring-slate-900/5 shadow-lg rounded-full flex items-center justify-center",
-    };
-    const titleWrapper = {
-        displays: "flex flex-col justify-center items-center md:items-start",
-        sizes: "w-[1200px] h-full",
-        spacings: "gap-8",
-        textstyles: "text-white",
-        animation: "transform transition-all duration-1000 delay-0 ease-in-out",
-    };
-    const { isVisible, elementRef } = useVisibilityObserver(0.1, true);
-    return (_jsxs("div", { className: "relative w-full h-screen bg-[url('/images/aboutus/bg/img-aboutus-cover-min.png')] flex py-55 justify-center bg-cover bg-center px-5 z-0", children: [_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", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "size-6 text-white", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m19.5 8.25-7.5 7.5-7.5-7.5" }) }) })] }), _jsx("div", { className: "absolute h-screen w-full bg-gradient-to-b from-black/0 to-black z-0 top-0" }), _jsxs("div", { className: cn(titleWrapper, isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"), children: [_jsx("div", { className: "text-lg md:text-xl z-10", ref: elementRef, children: "30,000\uC5EC\uAC1C\uC758 \uD559\uAD50\uC640 \uD559\uC6D0\uC758 \uC120\uD0DD" }), _jsxs("div", { className: "text-[32px] md:text-6xl font-bold text-center md:text-left z-10", children: ["\uB300\uD55C\uBBFC\uAD6D\uC744 \uB300\uD45C\uD558\uB294", _jsx("br", {}), "\uC601\uC5B4\uC778\uC99D\uC2DC\uD5D8"] }), _jsx("img", { src: "/images/aboutus/p1-min.png", alt: "", className: "object-fit w-70 z-10" })] })] }));
-}

package/layout/template/About/SectionB.d.ts

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

package/layout/template/About/SectionB.js

@@ -1,55 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../../../util";
-import { useVisibilityObserver } from "../../../hook";
-const stats = [
-    {
-        id: 1,
-        label: "누적 정기시험 응시자",
-        value: "83.1만 +",
-    },
-    {
-        id: 2,
-        label: "지필고사 개최",
-        value: "1.4천회",
-    },
-    {
-        id: 3,
-        label: "누적 이용기관 수",
-        value: "2.9만 +",
-    },
-    {
-        id: 4,
-        label: "선별된 성적 데이터",
-        value: "39.3만 개 +",
-    },
-];
-export default function SectionB() {
-    return (_jsx("div", { className: "break-keep w-full h-screen py-[200px] md:py-0 md:min-h-screen bg-[url('/images/aboutus/bg/img-aboutus-sectionb-bg-min.png')] flex items-center justify-center bg-cover bg-center flex-col", children: _jsxs("div", { className: "w-full max-w-[1200px] h-full flex flex-col text-white px-5 justify-center", children: [_jsxs("div", { className: "flex flex-col gap-2 mb-16", children: [_jsx("div", { className: "text-2xl font-bold", children: "\uC218\uBC31\uB9CC \uB204\uC801 \uC751\uC2DC\uC790\uAC00 \uBCF4\uB0B4\uB294 \uC2E0\uB8B0" }), _jsxs("div", { className: "text-sm", children: ["\uD1A0\uC140\uC740 20\uB144\uC774 \uB118\uB294 \uC2DC\uAC04\uB3D9\uC548 \uD55C\uAD6D\uD615 \uC601\uC5B4\uC778\uC99D\uD3C9\uAC00\uB97C \uC5F0\uAD6C\uD574\uC654\uACE0,", _jsx("br", {}), "\uD604\uC7AC 80\uB9CC\uBA85\uC774 \uB118\uB294 \uC751\uC2DC\uC790\uB97C \uBC30\uCD9C\uD55C \uB300\uD55C\uBBFC\uAD6D \uB300\uD45C \uC601\uC5B4\uC778\uC99D\uD3C9\uAC00\uB85C \uAC70\uB4ED\uB0AC\uC2B5\uB2C8\uB2E4."] })] }), _jsx(StatBoxComponent, {}), _jsx("div", { className: "text-xs", children: "2014\uB144 8\uC6D4 \uAE30\uC900" })] }) }));
-}
-export function StatBoxComponent() {
-    const statBoxWrapper = {
-        displays: "flex flex-wrap justify-start align-start max-w-[935px] w-full",
-        spacings: "gap-y-5 gap-x-5 md:gap-x-12 mb-5",
-    };
-    const statBox = {
-        displays: "flex flex-col items-start",
-        sizes: "w-60 md:w-80",
-        animations: "transform transition-all duration-1000 delay-0 ease-in-out",
-    };
-    const labelText = {
-        textStyles: "font-bold text-base md:text-lg",
-        colors: "text-white/80",
-        spacings: "leading-normal",
-    };
-    const valueText = {
-        textStyles: "font-bold text-[40px] md:text-[64px]",
-        colors: "text-white",
-        spacings: "leading-normal",
-    };
-    return (_jsx("div", { className: cn(statBoxWrapper), children: stats.map((item) => {
-            const { isVisible, elementRef } = useVisibilityObserver(0.1, false);
-            return (_jsxs("div", { ref: elementRef, className: cn(statBox, isVisible
-                    ? "opacity-100 translate-y-0"
-                    : "opacity-0 translate-y-10"), children: [_jsx("div", { className: cn(labelText), children: item.label }), _jsx("div", { className: cn(valueText), children: item.value })] }, item.id));
-        }) }));
-}

package/layout/template/About/SectionC.d.ts

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

package/layout/template/About/SectionC.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
-import SectionCLeaf from "./SectionCLeaf";
-import SectionCCards from "./SectionCCards";
-export default function SectionC() {
-    const [isOpen, setIsOpen] = useState(false);
-    const members = [
-        {
-            imgSource: "/images/aboutus/section-c/img-aboutus-board-LKS-min.jpg",
-            name: "이기수",
-            position: "명예총재",
-            description: "17대 고려대학교 총장",
-        },
-        // {
-        //   imgSource: "/images/aboutus/section-c/img-aboutus-board-LHY-min.png",
-        //   name: "이호열",
-        //   position: "위원장",
-        //   description: "국제토셀위원회 위원장",
-        // },
-        {
-            imgSource: "/images/aboutus/section-c/img-aboutus-board-KID-min.png",
-            name: "김임득",
-            position: "출제위원장",
-            description: "초대 수능출제위원장",
-        },
-    ];
-    const [selectedCard, setSelectedCard] = useState(members[0]);
-    const handleCardClick = (card) => {
-        setSelectedCard(card);
-        setIsOpen(true);
-    };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-full min-h-[900px] bg-white flex items-center justify-center px-5 py-8", children: _jsxs("div", { className: "max-w-[1200px] h-full flex flex-col text-crimson-burgundy gap-8 w-full", children: [_jsx("div", { className: "text-center text-3xl font-bold", children: "Leadership" }), _jsx("div", { className: "text-center text-sm font-light w-full pb-2 border-b-[1px] border-crimson-burgundy", children: "Board Members" }), _jsx("div", { className: "w-full flex items-center justify-center gap-8 flex-wrap", children: members.map((member, index) => {
-                                return (_jsx(SectionCCards, { imgSource: member.imgSource, name: member.name, position: member.position, description: member.description, handleClick: () => handleCardClick(member), delay: index * 100 }, index));
-                            }) })] }) }), _jsx(SectionCLeaf, { isOpenState: [isOpen, setIsOpen], selectedData: [selectedCard, setSelectedCard] })] }));
-}

package/layout/template/About/SectionCCards.d.ts

@@ -1,13 +0,0 @@
-import { StateAction } from "../../../interface";
-type FunctionProps = {
-    handleClick: StateAction<boolean>;
-    delay: number;
-};
-interface CardProps {
-    imgSource: string;
-    name: string;
-    position: string;
-    description: string;
-}
-export default function Card({ imgSource, name, position, description, handleClick, delay, }: CardProps & FunctionProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/layout/template/About/SectionCCards.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useVisibilityObserver, useResponsive } from "../../../hook";
-import { cn } from "../../../util";
-export default function Card({ imgSource, name, position, description, handleClick, delay, }) {
-    const { isVisible, elementRef } = useVisibilityObserver(0.1, false);
-    const isXM = useResponsive("xm");
-    const cardContainer = {
-        displays: "max-w-[270px] flex flex-col gap-3",
-        animations: "transform transition-all duration-1000 ease-in-out",
-        delay: isXM ? `delay-${delay}` : "delay-0",
-    };
-    return (_jsxs("div", { ref: elementRef, className: cn(cardContainer, isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"), onClick: () => handleClick(true), children: [_jsx("div", { className: "w-[270px] h-90 overflow-hidden rounded-3xl cursor-pointer", children: _jsx("img", { src: imgSource, alt: name, className: "w-full h-full object-cover hover:scale-105 transition-all duration-500" }) }), _jsxs("div", { className: "flex gap-3", children: [_jsx("div", { className: "text-gray-dark font-bold text-2xl", children: name }), _jsx("div", { className: "text-gray-medium font-semibold text-2xl", children: position })] }), _jsx("div", { className: "text-sm text-gray-medium", children: description })] }));
-}

package/layout/template/About/SectionCD.d.ts

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

package/layout/template/About/SectionCD.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useVisibilityObserver } from "../../../hook";
-import { cn } from "../../../util";
-export default function SectionCD() {
-    const { isVisible, elementRef } = useVisibilityObserver(0.1, false);
-    const blackBox = {
-        displays: "flex flex-col",
-        sizes: "w-full max-w-[1200px] h-fit rounded-xl",
-        spacings: "py-12 px-8 gap-2.5 z-10",
-        backgrounds: "bg-black/30 backdrop-blur-2xl",
-        textstyles: "text-center break-keep",
-        animations: "transform transition-all duration-1000 delay-0 ease-in-out",
-    };
-    return (_jsx("div", { className: "w-full min-h-screen bg-[url('/images/aboutus/bg/img-aboutus-sectionc2-bg-min.jpg')] flex justify-center items-end pb-24 bg-cover bg-center px-5", children: _jsxs("div", { ref: elementRef, className: cn(blackBox, isVisible ? "translate-y-0 opacity-100" : "translate-y-10 opacity-0"), children: [_jsx("div", { className: "text-3xl md:text-4xl text-white/50", children: "Our Mission" }), _jsxs("div", { className: "text-white text-base md:text-2xl font-bold", children: ["\uD1A0\uC140\uC740 \uC5F0\uB839\uBCC4 \uC778\uC9C0\uB2E8\uACC4\uB97C \uACE0\uB824\uD558\uC5EC \uC5B8\uC5B4\uB2A5\uB825\uC744 \uAC00\uC7A5 \uCE5C\uBC00\uD558\uAC8C \uD3C9\uAC00\uD569\uB2C8\uB2E4.", " ", _jsx("br", {}), "\uBE44\uC601\uC5B4\uAD8C \uD559\uC0DD\uB4E4\uC5D0\uAC8C \uC54C\uB9DE\uC740 \uD3C9\uAC00\uC81C\uB3C4\uB97C \uD1B5\uD574,", _jsx("br", {}), "\uB204\uAD6C\uB098 \uC601\uC5B4\uB97C \uB3C4\uC804\uD560 \uC218 \uC788\uAC8C \uB9CC\uB4DC\uB294 \uAC83\uC774 \uD1A0\uC140\uC758 \uC874\uC7AC \uC774\uC720\uC785\uB2C8\uB2E4."] })] }) }));
-}

package/layout/template/About/SectionCLeaf.d.ts

@@ -1,15 +0,0 @@
-import { ShowAction, State } from "../../../interface";
-interface CardProps {
-    imgSource: string;
-    name: string;
-    position: string;
-    description: string;
-}
-interface SelectedDataProps {
-    showAction?: ShowAction;
-    selectedData: State<CardProps>;
-}
-export default function SectionCLeaf({ selectedData, isOpenState: [isOpen, setIsOpen], }: SelectedDataProps & {
-    isOpenState: State<boolean>;
-}): import("react/jsx-runtime").JSX.Element;
-export {};