[apps/cs] feat: useTus 훅에 파일 확장자 검증 로직 추가 (CS_UT01030102)

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={
                               <>
                                 <Label htmlFor="atflCd">
-                                  <div className="relative h-[27rem] w-[48rem] overflow-hidden rounded-sm border border-border bg-accent">
-                                    <div className="relative h-full w-full">
-                                      {imageUrl && (
-                                        <Image
-                                          src={imageUrl}
-                                          className="object-contain"
-                                          fill
-                                          alt="업로드된 이미지"
+                                  <div className="h-[27rem] w-[48rem] overflow-hidden rounded-sm border border-border bg-accent">
+                                    {isValid && (
+                                      <div className="relative size-full">
+                                        {imageUrl && (
+                                          <Image
+                                            src={imageUrl}
+                                            className="object-contain"
+                                            fill
+                                            alt="업로드된 이미지"
+                                          />
+                                        )}
+                                        <p className="absolute bottom-3 left-0 z-10 p-2 text-base leading-none">
+                                          {uploadFile?.name}
+                                        </p>
+                                        <Progress
+                                          value={progress}
+                                          className="absolute bottom-0 left-0 z-10"
                                         />
-                                      )}
-                                    </div>
-                                    <p className="absolute bottom-3 left-0 z-10 p-2 text-base leading-none">
-                                      {uploadFile?.name}
-                                    </p>
-                                    <Progress
-                                      value={progress}
-                                      className="absolute bottom-0 left-0 z-10"
-                                    />
+                                      </div>
+                                    )}
                                   </div>
                                 </Label>
                                 <div className="mb-2 text-lg font-medium text-label">

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<Upload | null>(null);
   const [response, setResponse] = useState<HttpResponse | null>(null);
   const [progress, setProgress] = useState<number>(0);
+  const [isValid, setIsValid] = useState<boolean>(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,
   };
 };