@edu-tosel/design 1.0.351 → 1.0.354

package/interface/EducationalVideo.d.ts

@@ -0,0 +1,20 @@
+export declare const educationalVideoKeys: readonly ["id", "index", "category", "title", "subTitle", "content", "youtubeId", "referenceUrl", "thumbnailUrl", "isValid", "createdAt", "updatedAt"];
+export interface EducationalVideo {
+    id: number;
+    index: number;
+    category: string;
+    title: string;
+    subTitle: string;
+    content: string;
+    youtubeId: string;
+    referenceUrl: string;
+    thumbnailUrl: string;
+    isValid: boolean;
+    createdAt: Date;
+    updatedAt: Date;
+}
+export type EducationalVideoAutoSetKeys = "id" | "createdAt" | "updatedAt";
+export interface EducationalVideoCreate extends Omit<EducationalVideo, EducationalVideoAutoSetKeys> {
+}
+export interface EducationalVideoUpdate extends Partial<EducationalVideoCreate> {
+}

package/interface/EducationalVideo.js

@@ -0,0 +1,3 @@
+export const educationalVideoKeys = [
+    'id', 'index', 'category', 'title', 'subTitle', 'content', 'youtubeId', 'referenceUrl', 'thumbnailUrl', 'isValid', 'createdAt', 'updatedAt'
+];

package/interface/Interview.d.ts

@@ -0,0 +1,42 @@
+export declare const interviewKeys: readonly ["id", "index", "category", "title", "subTitle", "content", "profile", "isValid", "createdAt", "updatedAt"];
+export declare const interviewCategories: readonly ["LAB", "REG", "SPO", "VCO"];
+export type InterviewCategoryType = (typeof interviewCategories)[number];
+export interface InterviewText {
+    title: string;
+    label: string;
+    content: string;
+    align?: 'left' | 'center' | 'right' | null;
+}
+export interface InterviewContent {
+    content?: InterviewText[] | null;
+    videoId?: string | null;
+    imageUrl?: string | null;
+    align?: 'left' | 'center' | 'right' | null;
+    type: "A" | "B" | "C" | "D";
+}
+export interface InterviewProfile {
+    name: string;
+    description: string;
+    profileUrl?: string | null;
+    tag?: string | null;
+    tagBackgroundColor?: string | null;
+    textColor?: string | null;
+    content?: string | null;
+}
+export interface Interview {
+    id: number;
+    index: number;
+    category: InterviewCategoryType;
+    title: string;
+    subTitle: string;
+    content?: InterviewContent[] | null;
+    profile?: InterviewProfile | null;
+    isValid: boolean;
+    createdAt: Date;
+    updatedAt: Date;
+}
+export type InterviewAutoSetKeys = "id" | "createdAt" | "updatedAt";
+export interface InterviewCreate extends Omit<Interview, InterviewAutoSetKeys> {
+}
+export interface InterviewUpdate extends Partial<InterviewCreate> {
+}

package/interface/Interview.js

@@ -0,0 +1,9 @@
+export const interviewKeys = [
+    'id', 'index', 'category', 'title', 'subTitle', 'content', 'profile', 'isValid', 'createdAt', 'updatedAt'
+];
+export const interviewCategories = [
+    "LAB", // Lab
+    "REG", // 정기시험
+    "SPO", // Speaking Olympiad
+    "VCO", // Voca Olympiad
+];

package/interface/News.d.ts

