diff --git a/apps/cs/src/pages/image/ui/image-form.tsx b/apps/cs/src/pages/image/ui/image-form.tsx
index 649d195b8..1de7820c5 100644
--- a/apps/cs/src/pages/image/ui/image-form.tsx
+++ b/apps/cs/src/pages/image/ui/image-form.tsx
@@ -42,8 +42,9 @@ function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
file: uploadFile,
response: uploadResponse,
progress,
+ isValid,
setFile,
- } = useTus();
+ } = useTus({ accept: ".jpeg,.jpg,.png" });
const setAttachmentFileCode = useAttachmentStore(
(state) => state.setAttachmentFileCode,
);
@@ -208,24 +209,26 @@ function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
customPreview={
<>
diff --git a/apps/cs/src/shared/lib/use-tus.ts b/apps/cs/src/shared/lib/use-tus.ts
index 30976c23b..9d4bc7c00 100644
--- a/apps/cs/src/shared/lib/use-tus.ts
+++ b/apps/cs/src/shared/lib/use-tus.ts
@@ -2,9 +2,15 @@ import { useEffect, useState } from "react";
import { type HttpResponse, Upload } from "tus-js-client";
import { AUTH_USER_ID, CLAIM_NAME, ENDPOINT } from "../config";
import { useAttachmentStore } from "./use-attachment-store";
+import { useAlertStore } from "./use-alert-store";
import { getCookie } from "./cookie";
-export const useTus = () => {
+type TusProps = {
+ accept?: string;
+};
+
+export const useTus = ({ accept }: TusProps = {}) => {
+ const alert = useAlertStore((state) => state.setMessage);
const { attachmentFileCode, setAttachmentFileCode } = useAttachmentStore(
(state) => state,
);
@@ -13,6 +19,7 @@ export const useTus = () => {
const [upload, setUpload] = useState(null);
const [response, setResponse] = useState(null);
const [progress, setProgress] = useState(0);
+ const [isValid, setIsValid] = useState(false);
const metadata = {
filename: file?.name ?? "",
@@ -20,6 +27,23 @@ export const useTus = () => {
atflCd: attachmentFileCode,
};
+ const validFileType = (file: File) => {
+ const allowedExtensions = accept?.split(",") ?? [];
+ const fileName = file.name;
+ const fileExtension = fileName
+ .substring(fileName.lastIndexOf("."))
+ .toLowerCase();
+
+ if (!allowedExtensions.includes(fileExtension)) {
+ alert("파일 형식이 올바르지 않습니다.");
+ setIsValid(false);
+ return false;
+ }
+
+ setIsValid(true);
+ return true;
+ };
+
const createUpload = () => {
return new Upload(file!, {
endpoint: `${ENDPOINT.ATTACH_SERVICE.TUS_UPLOAD}`,
@@ -48,6 +72,7 @@ export const useTus = () => {
useEffect(() => {
if (!file) return;
+ if (!validFileType(file)) return;
const upload = createUpload();
upload.start();
@@ -59,6 +84,7 @@ export const useTus = () => {
upload,
response,
progress,
+ isValid,
setFile,
};
};