feat: 새 글 작성 API 연동

src/api/feeds/createFeed.ts

@@ -0,0 +1,55 @@
+import { apiClient } from '../index';
+
+/** 서버에 보낼 request JSON 페이로드 */
+export interface CreateFeedBody {
+  isbn: string;
+  contentBody: string;
+  isPublic: boolean;
+  tagList?: string[];
+}
+
+/** 성공 응답 */
+export interface CreateFeedSuccess {
+  isSuccess: true;
+  code: number;
+  message: string;
+  data: {
+    feedId: number;
+  };
+}
+
+/** 실패 응답 */
+export interface CreateFeedFail {
+  isSuccess: false;
+  code: number;
+  message: string;
+}
+
+export type CreateFeedResponse = CreateFeedSuccess | CreateFeedFail;
+
+/**
+ * 피드 작성 API
+ * - multipart/form-data
+ *   - request: application/json (Blob로 감싸 전송)
+ *   - images: File[] (선택값, 없으면 미첨부)
+ */
+export const createFeed = async (
+  body: CreateFeedBody,
+  images?: File[],
+): Promise<CreateFeedResponse> => {
+  const form = new FormData();
+
+  // request 파트(JSON) - 필수
+  form.append('request', new Blob([JSON.stringify(body)], { type: 'application/json' }));
+
+  // images 파트들 - 선택
+  if (images && images.length > 0) {
+    images.forEach(file => form.append('images', file));
+  }
+
+  const { data } = await apiClient.post<CreateFeedResponse>('/feeds', form, {
+    headers: { 'Content-Type': 'multipart/form-data' },
+  });
+
+  return data;
+};

src/api/feeds/getFeedDetail.ts

