feat: 새 글 수정 API 연동

src/api/feeds/getFeedDetail.ts

@@ -6,7 +6,7 @@ export interface FeedDetailData {
   creatorId: number;
   creatorNickname: string;
   creatorProfileImageUrl: string;
-  aliasName: string;
+  alias: string;
   aliasColor: string;
   postDate: string;
   isbn: string;
@@ -18,6 +18,7 @@ export interface FeedDetailData {
   commentCount: number;
   isSaved: boolean;
   isLiked: boolean;
+  isPublic: boolean;
   tagList: string[];
 }
 
@@ -40,4 +41,5 @@ export const getFeedDetail = async (feedId: number) => {
 const feedDetail = await getFeedDetail(123);
 console.log(feedDetail.data.feedId); // 123
 console.log(feedDetail.data.tagList); // ["태그1", "태그2"]
+console.log(feedDetail.data.isPublic); // true or false
 */

src/api/feeds/updateFeed.ts

@@ -0,0 +1,88 @@
+import { apiClient } from '../index';
+
+/** 피드 수정 요청 바디 타입 */
+export interface UpdateFeedBody {
+  contentBody: string;
+  isPublic: boolean;
+  tagList?: string[];
+  remainImageUrls?: string[];
+}
+
+/** 성공 응답 */
+export interface UpdateFeedSuccess {
+  isSuccess: true;
+  code: number;
+  message: string;
+}
+
+/** 실패 응답 */
+export interface UpdateFeedFail {
+  isSuccess: false;
+  code: number;
+  message: string;
+}
+
+export type UpdateFeedResponse = UpdateFeedSuccess | UpdateFeedFail;
+
+/**
+ * 피드 수정 API
+ * - multipart/form-data
+ *   - request: application/json (Blob로 감싸 전송)
+ *   - 이미지 추가는 불가능, 기존 이미지 삭제만 가능
+ */
+export const updateFeed = async (
+  feedId: number,
+  body: UpdateFeedBody,
+): Promise<UpdateFeedResponse> => {
+  try {
+    const { data } = await apiClient.patch<UpdateFeedResponse>(`/feeds/${feedId}`, body, {
+      headers: { 'Content-Type': 'application/json' },
+    });
+
+    return data;
+  } catch (error) {
+    console.error('수정 API 에러:', error);
+
+    const form = new FormData();
+    form.append('request', new Blob([JSON.stringify(body)], { type: 'application/json' }));
+
+    const { data } = await apiClient.patch<UpdateFeedResponse>(`/feeds/${feedId}`, form, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+    });
+
+    return data;
+  }
+};
+
+/*
+사용 예시:
+
+// 기존 이미지 일부 유지 (새 이미지 추가는 불가)
+const updateBody: UpdateFeedBody = {
+  contentBody: "수정된 글 내용입니다!",
+  isPublic: true,
+  tagList: ["한국소설", "책추천", "역사"],
+  remainImageUrls: ["https://img.domain.com/1.jpg"] // 기존 이미지 중 유지할 것들
+};
+
+try {
+  const result = await updateFeed(123, updateBody);
+  if (result.isSuccess) {
+    console.log('피드 수정 성공:', result.message);
+  } else {
+    console.error('피드 수정 실패:', result.message);
+  }
+} catch (error) {
+  console.error('네트워크 오류:', error);
+}
+
+// 모든 이미지 삭제 후 텍스트만 수정
+const textOnlyUpdate: UpdateFeedBody = {
+  contentBody: "텍스트만 수정",
+  isPublic: false,
+  tagList: [],
+  remainImageUrls: [] // 모든 기존 이미지 삭제
+};
+
+const result = await updateFeed(123, textOnlyUpdate);
+*/

src/components/creategroup/BookSelectionSection.tsx

@@ -16,39 +16,61 @@ interface BookSelectionSectionProps {
   selectedBook: { cover: string; title: string; author: string } | null;
   onSearchClick: () => void;
   onChangeClick: () => void;
+  readOnly?: boolean;
 }
 
 const BookSelectionSection = ({
   selectedBook,
   onSearchClick,
   onChangeClick,
+  readOnly = false,
 }: BookSelectionSectionProps) => {
   return (
     <Section>
       <SectionTitle>책 선택</SectionTitle>
       <SearchBox
         hasSelectedBook={!!selectedBook}
-        onClick={selectedBook ? undefined : onSearchClick}
+        onClick={selectedBook || readOnly ? undefined : onSearchClick}
       >
         {selectedBook ? (
           <>
             <SelectedBookContainer>
               <SelectedBookCover>
-                <img src={selectedBook.cover} alt={selectedBook.title} />
+                {selectedBook.cover && selectedBook.cover.trim() !== '' ? (
+                  <img src={selectedBook.cover} alt={selectedBook.title} />
+                ) : (
+                  <div
+                    style={{
+                      width: '60px',
+                      height: '80px',
+                      backgroundColor: '#333',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      fontSize: '10px',
+                      color: '#999',
+                      borderRadius: '4px',
+                    }}
+                  >
+                    책표지
+                  </div>
+                )}
               </SelectedBookCover>
               <SelectedBookInfo>
                 <SelectedBookTitle>{selectedBook.title}</SelectedBookTitle>
                 <SelectedBookAuthor>{selectedBook.author} 저</SelectedBookAuthor>
               </SelectedBookInfo>
             </SelectedBookContainer>
-            <ChangeButton onClick={onChangeClick}>변경</ChangeButton>
+            {!readOnly && <ChangeButton onClick={onChangeClick}>변경</ChangeButton>}
           </>
         ) : (
           <>
             <SearchIcon>
               <img src={searchIcon} alt="검색" />
             </SearchIcon>
-            <span style={{ color: semanticColors.text.secondary }}>검색해서 찾기</span>
+            <span style={{ color: semanticColors.text.secondary }}>
+              {readOnly ? '책 정보' : '검색해서 찾기'}
+            </span>
           </>
         )}
       </SearchBox>

src/components/createpost/PhotoSection.tsx

@@ -16,16 +16,31 @@ interface PhotoSectionProps {
   photos: File[];
   onPhotoAdd: (files: File[]) => void;
   onPhotoRemove: (index: number) => void;
+  existingImageUrls?: string[];
+  onExistingImageRemove?: (imageUrl: string) => void;
+  readOnly?: boolean;
+  isEditMode?: boolean;
 }
 
-const PhotoSection = ({ photos, onPhotoAdd, onPhotoRemove }: PhotoSectionProps) => {
+const PhotoSection = ({
+  photos,
+  onPhotoAdd,
+  onPhotoRemove,
+  existingImageUrls = [],
+  onExistingImageRemove,
+  readOnly = false,
+  isEditMode = false,
+}: PhotoSectionProps) => {
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const handleFileInputClick = () => {
+    if (readOnly || isEditMode) return;
     fileInputRef.current?.click();
   };
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (readOnly || isEditMode) return;
+
     const files = Array.from(e.target.files || []);
     if (files.length > 0) {
       onPhotoAdd(files);
@@ -38,34 +53,61 @@ const PhotoSection = ({ photos, onPhotoAdd, onPhotoRemove }: PhotoSectionProps)
     return URL.createObjectURL(file);
   };
 
-  const isDisabled = photos.length >= 3;
+  const totalImageCount = existingImageUrls.length + photos.length;
+  const isDisabled = totalImageCount >= 3 || readOnly || isEditMode;
 
   return (
     <Section>
       <SectionTitle>사진 추가</SectionTitle>
       <PhotoContainer>
         <PhotoGrid>
-          <AddPhotoButton onClick={handleFileInputClick} disabled={isDisabled}>
-            <img src={isDisabled ? plusDisabledIcon : plusIcon} alt="사진 추가" />
-          </AddPhotoButton>
+          {!readOnly && !isEditMode && (
+            <AddPhotoButton onClick={handleFileInputClick} disabled={isDisabled}>
+              <img src={isDisabled ? plusDisabledIcon : plusIcon} alt="사진 추가" />
+            </AddPhotoButton>
+          )}
+
+          {existingImageUrls.map((imageUrl, index) => (
+            <div
+              key={`existing-${index}`}
+              style={{ position: 'relative', width: '80px', height: '80px' }}
+            >
+              <PhotoImage src={imageUrl} alt={`기존 이미지 ${index + 1}`} />
+              {!readOnly && onExistingImageRemove && (
+                <RemoveButton onClick={() => onExistingImageRemove(imageUrl)}>
+                  <img src={closeIcon} alt="삭제" />
+                </RemoveButton>
+              )}
+            </div>
+          ))}
+
           {photos.map((photo, index) => (
-            <div key={index} style={{ position: 'relative', width: '80px', height: '80px' }}>
-              <PhotoImage src={createImageUrl(photo)} alt={`선택된 사진 ${index + 1}`} />
-              <RemoveButton onClick={() => onPhotoRemove(index)}>
-                <img src={closeIcon} alt="삭제" />
-              </RemoveButton>
+            <div
+              key={`new-${index}`}
+              style={{ position: 'relative', width: '80px', height: '80px' }}
+            >
+              <PhotoImage src={createImageUrl(photo)} alt={`새 이미지 ${index + 1}`} />
+              {!readOnly && (
+                <RemoveButton onClick={() => onPhotoRemove(index)}>
+                  <img src={closeIcon} alt="삭제" />
+                </RemoveButton>
+              )}
             </div>
           ))}
         </PhotoGrid>
-        <PhotoCount>{photos.length}/3개</PhotoCount>
-        <input
-          ref={fileInputRef}
-          type="file"
-          accept="image/*"
-          multiple
-          style={{ display: 'none' }}
-          onChange={handleFileChange}
-        />
+
+        <PhotoCount>{totalImageCount}/3개</PhotoCount>
+
+        {!readOnly && !isEditMode && (
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/*"
+            multiple
+            style={{ display: 'none' }}
+            onChange={handleFileChange}
+          />
+        )}
       </PhotoContainer>
     </Section>
   );

src/hooks/useUpdateFeed.ts

@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import { updateFeed, type UpdateFeedBody, type UpdateFeedResponse } from '@/api/feeds/updateFeed';
+import { usePopupActions } from './usePopupActions';
+
+interface UseUpdateFeedProps {
+  onSuccess?: (feedId: number) => void;
+}
+
+export const useUpdateFeed = (options?: UseUpdateFeedProps) => {
+  const [loading, setLoading] = useState(false);
+  const { openSnackbar, closePopup } = usePopupActions();
+
+  const updateExistingFeed = async (feedId: number, body: UpdateFeedBody) => {
+    try {
+      setLoading(true);
+
+      // ===== 클라이언트 선검증 =====
+      if (body.tagList) {
+        // 최대 5개
+        if (body.tagList.length > 5) {
+          openSnackbar({
+            message: '태그는 최대 5개까지 입력할 수 있어요.',
+            variant: 'top',
+            onClose: closePopup,
+          });
+          return { success: false as const };
+        }
+        // 중복 제거 체크
+        const trimmed = body.tagList.map(t => t.trim()).filter(Boolean);
+        const uniq = new Set(trimmed);
+        if (uniq.size !== trimmed.length) {
+          openSnackbar({
+            message: '태그는 중복될 수 없어요.',
+            variant: 'top',
+            onClose: closePopup,
+          });
+          return { success: false as const };
+        }
+      }
+      // ===== 선검증 끝 =====
+
+      const res: UpdateFeedResponse = await updateFeed(feedId, body);
+
+      if (res.isSuccess) {
+        openSnackbar({
+          message: '피드가 수정되었습니다.',
+          variant: 'top',
+          onClose: closePopup,
+        });
+
+        if (options?.onSuccess) {
+          options.onSuccess(feedId);
+        }
+
+        return { success: true as const, feedId };
+      } else {
+        openSnackbar({
+          message: res.message || '피드 수정에 실패했습니다.',
+          variant: 'top',
+          onClose: closePopup,
+        });
+        return { success: false as const, error: res.message };
+      }
+    } catch (error) {
+      console.error('피드 수정 실패:', error);
+      openSnackbar({
+        message: '피드 수정 중 오류가 발생했습니다.',
+        variant: 'top',
+        onClose: closePopup,
+      });
+      return { success: false as const, error: '피드 수정 중 오류가 발생했습니다.' };
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { updateExistingFeed, loading };
+};

src/pages/feed/FeedDetailPage.tsx

@@ -87,7 +87,10 @@ const FeedDetailPage = () => {
 
   const handleMoreClick = () => {
     openMoreMenu({
-      onEdit: () => console.log('수정하기 클릭'),
+      onEdit: () => {
+        closePopup();
+        navigate(`/post/update/${feedId}`);
+      },
       onClose: () => {
         closePopup();
       },

src/pages/index.tsx

@@ -11,6 +11,7 @@ import SignupNickname from './signup/SignupNickname';
 import SignupDone from './signup/SignupDone';
 import CreateGroup from './group/CreateGroup';
 import CreatePost from './post/CreatePost';
+import UpdatePost from './post/UpdatePost';
 import Group from './group/Group';
 import Feed from './feed/Feed';
 import GroupSearch from './groupSearch/GroupSearch';
@@ -51,6 +52,7 @@ const Router = () => {
         <Route path="post/create" element={<CreatePost />} />
         <Route path="group" element={<Group />} />
         <Route path="group/create" element={<CreateGroup />} />
+        <Route path="post/update/:feedId" element={<UpdatePost />} />
         <Route path="group/search" element={<GroupSearch />} />
         <Route path="group/detail" element={<GroupDetail />} />
         <Route path="group/detail/joined" element={<ParticipatedGroupDetail />} />