CommentPagination

src/App.tsx

@@ -1,5 +1,5 @@
 import './App.css'
-import { CommentItem, CommentListContainer, SubCommentData } from './Comment';
+import { CommentItem, CommentListContainer, CommentPagination, SubCommentData } from './Comment';
 import CommentHeader from './CommentHeader';
 import { Footer } from './Footer';
 import { GalleryContent } from './Gallery';
@@ -197,6 +197,7 @@ function App() {
               showDelete: true,
             }} />
           </CommentListContainer>
+          <CommentPagination currentPage={1} maxPage={2} />
           <div style={{
             width: "840px",
           }}>

src/Comment.tsx

@@ -1,4 +1,6 @@
+import { Separator } from "./Separator";
 import { AuthorData } from "./table";
+import { cn } from "./util/cn";
 
 interface CommentDataBase {
     id: number;
@@ -183,3 +185,80 @@ export function CommentReplySection({ comments }: { comments: SubCommentData[] }
         </div>
     );
 }
+
+// Define the props the component will accept
+interface CommentPaginationProps {
+    currentPage: number;
+    maxPage: number;
+    onPageChange?: (page: number) => void; // Optional callback for page changes
+    onViewContent?: () => void; // Optional click handler for "본문 보기"
+    onCloseComments?: () => void; // Optional click handler for "댓글닫기"
+    onRefresh?: () => void; // Optional click handler for "새로고침"
+}
+
+export const CommentPagination: React.FC<CommentPaginationProps> = ({
+    currentPage,
+    maxPage,
+    onViewContent,
+    onCloseComments,
+    onRefresh,
+}) => {
+    const pageNumbers = Array.from({ length: maxPage }, (_, i) => i + 1); // Generate page numbers
+
+    return (
+        <div className="relative mt-[18px] text-center leading-[20px] border-t border-t-custom-gray-light text-[0px] h-[69px] font-apple-dotum">
+            {/* Page Number Section */}
+            {/* pt/pb values approximate vertical centering within the 69px height */}
+            {/* text-center on parent handles horizontal centering */}
+            <div className="pt-[23px] pb-[28px]">
+                {pageNumbers.map((page) => (
+                    <em className={cn("inline-block ml-[9px] text-[14px] font-bold not-italic",
+                        currentPage === page && "underline text-custom-red-text"
+                    )}>
+                        {page}
+                    </em>
+                ))}
+                {/* Add other page numbers logic here if needed */}
+            </div>
+
+            {/* Buttons Section */}
+            <div className="absolute right-0 top-0 mt-[23px] text-[0px] flex items-center">
+                <a
+                    href="#view-content" // Use a more appropriate href or make it a button if it triggers an action
+                    onClick={(e) => {
+                        if (onViewContent) {
+                            e.preventDefault(); // Prevent default anchor behavior if it's an action
+                            onViewContent();
+                        }
+                        // Allow default behavior if onViewContent is not provided and href is meaningful
+                    }}
+                    className="text-custom-gray-dark align-middle leading-[15px] inline-block text-[13px] font-bold font-apple no-underline hover:underline cursor-pointer"
+                >
+                    본문 보기
+                </a>
+                <Separator className='mx-2.5' />
+                <button
+                    type="button"
+                    onClick={onCloseComments}
+                    className="bg-transparent cursor-pointer align-middle text-[13px] font-apple text-custom-gray-dark font-bold" // Added margin consistency
+                >
+                    <span className="inline-block text-[13px] font-bold font-apple text-custom-gray-dark"> {/* Removed redundant ml-9, parent button has it */}
+                        댓글닫기
+                    </span>
+                    {/* The @utility bg-sp-img needs to be correctly processed by your CSS build tool */}
+                    <em className="bg-sp-img bg-[-84px_-52px] inline-block w-[9px] h-[5px] ml-[4px] align-[2px]">
+                        {/* Empty em for background image icon */}
+                    </em>
+                </button>
+                <Separator className='mx-2.5' />
+                <button
+                    type="button"
+                    onClick={onRefresh}
+                    className="bg-transparent cursor-pointer align-middle text-[13px] font-apple text-custom-gray-dark font-bold" // Added margin consistency
+                >
+                    새로고침
+                </button>
+            </div>
+        </div>
+    );
+};