@@ -13,7 +13,7 @@ export interface FeedDetailData {
   bookTitle: string;
   bookAuthor: string;
   contentBody: string;
-  contentsUrl: string[];
+  contentUrls: string[];
   likeCount: number;
   commentCount: number;
   isSaved: boolean;
@@ -23,7 +23,7 @@ export interface FeedDetailData {
 
 // API 응답 타입
 export interface FeedDetailResponse {
-  success: boolean;
+  isSuccess: boolean;
   code: number;
   message: string;
   data: FeedDetailData;

src/api/feeds/getMyFeed.ts

@@ -10,7 +10,7 @@ export interface MyFeedData {
 
 // API 응답 타입
 export interface MyFeedResponse {
-  success: boolean;
+  isSuccess: boolean;
   code: number;
   message: string;
   data: MyFeedData;

src/api/feeds/getOtherFeed.ts

@@ -8,7 +8,7 @@ export interface OtherFeedItem {
   bookTitle: string;
   bookAuthor: string;
   contentBody: string;
-  contentsUrl: string[];
+  contentUrls: string[];
   likeCount: number;
   commentCount: number;
   isSaved: boolean;
@@ -21,7 +21,7 @@ export interface OtherFeedData {
 
 // API 응답 타입
 export interface OtherFeedResponse {
-  success: boolean;
+  isSuccess: boolean;
   code: number;
   message: string;
   data: OtherFeedData;

src/api/feeds/getTotalFeed.ts

@@ -10,7 +10,7 @@ export interface TotalFeedData {
 
 // API 응답 타입
 export interface TotalFeedResponse {
-  success: boolean;
+  isSuccess: boolean;
   code: number;
   message: string;
   data: TotalFeedData;

src/api/images/uploadImage.ts

@@ -0,0 +1,128 @@
+import { apiClient } from '../index';
+
+/** 단일 이미지 업로드 성공 시 데이터 */
+export interface UploadImageData {
+  imageUrl: string;
+}
+
+/** 서버 공통 응답 타입 */
+export interface UploadImageResponse {
+  isSuccess: boolean;
+  code: number;
+  message: string;
+  data?: UploadImageData; // 성공 시에만 존재
+}
+
+/** 내부 유틸: 허용 확장자 */
+const IMAGE_EXT_REGEX = /\.(jpe?g|png|gif)$/i;
+/** 가이드 최대 업로드 개수 (서버는 FEED 생성 시 최대 3장 제약) */
+export const MAX_IMAGES = 3;
+
+/** 파일 사전 검증: 빈 파일 / 확장자 */
+function validateFile(file: File) {
+  if (!file || file.size === 0) {
+    // 서버 코드 170001과 의미 일치
+    throw new Error('업로드하려는 이미지가 비어있습니다.');
+  }
+  if (!IMAGE_EXT_REGEX.test(file.name)) {
+    // 서버 코드 170003과 의미 일치
+    throw new Error('파일 형식은 jpg, jpeg, png, gif만 가능합니다.');
+  }
+}
+
+/** 단일 이미지 업로드 */
+export const uploadImage = async (
+  file: File,
+  options?: { signal?: AbortSignal },
+): Promise<UploadImageResponse> => {
+  // 사전 검증
+  validateFile(file);
+
+  const formData = new FormData();
+  // 서버가 단일 업로드에서 기대하는 필드명이 image라면 유지
+  formData.append('image', file);
+
+  const { data } = await apiClient.post<UploadImageResponse>('/images/upload', formData, {
+    headers: { 'Content-Type': 'multipart/form-data' },
+    signal: options?.signal,
+  });
+
+  return data;
+};
+
+/**
+ * 다중 이미지 업로드
+ * - 전부 성공하면 URL 배열 반환
+ * - 하나라도 실패하면 실패 내역을 포함해 throw
+ */
+export const uploadMultipleImages = async (
+  files: File[],
+  options?: { signal?: AbortSignal; enforceMax?: boolean },
+): Promise<string[]> => {
+  // 개수 제한(선택) – FEED 생성 정책에 맞춰 사전 차단하고 싶을 때 사용
+  if (options?.enforceMax && files.length > MAX_IMAGES) {
+    throw new Error(`이미지는 최대 ${MAX_IMAGES}장까지 업로드할 수 있습니다.`);
+  }
+
+  // 파일별 사전 검증
+  files.forEach(validateFile);
+
+  // 병렬 업로드 (각 요청 독립)
+  const results = await Promise.allSettled(
+    files.map(file => uploadImage(file, { signal: options?.signal })),
+  );
+
+  const successUrls: string[] = [];
+  const failures: { index: number; reason: string }[] = [];
+
+  results.forEach((res, idx) => {
+    if (res.status === 'fulfilled') {
+      const value = res.value;
+      if (value.isSuccess && value.data?.imageUrl) {
+        successUrls.push(value.data.imageUrl);
+      } else {
+        failures.push({
+          index: idx,
+          reason: value.message || '파일 업로드에 실패하였습니다.',
+        });
+      }
+    } else {
+      failures.push({
+        index: idx,
+        reason: (res.reason as Error)?.message || '네트워크 오류로 파일 업로드에 실패하였습니다.',
+      });
+    }
+  });
+
+  if (failures.length > 0) {
+    // 어떤 항목이 왜 실패했는지 상세 메시지
+    const detail = failures.map(f => `#${f.index + 1}: ${f.reason}`).join(' / ');
+    throw new Error(`일부 이미지 업로드에 실패했습니다. (${detail})`);
+  }
+
+  return successUrls;
+};
+
+/*
+사용 예시:
+
+// 단일
+try {
+  const res = await uploadImage(file);
+  if (res.isSuccess) {
+    console.log('업로드된 URL:', res.data?.imageUrl);
+  } else {
+    console.error('실패:', res.message);
+  }
+} catch (e) {
+  console.error('오류:', e);
+}
+
+// 다중
+try {
+  const urls = await uploadMultipleImages(files, { enforceMax: true });
+  console.log('업로드된 URL들:', urls);
+} catch (e) {
+  console.error('다중 업로드 실패:', e);
+}
+*/

src/components/common/BookSearchBottomSheet/BookSearchBottomSheet.tsx

@@ -26,6 +26,7 @@ interface Book {
   title: string;
   author: string;
   cover: string;
+  isbn: string;
 }
 
 interface BookSearchBottomSheetProps {
@@ -36,25 +37,27 @@ interface BookSearchBottomSheetProps {
 
 type TabType = 'saved' | 'group';
 
-// Mock Data
 const mockSavedBooks: Book[] = [
   {
     id: 1,
     title: '토마토 컵라면',
     author: '작가명',
     cover: '/src/assets/books/tomato.svg',
+    isbn: '9780374500016',
   },
   {
     id: 2,
     title: '사슴',
     author: '작가명',
     cover: '/src/assets/books/deer.svg',
+    isbn: '9781234567891',
   },
   {
     id: 3,
     title: '호르몬 체인지',
     author: '작가명',
     cover: '/src/assets/books/hormone.svg',
+    isbn: '9781234567892',
   },
 ];
 
@@ -64,18 +67,21 @@ const mockGroupBooks: Book[] = [
     title: '단 한번의 삶',
     author: '작가명',
     cover: '/src/assets/books/life.svg',
+    isbn: '9781234567893',
   },
   {
     id: 5,
     title: '호르몬 체인지',
     author: '작가명',
     cover: '/src/assets/books/hormone.svg',
+    isbn: '9781234567892',
   },
   {
     id: 6,
     title: '토마토 컵라면',
     author: '작가명',
     cover: '/src/assets/books/tomato.svg',
+    isbn: '9781234567890',
   },
 ];
 

src/components/common/Post/PostBody.tsx

@@ -50,10 +50,10 @@ const PostBody = ({
   bookAuthor,
   contentBody,
   feedId,
-  contentsUrl = [],
+  contentUrls = [],
 }: PostBodyProps) => {
   const navigate = useNavigate();
-  const hasImage = contentsUrl.length > 0;
+  const hasImage = contentUrls.length > 0;
 
   const handlePostClick = (feedId: number) => {
     // if (!isClickable) return;
@@ -68,7 +68,7 @@ const PostBody = ({
         <div className="content">{contentBody}</div>
         {hasImage && (
           <div className="imgContainer">
-            {contentsUrl.map((src: string, i: number) => (
+            {contentUrls.map((src: string, i: number) => (
               <img key={i} src={src} />
             ))}
           </div>

src/components/feed/FeedDetailPostBody.tsx

@@ -81,13 +81,13 @@ const FeedDetailPostBody = ({
   isbn,
   bookAuthor,
   contentBody,
-  contentsUrl = [],
+  contentUrls = [],
   tags = [],
 }: FeedDetailPostBodyProps) => {
   const [isImageViewerOpen, setIsImageViewerOpen] = useState(false);
   const [selectedImageIndex, setSelectedImageIndex] = useState(0);
 
-  const hasImage = contentsUrl.length > 0;
+  const hasImage = contentUrls.length > 0;
   const hasTag = tags.length > 0;
 
   const handleImageClick = (index: number) => {
@@ -106,7 +106,7 @@ const FeedDetailPostBody = ({
         <div className="content">{contentBody}</div>
         {hasImage && (
           <div className="imgContainer">
-            {contentsUrl.map((src: string, i: number) => (
+            {contentUrls.map((src: string, i: number) => (
               <img key={i} src={src} alt={`이미지 ${i + 1}`} onClick={() => handleImageClick(i)} />
             ))}
           </div>
@@ -126,7 +126,7 @@ const FeedDetailPostBody = ({
       </PostContent>
       {isImageViewerOpen && (
         <ImageViewer
-          images={contentsUrl}
+          images={contentUrls}
           initialIndex={selectedImageIndex}
           isOpen={isImageViewerOpen}
           onClose={handleCloseImageViewer}

src/data/postData.ts

@@ -14,7 +14,7 @@ export const mockPosts: PostData[] = [
     bookTitle: '제목입니다',
     bookAuthor: '작가입니다',
     contentBody: '내용입니다…',
-    contentsUrl: ['https://placehold.co/100x100', 'https://placehold.co/100x100'],
+    contentUrls: ['https://placehold.co/100x100', 'https://placehold.co/100x100'],
     likeCount: 125,
     commentCount: 125,
     isSaved: false,
@@ -33,7 +33,7 @@ export const mockPosts: PostData[] = [
     bookAuthor: '작가입니다',
     contentBody:
       '내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다',
-    contentsUrl: [],
+    contentUrls: [],
     likeCount: 125,
     commentCount: 125,
     isSaved: true,
@@ -52,7 +52,7 @@ export const mockPosts: PostData[] = [
     bookAuthor: '작가입니다',
     contentBody:
       '내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다내용입니다',
-    contentsUrl: [],
+    contentUrls: [],
     likeCount: 125,
     commentCount: 125,
     isSaved: false,
@@ -74,7 +74,7 @@ export const mockFeedPost: FeedPostProps = {
   bookAuthor: '한강',
   contentBody:
     '정말 인상 깊게 읽은 책이에요.정말 인상 깊게 읽은 책이에요.정말 인상 깊게 읽은 책이에요.정말 인상 깊게 읽은 책이에요.정말 인상 깊게 읽은 책이에요.정말 인상 깊게 읽은 책이에요.정말 인상 깊게 읽은 책이에요.정말 인상 깊게 읽은 책이에요.정말 인상 깊게 읽은 책이에요.정말 인상 깊게 읽은 책이에요.정말 인상 깊게 읽은 책이에요.정말 인상 깊게 읽은 책이에요.정말 인상 깊게 읽은 책이에요.',
-  contentsUrl: [test2, 'https://placehold.co/300x300', test],
+  contentUrls: [test2, 'https://placehold.co/300x300', test],
   likeCount: 15,
   commentCount: 2,
   isSaved: true,