@edu-tosel/design 1.0.178 → 1.0.182

package/asset/SVG.d.ts

@@ -52,5 +52,9 @@ declare const SVG: {
         User: ({ size }: import("./svg/Login").IconProps) => import("react/jsx-runtime").JSX.Element;
         ChekMark: ({ size }: import("./svg/Login").IconProps) => import("react/jsx-runtime").JSX.Element;
     };
+    Collab: {
+        Naver: ({ color, size }: import("./svg/Collab").IconProps) => import("react/jsx-runtime").JSX.Element;
+        Kakao: ({ color, size }: import("./svg/Collab").IconProps) => import("react/jsx-runtime").JSX.Element;
+    };
 };
 export default SVG;

package/asset/SVG.js

@@ -11,6 +11,7 @@ import Profile from "./svg/Profile";
 import Symbol from "./svg/Symbol";
 import TOSEL from "./svg/TOSEL";
 import Login from "./svg/Login";
+import Collab from "./svg/Collab";
 const SVG = {
     TOSEL,
     Close,
@@ -25,5 +26,6 @@ const SVG = {
     Profile,
     Symbol,
     Login,
+    Collab,
 };
 export default SVG;

package/asset/SVG.tsx

@@ -11,6 +11,7 @@ import Profile from "./svg/Profile";
 import Symbol from "./svg/Symbol";
 import TOSEL from "./svg/TOSEL";
 import Login from "./svg/Login";
+import Collab from "./svg/Collab";
 
 const SVG = {
   TOSEL,
@@ -26,6 +27,7 @@ const SVG = {
   Profile,
   Symbol,
   Login,
+  Collab,
 };
 
 export default SVG;

package/asset/svg/Collab.d.ts

@@ -0,0 +1,11 @@
+export interface IconProps {
+    color?: string;
+    size?: string;
+}
+declare const Collab: {
+    Naver: typeof Naver;
+    Kakao: typeof Kakao;
+};
+export default Collab;
+declare function Naver({ color, size }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare function Kakao({ color, size }: IconProps): import("react/jsx-runtime").JSX.Element;

package/asset/svg/Collab.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../util";
+const Collab = {
+    Naver,
+    Kakao,
+};
+export default Collab;
+function Naver({ color, size }) {
+    const iconStyling = {
+        backgrounds: color ?? "fill-white",
+        sizes: size ?? "size-6",
+    };
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "23", height: "23", viewBox: "0 0 23 23", fill: "none", className: cn(iconStyling), children: _jsx("path", { d: "M15.585 12.21L7.065 0H0V22.8H7.395V10.59L15.915 22.8H22.98V0H15.585V12.21Z" }) }));
+}
+function Kakao({ color, size }) {
+    const iconStyling = {
+        backgrounds: color ?? "fill-black",
+        sizes: size ?? "size-6",
+    };
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "37", height: "35", viewBox: "0 0 37 35", fill: "none", className: cn(iconStyling), children: _jsx("path", { d: "M17.9787 2C9.1517 2 2 7.77675 2 14.9085C2 19.5475 5.03175 23.6176 9.58191 25.8931C9.24786 27.1653 8.37225 30.5114 8.1951 31.2251C7.97746 32.1146 8.51397 32.0991 8.8632 31.8612C9.13651 31.675 13.2413 28.8203 15.0127 27.5894C15.9744 27.7342 16.9664 27.8118 17.9787 27.8118C26.8057 27.8118 33.9574 22.035 33.9574 14.9033C33.9574 7.77158 26.8057 2 17.9787 2Z" }) }));
+}

package/asset/svg/Collab.tsx

@@ -0,0 +1,51 @@
+import { cn } from "../../util";
+
+export interface IconProps {
+  color?: string;
+  size?: string;
+}
+
+const Collab = {
+  Naver,
+  Kakao,
+};
+
+export default Collab;
+
+function Naver({ color, size }: IconProps) {
+  const iconStyling = {
+    backgrounds: color ?? "fill-white",
+    sizes: size ?? "size-6",
+  };
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="23"
+      height="23"
+      viewBox="0 0 23 23"
+      fill="none"
+      className={cn(iconStyling)}
+    >
+      <path d="M15.585 12.21L7.065 0H0V22.8H7.395V10.59L15.915 22.8H22.98V0H15.585V12.21Z" />
+    </svg>
+  );
+}
+
+function Kakao({ color, size }: IconProps) {
+  const iconStyling = {
+    backgrounds: color ?? "fill-black",
+    sizes: size ?? "size-6",
+  };
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="37"
+      height="35"
+      viewBox="0 0 37 35"
+      fill="none"
+      className={cn(iconStyling)}
+    >
+      <path d="M17.9787 2C9.1517 2 2 7.77675 2 14.9085C2 19.5475 5.03175 23.6176 9.58191 25.8931C9.24786 27.1653 8.37225 30.5114 8.1951 31.2251C7.97746 32.1146 8.51397 32.0991 8.8632 31.8612C9.13651 31.675 13.2413 28.8203 15.0127 27.5894C15.9744 27.7342 16.9664 27.8118 17.9787 27.8118C26.8057 27.8118 33.9574 22.035 33.9574 14.9033C33.9574 7.77158 26.8057 2 17.9787 2Z" />
+    </svg>
+  );
+}

package/hook/useVisibilityObserver.d.ts

@@ -1,5 +1,5 @@
 declare const useVisibilityObserver: (threshold?: number, observeOnce?: boolean) => {
     isVisible: boolean;
-    elementRef: import("react").MutableRefObject<HTMLImageElement | null>;
+    elementRef: import("react").RefObject<HTMLDivElement>;
 };
 export default useVisibilityObserver;

package/hook/useVisibilityObserver.js

@@ -1,7 +1,7 @@
 import { useEffect, useState, useRef } from "react";
 const useVisibilityObserver = (threshold = 0.1, observeOnce = true) => {
     const [isVisible, setIsVisible] = useState(false);
-    const elementRef = useRef(null); // HTMLImageElement로 타입 변경
+    const elementRef = useRef(null); // HTMLDivElement로 타입 변경
     useEffect(() => {
         const observer = new IntersectionObserver((entries) => {
             entries.forEach((entry) => {
@@ -29,10 +29,3 @@ const useVisibilityObserver = (threshold = 0.1, observeOnce = true) => {
     return { isVisible, elementRef };
 };
 export default useVisibilityObserver;
-// 예시:
-// className={cn(
-//     "transform transition-all duration-1000 delay-0 ease-in-out",
-//     isVisible
-//       ? "translate-y-0 opacity-100"
-//       : "translate-y-10 opacity-0"
-//   )}

package/layout/template/About/SectionA.js

@@ -47,5 +47,5 @@ export default function SectionA() {
         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", "stroke-width": "1.5", stroke: "currentColor", className: "size-6 text-white", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "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: "15,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" })] })] }));
