[Fix] 워크스페이스 모달 이미지 업로드 QA

apps/client/src/page/workspaceSetting/component/WorkspaceDataSubmitButton/WorkspaceDataSubmitButton.tsx

@@ -56,7 +56,7 @@ const WorkspaceDataSubmitButton = ({
       infoMutation({
         body: {
           teamName: workspaceData.teamName,
-          teamUrl: workspaceData.teamIconUrl,
+          teamUrl: workspaceData.iconImageUrl,
         },
         params: {
           path: {

apps/client/src/page/workspaceSetting/hook/useWorkspaceData.ts

@@ -13,7 +13,7 @@ export const useWorkspaceData = () => {
     position: 'EXECUTIVE',
     teamName: '',
     university: '건국대학교',
-    teamIconUrl: '',
+    iconImageUrl: '',
   } as MemberType & Omit<TeamType, 'namingUpdatedAt'>);
 
   const [initialWorkspaceData, setInitialWorkspaceData] = useState<
@@ -44,7 +44,7 @@ export const useWorkspaceData = () => {
         position: positionData.data?.position ?? 'EXECUTIVE',
         teamName: teamData.data?.teamName ?? '',
         university: teamData.data?.university ?? '건국대학교',
-        teamIconUrl: teamData.data?.teamIconUrl ?? '',
+        iconImageUrl: teamData.data?.iconImageUrl ?? '',
       });
     }
   }, [positionData, teamData, initialWorkspaceData]);
@@ -64,7 +64,7 @@ export const useWorkspaceData = () => {
       setWorkspaceData((prev) => ({
         ...prev,
         teamName: teamData?.data?.teamName ?? '',
-        teamIconUrl: teamData?.data?.teamIconUrl ?? '',
+        teamIconUrl: teamData?.data?.iconImageUrl ?? '',
       }));
     }
   }, [teamData]);

apps/client/src/page/workspaceSetting/index.tsx

