Bugfix 포스트수정 오류 수정

src/app/api/v1/image/uploadFile/route.js

@@ -12,10 +12,10 @@ const s3Data = new S3({
 
 const bucketName = process.env.AWS_S3_BUCKET_NAME;
 
-function GET(request) {
-  const { file: fileName, fileType } = request.query;
+async function GET(request) {
+  try {
+    const { file: fileName, fileType } = request.query;
 
-  return new Promise((resolve) => {
     const s3Params = {
       Bucket: bucketName,
       Key: fileName,
@@ -24,22 +24,28 @@ function GET(request) {
       ACL: 'public-read',
     };
 
-    s3Data.getSignedUrl('putObject', s3Params, (err, data) => {
-      if (err) {
-        throw createError(
-          ERRORS.SIGNED_URL_CREATION_ERROR.STATUS_CODE,
-          ERRORS.SIGNED_URL_CREATION_ERROR.MESSAGE,
-        );
-      }
+    const signedUrl = await new Promise((resolve, reject) => {
+      s3Data.getSignedUrl('putObject', s3Params, (err, data) => {
+        if (err) {
+          reject(
+            createError(
+              ERRORS.SIGNED_URL_CREATION_ERROR.STATUS_CODE,
+              ERRORS.SIGNED_URL_CREATION_ERROR.MESSAGE,
+            ),
+          );
+        } else {
+          resolve(data);
+        }
+      });
+    });
 
-      resolve(
-        NextResponse.json({
-          signedRequest: data,
-          url: `https://${bucketName}.s3.amazonaws.com/${fileName}`,
-        }),
-      );
+    return NextResponse.json({
+      signedRequest: signedUrl,
+      url: `https://${bucketName}.s3.amazonaws.com/${fileName}`,
     });
-  });
+  } catch (error) {
+    return sendErrorResponse(error);
+  }
 }
 
 async function POST(request) {
@@ -48,17 +54,31 @@ async function POST(request) {
     const file = formData.get('image');
 
     if (!file) {
-      throw new Error('요청에서 파일을 찾을 수 없습니다.');
+      throw createError(
+        ERRORS.FILE_NOT_FOUND.STATUS_CODE,
+        ERRORS.FILE_NOT_FOUND.MESSAGE,
+      );
     }
 
     const fileName = file.name;
+    const fileType = file.type;
     const fileStream = file.stream();
     let fileBuffer = Buffer.alloc(0);
 
     for await (const chunk of fileStream) {
       fileBuffer = Buffer.concat([fileBuffer, chunk]);
     }
 
+    const s3Params = {
+      Bucket: bucketName,
+      Key: fileName,
+      Body: fileBuffer,
+      ContentType: fileType,
+      ACL: 'public-read',
+    };
+
+    await s3Data.putObject(s3Params);
+
     const fileUrl = `https://${bucketName}.s3.amazonaws.com/${fileName}`;
 
     return NextResponse.json({

src/app/post/editor/[userId]/page.jsx

@@ -13,7 +13,7 @@ function PostEditPage({ params }) {
   const [content, setContent] = useState({});
   const [error, setError] = useState(null);
 
-  const userId = params[0];
+  const userId = Array.isArray(params) ? params[0] : params.userId;
   const postId = params[1] || null;
 
   const isModify = Boolean(postId);

src/components/Editor.jsx

@@ -11,30 +11,32 @@ function Editor({ author, postId, title, content, error, setError, isModify }) {
   const router = useRouter();
 
   useEffect(() => {
-    const editor = new EditorJS({
-      holder: 'editorjs',
-      data: content,
-      tools: {
-        image: {
-          class: ImageTool,
-          config: {
-            endpoints: {
-              byFile: 'http://localhost:3000/api/v1/image/uploadFile',
+    const initEditor = async () => {
+      if (ref.current) {
+        await ref.current.isReady;
+        ref.current.render(content);
+        return;
+      }
+
+      ref.current = new EditorJS({
+        holder: 'editorjs',
+        data: content,
+        tools: {
+          image: {
+            class: ImageTool,
+            config: {
+              endpoints: {
+                byFile: 'http://localhost:3000/api/v1/image/uploadFile',
+              },
+              types: 'image/*',
+              captionPlaceholder: 'Enter caption',
             },
-            types: 'image/*',
-            captionPlaceholder: 'Enter caption',
           },
         },
-      },
-    });
-
-    ref.current = editor;
-
-    return () => {
-      if (ref.current) {
-        ref.current.destroy();
-      }
+      });
     };
+
+    initEditor();
   }, [content]);
 
   const postSave = async () => {
@@ -52,13 +54,15 @@ function Editor({ author, postId, title, content, error, setError, isModify }) {
     };
 
     try {
-      if (isModify) {
-        await axios.put(`/api/v1/posts/${postId}`, postData);
-        router.push(`/posts/${author}`);
+      const response = isModify
+        ? await axios.put(`/api/v1/posts/${postId}`, postData)
+        : await axios.post('/api/v1/posts', postData);
+
+      if (response.data.status !== 'success') {
+        setError(response.data.message);
         return;
       }
 
-      await axios.post('/api/v1/posts', postData);
       router.push(`/posts/${author}`);
     } catch {
       const errorMessage = isModify

src/components/postlist/PostItem.jsx

@@ -14,7 +14,7 @@ function PostItem({ post }) {
   return (
     <div className='w-56 h-56 flex flex-col items-center justify-center bg-slate-300'>
       {imageUrl ? (
-        <div className='h-4/5'>
+        <div className='h-4/5 w-56 h-56 overflow-hidden relative'>
           <Image src={imageUrl} alt={textValue} width={224} height={224} />
         </div>
       ) : (

utils/errors.js

@@ -38,6 +38,11 @@ const SIGNED_URL_CREATION_ERROR = {
   MESSAGE: 'signed URL 생성 오류입니다.',
 };
 
+const FILE_NOT_FOUND = {
+  STATUS_CODE: 400, // 예: 400은 잘못된 요청을 나타냅니다.
+  MESSAGE: '요청에서 파일을 찾을 수 없습니다.',
+};
+
 export const ERRORS = {
   INVALID_USER_ID,
   USER_NOT_FOUND,
@@ -47,4 +52,5 @@ export const ERRORS = {
   MISSING_PARAMETERS,
   POST_NOT_FOUND,
   SIGNED_URL_CREATION_ERROR,
+  FILE_NOT_FOUND,
 };