Merge pull request #302 from kookmin-sw/feature/299

Chore : 개인정보 보호를 위한 기능 제거 및 캡쳐 방지 기능 보완
kookmin-sw · May 30, 2024 · aa2a40a · aa2a40a
2 parents 3de30c4 + 4ed7175
commit aa2a40a
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 17 deletions.
diff --git a/frontend/src/components/guardianMain/StepContents.js b/frontend/src/components/guardianMain/StepContents.js
@@ -24,10 +24,12 @@ export const StepContents = ({ index, current }) => {
       process: { content: "등록된 정보로 지능형 탐색 중입니다." },
       finish: {
         content: "탐색 완료했습니다.",
-        buttonText: "탐색 결과 확인하기",
-        callBack: () => {
-          navigate("/result", { state: { title: "1차 탐색 결과", step: "first" } });
-        },
+        buttonText: "",
+        callBack: () => {},
+        // buttonText: "탐색 결과 확인하기",
+        // callBack: () => {
+        //   navigate("/result", { state: { title: "1차 탐색 결과", step: "first" } });
+        // },
       },
     },
     {
@@ -47,10 +49,12 @@ export const StepContents = ({ index, current }) => {
       },
       finish: {
         content: "이미지 선택 완료했습니다.",
-        buttonText: "선별 이미지 확인하기",
-        callBack: () => {
-          navigate("/result", { state: { title: "선별 이미지 확인", step: "between" } });
-        },
+        buttonText: "",
+        callBack: () => {},
+        // buttonText: "선별 이미지 확인하기",
+        // callBack: () => {
+        //   navigate("/result", { state: { title: "선별 이미지 확인", step: "between" } });
+        // },
       },
     },
     {
@@ -60,10 +64,12 @@ export const StepContents = ({ index, current }) => {
       process: { content: "등록된 정보로 지능형 탐색 중입니다." },
       finish: {
         content: "탐색 완료했습니다.",
-        buttonText: "탐색 결과 확인하기",
-        callBack: () => {
-          navigate("/result", { state: { title: "2차 탐색 결과", step: "second" } });
-        },
+        buttonText: "",
+        callBack: () => {},
+        // buttonText: "탐색 결과 확인하기",
+        // callBack: () => {
+        //   navigate("/result", { state: { title: "2차 탐색 결과", step: "second" } });
+        // },
       },
     },
     {

diff --git a/frontend/src/pages/GuardianSelectImgPage.js b/frontend/src/pages/GuardianSelectImgPage.js
@@ -94,16 +94,33 @@ function GuardianSelectImgPage() {
     getGuardianSelectImage().then((data) => {
       setData(data);
     });
+
+    // 우클릭 방지
+    document.addEventListener("contextmenu", preventContextMenu);
+    // 화면 캡쳐 방지 키 조합
+    document.addEventListener("keydown", preventScreenshot);
+    // 모바일 화면 캡쳐 방지
+    window.addEventListener("blur", handleBlur);
+
+    return () => {
+      document.removeEventListener("contextmenu", preventContextMenu);
+      document.removeEventListener("keydown", preventScreenshot);
+      window.removeEventListener("blur", handleBlur);
+    };
   }, []);
 
-  // JavaScript로 화면 캡처 방지 설정
-  document.addEventListener("contextmenu", (e) => e.preventDefault());
-  document.addEventListener("keydown", (e) => {
+  const preventContextMenu = (e) => e.preventDefault();
+
+  const preventScreenshot = (e) => {
     if (e.key === "PrintScreen" || (e.ctrlKey && e.key === "p")) {
       e.preventDefault();
-      alert("Screen capture is disabled");
+      alert("화면 캡쳐가 금지되어 있습니다.");
     }
-  });
+  };
+
+  const handleBlur = () => {
+    alert("화면 캡쳐가 감지되었습니다.");
+  };
 
   const onSelect = (select) => {
     setSelectedImg((prev) => {

diff --git a/frontend/src/pages/GuardianShowResultPage.js b/frontend/src/pages/GuardianShowResultPage.js
@@ -17,7 +17,31 @@ function GuardianShowResultPage() {
 
   useEffect(() => {
     fetchData();
+    // 우클릭 방지
+    document.addEventListener("contextmenu", preventContextMenu);
+    // 화면 캡쳐 방지 키 조합
+    document.addEventListener("keydown", preventScreenshot);
+    // 모바일 화면 캡쳐 방지
+    window.addEventListener("blur", handleBlur);
+
+    return () => {
+      document.removeEventListener("contextmenu", preventContextMenu);
+      document.removeEventListener("keydown", preventScreenshot);
+      window.removeEventListener("blur", handleBlur);
+    };
   }, []);
+  const preventContextMenu = (e) => e.preventDefault();
+
+  const preventScreenshot = (e) => {
+    if (e.key === "PrintScreen" || (e.ctrlKey && e.key === "p")) {
+      e.preventDefault();
+      alert("화면 캡쳐가 금지되어 있습니다.");
+    }
+  };
+
+  const handleBlur = () => {
+    alert("화면 캡쳐가 감지되었습니다.");
+  };
 
   useEffect(() => {}, [data]);