@team-monolith/cds 1.80.0 → 1.80.2

package/dist/components/FileTypeAlertDialog.d.ts

@@ -1,7 +1,11 @@
 import React from "react";
-export declare function FileTypeAlertDialog(props: {
+interface FileTypeAlertDialogProps {
     open: boolean;
     onClose: () => void;
+    /** 다이얼로그에 표시될 콘텐츠 */
     content: React.ReactNode;
+    /** 다시 업로드 버튼 클릭 시 파일 선택 브라우저를 띄우기 위한 callback */
     openFileBrowser: () => void;
-}): import("@emotion/react/jsx-runtime").JSX.Element;
+}
+export declare function FileTypeAlertDialog(props: FileTypeAlertDialogProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from "./components/Banner";
 export * from "./components/Book";
 export * from "./components/Button";
 export * from "./components/CheckboxInput";
+export * from "./components/FileTypeAlertDialog";
 export * from "./components/Input";
 export * from "./components/Modal";
 export * from "./components/Pagination";

package/dist/index.js

@@ -5,6 +5,7 @@ export * from "./components/Banner";
 export * from "./components/Book";
 export * from "./components/Button";
 export * from "./components/CheckboxInput";
+export * from "./components/FileTypeAlertDialog";
 export * from "./components/Input";
 export * from "./components/Modal";
 export * from "./components/Pagination";

package/dist/patterns/LexicalEditor/components/FileSelectInput.d.ts

@@ -1,5 +1,7 @@
+type FileType = "image" | "pdf" | "file";
 interface FileSelectInputProps {
-    accept?: string;
+    /** accept와 타입 얼럿 다이얼로그에 표시될 typeStr을 지정하는 fileType */
+    fileType: FileType;
     onChange: (value: string) => void;
 }
 /**

package/dist/patterns/LexicalEditor/components/FileSelectInput.js

@@ -13,34 +13,47 @@ import { Button, CdsContext } from "../../..";
 import { UploadLineIcon } from "../../../icons";
 import styled from "@emotion/styled";
 import { FileTypeAlertDialog } from "../../../components/FileTypeAlertDialog";
+const fileTypeMap = {
+    image: { accept: "image/*", typeStr: "이미지 파일" },
+    pdf: { accept: ".pdf", typeStr: "pdf 파일" },
+    file: {},
+};
 /**
  * 파일 탐색기를 열어 특정 파일을 업로드 한 후, 그 경로를 onChange로 전달합니다.
  * @param props
  * @returns
  */
 export function FileSelectInput(props) {
-    const { onChange, accept } = props;
+    const { onChange, fileType } = props;
     const [alertOpen, setAlertOpen] = useState(false);
     const inputRef = useRef(null);
     const cdsContext = useContext(CdsContext);
+    const { accept, typeStr } = fileTypeMap[fileType];
     return (_jsxs(_Fragment, { children: [_jsx(Button, { fullWidth: true, color: "grey", size: "medium", label: "\uD30C\uC77C \uC120\uD0DD\uD558\uAE30", onClick: () => {
                     var _a;
                     (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
                 }, startIcon: _jsx(UploadLineIcon, {}) }), _jsx(HiddenInput, { ref: inputRef, type: "file", accept: accept, onChange: (event) => __awaiter(this, void 0, void 0, function* () {
-                    var _a, _b;
+                    var _a, _b, _c;
                     const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
                     if (!file)
                         return;
-                    if (accept && !file.type.match(accept)) {
-                        event.target.value = "";
-                        setAlertOpen(true);
-                        return;
+                    if (accept) {
+                        // 특정 파일 타입에 대해서 검사하므로 복수개의 accept는 고려하지 않음
+                        const isTypeValid = accept.startsWith('.')
+                            ? accept.slice(1) === ((_b = file.name.split('.').pop()) === null || _b === void 0 ? void 0 : _b.toLowerCase())
+                            : file.type.match(accept);
+                        if (!isTypeValid) {
+                            event.target.value = "";
+                            setAlertOpen(true);
+                            return;
+                        }
                     }
-                    const uploadByFile = (_b = cdsContext.lexical) === null || _b === void 0 ? void 0 : _b.uploadByFile;
+                    const uploadByFile = (_c = cdsContext.lexical) === null || _c === void 0 ? void 0 : _c.uploadByFile;
                     if (uploadByFile) {
                         onChange(yield uploadByFile(file));
                     }
-                }) }), _jsx(FileTypeAlertDialog, { open: alertOpen, onClose: () => setAlertOpen(false), openFileBrowser: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, content: _jsxs(_Fragment, { children: ["\uC5C5\uB85C\uB4DC\uD560 \uC218 \uC5C6\uB294 \uD30C\uC77C\uC785\uB2C8\uB2E4.", _jsx("br", {}), "\uC774\uBBF8\uC9C0 \uD30C\uC77C\uC744 \uC5C5\uB85C\uB4DC\uD574\uC8FC\uC138\uC694."] }) })] }));
+                }) }), fileType !== "file" && ( // file 타입의 경우 얼럿 다이얼로그를 띄우지 않음
+            _jsx(FileTypeAlertDialog, { open: alertOpen, onClose: () => setAlertOpen(false), openFileBrowser: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, content: _jsxs(_Fragment, { children: ["\uC5C5\uB85C\uB4DC\uD560 \uC218 \uC5C6\uB294 \uD30C\uC77C\uC785\uB2C8\uB2E4.", _jsx("br", {}), `${typeStr}을 업로드해주세요.`] }) }))] }));
 }
 const HiddenInput = styled.input `
   display: none;

package/dist/patterns/LexicalEditor/components/InsertImageDialog/InsertImageDialog.js

@@ -36,7 +36,7 @@ export function InsertImageDialog(props) {
         }, disableIconPadding: true }, { children: [_jsx(StyledAlertDialogTitle, Object.assign({ onClose: handleOnClose }, { children: title })), _jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(FileSelectInput, { onChange: (value) => {
                                 setValue("src", value);
                                 setPreviewSrc(value);
-                            }, accept: "image/*" }), _jsx(FormInput, { name: "src", control: control, placeholder: "https://www.pexels.com/photo/n-2848492", size: "medium", label: "URL", fullWidth: true, startIcon: _jsx(LinkIcon, {}), inputProps: {
+                            }, fileType: "image" }), _jsx(FormInput, { name: "src", control: control, placeholder: "https://www.pexels.com/photo/n-2848492", size: "medium", label: "URL", fullWidth: true, startIcon: _jsx(LinkIcon, {}), inputProps: {
                                 onBlur: () => {
                                     setPreviewSrc(watch("src"));
                                 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.80.0",
+  "version": "1.80.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,