@edu-tosel/design 1.0.268 → 1.0.269

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 CHANGED
@@ -35,6 +35,7 @@ declare const SVG: {
35
35
  theme: "blue" | "red";
36
36
  }) => import("react/jsx-runtime").JSX.Element;
37
37
  Tosel: () => import("react/jsx-runtime").JSX.Element;
38
+ Newspaper: ({ size, onClick }: import("./svg/Icon").IconProps) => import("react/jsx-runtime").JSX.Element;
38
39
  };
39
40
  Image: typeof Image;
40
41
  Notification: typeof Notification;
@@ -11,6 +11,7 @@ declare const Icon: {
11
11
  Event: typeof Event;
12
12
  Document: typeof Document;
13
13
  Tosel: typeof Tosel;
14
+ Newspaper: typeof Newspaper;
14
15
  };
15
16
  export default Icon;
16
17
  declare function Tosel(): import("react/jsx-runtime").JSX.Element;
@@ -22,3 +23,4 @@ declare function Event({ size, onClick }: IconProps): import("react/jsx-runtime"
22
23
  declare function Document({ theme }: {
23
24
  theme: "blue" | "red";
24
25
  }): import("react/jsx-runtime").JSX.Element;
26
+ declare function Newspaper({ size, onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
package/asset/svg/Icon.js CHANGED
@@ -6,11 +6,12 @@ const Icon = {
6
6
  Browser,
7
7
  Event,
8
8
  Document,
9
- Tosel
9
+ Tosel,
10
+ Newspaper,
10
11
  };
11
12
  export default Icon;
12
13
  function Tosel() {
13
- return _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 32 32", fill: "none", children: [_jsx("mask", { id: "mask0_11735_6688", maskUnits: "userSpaceOnUse", x: "5", y: "5", width: "22", height: "22", children: _jsx("path", { d: "M25.0656 8.67629L11.2926 5.31786C10.1657 5.04307 9.03321 5.7496 8.76309 6.89593L5.46158 20.9064C5.19145 22.0527 5.886 23.2047 7.0129 23.4795L20.7858 26.838C21.9127 27.1127 23.0453 26.4062 23.3154 25.2599L26.6169 11.2495C26.887 10.1031 26.1925 8.95108 25.0656 8.67629Z", fill: "white" }) }), _jsxs("g", { mask: "url(#mask0_11735_6688)", children: [_jsx("path", { d: "M10.7722 12.8021H14.5937V22.2518L18.1969 23.1306V12.9115H21.2326C21.2563 12.1733 21.2802 11.435 21.304 10.6968C17.7943 10.1401 14.2846 9.58329 10.7748 9.02661C10.7738 10.285 10.773 11.5436 10.7721 12.802L10.7722 12.8021Z", fill: "url(#paint0_linear_11735_6688)" }), _jsx("path", { d: "M27.106 9.17384L9.2522 4.82031L4.97247 22.982L22.8263 27.3355L27.106 9.17384Z", fill: "url(#paint1_linear_11735_6688)" }), _jsx("path", { d: "M15.6311 0H3.15723C1.41354 0 0 1.43791 0 3.21167V10.6436C0 12.4174 1.41354 13.8553 3.15723 13.8553H15.6311C17.3748 13.8553 18.7884 12.4174 18.7884 10.6436V3.21167C18.7884 1.43791 17.3748 0 15.6311 0Z", fill: "url(#paint2_linear_11735_6688)" }), _jsx("path", { d: "M28.8427 18.1448H16.3688C14.6251 18.1448 13.2115 19.5827 13.2115 21.3564V28.7884C13.2115 30.5621 14.6251 32 16.3688 32H28.8427C30.5864 32 31.9999 30.5621 31.9999 28.7884V21.3564C31.9999 19.5827 30.5864 18.1448 28.8427 18.1448Z", fill: "url(#paint3_linear_11735_6688)" }), _jsx("path", { d: "M12.5135 11.3384V13.8506H14.8235V20.8187H17.2529V13.8506H19.5627V12.4175L12.5135 11.3384Z", fill: "white" })] }), _jsxs("defs", { children: [_jsxs("linearGradient", { id: "paint0_linear_11735_6688", x1: "10.7722", y1: "16.0787", x2: "21.304", y2: "16.0787", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { "stop-color": "white" }), _jsx("stop", { offset: "0.1", "stop-color": "white", "stop-opacity": "0.98" }), _jsx("stop", { offset: "0.23", "stop-color": "white", "stop-opacity": "0.92" }), _jsx("stop", { offset: "0.36", "stop-color": "white", "stop-opacity": "0.83" }), _jsx("stop", { offset: "0.5", "stop-color": "white", "stop-opacity": "0.7" }), _jsx("stop", { offset: "0.65", "stop-color": "white", "stop-opacity": "0.53" }), _jsx("stop", { offset: "0.8", "stop-color": "white", "stop-opacity": "0.32" }), _jsx("stop", { offset: "0.95", "stop-color": "white", "stop-opacity": "0.08" }), _jsx("stop", { offset: "1", "stop-color": "white", "stop-opacity": "0" })] }), _jsxs("linearGradient", { id: "paint1_linear_11735_6688", x1: "7.11194", y1: "6.99765", x2: "25.2717", y2: "24.8477", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { "stop-color": "#105652" }), _jsx("stop", { offset: "1", "stop-color": "#910023" })] }), _jsxs("linearGradient", { id: "paint2_linear_11735_6688", x1: "0.00335254", y1: "6.92763", x2: "18.7457", y2: "6.92763", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { "stop-color": "white" }), _jsx("stop", { offset: "0.15", "stop-color": "white", "stop-opacity": "0.88" }), _jsx("stop", { offset: "0.46", "stop-color": "white", "stop-opacity": "0.57" }), _jsx("stop", { offset: "0.93", "stop-color": "white", "stop-opacity": "0.08" }), _jsx("stop", { offset: "1", "stop-color": "white", "stop-opacity": "0" })] }), _jsxs("linearGradient", { id: "paint3_linear_11735_6688", x1: "31.9249", y1: "25.0724", x2: "13.1825", y2: "25.0724", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { "stop-color": "white" }), _jsx("stop", { offset: "0.15", "stop-color": "white", "stop-opacity": "0.88" }), _jsx("stop", { offset: "0.46", "stop-color": "white", "stop-opacity": "0.57" }), _jsx("stop", { offset: "0.93", "stop-color": "white", "stop-opacity": "0.08" }), _jsx("stop", { offset: "1", "stop-color": "white", "stop-opacity": "0" })] })] })] });
14
+ return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 32 32", fill: "none", children: [_jsx("mask", { id: "mask0_11735_6688", maskUnits: "userSpaceOnUse", x: "5", y: "5", width: "22", height: "22", children: _jsx("path", { d: "M25.0656 8.67629L11.2926 5.31786C10.1657 5.04307 9.03321 5.7496 8.76309 6.89593L5.46158 20.9064C5.19145 22.0527 5.886 23.2047 7.0129 23.4795L20.7858 26.838C21.9127 27.1127 23.0453 26.4062 23.3154 25.2599L26.6169 11.2495C26.887 10.1031 26.1925 8.95108 25.0656 8.67629Z", fill: "white" }) }), _jsxs("g", { mask: "url(#mask0_11735_6688)", children: [_jsx("path", { d: "M10.7722 12.8021H14.5937V22.2518L18.1969 23.1306V12.9115H21.2326C21.2563 12.1733 21.2802 11.435 21.304 10.6968C17.7943 10.1401 14.2846 9.58329 10.7748 9.02661C10.7738 10.285 10.773 11.5436 10.7721 12.802L10.7722 12.8021Z", fill: "url(#paint0_linear_11735_6688)" }), _jsx("path", { d: "M27.106 9.17384L9.2522 4.82031L4.97247 22.982L22.8263 27.3355L27.106 9.17384Z", fill: "url(#paint1_linear_11735_6688)" }), _jsx("path", { d: "M15.6311 0H3.15723C1.41354 0 0 1.43791 0 3.21167V10.6436C0 12.4174 1.41354 13.8553 3.15723 13.8553H15.6311C17.3748 13.8553 18.7884 12.4174 18.7884 10.6436V3.21167C18.7884 1.43791 17.3748 0 15.6311 0Z", fill: "url(#paint2_linear_11735_6688)" }), _jsx("path", { d: "M28.8427 18.1448H16.3688C14.6251 18.1448 13.2115 19.5827 13.2115 21.3564V28.7884C13.2115 30.5621 14.6251 32 16.3688 32H28.8427C30.5864 32 31.9999 30.5621 31.9999 28.7884V21.3564C31.9999 19.5827 30.5864 18.1448 28.8427 18.1448Z", fill: "url(#paint3_linear_11735_6688)" }), _jsx("path", { d: "M12.5135 11.3384V13.8506H14.8235V20.8187H17.2529V13.8506H19.5627V12.4175L12.5135 11.3384Z", fill: "white" })] }), _jsxs("defs", { children: [_jsxs("linearGradient", { id: "paint0_linear_11735_6688", x1: "10.7722", y1: "16.0787", x2: "21.304", y2: "16.0787", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { "stop-color": "white" }), _jsx("stop", { offset: "0.1", "stop-color": "white", "stop-opacity": "0.98" }), _jsx("stop", { offset: "0.23", "stop-color": "white", "stop-opacity": "0.92" }), _jsx("stop", { offset: "0.36", "stop-color": "white", "stop-opacity": "0.83" }), _jsx("stop", { offset: "0.5", "stop-color": "white", "stop-opacity": "0.7" }), _jsx("stop", { offset: "0.65", "stop-color": "white", "stop-opacity": "0.53" }), _jsx("stop", { offset: "0.8", "stop-color": "white", "stop-opacity": "0.32" }), _jsx("stop", { offset: "0.95", "stop-color": "white", "stop-opacity": "0.08" }), _jsx("stop", { offset: "1", "stop-color": "white", "stop-opacity": "0" })] }), _jsxs("linearGradient", { id: "paint1_linear_11735_6688", x1: "7.11194", y1: "6.99765", x2: "25.2717", y2: "24.8477", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { "stop-color": "#105652" }), _jsx("stop", { offset: "1", "stop-color": "#910023" })] }), _jsxs("linearGradient", { id: "paint2_linear_11735_6688", x1: "0.00335254", y1: "6.92763", x2: "18.7457", y2: "6.92763", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { "stop-color": "white" }), _jsx("stop", { offset: "0.15", "stop-color": "white", "stop-opacity": "0.88" }), _jsx("stop", { offset: "0.46", "stop-color": "white", "stop-opacity": "0.57" }), _jsx("stop", { offset: "0.93", "stop-color": "white", "stop-opacity": "0.08" }), _jsx("stop", { offset: "1", "stop-color": "white", "stop-opacity": "0" })] }), _jsxs("linearGradient", { id: "paint3_linear_11735_6688", x1: "31.9249", y1: "25.0724", x2: "13.1825", y2: "25.0724", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { "stop-color": "white" }), _jsx("stop", { offset: "0.15", "stop-color": "white", "stop-opacity": "0.88" }), _jsx("stop", { offset: "0.46", "stop-color": "white", "stop-opacity": "0.57" }), _jsx("stop", { offset: "0.93", "stop-color": "white", "stop-opacity": "0.08" }), _jsx("stop", { offset: "1", "stop-color": "white", "stop-opacity": "0" })] })] })] }));
14
15
  }
15
16
  function Calendar({ size = "md", onClick }) {
16
17
  return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: size === "lg" ? 36 : 24, height: size === "lg" ? 36 : 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" }) }));
@@ -34,3 +35,6 @@ function Document({ theme }) {
34
35
  };
35
36
  return (_jsxs("svg", { width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsxs("g", { clipPath: "url(#clip0_3677_836)", children: [_jsx("path", { d: "M18.3495 25H1.3316C1.14591 25 1 24.8525 1 24.6647V4.61373C1 4.53326 1.03979 4.43938 1.09285 4.38573L5.33737 0.0938841C5.33737 0.0938841 5.48328 0 5.56286 0H18.3362C18.5219 0 18.6678 0.147532 18.6678 0.3353V9.2677C18.6678 9.45547 18.5219 9.603 18.3362 9.603C18.1505 9.603 18.0046 9.45547 18.0046 9.2677V0.670601H5.70877L1.66321 4.76127V24.3294H18.0179V15.8396C18.0179 15.6518 18.1638 15.5043 18.3495 15.5043C18.5352 15.5043 18.6811 15.6518 18.6811 15.8396V24.6647C18.6811 24.8525 18.5352 25 18.3495 25Z", fill: color[theme] }), _jsx("path", { d: "M1.33158 4.9489C1.252 4.9489 1.15915 4.92208 1.09283 4.85502C0.960187 4.7209 0.960187 4.50631 1.09283 4.3856L5.33735 0.0937542C5.46999 -0.040366 5.68222 -0.040366 5.80159 0.0937542C5.93424 0.227874 5.93424 0.442467 5.80159 0.563175L1.57034 4.85502C1.57034 4.85502 1.42443 4.9489 1.33158 4.9489Z", fill: color[theme] }), _jsx("path", { d: "M5.56286 4.96245H1.3316C1.14591 4.94903 1 4.8015 1 4.61373C1 4.42597 1.14591 4.27843 1.3316 4.27843H5.23126V0.3353C5.23126 0.147532 5.37716 0 5.56286 0C5.74856 0 5.89446 0.147532 5.89446 0.3353V4.62715C5.89446 4.72103 5.85467 4.8015 5.80161 4.86856C5.74856 4.93562 5.65571 4.96245 5.56286 4.96245Z", fill: color[theme] }), _jsx("path", { d: "M13.4019 18.0259C13.3091 18.0259 13.2295 17.9857 13.1632 17.932C13.0836 17.8516 13.0571 17.7443 13.0703 17.637L13.4417 15.719C13.4417 15.719 13.4815 15.5983 13.5346 15.5447L20.233 8.77162C20.233 8.77162 20.3789 8.67773 20.4717 8.67773C20.5646 8.67773 20.6442 8.71797 20.7105 8.77162L22.2491 10.3274C22.3818 10.4615 22.3818 10.6761 22.2491 10.7968L15.5507 17.5699C15.5507 17.5699 15.4446 17.6504 15.3783 17.6638L13.4815 18.0393C13.4815 18.0393 13.4417 18.0393 13.4152 18.0393L13.4019 18.0259ZM14.0784 15.9336L13.8264 17.2614L15.1395 17.0066L21.5328 10.542L20.4717 9.46904L14.0784 15.9336Z", fill: color[theme] }), _jsx("path", { d: "M22.7665 10.1129C22.6736 10.1129 22.594 10.0726 22.5277 10.019L20.9891 8.46318C20.8564 8.32906 20.8564 8.11447 20.9891 7.99376L21.891 7.08174C22.0104 6.96103 22.2359 6.96103 22.3553 7.08174L23.8939 8.63754C23.8939 8.63754 23.9868 8.78507 23.9868 8.87895C23.9868 8.97284 23.947 9.05331 23.8939 9.12037L22.992 10.0324C22.992 10.0324 22.846 10.1263 22.7532 10.1263L22.7665 10.1129ZM21.7053 8.22176L22.7665 9.29472L23.2042 8.85213L22.143 7.77917L21.7053 8.22176Z", fill: color[theme] }), _jsx("path", { d: "M18.4689 12.9026C18.3893 12.9026 18.2964 12.8757 18.2301 12.8087C18.0975 12.6745 18.0975 12.46 18.2301 12.3392L21.0023 9.53614C21.1349 9.40202 21.3472 9.40202 21.4665 9.53614C21.5992 9.67026 21.5992 9.88485 21.4665 10.0056L18.6943 12.8087C18.6943 12.8087 18.5484 12.9026 18.4556 12.9026H18.4689Z", fill: color[theme] }), _jsx("path", { d: "M15.2987 17.6504C15.2192 17.6504 15.1263 17.6235 15.06 17.5565L13.5214 16.0007C13.3887 15.8666 13.3887 15.652 13.5214 15.5313C13.654 15.3971 13.8662 15.3971 13.9856 15.5313L15.5242 17.087C15.6569 17.2212 15.6569 17.4358 15.5242 17.5565C15.4579 17.6235 15.3783 17.6504 15.2855 17.6504H15.2987Z", fill: color[theme] }), _jsx("path", { d: "M15.763 8.30244H3.90485C3.71915 8.30244 3.57324 8.1549 3.57324 7.96714C3.57324 7.77937 3.71915 7.63184 3.90485 7.63184H15.763C15.9487 7.63184 16.0946 7.77937 16.0946 7.96714C16.0946 8.1549 15.9487 8.30244 15.763 8.30244Z", fill: color[theme] }), _jsx("path", { d: "M15.763 11.32H3.90485C3.71915 11.32 3.57324 11.1725 3.57324 10.9847C3.57324 10.7969 3.71915 10.6494 3.90485 10.6494H15.763C15.9487 10.6494 16.0946 10.7969 16.0946 10.9847C16.0946 11.1725 15.9487 11.32 15.763 11.32Z", fill: color[theme] }), _jsx("path", { d: "M13.1102 14.3513H3.90485C3.71915 14.3513 3.57324 14.2037 3.57324 14.016C3.57324 13.8282 3.71915 13.6807 3.90485 13.6807H13.1102C13.2958 13.6807 13.4418 13.8282 13.4418 14.016C13.4418 14.2037 13.2958 14.3513 13.1102 14.3513Z", fill: color[theme] }), _jsx("path", { d: "M11.7837 17.3688H3.90485C3.71915 17.3688 3.57324 17.2213 3.57324 17.0335C3.57324 16.8458 3.71915 16.6982 3.90485 16.6982H11.7837C11.9694 16.6982 12.1153 16.8458 12.1153 17.0335C12.1153 17.2213 11.9694 17.3688 11.7837 17.3688Z", fill: color[theme] }), _jsx("path", { d: "M15.763 20.3864H3.90485C3.71915 20.3864 3.57324 20.2389 3.57324 20.0511C3.57324 19.8634 3.71915 19.7158 3.90485 19.7158H15.763C15.9487 19.7158 16.0946 19.8634 16.0946 20.0511C16.0946 20.2389 15.9487 20.3864 15.763 20.3864Z", fill: color[theme] })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_3677_836", children: _jsx("rect", { width: "25", height: "25", fill: "white" }) }) })] }));
36
37
  }
38
+ function Newspaper({ size = "md", onClick }) {
39
+ return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: size === "lg" ? 36 : 24, height: size === "lg" ? 36 : 24, viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { stroke: "white", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 1 1 0-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 0 1-1.44-4.282m3.102.069a18.03 18.03 0 0 1-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 0 1 8.835 2.535M10.34 6.66a23.847 23.847 0 0 0 8.835-2.535m0 0A23.74 23.74 0 0 0 18.795 3m.38 1.125a23.91 23.91 0 0 1 1.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 0 0 1.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 0 1 0 3.46" }) }));
40
+ }
@@ -13,55 +13,117 @@ const Icon = {
13
13
  Browser,
14
14
  Event,
15
15
  Document,
16
- Tosel
16
+ Tosel,
17
+ Newspaper,
17
18
  };
18
19
 
19
20
  export default Icon;
20
21
 
21
- function Tosel(){
22
- return <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 32 32" fill="none">
23
- <mask id="mask0_11735_6688" maskUnits="userSpaceOnUse" x="5" y="5" width="22" height="22">
24
- <path d="M25.0656 8.67629L11.2926 5.31786C10.1657 5.04307 9.03321 5.7496 8.76309 6.89593L5.46158 20.9064C5.19145 22.0527 5.886 23.2047 7.0129 23.4795L20.7858 26.838C21.9127 27.1127 23.0453 26.4062 23.3154 25.2599L26.6169 11.2495C26.887 10.1031 26.1925 8.95108 25.0656 8.67629Z" fill="white"/>
25
- </mask>
26
- <g mask="url(#mask0_11735_6688)">
27
- <path d="M10.7722 12.8021H14.5937V22.2518L18.1969 23.1306V12.9115H21.2326C21.2563 12.1733 21.2802 11.435 21.304 10.6968C17.7943 10.1401 14.2846 9.58329 10.7748 9.02661C10.7738 10.285 10.773 11.5436 10.7721 12.802L10.7722 12.8021Z" fill="url(#paint0_linear_11735_6688)"/>
28
- <path d="M27.106 9.17384L9.2522 4.82031L4.97247 22.982L22.8263 27.3355L27.106 9.17384Z" fill="url(#paint1_linear_11735_6688)"/>
29
- <path d="M15.6311 0H3.15723C1.41354 0 0 1.43791 0 3.21167V10.6436C0 12.4174 1.41354 13.8553 3.15723 13.8553H15.6311C17.3748 13.8553 18.7884 12.4174 18.7884 10.6436V3.21167C18.7884 1.43791 17.3748 0 15.6311 0Z" fill="url(#paint2_linear_11735_6688)"/>
30
- <path d="M28.8427 18.1448H16.3688C14.6251 18.1448 13.2115 19.5827 13.2115 21.3564V28.7884C13.2115 30.5621 14.6251 32 16.3688 32H28.8427C30.5864 32 31.9999 30.5621 31.9999 28.7884V21.3564C31.9999 19.5827 30.5864 18.1448 28.8427 18.1448Z" fill="url(#paint3_linear_11735_6688)"/>
31
- <path d="M12.5135 11.3384V13.8506H14.8235V20.8187H17.2529V13.8506H19.5627V12.4175L12.5135 11.3384Z" fill="white"/>
32
- </g>
33
- <defs>
34
- <linearGradient id="paint0_linear_11735_6688" x1="10.7722" y1="16.0787" x2="21.304" y2="16.0787" gradientUnits="userSpaceOnUse">
35
- <stop stop-color="white"/>
36
- <stop offset="0.1" stop-color="white" stop-opacity="0.98"/>
37
- <stop offset="0.23" stop-color="white" stop-opacity="0.92"/>
38
- <stop offset="0.36" stop-color="white" stop-opacity="0.83"/>
39
- <stop offset="0.5" stop-color="white" stop-opacity="0.7"/>
40
- <stop offset="0.65" stop-color="white" stop-opacity="0.53"/>
41
- <stop offset="0.8" stop-color="white" stop-opacity="0.32"/>
42
- <stop offset="0.95" stop-color="white" stop-opacity="0.08"/>
43
- <stop offset="1" stop-color="white" stop-opacity="0"/>
44
- </linearGradient>
45
- <linearGradient id="paint1_linear_11735_6688" x1="7.11194" y1="6.99765" x2="25.2717" y2="24.8477" gradientUnits="userSpaceOnUse">
46
- <stop stop-color="#105652"/>
47
- <stop offset="1" stop-color="#910023"/>
48
- </linearGradient>
49
- <linearGradient id="paint2_linear_11735_6688" x1="0.00335254" y1="6.92763" x2="18.7457" y2="6.92763" gradientUnits="userSpaceOnUse">
50
- <stop stop-color="white"/>
51
- <stop offset="0.15" stop-color="white" stop-opacity="0.88"/>
52
- <stop offset="0.46" stop-color="white" stop-opacity="0.57"/>
53
- <stop offset="0.93" stop-color="white" stop-opacity="0.08"/>
54
- <stop offset="1" stop-color="white" stop-opacity="0"/>
55
- </linearGradient>
56
- <linearGradient id="paint3_linear_11735_6688" x1="31.9249" y1="25.0724" x2="13.1825" y2="25.0724" gradientUnits="userSpaceOnUse">
57
- <stop stop-color="white"/>
58
- <stop offset="0.15" stop-color="white" stop-opacity="0.88"/>
59
- <stop offset="0.46" stop-color="white" stop-opacity="0.57"/>
60
- <stop offset="0.93" stop-color="white" stop-opacity="0.08"/>
61
- <stop offset="1" stop-color="white" stop-opacity="0"/>
62
- </linearGradient>
63
- </defs>
64
- </svg>
22
+ function Tosel() {
23
+ return (
24
+ <svg
25
+ xmlns="http://www.w3.org/2000/svg"
26
+ width="48"
27
+ height="48"
28
+ viewBox="0 0 32 32"
29
+ fill="none"
30
+ >
31
+ <mask
32
+ id="mask0_11735_6688"
33
+ maskUnits="userSpaceOnUse"
34
+ x="5"
35
+ y="5"
36
+ width="22"
37
+ height="22"
38
+ >
39
+ <path
40
+ d="M25.0656 8.67629L11.2926 5.31786C10.1657 5.04307 9.03321 5.7496 8.76309 6.89593L5.46158 20.9064C5.19145 22.0527 5.886 23.2047 7.0129 23.4795L20.7858 26.838C21.9127 27.1127 23.0453 26.4062 23.3154 25.2599L26.6169 11.2495C26.887 10.1031 26.1925 8.95108 25.0656 8.67629Z"
41
+ fill="white"
42
+ />
43
+ </mask>
44
+ <g mask="url(#mask0_11735_6688)">
45
+ <path
46
+ d="M10.7722 12.8021H14.5937V22.2518L18.1969 23.1306V12.9115H21.2326C21.2563 12.1733 21.2802 11.435 21.304 10.6968C17.7943 10.1401 14.2846 9.58329 10.7748 9.02661C10.7738 10.285 10.773 11.5436 10.7721 12.802L10.7722 12.8021Z"
47
+ fill="url(#paint0_linear_11735_6688)"
48
+ />
49
+ <path
50
+ d="M27.106 9.17384L9.2522 4.82031L4.97247 22.982L22.8263 27.3355L27.106 9.17384Z"
51
+ fill="url(#paint1_linear_11735_6688)"
52
+ />
53
+ <path
54
+ d="M15.6311 0H3.15723C1.41354 0 0 1.43791 0 3.21167V10.6436C0 12.4174 1.41354 13.8553 3.15723 13.8553H15.6311C17.3748 13.8553 18.7884 12.4174 18.7884 10.6436V3.21167C18.7884 1.43791 17.3748 0 15.6311 0Z"
55
+ fill="url(#paint2_linear_11735_6688)"
56
+ />
57
+ <path
58
+ d="M28.8427 18.1448H16.3688C14.6251 18.1448 13.2115 19.5827 13.2115 21.3564V28.7884C13.2115 30.5621 14.6251 32 16.3688 32H28.8427C30.5864 32 31.9999 30.5621 31.9999 28.7884V21.3564C31.9999 19.5827 30.5864 18.1448 28.8427 18.1448Z"
59
+ fill="url(#paint3_linear_11735_6688)"
60
+ />
61
+ <path
62
+ d="M12.5135 11.3384V13.8506H14.8235V20.8187H17.2529V13.8506H19.5627V12.4175L12.5135 11.3384Z"
63
+ fill="white"
64
+ />
65
+ </g>
66
+ <defs>
67
+ <linearGradient
68
+ id="paint0_linear_11735_6688"
69
+ x1="10.7722"
70
+ y1="16.0787"
71
+ x2="21.304"
72
+ y2="16.0787"
73
+ gradientUnits="userSpaceOnUse"
74
+ >
75
+ <stop stop-color="white" />
76
+ <stop offset="0.1" stop-color="white" stop-opacity="0.98" />
77
+ <stop offset="0.23" stop-color="white" stop-opacity="0.92" />
78
+ <stop offset="0.36" stop-color="white" stop-opacity="0.83" />
79
+ <stop offset="0.5" stop-color="white" stop-opacity="0.7" />
80
+ <stop offset="0.65" stop-color="white" stop-opacity="0.53" />
81
+ <stop offset="0.8" stop-color="white" stop-opacity="0.32" />
82
+ <stop offset="0.95" stop-color="white" stop-opacity="0.08" />
83
+ <stop offset="1" stop-color="white" stop-opacity="0" />
84
+ </linearGradient>
85
+ <linearGradient
86
+ id="paint1_linear_11735_6688"
87
+ x1="7.11194"
88
+ y1="6.99765"
89
+ x2="25.2717"
90
+ y2="24.8477"
91
+ gradientUnits="userSpaceOnUse"
92
+ >
93
+ <stop stop-color="#105652" />
94
+ <stop offset="1" stop-color="#910023" />
95
+ </linearGradient>
96
+ <linearGradient
97
+ id="paint2_linear_11735_6688"
98
+ x1="0.00335254"
99
+ y1="6.92763"
100
+ x2="18.7457"
101
+ y2="6.92763"
102
+ gradientUnits="userSpaceOnUse"
103
+ >
104
+ <stop stop-color="white" />
105
+ <stop offset="0.15" stop-color="white" stop-opacity="0.88" />
106
+ <stop offset="0.46" stop-color="white" stop-opacity="0.57" />
107
+ <stop offset="0.93" stop-color="white" stop-opacity="0.08" />
108
+ <stop offset="1" stop-color="white" stop-opacity="0" />
109
+ </linearGradient>
110
+ <linearGradient
111
+ id="paint3_linear_11735_6688"
112
+ x1="31.9249"
113
+ y1="25.0724"
114
+ x2="13.1825"
115
+ y2="25.0724"
116
+ gradientUnits="userSpaceOnUse"
117
+ >
118
+ <stop stop-color="white" />
119
+ <stop offset="0.15" stop-color="white" stop-opacity="0.88" />
120
+ <stop offset="0.46" stop-color="white" stop-opacity="0.57" />
121
+ <stop offset="0.93" stop-color="white" stop-opacity="0.08" />
122
+ <stop offset="1" stop-color="white" stop-opacity="0" />
123
+ </linearGradient>
124
+ </defs>
125
+ </svg>
126
+ );
65
127
  }
66
128
  function Calendar({ size = "md", onClick }: IconProps) {
67
129
  return (
@@ -239,3 +301,24 @@ function Document({ theme }: { theme: "blue" | "red" }) {
239
301
  </svg>
240
302
  );
241
303
  }
304
+
305
+ function Newspaper({ size = "md", onClick }: IconProps) {
306
+ return (
307
+ <svg
308
+ onClick={onClick}
309
+ xmlns="http://www.w3.org/2000/svg"
310
+ width={size === "lg" ? 36 : 24}
311
+ height={size === "lg" ? 36 : 24}
312
+ viewBox="0 0 24 24"
313
+ fill="none"
314
+ >
315
+ <path
316
+ stroke="white"
317
+ stroke-width="1.5"
318
+ stroke-linecap="round"
319
+ stroke-linejoin="round"
320
+ d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 1 1 0-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 0 1-1.44-4.282m3.102.069a18.03 18.03 0 0 1-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 0 1 8.835 2.535M10.34 6.66a23.847 23.847 0 0 0 8.835-2.535m0 0A23.74 23.74 0 0 0 18.795 3m.38 1.125a23.91 23.91 0 0 1 1.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 0 0 1.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 0 1 0 3.46"
321
+ />
322
+ </svg>
323
+ );
324
+ }
@@ -1,5 +1,5 @@
1
1
  import { Titles, OnClick } from "../../../interface";
2
- export default function Notice({ banners }: {
2
+ export default function Announcement({ banners }: {
3
3
  banners: BannerProps[];
4
4
  }): import("react/jsx-runtime").JSX.Element;
5
5
  interface BannerProps {
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { cn } from "../../../util";
3
3
  import { useRef } from "react";
4
- export default function Notice({ banners }) {
4
+ export default function Announcement({ banners }) {
5
5
  const scrollContainerRef = useRef(null);
6
6
  const cardWidth = 320; //card width
7
7
  const handleScroll = (direction) => {
@@ -1,10 +1,11 @@
1
1
  import { OnClick } from "../../../interface";
2
- interface PromotionOptions {
2
+ interface NewsPaperOption {
3
3
  className: string;
4
4
  }
5
- export default function Promotion({ banners, option, }: {
5
+ export default function NewsPaper({ banners, browse, option, }: {
6
6
  banners: BannerProps[];
7
- option?: Partial<PromotionOptions>;
7
+ browse?: OnClick;
8
+ option?: Partial<NewsPaperOption>;
8
9
  }): import("react/jsx-runtime").JSX.Element;
9
10
  interface BannerProps {
10
11
  onClick?: OnClick;
@@ -1,7 +1,8 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { cn } from "../../../util";
3
3
  import { useRef } from "react";
4
- export default function Promotion({ banners, option, }) {
4
+ import { Label } from "../../../widget";
5
+ export default function NewsPaper({ banners, browse, option, }) {
5
6
  const { className } = option ?? {};
6
7
  const scrollContainerRef = useRef(null);
7
8
  const cardWidth = 480; //card width
@@ -19,19 +20,18 @@ export default function Promotion({ banners, option, }) {
19
20
  }
20
21
  };
21
22
  const container = {
22
- positions: "relative z-10 group mt-20",
23
+ positions: "relative z-10 group",
23
24
  displays: "flex flex-col",
24
- textstyles: "break-keep antialiased",
25
- // test: "border-red-500 border-4",
25
+ textStyles: "break-keep antialiased",
26
26
  };
27
27
  const deckTitlePositioning = {
28
- displays: "flex flex-row ml:justify-center ml:itmes-center",
28
+ displays: "flex flex-row ml:justify-center ml:items-center",
29
29
  sizes: "w-full",
30
30
  };
31
31
  const deckTitle = {
32
- displays: "xl:pl-5 md:pl-[76px] pl-5",
32
+ displays: "flex items-center gap-x-4 xl:pl-5 md:pl-[76px] pl-5",
33
33
  sizes: "max-w-300 w-full",
34
- textstyles: "font-pretendard-var font-bold text-2xl text-green-dark",
34
+ textStyles: "font-pretendard-var font-bold text-2xl text-green-dark",
35
35
  };
36
36
  const cardPositioning = {
37
37
  displays: "flex flex-nowrap",
@@ -60,7 +60,13 @@ export default function Promotion({ banners, option, }) {
60
60
  animation: "duration-300 ",
61
61
  test: "bg-gray-medium/20 hover:bg-gray-medium/50 pointer-events-auto backdrop-blur-sm fill-red-500",
62
62
  };
63
- return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(deckTitlePositioning), children: _jsx("div", { className: cn(deckTitle), children: "\uC0C8\uB85C\uC6B4 \uC18C\uC2DD" }) }), _jsx("div", { className: cn(cardPositioning), children: _jsx("div", { className: cn(cardWrapper), ref: scrollContainerRef, children: _jsx("div", { className: cn(cardDeck), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.image.src))) }) }) }), _jsxs("div", { className: cn(buttonPositioning), children: [_jsx("div", { className: cn(hoverButton), onClick: () => handleScroll("left"), children: _jsx("img", { src: "images/home/handle-left.svg", alt: "" }) }), _jsx("div", { className: cn(hoverButton), onClick: () => handleScroll("right"), children: _jsx("img", { src: "images/home/handle-right.svg", alt: "" }) })] })] }));
63
+ return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(deckTitlePositioning), children: _jsxs("div", { className: cn(deckTitle), children: [_jsx("div", { children: "\uC0C8\uB85C\uC6B4 \uC18C\uC2DD" }), _jsx(Label.Button, { title: "\uB354 \uBCF4\uAE30", onClick: browse, option: {
64
+ width: "xs",
65
+ height: "xs",
66
+ text: "text-white hover:text-green-dark",
67
+ background: "bg-green-dark hover:bg-white",
68
+ boundary: "border-2 hover:border-white border-green-dark",
69
+ } })] }) }), _jsx("div", { className: cn(cardPositioning), children: _jsx("div", { className: cn(cardWrapper), ref: scrollContainerRef, children: _jsx("div", { className: cn(cardDeck), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.image.src))) }) }) }), _jsxs("div", { className: cn(buttonPositioning), children: [_jsx("div", { className: cn(hoverButton), onClick: () => handleScroll("left"), children: _jsx("img", { src: "images/home/handle-left.svg", alt: "" }) }), _jsx("div", { className: cn(hoverButton), onClick: () => handleScroll("right"), children: _jsx("img", { src: "images/home/handle-right.svg", alt: "" }) })] })] }));
64
70
  }
65
71
  function Banner({ onClick, image, option }) {
66
72
  const { background } = option ?? {};
@@ -18,7 +18,7 @@ export default function Service({ banners }) {
18
18
  }
19
19
  };
20
20
  const container = {
21
- positions: "relative z-10 group",
21
+ positions: "relative z-10 group mt-12",
22
22
  displays: "flex flex-col",
23
23
  textstyles: "break-keep antialiased",
24
24
  // test: "border-red-500 border-4",
@@ -1,17 +1,17 @@
1
1
  import Layout from "./layout";
2
2
  import Carousel from "./layout/Carousel";
3
3
  import Navigation from "./layout/Navigation";
4
- import Notice from "./Notice";
5
- import Promotion from "./Promotion";
4
+ import Announcement from "./Announcement";
5
+ import NewsPaper from "./NewsPaper";
6
6
  import Service from "./Service";
7
7
  import Shortcut from "./Shortcut";
8
8
  declare const Home: {
9
9
  Layout: typeof Layout;
10
10
  Navigation: typeof Navigation;
11
11
  Carousel: typeof Carousel;
12
- Notice: typeof Notice;
12
+ Announcement: typeof Announcement;
13
13
  Shortcut: typeof Shortcut;
14
14
  Service: typeof Service;
15
- Promotion: typeof Promotion;
15
+ NewsPaper: typeof NewsPaper;
16
16
  };
17
17
  export default Home;
@@ -1,17 +1,17 @@
1
1
  import Layout from "./layout";
2
2
  import Carousel from "./layout/Carousel";
3
3
  import Navigation from "./layout/Navigation";
4
- import Notice from "./Notice";
5
- import Promotion from "./Promotion";
4
+ import Announcement from "./Announcement";
5
+ import NewsPaper from "./NewsPaper";
6
6
  import Service from "./Service";
7
7
  import Shortcut from "./Shortcut";
8
8
  const Home = {
9
9
  Layout,
10
10
  Navigation,
11
11
  Carousel,
12
- Notice,
12
+ Announcement,
13
13
  Shortcut,
14
14
  Service,
15
- Promotion,
15
+ NewsPaper,
16
16
  };
17
17
  export default Home;
@@ -67,12 +67,10 @@ export default function Carousel({ contents, }) {
67
67
  sizes: "w-full h-fit xxs:w-fit md:w-72",
68
68
  spacings: "mt-4 px-5 xxs:mt-8 xxs:gap-8 md:p-0 md:mt-0 md:gap-6 md:pl-7.5",
69
69
  animations: "duration-500",
70
- //debug: "border-red-500 border-2",
71
70
  };
72
71
  const titleSet = {
73
72
  displays: "flex flex gap-4 flex-row justify-start xxs:justify-center xxs:gap-4 xxs:items-start xxs:flex-col xxs:shrink-0 md:gap-2",
74
73
  sizes: "w-fit md:w-full h-fit",
75
- //debug: "border-2 border-green-500",
76
74
  };
77
75
  const subtitleStyles = {
78
76
  displays: "flex flex-col justify-center",
@@ -6,11 +6,11 @@ interface Calendar {
6
6
  schedules: {
7
7
  onClick?: OnClick;
8
8
  title: string;
9
- applyEnd: Date;
10
- applyStart: Date;
11
- testStart: Date;
12
- testEnd?: Date;
13
- gradeOpen: Date;
9
+ applicationStartAt: string;
10
+ applicationEndAt: string;
11
+ testStartAt: string;
12
+ testEndAt?: string;
13
+ gradeOpenAt: string;
14
14
  }[];
15
15
  }
16
16
  interface Notice {
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
2
2
  import { useEffect, useRef, useState } from "react";
3
3
  import { animated, useTransition } from "react-spring";
4
4
  import SVG from "../../../../asset/SVG";
5
- import { cn, compareDates, convertDateToString, search, } from "../../../../util";
5
+ import { cn, compareDates, search, } from "../../../../util";
6
6
  import { useActionStore } from "../../../../store";
7
7
  import { useResponsive } from "../../../../hook";
8
8
  export default function Navigation({ browser, calendar, notice, event, }) {
@@ -98,19 +98,13 @@ export default function Navigation({ browser, calendar, notice, event, }) {
98
98
  const scrollTitle = {
99
99
  textStyles: "text-lg font-bold text-green-dark",
100
100
  };
101
- const itemBodyTransition = useTransition(isOpen && !isMobile, {
102
- from: { transform: "translateY(100%)", opacity: 0 },
103
- enter: { transform: "translateY(0%)", opacity: 1 },
104
- leave: { transform: "translateY(100%)", opacity: 0 },
105
- config: { duration: 300 },
106
- });
107
- return (_jsxs(_Fragment, { children: [overlayCoverTransition((styles, item) => item && (_jsx(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: _jsxs("div", { className: "flex flex-col justify-center items-center overflow-hidden gap-y-14 transition-none", 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 &&
108
- item && (_jsx(animated.div, { style: styles, className: cn(blurContainer), children: _jsxs("div", { className: cn(itemBody), onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: cn(scrollTitleWrapper), children: [_jsx("div", { className: cn(scrollTitle), children: navigationTypeString[type] }), _jsx("div", { className: "" })] }), _jsx("div", { className: cn(itemsContainer), children: _jsx(NavigationItem, { type: type, calendar: calendar, notice: notice, event: event }) })] }) }))), _jsx("div", { className: "fixed bottom-0 md:top-1/2 md:-translate-y-1/2 flex justify-center items-center z-45", children: _jsxs("div", { onClick: (e) => e.stopPropagation(), className: cn(container), children: [_jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("calendar"), children: _jsx(SVG.Icon.Calendar, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("notification"), children: _jsx(SVG.Icon.Notification, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("search"), children: _jsx(SVG.Icon.Search, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("browser"), children: _jsx(SVG.Icon.Browser, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("event"), children: _jsx(SVG.Icon.Event, { size: isMobile ? "md" : "lg" }) })] }) })] }));
101
+ return (_jsxs(_Fragment, { children: [overlayCoverTransition((styles, item) => item && (_jsx(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: _jsxs("div", { className: "flex flex-col justify-center items-center overflow-hidden gap-y-14 transition-none", children: [_jsx("img", { src: "/images/logos/tosel.png", alt: "tosel", width: 368.56, height: 80.07 }), _jsxs("div", { role: "status", children: [_jsxs("svg", { "aria-hidden": "true", className: "w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-green-dark", viewBox: "0 0 100 101", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z", fill: "currentColor" }), _jsx("path", { d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z", fill: "currentFill" })] }), _jsx("span", { className: "sr-only", children: "Loading..." })] }), _jsx("div", { children: "dashboard loading..." })] }) }))), overlayPopTransition((styles, item) => type &&
102
+ item && (_jsx(animated.div, { style: styles, className: cn(blurContainer), children: _jsxs("div", { className: cn(itemBody), onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: cn(scrollTitleWrapper), children: [_jsx("div", { className: cn(scrollTitle), children: navigationTypeString[type] }), _jsx("div", { className: "" })] }), _jsx("div", { className: cn(itemsContainer), children: _jsx(NavigationItem, { type: type, calendar: calendar, notice: notice, event: event }) })] }) }))), _jsx("div", { className: "fixed bottom-0 md:top-1/2 md:-translate-y-1/2 flex justify-center items-center z-45", children: _jsxs("div", { onClick: (e) => e.stopPropagation(), className: cn(container), children: [_jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("calendar"), children: _jsx(SVG.Icon.Calendar, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("notification"), children: _jsx(SVG.Icon.Notification, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("search"), children: _jsx(SVG.Icon.Search, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("browser"), children: _jsx(SVG.Icon.Browser, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("event"), children: _jsx(SVG.Icon.Newspaper, { size: isMobile ? "md" : "lg" }) })] }) })] }));
109
103
  }
110
104
  const navigationTypeString = {
111
105
  calendar: "시험 접수 일정",
112
106
  notification: "공지사항",
113
- event: "이벤트",
107
+ event: "새로운 소식",
114
108
  search: "검색하기",
115
109
  };
116
110
  function NavigationItem({ type, calendar, notice, event, }) {
@@ -171,9 +165,9 @@ function NavigationItem({ type, calendar, notice, event, }) {
171
165
  return () => clearInterval(interval);
172
166
  }, []);
173
167
  useEffect(() => {
174
- const updatedScheduleState = calendar.schedules.map(({ applyStart, applyEnd }) => {
175
- const startInfo = compareDates(applyStart);
176
- const endInfo = compareDates(applyEnd);
168
+ const updatedScheduleState = calendar.schedules.map(({ applicationStartAt, applicationEndAt }) => {
169
+ const startInfo = compareDates(applicationStartAt);
170
+ const endInfo = compareDates(applicationEndAt);
177
171
  return {
178
172
  isBeforeStart: startInfo.isBefore,
179
173
  dDayStart: startInfo.dDay,
@@ -184,9 +178,9 @@ function NavigationItem({ type, calendar, notice, event, }) {
184
178
  setScheduleState(updatedScheduleState);
185
179
  }, [currentTime, calendar.schedules]);
186
180
  if (type === "calendar")
187
- return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(scrollWrapper), children: calendar.schedules.map(({ applyEnd, testStart, gradeOpen, title, onClick }, index) => {
181
+ return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(scrollWrapper), children: calendar.schedules.map(({ applicationEndAt, testStartAt, gradeOpenAt, title, onClick }, index) => {
188
182
  const { isBeforeStart, dDayStart, isBeforeEnd, dDayEnd } = scheduleState[index];
189
- return (_jsxs("div", { onClick: onClick, className: cn(item, "rounded-[8px] p-5 bg-gray-light/30 border-1 border-gray-light"), children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: cn(titleWrapper), children: [_jsx("div", { className: cn(titleText), children: title }), _jsx("div", { children: isBeforeStart ? (_jsxs("div", { className: cn(tag, "bg-red-burgundy"), children: ["\uC811\uC218\uAE4C\uC9C0 ", dDayStart] })) : isBeforeEnd ? (_jsx("div", { className: cn(tag, "bg-green-dark"), children: "\uC811\uC218 \uC911" })) : (_jsx("div", { className: cn(tag, "bg-gray-medium/30"), children: "\uB9C8\uAC10" })) })] }), !isBeforeStart && isBeforeEnd ? (_jsxs("div", { className: "text-xs", children: ["\uC811\uC218 \uB9C8\uAC10\uAE4C\uC9C0 ", dDayEnd] })) : (""), _jsx("div", { className: "w-full h-0.5 bg-gray-medium" })] }), _jsxs("div", { className: "flex flex-col gap-1 w-full h-fit mt-4", children: [_jsxs("div", { className: cn(dateWrapper), children: [_jsxs("svg", { ...svgAttributes, children: [_jsx("path", { "fill-rule": "evenodd", d: "M11.986 3H12a2 2 0 0 1 2 2v6a2 2 0 0 1-1.5 1.937V7A2.5 2.5 0 0 0 10 4.5H4.063A2 2 0 0 1 6 3h.014A2.25 2.25 0 0 1 8.25 1h1.5a2.25 2.25 0 0 1 2.236 2ZM10.5 4v-.75a.75.75 0 0 0-.75-.75h-1.5a.75.75 0 0 0-.75.75V4h3Z", "clip-rule": "evenodd" }), _jsx("path", { "fill-rule": "evenodd", d: "M2 7a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7Zm6.585 1.08a.75.75 0 0 1 .336 1.005l-1.75 3.5a.75.75 0 0 1-1.16.234l-1.75-1.5a.75.75 0 0 1 .977-1.139l1.02.875 1.321-2.64a.75.75 0 0 1 1.006-.336Z", "clip-rule": "evenodd" })] }), _jsx("div", { className: cn(paragraphText), children: "\uC811\uC218\uB9C8\uAC10" }), _jsx("div", { className: cn(paragraphText), children: convertDateToString(applyEnd) })] }), _jsxs("div", { className: cn(dateWrapper), children: [_jsx("svg", { ...svgAttributes, children: _jsx("path", { "fill-rule": "evenodd", d: "M4 1.75a.75.75 0 0 1 1.5 0V3h5V1.75a.75.75 0 0 1 1.5 0V3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2V1.75ZM4.5 6a1 1 0 0 0-1 1v4.5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-7Z", "clip-rule": "evenodd" }) }), _jsx("div", { className: cn(paragraphText), children: "\uC2DC\uD5D8\uC77C\uC790" }), _jsx("div", { className: cn(paragraphText), children: convertDateToString(testStart) })] }), _jsxs("div", { className: cn(dateWrapper), children: [_jsxs("svg", { ...svgAttributes, children: [_jsx("path", { "fill-rule": "evenodd", d: "M10 3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v9a2 2 0 0 0 2 2h8a2 2 0 0 1-2-2V3ZM4 4h4v2H4V4Zm4 3.5H4V9h4V7.5Zm-4 3h4V12H4v-1.5Z", "clip-rule": "evenodd" }), _jsx("path", { d: "M13 5h-1.5v6.25a1.25 1.25 0 1 0 2.5 0V6a1 1 0 0 0-1-1Z" })] }), _jsx("div", { className: cn(paragraphText), children: "\uC131\uC801\uBC1C\uD45C" }), _jsx("div", { className: cn(paragraphText), children: convertDateToString(gradeOpen) })] })] })] }));
183
+ return (_jsxs("div", { onClick: onClick, className: cn(item, "rounded-[8px] p-5 bg-gray-light/30 border-1 border-gray-light"), children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: cn(titleWrapper), children: [_jsx("div", { className: cn(titleText), children: title }), _jsx("div", { children: isBeforeStart ? (_jsxs("div", { className: cn(tag, "bg-red-burgundy"), children: ["\uC811\uC218\uAE4C\uC9C0 ", dDayStart] })) : isBeforeEnd ? (_jsx("div", { className: cn(tag, "bg-green-dark"), children: "\uC811\uC218 \uC911" })) : (_jsx("div", { className: cn(tag, "bg-gray-medium/30"), children: "\uB9C8\uAC10" })) })] }), !isBeforeStart && isBeforeEnd ? (_jsxs("div", { className: "text-xs", children: ["\uC811\uC218 \uB9C8\uAC10\uAE4C\uC9C0 ", dDayEnd] })) : (""), _jsx("div", { className: "w-full h-0.5 bg-gray-medium" })] }), _jsxs("div", { className: "flex flex-col gap-1 w-full h-fit mt-4", children: [_jsxs("div", { className: cn(dateWrapper), children: [_jsxs("svg", { ...svgAttributes, children: [_jsx("path", { "fill-rule": "evenodd", d: "M11.986 3H12a2 2 0 0 1 2 2v6a2 2 0 0 1-1.5 1.937V7A2.5 2.5 0 0 0 10 4.5H4.063A2 2 0 0 1 6 3h.014A2.25 2.25 0 0 1 8.25 1h1.5a2.25 2.25 0 0 1 2.236 2ZM10.5 4v-.75a.75.75 0 0 0-.75-.75h-1.5a.75.75 0 0 0-.75.75V4h3Z", "clip-rule": "evenodd" }), _jsx("path", { "fill-rule": "evenodd", d: "M2 7a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7Zm6.585 1.08a.75.75 0 0 1 .336 1.005l-1.75 3.5a.75.75 0 0 1-1.16.234l-1.75-1.5a.75.75 0 0 1 .977-1.139l1.02.875 1.321-2.64a.75.75 0 0 1 1.006-.336Z", "clip-rule": "evenodd" })] }), _jsx("div", { className: cn(paragraphText), children: "\uC811\uC218\uB9C8\uAC10" }), _jsx("div", { className: cn(paragraphText), children: applicationEndAt })] }), _jsxs("div", { className: cn(dateWrapper), children: [_jsx("svg", { ...svgAttributes, children: _jsx("path", { "fill-rule": "evenodd", d: "M4 1.75a.75.75 0 0 1 1.5 0V3h5V1.75a.75.75 0 0 1 1.5 0V3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2V1.75ZM4.5 6a1 1 0 0 0-1 1v4.5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-7Z", "clip-rule": "evenodd" }) }), _jsx("div", { className: cn(paragraphText), children: "\uC2DC\uD5D8\uC77C\uC790" }), _jsx("div", { className: cn(paragraphText), children: testStartAt })] }), _jsxs("div", { className: cn(dateWrapper), children: [_jsxs("svg", { ...svgAttributes, children: [_jsx("path", { "fill-rule": "evenodd", d: "M10 3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v9a2 2 0 0 0 2 2h8a2 2 0 0 1-2-2V3ZM4 4h4v2H4V4Zm4 3.5H4V9h4V7.5Zm-4 3h4V12H4v-1.5Z", "clip-rule": "evenodd" }), _jsx("path", { d: "M13 5h-1.5v6.25a1.25 1.25 0 1 0 2.5 0V6a1 1 0 0 0-1-1Z" })] }), _jsx("div", { className: cn(paragraphText), children: "\uC131\uC801\uBC1C\uD45C" }), _jsx("div", { className: cn(paragraphText), children: gradeOpenAt })] })] })] }));
190
184
  }) }), _jsx("div", { className: cn(softBox) })] }));
