@edu-tosel/design 1.0.292 → 1.0.294
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/interface/widget/index.d.ts +1 -0
- package/layout/template/Announcement/Layout.d.ts +1 -1
- package/layout/template/Announcement/Layout.js +2 -2
- package/layout/template/Announcement/Many.js +1 -1
- package/layout/template/Archive/Layout.d.ts +1 -1
- package/layout/template/Archive/Layout.js +2 -2
- package/layout/template/BbsLayout.d.ts +6 -2
- package/layout/template/BbsLayout.js +25 -7
- package/layout/template/Event/Layout.d.ts +1 -1
- package/layout/template/Event/Layout.js +2 -2
- package/package.json +1 -1
- package/version.txt +1 -1
- package/widget/index.d.ts +1 -0
- package/widget/index.js +1 -0
- package/widget/template/SelectRoll.d.ts +15 -0
- package/widget/template/SelectRoll.js +42 -0
|
@@ -33,6 +33,7 @@ export interface LabelWidget extends Widget {
|
|
|
33
33
|
hoverState?: State<boolean>;
|
|
34
34
|
disabled?: Disabled;
|
|
35
35
|
onClick?: OnClick;
|
|
36
|
+
isPressed?: boolean;
|
|
36
37
|
}
|
|
37
38
|
type InputType = "text" | "password" | "date" | "email" | "phone" | "number";
|
|
38
39
|
export interface InputWidget extends Widget {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { BbsLayoutProps } from "../BbsLayout";
|
|
2
2
|
interface LayoutProps extends Omit<BbsLayoutProps, "title"> {
|
|
3
3
|
}
|
|
4
|
-
export default function Layout({ children,
|
|
4
|
+
export default function Layout({ children, links }: LayoutProps): import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import BbsLayout from "../BbsLayout";
|
|
3
|
-
export default function Layout({ children,
|
|
4
|
-
return (_jsx(BbsLayout, { title: "\uACF5\uC9C0\uC0AC\uD56D",
|
|
3
|
+
export default function Layout({ children, links }) {
|
|
4
|
+
return (_jsx(BbsLayout, { title: "\uACF5\uC9C0\uC0AC\uD56D", links: links, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", className: "w-[24px] h-[24px] md:w-[48px] md:h-[48px]", children: _jsx("path", { d: "M31.332 7.776C31.0653 6.8326 30.4979 6.0021 29.716 5.41077C28.934 4.81944 27.9804 4.49964 27 4.5H21C18.94 4.5 17.2 5.886 16.668 7.776M31.332 7.776C31.442 8.164 31.5 8.576 31.5 9C31.5 9.39783 31.342 9.77936 31.0607 10.0607C30.7794 10.342 30.3978 10.5 30 10.5H18C17.6022 10.5 17.2206 10.342 16.9393 10.0607C16.658 9.77936 16.5 9.39783 16.5 9C16.5 8.576 16.56 8.164 16.668 7.776M31.332 7.776C32.624 7.874 33.908 7.996 35.186 8.144C37.386 8.4 39 10.298 39 12.514V39C39 40.1935 38.5259 41.3381 37.682 42.182C36.8381 43.0259 35.6935 43.5 34.5 43.5H13.5C12.3065 43.5 11.1619 43.0259 10.318 42.182C9.47411 41.3381 9 40.1935 9 39V12.514C9 10.298 10.612 8.4 12.814 8.144C14.0961 7.99555 15.381 7.87286 16.668 7.776", stroke: "#105652", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }), children: children }));
|
|
5
5
|
}
|
|
@@ -6,7 +6,7 @@ export default function Many({ contents }) {
|
|
|
6
6
|
boundaries: "pl-12 ",
|
|
7
7
|
};
|
|
8
8
|
const box = (flag) => ({
|
|
9
|
-
displays: "flex flex-col gap-y-2",
|
|
9
|
+
displays: "flex flex-col items-start gap-y-2",
|
|
10
10
|
sizes: "h-25 w-full",
|
|
11
11
|
boundaries: "pt-7.5 border-b-1",
|
|
12
12
|
fonts: "leading-tight",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { BbsLayoutProps } from "../BbsLayout";
|
|
2
2
|
interface LayoutProps extends Omit<BbsLayoutProps, "title"> {
|
|
3
3
|
}
|
|
4
|
-
export default function Layout({ children,
|
|
4
|
+
export default function Layout({ children, links }: LayoutProps): import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import BbsLayout from "../BbsLayout";
|
|
3
|
-
export default function Layout({ children,
|
|
4
|
-
return (_jsx(BbsLayout, { title: "\uC790\uB8CC\uC2E4",
|
|
3
|
+
export default function Layout({ children, links }) {
|
|
4
|
+
return (_jsx(BbsLayout, { title: "\uC790\uB8CC\uC2E4", links: links, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", className: "w-[24px] h-[24px] md:w-[48px] md:h-[48px]", children: _jsx("path", { d: "M36.7501 25.478L21.3641 40.864C19.6762 42.5519 17.387 43.5001 15.0001 43.5001C12.6131 43.5001 10.3239 42.5519 8.63605 40.864C6.94822 39.1762 6 36.887 6 34.5C6 32.1131 6.94822 29.8239 8.63605 28.136L30.5161 6.25602C31.0734 5.69895 31.735 5.25711 32.4631 4.95573C33.1912 4.65435 33.9715 4.49933 34.7595 4.49951C35.5475 4.4997 36.3277 4.65509 37.0557 4.95681C37.7836 5.25854 38.445 5.70069 39.0021 6.25802C39.5591 6.81535 40.001 7.47695 40.3023 8.20503C40.6037 8.93312 40.7587 9.71344 40.7586 10.5014C40.7584 11.2894 40.603 12.0697 40.3013 12.7976C39.9995 13.5256 39.5574 14.187 39.0001 14.744L17.1041 36.64C16.536 37.1846 15.7768 37.4821 14.9899 37.4722C14.2031 37.4622 13.4517 37.1435 12.8977 36.5847C12.3436 36.0259 12.0313 35.2719 12.028 34.485C12.0247 33.6981 12.3307 32.9414 12.8801 32.378L28.5001 16.758M17.1221 36.62L17.1021 36.64", stroke: "#105652", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round" }) }), children: children }));
|
|
5
5
|
}
|
|
@@ -1,7 +1,11 @@
|
|
|
1
|
+
import { Button } from "../../interface";
|
|
1
2
|
export interface BbsLayoutProps {
|
|
2
3
|
title: string;
|
|
3
|
-
topRight?: React.ReactNode;
|
|
4
4
|
icon?: React.ReactNode;
|
|
5
5
|
children: React.ReactNode;
|
|
6
|
+
links: Button[];
|
|
6
7
|
}
|
|
7
|
-
export default function BbsLayout({ title,
|
|
8
|
+
export default function BbsLayout({ title, children, icon, links, }: BbsLayoutProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare function BbsSelect({ links }: {
|
|
10
|
+
links: Button[];
|
|
11
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,20 +1,38 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useActionStore } from "../../store";
|
|
3
3
|
import { cn } from "../../util";
|
|
4
|
-
export default function BbsLayout({ title,
|
|
4
|
+
export default function BbsLayout({ title, children, icon, links, }) {
|
|
5
5
|
const { setFlag } = useActionStore();
|
|
6
6
|
const container = {
|
|
7
7
|
displays: "flex flex-col items-center",
|
|
8
8
|
sizes: "w-full min-h-screen",
|
|
9
9
|
fonts: "antialiased",
|
|
10
10
|
};
|
|
11
|
-
const
|
|
11
|
+
const wrapper = {
|
|
12
12
|
sizes: "w-full max-w-[1200px]",
|
|
13
13
|
};
|
|
14
|
-
const
|
|
15
|
-
displays: "flex flex-col md:flex-row
|
|
16
|
-
sizes: "w-full
|
|
17
|
-
boundaries: "px-12 pb-10",
|
|
14
|
+
const body = {
|
|
15
|
+
displays: "flex flex-col gap-y-5 md:flex-row md:justify-between items-start md:items-end",
|
|
16
|
+
sizes: "w-full md:h-[188px]",
|
|
17
|
+
boundaries: "pt-8 md:pt-0 px-5 md:px-12 md:pb-10 ",
|
|
18
|
+
};
|
|
19
|
+
return (_jsx("div", { className: cn(container), onClick: setFlag, children: _jsxs("div", { className: cn(wrapper), children: [_jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "flex gap-x-[10px] md:gap-x-5 items-center", children: [icon, _jsx("div", { className: "text-[24px] md:text-[40px] leading-none font-pretendard-bold text-green-dark", children: title })] }), _jsx(BbsSelect, { links: links })] }), children] }) }));
|
|
20
|
+
}
|
|
21
|
+
export function BbsSelect({ links }) {
|
|
22
|
+
const container = {
|
|
23
|
+
displays: "flex",
|
|
24
|
+
backgrounds: "bg-[#F0F0F0]",
|
|
25
|
+
boundaries: "p-[6px]",
|
|
26
|
+
styles: "rounded-full",
|
|
18
27
|
};
|
|
19
|
-
|
|
28
|
+
const button = (isSelected) => ({
|
|
29
|
+
backgrounds: isSelected
|
|
30
|
+
? "bg-white text-green-dark box-shadow"
|
|
31
|
+
: "bg-transparent text-gray-medium",
|
|
32
|
+
sizes: "w-[80px] md:w-[100px] h-[30px]",
|
|
33
|
+
displays: "flex justify-center items-center",
|
|
34
|
+
styles: "rounded-full",
|
|
35
|
+
fonts: "text-[12px] leading-tight ",
|
|
36
|
+
});
|
|
37
|
+
return (_jsx("div", { className: cn(container), children: links.map(({ title, onClick, isPressed }) => (_jsx("button", { onClick: onClick, className: cn(button(isPressed)), children: title }))) }));
|
|
20
38
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { BbsLayoutProps } from "../BbsLayout";
|
|
2
2
|
interface LayoutProps extends Omit<BbsLayoutProps, "title"> {
|
|
3
3
|
}
|
|
4
|
-
export default function Layout({
|
|
4
|
+
export default function Layout({ links, children }: LayoutProps): import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import BbsLayout from "../BbsLayout";
|
|
3
|
-
export default function Layout({
|
|
4
|
-
return (_jsx(BbsLayout, { title: "\
|
|
3
|
+
export default function Layout({ links, children }) {
|
|
4
|
+
return (_jsx(BbsLayout, { title: "\uC0C8 \uC18C\uC2DD", links: links, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "40", height: "39", viewBox: "0 0 40 39", fill: "none", className: "w-[24px] h-[24px] md:w-[48px] md:h-[48px]", children: _jsx("path", { d: "M16.68 27.68C15.304 27.56 13.908 27.5 12.5 27.5H11C8.61305 27.5 6.32387 26.5518 4.63604 24.864C2.94821 23.1761 2 20.8869 2 18.5C2 16.1131 2.94821 13.8239 4.63604 12.136C6.32387 10.4482 8.61305 9.5 11 9.5H12.5C13.908 9.5 15.304 9.44 16.68 9.32M16.68 27.68C17.186 29.604 17.848 31.464 18.65 33.246C19.144 34.346 18.77 35.666 17.724 36.268L16.41 37.028C15.308 37.664 13.89 37.262 13.356 36.106C12.0886 33.3641 11.1229 30.4926 10.476 27.542M16.68 27.68C15.894 24.6834 15.4974 21.598 15.5 18.5C15.5 15.328 15.91 12.252 16.68 9.32M16.68 27.68C22.843 28.2082 28.8445 29.9302 34.35 32.75M16.68 9.32C22.843 8.79184 28.8445 7.06986 34.35 4.25M34.35 32.75C34.114 33.51 33.86 34.258 33.59 35M34.35 32.75C35.438 29.2431 36.1185 25.6226 36.378 21.96M34.35 4.25C34.1155 3.49378 33.8621 2.74355 33.59 2M34.35 4.25C35.438 7.75688 36.1185 11.3774 36.378 15.04M36.378 15.04C37.368 15.866 38 17.11 38 18.5C38 19.89 37.368 21.134 36.378 21.96M36.378 15.04C36.5421 17.3437 36.5421 19.6563 36.378 21.96", stroke: "#105652", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round" }) }), children: children }));
|
|
5
5
|
}
|
package/package.json
CHANGED
package/version.txt
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
1.0.
|
|
1
|
+
1.0.294
|
package/widget/index.d.ts
CHANGED
|
@@ -10,3 +10,4 @@ export { default as Switch } from "./template/Switch";
|
|
|
10
10
|
export { default as Toggle } from "./template/Toggle";
|
|
11
11
|
export { default as Obstacle } from "./template/Obstacle";
|
|
12
12
|
export { default as Pagination } from "./template/Pagination";
|
|
13
|
+
export { default as SelectRoll } from "./template/SelectRoll";
|
package/widget/index.js
CHANGED
|
@@ -10,3 +10,4 @@ export { default as Switch } from "./template/Switch";
|
|
|
10
10
|
export { default as Toggle } from "./template/Toggle";
|
|
11
11
|
export { default as Obstacle } from "./template/Obstacle";
|
|
12
12
|
export { default as Pagination } from "./template/Pagination";
|
|
13
|
+
export { default as SelectRoll } from "./template/SelectRoll";
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
interface SelectRollOption {
|
|
2
|
+
key: string;
|
|
3
|
+
value: string;
|
|
4
|
+
option?: {
|
|
5
|
+
background?: string;
|
|
6
|
+
text?: string;
|
|
7
|
+
};
|
|
8
|
+
}
|
|
9
|
+
interface SelectRollProps {
|
|
10
|
+
options: SelectRollOption[];
|
|
11
|
+
value: string;
|
|
12
|
+
onChange: (value: string) => void;
|
|
13
|
+
}
|
|
14
|
+
export default function SelectRoll({ options, value, onChange, }: SelectRollProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
// /Users/design/Documents/GitHub/design/src/widget/template/SelectRoll.tsx
|
|
3
|
+
import { useState } from "react";
|
|
4
|
+
import { cn } from "../../util";
|
|
5
|
+
export default function SelectRoll({ options, value, onChange, }) {
|
|
6
|
+
const [isHover, setIsHover] = useState(false);
|
|
7
|
+
const currentIndex = options.findIndex((option) => option.key === value);
|
|
8
|
+
const handlePrev = () => {
|
|
9
|
+
if (currentIndex > 0) {
|
|
10
|
+
onChange(options[currentIndex - 1].key);
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
const handleNext = () => {
|
|
14
|
+
if (currentIndex < options.length - 1) {
|
|
15
|
+
onChange(options[currentIndex + 1].key);
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
const currentOption = options[currentIndex];
|
|
19
|
+
const container = {
|
|
20
|
+
styles: "group cursor-default",
|
|
21
|
+
displays: "flex justify-center",
|
|
22
|
+
sizes: "w-[120px]",
|
|
23
|
+
};
|
|
24
|
+
const body = {
|
|
25
|
+
positions: "relative",
|
|
26
|
+
displays: "flex justify-center items-center",
|
|
27
|
+
backgrounds: currentOption?.option?.background || "bg-gray-100",
|
|
28
|
+
texts: currentOption?.option?.text || "text-black",
|
|
29
|
+
sizes: "w-[120px] h-[30px]",
|
|
30
|
+
transitions: "duration-300",
|
|
31
|
+
hoverAct: isHover ? "w-[120px]" : "w-[100px]",
|
|
32
|
+
fonts: "text-[12px]",
|
|
33
|
+
styles: "rounded-[6px] leading-none overflow-hidden",
|
|
34
|
+
};
|
|
35
|
+
const toggle = {
|
|
36
|
+
positions: "absolute",
|
|
37
|
+
displays: "flex justify-center items-center",
|
|
38
|
+
sizes: "w-[20px] h-full",
|
|
39
|
+
styles: "duration-300 text-gray-dark",
|
|
40
|
+
};
|
|
41
|
+
return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), onMouseLeave: () => setIsHover(false), onMouseEnter: () => setIsHover(true), children: [currentOption?.value, _jsx("button", { onClick: handlePrev, className: cn(toggle, "-left-4 group-hover:left-1"), children: "-" }), _jsx("button", { onClick: handleNext, className: cn(toggle, "-right-4 group-hover:right-1"), children: "+" })] }) }));
|
|
42
|
+
}
|