Merge pull request #411 from Souf-Project/feat/feed-contest

tldms0507 · web-flow · commit 020c415458ce · 2026-02-11T20:41:48.000+09:00
FEAT : 피드 동영상 썸네일 처리 및 신고 API 수정
diff --git a/src/api/report.js b/src/api/report.js
@@ -1,17 +1,19 @@
 import client from "./client";
 
-       
-export const postReport = async (postType, postId, title, reporterId, reportedMemberId, selectedReasons, description) => {
+// 원하는 형식에 맞게 reporterId 제거 (백엔드에서 자동 처리 또는 헤더에서 가져옴)
+export const postReport = async (postType, postId, title, reportedMemberId, selectedReasons, description) => {
   try {
-    const response = await client.post("/api/v1/report", {
-       postType,
-       postId,
-       title,
-       reporterId,
-       reportedMemberId,
-       reasons : selectedReasons,
-       description,
-    });
+    const requestBody = {
+      postType,
+      postId: Number(postId),
+      title,
+      reportedMemberId: Number(reportedMemberId),
+      reasons: selectedReasons,
+      description,
+    };
+    
+
+    const response = await client.post("/api/v1/report", requestBody);
     return response.data;
   } catch (error) {
     console.error("신고 생성 에러:", error);
diff --git a/src/components/declare/declareModal.jsx b/src/components/declare/declareModal.jsx
@@ -55,13 +55,14 @@ export default function DeclareModal({
       return;
     }
 
-    // 필수 필드 검증
-    if (!postType || postId === null || postId === undefined || !title || reporterId === null || reportedMemberId === null || reportedMemberId === undefined) {
-    
-      if (reporterId === null || reporterId === undefined) {
-        alert("로그인 후 신고해주세요.");
-        return;
-      }
+    // 로그인 체크
+    if (reporterId === null || reporterId === undefined) {
+      setShowLoginModal(true);
+      return;
+    }
+
+    // 필수 필드 검증 (reporterId는 API 호출 시 제외되지만 로그인 체크용으로 필요)
+    if (!postType || postId === null || postId === undefined || !title || reportedMemberId === null || reportedMemberId === undefined) {
       if (!postType) {
         alert("신고할 게시물 유형이 없습니다.");
         return;
@@ -90,14 +91,14 @@ export default function DeclareModal({
       postType,
       postId: Number(postId),
       title,
-      reporterId: Number(reporterId),
       reportedMemberId: Number(reportedMemberId),
       reasons,
       description
     };
 
     try {
-      const response = await postReport(postType, postId, title, reporterId, reportedMemberId, reasons, description);
+ 
+      const response = await postReport(postType, postId, title, reportedMemberId, reasons, description);
   
       setIsSubmitted(true);
       
diff --git a/src/components/feed.jsx b/src/components/feed.jsx
@@ -67,7 +67,13 @@ export default function Feed({ feedData, onFeedClick }) {
 
   useEffect(() => {
      setWorksData(feedData);
-     setMediaData(feedData?.mediaResDtos);
+     // mediaResDto가 배열인지 단일 객체인지 확인하고 배열로 변환
+     const mediaArray = Array.isArray(feedData?.mediaResDto) 
+       ? feedData.mediaResDto 
+       : feedData?.mediaResDto 
+         ? [feedData.mediaResDto] 
+         : [];
+     setMediaData(mediaArray);
      setIsLiked(feedData?.liked || false);
      setLikedCount(feedData?.likedCount || 0);
   }, [feedData]);
@@ -91,7 +97,7 @@ export default function Feed({ feedData, onFeedClick }) {
         setShowDeleteModal(false);
         setShowCompleteModal(true);
       } catch (err) {
-        console.log("실패함" , err);
+        // console.log("실패함" , err);
         const errorKey = err?.response?.data?.errorKey;
         if (err.response?.status === 403) {
           setShowLoginModal(true);
@@ -127,7 +133,7 @@ export default function Feed({ feedData, onFeedClick }) {
 
      const toggleExpand = () => setIsExpanded((prev) => !prev);
           const handleDeclareClick = (declareData) => {
-       console.log('신고 데이터:', declareData);
+      //  console.log('신고 데이터:', declareData);
      }
 
   const handleHeartClick = async () => {
@@ -147,7 +153,13 @@ export default function Feed({ feedData, onFeedClick }) {
       setWorksData(updatedData.result);
       setIsLiked(updatedData.result.liked);
       setLikedCount(updatedData.result.likedCount || 0);
-      setMediaData(updatedData.result.mediaResDtos);
+      // mediaResDto가 배열인지 단일 객체인지 확인하고 배열로 변환
+      const mediaArray = Array.isArray(updatedData.result?.mediaResDto) 
+        ? updatedData.result.mediaResDto 
+        : updatedData.result?.mediaResDto 
+          ? [updatedData.result.mediaResDto] 
+          : [];
+      setMediaData(mediaArray);
      
     } catch (error) {
       console.error("피드 관련 에러:", error);
@@ -228,70 +240,81 @@ export default function Feed({ feedData, onFeedClick }) {
         <div 
         className="flex justify-center w-full overflow-hidden rounded-md mb-2 relative"
       >
-        {feedData?.mediaResDtos && feedData.mediaResDtos.length > 0 ? (
-          <>
-            <Swiper
-              onSwiper={(swiper) => {
-                swiperRef.current = swiper;
-              }}
-              pagination={{
-                dynamicBullets: true,
-              }}
-              modules={[Pagination]}
-              className="rounded-lg w-full max-w-[800px]"
-            >
-              {feedData?.mediaResDtos?.map((data, i) => {
-                const isVideo = data.fileType?.toLowerCase().startsWith("video") || data.fileUrl?.toLowerCase().endsWith(".mp4");
-                return (
-                  <SwiperSlide key={i}>
-                    <div className="flex justify-center items-center">
-                      {isVideo ? (
-                        <video
-                          src={`${data.fileUrl}`}
-                          controls
-                          className="w-full h-auto max-h-[500px] object-cover cursor-pointer"
-                          onClick={goToDetail}
-                        />
-                      ) : (
+        {(() => {
+          // mediaResDto가 배열인지 단일 객체인지 확인하고 배열로 변환
+          const mediaArray = Array.isArray(feedData?.mediaResDto) 
+            ? feedData.mediaResDto 
+            : feedData?.mediaResDto 
+              ? [feedData.mediaResDto] 
+              : [];
+
+          if (mediaArray.length === 0) {
+            return (
+              <div className="w-full h-48 bg-gray-100 flex items-center justify-center">
+                <p className="text-gray-400">이미지가 없습니다</p>
+              </div>
+            );
+          }
+
+          return (
+            <>
+              <Swiper
+                onSwiper={(swiper) => {
+                  swiperRef.current = swiper;
+                }}
+                pagination={{
+                  dynamicBullets: true,
+                }}
+                modules={[Pagination]}
+                className="rounded-lg w-full max-w-[800px]"
+              >
+                {mediaArray.map((data, i) => {
+                  // 피드 목록에서는 동영상도 썸네일 이미지(.png)로 표시
+                  // fileUrl이 이미 전체 URL인지 확인 (http:// 또는 https://로 시작하는지)
+                  const isFullUrl = data.fileUrl?.startsWith('http://') || data.fileUrl?.startsWith('https://');
+                  const mediaUrl = isFullUrl ? data.fileUrl : `${BUCKET_URL}${data.fileUrl}`;
+
+                  return (
+                    <SwiperSlide key={i}>
+                      <div className="flex justify-center items-center">
                         <img
-                          src={`${BUCKET_URL}${data.fileUrl}`}
-                          alt={data.fileName}
+                          src={mediaUrl}
+                          alt={data.fileName || `미디어 ${i + 1}`}
                           className="w-full h-auto max-h-[500px] object-cover aspect-[1/1] cursor-pointer"
                           onClick={goToDetail}
+                          onError={(e) => {
+                            e.target.src = basiclogoimg;
+                          }}
                         />
-                      )}
-                    </div>
-                  </SwiperSlide>
-                )
-              })}
-            </Swiper>
-            {/* 화살표 버튼 */}
-            {feedData?.mediaResDtos && feedData.mediaResDtos.length > 1 && (
-              <div className="hidden lg:block">
-                <button 
-                  onClick={(e) => { e.stopPropagation(); swiperRef.current?.slidePrev(); }}
-                  className="absolute left-2 top-1/2 transform -translate-y-1/2 z-10 w-5 h-5 bg-white/80 rounded-full shadow-lg flex items-center justify-center transition-all duration-200"
-                >
-                  <svg className="w-3 h-3 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-                  </svg>
-                </button>
-                <button 
-                  onClick={(e) => { e.stopPropagation(); swiperRef.current?.slideNext(); }}
-                  className="absolute right-2 top-1/2 transform -translate-y-1/2 z-10 w-5 h-5 bg-white/80 rounded-full shadow-lg flex items-center justify-center transition-all duration-200"
-                >
-                  <svg className="w-3 h-3 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                  </svg>
-                </button>
-              </div>
-            )}
-          </>
-        ) : (
-          <div className="w-full h-48 bg-gray-100 flex items-center justify-center">
-            <p className="text-gray-400">이미지가 없습니다</p>
-          </div>
-        )}
+                      </div>
+                    </SwiperSlide>
+                  );
+                })}
+              </Swiper>
+              {/* 화살표 버튼 */}
+              {mediaArray.length > 1 && (
+                <div className="hidden lg:block">
+                  <button 
+                    onClick={(e) => { e.stopPropagation(); swiperRef.current?.slidePrev(); }}
+                    className="absolute left-2 top-1/2 transform -translate-y-1/2 z-10 w-5 h-5 bg-white/80 rounded-full shadow-lg flex items-center justify-center transition-all duration-200"
+                  >
+                    <svg className="w-3 h-3 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+                    </svg>
+                  </button>
+                  <button 
+                    onClick={(e) => { e.stopPropagation(); swiperRef.current?.slideNext(); }}
+                    className="absolute right-2 top-1/2 transform -translate-y-1/2 z-10 w-5 h-5 bg-white/80 rounded-full shadow-lg flex items-center justify-center transition-all duration-200"
+                  >
+                    <svg className="w-3 h-3 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                    </svg>
+                  </button>
+                </div>
+              )}
+            </>
+          );
+        })()}
       </div>
       </div>
      
diff --git a/src/components/studentProfile/postDetail.jsx b/src/components/studentProfile/postDetail.jsx
@@ -152,15 +152,14 @@ const handleDeleteClick = () => {
       setShowDeleteModal(false);
       setShowCompleteModal(true);
     } catch (err) {
-      //console.log("실패 넘어요", err);
       setShowDeleteModal(false);
       const errorKey = err?.response?.data?.errorKey;
       if (err.response?.status === 403) {
         setShowLoginModal(true);
       } else {
         const errorInfo = FEED_ERRORS[errorKey];
         setErrorModal(true);
-        setErrorDescription(errorInfo?.message || "알 수 없는 오류가 발생했습니다.");
+        setErrorDescription(errorInfo?.message || "서버 오류가 발생했습니다.");
         setErrorAction(errorInfo?.action || "redirect");
       }
         
@@ -215,7 +214,7 @@ const handleDeleteClick = () => {
       }else{
         const errorInfo = FEED_ERRORS[errorKey];
         setErrorModal(true);
-        setErrorDescription(errorInfo?.message || "알 수 없는 오류가 발생했습니다.");
+        setErrorDescription(errorInfo?.message || "서버 오류가 발생했습니다.");
         setErrorAction(errorInfo?.action || "redirect");
       }
     }
@@ -241,8 +240,8 @@ const handleDeleteClick = () => {
   };
 
   const handleDeclareClick = (declareData) => {
-    // console.log('프로필 신고 데이터:', declareData);
-    // 여기에 신고 API 호출
+    // 신고 API는 declareModal에서 처리하므로 여기서는 데이터만 받아서 로그만 출력
+    console.log("신고 데이터 수신:", declareData);
   };
 
   const shortenUrl = (url) => {