191
185
  if (type === "notification")
192
186
  return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(scrollWrapper), children: notice.announcements.map(({ title, date, description, onClick }) => (_jsxs("div", { onClick: onClick, className: cn(item, "h-fit shadow-main p-5 "), children: [_jsxs("div", { children: [_jsx("div", { className: "text-[15px] text-gray-medium", children: date }), _jsx("div", { className: cn(titleText, "mb-2"), children: title })] }), _jsx("p", { className: cn(paragraphText, "truncate h-fit"), children: description })] }))) }), _jsx("div", { className: cn(softBox) })] }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@edu-tosel/design",
3
- "version": "1.0.268",
3
+ "version": "1.0.269",
4
4
  "description": "UI components for International TOSEL Committee",
5
5
  "keywords": [
6
6
  "jsx",
@@ -1,4 +1,4 @@
1
- export default function compareDates(targetDate: Date): {
1
+ export default function compareDates(targetDate: string): {
2
2
  isBefore: boolean;
3
3
  dDay: string | null;
4
4
  };
package/version.txt CHANGED
@@ -1 +1 @@
1
- 1.0.268
1
+ 1.0.269
@@ -41,7 +41,7 @@ export default function LabelDesign({ title, onClick, disabled, option, hoverSta
41
41
  height === "2xs" ||
42
42
  height === "3xs" ||
43
43
  height === "4xs"
44
- ? "rounded-md text-xs"
44
+ ? "rounded-md text-sm"
45
45
  : "rounded-lgx",
46
46
  };
47
47
  return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(body), onClick: onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), children: title }), _jsx(Obstacle, { disabled: disabled, option: {
@@ -1,13 +0,0 @@
1
- export interface RegionalInfo {
2
- headquarterName: string;
3
- assignedCities: string[];
4
- }
5
- export interface AgencyInfoProps {
6
- manager: string;
7
- positionTitle?: string;
8
- managerCode?: string;
9
- phoneNumber: string;
10
- officeAddress: string;
11
- regions: RegionalInfo[];
12
- }
13
- export declare const exampleAgencyInfo: AgencyInfoProps;
@@ -1,16 +0,0 @@
1
- //예시데이터
2
- export const exampleAgencyInfo = {
3
- manager: "John Doe",
4
- phoneNumber: "010-1234-5678",
5
- officeAddress: "123 Gangnam-daero, Gangnam-gu, Seoul, Korea",
6
- regions: [
7
- {
8
- headquarterName: "Seoul HQ",
9
- assignedCities: ["Seoul", "Incheon"],
10
- },
11
- {
12
- headquarterName: "Busan HQ",
13
- assignedCities: ["Busan", "Ulsan"],
14
- },
15
- ],
16
- };
@@ -1,7 +0,0 @@
1
- import { AgencyInfoProps } from "./Contact";
2
- interface AgencyListProps {
3
- agencies: AgencyInfoProps[];
4
- }
5
- export default function ContactAgencies({ agencies }: AgencyListProps): import("react/jsx-runtime").JSX.Element;
6
- export declare function AgencyList({ agencies }: AgencyListProps): import("react/jsx-runtime").JSX.Element;
7
- export {};
@@ -1,162 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { cn, formatMobileNum, copyToClipboard } from "../../../util";
3
- import Header from "./Header";
4
- import { useResponsive, useBussinessHours } from "../../../hook";
5
- import { useState } from "react";
6
- import { getChoseong } from "es-hangul";
7
- import Action from "../Action";
8
- export default function ContactAgencies({ agencies }) {
9
- const isXXXS = useResponsive("xxxs");
10
- const isOpen = useBussinessHours();
11
- // const isOpen = true;
12
- const container = {
13
- display: "relative flex flex-col justify-start items-center",
14
- sizes: "w-full h-screen",
15
- text: "break-keep",
16
- cursor: "cursor-default",
17
- };
18
- const contentsWrapper = {
19
- displays: "flex flex-col justify-start items-center",
20
- sizes: "w-full max-w-[1200px] h-full min-h-fit",
21
- spacings: "px-2 pt-20 pb-5 md:px-5",
22
- };
23
- const titleWrapper = {
24
- displays: "flex flex-col justify-center items-center",
25
- sizes: "w-full h-fit",
26
- spacings: "mb-10",
27
- };
28
- const titleStyling = {
29
- textStyles: "font-bold text-2xl text-gray-dark text-center",
30
- };
31
- const subtitleStyling = {
32
- textStyles: "font-medium text-sm text-gray-medium text-center",
33
- };
34
- const infoBox = {
35
- displays: "relative flex flex-col justify-center items-center overflow-hidden",
36
- sizes: "w-fit h-fit rounded-lg",
37
- spacings: "gap-2 py-5 px-8 my-5",
38
- textStyles: "font-medium text-lg",
39
- };
40
- return (_jsxs("div", { className: cn(container), children: [_jsx(Header, {}), _jsxs("div", { className: cn(contentsWrapper), children: [_jsx("div", { className: "w-40", children: _jsx("img", { src: "https://resource.tosel.co.kr/images/homepage/img-contact-main-small.png", alt: "" }) }), _jsxs("div", { className: cn(titleWrapper), children: [_jsx("div", { className: cn(titleStyling), children: "\uC9C0\uC5ED\uBCF8\uBD80 \uB2F4\uB2F9\uC790 \uBC0F \uC5F0\uB77D\uCC98" }), _jsxs("div", { className: cn(subtitleStyling), children: ["\uC9C0\uC5ED\uBCC4 \uBCF8\uBD80\uC815\uBCF4\uB97C \uCC3E\uC544\uBCF4\uC138\uC694 ", _jsx("br", {}), " \uCE5C\uC808\uD558\uAC8C \uB3C4\uC640\uB4DC\uB9B4\uAC8C\uC694"] }), isOpen ? (_jsxs("div", { className: cn(infoBox, " text-green-dark"), children: [_jsx("div", { className: "absolute top-0 left-0 w-full h-full animate-pulse bg-green-light z-0" }), _jsxs("div", { className: "w-full text-xs flex flex-row gap-2 justify-center z-10", children: [_jsx("span", { children: "\uC0C1\uB2F4 \uAC00\uB2A5\uD55C \uC2DC\uAC04\uC774\uC5D0\uC694" }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", className: "size-4", children: _jsx("path", { "fill-rule": "evenodd", d: "M1 8c0-3.43 3.262-6 7-6s7 2.57 7 6-3.262 6-7 6c-.423 0-.838-.032-1.241-.094-.9.574-1.941.948-3.06 1.06a.75.75 0 0 1-.713-1.14c.232-.378.395-.804.469-1.26C1.979 11.486 1 9.86 1 8Z", "clip-rule": "evenodd" }) })] }), _jsxs("div", { className: "flex flex-col xxxs:flex-row justify-center items-center gap-2 z-10", children: [_jsx("div", { children: "\uC6D4 ~ \uAE08" }), isXXXS && _jsx("div", { children: "|" }), _jsx("div", { children: "10\uC2DC ~ 17\uC2DC" })] })] })) : (_jsxs("div", { className: cn(infoBox, "bg-gray-dark text-gray-light"), children: [_jsxs("div", { className: "w-full text-xs flex flex-row gap-2", children: [_jsx("span", { children: "\uC9C0\uAE08\uC740 \uC0C1\uB2F4\uC2DC\uAC04\uC774 \uC544\uB2C8\uC5D0\uC694." }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", className: "size-4", children: _jsx("path", { d: "M14.438 10.148c.19-.425-.321-.787-.748-.601A5.5 5.5 0 0 1 6.453 2.31c.186-.427-.176-.938-.6-.748a6.501 6.501 0 1 0 8.585 8.586Z" }) })] }), _jsxs("div", { className: "flex flex-col xxxs:flex-row justify-center items-center gap-2", children: [_jsx("div", { children: "\uC6D4 ~ \uAE08" }), isXXXS && _jsx("div", { children: "|" }), _jsx("div", { children: "10\uC2DC ~ 17\uC2DC" })] })] }))] }), _jsx(AgencyList, { agencies: agencies })] })] }));
41
- }
42
- export function AgencyList({ agencies }) {
43
- const [searchTerm, setSearchTerm] = useState(""); // 검색어 상태
44
- // 한글을 포함한 검색어로 필터링하는 함수
45
- const filterAgencies = (agencies, searchTerm) => {
46
- const normalizeText = (text) => {
47
- return text.replace(/\s+/g, "").toLowerCase(); // 띄어쓰기 제거 및 소문자 변환
48
- };
49
- 10;
50
- const isHangul = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/.test(searchTerm); // 검색어에 한글 포함 여부 체크
51
- const normalizedSearchTerm = normalizeText(searchTerm); // 입력값 정규화
52
- const normalizedSearchChoseong = isHangul
53
- ? getChoseong(searchTerm).toLowerCase() // 초성 정규화
54
- : normalizedSearchTerm;
55
- // 1단계: 정확한 일치 또는 부분 문자열 검색
56
- const exactMatchFilter = agencies.filter((agency) => {
57
- const managerMatch = normalizeText(agency.manager).includes(normalizedSearchTerm);
58
- const regionMatch = agency.regions.some((region) => {
59
- const headquarterMatch = normalizeText(region.headquarterName).includes(normalizedSearchTerm);
60
- const cityMatch = region.assignedCities.some((regionName) => normalizeText(regionName).includes(normalizedSearchTerm));
61
- return headquarterMatch || cityMatch;
62
- });
63
- return managerMatch || regionMatch;
64
- });
65
- // 2단계: 초성 또는 정규화된 일반 검색 (1단계 결과가 없는 경우 실행)
66
- if (exactMatchFilter.length > 0) {
67
- return exactMatchFilter;
68
- }
69
- return agencies.filter((agency) => {
70
- const managerMatch = isHangul
71
- ? getChoseong(agency.manager)
72
- .toLowerCase()
73
- .includes(normalizedSearchChoseong)
74
- : normalizeText(agency.manager).includes(normalizedSearchTerm);
75
- const regionMatch = agency.regions.some((region) => {
76
- const headquarterMatch = isHangul
77
- ? getChoseong(region.headquarterName)
78
- .toLowerCase()
79
- .includes(normalizedSearchChoseong)
80
- : normalizeText(region.headquarterName).includes(normalizedSearchTerm);
81
- const cityMatch = region.assignedCities.some((regionName) => isHangul
82
- ? getChoseong(regionName)
83
- .toLowerCase()
84
- .includes(normalizedSearchChoseong)
85
- : normalizeText(regionName).includes(normalizedSearchTerm));
86
- return headquarterMatch || cityMatch;
87
- });
88
- return managerMatch || regionMatch;
89
- });
90
- };
91
- const handleKeyDown = (event) => {
92
- const isComposing = event.nativeEvent.isComposing; // IME 입력 상태 확인
93
- if (!isComposing && event.key === "Enter") {
94
- console.log("Enter 키 입력됨");
95
- event.currentTarget.blur(); // 검색창 포커스 해제
96
- }
97
- };
98
- const filteredAgencies = filterAgencies(agencies, searchTerm);
99
- //결과없음 이미지
100
- const noResultWrapper = {
101
- displays: "flex flex-col justify-center items-center",
102
- sizes: "w-full h-fit",
103
- };
104
- const noResultImg = {
105
- spacings: "p-10",
106
- sizes: "w-full max-w-80",
107
- };
108
- const container = {
109
- displays: "flex flex-col justify-start items-center",
110
- sizes: "w-full h-fit",
111
- spacings: "gap-2",
112
- };
113
- const inputBoxWrapper = {
114
- displays: "relative flex flex-row w-full justify-center items-center",
115
- sizes: "w-full h-fit",
116
- spacings: "px-2",
117
- };
118
- const inputBox = {
119
- sizes: "w-full max-w-100 rounded-md",
120
- formattedStyle: "outline-none",
121
- backgrounds: "p-4 focus:border-white border-2 border-gray-300 ",
122
- placeHolder: "지역 / 본부장명 검색",
123
- animation: "focus:shadow-green duration-300",
124
- };
125
- const chartWrapper = {
126
- displays: "grid grid-cols-1 md:grid-cols-2",
127
- sizes: "w-full h-fit",
128
- spacings: "px-2 py-5 gap-2 md:gap-5",
129
- };
130
- const agencyCardWrapper = {
131
- displays: "relative flex flex-col justify-start items-center",
132
- sizes: "w-full h-fit md:h-90 rounded-lg",
133
- spacings: "p-5",
134
- backgrounds: "bg-gray-light/50",
135
- animations: "hover:scale-101 duration-300 hover:shadow-green",
136
- };
137
- const tag = {
138
- displays: "flex justify-center items-center",
139
- sizes: "h-fit w-fit rounded-sm",
140
- spacings: "px-1",
141
- textStyles: "font-medium text-sm",
142
- };
143
- const cardHeader = {
144
- displays: "flex flex-col justify-start items-center",
145
- sizes: "w-full h-fit ",
146
- textStyles: "font-medium text-gray-medium text-lg",
147
- };
148
- const actionButton = {
149
- displays: "flex items-center justify-center",
150
- spacings: "py-2 px-3 gap-2",
151
- sizes: "w-full rounded-lg md:w-fit",
152
- textStyles: "font-medium text-center",
153
- basicColor: "bg-none text-gray-medium",
154
- boundaries: "border-1 border-gray-medium/30",
155
- };
156
- return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(inputBoxWrapper), children: _jsxs("div", { className: "flex justify-center items-center w-full max-w-100 relative", children: [_jsx("input", { type: "text", placeholder: inputBox.placeHolder, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onKeyDown: handleKeyDown, className: cn(inputBox) }), _jsx("div", { className: "absolute top-0 right-0 flex justify-end items-center h-full mr-4 text-green-light", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", className: "size-6", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" }) }) })] }) }), _jsx(Action.Replace, { actions: [
157
- [
158
- filteredAgencies.length === 0,
159
- _jsxs("div", { className: cn(noResultWrapper), children: [_jsx("div", { className: cn(noResultImg), children: _jsx("img", { src: "/images/legacy/img-legacy-noresult.png", alt: "\uACB0\uACFC \uC5C6\uC74C" }) }), _jsx("div", { className: "text-sm text-center w-full font-medium", children: "\uC774\uB7F0, \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC5B4\uC694" })] }),
160
- ],
161
- ], children: _jsx("div", { className: cn(chartWrapper), children: filteredAgencies.map((e, index) => (_jsxs("div", { className: cn(agencyCardWrapper), children: [_jsxs("div", { className: cn(cardHeader), children: [_jsxs("div", { className: "flex flex-col xxs:flex-row justify-start items-start xxs:justify-between xxs:items-center w-full", children: [_jsxs("div", { className: "w-full flex gap-2 items-end", children: [_jsx("span", { className: "text-xl w-fit text-gray-dark font-semibold", children: e.manager }), e.positionTitle ?? ""] }), _jsx("div", { className: "flex md:flex-row flex-wrap gap-2 w-fit shrink-0", children: e.regions.map((f, index) => (_jsx("div", { className: cn(tag, "bg-gray-medium/50 text-white "), children: f.headquarterName }, index))) })] }), _jsxs("div", { className: "flex flex-col justify-start items-center w-full gap-2 leading-tight mt-4", children: [_jsxs("div", { className: "w-full", children: ["\uC8FC\uC18C | ", e.officeAddress] }), _jsxs("div", { className: "w-full", children: ["\uC804\uD654\uBC88\uD638 | ", e.phoneNumber] })] })] }), _jsx("div", { className: "w-full h-0 border-1 bg-gray-light my-5" }), _jsxs("div", { className: "flex flex-col w-full justify-center items-center h-fit", children: [_jsx("div", { className: "flex w-full items-center justify-start text-lg font-medium text-gray-medium", children: "\uB2F4\uB2F9\uC9C0\uC5ED:" }), e.regions.length < 3 ? (_jsx("div", { className: "flex flex-col justify-start items-center w-full gap-3 mt-3", children: e.regions.map((g, index) => (_jsx("div", { className: "flex flex-wrap justify-start items-center w-full gap-1", children: g.assignedCities.map((h, index) => (_jsx("div", { className: cn(tag, "bg-green-light text-green-dark"), children: h }, index))) }, index))) })) : (_jsx("div", { className: "w-full flex flex-wrap gap-1", children: e.regions.map((g) => g.assignedCities.map((h, index) => (_jsx("div", { className: cn(tag, "bg-green-light text-green-dark"), children: h }, index)))) }))] }), _jsxs("div", { className: "flex flex-col w-full h-fit justify-center items-center mt-5 gap-2 md:flex-row md:absolute md:bottom-5 md:right-5 md:justify-end", children: [_jsxs("div", { className: cn(actionButton, "hover:bg-green-dark hover:text-white duration-300"), onClick: () => (window.location.href = `tel:${formatMobileNum(e.phoneNumber)}`), children: [_jsx("span", { children: "\uBB38\uC758\uD558\uAE30" }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "size-4", children: _jsx("path", { "fill-rule": "evenodd", d: "M1.5 4.5a3 3 0 0 1 3-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 0 1-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 0 0 6.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 0 1 1.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 0 1-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5Z", "clip-rule": "evenodd" }) })] }), e.managerCode && (_jsxs("div", { className: cn(actionButton, "hover:bg-gray-light hover:text-gray-dark duration-300"), onClick: () => copyToClipboard(e.managerCode, `코드(${e.managerCode})가 복사되었습니다`), children: [_jsx("span", { children: "\uC601\uC5C5\uCF54\uB4DC" }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "size-4", children: _jsx("path", { "fill-rule": "evenodd", d: "M3 4.875C3 3.839 3.84 3 4.875 3h4.5c1.036 0 1.875.84 1.875 1.875v4.5c0 1.036-.84 1.875-1.875 1.875h-4.5A1.875 1.875 0 0 1 3 9.375v-4.5ZM4.875 4.5a.375.375 0 0 0-.375.375v4.5c0 .207.168.375.375.375h4.5a.375.375 0 0 0 .375-.375v-4.5a.375.375 0 0 0-.375-.375h-4.5Zm7.875.375c0-1.036.84-1.875 1.875-1.875h4.5C20.16 3 21 3.84 21 4.875v4.5c0 1.036-.84 1.875-1.875 1.875h-4.5a1.875 1.875 0 0 1-1.875-1.875v-4.5Zm1.875-.375a.375.375 0 0 0-.375.375v4.5c0 .207.168.375.375.375h4.5a.375.375 0 0 0 .375-.375v-4.5a.375.375 0 0 0-.375-.375h-4.5ZM6 6.75A.75.75 0 0 1 6.75 6h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75A.75.75 0 0 1 6 7.5v-.75Zm9.75 0A.75.75 0 0 1 16.5 6h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75ZM3 14.625c0-1.036.84-1.875 1.875-1.875h4.5c1.036 0 1.875.84 1.875 1.875v4.5c0 1.035-.84 1.875-1.875 1.875h-4.5A1.875 1.875 0 0 1 3 19.125v-4.5Zm1.875-.375a.375.375 0 0 0-.375.375v4.5c0 .207.168.375.375.375h4.5a.375.375 0 0 0 .375-.375v-4.5a.375.375 0 0 0-.375-.375h-4.5Zm7.875-.75a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75Zm6 0a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75ZM6 16.5a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75Zm9.75 0a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75Zm-3 3a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75Zm6 0a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75Z", "clip-rule": "evenodd" }) })] }))] })] }, index))) }) })] }));
162
- }
@@ -1,7 +0,0 @@
1
- import { ReactNode } from "react";
2
- export default function ContactMain(): import("react/jsx-runtime").JSX.Element;
3
- export declare function HelpCard({ title, subtitle, children, }: {
4
- title: string;
5
- subtitle: string;
6
- children: ReactNode;
7
- }): import("react/jsx-runtime").JSX.Element;
@@ -1,66 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { cn, copyToClipboard } from "../../../util";
3
- import Header from "./Header";
4
- export default function ContactMain() {
5
- const container = {
6
- display: "relative flex flex-col justify-start items-center",
7
- sizes: "w-full h-screen",
8
- text: "break-keep",
9
- cursor: "cursor-default",
10
- };
11
- const contentsWrapper = {
12
- displays: "flex flex-col justify-center items-center",
13
- sizes: "w-full max-w-[1200px] h-full min-h-fit",
14
- spacings: "px-2 pt-20 pb-5 md:px-5",
15
- };
16
- const cardWrapper = {
17
- displays: "flex flex-col md:flex-row justify-center items-center",
18
- sizes: "w-full h-fit",
19
- spacings: "gap-5 px-0 md:mt-0 mt-5",
20
- };
21
- const titleWrapper = {
22
- displays: "flex flex-col justify-center items-center",
23
- sizes: "w-full h-fit",
24
- spacings: "mb-20",
25
- };
26
- const titleStyling = {
27
- textStyles: "font-bold text-2xl text-gray-dark text-center",
28
- };
29
- const subtitleStyling = {
30
- textStyles: "font-medium text-sm text-gray-medium text-center",
31
- };
32
- const button = {
33
- display: "flex justify-center items-center shrink-0",
34
- sizes: "h-10 w-fit rounded-lg",
35
- spacings: "px-4",
36
- textStyle: "text-sm font-medium text-center",
37
- cursor: "cursor-pointer",
38
- };
39
- return (_jsxs("div", { className: cn(container), children: [_jsx(Header, { isHome: true }), _jsxs("div", { className: cn(contentsWrapper), children: [_jsx("div", { className: "w-40", children: _jsx("img", { src: "https://resource.tosel.co.kr/images/homepage/img-contact-main-small.png", alt: "" }) }), _jsxs("div", { className: cn(titleWrapper), children: [_jsx("div", { className: cn(titleStyling), children: "\uBB34\uC2A8 \uBB38\uC81C\uAC00 \uC788\uB098\uC694?" }), _jsx("div", { className: cn(subtitleStyling), children: "\uB2E4\uC74C\uACFC \uAC19\uC740 \uBC29\uBC95\uC73C\uB85C \uD574\uACB0\uD574\uBCF4\uC138\uC694" })] }), _jsxs("div", { className: cn(cardWrapper), children: [_jsx(HelpCard, { title: "\uC9C0\uC5ED\uBCF8\uBD80 \uC5F0\uB77D\uCC98", subtitle: "\uC9C0\uC5ED\uBCF8\uBD80\uC5D0 \uC9C1\uC811 \uC5F0\uB77D\uD558\uACE0 \uC2F6\uB2E4\uBA74?", children: _jsxs("div", { className: "flex flex-col justify-center items-center w-full bg-white/80 rounded-lg h-fit min-h-30 mt-5 gap-5 py-5", children: [_jsx("div", { className: "w-full h-fit flex justify-center items-center text-green-dark", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", className: "size-10", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Z" }) }) }), _jsx("div", { className: cn(button, "bg-green-dark text-white hover:shadow-green hover:scale-103 duration-300"), onClick: () => {
40
- window.location.href = "/contact/agencies";
41
- }, children: "\uC9C0\uC5ED\uBCF8\uBD80 \uCC3E\uAE30" })] }) }), _jsx(HelpCard, { title: "\uC790\uC8FC \uBB3B\uB294 \uC9C8\uBB38", subtitle: "\uC790\uC8FC\uBB3B\uB294 \uC9C8\uBB38\uC744 \uBAA8\uC544\uBD24\uC5B4\uC694", children: _jsxs("div", { className: "flex flex-col justify-center items-center w-full bg-white/80 rounded-lg h-fit min-h-30 mt-10 gap-5 py-5", children: [_jsx("div", { className: "w-full h-fit flex justify-center items-center text-green-dark", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", className: "size-10", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" }) }) }), _jsx("div", { className: cn(button, "bg-green-dark text-white hover:shadow-green hover:scale-103 duration-300"), onClick: () => {
42
- window.location.href = "https://tosel-faq.notion.site/";
43
- }, children: "\uB3C4\uC6C0\uB9D0 \uBC14\uB85C\uAC00\uAE30" })] }) }), _jsx(HelpCard, { title: "\uC9C1\uC811 \uBB38\uC758\uD558\uAE30", subtitle: "\uC774\uBA54\uC77C\uC744 \uD1B5\uD574 \uBCF8\uC0AC\uB85C \uBB38\uC758\uD560 \uC218 \uC788\uC5B4\uC694.", children: _jsxs("div", { className: "w-full h-full flex flex-col sm:flex-row md:flex-col justify-center items-center gap-5", children: [_jsxs("div", { className: "relative w-full flex flex-col bg-white/80 rounded-lg py-2 gap-2 overflow-hidden", onClick: () => copyToClipboard("cs_tosel@tosel.co.kr", "개인 CS 이메일 주소가 복사되었습니다."), children: [_jsx("div", { className: "leading-none w-full text-center mt-2 font-bold text-green-dark", children: "\uAC1C\uC778" }), _jsx("div", { className: "leading-none w-full text-center mt-2 font-medium text-gray-medium", children: "tosel_cs@tosel.co.kr" }), _jsx("div", { className: "absolute flex justify-center items-center top-0 left-0 w-full h-full hover:bg-white/50 hover:backdrop-blur-sm duration-300 group", children: _jsx("div", { className: cn(button, "bg-green-dark text-green-light opacity-0 group-hover:opacity-100 duration-300"), children: "\uC8FC\uC18C\uBCF5\uC0AC" }) })] }), _jsxs("div", { className: "relative w-full flex flex-col bg-white/80 rounded-lg py-2 gap-2 overflow-hidden", onClick: () => copyToClipboard("cs_academy@tosel.co.kr", "단체 CS 이메일 주소가 복사되었습니다."), children: [_jsx("div", { className: "leading-none w-full text-center mt-2 font-bold text-green-dark", children: "\uB2E8\uCCB4" }), _jsx("div", { className: "leading-none w-full text-center mt-2 font-medium text-gray-medium text-sm", children: "tosel_academy@tosel.co.kr" }), _jsx("div", { className: "absolute flex justify-center items-center top-0 left-0 w-full h-full hover:bg-white/50 hover:backdrop-blur-sm duration-300 group", children: _jsx("div", { className: cn(button, "bg-green-dark text-green-light opacity-0 group-hover:opacity-100 duration-300"), children: "\uC8FC\uC18C\uBCF5\uC0AC" }) })] })] }) })] })] })] }));
44
- }
45
- export function HelpCard({ title, subtitle, children, }) {
46
- const card = {
47
- display: "flex flex-col justify-center items-center",
48
- sizes: "w-full md:w-60 h-90 md:rounded-lg rounded-xl",
49
- backgrounds: "bg-gray-light/50",
50
- hoverAction: "hover:shadow-green duration-300 hover:scale-101",
51
- spacings: "p-5",
52
- };
53
- const titleBox = {
54
- display: "flex justify-center items-center",
55
- sizes: "w-full h-fit shrink-0",
56
- spacings: "px-5 py-2",
57
- textStyle: "font-bold text-gray-medium text-base md:text-lg text-center",
58
- };
59
- const subTitleBox = {
60
- display: "flex justify-center items-center",
61
- sizes: "w-full h-fit shrink-0",
62
- spacings: "px-5 py-2",
63
- textStyle: "font-medium text-gray-medium text-xs md:text-sm text-center",
64
- };
65
- return (_jsxs("div", { className: cn(card), children: [_jsx("div", { className: cn(titleBox), children: title }), _jsx("div", { className: cn(subTitleBox), children: subtitle }), _jsx("div", { className: "h-full w-full", children: children })] }));
66
- }
@@ -1,3 +0,0 @@
1
- export default function Header({ isHome }: {
2
- isHome?: boolean;
3
- }): import("react/jsx-runtime").JSX.Element;
@@ -1,37 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useResponsive } from "../../../hook";
3
- import { cn, copyToClipboard } from "../../../util";
4
- export default function Header({ isHome }) {
5
- const isXS = useResponsive("xs");
6
- const isXXS = useResponsive("xxs");
7
- const container = {
8
- display: "fixed flex flex-col justify-center items-center",
9
- sizes: "w-full h-fit",
10
- backgrounds: "bg-white/10 backdrop-blur-sm",
11
- cursor: "cursor-default",
12
- positions: "top-0 left-0 z-40",
13
- };
14
- const headWrapper = {
15
- display: "flex justify-between items-center",
16
- sizes: "w-full h-15 max-w-[1200px]",
17
- spacings: "px-5",
18
- };
19
- const button = {
20
- display: "flex justify-center items-center shrink-0",
21
- sizes: "h-10 w-fit rounded-lg",
22
- spacings: "px-4",
23
- textStyle: "text-sm font-medium text-center",
24
- cursor: "cursor-pointer",
25
- };
26
- const leftWrapper = {
27
- display: "flex gap-2 justify-center items-center",
28
- };
29
- const rightWrapper = {
30
- display: "flex gap-2",
31
- };
32
- return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(headWrapper), children: [_jsxs("div", { className: cn(leftWrapper), children: [_jsx("div", { className: "h-fit w-fit", children: _jsx("img", { src: "https://tosel.gcdn.ntruss.com/images/img-favicon-main.png", alt: "", className: "size-8" }) }), _jsx("div", { className: "font-medium text-lg", children: "\uACE0\uAC1D\uC13C\uD130" })] }), _jsxs("div", { className: cn(rightWrapper), children: [isXXS && (_jsx("div", { className: cn(button, "hover:bg-gray-light text-gray-medium duration-300"), onClick: () => copyToClipboard("cs_tosel@tosel.co.kr", "이메일 주소가 복사되었습니다."), children: "cs_tosel@tosel.co.kr" })), _jsx("div", { className: cn(button, "bg-gray-light text-gray-medium hover:bg-green-light hover:text-green-dark "), onClick: () => {
33
- window.location.href = isHome
34
- ? "https://new.tosel.org"
35
- : "../contact";
36
- }, children: isHome ? "홈페이지로" : "CS 홈으로" })] })] }) }));
37
- }
@@ -1,7 +0,0 @@
1
- import Main from "./ContactMain";
2
- import Agencies from "./ContactAgency";
3
- declare const Contact: {
4
- Main: typeof Main;
5
- Agencies: typeof Agencies;
6
- };
7
- export default Contact;
@@ -1,7 +0,0 @@
1
- import Main from "./ContactMain";
2
- import Agencies from "./ContactAgency";
3
- const Contact = {
4
- Main,
5
- Agencies,
6
- };
7
- export default Contact;