@edu-tosel/design 1.0.47 → 1.0.49
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 +13 -0
- package/asset/SVG.js +4 -0
- package/asset/SVG.tsx +4 -0
- package/asset/svg/Icon.d.ts +17 -0
- package/asset/svg/Icon.js +28 -0
- package/asset/svg/Icon.tsx +186 -0
- package/asset/svg/Symbol.d.ts +12 -0
- package/asset/svg/Symbol.js +21 -0
- package/asset/svg/Symbol.tsx +60 -0
- package/interaction/design/Worm.design.js +2 -1
- package/interface/domain/Tag.d.ts +8 -0
- package/interface/domain/Tag.js +11 -0
- package/interface/domain/index.d.ts +1 -0
- package/interface/domain/index.js +1 -0
- package/interface/widget/Carousel.d.ts +12 -0
- package/interface/widget/Carousel.js +1 -0
- package/interface/widget/index.d.ts +1 -0
- package/interface/widget/index.js +1 -0
- package/layout/index.d.ts +1 -0
- package/layout/index.js +1 -0
- package/layout/template/home/Navigation.d.ts +4 -0
- package/layout/template/home/Navigation.js +33 -0
- package/layout/template/home/Notice.d.ts +14 -0
- package/layout/template/home/Notice.js +49 -0
- package/layout/template/home/Promotion.d.ts +18 -0
- package/layout/template/home/Promotion.js +41 -0
- package/layout/template/home/Service.d.ts +16 -0
- package/layout/template/home/Service.js +53 -0
- package/layout/template/home/Shortcut.d.ts +6 -0
- package/layout/template/home/Shortcut.js +15 -0
- package/layout/template/home/index.d.ts +17 -0
- package/layout/template/home/index.js +17 -0
- package/layout/template/home/layout/Carousel.d.ts +5 -0
- package/layout/template/home/layout/Carousel.js +43 -0
- package/layout/template/home/layout/Footer.d.ts +1 -0
- package/layout/template/home/layout/Footer.js +26 -0
- package/layout/template/home/layout/Header.d.ts +1 -0
- package/layout/template/home/layout/Header.js +34 -0
- package/layout/template/home/layout/index.d.ts +3 -0
- package/layout/template/home/layout/index.js +12 -0
- package/package.json +1 -1
- package/tailwind.config.ts +14 -1
- package/util/index.d.ts +0 -1
- package/util/index.js +0 -1
- package/version.txt +1 -1
- package/widget/design/Select.design.js +2 -1
package/asset/SVG.d.ts
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import Close from "./svg/Close";
|
|
2
2
|
import Direction from "./svg/Direction";
|
|
3
3
|
import Email from "./svg/Email";
|
|
4
|
+
import { IconProps } from "./svg/Icon";
|
|
4
5
|
import Image from "./svg/Image";
|
|
5
6
|
import Notification from "./svg/Notification";
|
|
6
7
|
import Operation from "./svg/Operation";
|
|
7
8
|
import Phone from "./svg/Phone";
|
|
8
9
|
import Profile from "./svg/Profile";
|
|
10
|
+
import { SymbolProps } from "./svg/Symbol";
|
|
9
11
|
import TOSEL from "./svg/TOSEL";
|
|
10
12
|
declare const SVG: {
|
|
11
13
|
TOSEL: typeof TOSEL;
|
|
@@ -14,6 +16,13 @@ declare const SVG: {
|
|
|
14
16
|
Right: ({ className }: Direction) => import("react/jsx-runtime").JSX.Element;
|
|
15
17
|
};
|
|
16
18
|
Email: typeof Email;
|
|
19
|
+
Icon: {
|
|
20
|
+
Calendar: () => import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
Notification: () => import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
Search: () => import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
Browser: ({ onClick }: IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
Gift: () => import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
};
|
|
17
26
|
Image: typeof Image;
|
|
18
27
|
Notification: typeof Notification;
|
|
19
28
|
Operation: {
|
|
@@ -22,5 +31,9 @@ declare const SVG: {
|
|
|
22
31
|
};
|
|
23
32
|
Phone: typeof Phone;
|
|
24
33
|
Profile: typeof Profile;
|
|
34
|
+
Symbol: {
|
|
35
|
+
LessThan: ({ className, onClick }: SymbolProps) => import("react/jsx-runtime").JSX.Element;
|
|
36
|
+
GreaterThan: ({ className, onClick }: SymbolProps) => import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
};
|
|
25
38
|
};
|
|
26
39
|
export default SVG;
|
package/asset/SVG.js
CHANGED
|
@@ -1,21 +1,25 @@
|
|
|
1
1
|
import Close from "./svg/Close";
|
|
2
2
|
import Direction from "./svg/Direction";
|
|
3
3
|
import Email from "./svg/Email";
|
|
4
|
+
import Icon from "./svg/Icon";
|
|
4
5
|
import Image from "./svg/Image";
|
|
5
6
|
import Notification from "./svg/Notification";
|
|
6
7
|
import Operation from "./svg/Operation";
|
|
7
8
|
import Phone from "./svg/Phone";
|
|
8
9
|
import Profile from "./svg/Profile";
|
|
10
|
+
import Symbol from "./svg/Symbol";
|
|
9
11
|
import TOSEL from "./svg/TOSEL";
|
|
10
12
|
const SVG = {
|
|
11
13
|
TOSEL,
|
|
12
14
|
Close,
|
|
13
15
|
Direction,
|
|
14
16
|
Email,
|
|
17
|
+
Icon,
|
|
15
18
|
Image,
|
|
16
19
|
Notification,
|
|
17
20
|
Operation,
|
|
18
21
|
Phone,
|
|
19
22
|
Profile,
|
|
23
|
+
Symbol,
|
|
20
24
|
};
|
|
21
25
|
export default SVG;
|
package/asset/SVG.tsx
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import Close from "./svg/Close";
|
|
2
2
|
import Direction from "./svg/Direction";
|
|
3
3
|
import Email from "./svg/Email";
|
|
4
|
+
import Icon, { IconProps } from "./svg/Icon";
|
|
4
5
|
import Image from "./svg/Image";
|
|
5
6
|
import Notification from "./svg/Notification";
|
|
6
7
|
import Operation from "./svg/Operation";
|
|
7
8
|
import Phone from "./svg/Phone";
|
|
8
9
|
import Profile from "./svg/Profile";
|
|
10
|
+
import Symbol, { SymbolProps } from "./svg/Symbol";
|
|
9
11
|
import TOSEL from "./svg/TOSEL";
|
|
10
12
|
|
|
11
13
|
const SVG = {
|
|
@@ -13,11 +15,13 @@ const SVG = {
|
|
|
13
15
|
Close,
|
|
14
16
|
Direction,
|
|
15
17
|
Email,
|
|
18
|
+
Icon,
|
|
16
19
|
Image,
|
|
17
20
|
Notification,
|
|
18
21
|
Operation,
|
|
19
22
|
Phone,
|
|
20
23
|
Profile,
|
|
24
|
+
Symbol,
|
|
21
25
|
};
|
|
22
26
|
|
|
23
27
|
export default SVG;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { OnClick } from "../../interface";
|
|
2
|
+
export interface IconProps {
|
|
3
|
+
onClick: OnClick;
|
|
4
|
+
}
|
|
5
|
+
declare const Icon: {
|
|
6
|
+
Calendar: typeof Calendar;
|
|
7
|
+
Notification: typeof Notification;
|
|
8
|
+
Search: typeof Search;
|
|
9
|
+
Browser: typeof Browser;
|
|
10
|
+
Gift: typeof Gift;
|
|
11
|
+
};
|
|
12
|
+
export default Icon;
|
|
13
|
+
declare function Calendar(): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
declare function Notification(): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
declare function Search(): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
declare function Browser({ onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
declare function Gift(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../../util";
|
|
3
|
+
const Icon = {
|
|
4
|
+
Calendar,
|
|
5
|
+
Notification,
|
|
6
|
+
Search,
|
|
7
|
+
Browser,
|
|
8
|
+
Gift,
|
|
9
|
+
};
|
|
10
|
+
export default Icon;
|
|
11
|
+
function Calendar() {
|
|
12
|
+
return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "35", height: "35", viewBox: "0 0 35 35", fill: "none", children: [_jsx("path", { d: "M25.1064 33.8412C20.0919 33.8412 15.9928 29.7599 15.9928 24.723C15.9928 19.686 20.072 15.6047 25.1064 15.6047C30.1408 15.6047 34.2201 19.686 34.2201 24.723C34.2201 29.7599 30.1408 33.8412 25.1064 33.8412ZM25.1064 16.6001C20.6292 16.6001 16.9877 20.2435 16.9877 24.723C16.9877 29.2025 20.6292 32.8458 25.1064 32.8458C29.5837 32.8458 33.2251 29.2025 33.2251 24.723C33.2251 20.2435 29.5837 16.6001 25.1064 16.6001Z", fill: "white" }), _jsx("path", { d: "M29.2454 29.3019C29.126 29.3019 28.9867 29.2621 28.8872 29.1626L24.8279 25.1012C24.8279 25.1012 24.6886 24.8822 24.6886 24.7428V20.0642C24.6886 19.7855 24.9075 19.5665 25.1861 19.5665C25.4647 19.5665 25.6835 19.7855 25.6835 20.0642V24.5437L29.6036 28.4658C29.8026 28.6648 29.8026 28.9834 29.6036 29.1626C29.5041 29.2621 29.3847 29.3019 29.2454 29.3019Z", fill: "white" }), _jsx("path", { 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", fill: "white" }), _jsx("path", { 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", fill: "white" }), _jsx("path", { 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", fill: "white" }), _jsx("path", { 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", fill: "white" }), _jsx("path", { 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", fill: "white" })] }));
|
|
13
|
+
}
|
|
14
|
+
function Notification() {
|
|
15
|
+
return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "35", height: "35", viewBox: "0 0 35 35", fill: "none", children: [_jsx("path", { d: "M25.4008 28.4473H8.58633C7.92967 28.4473 7.3128 28.1088 6.97452 27.5514C6.63624 26.9939 6.59645 26.2971 6.89493 25.6998C8.42713 22.6737 9.22309 19.2693 9.22309 15.8847V15.6458C9.22309 13.5355 10.0389 11.5844 11.5512 10.1112C13.0436 8.63791 15.0335 7.86146 17.1428 7.88137C21.3414 7.96101 24.764 11.5446 24.764 15.8847C24.764 19.2693 25.5799 22.6737 27.0922 25.6998C27.3906 26.2971 27.3708 26.9939 27.0126 27.5514C26.6544 28.1088 26.0574 28.4473 25.4008 28.4473ZM17.0035 8.85691C15.2126 8.85691 13.5411 9.53381 12.2676 10.7881C10.9543 12.0821 10.2379 13.7943 10.2379 15.6259V15.8648C10.2379 19.4086 9.40217 22.9723 7.79037 26.1378C7.65108 26.4166 7.65108 26.755 7.83017 27.0138C7.98936 27.2925 8.28784 27.4518 8.60622 27.4518H25.4207C25.7391 27.4518 26.0176 27.2925 26.1967 27.0138C26.3559 26.7351 26.3758 26.4166 26.2365 26.1378C24.6446 22.9723 23.789 19.4086 23.789 15.8648C23.789 12.0622 20.8042 8.91663 17.1428 8.85691C17.103 8.85691 17.0632 8.85691 17.0234 8.85691H17.0035Z", fill: "white" }), _jsx("path", { d: "M17.0035 32.0704C15.1927 32.0704 13.7401 30.5971 13.7401 28.8053V27.9493C13.7401 27.6705 13.959 27.4515 14.2376 27.4515C14.5162 27.4515 14.7351 27.6705 14.7351 27.9493V28.8053C14.7351 30.0596 15.7499 31.075 17.0035 31.075C18.2571 31.075 19.272 30.0596 19.272 28.8053V27.9493C19.272 27.6705 19.4909 27.4515 19.7694 27.4515C20.048 27.4515 20.2669 27.6705 20.2669 27.9493V28.8053C20.2669 30.6171 18.7944 32.0704 17.0035 32.0704Z", fill: "white" }), _jsx("path", { 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", fill: "white" })] }));
|
|
16
|
+
}
|
|
17
|
+
function Search() {
|
|
18
|
+
return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "35", height: "36", viewBox: "0 0 35 36", fill: "none", children: [_jsx("path", { d: "M28.9758 32.4908C28.4983 32.4908 28.0008 32.3116 27.6426 31.9334L19.1658 23.4522C18.8673 23.1535 18.8673 22.6757 19.1658 22.3771L21.673 19.8686C21.9715 19.5699 22.449 19.5699 22.7475 19.8686L31.2244 28.3498C31.9607 29.0864 31.9607 30.3008 31.2244 31.0375L30.3091 31.9533C29.931 32.3315 29.4534 32.5107 28.9758 32.5107V32.4908ZM20.0214 22.9146L28.3391 31.2365C28.6973 31.5949 29.2743 31.5949 29.6126 31.2365L30.5279 30.3207C30.8861 29.9624 30.8861 29.385 30.5279 29.0466L22.2103 20.7246L20.0214 22.9146Z", fill: "white" }), _jsx("path", { d: "M19.8424 22.8748C19.723 22.8748 19.5837 22.835 19.4842 22.7355L17.7132 20.9636C17.5142 20.7645 17.5142 20.446 17.7132 20.2668C17.9122 20.0876 18.2306 20.0677 18.4097 20.2668L19.8225 21.6803L20.9567 20.5455L19.5439 19.132C19.3449 18.9329 19.3449 18.6143 19.5439 18.4352C19.7429 18.256 20.0613 18.2361 20.2403 18.4352L22.0113 20.2071C22.0113 20.2071 22.1506 20.4261 22.1506 20.5654C22.1506 20.7048 22.0909 20.8242 22.0113 20.9238L20.1807 22.7554C20.1807 22.7554 19.9618 22.8948 19.8225 22.8948L19.8424 22.8748Z", fill: "white" }), _jsx("path", { 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", fill: "white" })] }));
|
|
19
|
+
}
|
|
20
|
+
function Browser({ onClick }) {
|
|
21
|
+
const container = {
|
|
22
|
+
cursor: "cursor-pointer",
|
|
23
|
+
};
|
|
24
|
+
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" })] }));
|
|
25
|
+
}
|
|
26
|
+
function Gift() {
|
|
27
|
+
return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "35", height: "35", viewBox: "0 0 35 35", fill: "none", children: [_jsx("path", { d: "M30.0283 19.8574H3.90128C3.62269 19.8574 3.40381 19.6384 3.40381 19.3597V14.5219C3.40381 14.2431 3.62269 14.0241 3.90128 14.0241H30.0283C30.3069 14.0241 30.5258 14.2431 30.5258 14.5219V19.3597C30.5258 19.6384 30.3069 19.8574 30.0283 19.8574ZM4.39875 18.862H29.5309V15.0196H4.39875V18.862Z", fill: "white" }), _jsx("path", { 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", fill: "white" }), _jsx("path", { 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", fill: "white" }), _jsx("path", { 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", fill: "white" }), _jsx("path", { 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", fill: "white" }), _jsx("path", { 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", fill: "white" }), _jsx("path", { 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", fill: "white" })] }));
|
|
28
|
+
}
|
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
import { OnClick } from "../../interface";
|
|
2
|
+
import { cn } from "../../util";
|
|
3
|
+
|
|
4
|
+
export interface IconProps {
|
|
5
|
+
onClick: OnClick;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
const Icon = {
|
|
9
|
+
Calendar,
|
|
10
|
+
Notification,
|
|
11
|
+
Search,
|
|
12
|
+
Browser,
|
|
13
|
+
Gift,
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
export default Icon;
|
|
17
|
+
|
|
18
|
+
function Calendar() {
|
|
19
|
+
return (
|
|
20
|
+
<svg
|
|
21
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
22
|
+
width="35"
|
|
23
|
+
height="35"
|
|
24
|
+
viewBox="0 0 35 35"
|
|
25
|
+
fill="none"
|
|
26
|
+
>
|
|
27
|
+
<path
|
|
28
|
+
d="M25.1064 33.8412C20.0919 33.8412 15.9928 29.7599 15.9928 24.723C15.9928 19.686 20.072 15.6047 25.1064 15.6047C30.1408 15.6047 34.2201 19.686 34.2201 24.723C34.2201 29.7599 30.1408 33.8412 25.1064 33.8412ZM25.1064 16.6001C20.6292 16.6001 16.9877 20.2435 16.9877 24.723C16.9877 29.2025 20.6292 32.8458 25.1064 32.8458C29.5837 32.8458 33.2251 29.2025 33.2251 24.723C33.2251 20.2435 29.5837 16.6001 25.1064 16.6001Z"
|
|
29
|
+
fill="white"
|
|
30
|
+
/>
|
|
31
|
+
<path
|
|
32
|
+
d="M29.2454 29.3019C29.126 29.3019 28.9867 29.2621 28.8872 29.1626L24.8279 25.1012C24.8279 25.1012 24.6886 24.8822 24.6886 24.7428V20.0642C24.6886 19.7855 24.9075 19.5665 25.1861 19.5665C25.4647 19.5665 25.6835 19.7855 25.6835 20.0642V24.5437L29.6036 28.4658C29.8026 28.6648 29.8026 28.9834 29.6036 29.1626C29.5041 29.2621 29.3847 29.3019 29.2454 29.3019Z"
|
|
33
|
+
fill="white"
|
|
34
|
+
/>
|
|
35
|
+
<path
|
|
36
|
+
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"
|
|
37
|
+
fill="white"
|
|
38
|
+
/>
|
|
39
|
+
<path
|
|
40
|
+
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"
|
|
41
|
+
fill="white"
|
|
42
|
+
/>
|
|
43
|
+
<path
|
|
44
|
+
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"
|
|
45
|
+
fill="white"
|
|
46
|
+
/>
|
|
47
|
+
<path
|
|
48
|
+
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"
|
|
49
|
+
fill="white"
|
|
50
|
+
/>
|
|
51
|
+
<path
|
|
52
|
+
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"
|
|
53
|
+
fill="white"
|
|
54
|
+
/>
|
|
55
|
+
</svg>
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
function Notification() {
|
|
60
|
+
return (
|
|
61
|
+
<svg
|
|
62
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
63
|
+
width="35"
|
|
64
|
+
height="35"
|
|
65
|
+
viewBox="0 0 35 35"
|
|
66
|
+
fill="none"
|
|
67
|
+
>
|
|
68
|
+
<path
|
|
69
|
+
d="M25.4008 28.4473H8.58633C7.92967 28.4473 7.3128 28.1088 6.97452 27.5514C6.63624 26.9939 6.59645 26.2971 6.89493 25.6998C8.42713 22.6737 9.22309 19.2693 9.22309 15.8847V15.6458C9.22309 13.5355 10.0389 11.5844 11.5512 10.1112C13.0436 8.63791 15.0335 7.86146 17.1428 7.88137C21.3414 7.96101 24.764 11.5446 24.764 15.8847C24.764 19.2693 25.5799 22.6737 27.0922 25.6998C27.3906 26.2971 27.3708 26.9939 27.0126 27.5514C26.6544 28.1088 26.0574 28.4473 25.4008 28.4473ZM17.0035 8.85691C15.2126 8.85691 13.5411 9.53381 12.2676 10.7881C10.9543 12.0821 10.2379 13.7943 10.2379 15.6259V15.8648C10.2379 19.4086 9.40217 22.9723 7.79037 26.1378C7.65108 26.4166 7.65108 26.755 7.83017 27.0138C7.98936 27.2925 8.28784 27.4518 8.60622 27.4518H25.4207C25.7391 27.4518 26.0176 27.2925 26.1967 27.0138C26.3559 26.7351 26.3758 26.4166 26.2365 26.1378C24.6446 22.9723 23.789 19.4086 23.789 15.8648C23.789 12.0622 20.8042 8.91663 17.1428 8.85691C17.103 8.85691 17.0632 8.85691 17.0234 8.85691H17.0035Z"
|
|
70
|
+
fill="white"
|
|
71
|
+
/>
|
|
72
|
+
<path
|
|
73
|
+
d="M17.0035 32.0704C15.1927 32.0704 13.7401 30.5971 13.7401 28.8053V27.9493C13.7401 27.6705 13.959 27.4515 14.2376 27.4515C14.5162 27.4515 14.7351 27.6705 14.7351 27.9493V28.8053C14.7351 30.0596 15.7499 31.075 17.0035 31.075C18.2571 31.075 19.272 30.0596 19.272 28.8053V27.9493C19.272 27.6705 19.4909 27.4515 19.7694 27.4515C20.048 27.4515 20.2669 27.6705 20.2669 27.9493V28.8053C20.2669 30.6171 18.7944 32.0704 17.0035 32.0704Z"
|
|
74
|
+
fill="white"
|
|
75
|
+
/>
|
|
76
|
+
<path
|
|
77
|
+
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"
|
|
78
|
+
fill="white"
|
|
79
|
+
/>
|
|
80
|
+
</svg>
|
|
81
|
+
);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
function Search() {
|
|
85
|
+
return (
|
|
86
|
+
<svg
|
|
87
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
88
|
+
width="35"
|
|
89
|
+
height="36"
|
|
90
|
+
viewBox="0 0 35 36"
|
|
91
|
+
fill="none"
|
|
92
|
+
>
|
|
93
|
+
<path
|
|
94
|
+
d="M28.9758 32.4908C28.4983 32.4908 28.0008 32.3116 27.6426 31.9334L19.1658 23.4522C18.8673 23.1535 18.8673 22.6757 19.1658 22.3771L21.673 19.8686C21.9715 19.5699 22.449 19.5699 22.7475 19.8686L31.2244 28.3498C31.9607 29.0864 31.9607 30.3008 31.2244 31.0375L30.3091 31.9533C29.931 32.3315 29.4534 32.5107 28.9758 32.5107V32.4908ZM20.0214 22.9146L28.3391 31.2365C28.6973 31.5949 29.2743 31.5949 29.6126 31.2365L30.5279 30.3207C30.8861 29.9624 30.8861 29.385 30.5279 29.0466L22.2103 20.7246L20.0214 22.9146Z"
|
|
95
|
+
fill="white"
|
|
96
|
+
/>
|
|
97
|
+
<path
|
|
98
|
+
d="M19.8424 22.8748C19.723 22.8748 19.5837 22.835 19.4842 22.7355L17.7132 20.9636C17.5142 20.7645 17.5142 20.446 17.7132 20.2668C17.9122 20.0876 18.2306 20.0677 18.4097 20.2668L19.8225 21.6803L20.9567 20.5455L19.5439 19.132C19.3449 18.9329 19.3449 18.6143 19.5439 18.4352C19.7429 18.256 20.0613 18.2361 20.2403 18.4352L22.0113 20.2071C22.0113 20.2071 22.1506 20.4261 22.1506 20.5654C22.1506 20.7048 22.0909 20.8242 22.0113 20.9238L20.1807 22.7554C20.1807 22.7554 19.9618 22.8948 19.8225 22.8948L19.8424 22.8748Z"
|
|
99
|
+
fill="white"
|
|
100
|
+
/>
|
|
101
|
+
<path
|
|
102
|
+
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"
|
|
103
|
+
fill="white"
|
|
104
|
+
/>
|
|
105
|
+
</svg>
|
|
106
|
+
);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
function Browser({ onClick }: IconProps) {
|
|
110
|
+
const container = {
|
|
111
|
+
cursor: "cursor-pointer",
|
|
112
|
+
};
|
|
113
|
+
return (
|
|
114
|
+
<svg
|
|
115
|
+
className={cn(container)}
|
|
116
|
+
onClick={onClick}
|
|
117
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
118
|
+
width="35"
|
|
119
|
+
height="35"
|
|
120
|
+
viewBox="0 0 35 35"
|
|
121
|
+
fill="none"
|
|
122
|
+
>
|
|
123
|
+
<path
|
|
124
|
+
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"
|
|
125
|
+
fill="white"
|
|
126
|
+
/>
|
|
127
|
+
<path
|
|
128
|
+
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"
|
|
129
|
+
fill="white"
|
|
130
|
+
/>
|
|
131
|
+
<path
|
|
132
|
+
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"
|
|
133
|
+
fill="white"
|
|
134
|
+
/>
|
|
135
|
+
<path
|
|
136
|
+
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"
|
|
137
|
+
fill="white"
|
|
138
|
+
/>
|
|
139
|
+
<path
|
|
140
|
+
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"
|
|
141
|
+
fill="white"
|
|
142
|
+
/>
|
|
143
|
+
</svg>
|
|
144
|
+
);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
function Gift() {
|
|
148
|
+
return (
|
|
149
|
+
<svg
|
|
150
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
151
|
+
width="35"
|
|
152
|
+
height="35"
|
|
153
|
+
viewBox="0 0 35 35"
|
|
154
|
+
fill="none"
|
|
155
|
+
>
|
|
156
|
+
<path
|
|
157
|
+
d="M30.0283 19.8574H3.90128C3.62269 19.8574 3.40381 19.6384 3.40381 19.3597V14.5219C3.40381 14.2431 3.62269 14.0241 3.90128 14.0241H30.0283C30.3069 14.0241 30.5258 14.2431 30.5258 14.5219V19.3597C30.5258 19.6384 30.3069 19.8574 30.0283 19.8574ZM4.39875 18.862H29.5309V15.0196H4.39875V18.862Z"
|
|
158
|
+
fill="white"
|
|
159
|
+
/>
|
|
160
|
+
<path
|
|
161
|
+
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"
|
|
162
|
+
fill="white"
|
|
163
|
+
/>
|
|
164
|
+
<path
|
|
165
|
+
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"
|
|
166
|
+
fill="white"
|
|
167
|
+
/>
|
|
168
|
+
<path
|
|
169
|
+
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"
|
|
170
|
+
fill="white"
|
|
171
|
+
/>
|
|
172
|
+
<path
|
|
173
|
+
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"
|
|
174
|
+
fill="white"
|
|
175
|
+
/>
|
|
176
|
+
<path
|
|
177
|
+
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"
|
|
178
|
+
fill="white"
|
|
179
|
+
/>
|
|
180
|
+
<path
|
|
181
|
+
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"
|
|
182
|
+
fill="white"
|
|
183
|
+
/>
|
|
184
|
+
</svg>
|
|
185
|
+
);
|
|
186
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { OnClick } from "../../interface";
|
|
2
|
+
export interface SymbolProps {
|
|
3
|
+
className?: string;
|
|
4
|
+
onClick?: OnClick;
|
|
5
|
+
}
|
|
6
|
+
declare const Symbol: {
|
|
7
|
+
LessThan: typeof LessThan;
|
|
8
|
+
GreaterThan: typeof GreaterThan;
|
|
9
|
+
};
|
|
10
|
+
declare function LessThan({ className, onClick }: SymbolProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
declare function GreaterThan({ className, onClick }: SymbolProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export default Symbol;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../../util";
|
|
3
|
+
const Symbol = {
|
|
4
|
+
LessThan,
|
|
5
|
+
GreaterThan,
|
|
6
|
+
};
|
|
7
|
+
function LessThan({ className, onClick }) {
|
|
8
|
+
const container = {
|
|
9
|
+
className,
|
|
10
|
+
cursors: onClick ? "cursor-pointer" : "cursor-default",
|
|
11
|
+
};
|
|
12
|
+
return (_jsx("svg", { className: cn(container), onClick: onClick, xmlns: "http://www.w3.org/2000/svg", height: "11", width: "6", viewBox: "0 0 6 11", fill: "none", children: _jsx("path", { d: "M5.2475 10.7488C5.0575 10.7488 4.8675 10.6788 4.7175 10.5288L0.2175 6.02875C-0.0725 5.73875 -0.0725 5.25875 0.2175 4.96875L4.7175 0.468751C5.0075 0.178751 5.4875 0.178751 5.7775 0.468751C6.0675 0.758751 6.0675 1.23875 5.7775 1.52875L1.8075 5.49875L5.7775 9.46875C6.0675 9.75875 6.0675 10.2388 5.7775 10.5288C5.6275 10.6788 5.4375 10.7488 5.2475 10.7488Z", fill: "white" }) }));
|
|
13
|
+
}
|
|
14
|
+
function GreaterThan({ className, onClick }) {
|
|
15
|
+
const container = {
|
|
16
|
+
className,
|
|
17
|
+
cursors: onClick ? "cursor-pointer" : "cursor-default",
|
|
18
|
+
};
|
|
19
|
+
return (_jsx("svg", { className: cn(container), onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: "6", height: "11", viewBox: "0 0 6 11", fill: "none", children: _jsx("path", { d: "M0.74249 0.251248C0.93249 0.251248 1.12249 0.321249 1.27249 0.471249L5.77249 4.97125C6.06249 5.26125 6.06249 5.74125 5.77249 6.03125L1.27249 10.5312C0.982491 10.8212 0.50249 10.8212 0.21249 10.5312C-0.0775099 10.2412 -0.0775099 9.76125 0.21249 9.47125L4.18249 5.50125L0.21249 1.53125C-0.0775099 1.24125 -0.0775099 0.761249 0.21249 0.471249C0.36249 0.321249 0.55249 0.251248 0.74249 0.251248Z", fill: "white" }) }));
|
|
20
|
+
}
|
|
21
|
+
export default Symbol;
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { OnClick } from "../../interface";
|
|
2
|
+
import { cn } from "../../util";
|
|
3
|
+
|
|
4
|
+
export interface SymbolProps {
|
|
5
|
+
className?: string;
|
|
6
|
+
onClick?: OnClick;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
const Symbol = {
|
|
10
|
+
LessThan,
|
|
11
|
+
GreaterThan,
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
function LessThan({ className, onClick }: SymbolProps) {
|
|
15
|
+
const container = {
|
|
16
|
+
className,
|
|
17
|
+
cursors: onClick ? "cursor-pointer" : "cursor-default",
|
|
18
|
+
};
|
|
19
|
+
return (
|
|
20
|
+
<svg
|
|
21
|
+
className={cn(container)}
|
|
22
|
+
onClick={onClick}
|
|
23
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
24
|
+
height="11"
|
|
25
|
+
width="6"
|
|
26
|
+
viewBox="0 0 6 11"
|
|
27
|
+
fill="none"
|
|
28
|
+
>
|
|
29
|
+
<path
|
|
30
|
+
d="M5.2475 10.7488C5.0575 10.7488 4.8675 10.6788 4.7175 10.5288L0.2175 6.02875C-0.0725 5.73875 -0.0725 5.25875 0.2175 4.96875L4.7175 0.468751C5.0075 0.178751 5.4875 0.178751 5.7775 0.468751C6.0675 0.758751 6.0675 1.23875 5.7775 1.52875L1.8075 5.49875L5.7775 9.46875C6.0675 9.75875 6.0675 10.2388 5.7775 10.5288C5.6275 10.6788 5.4375 10.7488 5.2475 10.7488Z"
|
|
31
|
+
fill="white"
|
|
32
|
+
/>
|
|
33
|
+
</svg>
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
function GreaterThan({ className, onClick }: SymbolProps) {
|
|
38
|
+
const container = {
|
|
39
|
+
className,
|
|
40
|
+
cursors: onClick ? "cursor-pointer" : "cursor-default",
|
|
41
|
+
};
|
|
42
|
+
return (
|
|
43
|
+
<svg
|
|
44
|
+
className={cn(container)}
|
|
45
|
+
onClick={onClick}
|
|
46
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
47
|
+
width="6"
|
|
48
|
+
height="11"
|
|
49
|
+
viewBox="0 0 6 11"
|
|
50
|
+
fill="none"
|
|
51
|
+
>
|
|
52
|
+
<path
|
|
53
|
+
d="M0.74249 0.251248C0.93249 0.251248 1.12249 0.321249 1.27249 0.471249L5.77249 4.97125C6.06249 5.26125 6.06249 5.74125 5.77249 6.03125L1.27249 10.5312C0.982491 10.8212 0.50249 10.8212 0.21249 10.5312C-0.0775099 10.2412 -0.0775099 9.76125 0.21249 9.47125L4.18249 5.50125L0.21249 1.53125C-0.0775099 1.24125 -0.0775099 0.761249 0.21249 0.471249C0.36249 0.321249 0.55249 0.251248 0.74249 0.251248Z"
|
|
54
|
+
fill="white"
|
|
55
|
+
/>
|
|
56
|
+
</svg>
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
export default Symbol;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { useEase } from "../../hook";
|
|
3
|
+
import { cn, gradient } from "../../util";
|
|
3
4
|
export default function Worm() {
|
|
4
5
|
const numbers = [-2, -1, 0, 1, 2];
|
|
5
6
|
const ease = useEase(1000, 500);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./Tag";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./Tag";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/layout/index.d.ts
CHANGED
package/layout/index.js
CHANGED
|
@@ -0,0 +1,33 @@
|
|
|
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
|
+
export default function Navigation({ clickBrowser, }) {
|
|
7
|
+
const [flag, setFlag] = useState(false);
|
|
8
|
+
const container = {
|
|
9
|
+
displays: "flex flex-col justify-between items-center",
|
|
10
|
+
paddings: "py-12.5",
|
|
11
|
+
backgrounds: "bg-gradient-to-b from-green-dark to-crimson-burgundy",
|
|
12
|
+
styles: "rounded-r-xl",
|
|
13
|
+
};
|
|
14
|
+
const transition = useTransition(!flag, {
|
|
15
|
+
from: { width: 80, height: 424 },
|
|
16
|
+
leave: { width: 0, height: screen.height, duration: 500 },
|
|
17
|
+
});
|
|
18
|
+
const overlayTransition = useTransition(flag, {
|
|
19
|
+
from: { width: "0%" },
|
|
20
|
+
enter: { width: "100%" },
|
|
21
|
+
config: { duration: 500 },
|
|
22
|
+
});
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
console.log(screen.width);
|
|
25
|
+
if (flag) {
|
|
26
|
+
const timer = setTimeout(() => {
|
|
27
|
+
clickBrowser();
|
|
28
|
+
}, 2000);
|
|
29
|
+
return () => clearTimeout(timer);
|
|
30
|
+
}
|
|
31
|
+
}, [flag]);
|
|
32
|
+
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..." })] })))] }));
|
|
33
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Titles } from "../../../interface";
|
|
2
|
+
interface NoticeOptions {
|
|
3
|
+
className: string;
|
|
4
|
+
}
|
|
5
|
+
export default function Notice({ banners, options, }: {
|
|
6
|
+
banners: BannerProps[];
|
|
7
|
+
options?: Partial<NoticeOptions>;
|
|
8
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
type Tag = "REG" | "OLY";
|
|
10
|
+
interface BannerProps {
|
|
11
|
+
tag: Tag;
|
|
12
|
+
titles: Titles;
|
|
13
|
+
}
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import SVG from "../../../asset/SVG";
|
|
3
|
+
import { cn } from "../../../util";
|
|
4
|
+
export default function Notice({ banners, options, }) {
|
|
5
|
+
const { className } = options ?? {};
|
|
6
|
+
const container = {
|
|
7
|
+
positions: "relative",
|
|
8
|
+
backgrounds: "bg-[#F7F7F7]",
|
|
9
|
+
displays: "flex flex-col",
|
|
10
|
+
sizes: "h-96",
|
|
11
|
+
boundaries: "pl-80 py-12",
|
|
12
|
+
className,
|
|
13
|
+
};
|
|
14
|
+
const body = {
|
|
15
|
+
displays: "flex flex-row gap-x-7.5",
|
|
16
|
+
sizes: "w-fit",
|
|
17
|
+
boundaries: "mt-7.5",
|
|
18
|
+
styles: "overflow-x-hidden",
|
|
19
|
+
};
|
|
20
|
+
const buttonBox = {
|
|
21
|
+
displays: "flex justify-between items-center",
|
|
22
|
+
sizes: "w-18 h-7.5",
|
|
23
|
+
boundaries: "mt-5 px-5",
|
|
24
|
+
backgrounds: "bg-gray-dark",
|
|
25
|
+
styles: " rounded-full",
|
|
26
|
+
};
|
|
27
|
+
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: () => { } })] })] }));
|
|
28
|
+
}
|
|
29
|
+
const TagStyles = {
|
|
30
|
+
REG: { title: "정기시험" },
|
|
31
|
+
OLY: { title: "올림피아드" },
|
|
32
|
+
};
|
|
33
|
+
function Banner({ tag, titles }) {
|
|
34
|
+
const container = {
|
|
35
|
+
displays: "flex flex-col gap-y-7",
|
|
36
|
+
sizes: "w-95 h-40",
|
|
37
|
+
backgrounds: "bg-white",
|
|
38
|
+
boundaries: "pt-6.25 px-6.5",
|
|
39
|
+
styles: "rounded-md",
|
|
40
|
+
};
|
|
41
|
+
const tagBox = {
|
|
42
|
+
displays: "flex justify-center items-center",
|
|
43
|
+
sizes: "w-20 h-7",
|
|
44
|
+
backgrounds: "bg-gray-dark",
|
|
45
|
+
fonts: "text-white font-pretendard-bold ",
|
|
46
|
+
styles: "rounded-md",
|
|
47
|
+
};
|
|
48
|
+
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 })] }));
|
|
49
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
interface PromotionOptions {
|
|
2
|
+
className: string;
|
|
3
|
+
}
|
|
4
|
+
export default function Promotion({ banners, options, }: {
|
|
5
|
+
banners: BannerProps[];
|
|
6
|
+
options?: Partial<PromotionOptions>;
|
|
7
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
interface BannerProps {
|
|
9
|
+
image: {
|
|
10
|
+
src: string;
|
|
11
|
+
location?: string;
|
|
12
|
+
};
|
|
13
|
+
options?: {
|
|
14
|
+
background?: string;
|
|
15
|
+
boundary?: string;
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
export {};
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import SVG from "../../../asset/SVG";
|
|
3
|
+
import { cn, gradient } from "../../../util";
|
|
4
|
+
export default function Promotion({ banners, options, }) {
|
|
5
|
+
const { className } = options ?? {};
|
|
6
|
+
const container = {
|
|
7
|
+
positions: "relative",
|
|
8
|
+
displays: "flex flex-col",
|
|
9
|
+
boundaries: "pl-80",
|
|
10
|
+
className,
|
|
11
|
+
};
|
|
12
|
+
const body = {
|
|
13
|
+
displays: "flex flex-row gap-x-5",
|
|
14
|
+
sizes: "w-fit",
|
|
15
|
+
boundaries: "mt-7.5",
|
|
16
|
+
styles: "overflow-x-hidden",
|
|
17
|
+
};
|
|
18
|
+
const buttonBox = {
|
|
19
|
+
displays: "flex justify-between items-center",
|
|
20
|
+
sizes: "w-18 h-7.5",
|
|
21
|
+
boundaries: "mt-5 px-5",
|
|
22
|
+
backgrounds: gradient.bg.greenToRed,
|
|
23
|
+
styles: " rounded-full",
|
|
24
|
+
};
|
|
25
|
+
return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: "font-pretendard-bold text-green-dark text-3xl", children: "\uD504\uB85C\uBAA8\uC158" }), _jsx("div", { className: cn(body), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.image.src))) }), _jsxs("div", { className: cn(buttonBox), children: [_jsx(SVG.Symbol.LessThan, { onClick: () => { } }), _jsx(SVG.Symbol.GreaterThan, { onClick: () => { } })] })] }));
|
|
26
|
+
}
|
|
27
|
+
function Banner({ image, options }) {
|
|
28
|
+
const { background, boundary } = options ?? {};
|
|
29
|
+
const container = {
|
|
30
|
+
positions: "relative",
|
|
31
|
+
sizes: "w-260 h-125",
|
|
32
|
+
backgrounds: background ?? "bg-white",
|
|
33
|
+
boundaries: boundary ?? "border-2 border-gray-light ",
|
|
34
|
+
styles: "rounded-xl overflow-hidden",
|
|
35
|
+
};
|
|
36
|
+
const imageBox = {
|
|
37
|
+
positions: "absolute",
|
|
38
|
+
locations: image.location ?? "bottom-0 right-0",
|
|
39
|
+
};
|
|
40
|
+
return (_jsx("div", { className: cn(container), children: _jsx("img", { src: image.src, alt: "banner-promotion", className: cn(imageBox) }) }));
|
|
41
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { Titles } from "../../../interface";
|
|
2
|
+
export default function Service({ banners }: {
|
|
3
|
+
banners: BannerProps[];
|
|
4
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
interface BannerProps {
|
|
6
|
+
titles: Titles;
|
|
7
|
+
image?: {
|
|
8
|
+
src: string;
|
|
9
|
+
location?: string;
|
|
10
|
+
isBlur?: boolean;
|
|
11
|
+
};
|
|
12
|
+
options?: {
|
|
13
|
+
background?: string;
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import SVG from "../../../asset/SVG";
|
|
3
|
+
import { cn, gradient } from "../../../util";
|
|
4
|
+
export default function Service({ banners }) {
|
|
5
|
+
const container = {
|
|
6
|
+
positions: "relative",
|
|
7
|
+
displays: "flex flex-col",
|
|
8
|
+
boundaries: "pl-80",
|
|
9
|
+
};
|
|
10
|
+
const body = {
|
|
11
|
+
displays: "flex flex-row gap-x-5",
|
|
12
|
+
sizes: "w-fit",
|
|
13
|
+
boundaries: "mt-7.5",
|
|
14
|
+
styles: "overflow-x-hidden",
|
|
15
|
+
};
|
|
16
|
+
const buttonBox = {
|
|
17
|
+
displays: "flex justify-between items-center",
|
|
18
|
+
sizes: "w-18 h-7.5",
|
|
19
|
+
boundaries: "mt-5 px-5",
|
|
20
|
+
backgrounds: gradient.bg.greenToRed,
|
|
21
|
+
styles: " rounded-full",
|
|
22
|
+
};
|
|
23
|
+
return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: "font-pretendard-bold text-green-dark text-3xl", children: "\uD1A0\uC140\uC758 \uCC28\uBCC4\uD654\uB41C \uC11C\uBE44\uC2A4" }), _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: () => { } })] })] }));
|
|
24
|
+
}
|
|
25
|
+
function Banner({ titles, image, options }) {
|
|
26
|
+
const { background } = options ?? {};
|
|
27
|
+
const container = {
|
|
28
|
+
positions: "relative",
|
|
29
|
+
displays: "flex flex-col",
|
|
30
|
+
sizes: "w-93 h-125",
|
|
31
|
+
backgrounds: background ?? "bg-gray-light",
|
|
32
|
+
styles: "rounded-md overflow-hidden",
|
|
33
|
+
};
|
|
34
|
+
const titleBox = {
|
|
35
|
+
container: {
|
|
36
|
+
positions: "relative z-10",
|
|
37
|
+
paddings: "pt-12 pl-12",
|
|
38
|
+
},
|
|
39
|
+
title: {
|
|
40
|
+
fonts: "text-2xl font-pretendard-bold",
|
|
41
|
+
colors: titles.titleColor ?? "text-gray-dark ",
|
|
42
|
+
},
|
|
43
|
+
subtitle: {
|
|
44
|
+
fonts: "text-lg font-pretendard-bold ",
|
|
45
|
+
colors: titles.subtitleColor ?? "text-gray-medium",
|
|
46
|
+
},
|
|
47
|
+
};
|
|
48
|
+
const imageBox = {
|
|
49
|
+
positions: "absolute z-0",
|
|
50
|
+
locations: image?.location ?? "bottom-0 right-0",
|
|
51
|
+
};
|
|
52
|
+
return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(titleBox.container), children: [_jsx("div", { className: cn(titleBox.subtitle), children: titles.subtitle }), _jsx("div", { className: cn(titleBox.title), children: titles.title })] }), image && _jsx("img", { src: image?.src, alt: "banner", className: cn(imageBox) }), image?.isBlur && (_jsx("div", { className: "absolute bg-gradient-to-br from-white to-transparent z-0 w-full h-full" }))] }));
|
|
53
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../../../util";
|
|
3
|
+
export default function ShortcutBanner({ shortcuts, }) {
|
|
4
|
+
const container = {
|
|
5
|
+
displays: "flex gap-x-10 justify-center items-center",
|
|
6
|
+
sizes: "w-full h-57.5",
|
|
7
|
+
};
|
|
8
|
+
const tagBox = {
|
|
9
|
+
displays: "flex justify-center items-center",
|
|
10
|
+
sizes: "w-16 h-6.25 ",
|
|
11
|
+
fonts: "text-xs font-pretendard-bold",
|
|
12
|
+
styles: "bg-gray-light rounded-md",
|
|
13
|
+
};
|
|
14
|
+
return (_jsx("div", { className: cn(container), children: shortcuts.map((shortcut) => (_jsxs("button", { onClick: shortcut.onClick, className: "flex flex-col gap-y-3.75", children: [_jsx("img", { src: shortcut.icon, alt: "shortcut-icon", width: 64, height: 64 }), _jsx("div", { className: cn(tagBox), children: shortcut.title })] }, shortcut.title))) }));
|
|
15
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import Layout from "./layout";
|
|
2
|
+
import Carousel from "./layout/Carousel";
|
|
3
|
+
import Navigation from "./Navigation";
|
|
4
|
+
import Notice from "./Notice";
|
|
5
|
+
import Promotion from "./Promotion";
|
|
6
|
+
import Service from "./Service";
|
|
7
|
+
import Shortcut from "./Shortcut";
|
|
8
|
+
declare const Home: {
|
|
9
|
+
Layout: typeof Layout;
|
|
10
|
+
Navigation: typeof Navigation;
|
|
11
|
+
Carousel: typeof Carousel;
|
|
12
|
+
Notice: typeof Notice;
|
|
13
|
+
Shortcut: typeof Shortcut;
|
|
14
|
+
Service: typeof Service;
|
|
15
|
+
Promotion: typeof Promotion;
|
|
16
|
+
};
|
|
17
|
+
export default Home;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import Layout from "./layout";
|
|
2
|
+
import Carousel from "./layout/Carousel";
|
|
3
|
+
import Navigation from "./Navigation";
|
|
4
|
+
import Notice from "./Notice";
|
|
5
|
+
import Promotion from "./Promotion";
|
|
6
|
+
import Service from "./Service";
|
|
7
|
+
import Shortcut from "./Shortcut";
|
|
8
|
+
const Home = {
|
|
9
|
+
Layout,
|
|
10
|
+
Navigation,
|
|
11
|
+
Carousel,
|
|
12
|
+
Notice,
|
|
13
|
+
Shortcut,
|
|
14
|
+
Service,
|
|
15
|
+
Promotion,
|
|
16
|
+
};
|
|
17
|
+
export default Home;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import { cn } from "../../../../util";
|
|
4
|
+
import { useEase } from "../../../../hook";
|
|
5
|
+
import { LineBreaks } from "../../../../text";
|
|
6
|
+
import SVG from "../../../../asset/SVG";
|
|
7
|
+
import { TagStyles } from "../../../../interface/domain";
|
|
8
|
+
export default function Carousel({ contents, }) {
|
|
9
|
+
const [index, setIndex] = useState(0);
|
|
10
|
+
const [flag, inTime] = useEase(10000, 1000);
|
|
11
|
+
// useEffect(() => {
|
|
12
|
+
// if (flag) {
|
|
13
|
+
// setIndex((index + 1) % contents.length);
|
|
14
|
+
// }
|
|
15
|
+
// }, [flag]);
|
|
16
|
+
const { tag, titles, image, options } = contents[index];
|
|
17
|
+
const { text, background } = options ?? {};
|
|
18
|
+
const container = {
|
|
19
|
+
displays: "flex justify-center items-center",
|
|
20
|
+
sizes: "w-full h-100",
|
|
21
|
+
background,
|
|
22
|
+
};
|
|
23
|
+
const body = {
|
|
24
|
+
positions: "relative",
|
|
25
|
+
displays: "flex items-center",
|
|
26
|
+
sizes: "w-full max-w-256 h-full",
|
|
27
|
+
text: text ?? "text-gray-dark",
|
|
28
|
+
};
|
|
29
|
+
const tagBox = {
|
|
30
|
+
displays: "flex justify-center items-center",
|
|
31
|
+
sizes: "w-20 h-8",
|
|
32
|
+
background: TagStyles[tag].background,
|
|
33
|
+
fonts: "text-white font-pretendard-bold text-lg leading-none",
|
|
34
|
+
styles: "rounded-md",
|
|
35
|
+
};
|
|
36
|
+
const buttonBox = {
|
|
37
|
+
positions: "absolute bottom-0 left-0",
|
|
38
|
+
displays: "flex justify-between items-center",
|
|
39
|
+
sizes: "w-23.25 h-6.25 bg-gray-dark rounded-full",
|
|
40
|
+
paddings: "px-1.5",
|
|
41
|
+
};
|
|
42
|
+
return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "relative w-64 h-50 flex flex-col", children: [_jsx("div", { className: cn(tagBox), children: TagStyles[tag].title }), _jsx("div", { className: "font-pretendard-bold text-2xl mt-2", children: titles.title }), _jsx(LineBreaks, { className: "mt-7.5", texts: titles.subtitle }), _jsxs("div", { className: cn(buttonBox), children: [_jsx("button", { onClick: () => setIndex((index - 1 + contents.length) % contents.length), className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.LessThan, {}) }), _jsxs("div", { className: "text-white", children: [index + 1, "/", contents.length] }), _jsx("button", { onClick: () => setIndex((index + 1) % contents.length), className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.GreaterThan, {}) })] })] }), image && (_jsx("img", { src: image, alt: "carousel-image", className: "absolute bottom-0 right-0" }))] }) }));
|
|
43
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function Footer(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../../../../util";
|
|
3
|
+
export default function Footer() {
|
|
4
|
+
const container = {
|
|
5
|
+
displays: "flex justify-center items-center",
|
|
6
|
+
sizes: "w-full h-114",
|
|
7
|
+
backgrounds: "bg-gray-light",
|
|
8
|
+
styles: "text-gray-dark",
|
|
9
|
+
};
|
|
10
|
+
const body = {
|
|
11
|
+
sizes: "w-full max-w-290",
|
|
12
|
+
paddings: "py-8.5 px-7.5",
|
|
13
|
+
};
|
|
14
|
+
return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "flex items-center gap-9.5", children: [_jsx("img", { src: "/images/logos/tosel.png", width: 147, height: 31.93 }), _jsx("img", { src: "/images/logos/itc-script.png", width: 122, height: 51 })] }), _jsxs("div", { className: "flex justify-between items-center border-b-1 border-gray-dark pb-4 mt-11.5", children: [_jsx("div", { children: "Copyright TOSEL. \u24D2 All Rights Reserved." }), _jsx("div", { className: "flex gap-5", children: buttons.map((button, index) => (_jsx("div", { children: button.title }, index))) })] }), _jsxs("div", { className: "flex flex-col mt-4", children: [_jsx("div", { children: "\uC11C\uC6B8\uC2DC \uC131\uBD81\uAD6C \uC548\uC554\uB85C 145 \uACE0\uB824\uB300\uD559\uAD50 \uB77C\uC774\uC2DC\uC6C0 4\uCE35" }), _jsx("div", { children: "Lyceum Korea University, 145 Anam Ro, Seongbuk-Gu, Seoul, Korea 02841" })] })] }) }));
|
|
15
|
+
}
|
|
16
|
+
const buttons = [
|
|
17
|
+
{
|
|
18
|
+
title: "이용약관",
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
title: "개인정보 처리방침",
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
title: "FAQ",
|
|
25
|
+
},
|
|
26
|
+
];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function Header(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../../../../util";
|
|
3
|
+
export default function Header() {
|
|
4
|
+
const container = {
|
|
5
|
+
displays: "flex justify-center items-center",
|
|
6
|
+
sizes: "w-full",
|
|
7
|
+
styles: "bg-white box-shadow",
|
|
8
|
+
};
|
|
9
|
+
const body = {
|
|
10
|
+
displays: "flex items-center justify-between",
|
|
11
|
+
className: "w-full max-w-262 h-25",
|
|
12
|
+
};
|
|
13
|
+
return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsx("img", { src: "/images/logos/tosel.png", alt: "tosel-logo", width: 147, height: 31.93 }), _jsx("div", { className: "flex items-center gap-7.5", children: buttons.map((button, index) => (_jsx("div", { children: button.title }, index))) })] }) }));
|
|
14
|
+
}
|
|
15
|
+
const buttons = [
|
|
16
|
+
{
|
|
17
|
+
title: "About Us",
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
title: "정기시험",
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
title: "교재/학습",
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
title: "LAB",
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
title: "올림피아드",
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
title: "게시판",
|
|
33
|
+
},
|
|
34
|
+
];
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../../../../util";
|
|
3
|
+
import Footer from "./Footer";
|
|
4
|
+
import Header from "./Header";
|
|
5
|
+
export default function Layout({ children }) {
|
|
6
|
+
const container = {
|
|
7
|
+
displays: "flex flex-col",
|
|
8
|
+
sizes: "w-full min-h-screen",
|
|
9
|
+
overflows: "overflow-x-hidden",
|
|
10
|
+
};
|
|
11
|
+
return (_jsxs("div", { className: cn(container), children: [_jsx(Header, {}), children, _jsx(Footer, {})] }));
|
|
12
|
+
}
|
package/package.json
CHANGED
package/tailwind.config.ts
CHANGED
|
@@ -23,7 +23,7 @@ export default {
|
|
|
23
23
|
"times-newer-roman-bolditalic": ["times-newer-roman-bolditalic"],
|
|
24
24
|
},
|
|
25
25
|
backgroundImage: {
|
|
26
|
-
"image-space": "url('/images/
|
|
26
|
+
"image-space": "url('/images/space/space.png')",
|
|
27
27
|
},
|
|
28
28
|
keyframes: {
|
|
29
29
|
slideBackground: {
|
|
@@ -88,6 +88,11 @@ export default {
|
|
|
88
88
|
44: "11rem",
|
|
89
89
|
"9/10": "90%",
|
|
90
90
|
},
|
|
91
|
+
maxWidth: {
|
|
92
|
+
256: "64rem",
|
|
93
|
+
262: "65.5rem",
|
|
94
|
+
290: "72.5rem",
|
|
95
|
+
},
|
|
91
96
|
spacing: {
|
|
92
97
|
"sun-calc": "calc(50% - 6rem)",
|
|
93
98
|
0.5: "0.125rem",
|
|
@@ -128,6 +133,7 @@ export default {
|
|
|
128
133
|
11.5: "2.875rem",
|
|
129
134
|
12: "3rem",
|
|
130
135
|
12.25: "3.0625rem",
|
|
136
|
+
12.5: "3.125rem",
|
|
131
137
|
13: "3.25rem",
|
|
132
138
|
13.25: "3.3125rem",
|
|
133
139
|
13.5: "3.375rem",
|
|
@@ -156,6 +162,7 @@ export default {
|
|
|
156
162
|
22: "5.5rem",
|
|
157
163
|
22.5: "5.625rem",
|
|
158
164
|
23: "5.75rem",
|
|
165
|
+
23.25: "5.8125rem",
|
|
159
166
|
23.75: "5.9375rem",
|
|
160
167
|
25: "6.25rem",
|
|
161
168
|
25.75: "6.4375rem",
|
|
@@ -190,6 +197,7 @@ export default {
|
|
|
190
197
|
54: "13.5rem",
|
|
191
198
|
55: "13.75rem",
|
|
192
199
|
56: "14rem",
|
|
200
|
+
57.5: "14.375rem",
|
|
193
201
|
62: "15.5rem",
|
|
194
202
|
64: "16rem",
|
|
195
203
|
67.5: "16.875rem",
|
|
@@ -201,12 +209,16 @@ export default {
|
|
|
201
209
|
75: "18.75rem",
|
|
202
210
|
76: "19rem",
|
|
203
211
|
78: "20rem",
|
|
212
|
+
82: "20.5rem",
|
|
204
213
|
84: "21rem",
|
|
205
214
|
85: "21.25rem",
|
|
206
215
|
88: "22rem",
|
|
207
216
|
88.5: "22.125rem",
|
|
208
217
|
90: "22.5rem",
|
|
209
218
|
92: "23rem",
|
|
219
|
+
93: "23.25rem",
|
|
220
|
+
93.25: "23.3125rem",
|
|
221
|
+
95: "23.75rem",
|
|
210
222
|
96: "24rem",
|
|
211
223
|
98: "24.5rem",
|
|
212
224
|
100: "25rem",
|
|
@@ -217,6 +229,7 @@ export default {
|
|
|
217
229
|
110: "27.5rem",
|
|
218
230
|
112: "28rem",
|
|
219
231
|
112.5: "28.125rem",
|
|
232
|
+
114: "28.5rem",
|
|
220
233
|
116: "29rem",
|
|
221
234
|
120: "30rem",
|
|
222
235
|
122: "30.5rem",
|
package/util/index.d.ts
CHANGED
package/util/index.js
CHANGED
package/version.txt
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
1.0.
|
|
1
|
+
1.0.49
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useId, useState } from "react";
|
|
3
|
-
import { cn
|
|
3
|
+
import { cn } from "../../util";
|
|
4
4
|
import { useTransition, animated } from "react-spring";
|
|
5
5
|
import { useActionStore } from "../../store";
|
|
6
|
+
import { useFlag } from "../../hook";
|
|
6
7
|
const widthSize = {
|
|
7
8
|
xs: "w-10",
|
|
8
9
|
sm: "w-22.5",
|