+    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: "15,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/SectionCCards.js

@@ -6,7 +6,7 @@ export default function Card({ imgSource, name, position, description, handleCli
     const isXM = useResponsive("xm");
     const cardContainer = {
         displays: "max-w-[270px] flex flex-col gap-3",
-        animations: `transform transition-all duration-1000 ease-in-out`,
+        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/SectionD.js

@@ -1,76 +1,131 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
-export default function SectionD() {
-    const years = [
-        "2024",
-        "2023",
-        "2022",
-        "2021",
-        "2020",
-        "2019",
-        "2018",
-        "2017",
-        "~2014",
-    ];
-    const histories = {
-        "2024": {
-            4: { "2024.03": "고려대학교 미래교육원 TOSEL 전문과과정 개설" },
-            3: { "2024.02": "24년도 후기 고려대학교 대학원 입학전형 반영" },
-            2: { "2024.02": "경찰대학교 편입학전형 / 졸업인증 반영" },
-            1: { "2024.02": "정부 인사혁신처, 어학성적 등록 기관에 TOSEL 추가" },
-            0: { "2024.01": "제 1회 TOSEL VOCA 올림피아드 실시" },
-        },
-        "2023": {
-            0: {
-                "2023.11": "고려대학교 경영대학 전국 고등학생 대상 정기캠퍼스 투어 프로그램 후원기관 참여",
-            },
-        },
-        "2022": {
-            0: { "2022.05": "AI 영어학습 플랫폼 TOSEL Lab 공개" },
-        },
-        "2021": {
-            1: {
-                "2021.07": "고려대학교 공과대학 기계학습-빅 데이터 연구원 AI 연구협약 체결",
-            },
-            0: { "2021.07": "소방청 간부후보생 선발시험 반영" },
+import { useState, useRef } from "react";
+import { cn } from "../../../util";
+import { useResponsive } from "../../../hook";
+// History data
+const years = [
+    "2024",
+    "2023",
+    "2022",
+    "2021",
+    "2020",
+    "2019",
+    "2018",
+    "2017",
+    "~2014",
+];
+const histories = {
+    "2024": {
+        4: { "2024.03": "고려대학교 미래교육원 TOSEL 전문과과정 개설" },
+        3: { "2024.02": "24년도 후기 고려대학교 대학원 입학전형 반영" },
+        2: { "2024.02": "경찰대학교 편입학전형 / 졸업인증 반영" },
+        1: { "2024.02": "정부 인사혁신처, 어학성적 등록 기관에 TOSEL 추가" },
+        0: { "2024.01": "제 1회 TOSEL VOCA 올림피아드 실시" },
+    },
+    "2023": {
+        0: {
+            "2023.11": "고려대학교 경영대학 전국 고등학생 대상 정기캠퍼스 투어 프로그램 후원기관 참여",
         },
-        "2020": {
-            0: { "2020.06": "국토교통부 국가자격시험 반영" },
+    },
+    "2022": {
+        0: { "2022.05": "AI 영어학습 플랫폼 TOSEL Lab 공개" },
+    },
+    "2021": {
+        1: {
+            "2021.07": "고려대학교 공과대학 기계학습-빅 데이터 연구원 AI 연구협약 체결",
         },
-        "2019": {
-            1: { "2019.11": "고려대학교 편입학 전형 반영" },
-            0: { "2019.06": "미얀마 / 베트남 TOSEL 시험 시행 계약" },
+        0: { "2021.07": "소방청 간부후보생 선발시험 반영" },
+    },
+    "2020": {
+        0: { "2020.06": "국토교통부 국가자격시험 반영" },
+    },
+    "2019": {
+        1: { "2019.11": "고려대학교 편입학 전형 반영" },
+        0: { "2019.06": "미얀마 / 베트남 TOSEL 시험 시행 계약" },
+    },
+    "2018": {
+        0: { "2018.11": "관공서, 대기업 등 100개 기관에 토셀 반영" },
+    },
+    "2017": {
+        0: { "2017.03": "중앙일보 주관기관 참여" },
+    },
+    "~2014": {
+        10: { "2014.04": "전국 200여개 초등학교 단체 응시 실시" },
+        9: { "2010.07": "경찰청 공무원 임용시 성적 가산점 부여" },
+        8: { "2010.03": "고려대학교, TOSEL 출제 및 인증기관으로 참여" },
+        7: {
+            "2009.12": "한국외국어응용학회, 팬코리아영어교육학회, 한국음성학회, 한국응용언어학회 인증 획득",
         },
-        "2018": {
-            0: { "2018.11": "관공서, 대기업 등 100개 기관에 토셀 반영" },
-        },
-        "2017": {
-            0: { "2017.03": "중앙일보 주관기관 참여" },
-        },
-        "~2014": {
-            10: { "2014.04": "전국 200여개 초등학교 단체 응시 실시" },
-            9: { "2010.07": "경찰청 공무원 임용시 성적 가산점 부여" },
-            8: { "2010.03": "고려대학교, TOSEL 출제 및 인증기관으로 참여" },
-            7: {
-                "2009.12": "한국외국어응용학회, 팬코리아영어교육학회, 한국음성학회, 한국응용언어학회 인증 획득",
-            },
-            6: { "2009.12": "청심국제중/고 입학전형 반영" },
-            5: { "2009.01": "전국 15개 외고/자사고 입학전형 반영" },
-            4: { "2009.01": "서울시 공무원 근무평정에 TOSEL 점수 가산점 부여" },
-            3: { "2006.05": "민족사관고등학교 입학전형 반영" },
-            2: { "2006.04": "주관기관으로 EBS 참여" },
-            1: { "2004.09": "TOSEL-고려대학교 국제어학원 공동인증시험 실시" },
-            0: { "2002.02": "국제토셀위원회(ITC) 창설" },
-        },
-    };
-    const [selectedYear, setSelectedYear] = useState("~2014");
+        6: { "2009.12": "청심국제중/고 입학전형 반영" },
+        5: { "2009.01": "전국 15개 외고/자사고 입학전형 반영" },
+        4: { "2009.01": "서울시 공무원 근무평정에 TOSEL 점수 가산점 부여" },
+        3: { "2006.05": "민족사관고등학교 입학전형 반영" },
+        2: { "2006.04": "주관기관으로 EBS 참여" },
+        1: { "2004.09": "TOSEL-고려대학교 국제어학원 공동인증시험 실시" },
+        0: { "2002.02": "국제토셀위원회(ITC) 창설" },
+    },
+};
+// SectionD Component
+export default function SectionD() {
+    const [selectedYear, setSelectedYear] = useState("2024");
+    const isMD = useResponsive("md");
     const handleYearClick = (year) => {
         setSelectedYear(year);
     };
-    return (_jsx("div", { className: "w-full min-h-[1080px] bg-gray-light flex py-30 justify-center", children: _jsxs("div", { className: "w-[1200px] h-full flex flex-col items-center text-center gap-20 text-black", children: [_jsxs("div", { className: "font-semibold text-2xl", children: ["20\uB144 \uC804\uBD80\uD130 \uC9C0\uAE08\uAE4C\uC9C0", _jsx("br", {}), "\uD1A0\uC140\uC740 \uCD5C\uACE0\uC218\uC900\uC744 \uC704\uD55C \uAE38\uC744 \uAC78\uC5B4\uC654\uC2B5\uB2C8\uB2E4."] }), _jsxs("div", { className: "relative flex gap-12", children: [_jsx("div", { className: "flex flex-col gap-12 z-10", children: years.map((year, index) => (_jsxs("div", { className: "w-22 h-6 flex items-center justify-end text-center gap-3 cursor-pointer", onClick: () => handleYearClick(year), children: [_jsx("div", { className: `font-bold text-sm duration-700 transition-all ${selectedYear === year ? "text-black" : "text-[#B9B9B9]"}`, children: year }), _jsx("div", { className: `relative w-3 h-3 rounded-full transition-transform duration-500 ${selectedYear === year
-                                            ? "transform scale-[1.3]"
-                                            : "transform scale-100 bg-[#B9B9B9]"}`, children: selectedYear === year && (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 rounded-full", style: {
-                                                        background: "linear-gradient(269deg, rgba(118, 0, 35) 0%, rgba(16, 86, 82) 100%)",
-                                                        padding: "2px",
-                                                    } }), _jsx("div", { className: "absolute inset-[2px] bg-white rounded-full" })] })) })] }, index))) }), _jsx("div", { className: "relative w-120 h-full", children: _jsx("div", { className: "absolute top-0 left-1/2 transform -translate-x-1/2 w-[480px] z-0", children: years.map((year) => (_jsx("div", { className: `transition-opacity duration-500 ease-in-out ${selectedYear === year ? "opacity-100" : "opacity-0"}`, children: selectedYear === year && (_jsx("div", { className: "flex flex-col gap-6 text-left", children: Object.entries(histories[year]).map(([_, event], idx) => (_jsx("div", { children: Object.entries(event).map(([date, detail]) => (_jsxs("div", { children: [_jsx("div", { className: "text-gray-medium text-sm font-semibold", children: date }), _jsx("div", { className: "text-black text-sm", children: detail })] }, date))) }, idx))) })) }, year))) }) })] })] }) }));
+    return (_jsx("div", { className: "w-full h-fit md:min-h-[1080px] bg-gray-light flex py-30 justify-center break-keep", children: _jsxs("div", { className: " h-full flex flex-col md:items-center text-left md:text-center gap-20 text-gray-dark", children: [_jsxs("div", { className: "font-semibold text-2xl p-5", children: ["20\uB144 \uC804\uBD80\uD130 \uC9C0\uAE08\uAE4C\uC9C0,", _jsx("br", {}), "\uD1A0\uC140\uC740 \uCD5C\uACE0\uC218\uC900\uC744 \uC704\uD55C \uAE38\uC744 \uAC78\uC5B4\uC654\uC2B5\uB2C8\uB2E4."] }), isMD ? (_jsx(PCYearBook, { years: years, selectedYear: selectedYear, handleYearClick: handleYearClick, histories: histories })) : (_jsx(MobileYearBook, { years: years, selectedYear: selectedYear, handleYearClick: handleYearClick, histories: histories }))] }) }));
+}
+// MobileYearBook Component
+function MobileYearBook({ years, selectedYear, handleYearClick, histories, }) {
+    const yearListWrapper = {
+        displays: "flex flex-row relative",
+        position: "z-10",
+        scrollOption: "overflow-x-scroll w-screen scrollbar-hidden overflow-y-visible",
+    };
+    const yearBox = {
+        displays: "flex justify-center items-center flex-shrink-0",
+        sizes: "w-22 h-10",
+        textSytles: "text-center",
+        cursor: "cursor-pointer",
+    };
+    const divider = {
+        displays: "flex absolute -top-[1px]",
+        sizes: "w-full h-0.5",
+        backgrounds: "bg-green-dark",
+    };
+    const menuRef = useRef(null);
+    const barRef = useRef(null);
+    // 클릭된 연도 버튼을 가운데에 정렬
+    const handleYearClickWithScroll = (year, index) => {
+        handleYearClick(year); // 기존 클릭 핸들러 호출
+        const menuElement = menuRef.current;
+        const underBar = barRef.current;
+        if (menuElement && underBar) {
+            const button = menuElement.children[index]; // 클릭된 버튼
+            const offsetLeft = button.offsetLeft +
+                button.offsetWidth / 2 -
+                menuElement.clientWidth / 2;
+            menuElement.scrollTo({
+                left: offsetLeft,
+                behavior: "smooth",
+            });
+            if (button) {
+                const { offsetLeft, offsetWidth } = button;
+                const indicatorWidth = barRef.current.offsetWidth;
+                // 가로선 위치 조정
+                barRef.current.style.transform = `translateX(${offsetLeft + offsetWidth / 2 - indicatorWidth / 2}px)`;
+                barRef.current.style.transition = "transform 0.4s ease-in-out";
+            }
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: cn(yearListWrapper), ref: menuRef, children: [years.map((year, index) => (_jsx("div", { className: cn(yearBox), onClick: () => handleYearClickWithScroll(year, index), children: _jsx("div", { className: `font-bold text-lg duration-700 transition-all ${selectedYear === year ? "text-gray-dark" : "text-[#B9B9B9]"}`, children: year }) }, index))), _jsx("div", { ref: barRef, className: "absolute h-1 bg-green-dark bottom-0 w-22 z-20" // 가로선의 너비 조정
+                     })] }), _jsx("div", { className: "w-full relative overflow-visible", children: _jsx("div", { className: cn(divider) }) }), _jsx("div", { className: "w-full h-fit p-5 mt-10", children: selectedYear && histories[selectedYear] && (_jsx("div", { className: "flex flex-col gap-10 text-left", children: Object.entries(histories[selectedYear]).map(([_, event], idx) => (_jsx("div", { children: Object.entries(event).map(([date, detail]) => (_jsxs("div", { children: [_jsx("div", { className: "text-gray-medium text-base font-bold", children: date }), _jsx("div", { className: "text-gray-dark text-base font-medium", children: detail })] }, date))) }, idx))) })) })] }));
+}
+// PCYearBook Component
+function PCYearBook({ years, selectedYear, handleYearClick, histories, }) {
+    return (_jsxs("div", { className: "relative flex gap-12", children: [_jsx("div", { className: "flex flex-col z-10", children: years.map((year, index) => (_jsxs("div", { className: "w-22 h-18 flex items-start justify-end text-center gap-3 cursor-pointer relative", onClick: () => handleYearClick(year), children: [_jsx("div", { className: "absolute right-[5px] top-[3px] w-0.5 bg-[#B9B9B9] h-full" }), _jsx("div", { className: `font-bold leading-none text-sm duration-500 transition-all ${selectedYear === year ? "text-gray-dark" : "text-[#B9B9B9]"}`, children: year }), _jsx("div", { className: `relative w-3 h-3 rounded-full transition-transform duration-300 ${selectedYear === year
+                                ? "transform scale-[1.3]"
+                                : "transform scale-100 bg-[#B9B9B9]"}`, children: selectedYear === year && (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 rounded-full", style: {
+                                            background: "linear-gradient(269deg, rgba(118, 0, 35) 0%, rgba(16, 86, 82) 100%)",
+                                            padding: "2px",
+                                        } }), _jsx("div", { className: "absolute inset-[2px] bg-white rounded-full" })] })) })] }, index))) }), _jsx("div", { className: "relative w-120 h-full", children: _jsx("div", { className: "absolute top-0 left-1/2 transform -translate-x-1/2 w-[480px] z-0", children: selectedYear && histories[selectedYear] && (_jsx("div", { className: "flex flex-col gap-6 text-left", children: Object.entries(histories[selectedYear]).map(([_, event], idx) => (_jsx("div", { children: Object.entries(event).map(([date, detail]) => (_jsxs("div", { children: [_jsx("div", { className: "text-gray-medium text-sm font-semibold", children: date }), _jsx("div", { className: "text-gray-dark text-sm", children: detail })] }, date))) }, idx))) })) }) })] }));
 }

