@edu-tosel/design 1.0.150 → 1.0.152
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/asset/SVG.d.ts +4 -4
- package/asset/svg/Icon.d.ts +6 -6
- package/asset/svg/Icon.js +10 -14
- package/asset/svg/Icon.tsx +50 -115
- package/board/design/Board.design.js +2 -2
- package/card/design/Card.design.js +3 -3
- package/card/design/InfoCard.design.js +1 -0
- package/card/template/InfoCard/Academy.js +3 -2
- package/globals.css +16 -0
- package/interface/widget/index.d.ts +1 -1
- package/layout/template/BbsLayout.js +1 -1
- package/layout/template/Legacy/Integrate.js +1 -1
- package/layout/template/dashboard/Header.js +3 -3
- package/layout/template/dashboard/Layout.js +1 -2
- package/layout/template/dashboard/buttonClassNames.js +1 -1
- package/layout/template/dashboard/mypage/Layout.js +1 -2
- package/layout/template/dashboard/mypage/Navigate.js +2 -2
- package/layout/template/dashboard/mypage/Profile.js +4 -5
- package/layout/template/home/Notice.js +5 -5
- package/layout/template/home/Promotion.js +5 -5
- package/layout/template/home/Service.js +5 -5
- package/layout/template/home/index.d.ts +1 -1
- package/layout/template/home/index.js +1 -1
- package/layout/template/home/layout/Carousel.js +1 -1
- package/layout/template/home/layout/Navigation.d.ts +36 -0
- package/layout/template/home/layout/Navigation.js +73 -0
- package/layout/template/home/layout/index.js +3 -1
- package/package.json +1 -1
- package/util/colors.js +2 -2
- package/version.txt +1 -1
- package/widget/template/Input/Form.js +1 -1
- package/widget/template/Input/index.js +3 -1
- package/widget/template/Select/Select.js +9 -8
- package/layout/template/home/Navigation.d.ts +0 -5
- package/layout/template/home/Navigation.js +0 -32
- package/widget/template/EmailInput.d.ts +0 -2
- package/widget/template/EmailInput.js +0 -46
package/asset/SVG.d.ts
CHANGED
|
@@ -19,11 +19,11 @@ declare const SVG: {
|
|
|
19
19
|
};
|
|
20
20
|
Email: typeof Email;
|
|
21
21
|
Icon: {
|
|
22
|
-
Calendar: () => import("react/jsx-runtime").JSX.Element;
|
|
23
|
-
Notification: () => import("react/jsx-runtime").JSX.Element;
|
|
24
|
-
Search: () => import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
Calendar: ({ onClick }: IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
Notification: ({ onClick }: IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
Search: ({ onClick }: IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
25
25
|
Browser: ({ onClick }: IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
26
|
-
|
|
26
|
+
Event: ({ onClick }: IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
27
27
|
Document: ({ theme }: {
|
|
28
28
|
theme: "red" | "blue";
|
|
29
29
|
}) => import("react/jsx-runtime").JSX.Element;
|
package/asset/svg/Icon.d.ts
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import { OnClick } from "../../interface";
|
|
2
2
|
export interface IconProps {
|
|
3
|
-
onClick
|
|
3
|
+
onClick?: OnClick;
|
|
4
4
|
}
|
|
5
5
|
declare const Icon: {
|
|
6
6
|
Calendar: typeof Calendar;
|
|
7
7
|
Notification: typeof Notification;
|
|
8
8
|
Search: typeof Search;
|
|
9
9
|
Browser: typeof Browser;
|
|
10
|
-
|
|
10
|
+
Event: typeof Event;
|
|
11
11
|
Document: typeof Document;
|
|
12
12
|
};
|
|
13
13
|
export default Icon;
|
|
14
|
-
declare function Calendar(): import("react/jsx-runtime").JSX.Element;
|
|
15
|
-
declare function Notification(): import("react/jsx-runtime").JSX.Element;
|
|
16
|
-
declare function Search(): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
declare function Calendar({ onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
declare function Notification({ onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
declare function Search({ onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
17
17
|
declare function Browser({ onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
18
|
-
declare function
|
|
18
|
+
declare function Event({ onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
19
19
|
declare function Document({ theme }: {
|
|
20
20
|
theme: "blue" | "red";
|
|
21
21
|
}): import("react/jsx-runtime").JSX.Element;
|
package/asset/svg/Icon.js
CHANGED
|
@@ -1,31 +1,27 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { cn } from "../../util";
|
|
3
2
|
const Icon = {
|
|
4
3
|
Calendar,
|
|
5
4
|
Notification,
|
|
6
5
|
Search,
|
|
7
6
|
Browser,
|
|
8
|
-
|
|
7
|
+
Event,
|
|
9
8
|
Document,
|
|
10
9
|
};
|
|
11
10
|
export default Icon;
|
|
12
|
-
function Calendar() {
|
|
13
|
-
return (
|
|
11
|
+
function Calendar({ onClick }) {
|
|
12
|
+
return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M6.75 3V5.25M17.25 3V5.25M3 18.75V7.5C3 6.90326 3.23705 6.33097 3.65901 5.90901C4.08097 5.48705 4.65326 5.25 5.25 5.25H18.75C19.3467 5.25 19.919 5.48705 20.341 5.90901C20.7629 6.33097 21 6.90326 21 7.5V18.75M3 18.75C3 19.3467 3.23705 19.919 3.65901 20.341C4.08097 20.7629 4.65326 21 5.25 21H18.75C19.3467 21 19.919 20.7629 20.341 20.341C20.7629 19.919 21 19.3467 21 18.75M3 18.75V11.25C3 10.6533 3.23705 10.081 3.65901 9.65901C4.08097 9.23705 4.65326 9 5.25 9H18.75C19.3467 9 19.919 9.23705 20.341 9.65901C20.7629 10.081 21 10.6533 21 11.25V18.75", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
14
13
|
}
|
|
15
|
-
function Notification() {
|
|
16
|
-
return (
|
|
14
|
+
function Notification({ onClick }) {
|
|
15
|
+
return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M14.8565 17.082C16.7197 16.8614 18.5504 16.4217 20.3105 15.772C18.8199 14.1208 17.9962 11.9745 17.9995 9.75V9C17.9995 7.4087 17.3674 5.88258 16.2421 4.75736C15.1169 3.63214 13.5908 3 11.9995 3C10.4082 3 8.88208 3.63214 7.75686 4.75736C6.63164 5.88258 5.9995 7.4087 5.9995 9V9.75C6.00252 11.9746 5.17849 14.121 3.6875 15.772C5.4205 16.412 7.2475 16.857 9.1425 17.082M14.8565 17.082C12.9585 17.3071 11.0405 17.3071 9.1425 17.082M14.8565 17.082C15.0006 17.5319 15.0364 18.0094 14.9611 18.4757C14.8857 18.942 14.7013 19.384 14.4229 19.7656C14.1444 20.1472 13.7798 20.4576 13.3587 20.6716C12.9376 20.8856 12.4719 20.9972 11.9995 20.9972C11.5271 20.9972 11.0614 20.8856 10.6403 20.6716C10.2192 20.4576 9.85457 20.1472 9.57612 19.7656C9.29767 19.384 9.11326 18.942 9.03791 18.4757C8.96256 18.0094 8.9984 17.5319 9.1425 17.082", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
17
16
|
}
|
|
18
|
-
function Search() {
|
|
19
|
-
return (
|
|
17
|
+
function Search({ onClick }) {
|
|
18
|
+
return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M21.0008 21L15.8038 15.803M15.8038 15.803C17.2104 14.3965 18.0006 12.4887 18.0006 10.4995C18.0006 8.51035 17.2104 6.60262 15.8038 5.19605C14.3972 3.78947 12.4895 2.99927 10.5003 2.99927C8.51108 2.99927 6.60336 3.78947 5.19678 5.19605C3.79021 6.60262 3 8.51035 3 10.4995C3 12.4887 3.79021 14.3965 5.19678 15.803C6.60336 17.2096 8.51108 17.9998 10.5003 17.9998C12.4895 17.9998 14.3972 17.2096 15.8038 15.803Z", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
20
19
|
}
|
|
21
20
|
function Browser({ onClick }) {
|
|
22
|
-
|
|
23
|
-
cursor: "cursor-pointer",
|
|
24
|
-
};
|
|
25
|
-
return (_jsxs("svg", { className: cn(container), onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: "35", height: "35", viewBox: "0 0 35 35", fill: "none", children: [_jsx("path", { d: "M29.0718 28.5227H5.31267C3.89986 28.5227 2.74573 27.368 2.74573 25.9544V7.87715C2.74573 6.46362 3.89986 5.3089 5.31267 5.3089H29.0718C30.4846 5.3089 31.6387 6.46362 31.6387 7.87715V25.9544C31.6387 27.368 30.4846 28.5227 29.0718 28.5227ZM5.31267 6.30434C4.43712 6.30434 3.74067 7.00116 3.74067 7.87715V25.9544C3.74067 26.8304 4.43712 27.5272 5.31267 27.5272H29.0718C29.9473 27.5272 30.6438 26.8304 30.6438 25.9544V7.87715C30.6438 7.00116 29.9473 6.30434 29.0718 6.30434H5.31267Z", fill: "white" }), _jsx("path", { d: "M31.1413 10.4056H3.2432C2.96461 10.4056 2.74573 10.1866 2.74573 9.90788C2.74573 9.62915 2.96461 9.41016 3.2432 9.41016H31.1413C31.4198 9.41016 31.6387 9.62915 31.6387 9.90788C31.6387 10.1866 31.4198 10.4056 31.1413 10.4056Z", fill: "white" }), _jsx("path", { d: "M28.7932 8.43452C28.7932 8.43452 28.7335 8.43452 28.6937 8.43452C28.6539 8.43452 28.6341 8.43452 28.5943 8.41461C28.5744 8.41461 28.5346 8.3947 28.5147 8.37479C28.4948 8.37479 28.455 8.33497 28.4351 8.31506C28.3356 8.23543 28.2958 8.09606 28.2958 7.9567C28.2958 7.89698 28.2958 7.83725 28.3356 7.77752C28.3555 7.7178 28.3953 7.65807 28.4351 7.61825C28.5744 7.47889 28.7932 7.43907 28.9723 7.51871C29.032 7.53862 29.0917 7.57843 29.1315 7.61825C29.1713 7.65807 29.2111 7.7178 29.231 7.77752C29.2509 7.83725 29.2708 7.89698 29.2708 7.9567C29.2708 8.09606 29.2111 8.21552 29.1315 8.31506C29.0519 8.41461 28.9126 8.45442 28.7932 8.45442V8.43452Z", fill: "white" }), _jsx("path", { d: "M26.9228 8.43461C26.9228 8.43461 26.8631 8.43461 26.8233 8.43461C26.8034 8.43461 26.7636 8.43461 26.7238 8.4147C26.7039 8.4147 26.6641 8.39479 26.6442 8.37488C26.6243 8.37488 26.6044 8.33506 26.5646 8.31515C26.4651 8.21561 26.4253 8.09615 26.4253 7.95679C26.4253 7.89707 26.4253 7.83734 26.4651 7.77761C26.485 7.71789 26.5248 7.65816 26.5646 7.61834C26.684 7.49889 26.8432 7.45907 27.0024 7.47898C27.0422 7.47898 27.0621 7.49889 27.1019 7.5188C27.1218 7.5188 27.1615 7.53871 27.1814 7.55861C27.2013 7.57852 27.2411 7.59843 27.261 7.61834C27.3008 7.65816 27.3406 7.71789 27.3605 7.77761C27.3804 7.83734 27.4003 7.89707 27.4003 7.95679C27.4003 8.09615 27.3406 8.21561 27.261 8.31515C27.2411 8.33506 27.2212 8.35497 27.1814 8.37488C27.1615 8.37488 27.1218 8.4147 27.1019 8.4147C27.082 8.4147 27.0422 8.4147 27.0024 8.43461C26.9825 8.43461 26.9427 8.43461 26.9029 8.43461H26.9228Z", fill: "white" }), _jsx("path", { d: "M25.0722 8.43453C24.9528 8.43453 24.8135 8.39471 24.714 8.29517C24.6145 8.19562 24.5747 8.07617 24.5747 7.93681C24.5747 7.87708 24.5747 7.81735 24.6145 7.75762C24.6344 7.6979 24.6742 7.63817 24.714 7.59835C24.7538 7.55854 24.8135 7.51872 24.8732 7.49881C25.0523 7.41917 25.2712 7.45899 25.4105 7.59835C25.4502 7.63817 25.4901 7.6979 25.51 7.75762C25.5298 7.81735 25.5497 7.87708 25.5497 7.93681C25.5497 8.07617 25.49 8.19562 25.4105 8.29517C25.3906 8.31507 25.3508 8.33498 25.3309 8.35489C25.311 8.35489 25.2712 8.39471 25.2513 8.39471C25.2314 8.39471 25.1916 8.39471 25.1518 8.41462C25.1319 8.41462 25.0921 8.41462 25.0523 8.41462L25.0722 8.43453Z", fill: "white" })] }));
|
|
21
|
+
return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M3 8.25V18C3 18.5967 3.23705 19.169 3.65901 19.591C4.08097 20.0129 4.65326 20.25 5.25 20.25H18.75C19.3467 20.25 19.919 20.0129 20.341 19.591C20.7629 19.169 21 18.5967 21 18V8.25M3 8.25V6C3 5.40326 3.23705 4.83097 3.65901 4.40901C4.08097 3.98705 4.65326 3.75 5.25 3.75H18.75C19.3467 3.75 19.919 3.98705 20.341 4.40901C20.7629 4.83097 21 5.40326 21 6V8.25M3 8.25H21M5.25 6H5.258V6.008H5.25V6ZM7.5 6H7.508V6.008H7.5V6ZM9.75 6H9.758V6.008H9.75V6Z", stroke: "white", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
|
|
26
22
|
}
|
|
27
|
-
function
|
|
28
|
-
return (
|
|
23
|
+
function Event({ onClick }) {
|
|
24
|
+
return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M21 11.25V19.5C21 19.8978 20.842 20.2794 20.5607 20.5607C20.2794 20.842 19.8978 21 19.5 21H5.25C4.85218 21 4.47064 20.842 4.18934 20.5607C3.90804 20.2794 3.75 19.8978 3.75 19.5V11.25M12 4.875C12 4.35583 11.846 3.84831 11.5576 3.41663C11.2692 2.98495 10.8592 2.6485 10.3795 2.44982C9.89989 2.25114 9.37209 2.19915 8.86289 2.30044C8.35369 2.40173 7.88596 2.65173 7.51884 3.01885C7.15173 3.38596 6.90172 3.85369 6.80044 4.36289C6.69915 4.87209 6.75114 5.39989 6.94982 5.87954C7.1485 6.3592 7.48495 6.76917 7.91663 7.05761C8.34831 7.34605 8.85582 7.5 9.375 7.5H12M12 4.875V7.5M12 4.875C12 4.35583 12.154 3.84831 12.4424 3.41663C12.7308 2.98495 13.1408 2.6485 13.6205 2.44982C14.1001 2.25114 14.6279 2.19915 15.1371 2.30044C15.6463 2.40173 16.114 2.65173 16.4812 3.01885C16.8483 3.38596 17.0983 3.85369 17.1996 4.36289C17.3008 4.87209 17.2489 5.39989 17.0502 5.87954C16.8515 6.3592 16.5151 6.76917 16.0834 7.05761C15.6517 7.34605 15.1442 7.5 14.625 7.5H12M12 7.5V21M3.375 11.25H21.375C21.996 11.25 22.5 10.746 22.5 10.125V8.625C22.5 8.004 21.996 7.5 21.375 7.5H3.375C2.754 7.5 2.25 8.004 2.25 8.625V10.125C2.25 10.746 2.754 11.25 3.375 11.25Z", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
29
25
|
}
|
|
30
26
|
function Document({ theme }) {
|
|
31
27
|
const color = {
|
package/asset/svg/Icon.tsx
CHANGED
|
@@ -2,7 +2,7 @@ import { OnClick } from "../../interface";
|
|
|
2
2
|
import { cn } from "../../util";
|
|
3
3
|
|
|
4
4
|
export interface IconProps {
|
|
5
|
-
onClick
|
|
5
|
+
onClick?: OnClick;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
const Icon = {
|
|
@@ -10,177 +10,112 @@ const Icon = {
|
|
|
10
10
|
Notification,
|
|
11
11
|
Search,
|
|
12
12
|
Browser,
|
|
13
|
-
|
|
13
|
+
Event,
|
|
14
14
|
Document,
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
export default Icon;
|
|
18
18
|
|
|
19
|
-
function Calendar() {
|
|
19
|
+
function Calendar({ onClick }: IconProps) {
|
|
20
20
|
return (
|
|
21
21
|
<svg
|
|
22
|
+
onClick={onClick}
|
|
22
23
|
xmlns="http://www.w3.org/2000/svg"
|
|
23
|
-
width="
|
|
24
|
-
height="
|
|
25
|
-
viewBox="0 0
|
|
24
|
+
width="24"
|
|
25
|
+
height="24"
|
|
26
|
+
viewBox="0 0 24 24"
|
|
26
27
|
fill="none"
|
|
27
28
|
>
|
|
28
29
|
<path
|
|
29
|
-
d="
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
fill="white"
|
|
35
|
-
/>
|
|
36
|
-
<path
|
|
37
|
-
d="M20.6491 5.11266H8.57059C8.29201 5.11266 8.07312 4.89366 8.07312 4.61493C8.07312 4.33621 8.29201 4.11721 8.57059 4.11721H20.6491C20.9277 4.11721 21.1466 4.33621 21.1466 4.61493C21.1466 4.89366 20.9277 5.11266 20.6491 5.11266Z"
|
|
38
|
-
fill="white"
|
|
39
|
-
/>
|
|
40
|
-
<path
|
|
41
|
-
d="M28.6286 11.2446H0.611116C0.332534 11.2446 0.113647 11.0256 0.113647 10.7469V4.61493C0.113647 4.33621 0.332534 4.11721 0.611116 4.11721H5.06844C5.34702 4.11721 5.56591 4.33621 5.56591 4.61493C5.56591 4.89366 5.34702 5.11266 5.06844 5.11266H1.10859V10.2492H28.1311V5.11266H24.1712C23.8927 5.11266 23.6738 4.89366 23.6738 4.61493C23.6738 4.33621 23.8927 4.11721 24.1712 4.11721H28.6286C28.9072 4.11721 29.126 4.33621 29.126 4.61493V10.7469C29.126 11.0256 28.9072 11.2446 28.6286 11.2446Z"
|
|
42
|
-
fill="white"
|
|
43
|
-
/>
|
|
44
|
-
<path
|
|
45
|
-
d="M16.4902 26.5944H2.00394C1.72536 26.5944 1.50647 26.3754 1.50647 26.0967V10.747C1.50647 10.4682 1.72536 10.2492 2.00394 10.2492H27.2157C27.4942 10.2492 27.7131 10.4682 27.7131 10.747V16.3812C27.7131 16.6599 27.4942 16.8789 27.2157 16.8789C26.9371 16.8789 26.7182 16.6599 26.7182 16.3812V11.2447H2.50141V25.599H16.4902C16.7688 25.599 16.9877 25.818 16.9877 26.0967C16.9877 26.3754 16.7688 26.5944 16.4902 26.5944Z"
|
|
46
|
-
fill="white"
|
|
47
|
-
/>
|
|
48
|
-
<path
|
|
49
|
-
d="M24.1514 8.17859H20.6492C20.3706 8.17859 20.1517 7.95959 20.1517 7.68086V1.54892C20.1517 1.2702 20.3706 1.0512 20.6492 1.0512H24.1514C24.43 1.0512 24.6489 1.2702 24.6489 1.54892V7.68086C24.6489 7.95959 24.43 8.17859 24.1514 8.17859ZM21.1467 7.18314H23.6539V2.04665H21.1467V7.18314Z"
|
|
50
|
-
fill="white"
|
|
51
|
-
/>
|
|
52
|
-
<path
|
|
53
|
-
d="M8.57057 8.17859H5.06839C4.78981 8.17859 4.57092 7.95959 4.57092 7.68086V1.54892C4.57092 1.2702 4.78981 1.0512 5.06839 1.0512H8.57057C8.84916 1.0512 9.06804 1.2702 9.06804 1.54892V7.68086C9.06804 7.95959 8.84916 8.17859 8.57057 8.17859ZM5.56586 7.18314H8.0731V2.04665H5.56586V7.18314Z"
|
|
54
|
-
fill="white"
|
|
30
|
+
d="M6.75 3V5.25M17.25 3V5.25M3 18.75V7.5C3 6.90326 3.23705 6.33097 3.65901 5.90901C4.08097 5.48705 4.65326 5.25 5.25 5.25H18.75C19.3467 5.25 19.919 5.48705 20.341 5.90901C20.7629 6.33097 21 6.90326 21 7.5V18.75M3 18.75C3 19.3467 3.23705 19.919 3.65901 20.341C4.08097 20.7629 4.65326 21 5.25 21H18.75C19.3467 21 19.919 20.7629 20.341 20.341C20.7629 19.919 21 19.3467 21 18.75M3 18.75V11.25C3 10.6533 3.23705 10.081 3.65901 9.65901C4.08097 9.23705 4.65326 9 5.25 9H18.75C19.3467 9 19.919 9.23705 20.341 9.65901C20.7629 10.081 21 10.6533 21 11.25V18.75"
|
|
31
|
+
stroke="white"
|
|
32
|
+
strokeWidth="1.5"
|
|
33
|
+
strokeLinecap="round"
|
|
34
|
+
strokeLinejoin="round"
|
|
55
35
|
/>
|
|
56
36
|
</svg>
|
|
57
37
|
);
|
|
58
38
|
}
|
|
59
39
|
|
|
60
|
-
function Notification() {
|
|
40
|
+
function Notification({ onClick }: IconProps) {
|
|
61
41
|
return (
|
|
62
42
|
<svg
|
|
43
|
+
onClick={onClick}
|
|
63
44
|
xmlns="http://www.w3.org/2000/svg"
|
|
64
|
-
width="
|
|
65
|
-
height="
|
|
66
|
-
viewBox="0 0
|
|
45
|
+
width="24"
|
|
46
|
+
height="24"
|
|
47
|
+
viewBox="0 0 24 24"
|
|
67
48
|
fill="none"
|
|
68
49
|
>
|
|
69
50
|
<path
|
|
70
|
-
d="
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
fill="white"
|
|
76
|
-
/>
|
|
77
|
-
<path
|
|
78
|
-
d="M17.0035 8.85671C15.4514 8.85671 14.1978 7.60245 14.1978 6.04956C14.1978 4.49666 15.4514 3.2424 17.0035 3.2424C18.5556 3.2424 19.8092 4.49666 19.8092 6.04956C19.8092 7.60245 18.5556 8.85671 17.0035 8.85671ZM17.0035 4.23785C16.0085 4.23785 15.1927 5.05411 15.1927 6.04956C15.1927 7.045 16.0085 7.86127 17.0035 7.86127C17.9984 7.86127 18.8143 7.045 18.8143 6.04956C18.8143 5.05411 17.9984 4.23785 17.0035 4.23785Z"
|
|
79
|
-
fill="white"
|
|
51
|
+
d="M14.8565 17.082C16.7197 16.8614 18.5504 16.4217 20.3105 15.772C18.8199 14.1208 17.9962 11.9745 17.9995 9.75V9C17.9995 7.4087 17.3674 5.88258 16.2421 4.75736C15.1169 3.63214 13.5908 3 11.9995 3C10.4082 3 8.88208 3.63214 7.75686 4.75736C6.63164 5.88258 5.9995 7.4087 5.9995 9V9.75C6.00252 11.9746 5.17849 14.121 3.6875 15.772C5.4205 16.412 7.2475 16.857 9.1425 17.082M14.8565 17.082C12.9585 17.3071 11.0405 17.3071 9.1425 17.082M14.8565 17.082C15.0006 17.5319 15.0364 18.0094 14.9611 18.4757C14.8857 18.942 14.7013 19.384 14.4229 19.7656C14.1444 20.1472 13.7798 20.4576 13.3587 20.6716C12.9376 20.8856 12.4719 20.9972 11.9995 20.9972C11.5271 20.9972 11.0614 20.8856 10.6403 20.6716C10.2192 20.4576 9.85457 20.1472 9.57612 19.7656C9.29767 19.384 9.11326 18.942 9.03791 18.4757C8.96256 18.0094 8.9984 17.5319 9.1425 17.082"
|
|
52
|
+
stroke="white"
|
|
53
|
+
strokeWidth="1.5"
|
|
54
|
+
strokeLinecap="round"
|
|
55
|
+
strokeLinejoin="round"
|
|
80
56
|
/>
|
|
81
57
|
</svg>
|
|
82
58
|
);
|
|
83
59
|
}
|
|
84
60
|
|
|
85
|
-
function Search() {
|
|
61
|
+
function Search({ onClick }: IconProps) {
|
|
86
62
|
return (
|
|
87
63
|
<svg
|
|
64
|
+
onClick={onClick}
|
|
88
65
|
xmlns="http://www.w3.org/2000/svg"
|
|
89
|
-
width="
|
|
90
|
-
height="
|
|
91
|
-
viewBox="0 0
|
|
66
|
+
width="24"
|
|
67
|
+
height="24"
|
|
68
|
+
viewBox="0 0 24 24"
|
|
92
69
|
fill="none"
|
|
93
70
|
>
|
|
94
71
|
<path
|
|
95
|
-
d="
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
fill="white"
|
|
101
|
-
/>
|
|
102
|
-
<path
|
|
103
|
-
d="M12.241 23.0939C9.63424 23.0939 7.04741 22.0984 5.05754 20.1274C1.09768 16.1656 1.09768 9.73499 5.05754 5.77312C9.01739 1.81124 15.4447 1.81124 19.4045 5.77312C23.3644 9.73499 23.3644 16.1656 19.4045 20.1274C17.4346 22.0984 14.8278 23.0939 12.2211 23.0939H12.241ZM12.241 3.78223C9.89293 3.78223 7.54487 4.67813 5.77389 6.46993C2.21201 10.0336 2.21201 15.847 5.77389 19.4306C9.33576 22.9943 15.1462 22.9943 18.728 19.4306C22.2899 15.8669 22.2899 10.0535 18.728 6.46993C16.9371 4.67813 14.589 3.78223 12.2609 3.78223H12.241Z"
|
|
104
|
-
fill="white"
|
|
72
|
+
d="M21.0008 21L15.8038 15.803M15.8038 15.803C17.2104 14.3965 18.0006 12.4887 18.0006 10.4995C18.0006 8.51035 17.2104 6.60262 15.8038 5.19605C14.3972 3.78947 12.4895 2.99927 10.5003 2.99927C8.51108 2.99927 6.60336 3.78947 5.19678 5.19605C3.79021 6.60262 3 8.51035 3 10.4995C3 12.4887 3.79021 14.3965 5.19678 15.803C6.60336 17.2096 8.51108 17.9998 10.5003 17.9998C12.4895 17.9998 14.3972 17.2096 15.8038 15.803Z"
|
|
73
|
+
stroke="white"
|
|
74
|
+
strokeWidth="1.5"
|
|
75
|
+
strokeLinecap="round"
|
|
76
|
+
strokeLinejoin="round"
|
|
105
77
|
/>
|
|
106
78
|
</svg>
|
|
107
79
|
);
|
|
108
80
|
}
|
|
109
81
|
|
|
110
82
|
function Browser({ onClick }: IconProps) {
|
|
111
|
-
const container = {
|
|
112
|
-
cursor: "cursor-pointer",
|
|
113
|
-
};
|
|
114
83
|
return (
|
|
115
84
|
<svg
|
|
116
|
-
className={cn(container)}
|
|
117
85
|
onClick={onClick}
|
|
118
86
|
xmlns="http://www.w3.org/2000/svg"
|
|
119
|
-
width="
|
|
120
|
-
height="
|
|
121
|
-
viewBox="0 0
|
|
87
|
+
width="24"
|
|
88
|
+
height="24"
|
|
89
|
+
viewBox="0 0 24 24"
|
|
122
90
|
fill="none"
|
|
123
91
|
>
|
|
124
92
|
<path
|
|
125
|
-
d="
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
fill="white"
|
|
131
|
-
/>
|
|
132
|
-
<path
|
|
133
|
-
d="M28.7932 8.43452C28.7932 8.43452 28.7335 8.43452 28.6937 8.43452C28.6539 8.43452 28.6341 8.43452 28.5943 8.41461C28.5744 8.41461 28.5346 8.3947 28.5147 8.37479C28.4948 8.37479 28.455 8.33497 28.4351 8.31506C28.3356 8.23543 28.2958 8.09606 28.2958 7.9567C28.2958 7.89698 28.2958 7.83725 28.3356 7.77752C28.3555 7.7178 28.3953 7.65807 28.4351 7.61825C28.5744 7.47889 28.7932 7.43907 28.9723 7.51871C29.032 7.53862 29.0917 7.57843 29.1315 7.61825C29.1713 7.65807 29.2111 7.7178 29.231 7.77752C29.2509 7.83725 29.2708 7.89698 29.2708 7.9567C29.2708 8.09606 29.2111 8.21552 29.1315 8.31506C29.0519 8.41461 28.9126 8.45442 28.7932 8.45442V8.43452Z"
|
|
134
|
-
fill="white"
|
|
135
|
-
/>
|
|
136
|
-
<path
|
|
137
|
-
d="M26.9228 8.43461C26.9228 8.43461 26.8631 8.43461 26.8233 8.43461C26.8034 8.43461 26.7636 8.43461 26.7238 8.4147C26.7039 8.4147 26.6641 8.39479 26.6442 8.37488C26.6243 8.37488 26.6044 8.33506 26.5646 8.31515C26.4651 8.21561 26.4253 8.09615 26.4253 7.95679C26.4253 7.89707 26.4253 7.83734 26.4651 7.77761C26.485 7.71789 26.5248 7.65816 26.5646 7.61834C26.684 7.49889 26.8432 7.45907 27.0024 7.47898C27.0422 7.47898 27.0621 7.49889 27.1019 7.5188C27.1218 7.5188 27.1615 7.53871 27.1814 7.55861C27.2013 7.57852 27.2411 7.59843 27.261 7.61834C27.3008 7.65816 27.3406 7.71789 27.3605 7.77761C27.3804 7.83734 27.4003 7.89707 27.4003 7.95679C27.4003 8.09615 27.3406 8.21561 27.261 8.31515C27.2411 8.33506 27.2212 8.35497 27.1814 8.37488C27.1615 8.37488 27.1218 8.4147 27.1019 8.4147C27.082 8.4147 27.0422 8.4147 27.0024 8.43461C26.9825 8.43461 26.9427 8.43461 26.9029 8.43461H26.9228Z"
|
|
138
|
-
fill="white"
|
|
139
|
-
/>
|
|
140
|
-
<path
|
|
141
|
-
d="M25.0722 8.43453C24.9528 8.43453 24.8135 8.39471 24.714 8.29517C24.6145 8.19562 24.5747 8.07617 24.5747 7.93681C24.5747 7.87708 24.5747 7.81735 24.6145 7.75762C24.6344 7.6979 24.6742 7.63817 24.714 7.59835C24.7538 7.55854 24.8135 7.51872 24.8732 7.49881C25.0523 7.41917 25.2712 7.45899 25.4105 7.59835C25.4502 7.63817 25.4901 7.6979 25.51 7.75762C25.5298 7.81735 25.5497 7.87708 25.5497 7.93681C25.5497 8.07617 25.49 8.19562 25.4105 8.29517C25.3906 8.31507 25.3508 8.33498 25.3309 8.35489C25.311 8.35489 25.2712 8.39471 25.2513 8.39471C25.2314 8.39471 25.1916 8.39471 25.1518 8.41462C25.1319 8.41462 25.0921 8.41462 25.0523 8.41462L25.0722 8.43453Z"
|
|
142
|
-
fill="white"
|
|
93
|
+
d="M3 8.25V18C3 18.5967 3.23705 19.169 3.65901 19.591C4.08097 20.0129 4.65326 20.25 5.25 20.25H18.75C19.3467 20.25 19.919 20.0129 20.341 19.591C20.7629 19.169 21 18.5967 21 18V8.25M3 8.25V6C3 5.40326 3.23705 4.83097 3.65901 4.40901C4.08097 3.98705 4.65326 3.75 5.25 3.75H18.75C19.3467 3.75 19.919 3.98705 20.341 4.40901C20.7629 4.83097 21 5.40326 21 6V8.25M3 8.25H21M5.25 6H5.258V6.008H5.25V6ZM7.5 6H7.508V6.008H7.5V6ZM9.75 6H9.758V6.008H9.75V6Z"
|
|
94
|
+
stroke="white"
|
|
95
|
+
stroke-width="1.5"
|
|
96
|
+
stroke-linecap="round"
|
|
97
|
+
stroke-linejoin="round"
|
|
143
98
|
/>
|
|
144
99
|
</svg>
|
|
145
100
|
);
|
|
146
101
|
}
|
|
147
102
|
|
|
148
|
-
function
|
|
103
|
+
function Event({ onClick }: IconProps) {
|
|
149
104
|
return (
|
|
150
105
|
<svg
|
|
106
|
+
onClick={onClick}
|
|
151
107
|
xmlns="http://www.w3.org/2000/svg"
|
|
152
|
-
width="
|
|
153
|
-
height="
|
|
154
|
-
viewBox="0 0
|
|
108
|
+
width="24"
|
|
109
|
+
height="24"
|
|
110
|
+
viewBox="0 0 24 24"
|
|
155
111
|
fill="none"
|
|
156
112
|
>
|
|
157
113
|
<path
|
|
158
|
-
d="
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
fill="white"
|
|
164
|
-
/>
|
|
165
|
-
<path
|
|
166
|
-
d="M28.9141 31.6831H5.03555C4.75697 31.6831 4.53809 31.4641 4.53809 31.1854V19.3794C4.53809 19.1007 4.75697 18.8817 5.03555 18.8817H28.9141C29.1926 18.8817 29.4115 19.1007 29.4115 19.3794V31.1854C29.4115 31.4641 29.1926 31.6831 28.9141 31.6831ZM5.53302 30.6877H28.4166V19.8772H5.53302V30.6877Z"
|
|
167
|
-
fill="white"
|
|
168
|
-
/>
|
|
169
|
-
<path
|
|
170
|
-
d="M16.2385 15.0392H11.4628C9.91073 15.0392 8.6571 13.7849 8.6571 12.2321C8.6571 10.6792 9.91073 9.4249 11.4628 9.4249H11.6021C12.0996 9.4249 12.5971 9.50453 13.0547 9.64389C15.2237 10.281 16.736 12.3117 16.736 14.5614C16.736 14.8401 16.5171 15.0591 16.2385 15.0591V15.0392ZM11.4628 10.4004C10.4679 10.4004 9.63214 11.2167 9.63214 12.2321C9.63214 13.2474 10.448 14.0637 11.4628 14.0637H15.7013C15.5023 12.451 14.3481 11.0574 12.7761 10.5796C12.3981 10.4602 12.0001 10.4004 11.6021 10.4004H11.4628Z"
|
|
171
|
-
fill="white"
|
|
172
|
-
/>
|
|
173
|
-
<path
|
|
174
|
-
d="M22.0091 15.0394H16.2384C15.9599 15.0394 15.741 14.8204 15.741 14.5416C15.741 11.177 18.487 8.4296 21.8499 8.4296H22.0091C22.9642 8.4296 23.8796 8.84768 24.4964 9.5644C25.0138 10.1617 25.2924 10.9381 25.2924 11.7345C25.2924 13.5462 23.8199 15.0394 21.9892 15.0394H22.0091ZM16.7558 14.0439H22.0091C23.2826 14.0439 24.3173 13.0086 24.3173 11.7345C24.3173 11.177 24.1183 10.6395 23.7602 10.2214C23.3224 9.72367 22.6856 9.42504 22.0091 9.42504H21.8499C19.2034 9.42504 17.0145 11.4557 16.7558 14.0439Z"
|
|
175
|
-
fill="white"
|
|
176
|
-
/>
|
|
177
|
-
<path
|
|
178
|
-
d="M19.1038 31.6833H14.9649C14.6863 31.6833 14.4674 31.4643 14.4674 31.1856V14.5418C14.4674 14.263 14.6863 14.044 14.9649 14.044H19.1038C19.3824 14.044 19.6013 14.263 19.6013 14.5418V31.1856C19.6013 31.4643 19.3824 31.6833 19.1038 31.6833ZM15.4623 30.6879H18.6064V15.0395H15.4623V30.6879Z"
|
|
179
|
-
fill="white"
|
|
180
|
-
/>
|
|
181
|
-
<path
|
|
182
|
-
d="M17.0544 12.1326C16.7758 12.1326 16.5569 11.9136 16.5569 11.6349V4.0496C16.5569 3.77088 16.7758 3.55188 17.0544 3.55188C17.3329 3.55188 17.5518 3.77088 17.5518 4.0496V11.6349C17.5518 11.9136 17.3329 12.1326 17.0544 12.1326Z"
|
|
183
|
-
fill="white"
|
|
114
|
+
d="M21 11.25V19.5C21 19.8978 20.842 20.2794 20.5607 20.5607C20.2794 20.842 19.8978 21 19.5 21H5.25C4.85218 21 4.47064 20.842 4.18934 20.5607C3.90804 20.2794 3.75 19.8978 3.75 19.5V11.25M12 4.875C12 4.35583 11.846 3.84831 11.5576 3.41663C11.2692 2.98495 10.8592 2.6485 10.3795 2.44982C9.89989 2.25114 9.37209 2.19915 8.86289 2.30044C8.35369 2.40173 7.88596 2.65173 7.51884 3.01885C7.15173 3.38596 6.90172 3.85369 6.80044 4.36289C6.69915 4.87209 6.75114 5.39989 6.94982 5.87954C7.1485 6.3592 7.48495 6.76917 7.91663 7.05761C8.34831 7.34605 8.85582 7.5 9.375 7.5H12M12 4.875V7.5M12 4.875C12 4.35583 12.154 3.84831 12.4424 3.41663C12.7308 2.98495 13.1408 2.6485 13.6205 2.44982C14.1001 2.25114 14.6279 2.19915 15.1371 2.30044C15.6463 2.40173 16.114 2.65173 16.4812 3.01885C16.8483 3.38596 17.0983 3.85369 17.1996 4.36289C17.3008 4.87209 17.2489 5.39989 17.0502 5.87954C16.8515 6.3592 16.5151 6.76917 16.0834 7.05761C15.6517 7.34605 15.1442 7.5 14.625 7.5H12M12 7.5V21M3.375 11.25H21.375C21.996 11.25 22.5 10.746 22.5 10.125V8.625C22.5 8.004 21.996 7.5 21.375 7.5H3.375C2.754 7.5 2.25 8.004 2.25 8.625V10.125C2.25 10.746 2.754 11.25 3.375 11.25Z"
|
|
115
|
+
stroke="white"
|
|
116
|
+
strokeWidth="1.5"
|
|
117
|
+
strokeLinecap="round"
|
|
118
|
+
strokeLinejoin="round"
|
|
184
119
|
/>
|
|
185
120
|
</svg>
|
|
186
121
|
);
|
|
@@ -33,10 +33,10 @@ export function Board({ children, action, option, debug, buttons, }) {
|
|
|
33
33
|
const body = {
|
|
34
34
|
positions: "relative",
|
|
35
35
|
sizes: `w-full ${heightSize[height ?? "xl"]}`,
|
|
36
|
-
background: `${background ?? "bg-white"}
|
|
36
|
+
background: `${background ?? "bg-white"} `,
|
|
37
37
|
styles: "text-black overflow-hidden",
|
|
38
38
|
rounded: `rounded-none ${isRounded ? "xl:rounded-xl" : ""}`,
|
|
39
|
-
boundary,
|
|
39
|
+
boundary: boundary ?? "border-0",
|
|
40
40
|
className,
|
|
41
41
|
};
|
|
42
42
|
const button = {
|
|
@@ -42,10 +42,10 @@ export default function CardDesign({ header, disabled, children, option, debug,
|
|
|
42
42
|
const container = {
|
|
43
43
|
sizes: `${widthSize[width ?? "sm"]} ${heightSize[height ?? "xs"]}`,
|
|
44
44
|
onClick: onClick ? "cursor-pointer" : "",
|
|
45
|
-
text: `${text ?? "text-base"} text-black
|
|
46
|
-
boundary: boundary ?? "
|
|
45
|
+
text: `${text ?? "text-base"} text-black `,
|
|
46
|
+
boundary: boundary ?? "shadow-main hover:shadow-green",
|
|
47
47
|
rounded: `rounded-${rounded ?? "xl"}`,
|
|
48
|
-
bgColor: `${background ?? "bg-white/80"}
|
|
48
|
+
bgColor: `${background ?? "bg-white/80"} `,
|
|
49
49
|
styles: "duration-500 ",
|
|
50
50
|
debug: debug && isDebug(`border-2 ${debug}`),
|
|
51
51
|
overflow: "overflow-hidden",
|
|
@@ -6,9 +6,10 @@ function Academy({ titles, data, buttons, option }) {
|
|
|
6
6
|
return (_jsx(InfoCardDesign, { titles: titles, option: {
|
|
7
7
|
...option,
|
|
8
8
|
titleBorder: "border-green-dark",
|
|
9
|
-
background: "",
|
|
9
|
+
background: "bg-none",
|
|
10
10
|
width: option?.width ?? "xs",
|
|
11
11
|
height: option?.height ?? "md",
|
|
12
|
+
boundary: "border-white border-0",
|
|
12
13
|
}, children: _jsxs("div", { className: "mt-2.5 flex flex-col gap-2.5", children: [_jsx("div", { className: "w-full", children: data.address }), _jsx("div", { className: "flex gap-2.5", children: buttons.map(({ title, onClick }, index) => (_jsx(Label.Button, { title: title, onClick: onClick, option: {
|
|
13
14
|
background: !index ? "bg-gray-medium" : "bg-green-dark",
|
|
14
15
|
text: "text-white",
|
|
@@ -21,7 +22,7 @@ function Digital({ image, data, option }) {
|
|
|
21
22
|
width: "md",
|
|
22
23
|
height: "md",
|
|
23
24
|
titleBorder: "border-crimson-burgundy",
|
|
24
|
-
|
|
25
|
+
background: "bg-white",
|
|
25
26
|
onClick: option?.onClick,
|
|
26
27
|
}, titles: {
|
|
27
28
|
title: "Digital Student Card",
|
package/globals.css
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
@tailwind components;
|
|
3
3
|
@tailwind utilities;
|
|
4
4
|
|
|
5
|
+
.image-container {
|
|
6
|
+
display: -webkit-box;
|
|
7
|
+
display: -ms-flexbox;
|
|
8
|
+
display: flex;
|
|
9
|
+
}
|
|
10
|
+
|
|
5
11
|
@font-face {
|
|
6
12
|
font-family: "Pretendard-Medium";
|
|
7
13
|
src: url("./asset/fonts/Pretendard-Medium.otf") format("opentype");
|
|
@@ -251,3 +257,13 @@ input[type="date"]::-webkit-calendar-picker-indicator {
|
|
|
251
257
|
opacity: 0;
|
|
252
258
|
transition: opacity 0.5s ease-in-out;
|
|
253
259
|
}
|
|
260
|
+
|
|
261
|
+
.text-gradient-green-to-red {
|
|
262
|
+
background: var(
|
|
263
|
+
--gradient-main,
|
|
264
|
+
linear-gradient(269deg, #760023 0%, #105652 100%)
|
|
265
|
+
);
|
|
266
|
+
background-clip: text;
|
|
267
|
+
-webkit-background-clip: text;
|
|
268
|
+
-webkit-text-fill-color: transparent;
|
|
269
|
+
}
|
|
@@ -37,7 +37,7 @@ export interface InputWidget extends Widget {
|
|
|
37
37
|
title?: string;
|
|
38
38
|
state: State<string> | State<string | undefined>;
|
|
39
39
|
onKeyDown?: (e: React.KeyboardEvent, value: string) => void;
|
|
40
|
-
placeholder?: string;
|
|
40
|
+
placeholder?: string | (() => string);
|
|
41
41
|
isValid?: IsValid;
|
|
42
42
|
type?: InputType;
|
|
43
43
|
button?: LabelWidget;
|
|
@@ -10,7 +10,7 @@ export default function BbsLayout({ title, icon, topRight, children, }) {
|
|
|
10
10
|
sizes: "w-full max-w-[1200px]",
|
|
11
11
|
};
|
|
12
12
|
const header = {
|
|
13
|
-
displays: "flex justify-between items-end",
|
|
13
|
+
displays: "flex flex-col md:flex-row md:justify-between items-end",
|
|
14
14
|
sizes: "w-full h-[188px]",
|
|
15
15
|
boundaries: "px-12 pb-10",
|
|
16
16
|
};
|
|
@@ -37,5 +37,5 @@ export default function Integrate({ isLoading, isUser, usernameState: [oldUserna
|
|
|
37
37
|
height: "md",
|
|
38
38
|
text: "text-white",
|
|
39
39
|
background: "bg-crimson-burgundy",
|
|
40
|
-
} })] })] }) }) }));
|
|
40
|
+
} })] }), _jsx("button", { onClick: () => (window.location.href = "https://new.tosel.org/legacy"), className: "flex justify-end text-xs sm:text-sm text-gray-medium mt-3", children: "\uC5F0\uB3D9\uC774 \uC774\uBBF8 \uC644\uB8CC\uB418\uC5C8\uB098\uC694? \uBC14\uB85C \uC131\uC801\uC744 \uD655\uC778\uD574\uC8FC\uC138\uC694! (\uD074\uB9AD)" })] }) }) }));
|
|
41
41
|
}
|
|
@@ -14,8 +14,8 @@ export function Header({ title, logo, notification, menu, option, }) {
|
|
|
14
14
|
positions: "fixed xl:static top-0 left-0 z-40",
|
|
15
15
|
displays: "flex items-center justify-between ",
|
|
16
16
|
sizes: "h-15 w-full",
|
|
17
|
-
background: `${background ?? "bg-white"}
|
|
18
|
-
text: `${text ?? "text-black"}
|
|
17
|
+
background: `${background ?? "bg-white"}`,
|
|
18
|
+
text: `${text ?? "text-black"} `,
|
|
19
19
|
styles: "px-5 xl:px-8 2xl:px-16 box-shadow",
|
|
20
20
|
className,
|
|
21
21
|
};
|
|
@@ -25,7 +25,7 @@ export function Header({ title, logo, notification, menu, option, }) {
|
|
|
25
25
|
], children: menu?.profile ? (_jsx(SVG.Profile, { onClick: () => {
|
|
26
26
|
setIsOwn(true);
|
|
27
27
|
return setView("menu");
|
|
28
|
-
}, color: iconColor })) : (_jsx(Label.Button, { title: "\
|
|
28
|
+
}, color: iconColor })) : (_jsx(Label.Button, { title: "\uB85C\uADF8\uC778", onClick: () => option?.onClick && option.onClick(), option: {
|
|
29
29
|
width: "sm",
|
|
30
30
|
height: "xs",
|
|
31
31
|
background: gradient.bg.greenToRed,
|
|
@@ -15,9 +15,8 @@ export default function Layout({ header, navigations, children, option, }) {
|
|
|
15
15
|
}, [flag]);
|
|
16
16
|
const container = {
|
|
17
17
|
sizes: "min-h-screen h-screen xl:h-auto",
|
|
18
|
-
background: `${background ?? "bg-gray-light"}
|
|
18
|
+
background: `${background ?? "bg-gray-light"} `,
|
|
19
19
|
styles: "font-pretendard-medium",
|
|
20
|
-
dark: isDark && "dark",
|
|
21
20
|
};
|
|
22
21
|
const body = {
|
|
23
22
|
sizes: "h-full ",
|
|
@@ -14,7 +14,7 @@ const buttonClassNames = (href, nowPath, color) => {
|
|
|
14
14
|
? `${bg} ${selectedText}`
|
|
15
15
|
: "bg-white text-black"
|
|
16
16
|
: (!isDark ? "bg-white " : "bg-black ") +
|
|
17
|
-
`xl:bg-transparent xl:hover:bg-white/50 ${text}
|
|
17
|
+
`xl:bg-transparent xl:hover:bg-white/50 ${text}`;
|
|
18
18
|
return [cn(container), toggle].join(" ");
|
|
19
19
|
};
|
|
20
20
|
export default buttonClassNames;
|
|
@@ -17,9 +17,8 @@ export default function MyPageLayout({ header, profile, navigations, children, o
|
|
|
17
17
|
}, [flag]);
|
|
18
18
|
const container = {
|
|
19
19
|
sizes: "min-h-screen h-screen xl:h-auto",
|
|
20
|
-
background: `${background ?? "bg-white"}
|
|
20
|
+
background: `${background ?? "bg-white"}`,
|
|
21
21
|
styles: "font-pretendard-medium",
|
|
22
|
-
dark: isDark && "dark",
|
|
23
22
|
};
|
|
24
23
|
const body = {
|
|
25
24
|
displays: "flex gap-12 xl:gap-7.5 ",
|
|
@@ -9,7 +9,7 @@ function Academy({ onClick }) {
|
|
|
9
9
|
boundary: "box-shadow shadow-green-dark",
|
|
10
10
|
onMouse: [onMouse, _],
|
|
11
11
|
width: "2xs",
|
|
12
|
-
height: "
|
|
12
|
+
height: "4xs",
|
|
13
13
|
}, children: [_jsx("div", { className: "text-gray-medium group-hover:text-green-dark duration-300", children: "\uB098\uC758 \uD559\uC6D0" }), _jsx("svg", { className: "absolute bottom-5 right-5 ", xmlns: "http://www.w3.org/2000/svg", width: "60", height: "60", viewBox: "0 0 60 60", fill: "none", children: _jsx("path", { className: "duration-300", d: "M9 53H52M10.9545 6H50.0455M12.9091 6V53M48.0909 6V53M22.6818 15.7917H26.5909M22.6818 23.625H26.5909M22.6818 31.4583H26.5909M34.4091 15.7917H38.3182M34.4091 23.625H38.3182M34.4091 31.4583H38.3182M22.6818 53V44.1875C22.6818 42.566 23.9953 41.25 25.6136 41.25H35.3864C37.0047 41.25 38.3182 42.566 38.3182 44.1875V53", stroke: !onMouse ? "#7F7F7F" : "#105652", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" }) })] }));
|
|
14
14
|
}
|
|
15
15
|
function Payment({ onClick }) {
|
|
@@ -18,7 +18,7 @@ function Payment({ onClick }) {
|
|
|
18
18
|
className: "pt-5 pl-5",
|
|
19
19
|
background: "group bg-green-dark/10 hover:bg-green-dark/30 ",
|
|
20
20
|
width: "2xs",
|
|
21
|
-
height: "
|
|
21
|
+
height: "4xs",
|
|
22
22
|
boundary: "",
|
|
23
23
|
}, children: [_jsx("div", { className: "opacity-0 group-hover:opacity-100 duration-300", children: "\uACB0\uC81C \uC815\uBCF4" }), _jsxs("div", { className: "absolute top-5 group-hover:top-11.25 left-5 flex flex-col gap-1.5 duration-300", children: [_jsx("div", { className: "w-24 h-1.5 bg-green-dark/30 group-hover:bg-green-dark/40 duration-300" }), _jsx("div", { className: "w-14.25 h-1.5 bg-green-dark/30 group-hover:bg-green-dark/40 duration-300" })] }), _jsx("div", { className: "absolute top-5 right-5 w-12.25 h-7 rounded-full bg-[#CFDDDC]" }), _jsx("div", { className: "absolute left-0 bottom-5 w-full h-5 bg-green-dark" })] }));
|
|
24
24
|
}
|
|
@@ -22,8 +22,7 @@ function Profile({ name, birthday, image, modify }) {
|
|
|
22
22
|
return (_jsxs(Card, { option: {
|
|
23
23
|
className: "flex gap-x-7.5 items-center pl-5",
|
|
24
24
|
width: "md",
|
|
25
|
-
height: "
|
|
26
|
-
boundary: "border-1 border-black",
|
|
25
|
+
height: "4xs",
|
|
27
26
|
}, children: [_jsxs("button", { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onClick: modify.image, className: "w-20 h-20 overflow-hidden rounded-md relative", children: [_jsx("img", { src: image, alt: "profile-image", className: "bg-cover" }), transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(hoverBox), children: [_jsx(SVG.Image, {}), _jsx("div", { className: "text-white text-xs leading-none", children: "\uC0AC\uC9C4 \uBC14\uAFB8\uAE30" })] })))] }), _jsxs("div", { className: "flex flex-col h-20", children: [_jsx("div", { className: "text-xl leading-none font-pretendard-bold text-gray-dark", children: name }), _jsx("div", { className: "leading-none text-gray-medium mt-1.25", children: birthday }), _jsxs("div", { className: "flex gap-3 mt-auto", children: [_jsx(Label.Button, { title: "\uC2E4\uBA85 \uC218\uC815", option: { width: "sm", height: "xs" }, onClick: modify.name }), _jsx(Label.Button, { title: "\uC0DD\uC77C \uC218\uC815", option: { width: "sm", height: "xs" }, onClick: modify.birthday })] })] })] }));
|
|
28
27
|
}
|
|
29
28
|
function Detail({ titles, infos, toggle, }) {
|
|
@@ -36,14 +35,14 @@ function Detail({ titles, infos, toggle, }) {
|
|
|
36
35
|
return (_jsxs(Card, { option: {
|
|
37
36
|
className: "pt-5 px-5",
|
|
38
37
|
width: "md",
|
|
39
|
-
height: "
|
|
38
|
+
height: "2xs",
|
|
40
39
|
background: gradient.bg.greenToRedSoft,
|
|
41
40
|
boundary: "",
|
|
42
|
-
}, children: [_jsxs("div", { className: "h-13.25 flex flex-col
|
|
41
|
+
}, children: [_jsxs("div", { className: "h-13.25 flex flex-col", children: [_jsx("div", { className: "text-base font-bold h-6 leading-none ", children: titles.title }), _jsx("div", { className: "h-4.75 text-sm leading-none", children: titles.subtitle }), _jsx("div", { className: "h-0.5 w-full bg-gradient-to-r from-green-dark/50 to-red-crimson/50" })] }), _jsx("div", { className: "mt-4.25 flex flex-col gap-2.5 ", children: infos?.map(({ title, content, button }, index) => (_jsxs("div", { className: cn(infoBox), children: [title === "phone" ? (_jsx(SVG.Phone, {})) : title === "email" ? (_jsx(SVG.Email, {})) : (_jsx("div", { className: "font-pretendard-bold mr-5 w-7 flex items-center", children: title })), _jsx("div", { className: "leading-none flex items-center w-60", children: content }), button && (_jsx(Label.Button, { title: button.title, onClick: button.onClick, option: {
|
|
43
42
|
className: "ml-auto",
|
|
44
43
|
background: gradient.bg.greenToRed,
|
|
45
44
|
text: "text-white",
|
|
46
|
-
width: "
|
|
45
|
+
width: "xs",
|
|
47
46
|
height: "xs",
|
|
48
47
|
} }))] }, id + index))) }), toggle && (_jsxs("div", { className: "flex gap-2.5 items-center absolute bottom-5 right-5", children: [_jsx("div", { className: "text-xs leading-none text-green-dark", children: "\uD559\uC6D0\uC73C\uB85C \uBC1B\uAE30" }), _jsx(Toggle, { state: toggle })] }))] }));
|
|
49
48
|
}
|
|
@@ -32,7 +32,7 @@ export default function Notice({ banners }) {
|
|
|
32
32
|
sizes: "w-full",
|
|
33
33
|
};
|
|
34
34
|
const deckTitle = {
|
|
35
|
-
displays: "pl-5",
|
|
35
|
+
displays: "xl:pl-5 md:pl-[76px] pl-5",
|
|
36
36
|
sizes: "max-w-300 w-full",
|
|
37
37
|
textstyles: "font-pretendard-var font-bold text-2xl text-gray-dark",
|
|
38
38
|
};
|
|
@@ -41,7 +41,7 @@ export default function Notice({ banners }) {
|
|
|
41
41
|
sizes: "w-screen",
|
|
42
42
|
};
|
|
43
43
|
const cardWrapper = {
|
|
44
|
-
sizes: "w-full overflow-x-auto scroll-smooth scrollbar-hidden scroll-px-
|
|
44
|
+
sizes: "w-full overflow-x-auto scroll-smooth scrollbar-hidden scroll-px-[20px]",
|
|
45
45
|
display: "flex flex-nowrap vertical-top",
|
|
46
46
|
spacings: "px-5 pt-4 md:pt-6 pb-12",
|
|
47
47
|
snap: "snap-x snap-mandatory scroll-ms-0",
|
|
@@ -49,12 +49,12 @@ export default function Notice({ banners }) {
|
|
|
49
49
|
//adjust the responsive right margin of scroller
|
|
50
50
|
const cardDeck = {
|
|
51
51
|
displays: "inline-flex",
|
|
52
|
-
spacings: "gap-5
|
|
52
|
+
spacings: "gap-5 xl:mr-[calc(100vw-1200px)]",
|
|
53
53
|
};
|
|
54
54
|
const buttonPositioning = {
|
|
55
55
|
displays: "hidden flex-row md:flex",
|
|
56
56
|
sizes: "w-full h-full",
|
|
57
|
-
spacings: "md:pl-[
|
|
57
|
+
spacings: "xl:pl-[calc(50vw-600px)] md:pl-[62px] pl-2 pr-2",
|
|
58
58
|
positions: "absolute top-0 left-0 justify-between items-center opacity-0 group-hover:opacity-100 duration-300",
|
|
59
59
|
hovering: "group pointer-events-none",
|
|
60
60
|
};
|
|
@@ -79,7 +79,7 @@ function Banner({ onClick, titles }) {
|
|
|
79
79
|
sizes: "w-65 h-40 xxxs:w-76 md:w-80 md:h-40 rounded-lg md:rounded-lg",
|
|
80
80
|
backgrounds: "bg-white",
|
|
81
81
|
hover: "hover:shadow-main-hover hover:scale-[1.03]",
|
|
82
|
-
position: "
|
|
82
|
+
position: "xl:translate-x-[calc(50vw-600px)] md:translate-x-[56px]",
|
|
83
83
|
transition: "duration-300",
|
|
84
84
|
displays: "relative display-block overflow-hidden",
|
|
85
85
|
fonts: "font-pretendard-var",
|
|
@@ -29,7 +29,7 @@ export default function Promotion({ banners, option, }) {
|
|
|
29
29
|
sizes: "w-full",
|
|
30
30
|
};
|
|
31
31
|
const deckTitle = {
|
|
32
|
-
displays: "pl-5",
|
|
32
|
+
displays: "xl:pl-5 md:pl-[76px] pl-5",
|
|
33
33
|
sizes: "max-w-300 w-full",
|
|
34
34
|
textstyles: "font-pretendard-var font-bold text-2xl text-green-dark",
|
|
35
35
|
};
|
|
@@ -38,7 +38,7 @@ export default function Promotion({ banners, option, }) {
|
|
|
38
38
|
sizes: "w-screen",
|
|
39
39
|
};
|
|
40
40
|
const cardWrapper = {
|
|
41
|
-
sizes: "w-full overflow-x-auto scroll-smooth scrollbar-hidden scroll-px-
|
|
41
|
+
sizes: "w-full overflow-x-auto scroll-smooth scrollbar-hidden scroll-px-[20px]",
|
|
42
42
|
display: "flex flex-nowrap vertical-top",
|
|
43
43
|
spacings: "px-5 pt-4 md:pt-6 pb-12",
|
|
44
44
|
snap: "snap-x snap-mandatory scroll-ms-0",
|
|
@@ -46,12 +46,12 @@ export default function Promotion({ banners, option, }) {
|
|
|
46
46
|
//adjust the responsive right margin of scroller
|
|
47
47
|
const cardDeck = {
|
|
48
48
|
displays: "inline-flex",
|
|
49
|
-
spacings: "gap-5
|
|
49
|
+
spacings: "gap-5 xl:mr-[calc(100vw-1200px)]",
|
|
50
50
|
};
|
|
51
51
|
const buttonPositioning = {
|
|
52
52
|
displays: "hidden flex-row md:flex",
|
|
53
53
|
sizes: "w-full h-full",
|
|
54
|
-
spacings: "md:pl-[
|
|
54
|
+
spacings: "xl:pl-[calc(50vw-600px)] md:pl-[62px] pl-2 pr-2",
|
|
55
55
|
positions: "absolute top-0 left-0 justify-between items-center opacity-0 group-hover:opacity-100 duration-300",
|
|
56
56
|
hovering: "group pointer-events-none",
|
|
57
57
|
};
|
|
@@ -77,7 +77,7 @@ function Banner({ onClick, image, option }) {
|
|
|
77
77
|
sizes: "w-65 h-40 xxxs:w-76 xxxs:h-47.5 md:w-120 md:h-75 rounded-xl md:rounded-2xl",
|
|
78
78
|
backgrounds: background,
|
|
79
79
|
hover: "hover:shadow-main-hover hover:scale-[1.03]",
|
|
80
|
-
position: "
|
|
80
|
+
position: "xl:translate-x-[calc(50vw-600px)] md:translate-x-[56px]",
|
|
81
81
|
transition: "duration-300",
|
|
82
82
|
displays: "relative display-block overflow-hidden",
|
|
83
83
|
fonts: "font-pretendard-var",
|
|
@@ -28,7 +28,7 @@ export default function Service({ banners }) {
|
|
|
28
28
|
sizes: "w-full",
|
|
29
29
|
};
|
|
30
30
|
const deckTitle = {
|
|
31
|
-
displays: "pl-5",
|
|
31
|
+
displays: "xl:pl-5 md:pl-[76px] pl-5",
|
|
32
32
|
sizes: "max-w-300 w-full",
|
|
33
33
|
textstyles: "font-pretendard-var font-bold text-2xl text-green-dark",
|
|
34
34
|
};
|
|
@@ -37,7 +37,7 @@ export default function Service({ banners }) {
|
|
|
37
37
|
sizes: "w-screen",
|
|
38
38
|
};
|
|
39
39
|
const cardWrapper = {
|
|
40
|
-
sizes: "w-full overflow-x-auto scroll-smooth scrollbar-hidden scroll-px-
|
|
40
|
+
sizes: "w-full overflow-x-auto scroll-smooth scrollbar-hidden scroll-px-[20px]",
|
|
41
41
|
display: "flex flex-nowrap vertical-top",
|
|
42
42
|
spacings: "px-5 pt-4 md:pt-6 pb-12",
|
|
43
43
|
snap: "snap-x snap-mandatory scroll-ms-0",
|
|
@@ -45,12 +45,12 @@ export default function Service({ banners }) {
|
|
|
45
45
|
//adjust the responsive right margin of scroller
|
|
46
46
|
const cardDeck = {
|
|
47
47
|
displays: "inline-flex",
|
|
48
|
-
spacings: "gap-5
|
|
48
|
+
spacings: "gap-5 xl:mr-[calc(100vw-1200px)]",
|
|
49
49
|
};
|
|
50
50
|
const buttonPositioning = {
|
|
51
51
|
displays: "hidden flex-row md:flex",
|
|
52
52
|
sizes: "w-full h-full",
|
|
53
|
-
spacings: "md:pl-[
|
|
53
|
+
spacings: "xl:pl-[calc(50vw-600px)] md:pl-[62px] pl-2 pr-2",
|
|
54
54
|
positions: "absolute top-0 left-0 justify-between items-center opacity-0 group-hover:opacity-100 duration-300",
|
|
55
55
|
hovering: "group pointer-events-none",
|
|
56
56
|
};
|
|
@@ -76,7 +76,7 @@ function Banner({ titles, onClick, image, option }) {
|
|
|
76
76
|
sizes: "h-100 w-65 xxxs:w-76 md:w-100 md:h-125 rounded-xl md:rounded-2xl",
|
|
77
77
|
backgrounds: background,
|
|
78
78
|
hover: "hover:shadow-main-hover hover:scale-[1.03]",
|
|
79
|
-
position: "
|
|
79
|
+
position: "xl:translate-x-[calc(50vw-600px)] md:translate-x-[56px]",
|
|
80
80
|
transition: "duration-300",
|
|
81
81
|
displays: "relative display-block overflow-hidden",
|
|
82
82
|
fonts: "font-pretendard-var",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import Layout from "./layout";
|
|
2
2
|
import Carousel from "./layout/Carousel";
|
|
3
|
-
import Navigation from "./Navigation";
|
|
3
|
+
import Navigation from "./layout/Navigation";
|
|
4
4
|
import Notice from "./Notice";
|
|
5
5
|
import Promotion from "./Promotion";
|
|
6
6
|
import Service from "./Service";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import Layout from "./layout";
|
|
2
2
|
import Carousel from "./layout/Carousel";
|
|
3
|
-
import Navigation from "./Navigation";
|
|
3
|
+
import Navigation from "./layout/Navigation";
|
|
4
4
|
import Notice from "./Notice";
|
|
5
5
|
import Promotion from "./Promotion";
|
|
6
6
|
import Service from "./Service";
|
|
@@ -89,5 +89,5 @@ export default function Carousel({ contents, }) {
|
|
|
89
89
|
display: "absolute flex justify-center items-center md:static md:justify-start ",
|
|
90
90
|
sizes: "w-full h-fit left-0 bottom-0 z-10",
|
|
91
91
|
};
|
|
92
|
-
return (_jsx("div", { onClick: contents[index].onClick, className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "duration-500 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 }), _jsx("div", { className: cn(buttonBoxPosition), onClick: (e) => e.stopPropagation(), children: _jsxs("div", { className: cn(buttonBox), children: [_jsx("button", { onClick: handlePrev, className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.LessThan, {}) }), _jsxs("div", { className: "flex flex-row md:gap-2 gap-4 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: handleNext, 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(animated.img, { src: image, alt: "carousel-image", onLoad: () => setLoaded(true), className: "object-cover h-full z-0", style: transitionStyles })) })] }) }));
|
|
92
|
+
return (_jsx("div", { onClick: contents[index].onClick, className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "duration-500 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 }), _jsx("div", { className: cn(buttonBoxPosition), onClick: (e) => e.stopPropagation(), children: _jsxs("div", { className: cn(buttonBox), children: [_jsx("button", { onClick: handlePrev, className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.LessThan, {}) }), _jsxs("div", { className: "flex flex-row md:gap-2 gap-4 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: handleNext, className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.GreaterThan, {}) })] }) })] }), _jsx("div", { className: "h-full overflow-hidden w-fit image-container", children: image && (_jsx(animated.img, { src: image, alt: "carousel-image", onLoad: () => setLoaded(true), className: "object-cover h-full z-0", style: transitionStyles })) })] }) }));
|
|
93
93
|
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { OnClick } from "../../../../interface";
|
|
2
|
+
interface Browser {
|
|
3
|
+
onClick: OnClick;
|
|
4
|
+
}
|
|
5
|
+
interface Calendar {
|
|
6
|
+
schedules: {
|
|
7
|
+
onClick?: OnClick;
|
|
8
|
+
category: string;
|
|
9
|
+
title: string;
|
|
10
|
+
description?: string | [string] | [string, string];
|
|
11
|
+
}[];
|
|
12
|
+
}
|
|
13
|
+
interface Notice {
|
|
14
|
+
announcements: {
|
|
15
|
+
onClick?: OnClick;
|
|
16
|
+
title: string;
|
|
17
|
+
date: string;
|
|
18
|
+
description?: string | [string] | [string, string];
|
|
19
|
+
}[];
|
|
20
|
+
}
|
|
21
|
+
interface Event {
|
|
22
|
+
events: {
|
|
23
|
+
onClick?: OnClick;
|
|
24
|
+
title: string;
|
|
25
|
+
category: string;
|
|
26
|
+
thumbnail?: string;
|
|
27
|
+
}[];
|
|
28
|
+
}
|
|
29
|
+
interface HomeNavigationProps {
|
|
30
|
+
browser: Browser;
|
|
31
|
+
calendar: Calendar;
|
|
32
|
+
notice: Notice;
|
|
33
|
+
event: Event;
|
|
34
|
+
}
|
|
35
|
+
export default function Navigation({ browser, calendar, notice, event, }: HomeNavigationProps): import("react/jsx-runtime").JSX.Element;
|
|
36
|
+
export {};
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useState } from "react";
|
|
3
|
+
import { animated, useTransition } from "react-spring";
|
|
4
|
+
import SVG from "../../../../asset/SVG";
|
|
5
|
+
import { cn } from "../../../../util";
|
|
6
|
+
import { useActionStore } from "../../../../store";
|
|
7
|
+
import { LineBreaks } from "../../../../text";
|
|
8
|
+
export default function Navigation({ browser, calendar, notice, event, }) {
|
|
9
|
+
const { flag } = useActionStore();
|
|
10
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
11
|
+
const [isHidden, setIsHidden] = useState(false);
|
|
12
|
+
const [type, setType] = useState();
|
|
13
|
+
const container = {
|
|
14
|
+
displays: "flex flex-col justify-center gap-y-5 items-center",
|
|
15
|
+
sizes: !isOpen ? "h-80 rounded-r-xl" : "h-screen",
|
|
16
|
+
widths: !isHidden ? "w-[56px] duration-100" : "w-0 duration-500",
|
|
17
|
+
backgrounds: "bg-gradient-to-b from-green-dark to-crimson-burgundy",
|
|
18
|
+
};
|
|
19
|
+
const overlayPopTransition = useTransition(!isHidden && isOpen, {
|
|
20
|
+
from: { width: "0%" },
|
|
21
|
+
enter: { width: "30%" },
|
|
22
|
+
leave: { width: "0%" },
|
|
23
|
+
config: { duration: 100 },
|
|
24
|
+
});
|
|
25
|
+
const overlayCoverTransition = useTransition(isHidden, {
|
|
26
|
+
from: { width: "0%" },
|
|
27
|
+
enter: { width: "100%" },
|
|
28
|
+
config: { duration: 500 },
|
|
29
|
+
});
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
if (isHidden) {
|
|
32
|
+
const timer = setTimeout(() => {
|
|
33
|
+
browser.onClick();
|
|
34
|
+
}, 2000);
|
|
35
|
+
return () => clearTimeout(timer);
|
|
36
|
+
}
|
|
37
|
+
}, [isHidden]);
|
|
38
|
+
useEffect(() => {
|
|
39
|
+
setIsOpen(false);
|
|
40
|
+
setType(undefined);
|
|
41
|
+
}, [flag]);
|
|
42
|
+
const handleOpen = (type) => {
|
|
43
|
+
setType(type);
|
|
44
|
+
if (type === "browser")
|
|
45
|
+
setIsHidden(true);
|
|
46
|
+
return setIsOpen(true);
|
|
47
|
+
};
|
|
48
|
+
const itemContainer = {
|
|
49
|
+
positions: "fixed top-0 left-0 z-40 ",
|
|
50
|
+
sizes: "h-screen ",
|
|
51
|
+
boundaries: "pl-[56px]",
|
|
52
|
+
styles: "overflow-hidden bg-white ",
|
|
53
|
+
};
|
|
54
|
+
const itemBody = {
|
|
55
|
+
boundaries: "px-7.5 pt-[34px]",
|
|
56
|
+
};
|
|
57
|
+
return (_jsxs(_Fragment, { children: [overlayCoverTransition((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..." })] }))), overlayPopTransition((styles, item) => type &&
|
|
58
|
+
item && (_jsx(animated.div, { style: styles, className: cn(itemContainer), children: _jsxs("div", { className: cn(itemBody), children: [_jsx("div", { className: "text-[26px] font-bold text-gradient-green-to-red ", children: navigationTypeString[type] }), _jsx(NavigationItem, { type: type, calendar: calendar, notice: notice, event: event })] }) }))), _jsx("div", { className: "fixed top-1/2 -translate-y-1/2 flex justify-center items-center z-45", children: _jsxs("div", { onClick: (e) => e.stopPropagation(), className: cn(container), children: [_jsx(SVG.Icon.Calendar, { onClick: () => handleOpen("calendar") }), _jsx(SVG.Icon.Notification, { onClick: () => handleOpen("notification") }), _jsx(SVG.Icon.Search, { onClick: () => handleOpen("search") }), _jsx(SVG.Icon.Browser, { onClick: () => handleOpen("browser") }), _jsx(SVG.Icon.Event, { onClick: () => handleOpen("event") })] }) })] }));
|
|
59
|
+
}
|
|
60
|
+
const navigationTypeString = {
|
|
61
|
+
calendar: "시험 일정",
|
|
62
|
+
notification: "공지사항",
|
|
63
|
+
event: "이벤트",
|
|
64
|
+
};
|
|
65
|
+
function NavigationItem({ type, calendar, notice, event, }) {
|
|
66
|
+
if (type === "calendar")
|
|
67
|
+
return (_jsx("div", { className: "mt-[34px] flex flex-col gap-y-[15px]", children: calendar.schedules.map(({ category, title, description, onClick }) => (_jsxs("div", { onClick: onClick, className: "flex flex-col justify-between w-full h-[184px] box-shadow rounded-[10px] p-7.5", children: [_jsxs("div", { children: [_jsx("div", { className: "text-[15px] text-gray-medium", children: category }), _jsx("div", { className: "text-[20px] font-bold text-gray-dark", children: title })] }), _jsx(LineBreaks, { texts: description, className: "text-gray-dark text-[18px]" })] }))) }));
|
|
68
|
+
if (type === "notification")
|
|
69
|
+
return (_jsx("div", { className: "mt-[34px] flex flex-col gap-y-[15px]", children: notice.announcements.map(({ title, date, description, onClick }) => (_jsxs("div", { onClick: onClick, className: "flex flex-col justify-between w-full h-[140px] box-shadow rounded-[10px] p-7.5", children: [_jsxs("div", { children: [_jsx("div", { className: "text-[15px] text-gray-medium", children: date }), _jsx("div", { className: "text-[20px] font-bold text-gray-dark", children: title })] }), _jsx(LineBreaks, { texts: description, className: "text-gray-dark text-[18px]" })] }))) }));
|
|
70
|
+
if (type === "event")
|
|
71
|
+
return (_jsx("div", { className: "mt-[34px] flex flex-col gap-y-[15px]", children: event.events.map(({ title, category, thumbnail, onClick }) => (_jsxs("div", { onClick: onClick, className: "flex flex-col justify-between w-full box-shadow rounded-[10px] p-7.5", children: [_jsxs("div", { className: "h-[92px] border-b-2", children: [_jsx("div", { className: "text-[15px] text-gray-medium", children: category }), _jsx("div", { className: "text-[20px] font-bold text-gray-dark", children: title })] }), _jsx("div", { className: "image-container pt-[15px]", children: _jsx("img", { src: thumbnail, alt: title, className: "w-full" }) })] }))) }));
|
|
72
|
+
return null;
|
|
73
|
+
}
|
|
@@ -2,11 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { cn } from "../../../../util";
|
|
3
3
|
import Footer from "./Footer";
|
|
4
4
|
import Header from "./Header";
|
|
5
|
+
import { useActionStore } from "../../../../store";
|
|
5
6
|
export default function Layout({ contents, children, logo, rightButton, }) {
|
|
6
7
|
const container = {
|
|
7
8
|
displays: "flex flex-col",
|
|
8
9
|
sizes: "w-full min-h-screen",
|
|
9
10
|
overflows: "overflow-x-hidden ",
|
|
10
11
|
};
|
|
11
|
-
|
|
12
|
+
const { setFlag } = useActionStore();
|
|
13
|
+
return (_jsxs("div", { className: cn(container), onClick: setFlag, children: [_jsx(Header, { logo: logo, rightButton: rightButton, contents: contents }), _jsx("div", { className: "w-full max-w-[1200px] h-15" }), children, _jsx(Footer, {})] }));
|
|
12
14
|
}
|
package/package.json
CHANGED
package/util/colors.js
CHANGED
|
@@ -9,11 +9,11 @@ export const gradientBackground = {
|
|
|
9
9
|
lab: "bg-gradient-to-br from-violet-light/20 to-blue-sky/40 ",
|
|
10
10
|
labSoft: "bg-gradient-to-br from-[#797EF6]/32 to-[#44C5F3]/20",
|
|
11
11
|
greenToRed: "bg-gradient-to-r from-green-dark to-red-crimson",
|
|
12
|
-
greenToRedSoft: "bg-gradient-to-r from-green-dark/
|
|
12
|
+
greenToRedSoft: "bg-gradient-to-r from-green-dark/10 to-red-crimson/10",
|
|
13
13
|
};
|
|
14
14
|
export const gradientBorder = {
|
|
15
15
|
greenToRed: "border-gradient-to-r from-green-dark to-crimson-burgundy",
|
|
16
|
-
greenToRedSoft: "border-gradient-to-r from-green-dark/
|
|
16
|
+
greenToRedSoft: "border-gradient-to-r from-green-dark/10 to-red-crimson/10",
|
|
17
17
|
};
|
|
18
18
|
export const gradient = {
|
|
19
19
|
bg: gradientBackground,
|
package/version.txt
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
1.0.
|
|
1
|
+
1.0.152
|
|
@@ -43,7 +43,7 @@ export default function InputForm({ title, state, placeholder, isValid, type, on
|
|
|
43
43
|
!(isValid === false) &&
|
|
44
44
|
"shadow-[0px_0px_10px_0px_rgba(16,86,82,0.38)]",
|
|
45
45
|
};
|
|
46
|
-
return (_jsxs("div", { children: [title && _jsx("div", { className: "text-gray-dark", children: title }), _jsxs("div", { className: cn(container), children: [_jsx("div", { onClick: () => ref.current?.focus(), className: cn(placeholderBox), children: placeholder }), _jsx("input", { ref: ref, className: cn(inputBox), value: value, onKeyDown: onKeyDown && ((e) => onKeyDown(e, value ?? "")), onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onChange: (e) => {
|
|
46
|
+
return (_jsxs("div", { children: [title && _jsx("div", { className: "text-gray-dark", children: title }), _jsxs("div", { className: cn(container), children: [_jsx("div", { onClick: () => ref.current?.focus(), className: cn(placeholderBox), children: typeof placeholder === "function" ? placeholder() : placeholder }), _jsx("input", { ref: ref, className: cn(inputBox), value: value, onKeyDown: onKeyDown && ((e) => onKeyDown(e, value ?? "")), onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onChange: (e) => {
|
|
47
47
|
if (maxLength && e.target.value.length > maxLength)
|
|
48
48
|
return;
|
|
49
49
|
setValue(e.target.value);
|
|
@@ -42,7 +42,9 @@ function Input({ state, onKeyDown, placeholder, option }) {
|
|
|
42
42
|
styles: "focus:outline-none bg-transparent",
|
|
43
43
|
pointers: "cursor-default",
|
|
44
44
|
};
|
|
45
|
-
return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), onClick: () => ref.current?.focus(), children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M21.8758 21.8748L16.4623 16.4613M16.4623 16.4613C17.9275 14.9961 18.7506 13.0089 18.7506 10.9368C18.7506 8.86474 17.9275 6.87752 16.4623 5.41234C14.9971 3.94715 13.0099 3.12402 10.9378 3.12402C8.86571 3.12402 6.8785 3.94715 5.41331 5.41234C3.94813 6.87752 3.125 8.86474 3.125 10.9368C3.125 13.0089 3.94813 14.9961 5.41331 16.4613C6.8785 17.9265 8.86571 18.7496 10.9378 18.7496C13.0099 18.7496 14.9971 17.9265 16.4623 16.4613Z", stroke: "#105652", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }), _jsx("input", { id: id, ref: ref, className: cn(inputBox), type: "text", value: value, onFocus: () => setIsFocus(true), onBlur: () => setIsFocus(false), placeholder: placeholder
|
|
45
|
+
return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), onClick: () => ref.current?.focus(), children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M21.8758 21.8748L16.4623 16.4613M16.4623 16.4613C17.9275 14.9961 18.7506 13.0089 18.7506 10.9368C18.7506 8.86474 17.9275 6.87752 16.4623 5.41234C14.9971 3.94715 13.0099 3.12402 10.9378 3.12402C8.86571 3.12402 6.8785 3.94715 5.41331 5.41234C3.94813 6.87752 3.125 8.86474 3.125 10.9368C3.125 13.0089 3.94813 14.9961 5.41331 16.4613C6.8785 17.9265 8.86571 18.7496 10.9378 18.7496C13.0099 18.7496 14.9971 17.9265 16.4623 16.4613Z", stroke: "#105652", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }), _jsx("input", { id: id, ref: ref, className: cn(inputBox), type: "text", value: value, onFocus: () => setIsFocus(true), onBlur: () => setIsFocus(false), placeholder: typeof placeholder === "function"
|
|
46
|
+
? placeholder()
|
|
47
|
+
: placeholder ?? "입력해주세요", onKeyDown: onKeyDown && ((e) => onKeyDown(e, value ?? "")), onChange: (e) => setValue(e.target.value) }), _jsx(Obstacle, { disabled: disabled })] }) }));
|
|
46
48
|
}
|
|
47
49
|
Input.Form = Form;
|
|
48
50
|
export default Input;
|
|
@@ -13,6 +13,7 @@ const widthSize = {
|
|
|
13
13
|
};
|
|
14
14
|
const heightSize = {
|
|
15
15
|
xs: "h-6.5",
|
|
16
|
+
sm: "h-9",
|
|
16
17
|
};
|
|
17
18
|
export default function Select({ state, selectOptions: selectOptionsInput, placeholder, option, }) {
|
|
18
19
|
const selectOptions = selectOptionsInput?.map(toSelectOption);
|
|
@@ -40,28 +41,28 @@ export default function Select({ state, selectOptions: selectOptionsInput, place
|
|
|
40
41
|
};
|
|
41
42
|
const button = {
|
|
42
43
|
displays: "flex items-center",
|
|
43
|
-
sizes: `${widthSize[option?.width ?? "md"]} ${heightSize[option?.height ?? "
|
|
44
|
-
styles: "
|
|
45
|
-
shadow: isOpen || isHover ? "box-shadow" : "shadow-
|
|
44
|
+
sizes: `${widthSize[option?.width ?? "md"]} ${heightSize[option?.height ?? "sm"]}`,
|
|
45
|
+
styles: "px-1 rounded-md outline-none duration-100 text-gray-400",
|
|
46
|
+
shadow: isOpen || isHover ? "box-shadow" : "shadow-main",
|
|
46
47
|
};
|
|
47
48
|
const input = {
|
|
48
49
|
positions: "absolute z-30",
|
|
49
50
|
layouts: cn(button),
|
|
50
|
-
styles: "
|
|
51
|
+
styles: "outline-none text-xs pl-1.5",
|
|
51
52
|
};
|
|
52
53
|
const body = {
|
|
53
54
|
positions: "absolute z-30",
|
|
54
55
|
displays: "flex flex-col gap-1",
|
|
55
56
|
sizes: `${widthSize[option?.width ?? "md"]} min-h-6.5 max-h-23.75`,
|
|
56
|
-
paddings: "
|
|
57
|
+
paddings: "px-1 py-1",
|
|
57
58
|
styles: "bg-white box-shadow rounded-md box-shadow overflow-y-scroll",
|
|
58
59
|
};
|
|
59
60
|
const label = {
|
|
60
61
|
displays: "flex",
|
|
61
|
-
sizes: "h-
|
|
62
|
+
sizes: "h-fit w-fit hover:w-full",
|
|
62
63
|
paddings: "px-1",
|
|
63
|
-
styles: "rounded-
|
|
64
|
-
fonts: "text-
|
|
64
|
+
styles: "rounded-md duration-500",
|
|
65
|
+
fonts: "text-sm text-gray-dim bg-gray-light",
|
|
65
66
|
};
|
|
66
67
|
const inputTransition = useTransition(isOpen, {
|
|
67
68
|
from: {
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useState } from "react";
|
|
3
|
-
import { animated, useTransition } from "react-spring";
|
|
4
|
-
import { cn } from "../../../util";
|
|
5
|
-
export default function Navigation({ clickBrowser, elements, }) {
|
|
6
|
-
const [flag, setFlag] = useState(false);
|
|
7
|
-
const container = {
|
|
8
|
-
displays: "flex flex-col justify-between items-center",
|
|
9
|
-
paddings: "py-12.5",
|
|
10
|
-
backgrounds: "bg-gradient-to-b from-green-dark to-crimson-burgundy",
|
|
11
|
-
styles: "rounded-r-xl",
|
|
12
|
-
};
|
|
13
|
-
const transition = useTransition(!flag, {
|
|
14
|
-
from: { width: 56, height: 320 },
|
|
15
|
-
leave: { width: 0, height: screen.height, duration: 500 },
|
|
16
|
-
});
|
|
17
|
-
const overlayTransition = useTransition(flag, {
|
|
18
|
-
from: { width: "0%" },
|
|
19
|
-
enter: { width: "100%" },
|
|
20
|
-
config: { duration: 500 },
|
|
21
|
-
});
|
|
22
|
-
useEffect(() => {
|
|
23
|
-
console.log(screen.width);
|
|
24
|
-
if (flag) {
|
|
25
|
-
const timer = setTimeout(() => {
|
|
26
|
-
clickBrowser();
|
|
27
|
-
}, 2000);
|
|
28
|
-
return () => clearTimeout(timer);
|
|
29
|
-
}
|
|
30
|
-
}, [flag]);
|
|
31
|
-
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 && (_jsx(animated.div, { style: styles, className: cn(container), children: elements.map((element) => element) }))) }), 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..." })] })))] }));
|
|
32
|
-
}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useId, useState } from "react";
|
|
3
|
-
import { cn } from "../../util";
|
|
4
|
-
const widthSize = {
|
|
5
|
-
xs: "w-28",
|
|
6
|
-
sm: "w-48",
|
|
7
|
-
md: "w-64",
|
|
8
|
-
lg: "w-96",
|
|
9
|
-
xl: "w-128",
|
|
10
|
-
"2xl": "w-144",
|
|
11
|
-
full: "w-full",
|
|
12
|
-
};
|
|
13
|
-
export default function EmailInput({ state, placeholder, option, }) {
|
|
14
|
-
const { width } = option ?? {};
|
|
15
|
-
const id = useId();
|
|
16
|
-
const [value, setValue] = state;
|
|
17
|
-
const [focused, setFocused] = useState(false);
|
|
18
|
-
const { text } = option ?? {};
|
|
19
|
-
const isValidEmail = (email) => {
|
|
20
|
-
return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email);
|
|
21
|
-
};
|
|
22
|
-
const emailCss = {
|
|
23
|
-
true: "rounded-md pl-4 pr-4 pt-2 pb-2 bg-slate-200 text-xs focus:outline-none focus:bg-white focus:text-black box-green-focus transition-all",
|
|
24
|
-
false: "rounded-md pl-4 pr-4 pt-2 pb-2 text-xs bg-[#F9E4E6] focus:outline-none text-[#FF8383] box-shadow-focus-red transition-all peer",
|
|
25
|
-
allTrue: "rounded-md pl-4 pr-4 pt-2 pb-2 bg-white text-xs focus:outline-none box-green focus:bg-white focus:text-black box-shadow-focus transition-all",
|
|
26
|
-
allTrueFocus: "rounded-md pl-4 pr-4 pt-2 pb-2 bg-white text-xs focus:outline-none transition-all box-green-focus",
|
|
27
|
-
};
|
|
28
|
-
const container = {
|
|
29
|
-
width: `${widthSize[width ?? "md"]} h-8`,
|
|
30
|
-
};
|
|
31
|
-
const handleBlur = () => {
|
|
32
|
-
setFocused(false);
|
|
33
|
-
};
|
|
34
|
-
const handleFocus = () => {
|
|
35
|
-
setFocused(true);
|
|
36
|
-
};
|
|
37
|
-
return (_jsxs("div", { className: "relative", children: [_jsx("input", { className: cn(container) +
|
|
38
|
-
" " +
|
|
39
|
-
(value === "" || isValidEmail(value)
|
|
40
|
-
? emailCss.true
|
|
41
|
-
: emailCss.false) +
|
|
42
|
-
(isValidEmail(value) && !focused ? emailCss.allTrue : ""), id: id, type: "text", placeholder: placeholder ?? "E-mail을 입력해주세요.", onChange: (e) => setValue(e.target.value), onBlur: handleBlur, onFocus: handleFocus }), value === "" ||
|
|
43
|
-
(!isValidEmail(value) && (_jsx("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3", children: _jsx("span", { className: "text-[#FF8383]", children: "!" }) }))), typeof value === "string" &&
|
|
44
|
-
value.length > 5 &&
|
|
45
|
-
!isValidEmail(value) && (_jsx("div", { className: "absolute top-4 left-40 w-60 h-12 bg-black opacity-60 z-100 text-white p-2 text-xs rounded-md shadow-md invisible peer-hover:visible", children: text }))] }));
|
|
46
|
-
}
|