refactor: ResumePageGroup 컴포넌트 제거 및 ResumePage로 통합

ReXume · Feb 20, 2025 · e67a8b0 · e67a8b0
1 parent a0f01b8
commit e67a8b0
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 189 deletions.
diff --git a/frontend/src/components/resumeoverview/MainContainer.tsx b/frontend/src/components/resumeoverview/MainContainer.tsx
@@ -1,6 +1,7 @@
-import ResumePageGroup from "./ResumePageGroup";
 import Footer from "./Footer.tsx";
+import ResumePage from "./ResumePage";
 import { AddFeedbackPoint, FeedbackPoint } from "../../types.ts";
+import useResumeStore from "../../store/ResumeStore.ts";
 
 type MainContainerProps = {
   feedbackPoints: FeedbackPoint[];
@@ -23,13 +24,13 @@ function MainContainer({
   laterResumeId,
   previousResumeId,
 }: MainContainerProps) {
+  const { currentPage } = useResumeStore();
+
   return (
     <div className="w-full flex flex-col bg-white h-[90vh] ">
-      {/* Scrollable Content with space for the fixed NavBar and Footer */}
       <div className="flex-grow overflow-y-scroll mt-10 mb-6 px-6">
-        {/* Adjusted margin */}
-        <ResumePageGroup
-          // pages={1} // Adjust 'pages' to the number of resume pages
+        <ResumePage
+          pageNumber={currentPage}
           feedbackPoints={feedbackPoints}
           addFeedbackPoint={addFeedbackPoint}
           deleteFeedbackPoint={deleteFeedbackPoint}

diff --git a/frontend/src/components/resumeoverview/PDFPage.tsx b/frontend/src/components/resumeoverview/PDFPage.tsx
@@ -1,56 +1,53 @@
 import { Worker, Viewer } from "@react-pdf-viewer/core";
-import { toolbarPlugin } from "@react-pdf-viewer/toolbar";
-import type {
-  ToolbarSlot,
-  TransformToolbarSlot,
-} from "@react-pdf-viewer/toolbar";
+import useResumeStore from "../../store/ResumeStore.ts";
+import { useEffect } from "react";
 
 import "@react-pdf-viewer/core/lib/styles/index.css";
 import "@react-pdf-viewer/toolbar/lib/styles/index.css";
 
 const workerUrl = `https://unpkg.com/pdfjs-dist@3.4.120/build/pdf.worker.min.js`;
 
-const PDFPage = ({ pdfUrl }: { pdfUrl: string }) => {
-  const toolbarPluginInstance = toolbarPlugin();
-  const { renderDefaultToolbar, Toolbar } = toolbarPluginInstance;
+type PDFPageProps = {
+  pdfUrl: string;
+  children?: React.ReactNode; // 피드백 포인트를 받기 위한 children 추가
+};
+
+const PDFPage = ({ pdfUrl, children }: PDFPageProps) => {
+  const { totalPages, setTotalPages, currentPage, setCurrentPage } =
+    useResumeStore();
+
+  const handleDocumentLoad = (e: any) => {
+    setTotalPages(e.doc.numPages);
+  };
 
-  const transform: TransformToolbarSlot = (slot: ToolbarSlot) => ({
-    ...slot,
-    Print: () => <></>,
-    PrintMenuItem: () => <></>,
-    Open: () => <></>,
-    OpenMenuItem: () => <></>,
-  });
+  const handlePageChange = (e: any) => {
+    setCurrentPage(e.currentPage);
+  };
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [pdfUrl, setCurrentPage]);
 
   return (
     <Worker workerUrl={workerUrl}>
       <div
-        className="rpv-core__viewer"
+        className="relative w-full h-full"
         style={{
-          // border: "1px solid rgba(0, 0, 0, 0.3)",
           display: "flex",
           flexDirection: "column",
         }}
       >
-        <div
-          style={{
-            alignItems: "center",
-            backgroundColor: "#ffff",
-            borderBottom: "1px solid rgba(0, 0, 0, 0.1)",
-            display: "flex",
-            padding: "0.25rem",
-          }}
-        >
-          <Toolbar>{renderDefaultToolbar(transform)}</Toolbar>
-        </div>
-        <div
-          style={{
-            flex: 1,
-            overflow: "hidden",
-          }}
-        >
-          <Viewer fileUrl={pdfUrl} plugins={[toolbarPluginInstance]} />
-        </div>
+        <Viewer
+          fileUrl={pdfUrl}
+          onDocumentLoad={handleDocumentLoad}
+          onPageChange={handlePageChange}
+        />
+        {children}
+      </div>
+      <div>
+        <p>
+          현재 페이지: {currentPage} / 총 페이지: {totalPages}
+        </p>
       </div>
     </Worker>
   );

diff --git a/frontend/src/components/resumeoverview/ResumePageGroup.tsx b/frontend/src/components/resumeoverview/ResumePageGroup.tsx