@edu-tosel/design 1.0.51 → 1.0.53

package/modal/template/Confirm/Tag.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ConfirmModal from "../../design/ConfirmModal.design";
+import { cn } from "../../../util";
+import { selectOne, selectPlural } from "../../../util/select";
+import { animated, useTransition } from "react-spring";
+export default function Tag(props) {
+    const { state, tags, options, process } = props.tag;
+    const { selectHow } = options || { selectHow: "plural" };
+    const button = (key) => ({
+        sizes: "h-10",
+        styles: "rounded-full",
+        animations: "duration-300",
+        boundaries: state[0].includes(key)
+            ? "bg-green-dark text-white"
+            : "border border-gray-medium",
+    });
+    const [step, node] = process || [false, null];
+    const leaveTransition = useTransition(step, {
+        from: { x: 0 },
+        leave: { x: -600 },
+    });
+    const enterTransition = useTransition(step, {
+        from: { x: 400 },
+        enter: { x: 0 },
+    });
+    return (_jsx(ConfirmModal, { ...props, children: _jsxs("div", { className: "flex", children: [leaveTransition((styles, item) => !item && (_jsx(animated.div, { style: styles, className: "w-full grid grid-cols-4 gap-2.5 mt-4.75", children: tags.map(([key, value]) => (_jsx("button", { onClick: () => selectHow === "one"
+                            ? selectOne({ state, key })
+                            : selectPlural({ state, key }), className: cn(button(key)), children: value }, key))) }))), process &&
+                    enterTransition((styles, item) => item && (_jsx(animated.div, { style: styles, className: "absolute mt-4.75", children: node })))] }) }));
+}

package/modal/template/Postcode.d.ts

@@ -0,0 +1,2 @@
+import { DaumPostcodeModalProps } from "../../interface/Modal";
+export default function PostcodeModal({ state, showAction, }: DaumPostcodeModalProps): import("react/jsx-runtime").JSX.Element;

package/modal/template/Postcode.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DaumPostcodeEmbed from "react-daum-postcode";
+import ModalDesign from "../design/Modal.design";
+import { useActionStore } from "../../store";
+import { useEffect, useState } from "react";
+export default function PostcodeModal({ state, showAction, }) {
+    const { removeModal } = useActionStore();
+    const [value, setValue] = state;
+    const [isClient, setIsClient] = useState(false);
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
+    const handler = (data) => {
+        setValue({
+            address: data.address,
+            zipcode: data.zonecode,
+        });
+        return showAction?.event && removeModal(showAction.event);
+    };
+    return (_jsx(ModalDesign, { titles: {
+            title: "주소를 검색하고 선택해주세요",
+            subtitle: "주소를 검색하고 선택해주세요",
+        }, showAction: showAction, options: {
+            width: "lg",
+            height: "xl",
+        }, children: isClient && _jsx(DaumPostcodeEmbed, { onComplete: handler, className: "mt-16" }) }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.51",
+  "version": "1.0.53",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",
@@ -18,6 +18,7 @@
     "date-fns-tz": "^2.0.1",
     "react": "^18.2.0",
     "react-datepicker": "^6.4.0",
+    "react-daum-postcode": "^3.1.3",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
     "react-lottie-player": "^1.5.6",