Merge pull request #176 from Learn-and-Give/develop

Release/v.1.7.1
Learn-and-Give · Oct 26, 2022 · df35116 · df35116
2 parents b239c3a + bc2d788
commit df35116
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 21 deletions.
diff --git a/components/write/blocks/ImageInputBlock.tsx b/components/write/blocks/ImageInputBlock.tsx
@@ -43,6 +43,13 @@ function ImageInputBlock({ contentImageState }: Props) {
     readImage(e.dataTransfer.files[0]);
   };
 
+  const onContentImageChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      setContentImage(e.target.files[0]);
+      readImage(e.target.files[0]);
+    }
+  };
+
   const readImage = (image: File) => {
     const reader = new FileReader();
     reader.onload = function (e) {
@@ -55,14 +62,6 @@ function ImageInputBlock({ contentImageState }: Props) {
     setContentImage(null);
     setContentImageUrl(null);
   };
-
-  const onContentImageChange = (e: ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files) {
-      setContentImage(e.target.files[0]);
-      readImage(e.target.files[0]);
-    }
-  };
-
   const onModalStateChange = ({ state }: { state: boolean }) => {
     setContentImageModal(state);
   };
@@ -91,6 +90,7 @@ function ImageInputBlock({ contentImageState }: Props) {
             accept=".png,.jpg,.jpeg"
             id="input-file"
             style={{ display: "none" }}
+            aria-hidden
             onChange={onContentImageChange}
           />
           <DndBox

diff --git a/components/write/containers/HeaderContainer.tsx b/components/write/containers/HeaderContainer.tsx
@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { useRouter } from "next/router";
 import React from "react";
 import styled from "styled-components";
 import {
@@ -18,20 +19,38 @@ function HeaderContainer({ challengeId }: Props) {
     challengeId,
     week: currentWeek || 0,
   });
+
+  const router = useRouter();
+
+  const onLinkClick = (link: string) => {
+    const pageLeaveConfirmMessage =
+      "페이지를 떠나시겠습니까? 변경 사항이 저장되지 않을 수 있습니다.";
+    const pageLeave = confirm(pageLeaveConfirmMessage);
+    if (pageLeave) {
+      router.push(link);
+    }
+  };
+
   return (
     <Container>
       <BreadCrump>
-        <Link href={`/`}>
-          <BreadCrumpButton type="button">내 챌린지</BreadCrumpButton>
-        </Link>
+        <BreadCrumpButton type="button" onClick={() => onLinkClick(`/`)}>
+          내 챌린지
+        </BreadCrumpButton>
         <Dash aria-hidden>/</Dash>
-        <Link href={`/challenges/${challengeId}`}>
-          <BreadCrumpButton type="button">{challenge?.title}</BreadCrumpButton>
-        </Link>
+        <BreadCrumpButton
+          type="button"
+          onClick={() => onLinkClick(`/challenges/${challengeId}`)}
+        >
+          {challenge?.title}
+        </BreadCrumpButton>
         <Dash aria-hidden>/</Dash>
-        <Link href={`/challenges/${challengeId}/write`}>
-          <BreadCrumpButton type="button">문제 제출하기</BreadCrumpButton>
-        </Link>
+        <BreadCrumpButton
+          type="button"
+          onClick={() => onLinkClick(`/challenges/${challengeId}/write`)}
+        >
+          문제 제출하기
+        </BreadCrumpButton>
       </BreadCrump>
       <Horizontal />
       <TitleBlock>

diff --git a/components/write/containers/WriteContainer.tsx b/components/write/containers/WriteContainer.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import ImageInputBlock from "../blocks/ImageInputBlock";
 import { Icon } from "@iconify/react";

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -69,7 +69,7 @@ function MyApp({ Component, pageProps }: AppProps) {
   useEffect(() => {
     if (
       !getApiToken() &&
-      !["/", "/login", "/manual", "/introcudce", "/password-notice"].includes(
+      !["/", "/login", "/manual", "/introduce", "/password-notice"].includes(
         router.asPath
       )
     ) {

diff --git a/pages/challenges/[cid]/write.tsx b/pages/challenges/[cid]/write.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from "next/router";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import HeaderContainer from "../../../components/write/containers/HeaderContainer";
 import WriteContainer from "../../../components/write/containers/WriteContainer";
@@ -9,6 +9,34 @@ function QuizWritePage() {
   const router = useRouter();
   const challengeId = String(router.query.cid);
 
+  const onBeforeUnload = (e: BeforeUnloadEvent) => {
+    e.preventDefault();
+    e.returnValue = "";
+  };
+
+  const onPopState = () => {
+    const pageLeaveConfirmMessage =
+      "페이지를 떠나시겠습니까? 변경 사항이 저장되지 않을 수 있습니다.";
+    const pageLeave = confirm(pageLeaveConfirmMessage);
+    if (pageLeave) {
+      router.push(`/challenges/${challengeId}`);
+    } else {
+      history.pushState(null, "", location.href);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("beforeunload", onBeforeUnload);
+
+    history.pushState(null, "", location.href);
+    window.addEventListener("popstate", onPopState);
+
+    return () => {
+      window.removeEventListener("beforeunload", onBeforeUnload);
+      window.removeEventListener("popstate", onPopState);
+    };
+  }, []);
+
   return (
     <Background>
       <Frame>