@@ -0,0 +1,24 @@
+export declare const newsKeys: readonly ["id", "index", "category", "title", "subTitle", "content", "imgUrl", "author", "isValid", "isPinned", "createdAt", "updatedAt"];
+export declare const newsCategories: readonly ["test", "lab", "education", "tosel", "event"];
+export type NewsCategoryType = (typeof newsCategories)[number];
+export declare const newsAuthors: readonly ["tosel", "tosel-lab", "professor", "administrator", "esg"];
+export type NewsAuthorType = (typeof newsAuthors)[number];
+export interface News {
+    id: number;
+    index: number;
+    category: NewsCategoryType;
+    title: string;
+    subTitle: string;
+    content: string;
+    imgUrl: string;
+    author: NewsAuthorType;
+    isValid: boolean;
+    isPinned: boolean;
+    createdAt: Date;
+    updatedAt: Date;
+}
+export type NewsAutoSetKeys = "id" | "createdAt" | "updatedAt";
+export interface NewsCreate extends Omit<News, NewsAutoSetKeys> {
+}
+export interface NewsUpdate extends Partial<NewsCreate> {
+}

package/interface/News.js

@@ -0,0 +1,17 @@
+export const newsKeys = [
+    'id', 'index', 'category', 'title', 'subTitle', 'content', 'imgUrl', 'author', 'isValid', 'isPinned', 'createdAt', 'updatedAt'
+];
+export const newsCategories = [
+    "test", // 시험
+    "lab", // Lab
+    "education", // 공교육
+    "tosel", // TOSEL
+    "event", // 이벤트
+];
+export const newsAuthors = [
+    "tosel",
+    "tosel-lab",
+    "professor",
+    "administrator",
+    "esg"
+];

package/layout/template/home/Education.d.ts

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

