fix: 화면 벗어날 때 모달이 뜨는 방식이 아닌 뒤로가기 버튼을 눌렀을 때 띄우는 방식으로 변경

src/components/common/header/Header.tsx

@@ -1,13 +1,14 @@
 import { useNavigate } from "react-router-dom";
 import * as S from "./Header.styled";
+import { HeaderProps } from "@type/header";
 
-const Header = ({ text }: { text: string }) => {
+const Header = ({ text, backBtn }: HeaderProps) => {
   const navigate = useNavigate();
 
   return (
     <S.Wrapper>
       <S.Container>
-        <S.StyledFiChevronLeft onClick={() => navigate(-1)} />
+        <S.StyledFiChevronLeft onClick={backBtn} />
         <div id="textDiv">{text}</div>
         <div id="emptyDiv"></div>
       </S.Container>

src/components/common/spinner/LoadingScreen.tsx

@@ -57,7 +57,7 @@ export default LoadingScreen;
 const LoadingContainer = styled.div`
   position: relative;
   width: 100%;
-  height: 100vh;
+  height: 80vh;
   display: flex;
   flex-direction: column;
   align-items: center;

src/components/learn/TaleLearn.tsx

@@ -12,12 +12,11 @@ import {
 } from "@type/learning";
 import { QUIZ_STAGES, QuizType } from "@utils/constants/QuizStage";
 import SpeakPractice from "./quiz/SpeakPractice";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { postAnswerCount } from "@apis/learning";
 import Header from "@components/common/header/Header";
 import styled from "styled-components";
 import EssayQuiz from "./quiz/EssayQuiz";
-import useNavigationWarning from "@hooks/useNavigationWarning";
 import { useNavigate } from "react-router-dom";
 import Modal from "@components/common/modal/Modal";
 
@@ -46,8 +45,16 @@ const TaleLearn = ({ quizData }: TaleLearnProps) => {
   } = useLearning(quizData);
   const navigate = useNavigate();
 
-  const { showModal, confirmNavigation, cancelNavigation } =
-    useNavigationWarning(() => navigate("/learnTale"));
+  const [showModal, setShowModal] = useState(false);
+
+  const confirmNavigation = () => {
+    setShowModal(false);
+    navigate("/learnTale");
+  };
+
+  const cancelNavigation = () => {
+    setShowModal(false);
+  };
 
   useEffect(() => {
     const postResult = async (languageTaleId: number, answerCounts: number) => {
@@ -119,7 +126,9 @@ const TaleLearn = ({ quizData }: TaleLearnProps) => {
 
   return (
     <>
-      {currentStep < totalSteps - 1 && <Header text="학습하기" />}
+      {currentStep < totalSteps - 1 && (
+        <Header text="학습하기" backBtn={() => setShowModal(true)} />
+      )}
       {currentStep < totalSteps - 1 ? (
         <>
           <Wrapper>
@@ -181,8 +190,7 @@ const TaleLearn = ({ quizData }: TaleLearnProps) => {
       ) : (
         <FinishScreen
           imgURL="/learningFinish.png"
-          title="학습이 완료되었습니다
-          잘했어요!"
+          title="학습이 완료되었습니다. 잘했어요!"
           sub="모든 과정을 마무리했어요"
         />
       )}
@@ -199,7 +207,6 @@ const Wrapper = styled.div`
   align-items: center;
   width: 90%;
   min-height: 88vh;
-  overflow: scroll;
   height: fit-content;
   padding-bottom: 2rem;
 `;

src/components/learn/learn.styled.ts

@@ -32,7 +32,6 @@ export const Wrapper = styled.div`
   align-items: center;
   width: 90%;
   min-height: 100vh;
-  overflow: scroll;
   height: fit-content;
   padding-bottom: 2rem;
 `;

src/components/learn/pre/PreLearningQuestion.tsx

@@ -12,7 +12,6 @@ import useSelectLevel from "@hooks/useSelectLevel";
 import SelectOptionList from "@common/selectOption/SelectOptionList";
 import styled from "styled-components";
 import CreateQuiz from "./CreateQuiz";
-import useNavigationWarning from "@hooks/useNavigationWarning";
 import Modal from "@components/common/modal/Modal";
 
 const PreLearningQuestion = () => {
@@ -25,12 +24,11 @@ const PreLearningQuestion = () => {
   const [step, setStep] = useState(0);
 
   const [userLearnedInfo, setUserLearnedInfo] = useState<any[]>();
-
-  const language = nationElements.find((e) => e.value === selectLanguage);
   const [currLanguageTaleId, setCurrLanguageTaleId] = useState<number>();
 
-  const { showModal, confirmNavigation, cancelNavigation } =
-    useNavigationWarning(() => navigate("/learnTale"));
+  const [showModal, setShowModal] = useState(false);
+
+  const language = nationElements.find((e) => e.value === selectLanguage);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -84,9 +82,18 @@ const PreLearningQuestion = () => {
     }
   };
 
+  const confirmNavigation = () => {
+    setShowModal(false);
+    navigate("/learnTale");
+  };
+
+  const cancelNavigation = () => {
+    setShowModal(false);
+  };
+
   return (
     <>
-      <Header text="학습하기" />
+      <Header text="학습하기" backBtn={() => setShowModal(true)} />
       <Wrapper>
         {step < 2 && <ProgressBar percentage={step === 0 ? 40 : 80} />}
         {step === 0 && (
@@ -152,7 +159,6 @@ const Wrapper = styled.div`
   justify-content: space-between;
   width: 90%;
   min-height: 88vh;
-  overflow: scroll;
   height: fit-content;
   padding-bottom: 2rem;
 `;

src/components/main/homeMain/homeRecentTales/MoreRecentTales.tsx

@@ -1,5 +1,5 @@
 import Header from "@components/common/header/Header";
-import { useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import * as S from "./HomeRecentTales.styled";
 import { CardProps } from "@type/card";
 import { useMediaQuery } from "react-responsive";
@@ -12,14 +12,16 @@ const MoreRecentTales = () => {
   const location = useLocation();
   const { allTales } = location.state || { allTales: [] };
 
+  const navigate = useNavigate();
+
   const chunkedTales: CardProps[][] = [];
   for (let i = 0; i < allTales.length; i += 3) {
     chunkedTales.push(allTales.slice(i, i + 3));
   }
 
   return (
     <>
-      <Header text="최근 생성한 동화" />
+      <Header text="최근 생성한 동화" backBtn={() => navigate(-1)} />
       <>
         <S.MoreWrapper>
           {mediaQuery ? (

src/components/main/learnMain/learned/LearnedMore.tsx

@@ -7,21 +7,24 @@ import {
 import Header from "@components/common/header/Header";
 import { LearnedProps } from "@type/card";
 import { useMediaQuery } from "react-responsive";
-import { useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 
 const LearnedMore = () => {
   const mediaQuery = useMediaQuery({ query: "(max-width: 710px)" });
 
   const location = useLocation();
   const { learned } = location.state || null;
+
+  const navigate = useNavigate();
+
   const chunkedTales: LearnedProps[][] = [];
   const learnedSlice = learned.slice(0, 9);
   for (let i = 0; i < learnedSlice.length; i += 3) {
     chunkedTales.push(learnedSlice.slice(i, i + 3));
   }
   return (
     <>
-      <Header text="최근 학습한 동화" />
+      <Header text="최근 학습한 동화" backBtn={() => navigate(-1)} />
       <MainWrapper>
         <ItemWrapper>
           {mediaQuery ? (

src/components/main/learnMain/unLearned/UnLearnedMore.tsx

@@ -7,21 +7,24 @@ import {
 import Header from "@components/common/header/Header";
 import { UnLearnedProps } from "@type/card";
 import { useMediaQuery } from "react-responsive";
-import { useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 
 const UnLearnedMore = () => {
   const mediaQuery = useMediaQuery({ query: "(max-width: 710px)" });
 
   const location = useLocation();
   const { unLearned } = location.state || null;
+
+  const navigate = useNavigate();
+
   const chunkedTales: UnLearnedProps[][] = [];
   const unLearnedSlice = unLearned.slice(0, 9);
   for (let i = 0; i < unLearned.length; i += 3) {
     chunkedTales.push(unLearned.slice(i, i + 3));
   }
   return (
     <>
-      <Header text="학습하지 않은 동화" />
+      <Header text="학습하지 않은 동화" backBtn={() => navigate(-1)} />
       <MainWrapper>
         <ItemWrapper>
           {mediaQuery ? (

src/components/main/learnMain/word/WordMore.tsx

@@ -1,5 +1,5 @@
 import Header from "@components/common/header/Header";
-import { useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import * as S from "./Word.styled";
 import { WordProps } from "@type/card";
 import { MainWrapper } from "@components/common/common.styled";
@@ -8,9 +8,10 @@ import { useState } from "react";
 const WordMore = () => {
   const location = useLocation();
   const { word } = location.state || { word: [] };
-  console.log(word);
   const [selectedWords, setSelectedWords] = useState<WordProps[]>([]);
 
+  const navigate = useNavigate();
+
   const handleWordClick = (selectedWord: WordProps) => {
     if (selectedWords.some((w) => w.word === selectedWord.word)) {
       setSelectedWords(
@@ -23,7 +24,7 @@ const WordMore = () => {
 
   return (
     <>
-      <Header text="단어장" />
+      <Header text="단어장" backBtn={() => navigate(-1)} />
       <MainWrapper>
         <S.GridWrapper>
           {word.map((word: WordProps) => {

src/components/tales/createTale/CreateTale.tsx

@@ -2,16 +2,24 @@ import { createTale } from "@apis/createTales";
 import Header from "@components/common/header/Header";
 import Modal from "@components/common/modal/Modal";
 import LoadingScreen from "@components/common/spinner/LoadingScreen";
-import useNavigationWarning from "@hooks/useNavigationWarning";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 
 const CreateTale = () => {
   const location = useLocation();
   const { requestData } = location.state || {};
   const navigate = useNavigate();
-  const { showModal, confirmNavigation, cancelNavigation } =
-    useNavigationWarning(() => navigate("/createTale"));
+
+  const [showModal, setShowModal] = useState(false);
+
+  const confirmNavigation = () => {
+    setShowModal(false);
+    navigate("/createTale");
+  };
+
+  const cancelNavigation = () => {
+    setShowModal(false);
+  };
 
   useEffect(() => {
     const createData = async () => {
@@ -28,7 +36,7 @@ const CreateTale = () => {
 
   return (
     <>
-      <Header text="동화 생성" />
+      <Header text="동화 생성" backBtn={() => setShowModal(true)} />
       <LoadingScreen text="동화" />
       {showModal && (
         <Modal
@@ -42,16 +50,3 @@ const CreateTale = () => {
 };
 
 export default CreateTale;
-
-// import useNavigationWarning from "@hooks/useNavigationWarning";
-
-// const { showModal, confirmNavigation, cancelNavigation } =
-// useNavigationWarning(() => navigate("/createTale"));
-
-// {showModal && (
-//   <Modal
-//     message="동화만들기를 종료하시겠어요?"
-//     onConfirm={confirmNavigation}
-//     onCancel={cancelNavigation}
-//   />
-// )}

src/components/tales/readTale/ReadTale.styled.ts

@@ -2,19 +2,19 @@ import styled from "styled-components";
 
 export const Wrapper = styled.div`
   width: 95%;
-  /* height: fit-content; */
+  height: 98%;
   overflow-y: hidden;
   display: flex;
   flex-direction: column;
-  justify-content: space-evenly;
-  padding-bottom: 1rem;
+  justify-content: space-around;
+  padding-top: 0.5%;
 `;
 
 export const ReadTaleHead = styled.div`
   width: 100%;
   display: flex;
   justify-content: space-between;
-  padding: 2.8rem 0;
+  /* padding: 2.8rem 0; */
 `;
 
 export const TitleWrapper = styled.div`
@@ -37,7 +37,7 @@ export const Complete = styled.div`
 export const TaleWrapper = styled.div`
   width: 100%;
   height: 75vh;
-  max-height: 85%;
+  max-height: 75%;
   overflow-y: scroll;
   font-size: 1.9rem;
   margin-bottom: 1rem;

src/components/tales/readTale/ReadTale.tsx

@@ -8,7 +8,6 @@ import { useLocation, useNavigate } from "react-router-dom";
 import { commonLanguageElements } from "@utils/defaultData";
 import { ResponseTaleData } from "@type/createTale";
 import { speakText, toggleSpeech } from "@utils/speechUtil";
-import useNavigationWarning from "@hooks/useNavigationWarning";
 import Modal from "@components/common/modal/Modal";
 
 const ReadTale = () => {
@@ -20,8 +19,16 @@ const ReadTale = () => {
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
   const [isSpeaking, setIsSpeaking] = useState<boolean>(false);
 
-  const { showModal, confirmNavigation, cancelNavigation } =
-    useNavigationWarning(() => navigate("/home"));
+  const [showModal, setShowModal] = useState(false);
+
+  const confirmNavigation = () => {
+    setShowModal(false);
+    navigate("/home");
+  };
+
+  const cancelNavigation = () => {
+    setShowModal(false);
+  };
 
   const selectSentence = (index: number) => {
     if (selectedIndex === index) {
@@ -61,7 +68,7 @@ const ReadTale = () => {
 
   return (
     <>
-      <Header text="동화 읽기" />
+      <Header text="동화 읽기" backBtn={() => setShowModal(true)} />
       <S.Wrapper>
         {data && (
           <>