Merge pull request #121 from DSM-Repo/refactor

Refactor
DSM-Repo · Nov 3, 2024 · 0810b0f · 0810b0f
2 parents 8bb827a + 5640233
commit 0810b0f
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 54 deletions.
diff --git a/packages/main/src/Pages/ResumePublicViewer.tsx b/packages/main/src/Pages/ResumePublicViewer.tsx
@@ -14,7 +14,7 @@ export const ResumePublicViewer = () => {
   return (
     <div className="w-full h-fit bg-[#F1F3F5] flex flex-col items-center pt-20 pb-20">
       <div className="shadow-md shadow-gray-50 rounded-md h-fit overflow-hidden">
-        <Resume data={detailData} />
+        <Resume data={detailData} noOverflow />
       </div>
     </div>
   );

diff --git a/packages/student/src/pages/Preview.tsx b/packages/student/src/pages/Preview.tsx
@@ -1,8 +1,27 @@
 import { useResumeData } from "@/hooks";
+import { toast } from "react-toastify";
 import { JSONViewer } from "ui";
 
 export const Preview = () => {
   const { data: resumeLocalData } = useResumeData();
 
-  return <JSONViewer data={resumeLocalData} />;
+  return (
+    <JSONViewer
+      data={resumeLocalData}
+      buttons={[
+        {
+          icon: "Share",
+          title: "URL 복사",
+          action: () => {
+            navigator.clipboard
+              .writeText(
+                `${process.env.VITE_APP_URL_MAIN}/resume_viewer/${resumeLocalData?.id}`
+              )
+              .then(() => toast.success("성공적으로 복사되었습니다"))
+              .catch(() => toast.error("복사중 오류가 발생했습니다"));
+          }
+        }
+      ]}
+    />
+  );
 };
diff --git a/packages/ui/src/components/PDFs/JSONViewer/index.tsx b/packages/ui/src/components/PDFs/JSONViewer/index.tsx
@@ -131,18 +131,6 @@ export const JSONViewer = ({
             });
           }
         },
-        {
-          icon: "Share",
-          title: "URL 복사",
-          action: () => {
-            navigator.clipboard
-              .writeText(
-                `${process.env.VITE_APP_URL_MAIN}/resume_viewer/${data?.id}`
-              )
-              .then(() => toast.success("성공적으로 복사되었습니다"))
-              .catch(() => toast.error("복사중 오류가 발생했습니다"));
-          }
-        },
         ...buttons
       ]}
       sidebars={sidebars}

