import React, { useEffect, useState } from "react"; import "./StudyMainSongWorld.css"; import SongWorldBasicLearning from "./../../components/contents/songWorld/SongWorldBasicLearning"; import SongWorldBasicVerification from "./../../components/contents/songWorld/SongWorldBasicVerification"; import SongWorldDeepLearning from "./../../components/contents/songWorld/SongWorldDeepLearning"; import SongWorldDeepVerification from "../../components/contents/songWorld/SongWorldDeepVerification"; import { useLocation } from "react-router-dom"; import axios from "axios"; import { useNavigate } from "react-router-dom"; const StudyMainSongWorld = () => { const [currentStep, setCurrentStep] = useState(1); const [question, setQuestion] = useState([]); const [timer, setTimer] = useState(60); const [title, setTitle] = useState([ "동요세상 기본학습", "동요세상 기본검증", "동요세상 심화학습", "동요세상 심화검증", "메인페이지", ]); const navigate = useNavigate(); const [contents, setContents] = useState(); const handleNext = () => { if (currentStep >= 4) { navigate("/"); // 메인 페이지로 이동합니다. 메인 페이지의 경로가 다르다면, 해당 경로로 수정하세요. setCurrentStep(1); // currentStep을 1로 설정합니다. } else { setCurrentStep(currentStep + 1); // 다음 단계로 상태 업데이트 setTimer(60); } }; const location = useLocation(); const [contentType, setContentType] = useState(location.state.planetStep); const fetchData = async () => { try { console.log("챕터" + location.state.mainStep); console.log("레슨" + location.state.lessonStep); console.log("행성" + location.state.planetStep); console.log(contentType); const response = await axios.get( `http://takensoftai.iptime.org:38888/studyType/songWorld?lesson=${location.state.lessonStep}&studyType=${location.state.planetStep}&chapter=${location.state.mainStep}`, { withCredentials: true } ); setContents(response.data); console.log(response.data); } catch (error) { console.error("Error fetching data: ", error); } }; useEffect(() => { fetchData(); }, []); useEffect(() => { if (contents) { setQuestion([ "동요를 듣고 따라 불러봐요", contents.basic.question, "동요를 듣고 따라 불러봐요", contents.deep.question, ]); } }, [contents]); useEffect(() => { if (timer === 0) return; const countdown = setInterval(() => { setTimer((prevTimer) => prevTimer - 1); }, 1000); return () => clearInterval(countdown); }, [timer]); return ( <>