222

.gitignore

@@ -17,3 +17,4 @@ dist
 
 # env
 .env*
+.qodo

apps/cs/.env.local

@@ -1,2 +1,2 @@
 NEXT_PUBLIC_PORT=3000
-NEXT_PUBLIC_SERVER_API_URL=http://192.168.0.102:8000
+NEXT_PUBLIC_SERVER_API_URL=http://localhost:8000

apps/cs/src/pages/image/ui/image-page.tsx

@@ -11,8 +11,12 @@ function ImagePage() {
     const file = e.target.files?.item(0);
     if (!file) return;
 
+    //const p_atflCd = store.getState().upload.atflCd; // Redux 스토어에서 atflCd 가져오기 
+
+
     const upload = new Upload(file, {
       endpoint: `${ENDPOINT.ATTACH_SERVICE.TUS_UPLOAD}`,
+      chunkSize: 10 * 1024 * 1024, // 5MB chunk size
       headers: {
         [CLAIM_NAME]: getCookie(CLAIM_NAME) ?? "",
         [AUTH_USER_ID]: getCookie(AUTH_USER_ID) ?? "",
@@ -20,7 +24,8 @@ function ImagePage() {
       retryDelays: [0, 3000, 5000, 10000, 20000],
       metadata: {
         filename: file.name,
-        filetype: file.type,
+        filetype: file.type
+       // atflCd: p_atflCd,
       },
       onError: function (error) {
         console.log("Failed because: " + error);
@@ -35,6 +40,20 @@ function ImagePage() {
           (upload.file as File).name,
           upload.url,
         );
+        console.log("upload._req:", upload._req);
+        
+        if(upload._req){  
+            const xhr = upload._req._xhr;  // 업로드에 사용된 XMLHttpRequest 객체 
+            const xFileInfo = xhr.getResponseHeader('X-file-info'); // X-file-info 헤더 가져오기 
+            if (xFileInfo) {
+              const fileInfo = JSON.parse(xFileInfo); 
+              console.log('fileInfo :', fileInfo); 
+              const downloadUrl = `${ENDPOINT.ATTACH_SERVICE.TUS_DOWNLOAD}/${fileInfo.atflId}`;
+              console.log('Download URL:', downloadUrl); 
+             // store.dispatch(setAtflCd(fileInfo.atflCd)); // atflCd 저장
+            } 
+           
+        }           
       },
     });
 

apps/cs/src/pages/image/ui/image-page2.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { Upload } from "tus-js-client";
+import { FileUploader } from "@common/components/ui";
+import { PageLayout } from "@/shared/ui/page-layout";
+import { AUTH_USER_ID, CLAIM_NAME, ENDPOINT } from "@/shared/config";
+import { getCookie } from "@/shared/lib";
+
+function ImagePage() {
+  const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.item(0);
+    if (!file) return;
+
+    //const p_atflCd = store.getState().upload.atflCd; // Redux 스토어에서 atflCd 가져오기 
+
+
+    const upload = new Upload(file, {
+      endpoint: `${ENDPOINT.ATTACH_SERVICE.TUS_UPLOAD}`,
+      chunkSize: 10 * 1024 * 1024, // 5MB chunk size
+      headers: {
+        [CLAIM_NAME]: getCookie(CLAIM_NAME) ?? "",
+        [AUTH_USER_ID]: getCookie(AUTH_USER_ID) ?? "",
+      },
+      retryDelays: [0, 3000, 5000, 10000, 20000],
+      metadata: {
+        filename: file.name,
+        filetype: file.type
+       // atflCd: p_atflCd,
+      },
+      onError: function (error) {
+        console.log("Failed because: " + error);
+      },
+      onProgress: function (bytesUploaded, bytesTotal) {
+        const percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2);
+        console.log(bytesUploaded, bytesTotal, percentage + "%");
+      },
+      onSuccess: function () {
+        console.log(
+          "Download %s from %s",
+          (upload.file as File).name,
+          upload.url,
+        );
+        console.log("upload._req:", upload._req);
+        
+        if(upload._req){  
+            const xhr = upload._req._xhr;  // 업로드에 사용된 XMLHttpRequest 객체 
+            const xFileInfo = xhr.getResponseHeader('X-file-info'); // X-file-info 헤더 가져오기 
+            if (xFileInfo) {
+              const fileInfo = JSON.parse(xFileInfo); 
+              console.log('fileInfo :', fileInfo); 
+              const downloadUrl = `${ENDPOINT.ATTACH_SERVICE.TUS_DOWNLOAD}/${fileInfo.atflId}`;
+              console.log('Download URL:', downloadUrl); 
+             // store.dispatch(setAtflCd(fileInfo.atflCd)); // atflCd 저장
+            } 
+           
+        }           
+      },
+    });
+
+    upload.findPreviousUploads().then(function (previousUploads) {
+      if (previousUploads.length) {
+        upload.resumeFromPreviousUpload(previousUploads[0]!);
+      }
+      upload.start();
+    });
+  };
+
+  return (
+    <PageLayout>
+      <div className="card card-border">
+        <div className="card-header">
+          <h3 className="text-2xl font-medium text-label">이미지 목록</h3>
+        </div>
+        <FileUploader id="image-uploader" onUpload={handleUpload} />
+      </div>
+    </PageLayout>
+  );
+}
+
+export { ImagePage };