package/layout/template/home/Education.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState, useEffect } from "react";
+import { cn } from "../../../util";
+export default function Education({ educationalVideos }) {
+    const scrollContainerRef = useRef(null);
+    const cardWidth = 320; // card width
+    const [activeVideoIndex, setActiveVideoIndex] = useState(0); // 초기값: 첫 번째 비디오
+    const recentVideos = useMemo(() => {
+        return [...educationalVideos]
+            .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+            .slice(0, 4);
+    }, [educationalVideos]);
+    // 스크롤 위치 상태 관리
+    const [canScrollLeft, setCanScrollLeft] = useState(false);
+    const [canScrollRight, setCanScrollRight] = useState(true);
+    // 스크롤 위치 확인 함수
+    const checkScrollPosition = () => {
+        if (scrollContainerRef.current) {
+            const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;
+            // 왼쪽 끝 확인 (약간의 여유값 포함)
+            setCanScrollLeft(scrollLeft > 5);
+            // 오른쪽 끝 확인 (약간의 여유값 포함)
+            setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 5);
+        }
+    };
+    // 초기 로드시와 recentVideos 변경시 스크롤 위치 확인
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            checkScrollPosition();
+        }, 100); // DOM 렌더링 후 확인
+        return () => clearTimeout(timer);
+    }, [recentVideos]);
+    // 스크롤 이벤트 리스너 등록
+    useEffect(() => {
+        const scrollContainer = scrollContainerRef.current;
+        if (scrollContainer) {
+            scrollContainer.addEventListener("scroll", checkScrollPosition);
+            return () => {
+                scrollContainer.removeEventListener("scroll", checkScrollPosition);
+            };
+        }
+    }, []);
+    const handleScroll = (direction) => {
+        if (scrollContainerRef.current) {
+            const scrollAmount = cardWidth;
+            const currentScrollLeft = scrollContainerRef.current.scrollLeft;
+            const newScrollLeft = direction === "left"
+                ? Math.max(currentScrollLeft - scrollAmount, 0)
+                : currentScrollLeft + scrollAmount;
+            scrollContainerRef.current.scrollTo({
+                left: newScrollLeft,
+                behavior: "smooth",
+            });
+        }
+    };
+    const container = {
+        positions: "relative z-10 group",
+        displays: "flex flex-col",
+        textStyles: "break-keep antialiased",
+    };
+    const cardPositioning = {
+        displays: "flex flex-nowrap",
+        sizes: "w-screen",
+    };
+    const cardWrapper = {
+        sizes: "w-full overflow-x-auto scroll-smooth scrollbar-hidden scroll-px-[20px]",
+        display: "flex flex-nowrap vertical-top",
+        spacings: "px-5 pt-4 md:pt-6 pb-12",
+        snap: "snap-x snap-mandatory scroll-ms-0",
+    };
+    const cardDeck = {
+        displays: "inline-flex",
+        spacings: "gap-5 xl:mr-[calc(100vw-1200px)]",
+    };
+    const buttonPositioning = {
+        displays: "flex flex-row",
+        sizes: "w-full h-full",
+        spacings: "xl:pr-[calc(50vw-600px)] md:pr-[62px] pl-2 pr-4 gap-5",
+        positions: "justify-end items-center duration-300",
+        hovering: "group pointer-events-none",
+    };
+    const hoverButton = {
+        sizes: "rounded-full w-9 h-9",
+        animation: "duration-300",
+        test: "bg-gray-medium/50 hover:bg-gray-medium pointer-events-auto backdrop-blur-sm",
+    };
+    const disabledButton = {
+        sizes: "rounded-full w-9 h-9",
+        animation: "duration-300",
+        test: "bg-gray-medium/20 pointer-events-none backdrop-blur-sm opacity-30",
+    };
+    return (_jsx("div", { className: cn(container), children: _jsx("div", { className: cn(cardPositioning), children: _jsx("div", { className: cn(cardWrapper, "comp-customer-videos__cards o-content-container u-hide-on-tablet u-hide-on-mobile"), ref: scrollContainerRef, children: _jsx("div", { className: cn(cardDeck), children: recentVideos.map((video, index) => (_jsx(VideoCard, { video: video, isActive: index === activeVideoIndex, onHover: () => setActiveVideoIndex(index) }, video.id))) }) }) }) }));
+}
+function VideoCard({ video, isActive, onHover }) {
+    const ghostCard = {
+        displays: "flex",
+        spacings: "ms-0 ps-0",
+        scroll: "snap-start",
+    };
+    const card = {
+        graphics: "shadow-main",
+        sizes: isActive ? "w-96 md:w-[500px] h-72" : "w-56 md:w-72 h-72",
+        backgrounds: "bg-white",
+        hover: "hover:shadow-main-hover",
+        position: "xl:translate-x-[calc(50vw-665px)] md:translate-x-[56px]",
+        transition: "duration-500 ease-in-out",
+        displays: "relative display-block overflow-hidden",
+        fonts: "font-pretendard-var",
+        radius: "rounded-lg md:rounded-xl",
+    };
+    const videoContainer = {
+        sizes: "w-full h-full",
+        displays: "flex items-center justify-center",
+        backgrounds: "bg-black",
+        overflow: "overflow-hidden",
+        positions: "relative",
+    };
+    const titleBox = {
+        container: {
+            positions: "absolute inset-0 flex flex-col justify-center items-start z-10 gap-2",
+            sizes: "w-full h-full",
+            paddings: "p-4 md:p-6",
+            backgrounds: "bg-gradient-to-t from-black/70 via-black/30 to-transparent",
+        },
+        title: {
+            fonts: "text-xl md:text-2xl lg:text-3xl font-bold",
+            colors: "text-white",
+        },
+        subtitle: {
+            fonts: "text-sm md:text-base font-medium",
+            colors: "text-white/90",
+            transitions: "transition-all duration-300",
+        },
+    };
+    // 썸네일 URL: video.thumbnailUrl이 있으면 사용, 없으면 YouTube 썸네일 사용
+    const thumbnailUrl = video.thumbnailUrl || `https://img.youtube.com/vi/${video.youtubeId}/maxresdefault.jpg`;
+    return (_jsx("div", { className: cn(ghostCard), children: _jsx("div", { className: cn(card), onMouseEnter: onHover, children: _jsxs("div", { className: cn(videoContainer), children: [_jsx("div", { className: cn("w-full h-full transition-transform duration-500 ease-in-out relative", isActive ? "scale-110" : "scale-100"), children: _jsx("img", { src: thumbnailUrl, alt: video.title, className: "w-full h-full object-cover", onError: (e) => {
+                                // thumbnailUrl이 제공되지 않은 경우에만 YouTube 썸네일로 대체
+                                if (!video.thumbnailUrl) {
+                                    e.currentTarget.src = `https://img.youtube.com/vi/${video.youtubeId}/hqdefault.jpg`;
+                                }
+                            } }) }), _jsxs("div", { className: cn(titleBox.container), children: [_jsx("div", { className: cn(titleBox.title), children: video.title }), video.subTitle && (_jsx("div", { className: cn(titleBox.subtitle, isActive ? "opacity-100 max-h-20" : "opacity-0 max-h-0 overflow-hidden"), children: video.subTitle }))] })] }) }) }));
+}

