Merge pull request #46 from ShipFriend0516/feature/image-upload

[Feature] 이미지 업로드 기능 구현

Author: ShipFriend0516

app/api/upload/route.ts

@@ -0,0 +1,48 @@
+import { handleUpload, type HandleUploadBody } from '@vercel/blob/client';
+import { NextResponse } from 'next/server';
+
+export async function POST(request: Request): Promise<NextResponse> {
+  const body = (await request.json()) as HandleUploadBody;
+
+  try {
+    const jsonResponse = await handleUpload({
+      body,
+      request,
+      onBeforeGenerateToken: async (
+        pathname
+        /* clientPayload */
+      ) => {
+        return {
+          allowedContentTypes: ['image/jpeg', 'image/png', 'image/gif'],
+          tokenPayload: JSON.stringify({
+            // optional, sent to your server on upload completion
+            // you could pass a user id from auth, or a value from clientPayload
+          }),
+        };
+      },
+      onUploadCompleted: async ({ blob, tokenPayload }) => {
+        // Get notified of client upload completion
+        // ⚠️ This will not work on `localhost` websites,
+        // Use ngrok or similar to get the full upload flow
+
+        console.log('blob upload completed', blob, tokenPayload);
+
+        try {
+          // Run any logic after the file upload completed
+          // const { userId } = JSON.parse(tokenPayload);
+          // await db.update({ avatar: blob.url, userId });
+          return;
+        } catch (error) {
+          throw new Error('Could not update user');
+        }
+      },
+    });
+
+    return NextResponse.json(jsonResponse);
+  } catch (error) {
+    return NextResponse.json(
+      { error: (error as Error).message },
+      { status: 400 } // The webhook will retry 5 times waiting for a 200
+    );
+  }
+}

app/entities/post/write/BlogForm.tsx

@@ -17,7 +17,7 @@ import Overlay from '@/app/entities/common/Overlay/Overlay';
 import { FaPlus } from 'react-icons/fa6';
 import CreateSeriesOverlayContainer from '@/app/entities/series/CreateSeriesOverlayContainer';
 import { getAllSeriesData } from '@/app/entities/series/api/series';
-import LoadingIndicator from '@/app/entities/common/Loading/LoadingIndicator';
+import UploadImageContainer from '@/app/entities/post/write/UploadImageContainer';
 
 const MDEditor = dynamic(() => import('@uiw/react-md-editor'), { ssr: false });
 
@@ -135,6 +135,11 @@ const BlogForm = () => {
     }
   };
 
+  const handleLinkCopy = (image: string) => {
+    navigator.clipboard.writeText(image);
+    toast.success('이미지 링크가 복사되었습니다.');
+  };
+
   return (
     <div className={'px-16'}>
       <input
@@ -193,6 +198,7 @@ const BlogForm = () => {
         height={500}
         visibleDragbar={false}
       />
+      <UploadImageContainer onClick={handleLinkCopy} />
       {errors && (
         <div className={'mt-2'}>
           {errors.slice(0, 3).map((error, index) => (

app/entities/post/write/UploadImageContainer.tsx

@@ -0,0 +1,80 @@
+'use client';
+import UploadedImage from '@/app/entities/post/write/UploadedImage';
+import { FaImage } from 'react-icons/fa';
+import { upload } from '@vercel/blob/client';
+import { ChangeEvent, useState } from 'react';
+
+interface UploadImageContainerProps {
+  onClick: (link: string) => void;
+}
+const UploadImageContainer = ({ onClick }: UploadImageContainerProps) => {
+  const [uploadedImages, setUploadedImages] = useState<string[]>([]);
+  const uploadToBlob = async (event: ChangeEvent) => {
+    try {
+      event.preventDefault();
+      const target = event.target as HTMLInputElement;
+      if (!target.files) {
+        throw new Error('이미지가 선택되지 않았습니다.');
+      }
+
+      const file = target.files[0];
+
+      const timestamp = new Date().getTime();
+      const pathname = `/images/${timestamp}-${file.name}`;
+      const newBlob = await upload(pathname, file, {
+        access: 'public',
+        handleUploadUrl: '/api/upload',
+      });
+
+      setUploadedImages([...uploadedImages, newBlob.url]);
+      return;
+    } catch (error) {
+      console.error('업로드 실패:', error);
+      throw error;
+    }
+  };
+
+  return (
+    <div className={'w-full mt-4'}>
+      <div className={'flex justify-between my-1'}>
+        <div>
+          <span className={'text-xl font-bold'}>업로드된 이미지</span>
+          <p>클릭하여 링크 복사</p>
+        </div>
+        <div
+          className={
+            'cursor-pointer relative w-12 h-12 bg-emerald-500  rounded-md overflow-hidden'
+          }
+        >
+          <FaImage
+            className={
+              'absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 pointer-events-none'
+            }
+          />
+          <input
+            type={'file'}
+            multiple={true}
+            placeholder={'이미지 업로드'}
+            onChange={uploadToBlob}
+            className={
+              'w-full h-full file:hidden text-transparent  px-2 hover:bg-emerald-600'
+            }
+            accept={'image/*'}
+          ></input>
+        </div>
+      </div>
+
+      <ul
+        className={
+          'w-full border-t border-b px-4 py-4 bg-gray-100 whitespace-nowrap space-x-4 overflow-x-scroll gap-2'
+        }
+      >
+        {uploadedImages.map((image, index) => (
+          <UploadedImage key={index} onClick={onClick} image={image} />
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default UploadImageContainer;

app/entities/post/write/UploadedImage.tsx

@@ -0,0 +1,34 @@
+import Image from 'next/image';
+
+interface UploadedImageProps {
+  onClick: (link: string) => void;
+  image: string;
+}
+
+const UploadedImage = ({ onClick, image }: UploadedImageProps) => {
+  return (
+    <li
+      className={
+        'relative rounded-md overflow-hidden w-1/3  aspect-video inline-block hover:opacity-80 cursor-pointer hover:shadow-lg group'
+      }
+      onClick={() => onClick(image)}
+    >
+      <p
+        className={
+          ' z-10 absolute opacity-0 group-hover:opacity-100 top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 text-xl font-bold text-black'
+        }
+      >
+        링크 복사
+      </p>
+      <Image
+        className={'group object-cover'}
+        src={image}
+        alt={'이미지'}
+        fill={true}
+        sizes={'400'}
+      />
+    </li>
+  );
+};
+
+export default UploadedImage;

app/globals.css

@@ -89,6 +89,16 @@ article.post .post-body {
   line-height: 150%;
 }
 
+article.post .post-body p:has(img) {
+text-align: center;
+}
+
+article.post .post-body img {
+  max-width: 100%;
+  height: auto;
+  margin: 1em 0;
+}
+
 article.post h3 {
   font-size: 1.25rem;
   font-weight: bold;
@@ -139,3 +149,25 @@ section.footer .disabled {
   transition-delay: unset;
   transition-timing-function: ease-in-out;
 }
+
+/* HR Style */
+article.post .post-body hr {
+  border: 0px solid;
+  height: 1px;
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 100, 0, 0.75), rgba(0, 0, 0, 0));
+  margin: 32px 0px;
+  display: block;
+}
+
+article.post .post-body hr::before {
+  position: absolute;
+  background-color: #efefef;
+  border: 10px solid #006400;
+  border-top: 10px solid transparent;
+  border-radius: 2px;
+  padding: 0px;
+  transform: rotate(180deg);
+  left: 50%;
+  margin: -5px 0px 0px -21px;
+  content: "";
+}