File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import React, { useEffect, useState } from "react";
import "./mainp.css";
import TwoMainUnit from "../../components/mainUnit/twoMainUnit";
import OneMainUnit from "../../components/mainUnit/oneMainunit";
import AbilitiesChart from "../../components/chart/AbilitiesChart";
import axios from "axios";
import { useCookies } from "react-cookie";
const MainP = () => {
const [cookies, setCookie, removeCookie] = useCookies(["loggedIn"]);
const [currentStep, setCurrentStep] = useState(1);
const [abilities, setAbilities] = useState([
{ name: "어휘", level: 50 },
{ name: "문장", level: 50 },
{ name: "문법", level: 50 },
{ name: "이해", level: 50 },
{ name: "소통", level: 50 },
{ name: "집중", level: 50 },
]);
const transformData = (data) => {
return [
{ name: "어휘", level: data.word },
{ name: "문장", level: data.sentence },
{ name: "문법", level: data.grammar },
{ name: "이해", level: data.understand },
{ name: "표현", level: data.expression },
{ name: "집중", level: data.focus },
];
};
const renderComponent = () => {
switch (currentStep) {
case 1:
return <OneMainUnit />;
case 2:
return <TwoMainUnit />;
default:
return null;
}
};
const fetchData = async () => {
try {
const response = await axios.get(`http://localhost:8080/rating`, {
withCredentials: true,
});
if (response.data && response.data.result) {
setAbilities(transformData(response.data.data));
}
console.log(response.data);
} catch (error) {
console.error("Error fetching data: ", error);
}
};
useEffect(() => {
fetchData();
}, []);
return (
<div className="mainp-container">
<div className="mainp-left-wrap">
<div className="mainp-left-top">
<img src="/images/good.png" className="mainp-left-img" />
<div className="mainp-left-top-div">
어서와~ 꿈 속 우주공간은 처음이지? 여행하고 싶은 행성을 골라봐~
<div className="bubble-tail"></div>
</div>
</div>
<div className="mainp-left">
<AbilitiesChart abilities={abilities} />
</div>
</div>
<div className="mainp-right">
<div className="mainp-menu">
<ul>
{[...Array(8).keys()].map((index) => (
<li
key={index + 1}
className={currentStep === index + 1 ? "active" : ""}
onClick={() => {
setCurrentStep(index + 1);
console.log(currentStep);
}}
>
{index + 1}단원
</li>
))}
</ul>
</div>
<div className="mainp-components">
<OneMainUnit initialStep={currentStep} />
</div>
</div>
</div>
);
};
export default MainP;