Merge pull request #150 from YAPP-Github/refactor/PRODUCT-271

refactor: 스토리 페이지 이미지 등록 방식 변경 (#149)

Author: wkdtnqls0506

src/app/(home)/_components/Story/StoryList/StoryList.css.ts

@@ -19,5 +19,6 @@ export const storyImageInner = style({
 export const storyImage = style({
   display: "block",
   borderRadius: radius.circle,
+  objectFit: "cover",
   cursor: "pointer",
 });

src/app/(home)/_components/Story/StoryList/StoryList.tsx

@@ -27,12 +27,11 @@ export const StoryList = () => {
         >
           <div className={styles.storyImageInner}>
             <Image
-              src={story.imageUrl}
+              src={story.images?.[0]?.url ?? ""}
               width={80}
               height={80}
               alt={`스토리 이미지 ${story.storyId}`}
               className={styles.storyImage}
-              objectFit='cover'
               // TODO: 추후 제거
               unoptimized
             />

src/app/(store)/stores/[storeId]/_components/StoreStories/StoreStories.tsx

@@ -68,7 +68,7 @@ const StoreStoriesContent = ({ kakaoId }: { kakaoId: string }) => {
           <Link href={`/story/${data.storyId}`} key={data.storyId}>
             <div className={styles.storyWrapper}>
               <Image
-                src={data.imageUrl}
+                src={data.images?.[0]?.url ?? ""}
                 alt='스토리 이미지'
                 className={styles.image}
                 width={124}

src/app/story/[id]/_api/detail.types.ts

@@ -1,11 +1,13 @@
+import type { ImageResponse } from "@/types";
+
 export type StoryDetailResponse = {
   storeKakaoId: string;
   category: string;
   storeName: string;
   storeDistrict: string;
   storeNeighborhood: string;
   description: string | null;
-  imageUrl: string;
+  images: ImageResponse[];
   memberId: number;
   memberNickname: string;
   storeId: number | null;

src/app/story/[id]/_components/StoryDetailContent/StoryDetailContent.tsx

@@ -90,7 +90,7 @@ export const StoryDetailContent = ({ storyId }: StoryDetailContentProps) => {
           onClick={handleNextStory}
         />
         <Image
-          src={story.imageUrl}
+          src={story.images?.[0]?.url ?? ""}
           alt={`${story.storeName} 스토리`}
           fill
           priority

src/app/story/_api/stories.types.ts

@@ -1,6 +1,8 @@
+import { type ImageResponse } from "@/types";
+
 export type Story = {
   storyId: number;
-  imageUrl: string;
+  images: ImageResponse[];
 };
 
 export type StoriesResponse = {
@@ -9,7 +11,7 @@ export type StoriesResponse = {
 
 export type StoryByKakaoId = {
   storyId: number;
-  imageUrl: string;
+  images: ImageResponse[];
   memberId: number;
   memberNickname: string;
 };

src/app/story/register/_api/register.api.ts

@@ -8,26 +8,15 @@ import {
 /**
  * 스토리 등록 API
  * @param {StoryRegisterRequest} storyRequest - 스토리 등록 요청 데이터
- * @param {File} imageFile - 업로드할 이미지 파일
  *
  * @returns {Promise<StoryRegisterResponse>} 등록된 스토리 ID 반환
  */
 export const postStory = async (
-  storyRequest: StoryRegisterRequest,
-  imageFile: File
+  storyRequest: StoryRegisterRequest
 ): Promise<StoryRegisterResponse> => {
-  const formData = new FormData();
-
-  formData.append(
-    "request",
-    new Blob([JSON.stringify(storyRequest)], { type: "application/json" })
-  );
-
-  formData.append("image", imageFile);
-
   return await authHttp
     .post("api/stories", {
-      body: formData,
+      json: storyRequest,
     })
     .json<StoryRegisterResponse>();
 };

src/app/story/register/_api/register.queries.ts

@@ -2,21 +2,12 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 import { storiesQueryKeys } from "../../_api";
 import { postStory } from "./register.api";
-import type { StoryRegisterRequest } from "./register.types";
 
 export const usePostStoryMutation = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: ({
-      storyRequest,
-      imageFile,
-    }: {
-      storyRequest: StoryRegisterRequest;
-      imageFile: File;
-    }) => {
-      return postStory(storyRequest, imageFile);
-    },
+    mutationFn: postStory,
     onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: storiesQueryKeys.lists(),

src/app/story/register/_api/register.types.ts

@@ -1,7 +1,10 @@
+import { type ImageRequest } from "@/types";
+
 export type StoryRegisterRequest = {
   storeKakaoId: string;
   storeName: string;
   description: string | null;
+  images: ImageRequest[];
 };
 
 export type StoryRegisterResponse = {

src/app/story/register/page.tsx

@@ -4,10 +4,12 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { FormProvider, useForm } from "react-hook-form";
 
+import { getPresignedUrl, uploadImageToS3 } from "@/app/_api/image/image.api";
 import CancelIcon from "@/assets/cancel.svg";
 import { GNB } from "@/components/ui/GNB";
 import { Spacer } from "@/components/ui/Spacer";
 import { VStack } from "@/components/ui/Stack";
+import { type ImageRequest } from "@/types/image.types";
 
 import { usePostStoryMutation } from "./_api";
 import { StoryDescription } from "./_components/StoryDescription";
@@ -39,25 +41,51 @@ export default function StoryRegisterPage() {
   });
 
   const onSubmit = async (data: StoryRegisterFormData) => {
-    postStory(
-      {
-        storyRequest: {
+    try {
+      let imageData: ImageRequest[] = [];
+
+      if (data.image) {
+        const { urls: presignedUrls } = await getPresignedUrl([
+          {
+            order: 0,
+            contentType: data.image.type,
+            fileSize: data.image.size,
+          },
+        ]);
+
+        const { url, key, order, contentType } = presignedUrls[0]!;
+        await uploadImageToS3(url, data.image);
+
+        imageData = [
+          {
+            imageKey: key,
+            orderIndex: order,
+            contentType,
+            fileSize: data.image.size,
+          },
+        ];
+      }
+
+      postStory(
+        {
           storeKakaoId: data.storeKakaoId,
           storeName: data.storeName,
           description: data.description || null,
+          images: imageData,
         },
-        imageFile: data.image,
-      },
-      {
-        onSuccess: response => {
-          clearUpload();
-          router.push(`/story/${response.storyId}`);
-        },
-        onError: error => {
-          console.error("스토리 등록 실패:", error);
-        },
-      }
-    );
+        {
+          onSuccess: response => {
+            clearUpload();
+            router.push(`/story/${response.storyId}`);
+          },
+          onError: error => {
+            console.error("스토리 등록 실패:", error);
+          },
+        }
+      );
+    } catch (error) {
+      console.error("이미지 업로드 실패:", error);
+    }
   };
 
   return (