diff --git a/packages/ui/src/components/PDFs/Resume/Layout/PageLayout.tsx b/packages/ui/src/components/PDFs/Resume/Layout/PageLayout.tsx
@@ -4,21 +4,22 @@ interface IProp {
   showPadding?: boolean;
   children: React.ReactElement | React.ReactElement[];
   scale?: number;
+  noOverflow?: boolean;
 }
 
 export const PageLayout = forwardRef(
-  ({ showPadding, children, scale }: IProp, ref: any) => {
+  ({ showPadding, children, noOverflow, scale }: IProp, ref: any) => {
     return (
       <div
         style={{
           transform: scale !== undefined ? `scale(${scale})` : "scale(1)",
           willChange: scale !== undefined ? "transform" : "",
           transformOrigin: "center center"
         }}
-        className={`${showPadding ? "w-[842px] h-[1191px] flex flex-center bg-gray-50" : scale ? "w-fit h-fit" : "w-[inherit] h-full"} overflow-auto flex-shrink-0 layout`}
+        className={`${showPadding && !!!noOverflow ? "w-[842px] h-[1191px] flex flex-center bg-gray-50" : scale ? "w-fit h-fit" : "w-[inherit] h-full"} overflow-auto flex-shrink-0 layout`}
       >
         <div
-          className={`w-[794px] h-[1123px] p-[30px] col-flex bg-white checkAble border-none flex-shrink-0 overflow-hidden`}
+          className={`w-[794px] ${noOverflow ? "h-fit" : "h-[1123px]"} p-[30px] col-flex bg-white checkAble border-none flex-shrink-0 overflow-hidden`}
           ref={ref}
         >
           {children}

diff --git a/packages/ui/src/components/PDFs/Resume/Render/Inform.tsx b/packages/ui/src/components/PDFs/Resume/Render/Inform.tsx
@@ -11,14 +11,21 @@ interface IProp {
   setMax: setType;
   showPadding?: boolean;
   scale?: number;
+  noOverflow?: boolean;
 }
 
-export const Inform = ({ data, setMax, showPadding, scale }: IProp) => {
+export const Inform = ({
+  data,
+  setMax,
+  showPadding,
+  noOverflow,
+  scale
+}: IProp) => {
   const [pages, setPages] = useState<HTMLElement[][]>([]);
   const pdf = useRef<HTMLElement>(null);
 
   useEffect(() => {
-    if (pdf?.current) {
+    if (pdf?.current && !!!noOverflow) {
       const over = checkOverflow(pdf?.current);
       setPages(over);
       setMax((prev) => ({ ...prev, inform: 1 + over.length })); // 기본 페이지 1개 + 오버된 페이지 n개
@@ -27,7 +34,12 @@ export const Inform = ({ data, setMax, showPadding, scale }: IProp) => {
 
   return (
     <>
-      <PageLayout ref={pdf} showPadding={showPadding} scale={scale}>
+      <PageLayout
+        ref={pdf}
+        showPadding={showPadding}
+        scale={scale}
+        noOverflow={noOverflow}
+      >
         <div className="flex w-full h-[60px] justify-between items-center">
           {/* 프로필 */}
           <div className="col-flex gap-2">
@@ -96,7 +108,9 @@ export const Inform = ({ data, setMax, showPadding, scale }: IProp) => {
         />
       </PageLayout>
 
-      <Overflow items={pages} showPadding={showPadding} scale={scale} />
+      {!!!noOverflow && (
+        <Overflow items={pages} showPadding={showPadding} scale={scale} />
+      )}
     </>
   );
 };
diff --git a/packages/ui/src/components/PDFs/Resume/Render/Projects.tsx b/packages/ui/src/components/PDFs/Resume/Render/Projects.tsx
@@ -12,14 +12,22 @@ interface IProp {
   keep?: any;
   showPadding?: boolean;
   scale?: number;
+  noOverflow?: boolean;
 }
 
 export const typeAgainChange = {
   PERSONAL: "개인",
   TEAM: "팀"
 };
 
-export const Projects = ({ data, setMax, keep, showPadding, scale }: IProp) => {
+export const Projects = ({
+  data,
+  setMax,
+  keep,
+  showPadding,
+  noOverflow,
+  scale
+}: IProp) => {
   const pdf = useRef<HTMLElement>(null);
   const [pages, setPages] = useState<HTMLElement[][]>([]);
   const isFirst = useRef(true);
@@ -33,7 +41,7 @@ export const Projects = ({ data, setMax, keep, showPadding, scale }: IProp) => {
   }, [data.element_id]);
 
   useEffect(() => {
-    if (!!pdf?.current) {
+    if (!!pdf?.current && !!!noOverflow) {
       const over = checkOverflow(pdf?.current);
       setPages(over);
       if (keep && setMax) {
@@ -70,7 +78,12 @@ export const Projects = ({ data, setMax, keep, showPadding, scale }: IProp) => {
 
   return (
     <>
-      <PageLayout ref={pdf} showPadding={showPadding} scale={scale}>
+      <PageLayout
+        ref={pdf}
+        showPadding={showPadding}
+        scale={scale}
+        noOverflow={noOverflow}
+      >
         <div className="flex w-full justify-between items-center">
           <div className={`flex gap-[20px] h-[60px] items-center`}>
             <Ternary data={data?.logo}>
@@ -111,7 +124,9 @@ export const Projects = ({ data, setMax, keep, showPadding, scale }: IProp) => {
         </>
       </PageLayout>
 
-      <Overflow items={pages} showPadding={showPadding} scale={scale} />
+      {!!!noOverflow && (
+        <Overflow items={pages} showPadding={showPadding} scale={scale} />
+      )}
     </>
   );
 };
diff --git a/packages/ui/src/components/PDFs/Resume/index.tsx b/packages/ui/src/components/PDFs/Resume/index.tsx
@@ -7,13 +7,15 @@ interface IProp {
   setMax?: setType;
   showPadding?: boolean;
   scale?: number;
+  noOverflow?: boolean;
 }
 
 export const Resume = ({
   data,
   setMax = () => {},
   showPadding,
-  scale
+  scale,
+  noOverflow
 }: IProp) => {
   const keep = useRef<Record<string, number>>({});
 
@@ -25,6 +27,7 @@ export const Resume = ({
           setMax={setMax}
           showPadding={showPadding}
           scale={scale}
+          noOverflow={noOverflow}
         />
         {data?.project_list.map((i) => (
           <Projects
@@ -33,6 +36,7 @@ export const Resume = ({
             showPadding={showPadding}
             scale={scale}
             keep={keep}
+            noOverflow={noOverflow}
           />
         ))}
       </>

diff --git a/packages/ui/src/components/PDFs/Viewer.tsx b/packages/ui/src/components/PDFs/Viewer.tsx
@@ -200,7 +200,7 @@ export const Viewer = ({
 
   return (
     <Layout buttons={_buttons} sidebars={_sidebars}>
-      <div className="w-full h-full flex flex-center">
+      <div className="w-full h-full flex flex-center relative">
         <Tutorial name="Viewer" steps={tutorialSteps} />
         <Ternary data={!!!url || loading}>
           <div className="z-30 left-0 top-0 w-full h-full bg-[#000000DD] flex flex-center absolute text-white">
@@ -209,34 +209,34 @@ export const Viewer = ({
               : "PDF를 렌더링하고 있습니다..."}
           </div>
         </Ternary>
-        <Document
-          onLoadSuccess={({ numPages }) => {
-            setMax(numPages - 1);
-            setLoading(false);
-          }}
-          file={url}
-          className="col-flex items-center h-fit gap-2"
-          onLoadStart={({ page }) => (page.style.background = "white")}
-        >
-          <span>
-            {page - 1} - {page} / {max}
-          </span>
-          <div className="flex gap-2 viewer">
-            <Page pageIndex={page} className="hidden absolute" />
-            <Page
-              pageIndex={page - 1}
-              scale={scale}
-              className={`${page - 1 === 0 ? "invisible" : ""} h-fit`}
-            />
+        <span className="absolute top-5">
+          {page - 1} - {page} / {max}
+        </span>
+        <div style={{ transform: `scale(${scale / 2})` }}>
+          <Document
+            onLoadSuccess={({ numPages }) => {
+              setMax(numPages - 1);
+              setLoading(false);
+            }}
+            file={url}
+            className="col-flex items-center h-fit gap-2"
+            onLoadStart={({ page }) => (page.style.background = "white")}
+          >
+            <div className="flex gap-2 viewer">
+              <Page
+                pageIndex={page - 1}
+                scale={2}
+                className={`${page - 1 === 0 ? "invisible" : ""} h-fit`}
+              />
 
-            <Page
-              pageIndex={page > max ? page - 1 : page}
-              scale={scale}
-              className={`${page > max ? "invisible" : ""} h-fit`}
-            />
-            <Page pageIndex={page + 2} className="hidden absolute" />
-          </div>
-        </Document>
+              <Page
+                pageIndex={page > max ? page - 1 : page}
+                scale={2}
+                className={`${page > max ? "invisible" : ""} h-fit`}
+              />
+            </div>
+          </Document>
+        </div>
       </div>
     </Layout>
   );