@@ -46,7 +46,7 @@ const WorkspaceSettingPage = () => {
             />
 
             <TeamProfileSetting
-              teamIconUrl={workspaceData.teamIconUrl}
+              teamIconUrl={workspaceData.iconImageUrl}
               teamName={workspaceData.teamName}
               onWorkspaceDataChange={handleWorkspaceDataChange}
             />

apps/client/src/shared/api/external/index.ts

@@ -2,6 +2,8 @@ import mime from 'mime';
 
 import axios from 'axios';
 
+import { getFileKey } from '@/shared/util/file';
+
 export const putUploadToS3 = async (presignedUrl: string, file: File) => {
   const contentType = mime.getType(file.name) || 'application/octet-stream';
 
@@ -15,6 +17,6 @@ export const putUploadToS3 = async (presignedUrl: string, file: File) => {
     // Presigned URL에서 쿼리 문자열을 제거하여 파일 URL을 생성
     const uploadedFileUrl = presignedUrl.split('?')[0];
 
-    return uploadedFileUrl;
+    return getFileKey(uploadedFileUrl);
   }
 };

apps/client/src/shared/api/file/type.ts

@@ -1,3 +1,3 @@
 export interface DeleteFile {
-  fileName: string;
+  fileKey: string;
 }

apps/client/src/shared/api/file/upload/index.ts

@@ -1,10 +1,14 @@
+import { paths } from '@/shared/__generated__/schema';
 import { axiosInstance } from '@/shared/api/instance';
 
+type ImageFile = paths['/api/v1/file/upload']['get']['responses']['200']['content']['*/*'];
+
 export const getFile = async (fileFormat: string) => {
-  const response = await axiosInstance.get('/file/upload', {
+  const response = await axiosInstance.get<ImageFile>('/file/upload', {
     params: {
       fileFormat: fileFormat,
     },
   });
+
   return response.data.data;
 };

apps/client/src/shared/component/Modal/Footer/ModalFooter.tsx

@@ -52,10 +52,13 @@ const ModalFooterButtons = (
 
   switch (type) {
     case 'create-workspace':
-      return [
-        step >= 3 ? createButton('건너뛰기', onClick, 'outline') : null,
-        createButton(step === 5 ? '확인' : '다음으로', onClick, 'primary', disabled),
-      ].filter(Boolean) as FooterButton[];
+      if (step === 1) {
+        return [createButton('다음', onClick, 'primary', disabled)];
+      }
+      if (step === 2 || step === 3) {
+        return [createButton('이전', onPrev, 'outline'), createButton('다음', onClick, 'primary', disabled)];
+      }
+      return [createButton('확인', onClick, 'primary')];
 
     case 'create-block':
       if (step === 1) {

apps/client/src/shared/component/NewFileUploadModal/NewFileUploadModal.tsx

@@ -64,7 +64,6 @@ const NewFileUploadModal = ({
             documents: [
               {
                 fileName: file.name,
-                fileUrl: fileUrls[file.name] || '',
                 fileKey: getFileKey(fileUrls[file.name]),
                 capacity: file.size,
               },

apps/client/src/shared/component/WorkSpaceModal/category/WorkSpaceCategory.tsx

@@ -12,7 +12,7 @@ type Category = components['schemas']['TeamCreateRequest']['category'];
 
 const WorkSpaceCategory = () => {
   const { setFormData } = useWorkSpaceContext();
-  const { nextStep } = useFunnel();
+  const { prevStep, nextStep } = useFunnel();
 
   const [selected, setSelected] = useState('');
 
@@ -49,7 +49,7 @@ const WorkSpaceCategory = () => {
           className="select-container"
         />
       </Modal.Body>
-      <Modal.Footer step={2} type="create-workspace" onClick={handleNext} disabled={isDisabled} />
+      <Modal.Footer step={2} type="create-workspace" onClick={handleNext} onPrev={prevStep} disabled={isDisabled} />
     </>
   );
 };

apps/client/src/shared/component/WorkSpaceModal/complete/WorkSpaceComplete.tsx

@@ -1,19 +1,17 @@
 import { useQueryClient } from '@tanstack/react-query';
 
-import completePng from '@/common/asset/img/workspace_complete.png';
-import complete from '@/common/asset/img/workspace_complete.webp';
-
 import { $api } from '@/shared/api/client';
 import { Modal } from '@/shared/component/Modal';
+import { IMAGE_PLACEHOLDER } from '@/shared/constant';
 import { useWorkSpaceContext } from '@/shared/hook/common/useWorkSpaceContext';
 import { useCloseModal } from '@/shared/store/modal';
 
 const WorkSpaceComplete = () => {
-  const queryClient = useQueryClient();
-
   const closeModal = useCloseModal();
 
   const { formData } = useWorkSpaceContext();
+
+  const queryClient = useQueryClient();
   const { mutate: postTeamMutate } = $api.useMutation('post', '/api/v1/teams');
 
   const handleSave = () => {
@@ -22,14 +20,12 @@ const WorkSpaceComplete = () => {
         body: {
           name: formData.name,
           category: formData.category,
-          iconImageUrl: formData.fileUrlData,
+          iconImageKey: formData.fileKey,
         },
       },
       {
         onSuccess: () => {
-          queryClient.invalidateQueries({
-            queryKey: ['get', '/api/v1/members/teams'],
-          });
+          queryClient.invalidateQueries({ queryKey: ['get', '/api/v1/members/teams'] });
 
           closeModal();
         },
@@ -42,17 +38,15 @@ const WorkSpaceComplete = () => {
       <Modal.Header step={4} totalSteps={4} />
       <Modal.Body>
         <div css={{ width: '100%', paddingTop: '2rem' }}>
-          <picture>
-            <source srcSet={complete} />
-            <img
-              css={{ width: '30rem', height: '30rem', objectFit: 'cover' }}
-              src={completePng}
-              alt="워크 스페이스 생성 완료"
-            />
-          </picture>
+          <img
+            css={{ width: '33.6rem', height: '33.8rem', objectFit: 'cover' }}
+            src={formData.fileUrl}
+            onError={(e) => (e.currentTarget.src = IMAGE_PLACEHOLDER)}
+            alt="워크 스페이스 생성 완료"
+          />
         </div>
       </Modal.Body>
-      <Modal.Footer step={1} type="create-workspace" onClick={handleSave} disabled={false} />
+      <Modal.Footer step={4} type="create-workspace" onClick={handleSave} disabled={false} />
     </>
   );
 };

apps/client/src/shared/component/WorkSpaceModal/hook/common/useImageUpload.tsx

@@ -3,73 +3,76 @@ import { useRef, useState } from 'react';
 import { $api } from '@/shared/api/client';
 import { usePutUploadMutation } from '@/shared/component/TimeBlockModal/hook/api/usePutUploadMutation';
 import { useWorkSpaceContext } from '@/shared/hook/common/useWorkSpaceContext';
-import { extractFileExtension, getFileKey } from '@/shared/util/file';
+import { extractFileExtension } from '@/shared/util/file';
 
 const useImageUpload = () => {
-  const [fileURL, setFileURL] = useState<string>('');
-  const imgUploadInput = useRef<HTMLInputElement | null>(null);
+  const [fileURL, setFileURL] = useState('');
   const [file, setFile] = useState<File | null>(null);
 
+  const imgUploadInput = useRef<HTMLInputElement | null>(null);
   const fileExtension = file ? extractFileExtension(file.name) : '';
 
   const { mutate: uploadToS3Mutate } = usePutUploadMutation();
   const { mutate: deleteFileMutate } = $api.useMutation('post', '/api/v1/file');
-  const { data: fileData, refetch: refetchFileData } = $api.useQuery('get', '/api/v1/file/upload', {
-    params: { query: { fileFormat: fileExtension }, options: { enabled: !!file } },
+  const { data: fileData } = $api.useQuery('get', '/api/v1/file/upload', {
+    params: { query: { fileFormat: fileExtension } },
   });
 
   const { setFormData } = useWorkSpaceContext();
 
-  const handleFileUpload = (selectedFile: File, presignedUrl: string) => {
-    const newFileURL = URL.createObjectURL(selectedFile);
+  const handleFileUpload = (fileData: File, presignedUrl: string) => {
+    const newFileURL = URL.createObjectURL(fileData);
     setFileURL(newFileURL);
+
     uploadToS3Mutate(
-      { presignedUrl, file: selectedFile },
+      { presignedUrl, file: fileData },
       {
-        onSuccess: (uploadedFileUrl) => {
-          URL.revokeObjectURL(newFileURL);
-          if (uploadedFileUrl) {
-            setFileURL(uploadedFileUrl);
-            setFormData({ fileUrlData: uploadedFileUrl });
+        onSuccess: (response) => {
+          if (response) {
+            setFormData({ fileKey: response });
           }
+          URL.revokeObjectURL(newFileURL);
+        },
+        onError: (error) => {
+          console.error(error);
+          setFormData({ fileKey: '' });
         },
       }
     );
   };
 
   const handleImageChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
     const selectedFile = event.target.files?.[0];
-    if (selectedFile) {
-      setFileURL(URL.createObjectURL(selectedFile));
-      setFile(selectedFile);
-      setFormData({ fileUrlData: '' });
-
-      const { data } = await refetchFileData();
-      if (data?.data?.url) {
-        handleFileUpload(selectedFile, data.data.url);
-      }
+    if (!selectedFile) return;
+
+    setFile(selectedFile);
+    setFileURL(URL.createObjectURL(selectedFile));
+    setFormData({ fileKey: '', fileUrl: fileData?.data?.url });
+
+    if (fileData?.data?.url) {
+      handleFileUpload(selectedFile, fileData?.data?.url);
     }
   };
 
   const handleImageRemove = () => {
-    if (fileData?.data?.fileName) {
-      deleteFileMutate(
-        {
-          body: { fileKey: getFileKey(fileURL) },
+    if (!fileData?.data?.fileKey) return;
+
+    deleteFileMutate(
+      { body: { fileKey: fileData.data.fileKey } },
+      {
+        onSuccess: () => {
+          URL.revokeObjectURL(fileURL);
+
+          setFileURL('');
+          setFile(null);
+          setFormData({ fileKey: '', fileUrl: '' });
+
+          if (imgUploadInput.current) {
+            imgUploadInput.current.value = '';
+          }
         },
-        {
-          onSuccess: () => {
-            URL.revokeObjectURL(fileURL);
-            setFileURL('');
-            setFile(null);
-            setFormData({ fileUrlData: '' });
-            if (imgUploadInput.current) {
-              imgUploadInput.current.value = '';
-            }
-          },
-        }
-      );
-    }
+      }
+    );
   };
 
   return {