package/layout/template/About/SectionE.js

@@ -1,5 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import SectionECards from "./SectionECards";
+import { useResponsive } from "../../../hook";
 export default function SectionE() {
-    return (_jsxs("div", { className: "w-full min-h-screen py-30 flex flex-col gap-30 items-center", children: [_jsxs("div", { className: "flex flex-col items-center justify-center gap-[34px]", children: [_jsx("div", { className: "text-crimson-burgundy text-4xl font-bold text-center", children: "\uD1A0\uC140\uACFC \uD568\uAED8\uD558\uB294 \uB2F9\uC2E0\uC758 \uC131\uC7A5" }), _jsx("div", { className: "text-black text-semibold text-sm", children: "\uC120\uC0DD\uB2D8\uACFC \uD559\uC0DD, \uBAA8\uB450\uB97C \uC704\uD55C \uC601\uC5B4\uAD50\uC721\uC758 \uC7A5\uC744 \uB9CC\uB4E4\uACE0\uC790 \uD569\uB2C8\uB2E4." })] }), _jsx("div", { className: "w-[1200px] px-5 grid grid-cols-2 gap-[50px]", children: _jsx(SectionECards, {}) })] }));
+    const isMD = useResponsive("md");
+    return (_jsxs("div", { className: "w-full min-h-screen py-30 flex flex-col gap-30 items-center break-keep", children: [_jsx("div", { className: "flex flex-col items-center justify-center gap-[34px]", children: isMD ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-crimson-burgundy text-4xl font-bold text-center", children: "\uD1A0\uC140\uACFC \uD568\uAED8\uD558\uB294 \uB2F9\uC2E0\uC758 \uC131\uC7A5" }), _jsx("div", { className: "text-black text-semibold text-2xl", children: "\uC120\uC0DD\uB2D8\uACFC \uD559\uC0DD, \uBAA8\uB450\uB97C \uC704\uD55C \uC601\uC5B4\uAD50\uC721\uC758 \uC7A5\uC744 \uB9CC\uB4E4\uACE0\uC790 \uD569\uB2C8\uB2E4." })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "text-crimson-burgundy text-2xl font-bold text-center", children: ["\uD1A0\uC140\uACFC \uD568\uAED8\uD558\uB294 ", _jsx("br", {}), " \uB2F9\uC2E0\uC758 \uC131\uC7A5"] }), _jsxs("div", { className: "text-black text-semibold text-base text-center", children: ["\uC120\uC0DD\uB2D8\uACFC \uD559\uC0DD, \uBAA8\uB450\uB97C \uC704\uD55C ", _jsx("br", {}), "\uC601\uC5B4\uAD50\uC721\uC758 \uC7A5\uC744 \uB9CC\uB4E4\uACE0\uC790 \uD569\uB2C8\uB2E4."] })] })) }), _jsx("div", { className: "w-full flex flex-col md:flex-row md:flex-wrap px-5 gap-5 md:gap-[50px] justify-center max-w-[1200px]", children: _jsx(SectionECards, {}) })] }));
 }

package/layout/template/About/SectionECards.js

@@ -3,6 +3,14 @@ import { useState } from "react";
 import { HiOutlinePlusCircle, HiChevronRight, HiOutlineXCircle, } from "react-icons/hi2";
 export default function SectionECards() {
     const [activeCardIndex, setActiveCardIndex] = useState(null);
+    const onClicks = [
+        () => (window.location.pathname = "/regexam"),
+        () => (window.location.pathname = "/regexam"),
+        () => (window.location.href = "https://smartstore.naver.com/tosel"),
+        () => (window.location.pathname = "/olympiad"),
+        () => (window.location.href = "https://labentry.tosel.co.kr/"),
+        () => (window.location.pathname = "/events/20"),
+    ];
     const cardComponents = (onClicks) => [
         {
             imgSource: "img-aboutus-sectione-exam-min.jpg",
@@ -59,12 +67,13 @@ export default function SectionECards() {
     const handleCloseClick = () => {
         setActiveCardIndex(null);
     };
-    return (_jsx(_Fragment, { children: cardComponents([]).map((card, index) => (_jsxs("div", { className: "w-full p-8 bg-cover bg-center h-[666px] rounded-2xl overflow-hidden text-white gap-5 flex flex-col relative", style: {
+    return (_jsx(_Fragment, { children: cardComponents(onClicks).map((card, index) => (_jsxs("div", { className: "w-full md:w-[555px] p-8 bg-cover bg-center md:h-[666px] h-[400px] rounded-2xl overflow-hidden text-white gap-5 flex flex-col relative break-keep", style: {
                 backgroundImage: `url("/images/aboutus/section-f/${card.imgSource}")`,
-            }, children: [_jsx("div", { className: "text-md font-normal " +
-                        `${activeCardIndex === index ? "opacity-0" : "opacity-100"}`, children: card.type }), _jsxs("div", { className: "text-3xl absolute left-[32px] transition-all duration-100 " +
+            }, children: [_jsx("div", { className: "md:text-lg font-normal " +
+                        `${activeCardIndex === index ? "opacity-0" : "opacity-100"}`, children: card.type }), _jsxs("div", { className: "text-xl md:text-3xl absolute left-[32px] transition-all duration-100 " +
                         `${activeCardIndex === index
                             ? " top-[32px] z-10 text-[24px] font-bold"
-                            : "top-[76px] font-semibold"}`, children: [_jsx("div", { children: card.title1 }), _jsx("div", { children: card.title2 })] }), _jsx("div", { className: `text-xl cursor-pointer z-20 absolute left-[32px] top-[180px] ${activeCardIndex === index ? "opacity-0" : "opacity-100"}`, onClick: () => handleCardClick(index), children: _jsx(HiOutlinePlusCircle, {}) }), _jsxs("div", { className: "w-[490px] text-xl font-normal absolute left-[32px] top-[114px] z-10 transition-all duration-700 " +
-                        `${activeCardIndex === index ? "opacity-100" : "opacity-0"}`, children: [card.description, _jsxs("div", { onClick: card.onClick, className: "mt-10 text-sm font-light flex items-center gap-1 cursor-pointer", children: ["\uB354 \uC54C\uC544\uBCF4\uAE30 ", _jsx(HiChevronRight, {})] })] }), _jsx("div", { className: `w-full h-full bg-black/50 absolute top-0 left-0 transition-opacity duration-500 ${activeCardIndex === index ? "opacity-100" : "opacity-0"}`, style: { backdropFilter: "blur(5px)" } }), _jsx("div", { className: `text-xl cursor-pointer z-20 absolute left-[32px] bottom-[32px] ${activeCardIndex === index ? "opacity-100" : "opacity-0"}`, onClick: handleCloseClick, children: _jsx(HiOutlineXCircle, {}) })] }, index))) }));
+                            : "top-[76px] font-bold"}`, children: [_jsx("div", { children: card.title1 }), _jsx("div", { children: card.title2 })] }), _jsx("div", { className: `text-xl cursor-pointer z-20 absolute left-[32px] top-[180px] ${activeCardIndex === index ? "opacity-0" : "opacity-100"}`, onClick: () => handleCardClick(index), children: _jsx(HiOutlinePlusCircle, {}) }), _jsxs("div", { className: "w-[calc(100vw-104px)] md:w-[490px] text-sm md:text-xl font-normal absolute left-[32px] top-[114px] md:top-[130px] z-10 transition-all duration-700 " +
+                        `${activeCardIndex === index ? "opacity-100" : "opacity-0"}`, children: [card.description, _jsxs("div", { onClick: card.onClick, className: "mt-10 text-sm font-light flex items-center gap-1 cursor-pointer" +
+                                `${activeCardIndex === index ? "opacity-100" : "opacity-0 hidden"}`, children: ["\uB354 \uC54C\uC544\uBCF4\uAE30 ", _jsx(HiChevronRight, {})] })] }), _jsx("div", { className: `w-full h-full bg-black/50 absolute top-0 left-0 transition-opacity duration-500 ${activeCardIndex === index ? "opacity-100" : "opacity-0"}`, style: { backdropFilter: "blur(5px)" } }), _jsx("div", { className: `text-xl cursor-pointer z-20 absolute left-[32px] bottom-[32px] ${activeCardIndex === index ? "opacity-100" : "opacity-0"}`, onClick: handleCloseClick, children: _jsx(HiOutlineXCircle, {}) })] }, index))) }));
 }

package/layout/template/About/SectionF.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function SectionF() {
-    return (_jsxs("div", { className: "w-full bg-gray-light h-auto min-w-[800px] py-16 flex flex-col gap-16 justify-center text-black", children: [_jsxs("div", { className: "text-2xl font-semibold flex justify-center items-center text-center", children: ["\uAD6D\uB0B4 \uC8FC\uC694 \uC5B8\uC5B4/\uAD50\uC721 \uAE30\uAD00\uB4E4\uC774", _jsx("br", {}), "\uD1A0\uC140\uACFC \uD568\uAED8\uD569\uB2C8\uB2E4."] }), _jsxs("div", { className: "flex justify-center items-center text-center flex-col gap-2 font-semibold", children: [_jsx("div", { className: "text-sm", children: "\uCD9C\uC81C \uBC0F \uC778\uC99D:" }), _jsx("img", { src: "/images/aboutus/section-f/logo-KU-min.png", className: "w-[230px]", alt: "" })] }), _jsxs("div", { className: "flex justify-center items-center text-center flex-col font-semibold gap-2", children: [_jsx("div", { className: "text-sm", children: "\uD559\uD68C \uC778\uC99D \uD68D\uB4DD:" }), _jsxs("div", { className: "flex", children: [_jsx("img", { src: "/images/aboutus/section-e/logo-\uD55C\uAD6D\uC74C\uC131\uD559\uD68C@4x.png", className: "w-60", alt: "" }), _jsx("img", { src: "/images/aboutus/section-e/logo-ALAK@4x-min.png", className: "w-60", alt: "" }), _jsx("img", { src: "/images/aboutus/section-e/logo-KAFLE@4x-min.png", className: "w-60", alt: "" }), _jsx("img", { src: "/images/aboutus/section-e/logo-PKETA@4x-min.png", className: "w-60", alt: "" })] })] })] }));
+    return (_jsxs("div", { className: "w-full bg-gray-light h-auto py-16 flex flex-col gap-16 justify-center text-gray-dark", children: [_jsxs("div", { className: "text-lg md:text-2xl font-bold flex justify-center items-center text-center", children: ["\uAD6D\uB0B4 \uC8FC\uC694 \uC5B8\uC5B4/\uAD50\uC721 \uAE30\uAD00\uB4E4\uC774", _jsx("br", {}), "\uD1A0\uC140\uACFC \uD568\uAED8\uD569\uB2C8\uB2E4."] }), _jsxs("div", { className: "flex justify-center items-center text-center flex-col gap-2 font-semibold", children: [_jsx("div", { className: "text-sm", children: "\uCD9C\uC81C \uBC0F \uC778\uC99D:" }), _jsx("img", { src: "/images/aboutus/section-f/logo-KU-min.png", className: "w-[230px]", alt: "" })] }), _jsxs("div", { className: "flex justify-center items-center text-center flex-col font-semibold gap-2", children: [_jsx("div", { className: "text-sm", children: "\uD559\uD68C \uC778\uC99D \uD68D\uB4DD:" }), _jsxs("div", { className: "flex flex-wrap max-w-[1200px] items-start justify-center", children: [_jsxs("div", { className: "flex max-w-[490px] justify-center align-center gap-2.5 flex-1 flex-wrap", children: [_jsx("img", { src: "/images/aboutus/section-e/logo-\uD55C\uAD6D\uC74C\uC131\uD559\uD68C@4x.png", className: "w-60", alt: "" }), _jsx("img", { src: "/images/aboutus/section-e/logo-ALAK@4x-min.png", className: "w-60", alt: "" })] }), _jsxs("div", { className: "flex max-w-[490px] justify-center align-center gap-2.5 flex-1 flex-wrap", children: [_jsx("img", { src: "/images/aboutus/section-e/logo-KAFLE@4x-min.png", className: "w-60", alt: "" }), _jsx("img", { src: "/images/aboutus/section-e/logo-PKETA@4x-min.png", className: "w-60", alt: "" })] })] })] })] }));
 }

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

@@ -1 +1,10 @@
-export default function SectionG(): import("react/jsx-runtime").JSX.Element;
+interface newsProps {
+    media: string;
+    date: string;
+    title: string;
+    link?: string;
+}
+export default function SectionG({ news }: {
+    news: newsProps[];
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/About/SectionG.js

@@ -1,39 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import SelectLG from "../../../widget/template/Select/Select.LG";
-export default function SectionG() {
-    const datas = [
-        {
-            company: "서울신문",
-            date: "2018.06",
-            title: "경찰 임용시험 가산점 받는 자격증, TOSEL",
-        },
-        {
-            company: "서울신문",
-            date: "2018.06",
-            title: "경찰 임용시험 가산점 받는 자격증, TOSEL",
-        },
-        {
-            company: "서울신문",
-            date: "2018.06",
-            title: "경찰 임용시험 가산점 받는 자격증, TOSEL",
-        },
-        {
-            company: "서울신문",
-            date: "2018.06",
-            title: "경찰 임용시험 가산점 받는 자격증, TOSEL",
-        },
-        {
-            company: "서울신문",
-            date: "2018.06",
-            title: "경찰 임용시험 가산점 받는 자격증, TOSEL",
-        },
-    ];
-    const [selectedYear, setSelectedYear] = useState(2018);
+export default function SectionG({ news }) {
+    const [selectedYear, setSelectedYear] = useState(0);
+    const [visibleCount, setVisibleCount] = useState(4); // 초기 표시 개수
     const filteredDatas = selectedYear === 0
-        ? datas
-        : datas.filter((data) => parseInt(data.date.split(".")[0], 10) === selectedYear);
-    return (_jsx("div", { className: "w-full h-auto min-h-[800px] min-w-[800px] py-30 flex flex-col gap-20 text-green-dark items-center", children: _jsxs("div", { className: "w-[1200px] ", children: [_jsxs("div", { className: "text-6xl font-bold flex justify-between items-center text-center", children: [_jsx("div", { children: "\uC5B8\uB860 \uC18D\uC758 \uD1A0\uC140" }), _jsx("div", { className: "text-sm border-1 border-green-dark rounded-xl", children: _jsx(SelectLG, { state: [selectedYear, setSelectedYear], placeholder: "\uBAA8\uB450\uBCF4\uAE30", selectOptions: [
+        ? news
+        : news.filter((data) => parseInt(data.date.split(".")[0], 10) === selectedYear);
+    // '더 보기' 버튼 클릭 시 4개씩 추가로 표시
+    const handleLoadMore = () => {
+        setVisibleCount((prevCount) => prevCount + 4);
+    };
+    return (_jsx("div", { className: "w-full h-auto min-h-[800px] py-10 md:py-30 flex flex-col gap-20 text-green-dark items-center break-keep", children: _jsxs("div", { className: "flex flex-col max-w-[1200px] w-full p-5", children: [_jsxs("div", { className: "text-6xl font-bold flex flex-col sm:flex-row justify-between items-start sm:items-center text-center mb-5", children: [_jsx("div", { className: "text-[36px] md:text-5xl", children: "\uC5B8\uB860 \uC18D\uC758 \uD1A0\uC140" }), _jsx("div", { className: "text-sm mt-2 rounded-lg", children: _jsx(SelectLG, { state: [selectedYear, setSelectedYear], placeholder: "\uBAA8\uB450\uBCF4\uAE30", selectOptions: [
                                     [0, "모두보기"],
                                     [2023, "2023"],
                                     [2022, "2022"],
@@ -45,5 +23,5 @@ export default function SectionG() {
                                     [2016, "2016"],
                                     [2015, "2015"],
                                     [2014, "2014"],
-                                ] }) })] }), filteredDatas.map((data, index) => (_jsx("div", { className: "w-full flex text-center flex-col border-b-1 border-gray-light/50 hover:bg-white/10", children: _jsxs("div", { className: "w-full h-30 py-8 flex flex-col gap-3", children: [_jsxs("div", { className: "flex gap-3 items-center", children: [_jsx("div", { className: "font-semibold", children: data.company }), _jsx("div", { className: "text-sm text-gray-medium", children: data.date })] }), _jsx("div", { className: "text-xl text-left text-black font-light", children: data.title })] }) }, index)))] }) }));
+                                ] }) })] }), filteredDatas.slice(0, visibleCount).map((data, index) => (_jsx("a", { href: data.link, className: "w-full flex text-center flex-col border-b-1 border-gray-light/50 hover:bg-gray-light/20", children: _jsxs("div", { className: "w-full h-fit py-4 md:py-8 flex flex-col gap-3 pl-2", children: [_jsxs("div", { className: "flex gap-3 items-center", children: [_jsx("div", { className: "text-green-dark font-bold md:text-base text-xs", children: data.media }), _jsx("div", { className: "md:text-base text-xs text-gray-medium", children: data.date })] }), _jsx("div", { className: "md:text-xl text-base text-left text-black font-light", children: data.title })] }) }, index))), visibleCount < filteredDatas.length && (_jsx("div", { className: "flex justify-center items-center", children: _jsx("button", { onClick: handleLoadMore, className: "mt-4 p-2 bg-green-light text-green-dark rounded  w-full sm:w-20 hover:bg-green-dark hover:text-white duration-300", children: "\uB354 \uBCF4\uAE30" }) }))] }) }));
 }

package/layout/template/Regexam/Types.js

@@ -280,7 +280,7 @@ const ExamCard = ({ id, type, name, place, isHallofFame, report, certificate, ma
                         },
                     ] }),
             ],
-        ], children: _jsxs("div", { className: cn(ghostCard), children: [_jsxs("div", { className: cn(card), children: [_jsx("div", { className: cn(imageWrapper), children: _jsx("div", { className: "h-20 xxxs:h-30 md:h-40 flex mt-10 md:mt-16", children: _jsx("img", { ref: elementRef, src: imgSrc, alt: "", className: cn("max-w-full h-auto transform transition-all duration-1000 delay-0 ease-in-out", isVisible
+        ], children: _jsxs("div", { className: cn(ghostCard), children: [_jsxs("div", { className: cn(card), children: [_jsx("div", { className: cn(imageWrapper), children: _jsx("div", { className: "h-20 xxxs:h-30 md:h-40 flex mt-10 md:mt-16", ref: elementRef, children: _jsx("img", { src: imgSrc, alt: "", className: cn("max-w-full h-auto transform transition-all duration-1000 delay-0 ease-in-out", isVisible
                                         ? "translate-y-0 opacity-100"
                                         : "translate-y-10 opacity-0") }) }) }), _jsxs("div", { className: cn(contentsWrapper), children: [_jsxs("div", { className: cn(headline), children: [_jsxs("div", { className: cn(titleWrapper), children: [_jsx("div", { className: cn(title), children: name }), _jsx("div", { className: cn(subtitle), children: place })] }), _jsx("div", { className: cn(typetag), children: type })] }), _jsxs("div", { className: cn(bottomWrapper), children: [_jsxs("div", { className: cn(bottomBox), children: [_jsx("div", { children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", className: "size-6", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z" }) }) }), _jsxs("div", { className: cn(boxContentsWrapper, "ml-2"), children: [_jsx("div", { className: cn(miniTitle), children: "\uC751\uC2DC\uB8CC" }), _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { children: cocoonPrice && (_jsxs("div", { className: "text-xs font-medium text-gray-dark", children: ["cocoon: ", cocoonPrice] })) }), _jsxs("div", { className: "text-xs font-medium text-gray-dark", children: ["Pre-Starter ~ Junior: ", mainPrice] }), _jsxs("div", { className: "text-xs font-medium text-gray-dark", children: ["High Junior: ", subPrice] })] })] })] }), _jsxs("div", { className: cn(bottomBoxWrapper), children: [_jsxs("div", { className: cn(bottomBox, isHallofFame ? "bg-green-light" : "bg-crimson-burgundy/20"), children: [_jsx("div", { children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: cn(isHallofFame
                                                                     ? "size-6 fill-yellow-500"

package/layout/template/Sign.d.ts

@@ -2,6 +2,7 @@ import Box from "./sign/Box";
 import Button from "./sign/Button";
 import Check from "./sign/Check";
 import Layout from "./sign/Layout";
+import OAuth from "./sign/Oauth";
 import WithTitle from "./sign/WithTitle";
 declare const Sign: {
     Box: typeof Box;
@@ -11,5 +12,6 @@ declare const Sign: {
         WithTitle: typeof WithTitle;
     };
     Layout: typeof Layout;
+    OAuth: typeof OAuth;
 };
 export default Sign;

package/layout/template/Sign.js

@@ -2,6 +2,7 @@ import Box from "./sign/Box";
 import Button from "./sign/Button";
 import Check from "./sign/Check";
 import Layout from "./sign/Layout";
+import OAuth from "./sign/Oauth";
 import WithTitle from "./sign/WithTitle";
 const Sign = {
     Box,
@@ -11,5 +12,6 @@ const Sign = {
         WithTitle,
     },
     Layout,
+    OAuth,
 };
 export default Sign;

package/layout/template/sign/Box.d.ts

@@ -2,8 +2,9 @@ interface BoxProps {
     children: React.ReactNode;
     sizes?: string;
     className?: string;
+    texts?: string[];
 }
-declare function Box({ children, className }: BoxProps): import("react/jsx-runtime").JSX.Element;
+declare function Box({ children, className, texts }: BoxProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Box {
     var Fix: ({ children, className }: Omit<BoxProps, "sizes">) => import("react/jsx-runtime").JSX.Element;
 }

package/layout/template/sign/Box.js

@@ -1,12 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../util";
-function Box({ children, className }) {
+function Box({ children, className, texts }) {
     const container = {
         sizes: "w-full p-5",
         style: "shadow-main bg-white rounded-xl hover:shadow-green duration-300",
         className,
     };
-    return _jsx("div", { className: cn(container), children: children });
+    const alarmText = {
+        textStyles: "text-crimson-burgundy font-medium text-xs leading-none",
+    };
+    return (_jsxs("div", { className: "w-full", children: [_jsx("div", { className: cn(container), children: children }), texts && (_jsx("div", { className: "mt-2", children: texts.map((text) => (_jsx("div", { className: cn(alarmText), children: text }))) }))] }));
 }
 function Fix({ children, className }) {
     return (_jsx(Box, { className: className, sizes: "w-full max-w-112.5 h-65 xs:h-67.5 pt-8 xs:pt-10.25 px-2.5 xs:px-5 pb-2.5 xs:pb-5", children: children }));

package/layout/template/sign/Button.d.ts

@@ -6,6 +6,7 @@ interface ButtonProps {
     disabled?: boolean;
     size?: string;
     icon?: ReactNode;
+    bg?: string;
 }
 interface SelectButtonProps {
     state: State<string>;
@@ -18,9 +19,9 @@ interface SelectButtonProps {
 interface SelectButtonWithTitleProps extends SelectButtonProps {
     title: string;
 }
-declare function Button({ title, onClick, disabled, size, icon }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function Button({ title, onClick, disabled, size, icon, bg }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Button {
-    var Inner: ({ title, onClick }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    var Inner: ({ title, onClick, bg }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
     var Choose: typeof Selection;
 }
 declare function Selection({ buttons, state }: SelectButtonProps): import("react/jsx-runtime").JSX.Element;

package/layout/template/sign/Button.js

@@ -1,10 +1,10 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../../util";
-function Button({ title, onClick, disabled, size, icon }) {
+function Button({ title, onClick, disabled, size, icon, bg }) {
     const container = {
         sizes: size ?? "w-112.5 h-13.5",
         displays: "flex items-center justify-center gap-4",
-        backgrounds: !disabled ? "bg-green-dark" : "bg-gray-medium",
+        backgrounds: !disabled ? bg ?? "bg-green-dark" : "bg-gray-medium",
         cursors: !disabled ? "cursor-pointer" : "cursor-default",
         styles: "rounded-lgx text-white font-medium text-lg",
         animations: "hover:shadow-green duration-300",
@@ -15,8 +15,8 @@ function Button({ title, onClick, disabled, size, icon }) {
             return onClick();
         }, className: cn(container), children: [title, icon && icon] }));
 }
-function Inner({ title, onClick }) {
-    return (_jsx(Button, { title: title, onClick: onClick, size: "w-full sm:w-102.5 h-13.5" }));
+function Inner({ title, onClick, bg }) {
+    return (_jsx(Button, { title: title, onClick: onClick, size: "w-full sm:w-102.5 h-13.5", bg: bg }));
 }
 function Selection({ buttons, state }) {
     const [value, setValue] = state;

package/layout/template/sign/Oauth.d.ts

@@ -0,0 +1,6 @@
+type OAuthType = "naver" | "kakaotalk";
+interface OAuthProps {
+    type: OAuthType;
+}
+export default function OAuth({ type }: OAuthProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/sign/Oauth.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+import SVG from "../../../asset/SVG";
+export default function OAuth({ type }) {
+    const socialBox = {
+        display: "flex flex-row",
+        sizes: "xs:max-w-[210px] w-full h-15 rounded-lg",
+        animations: "duration-300",
+        backgrounds: "border-1 border-gray-light",
+        styles: type === "naver" ? "hover:bg-[#03C75A] group" : "hover:bg-[#FEE500]",
+    };
+    const textStyle = {
+        sizes: "h-full w-full ",
+        displays: "flex justify-center items-center",
+        styles: type === "naver" ? " group-hover:text-white" : "",
+    };
+    return (_jsxs("div", { className: cn(socialBox), onClick: () => { }, children: [_jsx("div", { className: "h-full aspect-square flex justify-center items-center", children: _jsx(SVGProvider, { type: type }) }), _jsx("div", { className: "h-full" }), _jsx("div", { className: cn(textStyle), children: textParser(type) })] }));
+}
+const textParser = (type) => {
+    if (type === "naver")
+        return "네이버로 로그인";
+    if (type === "kakaotalk")
+        return "카카오톡으로 로그인";
+    return null;
+};
+function SVGProvider({ type }) {
+    if (type === "naver")
+        return (_jsx(SVG.Collab.Naver, { color: "fill-[#03C75A] group-hover:fill-white", size: "size-5" }));
+    if (type === "kakaotalk")
+        return _jsx(SVG.Collab.Kakao, {});
+    return null;
+}

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.178
+1.0.182

package/widget/template/CheckBox.js

@@ -15,5 +15,5 @@ export default function Checkbox({ state: [checked, setChecked], labels, option,
         green: "checked:bg-[#DFE6E5]",
     };
     const { disabled } = option ?? {};
-    return (_jsxs("div", { className: "w-auto h-6 flex items-center ", children: [_jsx("input", { type: "checkbox", className: `check-box mr-2 appearance-none w-6 h-6 border-2 border-[#E8EBF3] rounded-md ${checkBoxColor[color]} hover:box-shadow`, disabled: typeof disabled === "boolean" && disabled, checked: checked, onChange: (e) => setChecked(e.target.checked) }), _jsx("label", { htmlFor: "checkbox1", children: labels })] }));
+    return (_jsxs("div", { className: "w-auto h-6 flex items-center ", children: [_jsx("input", { type: "checkbox", className: `check-box mr-2 appearance-none w-6 h-6 border-2 border-[#E8EBF3] rounded-md ${checkBoxColor[color]} hover:box-shadow`, disabled: typeof disabled === "boolean" && disabled, checked: checked, onChange: (e) => setChecked(e.target.checked) }), _jsx("label", { htmlFor: "checkbox1", className: "text-xs", children: labels })] }));
 }

package/widget/template/Select/Select.LG.js

@@ -26,7 +26,7 @@ export default function SelectLG({ state, selectOptions: selectOptionsInput, pla
     const [search, setSearch] = useState("");
     const [isOpen, setIsOpen] = useState(false);
     const [isHover, setIsHover] = useState(false);
-    const [index, setIndex] = useState();
+    const [index, setIndex] = useState(0);
     const listRef = useRef(null);
     const itemRefs = useRef([]);
     useFlag({ state: [false, setIsOpen], safe: "overlay" });
@@ -63,14 +63,14 @@ export default function SelectLG({ state, selectOptions: selectOptionsInput, pla
     const button = {
         displays: "flex items-center",
         sizes: `${widthSize[option?.width ?? "md"]} ${heightSize[option?.height ?? "sm"]}`,
-        styles: "pl-1 rounded-md focus:outline-none duration-100 text-gray-400",
+        styles: "px-1 rounded-md focus:outline-none duration-100 text-gray-400",
         backgrounds: isDark && "bg-[#282828]",
-        shadow: isOpen || isHover ? "box-shadow" : "shadow-none",
+        shadow: isHover ? "shadow-green" : "shadow-main",
     };
     const input = {
         positions: "absolute z-30",
         layouts: cn(button),
-        styles: "focus:outline-none text-xs pl-1.5",
+        styles: "outline-none focus:shadow-green text-xs pl-1.5 duration-300",
     };
     const body = {
         positions: "absolute z-30",
@@ -84,15 +84,21 @@ export default function SelectLG({ state, selectOptions: selectOptionsInput, pla
         displays: "flex items-center",
         sizes: "h-7 w-full",
         paddings: "px-2",
-        styles: "rounded-sm duration-500",
+        styles: "rounded-md duration-500",
         backgrounds: !flag
             ? !isDark
-                ? "hover:bg-green-dark"
+                ? "hover:bg-green-light"
                 : "bg-[#282828] hover:bg-[#8F7B39] "
             : !isDark
                 ? "bg-green-dark"
                 : "bg-[#8F7B39]",
-        fonts: !isDark ? "text-xs text-gray-dim hover:text-white" : "text-white ",
+        fonts: !flag
+            ? !isDark
+                ? "text-xs text-gray-dim hover:text-green-dark"
+                : "text-white"
+            : !isDark
+                ? "text-xs text-white"
+                : "text-green-dark",
     });
     const inputTransition = useTransition(isOpen, {
         from: { top: 44 },
@@ -109,6 +115,7 @@ export default function SelectLG({ state, selectOptions: selectOptionsInput, pla
     return (_jsxs("div", { className: cn(container), onClick: () => setIsOwn(true), onKeyDown: onKeyDown, children: [_jsx("button", { onClick: () => setIsOpen(!isOpen), className: cn(button), onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), children: value ? (_jsx("div", { className: cn(label(false)), children: selectOptions?.find((option) => value === option.value)?.title })) : (_jsx("div", { className: "text-xs pl-1", children: placeholder ?? "선택해주세요" })) }), inputTransition((styles, item) => isLong &&
                 item && (_jsx(animated.input, { style: styles, placeholder: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD558\uC138\uC694", className: cn(input), onChange: (e) => setSearch(e.target.value) }))), bodyTransitions((styles, item) => {
                 return (item && (_jsx(animated.div, { style: styles, className: cn(body), ref: listRef, children: filteredOptions?.map(({ value, title }, order) => (_jsx("section", { children: _jsx("button", { ref: (el) => (itemRefs.current[order] = el), onClick: () => {
+                                setIndex(order);
                                 setValue(value);
                                 setText(String(title));
                                 return setIsOpen(false);