@edu-tosel/design 1.0.180 → 1.0.183

package/layout/template/Sign.d.ts

@@ -2,6 +2,7 @@ import Box from "./sign/Box";
 import Button from "./sign/Button";
 import Check from "./sign/Check";
 import Layout from "./sign/Layout";
+import OAuth from "./sign/Oauth";
 import WithTitle from "./sign/WithTitle";
 declare const Sign: {
     Box: typeof Box;
@@ -11,5 +12,6 @@ declare const Sign: {
         WithTitle: typeof WithTitle;
     };
     Layout: typeof Layout;
+    OAuth: typeof OAuth;
 };
 export default Sign;

package/layout/template/Sign.js

@@ -2,6 +2,7 @@ import Box from "./sign/Box";
 import Button from "./sign/Button";
 import Check from "./sign/Check";
 import Layout from "./sign/Layout";
+import OAuth from "./sign/Oauth";
 import WithTitle from "./sign/WithTitle";
 const Sign = {
     Box,
@@ -11,5 +12,6 @@ const Sign = {
         WithTitle,
     },
     Layout,
+    OAuth,
 };
 export default Sign;

package/layout/template/sign/Oauth.d.ts

@@ -0,0 +1,6 @@
+type OAuthType = "naver" | "kakaotalk";
+interface OAuthProps {
+    type: OAuthType;
+}
+export default function OAuth({ type }: OAuthProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/sign/Oauth.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+import SVG from "../../../asset/SVG";
+export default function OAuth({ type }) {
+    const socialBox = {
+        display: "flex flex-row",
+        sizes: "xs:max-w-[210px] w-full h-15 rounded-lg",
+        animations: "duration-300",
+        backgrounds: "border-1 border-gray-light",
+        styles: type === "naver" ? "hover:bg-[#03C75A] group" : "hover:bg-[#FEE500]",
+    };
+    const textStyle = {
+        sizes: "h-full w-full ",
+        displays: "flex justify-center items-center",
+        styles: type === "naver" ? " group-hover:text-white" : "",
+    };
+    return (_jsxs("div", { className: cn(socialBox), onClick: () => { }, children: [_jsx("div", { className: "h-full aspect-square flex justify-center items-center", children: _jsx(SVGProvider, { type: type }) }), _jsx("div", { className: "h-full" }), _jsx("div", { className: cn(textStyle), children: textParser(type) })] }));
+}
+const textParser = (type) => {
+    if (type === "naver")
+        return "네이버로 로그인";
+    if (type === "kakaotalk")
+        return "카카오톡으로 로그인";
+    return null;
+};
+function SVGProvider({ type }) {
+    if (type === "naver")
+        return (_jsx(SVG.Collab.Naver, { color: "fill-[#03C75A] group-hover:fill-white", size: "size-5" }));
+    if (type === "kakaotalk")
+        return _jsx(SVG.Collab.Kakao, {});
+    return null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.180",
+  "version": "1.0.183",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",

package/version.txt

@@ -1 +1 @@
-1.0.180
+1.0.183