@edu-tosel/design 1.0.46 → 1.0.48

package/globals.css

@@ -1,226 +1,226 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@font-face {
-  font-family: "Pretendard-Medium";
-  src: url("./asset/fonts/Pretendard-Medium.otf") format("opentype");
-}
-
-@font-face {
-  font-family: "Pretendard-Bold";
-  src: url("./asset/fonts/Pretendard-Bold.otf") format("opentype");
-}
-
-@font-face {
-  font-family: "Pretendard-Light";
-  src: url("./asset/fonts/Pretendard-Light.otf") format("opentype");
-}
-
-@font-face {
-  font-family: "Kostar";
-  src: url("./asset/fonts/Kostar.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "NicoMoji";
-  src: url("./asset/fonts/NicoMoji.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "Megrim";
-  src: url("./asset/fonts/Megrim.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "Times-Newer-Roman-Bold";
-  src: url("./asset/fonts/TimesNewerRoman-Bold.otf") format("opentype");
-}
-
-@font-face {
-  font-family: "Times-Newer-Roman-BoldItalic";
-  src: url("./asset/fonts/TimesNewerRoman-BoldItalic.otf") format("opentype");
-}
-
-input[type="date"]::-webkit-inner-spin-button,
-input[type="date"]::-webkit-calendar-picker-indicator {
-  display: none;
-  -webkit-appearance: none;
-}
-
-::-webkit-scrollbar {
-  width: 3px;
-  padding-right: 10px;
-}
-
-::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background-color: #808080;
-  opacity: 0.5;
-  border-radius: 10px;
-}
-
-.box-shadow {
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
-}
-
-.box-shadow-sm {
-  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
-}
-
-.border-gradient-green-to-red {
-}
-
-.x-shape {
-  position: relative;
-  width: 0.83625rem;
-  height: 0.83625rem;
-}
-
-.x-shape::before,
-.x-shape::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 2.5px;
-  border-radius: 2px;
-  height: 100%;
-  background-color: white;
-  transform-origin: center;
-}
-
-.x-shape::before {
-  transform: translate(-50%, -50%) rotate(45deg);
-}
-
-.x-shape::after {
-  transform: translate(-50%, -50%) rotate(-45deg);
-}
-
-.border-inner {
-  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-.box-shadow-focus:focus {
-  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-.box-shadow-focus-red:focus {
-  box-shadow: 0px 0px 10px 0px #ff8383;
-}
-.box-green {
-  background: rgba(16, 86, 82, 0.1);
-  color: #105652;
-}
-.box-green-focus:focus {
-  background: white;
-  color: black;
-  box-shadow: 0px 0px 10px 0px rgba(16, 86, 82, 0.38);
-}
-/* box-shadow: 0px 0px 10px 0px rgba(16, 86, 82, 0.38); */
-.box-inner-shadow:hover {
-  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-/* Date Picker Css */
-.react-datepicker__day--selected {
-  background-color: #105652 !important;
-}
-.react-datepicker__header {
-  background: white !important;
-  border: none !important;
-}
-.react-datepicker {
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) !important;
-  border-radius: 0.375rem !important;
-  border: none !important;
-}
-.react-datepicker__day--keyboard-selected {
-  background-color: white !important;
-  color: black !important;
-}
-.react-datepicker__day--outside-month {
-  color: rgb(161 161 170) !important;
-}
-.react-datepicker__month-container {
-  padding-top: 1rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-bottom: 0.5rem;
-}
-.react-datepicker-popper {
-  transform: translate(0px 295px) !important;
-}
-.react-datepicker__input-container {
-  text-align: center !important;
-  border-radius: 0.375rem !important;
-  transition: all 0.3s;
-}
-.react-datepicker__input-container > input {
-  cursor: pointer !important;
-}
-.react-datepicker__input-container:hover {
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) !important;
-}
-.react-datepicker__navigation {
-  top: 18px !important;
-}
-.react-datepicker__navigation--next {
-  right: 20px !important;
-}
-.react-datepicker__navigation--previous {
-  left: 182px !important;
-}
-.react-datepicker__current-month {
-  text-align: left !important;
-  margin-left: 16px !important;
-}
-.react-datepicker__triangle {
-  display: none !important;
-}
-.react-datepicker__children-container {
-  width: 16rem !important;
-}
-/* toggle button */
-.toggle[type="checkbox"]::before {
-  content: "";
-  position: absolute;
-  left: 1px;
-  top: 1px;
-  width: 1.1rem;
-  height: 1.1rem;
-  border-radius: 50%;
-  transform: scale(0.9);
-  background-color: white;
-  transition: left 100ms linear;
-}
-.toggle[type="checkbox"]:checked::before {
-  background-color: white;
-  left: 1.32rem;
-}
-.toggle[type="checkbox"]:checked {
-  background-color: #105652;
-}
-.toggle[type="checkbox"]:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-.toggle[type="checkbox"]:disabled + span {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-/* checkbox */
-.check-box[type="checkbox"]:checked {
-  border-color: transparent;
-  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
-  background-size: 150%;
-  background-position: 50%;
-  background-repeat: no-repeat;
-}
-.check-box[type="checkbox"]:disabled {
-  background-color: #7f7f7f;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  font-family: "Pretendard-Medium";
+  src: url("./asset/fonts/Pretendard-Medium.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Pretendard-Bold";
+  src: url("./asset/fonts/Pretendard-Bold.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Pretendard-Light";
+  src: url("./asset/fonts/Pretendard-Light.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Kostar";
+  src: url("./asset/fonts/Kostar.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "NicoMoji";
+  src: url("./asset/fonts/NicoMoji.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Megrim";
+  src: url("./asset/fonts/Megrim.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Times-Newer-Roman-Bold";
+  src: url("./asset/fonts/TimesNewerRoman-Bold.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Times-Newer-Roman-BoldItalic";
+  src: url("./asset/fonts/TimesNewerRoman-BoldItalic.otf") format("opentype");
+}
+
+input[type="date"]::-webkit-inner-spin-button,
+input[type="date"]::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
+}
+
+::-webkit-scrollbar {
+  width: 3px;
+  padding-right: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background-color: #808080;
+  opacity: 0.5;
+  border-radius: 10px;
+}
+
+.box-shadow {
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
+}
+
+.box-shadow-sm {
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
+}
+
+.border-gradient-green-to-red {
+}
+
+.x-shape {
+  position: relative;
+  width: 0.83625rem;
+  height: 0.83625rem;
+}
+
+.x-shape::before,
+.x-shape::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2.5px;
+  border-radius: 2px;
+  height: 100%;
+  background-color: white;
+  transform-origin: center;
+}
+
+.x-shape::before {
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.x-shape::after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.border-inner {
+  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+.box-shadow-focus:focus {
+  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+.box-shadow-focus-red:focus {
+  box-shadow: 0px 0px 10px 0px #ff8383;
+}
+.box-green {
+  background: rgba(16, 86, 82, 0.1);
+  color: #105652;
+}
+.box-green-focus:focus {
+  background: white;
+  color: black;
+  box-shadow: 0px 0px 10px 0px rgba(16, 86, 82, 0.38);
+}
+/* box-shadow: 0px 0px 10px 0px rgba(16, 86, 82, 0.38); */
+.box-inner-shadow:hover {
+  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+/* Date Picker Css */
+.react-datepicker__day--selected {
+  background-color: #105652 !important;
+}
+.react-datepicker__header {
+  background: white !important;
+  border: none !important;
+}
+.react-datepicker {
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) !important;
+  border-radius: 0.375rem !important;
+  border: none !important;
+}
+.react-datepicker__day--keyboard-selected {
+  background-color: white !important;
+  color: black !important;
+}
+.react-datepicker__day--outside-month {
+  color: rgb(161 161 170) !important;
+}
+.react-datepicker__month-container {
+  padding-top: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 0.5rem;
+}
+.react-datepicker-popper {
+  transform: translate(0px 295px) !important;
+}
+.react-datepicker__input-container {
+  text-align: center !important;
+  border-radius: 0.375rem !important;
+  transition: all 0.3s;
+}
+.react-datepicker__input-container > input {
+  cursor: pointer !important;
+}
+.react-datepicker__input-container:hover {
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) !important;
+}
+.react-datepicker__navigation {
+  top: 18px !important;
+}
+.react-datepicker__navigation--next {
+  right: 20px !important;
+}
+.react-datepicker__navigation--previous {
+  left: 182px !important;
+}
+.react-datepicker__current-month {
+  text-align: left !important;
+  margin-left: 16px !important;
+}
+.react-datepicker__triangle {
+  display: none !important;
+}
+.react-datepicker__children-container {
+  width: 16rem !important;
+}
+/* toggle button */
+.toggle[type="checkbox"]::before {
+  content: "";
+  position: absolute;
+  left: 1px;
+  top: 1px;
+  width: 1.1rem;
+  height: 1.1rem;
+  border-radius: 50%;
+  transform: scale(0.9);
+  background-color: white;
+  transition: left 100ms linear;
+}
+.toggle[type="checkbox"]:checked::before {
+  background-color: white;
+  left: 1.32rem;
+}
+.toggle[type="checkbox"]:checked {
+  background-color: #105652;
+}
+.toggle[type="checkbox"]:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+.toggle[type="checkbox"]:disabled + span {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+/* checkbox */
+.check-box[type="checkbox"]:checked {
+  border-color: transparent;
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
+  background-size: 150%;
+  background-position: 50%;
+  background-repeat: no-repeat;
+}
+.check-box[type="checkbox"]:disabled {
+  background-color: #7f7f7f;
+}

package/interaction/design/Worm.design.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn, gradient, useEase } from "../../util";
+import { useEase } from "../../hook";
+import { cn, gradient } from "../../util";
 export default function Worm() {
     const numbers = [-2, -1, 0, 1, 2];
     const ease = useEase(1000, 500);

package/interface/domain/Tag.d.ts

@@ -0,0 +1,8 @@
+type Tag = "NEW" | "REG";
+interface Styles {
+    title: string;
+    background: string;
+}
+declare const TagStyles: Record<Tag, Styles>;
+export type { Tag };
+export { TagStyles };

package/interface/domain/Tag.js

@@ -0,0 +1,11 @@
+const TagStyles = {
+    NEW: {
+        title: "신규론칭",
+        background: "bg-blue-navy",
+    },
+    REG: {
+        title: "정기시험",
+        background: "bg-crimson-burgundy",
+    },
+};
+export { TagStyles };

package/interface/domain/index.d.ts

@@ -0,0 +1 @@
+export * from "./Tag";

package/interface/domain/index.js

@@ -0,0 +1 @@
+export * from "./Tag";

package/interface/widget/Carousel.d.ts

@@ -0,0 +1,12 @@
+import { Titles } from "../Property";
+export type { CarouselContent };
+interface Options {
+    background: string;
+    text: string;
+}
+interface CarouselContent<T> {
+    tag: T;
+    titles: Titles;
+    image?: string;
+    options?: Partial<Options>;
+}

package/interface/widget/Carousel.js

@@ -0,0 +1 @@
+export {};

package/interface/widget/index.d.ts

@@ -1 +1,2 @@
+export * from "./Carousel";
 export * from "./Switch";

package/interface/widget/index.js

@@ -1 +1,2 @@
+export * from "./Carousel";
 export * from "./Switch";

package/layout/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Action } from "./template/Action";
+export { default as Home } from "./template/home";
 export * from "./template/Dashboard";
 export { default as Promotion } from "./template/Promotion";
 export { default as Sign } from "./template/Sign";
@@ -6,3 +7,4 @@ export { default as DataField } from "./template/DataField";
 export { default as Gallery } from "./template/Gallery";
 export { default as Row } from "./template/Row";
 export { default as Shelf } from "./template/Shelf";
+export { default as Tab } from "./template/Tab";

package/layout/index.js

@@ -1,4 +1,5 @@
 export { default as Action } from "./template/Action";
+export { default as Home } from "./template/home";
 export * from "./template/Dashboard";
 export { default as Promotion } from "./template/Promotion";
 export { default as Sign } from "./template/Sign";
@@ -6,3 +7,4 @@ export { default as DataField } from "./template/DataField";
 export { default as Gallery } from "./template/Gallery";
 export { default as Row } from "./template/Row";
 export { default as Shelf } from "./template/Shelf";
+export { default as Tab } from "./template/Tab";

package/layout/template/Gallery.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Action from "./Action";
-import Tab from "../design/Tab.design";
+import Tab from "./Tab";
 import { cn } from "../../util";
 export default function Gallery({ action, children, options, }) {
     const { tabTextColor } = options ?? {};

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

@@ -0,0 +1,4 @@
+import { OnClick } from "../../../interface";
+export default function Navigation({ clickBrowser, }: {
+    clickBrowser: OnClick;
+}): import("react/jsx-runtime").JSX.Element;

package/layout/template/home/Navigation.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { animated, useTransition } from "react-spring";
+import SVG from "../../../asset/SVG";
+import { cn } from "../../../util";
+export default function Navigation({ clickBrowser, }) {
+    const [flag, setFlag] = useState(false);
+    const container = {
+        displays: "flex flex-col justify-between items-center",
+        paddings: "py-12.5",
+        backgrounds: "bg-gradient-to-b from-green-dark to-crimson-burgundy",
+        styles: "rounded-r-xl",
+    };
+    const transition = useTransition(!flag, {
+        from: { width: 80, height: 424 },
+        leave: { width: 0, height: screen.height, duration: 500 },
+    });
+    const overlayTransition = useTransition(flag, {
+        from: { width: 0 },
+        enter: { width: screen.width },
+        config: { duration: 500 },
+    });
+    useEffect(() => {
+        if (flag) {
+            const timer = setTimeout(() => {
+                clickBrowser();
+            }, 2000);
+            return () => clearTimeout(timer);
+        }
+    }, [flag]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "h-screen fixed top-0 left-0 flex justify-center items-center z-45", children: transition((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(container), children: [_jsx(SVG.Icon.Calendar, {}), _jsx(SVG.Icon.Notification, {}), _jsx(SVG.Icon.Search, {}), _jsx(SVG.Icon.Browser, { onClick: () => setFlag(!flag) }), _jsx(SVG.Icon.Gift, {})] }))) }), overlayTransition((styles, item) => item && (_jsxs(animated.div, { style: styles, className: "bg-white h-screen fixed top-0 left-0 z-40 flex flex-col justify-center items-center overflow-hidden gap-y-14", children: [_jsx("img", { src: "/images/logos/tosel.png", alt: "tosel", width: 368.56, height: 80.07 }), _jsx("div", { children: "dashboard loading..." })] })))] }));
+}

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

@@ -0,0 +1,14 @@
+import { Titles } from "../../../interface";
+interface NoticeOptions {
+    className: string;
+}
+export default function Notice({ banners, options, }: {
+    banners: BannerProps[];
+    options?: Partial<NoticeOptions>;
+}): import("react/jsx-runtime").JSX.Element;
+type Tag = "REG" | "OLY";
+interface BannerProps {
+    tag: Tag;
+    titles: Titles;
+}
+export {};

package/layout/template/home/Notice.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SVG from "../../../asset/SVG";
+import { cn } from "../../../util";
+export default function Notice({ banners, options, }) {
+    const { className } = options ?? {};
+    const container = {
+        positions: "relative",
+        backgrounds: "bg-[#F7F7F7]",
+        displays: "flex flex-col",
+        sizes: "h-96",
+        boundaries: "pl-80 py-12",
+        className,
+    };
+    const body = {
+        displays: "flex flex-row gap-x-7.5",
+        sizes: "w-fit",
+        boundaries: "mt-7.5",
+        styles: "overflow-x-hidden",
+    };
+    const buttonBox = {
+        displays: "flex justify-between items-center",
+        sizes: "w-18 h-7.5",
+        boundaries: "mt-5 px-5",
+        backgrounds: "bg-gray-dark",
+        styles: " rounded-full",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: "font-pretendard-bold text-gray-dark text-3xl", children: "\uACF5\uC9C0\uC0AC\uD56D" }), _jsx("div", { className: cn(body), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.titles.title))) }), _jsxs("div", { className: cn(buttonBox), children: [_jsx(SVG.Symbol.LessThan, { onClick: () => { } }), _jsx(SVG.Symbol.GreaterThan, { onClick: () => { } })] })] }));
+}
+const TagStyles = {
+    REG: { title: "정기시험" },
+    OLY: { title: "올림피아드" },
+};
+function Banner({ tag, titles }) {
+    const container = {
+        displays: "flex flex-col gap-y-7",
+        sizes: "w-95 h-40",
+        backgrounds: "bg-white",
+        boundaries: "pt-6.25 px-6.5",
+        styles: "rounded-md",
+    };
+    const tagBox = {
+        displays: "flex justify-center items-center",
+        sizes: "w-20 h-7",
+        backgrounds: "bg-gray-dark",
+        fonts: "text-white font-pretendard-bold ",
+        styles: "rounded-md",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex gap-x-4 items-center", children: [_jsx("div", { className: cn(tagBox), children: TagStyles[tag].title }), _jsx("div", { className: "font-pretendard-bold text-gray-dark", children: titles.title })] }), _jsx("div", { className: "text-gray-dark", children: titles.subtitle })] }));
+}

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

@@ -0,0 +1,18 @@
+interface PromotionOptions {
+    className: string;
+}
+export default function Promotion({ banners, options, }: {
+    banners: BannerProps[];
+    options?: Partial<PromotionOptions>;
+}): import("react/jsx-runtime").JSX.Element;
+interface BannerProps {
+    image: {
+        src: string;
+        location?: string;
+    };
+    options?: {
+        background?: string;
+        boundary?: string;
+    };
+}
+export {};