@edu-tosel/design 1.0.122 → 1.0.123

package/interface/Property.d.ts

@@ -45,7 +45,8 @@ export type Click<REQ = unknown, RES = any> = (prop?: REQ) => RES;
 export type OnClick<Request = unknown, Response = unknown> = (prop?: Request) => Response | ((prop?: Request) => Promise<Response>);
 export interface Button extends LabelWidget {
 }
-export type FileRead = string | ArrayBuffer | null;
+export type FileDisplay = string | ArrayBuffer | null;
+export type FileRead = File | null;
 export type Disabled = boolean | OnClick;
 export type Scripts = {
     script?: string;

package/modal/template/Confirm/Reimage.d.ts

@@ -1,8 +1,9 @@
 import { ConfirmModalProps } from "../../../interface/Modal";
-import { FileRead, State } from "../../../interface";
+import { FileDisplay, FileRead, State } from "../../../interface";
 interface ReimageProps extends Omit<ConfirmModalProps, "children"> {
     data: {
         image: State<FileRead>;
+        display: State<FileDisplay>;
         nowImage: string;
     };
 }

package/modal/template/Confirm/Reimage.js

@@ -5,7 +5,8 @@ import { cn } from "../../../util";
 import SVG from "../../../asset/SVG";
 export default function Reimage(props) {
     const { data } = props;
-    const [selectedImage, setSelectedImage] = data.image;
+    const [selectedImageDisplay, setSelectedImageDisplay] = data.display;
+    const [_, setSelectedImage] = data.image;
     const ref = useRef(null);
     const labelBox = {
         displays: "flex items-center pl-5",
@@ -17,12 +18,13 @@ export default function Reimage(props) {
         if (file) {
             const reader = new FileReader();
             reader.onloadend = () => {
-                setSelectedImage(reader.result);
+                setSelectedImage(file);
+                setSelectedImageDisplay(reader.result);
             };
             reader.readAsDataURL(file);
         }
     };
-    return (_jsx(ConfirmModal, { ...props, children: _jsxs("div", { className: "flex flex-col gap-y-5.5 mt-4.5", children: [_jsx("div", { className: cn(labelBox), children: "\uC774\uBBF8\uC9C0\uB97C \uC120\uD0DD\uD574\uC8FC\uC138\uC694." }), _jsxs("div", { className: "flex w-full justify-center gap-x-12", children: [_jsx(ImageFrame, { image: data.nowImage, script: "\uD604\uC7AC \uC0AC\uC9C4" }), _jsx(SVG.Direction.Right, { className: "mt-7.5" }), _jsx(ImageFrame, { onClick: () => ref.current?.click(), image: selectedImage, script: "\uC0C8\uB85C\uC6B4 \uC0AC\uC9C4" })] }), _jsxs("div", { className: "w-full flex flex-col items-center text-xs text-gray-medium", children: [_jsx("div", { children: "\uB4F1\uB85D\uB41C \uC0AC\uC9C4\uC740 \uC218\uD5D8\uD45C \uBC1C\uAE09\uC2DC \uC790\uB3D9\uC73C\uB85C \uC0AC\uC6A9\uB429\uB2C8\uB2E4." }), _jsx("div", { children: "\uAC00\uAE09\uC801 1:1 \uBE44\uC728, 100*100px \uC774\uC0C1\uC758 \uC0AC\uC9C4\uC744 \uC0AC\uC6A9\uD574\uC8FC\uC138\uC694." })] }), _jsx("input", { ref: ref, type: "file", accept: "image/*", onChange: handleImageChange, className: "hidden" })] }) }));
+    return (_jsx(ConfirmModal, { ...props, children: _jsxs("div", { className: "flex flex-col gap-y-5.5 mt-4.5", children: [_jsx("div", { className: cn(labelBox), children: "\uC774\uBBF8\uC9C0\uB97C \uC120\uD0DD\uD574\uC8FC\uC138\uC694." }), _jsxs("div", { className: "flex w-full justify-center gap-x-12", children: [_jsx(ImageFrame, { image: data.nowImage, script: "\uD604\uC7AC \uC0AC\uC9C4" }), _jsx(SVG.Direction.Right, { className: "mt-7.5" }), _jsx(ImageFrame, { onClick: () => ref.current?.click(), image: selectedImageDisplay, script: "\uC0C8\uB85C\uC6B4 \uC0AC\uC9C4" })] }), _jsxs("div", { className: "w-full flex flex-col items-center text-xs text-gray-medium", children: [_jsx("div", { children: "\uB4F1\uB85D\uB41C \uC0AC\uC9C4\uC740 \uC218\uD5D8\uD45C \uBC1C\uAE09\uC2DC \uC790\uB3D9\uC73C\uB85C \uC0AC\uC6A9\uB429\uB2C8\uB2E4." }), _jsx("div", { children: "\uAC00\uAE09\uC801 1:1 \uBE44\uC728, 100*100px \uC774\uC0C1\uC758 \uC0AC\uC9C4\uC744 \uC0AC\uC6A9\uD574\uC8FC\uC138\uC694." })] }), _jsx("input", { ref: ref, type: "file", accept: "image/*", onChange: handleImageChange, className: "hidden" })] }) }));
 }
 function ImageFrame({ image, script, onClick }) {
     const imageBox = {

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.122
+1.0.123