package/layout/template/home/Interviews.d.ts

@@ -0,0 +1,6 @@
+import { Interview } from "../../../interface/Interview";
+import { OnClick } from "../../../interface";
+export default function Interviews({ interviews, onClick }: {
+    interviews: Interview[];
+    onClick: OnClick;
+}): import("react/jsx-runtime").JSX.Element;

package/layout/template/home/Interviews.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { cn } from "../../../util";
+export default function Interviews({ interviews, onClick }) {
+    const sortedInterviews = useMemo(() => {
+        return [...interviews]
+            .sort((a, b) => {
+            // 먼저 index로 정렬
+            if (a.index !== b.index) {
+                return a.index - b.index;
+            }
+            // index가 같으면 createdAt으로 최신순 정렬
+            return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+        })
+            .slice(0, 3); // 최대 3개만 선택
+    }, [interviews]);
+    return (_jsx("div", { className: "w-full bg-[#0a0e27] py-16 px-5 md:px-8", children: _jsxs("div", { className: "max-w-7xl mx-auto", children: [_jsxs("div", { className: "flex flex-col md:flex-row justify-between items-start md:items-center mb-12", children: [_jsxs("div", { className: "flex flex-col gap-2 mb-4 md:mb-0", children: [_jsx("div", { className: "text-[#5b9bd5] text-sm md:text-base font-semibold", children: "SUCCESS STORIES" }), _jsx("h2", { className: "text-3xl md:text-4xl lg:text-5xl font-bold text-white", children: "TOSEL\uACFC \uD568\uAED8 \uC131\uC7A5\uD55C \uD559\uC0DD\uB4E4" })] }), _jsx("button", { onClick: (e) => onClick(e), className: "text-white underline text-sm md:text-base hover:text-[#5b9bd5] transition-colors", children: "\uB354 \uB9CE\uC740 \uC0AC\uB840 \uBCF4\uAE30" })] }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8", children: sortedInterviews.map((interview, index) => {
+                        if (!interview.profile)
+                            return null;
+                        const { profile } = interview;
+                        const avatarColors = [
+                            "bg-purple-500",
+                            "bg-green-500",
+                            "bg-gray-500"
+                        ];
+                        const tagColors = [
+                            { bg: "bg-blue-600", text: "text-white" },
+                            { bg: "bg-green-600", text: "text-white" },
+                            { bg: "bg-purple-600", text: "text-white" }
+                        ];
+                        const avatarColor = avatarColors[index % avatarColors.length];
+                        const tagColor = tagColors[index % tagColors.length];
+                        return (_jsxs("div", { className: "bg-[#1a1f3a] rounded-xl p-6 md:p-8 shadow-lg hover:shadow-xl transition-shadow duration-300 flex flex-col", children: [_jsxs("div", { className: "flex items-start gap-4 mb-4", children: [_jsx("div", { className: cn("w-12 h-12 md:w-14 md:h-14 rounded-full flex-shrink-0 flex items-center justify-center", avatarColor), children: profile.profileUrl ? (_jsx("img", { src: profile.profileUrl, alt: profile.name, className: "w-full h-full rounded-full object-cover" })) : (_jsx("div", { className: "text-white text-lg md:text-xl font-bold", children: profile.name.charAt(0) })) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-white font-semibold text-base md:text-lg mb-1", children: profile.name }), _jsx("div", { className: "text-gray-400 text-sm md:text-base", children: profile.description })] })] }), profile.tag && (_jsx("div", { className: cn("inline-block px-3 py-1 rounded text-xs md:text-sm font-medium mb-4 w-fit", profile.tagBackgroundColor || tagColor.bg, profile.textColor || tagColor.text), children: profile.tag })), profile.content && (_jsxs("div", { className: "text-white text-sm md:text-base leading-relaxed mb-6 flex-1", children: ["\"", profile.content, "\""] }))] }, interview.id));
+                    }) })] }) }));
+}

