fix(fe/community) : 댓글조회 시 userId 제대로 조회, 최신순 정렬

Author: Plectranthus

front/package-lock.json

@@ -10,4 +10,36 @@ export default function HomePage() {
       <RepositoryList />
     </main>
   );
-}
+}
+
+// "use client"
+
+// import { useState } from "react"
+// import { CommentList } from "@/components/community/CommentList"
+// import { CommentForm } from "@/components/community/CommentForm"
+
+// export default function CommunityPage() {
+//   const [refreshKey, setRefreshKey] = useState(0)
+
+//   return (
+//     <main className="max-w-2xl mx-auto py-10">
+//       <h1 className="text-2xl font-bold mb-6">💬 댓글 테스트 페이지</h1>
+
+//       {/* ✅ 댓글 작성 폼을 위로 이동 */}
+//       <section className="mb-8">
+//         <h2 className="text-lg font-semibold mb-3">댓글 작성</h2>
+//         <CommentForm
+//           analysisResultId="1"
+//           memberId={1} // 로그인 후 실제 유저 ID로 대체
+//           onCommentAdded={() => setRefreshKey((k) => k + 1)} // 작성 후 목록 새로고침
+//         />
+//       </section>
+
+//       {/* ✅ 댓글 목록은 아래쪽에 표시 */}
+//       <section className="border-t border-border pt-6">
+//         <h2 className="text-lg font-semibold mb-3">댓글 목록</h2>
+//         <CommentList key={refreshKey} analysisResultId="1" />
+//       </section>
+//     </main>
+//   )
+// }

front/src/app/community/page.tsx

@@ -1,12 +1,126 @@
+// "use client"
+
+// import { useEffect, useState } from "react"
+// import { Card } from "@/components/ui/card"
+// import { Button } from "@/components/ui/Button"
+// import { Switch } from "@/components/ui/switch"
+// import { ShareButton } from "@/components/analysis/ShareButton"
+// import { Globe, Lock, MessageSquare } from "lucide-react"
+// import { useRepositoryPublic } from "@/hooks/analysis/useRepositoryPublic"
+// import { CommentSection } from "@/components/community/CommentSection"
+// import { analysisApi } from "@/lib/api/analysis"
+// import type { HistoryResponseDto } from "@/types/analysis"
+
+// interface Props {
+//   userId: number
+//   repoId: number
+//   initialPublic: boolean
+// }
+
+// export function RepositoryPublicSection({ userId, repoId, initialPublic }: Props) {
+//   const { isPublic, togglePublic } = useRepositoryPublic(initialPublic, userId, repoId)
+
+//   const [analysisResultId, setAnalysisResultId] = useState<number | null>(null)
+//   const [loading, setLoading] = useState(true)
+
+//   useEffect(() => {
+//     const loadAnalysisId = async () => {
+//       try {
+//         const historyResponse: HistoryResponseDto = await analysisApi.getRepositoryHistory(userId, repoId)
+//         // ✅ 최신 분석 결과 ID 추출
+//         if (historyResponse.analysisVersions && historyResponse.analysisVersions.length > 0) {
+//           const latest = historyResponse.analysisVersions[0]
+//           setAnalysisResultId(latest.analysisId)
+//         } else {
+//           console.warn("이 리포지토리에 분석 기록이 없습니다.")
+//         }
+//       } catch (err) {
+//         console.error("❌ 분석 히스토리 조회 실패:", err)
+//       } finally {
+//         setLoading(false)
+//       }
+//     }
+
+//     loadAnalysisId()
+//   }, [userId, repoId])
+
+//   return (
+//     <>
+//       {/* 🌐 공개 설정 */}
+//       <Card className="mb-8 p-6">
+//         <div className="flex items-center justify-between">
+//           <div className="flex items-center gap-3">
+//             {isPublic ? (
+//               <Globe className="h-5 w-5 text-green-500" />
+//             ) : (
+//               <Lock className="h-5 w-5 text-muted-foreground" />
+//             )}
+//             <div>
+//               <h3 className="font-semibold">리포지토리 공개 설정</h3>
+//               <p className="text-sm text-muted-foreground">
+//                 {isPublic
+//                   ? "이 리포지토리의 분석 결과가 커뮤니티에 공개됩니다."
+//                   : "이 리포지토리의 분석 결과는 비공개 상태입니다."}
+//               </p>
+//             </div>
+//           </div>
+
+//           <div className="flex items-center gap-2">
+//             <span className="text-sm text-muted-foreground">{isPublic ? "공개" : "비공개"}</span>
+//             <Switch checked={isPublic} onCheckedChange={togglePublic} />
+//           </div>
+//         </div>
+//       </Card>
+
+//       {/* 💬 커뮤니티 섹션 */}
+//       {isPublic ? (
+//         <>
+//           <Card className="p-6 mb-8">
+//             <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+//               <div>
+//                 <h3 className="mb-1 font-semibold">커뮤니티 반응</h3>
+//                 <p className="text-sm text-muted-foreground">다른 개발자들과 소통하세요.</p>
+//               </div>
+//               <div className="flex gap-2">
+//                 <Button variant="outline" size="sm" className="gap-2 bg-transparent">
+//                   <MessageSquare className="h-4 w-4" />
+//                   댓글 (n)
+//                 </Button>
+//                 <ShareButton />
+//               </div>
+//             </div>
+//           </Card>
+
+//           {/* ✅ analysisResultId가 있을 때만 CommentSection 표시 */}
+//           {loading ? (
+//             <p className="text-muted-foreground text-sm">분석 데이터를 불러오는 중...</p>
+//           ) : analysisResultId ? (
+//             <CommentSection analysisResultId={analysisResultId} memberId={userId} />
+//           ) : (
+//             <p className="text-muted-foreground text-sm">아직 분석 기록이 없습니다.</p>
+//           )}
+//         </>
+//       ) : (
+//         <Card className="p-6 text-center text-muted-foreground">
+//           🔒 이 리포지토리는 현재 비공개 상태입니다.
+//         </Card>
+//       )}
+//     </>
+//   )
+// }
+
 "use client"
 
