@edu-tosel/design 1.0.117 → 1.0.118

package/card/design/SomeCard.design.d.ts

@@ -0,0 +1 @@
+export default function SomeCardDesign(): null;

package/card/design/SomeCard.design.js

@@ -0,0 +1,3 @@
+export default function SomeCardDesign() {
+    return null;
+}

package/hook/useMobile.d.ts

@@ -1,2 +1,3 @@
-declare const useMobile: () => boolean;
-export default useMobile;
+import { Size } from "../interface";
+declare const useResponsive: (size?: Size) => boolean;
+export default useResponsive;

package/hook/useMobile.js

@@ -1,8 +1,21 @@
 import { useEffect, useState } from "react";
-const useMobile = () => {
+const screen = {
+    xxxs: "(min-width: 332px)",
+    xxs: "(min-width: 393px)",
+    xs: "(min-width: 480px)",
+    sm: "(min-width: 640px)",
+    md: "(min-width: 768px)", // IPad Mini
+    mmd: "(min-width: 840px)",
+    xm: "(min-width: 964px)", // IPad Air, IPad Pro 11.
+    lg: "(min-width: 1024px)", // IPad Mini Horizontal Viewport
+    ml: "(min-width: 1160px)", // IPad Air, IPad Pro 11.
+    xl: "(min-width: 1280px)",
+    "2xl": "(min-width: 1536px)",
+};
+const useResponsive = (size) => {
     const [isMobile, setIsMobile] = useState(false);
     useEffect(() => {
-        const mediaQuery = window.matchMedia("(max-width: 768px)");
+        const mediaQuery = window.matchMedia(screen[size ?? "xxs"]);
         setIsMobile(mediaQuery.matches);
         const handleResize = () => {
             setIsMobile(mediaQuery.matches);
@@ -14,4 +27,4 @@ const useMobile = () => {
     }, []);
     return isMobile;
 };
-export default useMobile;
+export default useResponsive;

package/interface/Property.d.ts

@@ -31,7 +31,7 @@ export type State<T> = [T, StateAction<T>];
  * @property {"full"} full - Full size
  * @property {"full"} full - Full size
  */
-export type Size = "5xs" | "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "auto";
+export type Size = "xxxs" | "xxs" | "mmd" | "xm" | "ml" | "5xs" | "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "auto";
 /**
  * Image size type
  * @enum {string}

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

@@ -5,6 +5,7 @@ import { useEase } from "../../../../hook";
 import { LineBreaks } from "../../../../text";
 import SVG from "../../../../asset/SVG";
 import { tagString } from "../../../../interface/domain";
+import useResponsive from "../../../../hook/useMobile";
 export default function Carousel({ contents, }) {
     const [index, setIndex] = useState(0);
     const [flag, inTime] = useEase(10000, 1000);
@@ -16,12 +17,17 @@ export default function Carousel({ contents, }) {
     const { tag, titles, image, option } = contents[index];
     const { text, background } = option ?? {};
     const container = {
-        displays: "flex justify-center items-center",
-        sizes: "w-full h-fit sm:h-80 ml:h-100",
+        displays: "relative flex justify-center items-center",
+        sizes: "w-full h-fit md:h-80 ml:h-100",
+        textstyle: "break-keep",
         background,
     };
+    const titleSet = {
+        displays: "flex items-center lex gap-4 flex-row xxs:gap-4 xxs:items-start xxs:flex-col md:gap-2",
+        sizes: "w-fit md:w-full h-fit",
+    };
     const body = {
-        displays: "flex flex-none items-center justify-center",
+        displays: "flex flex-none flex-col items-center justify-center md:flex-row",
         sizes: "w-full max-w-256 h-full",
         text: text ?? "text-gray-dark",
     };
@@ -32,10 +38,19 @@ export default function Carousel({ contents, }) {
         fonts: "text-white font-pretendard-medium text-sm md:text-base leading-none",
         styles: "rounded-md",
     };
+    const isMD = useResponsive("md");
+    const isXL = useResponsive("xl");
+    const test = {
+        postions: "absolute left-0 top-0 border-2 border-red-500",
+        sizes: "w-full",
+        displays: "flex justify-center",
+    };
     const buttonBox = {
-        displays: "flex justify-center items-center gap-1",
+        positions: !isMD && "absolute bottom-5 left-5 sm:bottom-10 sm:left-10",
+        animations: "duration-500",
+        displays: "justify-center items-center gap-1 flex",
         sizes: "w-23.25 h-6.25 bg-gray-dark rounded-full",
         paddings: "px-1.5 mt-12",
     };
-    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "w-72 h-50 flex flex-col flex-none pl-7.5", children: [_jsx("div", { className: cn(tagBox), children: tagString[tag.type] }), _jsx("div", { className: "font-pretendard-bold text-xl mt-2 md:text-2xl", children: titles.title }), _jsx(LineBreaks, { className: "mt-6 text-sm md:text-base", texts: titles.subtitle }), _jsxs("div", { className: cn(buttonBox), children: [_jsx("button", { onClick: () => setIndex((index - 1 + contents.length) % contents.length), className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.LessThan, {}) }), _jsxs("div", { className: "flex flex-row gap-2 justify-center items-center", children: [_jsx("div", { className: "text-white w-2 text-sm", children: index + 1 }), _jsx("div", { className: "w-0.5 h-3 bg-gray-medium" }), _jsx("div", { className: "text-white w-2 text-sm", children: contents.length })] }), _jsx("button", { onClick: () => setIndex((index + 1) % contents.length), className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.GreaterThan, {}) })] })] }), _jsx("div", { className: "h-full overflow-hidden w-fit", children: image && (_jsx("img", { src: image, alt: "carousel-image", className: "object-cover h-full" })) })] }) }));
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "w-fit h-fit flex flex-col mt-4 xxs:mt-8 xxs:flex-row xxs:gap-8 md:flex-col md:flex-none md:w-72 md:pl-7.5 md:gap-6 md:mt-0", children: [_jsxs("div", { className: cn(titleSet), children: [_jsx("div", { className: cn(tagBox), children: tagString[tag.type] }), _jsx("div", { className: "font-pretendard-bold text-xl md:text-2xl", children: titles.title })] }), _jsx(LineBreaks, { className: "w-fit flex flex-col justify-center text-sm my-2 xxs:mt-0 md:text-base", texts: titles.subtitle }), _jsxs("div", { className: cn(buttonBox), children: [_jsx("button", { onClick: () => setIndex((index - 1 + contents.length) % contents.length), className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.LessThan, {}) }), _jsxs("div", { className: "flex flex-row gap-2 justify-center items-center", children: [_jsx("div", { className: "text-white w-2 text-sm", children: index + 1 }), _jsx("div", { className: "w-0.5 h-3 bg-gray-medium" }), _jsx("div", { className: "text-white w-2 text-sm", children: contents.length })] }), _jsx("button", { onClick: () => setIndex((index + 1) % contents.length), className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.GreaterThan, {}) })] })] }), _jsx("div", { className: "h-full overflow-hidden w-fit", children: image && (_jsx("img", { src: image, alt: "carousel-image", className: "object-cover h-full" })) })] }) }));
 }

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.117
+1.0.118