package/layout/template/home/News.d.ts

@@ -0,0 +1,4 @@
+import { News as NewsType } from "../../../interface/News";
+export default function News({ newsList }: {
+    newsList: NewsType[];
+}): import("react/jsx-runtime").JSX.Element;

package/layout/template/home/News.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+import { useMemo } from "react";
+// 날짜 포맷팅 함수
+const formatDate = (date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}.${month}.${day}`;
+};
+export default function News({ newsList }) {
+    // createdAt 기준으로 최신 4개 선택
+    const selectedNews = useMemo(() => {
+        const sorted = [...newsList]
+            .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+            .slice(0, 4);
+        const main = sorted[0]; // 가장 최신 1개
+        const sub = sorted.slice(1, 4); // 나머지 3개
+        return { main, sub };
+    }, [newsList]);
+    if (!selectedNews.main) {
+        return _jsx("div", {});
+    }
+    const container = {
+        displays: "flex flex-col lg:flex-row lg:items-start",
+        spacings: "gap-6 lg:gap-8",
+        sizes: "w-full",
+        boundaries: "px-4 md:px-6 lg:px-8",
+    };
+    const leftCont = {
+        displays: "flex flex-col justify-start items-center lg:items-end",
+        sizes: "w-full lg:w-[51.5%]",
+    };
+    const mainArticle = {
+        displays: "flex flex-col lg:self-end",
+        sizes: "w-full max-w-full lg:max-w-2xl",
+    };
+    const imgArea = {
+        positions: "relative",
+        displays: "flex items-center justify-center group",
+        sizes: "w-full max-w-full lg:max-w-2xl h-64 md:h-72 lg:h-76 rounded-2xl overflow-hidden",
+        spacings: "mb-0 p-4 md:p-6 lg:p-8",
+        cursor: "cursor-pointer",
+        margins: "lg:ml-auto",
+        hover: "hover:scale-105",
+        transitions: "transition-transform duration-300",
+    };
+    const imgElm = {
+        positions: "absolute inset-0",
+        sizes: "w-full h-full",
+        backgrounds: "bg-cover bg-center",
+        filters: "brightness-50",
+        transitions: "transition-all duration-300",
+    };
+    const textElm = {
+        positions: "relative z-10",
+        displays: "flex flex-col",
+        spacings: "gap-4",
+        textStyles: "text-white",
+    };
+    const newsTitle = {
+        textStyles: "text-xl md:text-2xl lg:text-3xl font-bold leading-tight text-white",
+    };
+    const newsDesc = {
+        textStyles: "text-sm md:text-base lg:text-lg text-white/90 line-clamp-3",
+    };
+    const rightCont = {
+        displays: "flex flex-col justify-start",
+        sizes: "w-full lg:w-2/5 lg:max-w-lg",
+    };
+    const rightItem = {
+        displays: "flex flex-col",
+        sizes: "w-full min-h-[100px]",
+        spacings: "py-5 md:py-3 border-b border-gray-200 last:border-0",
+    };
+    const rightItemLink = {
+        displays: "flex items-start justify-between flex-col sm:flex-row",
+        spacings: "gap-3 sm:gap-4 md:gap-8",
+        cursor: "cursor-pointer",
+        hover: "hover:opacity-80",
+        transitions: "transition-opacity",
+        sizes: "w-full",
+    };
+    const textArea = {
+        displays: "flex flex-col",
+        sizes: "flex-1",
+        spacings: "gap-2",
+    };
+    const rightTitle = {
+        textStyles: "text-base md:text-lg font-bold text-gray-900 mb-2",
+    };
+    const rightDesc = {
+        textStyles: "text-sm md:text-base text-gray-600 line-clamp-2",
+    };
+    const rightDateArea = {
+        displays: "flex items-center",
+        sizes: "flex-shrink-0",
+    };
+    const rightDateText = {
+        textStyles: "text-xs md:text-sm text-gray-600 whitespace-nowrap",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(leftCont), children: _jsx("article", { className: cn(mainArticle), children: _jsx("a", { href: "#", className: "block", children: _jsxs("div", { className: cn(imgArea), children: [_jsx("div", { className: cn(imgElm), style: { backgroundImage: `url(${selectedNews.main.imgUrl})` } }), _jsxs("div", { className: cn(textElm), children: [_jsx("h3", { className: cn(newsTitle), children: selectedNews.main.title }), selectedNews.main.subTitle && (_jsx("div", { className: cn(newsDesc), children: selectedNews.main.subTitle }))] })] }) }) }) }), _jsx("div", { className: cn(rightCont), children: selectedNews.sub.map((news) => {
+                    const newsDate = new Date(news.createdAt);
+                    return (_jsx("div", { className: cn(rightItem), children: _jsxs("a", { href: "#", className: cn(rightItemLink), children: [_jsxs("div", { className: cn(textArea), children: [_jsx("h5", { className: cn(rightTitle), children: news.title }), news.subTitle && (_jsx("p", { className: cn(rightDesc), children: news.subTitle }))] }), _jsx("div", { className: cn(rightDateArea), children: _jsx("span", { className: cn(rightDateText), children: formatDate(newsDate) }) })] }) }, news.id));
+                }) })] }));
+}

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

@@ -7,6 +7,9 @@ import Service from "./Service";
 import Shortcut from "./Shortcut";
 import Float from "./Float";
 import Session from "./Session";
+import News from "./News";
+import Education from "./Education";
+import Interviews from "./Interviews";
 declare const Home: {
     Layout: typeof Layout;
     Navigation: typeof Navigation;
@@ -17,5 +20,8 @@ declare const Home: {
     NewsPaper: typeof NewsPaper;
     Float: typeof Float;
     Session: typeof Session;
+    News: typeof News;
+    Education: typeof Education;
+    Interviews: typeof Interviews;
 };
 export default Home;

package/layout/template/home/index.js

@@ -7,6 +7,9 @@ import Service from "./Service";
 import Shortcut from "./Shortcut";
 import Float from "./Float";
 import Session from "./Session";
+import News from "./News";
+import Education from "./Education";
+import Interviews from "./Interviews";
 const Home = {
     Layout,
     Navigation,
@@ -16,6 +19,9 @@ const Home = {
     Service,
     NewsPaper,
     Float,
-    Session
+    Session,
+    News,
+    Education,
+    Interviews
 };
 export default Home;

package/layout/template/home/layout/Header.d.ts

@@ -23,7 +23,7 @@ type MenuData = {
     };
     content: MenuItem[];
 };
-type ExtendedButton = _Button & {
+export type ExtendedButton = _Button & {
     menu?: MenuData;
 };
 export default function Header({ logo, rightButton, contents, }: {

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

@@ -1,7 +1,8 @@
-import { Button, OnClick } from "../../../../interface";
+import { ExtendedButton } from "./Header";
+import { OnClick } from "../../../../interface";
 import { ReactNode } from "react";
 export default function Layout({ contents, children, logo, rightButton, option, }: {
-    contents: Button[];
+    contents: ExtendedButton[];
     children: React.ReactNode;
     logo: {
         node: ReactNode;

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.351
+1.0.354