+import { useEffect, useState } from "react"
 import { Card } from "@/components/ui/card"
-import { Button } from "@/components/ui/Button"
+import { Button } from "@/components/ui/button" // ✅ 대소문자 수정
 import { Switch } from "@/components/ui/switch"
 import { ShareButton } from "@/components/analysis/ShareButton"
-import { Globe, Lock, MessageSquare, Share2, ThumbsUp } from "lucide-react"
+import { Globe, Lock, MessageSquare } from "lucide-react"
 import { useRepositoryPublic } from "@/hooks/analysis/useRepositoryPublic"
-import { useState } from "react"
+import { CommentSection } from "@/components/community/CommentSection"
+import { analysisApi } from "@/lib/api/analysis"
+import type { HistoryResponseDto } from "@/types/analysis"
 
 interface Props {
   userId: number
@@ -16,13 +130,30 @@ interface Props {
 
 export function RepositoryPublicSection({ userId, repoId, initialPublic }: Props) {
   const { isPublic, togglePublic } = useRepositoryPublic(initialPublic, userId, repoId)
-  const [liked, setLiked] = useState(false)
-  const [likeCount, setLikeCount] = useState(42)
 
-  const handleLike = () => {
-    setLiked((prev) => !prev)
-    setLikeCount((prev) => (liked ? prev - 1 : prev + 1))
-  }
+  const [analysisResultId, setAnalysisResultId] = useState<number | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const loadAnalysisId = async () => {
+      try {
+        const historyResponse: HistoryResponseDto = await analysisApi.getRepositoryHistory(userId, repoId)
+        // ✅ 최신 분석 결과 ID 추출
+        if (Array.isArray(historyResponse.analysisVersions) && historyResponse.analysisVersions.length > 0) {
+          const latest = historyResponse.analysisVersions[0]
+          setAnalysisResultId(latest.analysisId)
+        } else {
+          console.warn("이 리포지토리에 분석 기록이 없습니다.")
+        }
+      } catch (err) {
+        console.error("❌ 분석 히스토리 조회 실패:", err)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    loadAnalysisId()
+  }, [userId, repoId])
 
   return (
     <>
@@ -56,28 +187,40 @@ export function RepositoryPublicSection({ userId, repoId, initialPublic }: Props
       {isPublic ? (
         <>
           <Card className="p-6 mb-8">
-            <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+            {/* 헤더 영역 */}
+            <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mb-4">
               <div>
                 <h3 className="mb-1 font-semibold">커뮤니티 반응</h3>
                 <p className="text-sm text-muted-foreground">다른 개발자들과 소통하세요.</p>
               </div>
-              <div className="flex gap-2">
+              {/*<div className="flex gap-2">
                 <Button variant="outline" size="sm" className="gap-2 bg-transparent">
                   <MessageSquare className="h-4 w-4" />
                   댓글 (n)
                 </Button>
                 <ShareButton />
-              </div>
+              </div>*/}
             </div>
-          </Card>
 
-          {/* ⚠️ TODO: 댓글 컴포넌트 연결 위치 */}
-          {/*
-            <CommentSection 
-              repoId={repoId} 
-              userId={userId} 
-            />
-          */}
+            {/* 본문 영역: 댓글 작성 → 댓글 목록 */}
+            {loading ? (
+              <p className="flex flex-col gap-6">분석 데이터를 불러오는 중...</p>
+            ) : analysisResultId ? (
+              <div className="text-muted-foreground text-sm">
+                {/* ✏️ 댓글 작성 폼 */}
+                <CommentSection analysisResultId={analysisResultId} memberId={userId} />
+
+                {/* 💬 댓글 목록 */}
+                <div className="border-t pt-6">
+                  {/* 댓글 목록이 CommentSection 안에서 렌더링되거나 별도 CommentList가 있다면 여기에 배치 */}
+                  {/* 예: <CommentList analysisResultId={analysisResultId} /> */}
+                  {/* CommentSection이 이미 작성+조회 포함한다면 그대로 둬도 됨 */}
+                </div>
+              </div>
+            ) : (
+              <p className="text-muted-foreground text-sm">아직 분석 기록이 없습니다.</p>
+            )}
+          </Card>
         </>
       ) : (
         <Card className="p-6 text-center text-muted-foreground">

front/src/components/analysis/RepositoryPublicSection.tsx

@@ -4,29 +4,33 @@ import { useState } from "react"
 import { Button } from "@/components/ui/Button"
 import { Textarea } from "@/components/ui/textarea"
 import { postComment } from "@/lib/api/community"
+import { useAuth } from "@/hooks/auth/useAuth" // ✅ 로그인 유저 정보 가져오기
 
 interface CommentFormProps {
-  analysisResultId: string
-  memberId: number
-  onCommentAdded?: () => void // 작성 후 목록 새로고침용 콜백
+  analysisResultId: number
+  onCommentAdded?: () => void
 }
 
-export function CommentForm({ analysisResultId, memberId, onCommentAdded }: CommentFormProps) {
+export function CommentForm({ analysisResultId, onCommentAdded }: CommentFormProps) {
+  const { user } = useAuth() // ✅ 로그인한 사용자 정보
   const [content, setContent] = useState("")
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
+    if (!user) {
+      setError("로그인이 필요합니다.")
+      return
+    }
     if (!content.trim()) return
 
     try {
       setLoading(true)
       setError(null)
-
-      await postComment(analysisResultId, memberId, content)
-      setContent("") // 작성 후 textarea 초기화
-      if (onCommentAdded) onCommentAdded()
+      await postComment(analysisResultId, user.id, content) // ✅ 로그인 유저 id 전달
+      setContent("")
+      onCommentAdded?.()
     } catch (err) {
       console.error(err)
       setError("댓글 작성 중 오류가 발생했습니다.")

front/src/components/community/CommentForm.tsx

@@ -5,10 +5,10 @@ import { Card } from "@/components/ui/card"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { fetchComments } from "@/lib/api/community"
 import { Comment } from "@/types/community"
-import { formatDistanceToNow } from "date-fns/formatDistanceToNow"
-import {ko } from "date-fns/locale/ko"
+import { formatDistanceToNow } from "date-fns"
+import { ko } from "date-fns/locale"
 
-export function CommentList({ analysisResultId }: { analysisResultId: string }) {
+export function CommentList({ analysisResultId }: { analysisResultId: number }) {
   const [comments, setComments] = useState<Comment[]>([])
   const [loading, setLoading] = useState(true)
 
@@ -23,7 +23,6 @@ export function CommentList({ analysisResultId }: { analysisResultId: string })
         setLoading(false)
       }
     }
-
     loadData()
   }, [analysisResultId])
 
@@ -40,7 +39,6 @@ export function CommentList({ analysisResultId }: { analysisResultId: string })
 
         return (
           <Card key={c.id} className="p-5 rounded-2xl shadow-sm flex flex-col gap-3">
-            {/* Header */}
             <div className="flex justify-between">
               <div className="flex gap-3 items-center">
                 <Avatar className="h-10 w-10">
@@ -49,13 +47,10 @@ export function CommentList({ analysisResultId }: { analysisResultId: string })
                 </Avatar>
                 <div>
                   <p className="font-semibold">{`User #${c.memberId}`}</p>
-                  <p className="text-sm text-muted-foreground">{`user${c.memberId}@example.com`}</p>
                 </div>
               </div>
               <span className="text-sm text-muted-foreground">{timeAgo}</span>
             </div>
-
-            {/* Content */}
             <p className="text-[15px] text-gray-800 leading-relaxed">{c.comment}</p>
           </Card>
         )

front/src/components/community/CommentList.tsx

@@ -4,17 +4,25 @@ import { useState } from "react"
 import { CommentList } from "./CommentList"
 import { CommentForm } from "./CommentForm"
 
-export function CommentSection({ analysisResultId }: { analysisResultId: string }) {
+interface CommentSectionProps {
+  analysisResultId: number
+  memberId: number
+}
+
+export function CommentSection({ analysisResultId, memberId }: CommentSectionProps) {
   const [refreshKey, setRefreshKey] = useState(0)
 
   return (
-    <div>
-      <CommentList key={refreshKey} analysisResultId={analysisResultId} />
+    <div className="mt-6 space-y-6">
+      {/* ✏️ 댓글 작성 폼 */}
       <CommentForm
         analysisResultId={analysisResultId}
-        memberId={1} // 로그인 후 실제 사용자 ID로 교체
+        memberId={memberId}
         onCommentAdded={() => setRefreshKey((k) => k + 1)}
       />
+
+      {/* 💬 댓글 목록 */}
+      <CommentList key={refreshKey} analysisResultId={analysisResultId} />
     </div>
   )
-}
+}