feat: 댓글 리스트에 “더보기” 버튼 추가 및 페이징 처리(#354)

Author: exjuu

src/features/project/post/components/CommentSection.jsx

@@ -9,6 +9,7 @@ import {
 } from "@mui/material";
 import ReplyIcon from "@mui/icons-material/Reply";
 import CommentInput from "./CommentInput";
+import CustomButton from "@/components/common/customButton/CustomButton";
 
 // 재귀적으로 리뷰를 렌더링하는 컴포넌트
 function CommentItem({ review, level = 0, postId, onReply }) {
@@ -57,7 +58,7 @@ function CommentItem({ review, level = 0, postId, onReply }) {
 
       {/* 대댓글 입력창 */}
       {replying && (
-        <Box sx={{ ml: (level + 1) * 4 }}>
+        <Box sx={{ ml: (level + 1) * 4, mt: 2 }}>
           <CommentInput
             postId={postId}
             parentId={review.reviewId}
@@ -84,27 +85,24 @@ function CommentItem({ review, level = 0, postId, onReply }) {
         </Box>
       )}
 
-      {/* 최상위 댓글 뒤에 구분선 */}
       {level === 0 && <Divider sx={{ mt: 2 }} />}
     </Box>
   );
 }
 
-// CommentSection: 댓글 입력창을 최상단에, 그 아래 댓글 목록, 더보기 버튼 렌더링
 export default function CommentSection({
   postId,
   comments = [],
   onSubmit,
   onReply,
+  hasMore,
   onLoadMore,
   currentPage = 1,
 }) {
   return (
     <Box sx={{ mt: 3 }}>
-      {/* 최상위 댓글 입력창 */}
       <CommentInput postId={postId} onSubmit={(text) => onSubmit(text)} />
 
-      {/* 댓글 목록 */}
       {comments.map((review) => (
         <CommentItem
           key={review.reviewId}
@@ -114,16 +112,17 @@ export default function CommentSection({
         />
       ))}
 
-      {/* 더보기 버튼 */}
-      {/* <Box sx={{ display: "flex", justifyContent: "center", mt: 2 }}>
-        <CustomButton
-          kind="ghost"
-          size="small"
-          onClick={() => onLoadMore({ postId, page: currentPage + 1 })}
-        >
-          더보기
-        </CustomButton>
-      </Box> */}
+      {hasMore && (
+        <Box sx={{ display: "flex", justifyContent: "center", mt: 2 }}>
+          <CustomButton
+            kind="ghost"
+            size="small"
+            onClick={() => onLoadMore({ postId, page: currentPage + 1 })}
+          >
+            더보기
+          </CustomButton>
+        </Box>
+      )}
     </Box>
   );
 }

src/features/project/post/components/FileAttachmentViewer.jsx

@@ -0,0 +1,141 @@
+// src/components/common/attachment/AttachmentList.jsx
+import React from "react";
+import {
+  Box,
+  Stack,
+  Typography,
+  IconButton,
+  Tooltip,
+  Alert,
+  Divider,
+} from "@mui/material";
+import ZoomInIcon from "@mui/icons-material/ZoomIn";
+import DownloadIcon from "@mui/icons-material/Download";
+import ImageIcon from "@mui/icons-material/Image";
+import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
+import {
+  PictureAsPdf,
+  Description,
+  TableChart,
+  Archive,
+  Code,
+  Movie,
+  MusicNote,
+} from "@mui/icons-material";
+
+function formatFileSize(bytes) {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+}
+
+function getFileIcon(fileName, fileType) {
+  const ext = fileName.toLowerCase().split(".").pop();
+  if (fileType.startsWith("image/")) return <ImageIcon color="primary" />;
+  if (["pdf"].includes(ext)) return <PictureAsPdf color="error" />;
+  if (["doc", "docx", "txt", "rtf"].includes(ext)) return <Description />;
+  if (["xls", "xlsx", "csv"].includes(ext))
+    return <TableChart color="success" />;
+  if (["zip", "rar", "7z", "tar", "gz"].includes(ext))
+    return <Archive color="warning" />;
+  if (["js", "ts", "jsx", "tsx", "html", "css", "json", "xml"].includes(ext))
+    return <Code color="info" />;
+  if (["mp4", "avi", "mov", "wmv", "flv", "mkv"].includes(ext))
+    return <Movie color="secondary" />;
+  if (["mp3", "wav", "flac", "aac", "ogg"].includes(ext))
+    return <MusicNote color="secondary" />;
+  return <InsertDriveFileIcon color="action" />;
+}
+
+export default function FileAttachmentViewer({
+  attachments = [],
+  loading = false,
+  error = null,
+  onPreview,
+  onDownload,
+}) {
+  if (!attachments.length && !loading) return null;
+
+  return (
+    <Box>
+      <Stack direction="row" alignItems="center" spacing={1} mb={2}>
+        <Typography variant="h6" fontWeight={600}>
+          첨부파일 ({attachments.length}개)
+          {loading && " (로딩 중...)"}
+        </Typography>
+      </Stack>
+      <Divider sx={{ mb: 3 }} />
+      {error && (
+        <Alert severity="error" sx={{ mb: 2 }}>
+          파일 로드 실패: {error}
+        </Alert>
+      )}
+      <Stack spacing={1}>
+        {attachments.map((file) => (
+          <Box
+            key={file.id}
+            sx={{
+              p: 2,
+              border: "1px solid",
+              borderColor: "grey.300",
+              borderRadius: 1,
+              bgcolor: "background.paper",
+              "&:hover": {
+                borderColor: "primary.main",
+                bgcolor: "grey.50",
+              },
+            }}
+          >
+            <Stack direction="row" alignItems="center" spacing={2}>
+              <Box
+                sx={{
+                  width: 40,
+                  height: 40,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  bgcolor: "grey.100",
+                  borderRadius: 1,
+                }}
+              >
+                {getFileIcon(file.fileName, file.fileType)}
+              </Box>
+              <Box sx={{ flex: 1, minWidth: 0 }}>
+                <Typography variant="body2" fontWeight={600} noWrap>
+                  {file.fileName}
+                </Typography>
+                <Typography variant="caption" color="text.secondary">
+                  {formatFileSize(file.fileSize)}
+                  {file.fileType && ` • ${file.fileType}`}
+                </Typography>
+              </Box>
+              <Stack direction="row" spacing={1}>
+                {file.isImage && file.imageUrl && onPreview && (
+                  <Tooltip title="미리보기">
+                    <IconButton size="small" onClick={() => onPreview(file)}>
+                      <ZoomInIcon />
+                    </IconButton>
+                  </Tooltip>
+                )}
+                {onDownload && (
+                  <Tooltip title="다운로드">
+                    <IconButton size="small" onClick={() => onDownload(file)}>
+                      <DownloadIcon />
+                    </IconButton>
+                  </Tooltip>
+                )}
+              </Stack>
+            </Stack>
+            {file.error && (
+              <Alert severity="error" sx={{ mt: 1 }}>
+                파일 로드 실패: {file.error}
+              </Alert>
+            )}
+          </Box>
+        ))}
+      </Stack>
+    </Box>
+  );
+}