Merge pull request #149 from Leets-Official/fix/#147/QA-3차-반영

[Fix] #147 qa 3차 반영

package.json

@@ -20,6 +20,8 @@
   "dependencies": {
     "@nextui-org/react": "^2.2.9",
     "@types/react-paginate": "^7.1.4",
+    "@types/uuid": "^9.0.8",
+    "aws-sdk": "^2.1591.0",
     "axios": "^1.6.5",
     "cookie": "^0.6.0",
     "express": "^4.18.2",

src/app/_types/upload.ts

@@ -21,14 +21,13 @@ interface DndTextTypes {
   type: 'text' | 'image' | 'link' | 'sound';
   data: string;
   id: string;
-  url?: string;
 }
 
 interface DNDFileTypes {
   id: string;
   type: string;
   data: string;
-  url: string;
+  name?: string;
 }
 
 interface UserInfo {
@@ -78,7 +77,7 @@ interface ApplicationComplete {
 
 interface BlobImages {
   id: string;
-  blob: Blob;
+  imageFile: File;
   filename: string;
 }
 
@@ -94,4 +93,15 @@ interface SideNavItemProps {
   isEdit?: boolean;
   id?: string;
 }
+
+interface FileData {
+  fileName: string;
+  fileUrl: string;
+}
+
 type NavComponent = Record<string, JSX.Element>;
+
+interface UploadRequestBody {
+  articleRequest: UploadPFTypes;
+  fileRequests: FileData;
+}

src/app/api/upload/portfolio/route.ts

@@ -4,14 +4,14 @@ import { getCookie } from 'utils/cookieUtils';
 
 export async function POST(request: Request) {
   const accessToken = getCookie(request, 'accessToken');
+  console.log(accessToken);
+
+  const content = await request.json();
+  console.log(content, '로 넥스트 서버에서 요청');
+
   try {
-    const res = await request.formData();
-    const data = await uploadPortfolio(res, accessToken);
-    return new Response(JSON.stringify(res), {
-      headers: {
-        'Content-Type': 'multipart/form-data',
-      },
-    });
+    const data = await uploadPortfolio(content, accessToken);
+    return NextResponse.json(data);
   } catch (error) {
     return NextResponse.json({ error: 'Internal Server Error' });
   }

src/app/components/upload/both/AddThumbnail.tsx

@@ -5,7 +5,7 @@ import { addThumbnailIcon } from 'ui/IconsPath';
 import { image, imgAndVideo, thumbnail } from 'ui/upload/fileType';
 import UploadThumbnail from './modal/uploadFile/UploadThumbnail';
 import { useRecoilState } from 'recoil';
-import { uploadDataState } from 'recoil/upload';
+import { thumbnailState, uploadDataState } from 'recoil/upload';
 import Image from 'next/image';
 
 interface AddThumbnailProps {
@@ -17,18 +17,26 @@ const AddThumbnail = ({ thumbnailInfo }: AddThumbnailProps) => {
   const { isOpen, openModal, closeModal, handleModalClick } = useModal(false);
   const [uploadData, setUploadData] =
     useRecoilState<UploadPFTypes>(uploadDataState);
+  const [thumbnailData, setThumbnail] = useRecoilState<File | null>(
+    thumbnailState,
+  );
+  console.log('추가된 썸네일일', thumbnailData);
 
   return (
     <div className="w-full cursor-pointer" onClick={openModal}>
       <div
         className={`flex items-center justify-center ${height} gap-x-3 ${bgColor} text-white font-bold ${etcStyles}`}
       >
-        {uploadData.thumbnail ? (
+        {thumbnailData ? (
           <div className="flex flex-col text-lg gap-y-3">
             <div className="flex justify-around">
               <div>선택된 대표 사진</div>
             </div>
-            <Image src={uploadData.thumbnail} alt="Thumbnail" {...thumbnail} />
+            <Image
+              src={thumbnailData ? URL.createObjectURL(thumbnailData) : ''}
+              alt="Thumbnail"
+              {...thumbnail}
+            />
             <div className="flex gap-x-3 items-center justify-center">
               <Icons name={addThumbnailIcon} />
               <div>클릭 시 대표 사진 변경</div>