Commit @79ca85ebd25e8f2dc0cc11e7bfc8cc669b9be498

박민혁 05-27

240527 박민혁 금오공대 최종본

@79ca85ebd25e8f2dc0cc11e7bfc8cc669b9be498

6d74a74

79ca85e

README.md

--- README.md

+++ README.md

...	...	@@ -1,1 +1,70 @@
1		-Test
	1	+# Getting Started with Create React App
	2	+
	3	+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
	4	+
	5	+## Available Scripts
	6	+
	7	+In the project directory, you can run:
	8	+
	9	+### `npm start`
	10	+
	11	+Runs the app in the development mode.\
	12	+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
	13	+
	14	+The page will reload when you make changes.\
	15	+You may also see any lint errors in the console.
	16	+
	17	+### `npm test`
	18	+
	19	+Launches the test runner in the interactive watch mode.\
	20	+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
	21	+
	22	+### `npm run build`
	23	+
	24	+Builds the app for production to the `build` folder.\
	25	+It correctly bundles React in production mode and optimizes the build for the best performance.
	26	+
	27	+The build is minified and the filenames include the hashes.\
	28	+Your app is ready to be deployed!
	29	+
	30	+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
	31	+
	32	+### `npm run eject`
	33	+
	34	+Note: this is a one-way operation. Once you `eject`, you can't go back!
	35	+
	36	+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
	37	+
	38	+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
	39	+
	40	+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
	41	+
	42	+## Learn More
	43	+
	44	+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
	45	+
	46	+To learn React, check out the [React documentation](https://reactjs.org/).
	47	+
	48	+### Code Splitting
	49	+
	50	+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
	51	+
	52	+### Analyzing the Bundle Size
	53	+
	54	+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
	55	+
	56	+### Making a Progressive Web App
	57	+
	58	+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
	59	+
	60	+### Advanced Configuration
	61	+
	62	+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
	63	+
	64	+### Deployment
	65	+
	66	+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
	67	+
	68	+### `npm run build` fails to minify
	69	+
	70	+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

6d74a74

79ca85e

src/App.js

--- src/App.js

+++ src/App.js


 import StudyMainFairyWorld from "./pages/studyMainFairyWorld/StudyMainFairyWorld";
 import StudyMainFairyTravel from "./pages/studyMainFairyTravel/StudyMainFairyTravel";
 import MainStudent from "./pages/main/MainStudent";
+import MainTeacher from "./pages/main/MainTeacher";
+import MainTeacher2 from "./pages/main/MainTeacher2";
+import MainParent from "./pages/main/MainParent";
+import MainSelect from "./pages/main/MainSelect";
 
 function App() {
   return (

           />
           <Route path="/oneMainUnit" element={<OneMainUnit />} />
           <Route path="/mainStudent" element={<MainStudent />} />
+          <Route path="/mainTeacher" element={<MainTeacher />} />
+          <Route path="/mainTeacher2" element={<MainTeacher2 />} />
+          <Route path="/mainParent" element={<MainParent />} />
+          <Route path="/mainSelect" element={<MainSelect />} />
         </Routes>
       </BrowserRouter>
     </div>

79ca85e

src/components/chart/AllBarChart.jsx (added)

+++ src/components/chart/AllBarChart.jsx

...	...	@@ -0,0 +1,57 @@
	1	+import React, { useEffect, useRef } from "react";
	2	+import { Chart } from "chart.js/auto";
	3	+
	4	+const AllBarChart = ({ labels, datasets }) => {
	5	+ const chartRef = useRef(null);
	6	+
	7	+ useEffect(() => {
	8	+ const ctx = chartRef.current.getContext("2d");
	9	+ const chartInstance = new Chart(ctx, {
	10	+ type: "bar",
	11	+ data: {
	12	+ labels: labels,
	13	+ datasets: datasets,
	14	+ },
	15	+ options: {
	16	+ responsive: true,
	17	+ plugins: {
	18	+ legend: {
	19	+ position: "top",
	20	+ },
	21	+ },
	22	+ scales: {
	23	+ x: {
	24	+ title: {
	25	+ display: true,
	26	+ text: "날짜",
	27	+ },
	28	+ ticks: {
	29	+ font: {
	30	+ family: "JalnanGothic, sans-serif",
	31	+ },
	32	+ },
	33	+ },
	34	+ y: {
	35	+ title: {
	36	+ display: true,
	37	+ text: "점수",
	38	+ },
	39	+ ticks: {
	40	+ font: {
	41	+ family: "JalnanGothic, sans-serif",
	42	+ },
	43	+ },
	44	+ },
	45	+ },
	46	+ },
	47	+ });
	48	+
	49	+ return () => {
	50	+ chartInstance.destroy();
	51	+ };
	52	+ }, [labels, datasets]);
	53	+
	54	+ return <canvas ref={chartRef} />;
	55	+};
	56	+
	57	+export default AllBarChart;

6d74a74

79ca85e

src/components/chart/AllLineChart.jsx

--- src/components/chart/AllLineChart.jsx

+++ src/components/chart/AllLineChart.jsx


 import React, { useEffect, useRef } from "react";
 import { Chart } from "chart.js/auto";
 
-const AllLineChart = ({ datasets }) => {
+const AllLineChart = ({ labels, datasets }) => {
   const chartRef = useRef(null);
 
   useEffect(() => {

     const chartInstance = new Chart(ctx, {
       type: "line",
       data: {
-        labels: ["월", "화", "수", "목", "금", "토", "일"],
-        datasets: datasets,
+        labels: labels,
+        datasets: datasets.map((dataset) => ({
+          ...dataset,
+          xAxisID: "x-axis-0", // Add xAxisID
+          yAxisID: "y-axis-0", // Add yAxisID
+        })),
       },
       options: {
         responsive: true,

           },
         },
         scales: {
-          x: {
-            display: true,
+          "x-axis-0": {
+            type: "category",
+            position: "bottom",
             title: {
               display: true,
-              text: "요일",
+              text: "날짜",
+            },
+            ticks: {
+              font: {
+                family: "JalnanGothic, sans-serif",
+              },
             },
           },
-          y: {
-            display: true,
+          "y-axis-0": {
+            type: "linear",
+            position: "left",
             title: {
               display: true,
               text: "점수",
+            },
+            ticks: {
+              font: {
+                family: "JalnanGothic, sans-serif",
+              },
             },
           },
         },

     return () => {
       chartInstance.destroy();
     };
-  }, [datasets]);
+  }, [labels, datasets]);
 
   return <canvas ref={chartRef} />;
 };

6d74a74

79ca85e

src/components/header/Header.jsx

--- src/components/header/Header.jsx

+++ src/components/header/Header.jsx


       <div
         className="icon"
         onClick={() => {
-          navigate("/");
+          navigate("/mainSelect");
         }}
       >
         <img src="/images/logo/logo3.png" />

       <div className="nav">
         {cookies.loggedIn ? (
           <>
+            <span className="nav-item">{cookies.username}님</span>
+
             <div className="nav-item" onClick={goMypage}>
               마이페이지
             </div>

6d74a74

79ca85e

src/pages/login/LoginPage.jsx

--- src/pages/login/LoginPage.jsx

+++ src/pages/login/LoginPage.jsx


           path: "/",
           expires: new Date(Date.now() + 30 * 60 * 1000),
         });
-        navigate("/");
+        navigate("/mainSelect");
         console.log(response.data);
       })
       .catch((error) => {

79ca85e

src/pages/main/MainParent.css (added)

+++ src/pages/main/MainParent.css

...	...	@@ -0,0 +1,50 @@
	1	+.mainstudent-student-information {
	2	+ width: 50%;
	3	+ display: flex;
	4	+ justify-content: center;
	5	+ align-items: center;
	6	+}
	7	+
	8	+.mainparent-recommend-keys {
	9	+ width: 100%;
	10	+ height: 50%;
	11	+ display: flex;
	12	+ justify-content: space-around;
	13	+ align-items: center;
	14	+ flex-wrap: wrap;
	15	+}
	16	+
	17	+.mainstudent-parent-information {
	18	+ width: 50%;
	19	+ display: flex;
	20	+ justify-content: center;
	21	+ align-items: center;
	22	+ font-size: 20px;
	23	+ margin: 3% 0;
	24	+}
	25	+.health-good {
	26	+ color: green;
	27	+}
	28	+
	29	+.health-excellent {
	30	+ color: blue;
	31	+}
	32	+
	33	+.health-warning {
	34	+ color: yellow;
	35	+}
	36	+
	37	+.health-danger {
	38	+ color: red;
	39	+}
	40	+.mainparent-recommend-question {
	41	+ text-align: center;
	42	+ height: 10%;
	43	+ padding-bottom: 0;
	44	+ box-sizing: border-box;
	45	+ display: flex;
	46	+ justify-content: space-around;
	47	+ align-items: center;
	48	+ margin-top: -5%;
	49	+ margin-bottom: 2%;
	50	+}

79ca85e

src/pages/main/MainParent.jsx (added)

+++ src/pages/main/MainParent.jsx

...	...	@@ -0,0 +1,406 @@
	1	+import React, { useEffect, useState } from "react";
	2	+import { useActionData, useNavigate } from "react-router-dom";
	3	+import axios from "axios";
	4	+import "./MainParent.css";
	5	+import AllLineChart from "../../components/chart/AllLineChart";
	6	+import AllBarChart from "../../components/chart/AllBarChart";
	7	+
	8	+const MainParent = () => {
	9	+ const navigate = useNavigate();
	10	+ const [solved, setSolved] = useState([]);
	11	+ const [topTwoKeys, setTopTwoKeys] = useState([]);
	12	+ const [student, setStudent] = useState();
	13	+ const [allDatasets, setAllDatasets] = useState([]);
	14	+ const [datasets, setDatasets] = useState([]);
	15	+ const [labels, setLabels] = useState([]);
	16	+ const [progress, setProgress] = useState(0);
	17	+ const [health, setHealth] = useState();
	18	+ const [wordDataset, setWordDataset] = useState([]);
	19	+ const [focusDataset, setFocusDataset] = useState([]);
	20	+ const [grammarDataset, setGrammarDataset] = useState([]);
	21	+ const [sentenceDataset, setSentenceDataset] = useState([]);
	22	+ const [understandDataset, setUnderstandDataset] = useState([]);
	23	+ const [expressionDataset, setExpressionDataset] = useState([]);
	24	+ const [sumDataset, setSumDataset] = useState([]);
	25	+ const [sumAverage, setSumAverage] = useState();
	26	+ const [images, setImages] = useState({
	27	+ 동화여행: "fairytravel.png",
	28	+ 동화세계: "fairyworld.png",
	29	+ 문법요정: "grammerfariy.png",
	30	+ 문법랜드: "grammerland.png",
	31	+ 문장쑥쑥: "sentenceabsorb.png",
	32	+ 문장일기: "sentencediary.png",
	33	+ 동요여행: "songtravel.png",
	34	+ 동요나라: "songcountry.png",
	35	+ 어휘력쑥쑥: "wordabsorb.png",
	36	+ 단어뭉치: "wordbundle.png",
	37	+ });
	38	+
	39	+ const expressionAndUnderstandDatasets = [
	40	+ {
	41	+ label: "이해",
	42	+ data: understandDataset.length ? understandDataset[0].data : [],
	43	+ backgroundColor: "rgba(54, 162, 235, 0.5)",
	44	+ },
	45	+ {
	46	+ label: "표현",
	47	+ data: expressionDataset.length ? expressionDataset[0].data : [],
	48	+ backgroundColor: "rgba(255, 206, 86, 0.5)",
	49	+ },
	50	+ ];
	51	+
	52	+ const formatDate = (dateString) => {
	53	+ const date = new Date(dateString);
	54	+ const month = String(date.getMonth() + 1).padStart(2, "0");
	55	+ const day = String(date.getDate()).padStart(2, "0");
	56	+ return `${month}-${day}`;
	57	+ };
	58	+
	59	+ const fetchStudent = async () => {
	60	+ try {
	61	+ const response = await axios.get(
	62	+ `http://localhost:8080/member/student?userId=sangbabo`,
	63	+ {
	64	+ withCredentials: true,
	65	+ }
	66	+ );
	67	+ console.log(response.data.data.sum);
	68	+ setStudent(response.data.data);
	69	+ } catch (error) {
	70	+ console.error("Error fetching data: ", error);
	71	+ }
	72	+ };
	73	+
	74	+ const fetchSolved = async () => {
	75	+ try {
	76	+ const response = await axios.get(
	77	+ `http://localhost:8080/parents/solved?userId=sangbabo`,
	78	+ {
	79	+ withCredentials: true,
	80	+ }
	81	+ );
	82	+ console.log(response);
	83	+ if (response.data && response.data.result) {
	84	+ setSolved(response.data.data.length);
	85	+ }
	86	+ } catch (error) {
	87	+ console.error("Error fetching data: ", error);
	88	+ }
	89	+ };
	90	+
	91	+ const fetchSolvedCount = async () => {
	92	+ try {
	93	+ const response = await axios.get(`http://localhost:8080/solved/count`, {
	94	+ withCredentials: true,
	95	+ });
	96	+ const data = response.data;
	97	+
	98	+ // 객체의 키와 값을 배열로 변환
	99	+ const solvedCounts = Object.entries(data);
	100	+
	101	+ // 값이 큰 순서대로 정렬
	102	+ solvedCounts.sort((a, b) => b[1] - a[1]);
	103	+
	104	+ // 가장 큰 값 두 개의 키 가져오기
	105	+ const [first, second, three] = solvedCounts
	106	+ .slice(0, 3)
	107	+ .map(([key, value]) => key);
	108	+
	109	+ // 상태로 설정
	110	+ setTopTwoKeys([first, second, three]);
	111	+
	112	+ console.log("가장 큰 값 두 개의 키:", first, second, three);
	113	+
	114	+ // 이후에 필요한 로직을 수행하면 됩니다.
	115	+ } catch (error) {
	116	+ console.error("Error fetching data: ", error);
	117	+ }
	118	+ };
	119	+
	120	+ const fetchData = async () => {
	121	+ try {
	122	+ const response = await axios.get(
	123	+ "http://localhost:8080/scorelog/parents/latest?userId=sangbabo",
	124	+ {
	125	+ withCredentials: true,
	126	+ }
	127	+ );
	128	+ console.log(response);
	129	+ const data = response.data;
	130	+
	131	+ const labels = data.map((entry) => formatDate(entry.createdAt));
	132	+ const focusData = data.map((entry) => entry.focus);
	133	+ const understandData = data.map((entry) => entry.understand);
	134	+ const wordData = data.map((entry) => entry.word);
	135	+ const grammarData = data.map((entry) => entry.grammar);
	136	+ const sentenceData = data.map((entry) => entry.sentence);
	137	+ const expressionData = data.map((entry) => entry.expression);
	138	+
	139	+ setLabels(labels);
	140	+ setFocusDataset([
	141	+ {
	142	+ label: "집중",
	143	+ data: focusData,
	144	+ borderColor: "rgba(75, 192, 192, 0.7)",
	145	+ fill: false,
	146	+ },
	147	+ ]);
	148	+ setUnderstandDataset([
	149	+ {
	150	+ label: "이해",
	151	+ data: understandData,
	152	+ borderColor: "rgba(54, 162, 235, 1)",
	153	+ fill: false,
	154	+ },
	155	+ ]);
	156	+ setWordDataset([
	157	+ {
	158	+ label: "어휘",
	159	+ data: wordData,
	160	+ borderColor: "rgba(75, 192, 192, 1)",
	161	+ fill: false,
	162	+ },
	163	+ ]);
	164	+ setGrammarDataset([
	165	+ {
	166	+ label: "문법",
	167	+ data: grammarData,
	168	+ borderColor: "rgba(153, 102, 255, 1)",
	169	+ fill: false,
	170	+ },
	171	+ ]);
	172	+ setSentenceDataset([
	173	+ {
	174	+ label: "문장",
	175	+ data: sentenceData,
	176	+
	177	+ borderColor: "rgba(255, 159, 64, 1)",
	178	+ fill: false,
	179	+ },
	180	+ ]);
	181	+ setExpressionDataset([
	182	+ {
	183	+ label: "표현",
	184	+ data: expressionData,
	185	+ borderColor: "rgba(255, 206, 86, 1)",
	186	+ fill: false,
	187	+ },
	188	+ ]);
	189	+
	190	+ const totalProgress = data.reduce(
	191	+ (acc, cur) =>
	192	+ acc +
	193	+ cur.focus +
	194	+ cur.expression +
	195	+ cur.understand +
	196	+ cur.word +
	197	+ cur.sentence +
	198	+ cur.grammar,
	199	+ 0
	200	+ );
	201	+ setProgress(totalProgress / (6 * data.length));
	202	+ } catch (error) {
	203	+ console.error("Error fetching data:", error);
	204	+ }
	205	+ };
	206	+
	207	+ const fetchSumData = async () => {
	208	+ try {
	209	+ const response = await axios.get(
	210	+ "http://localhost:8080/scorelog/parents/sum?userId=sangbabo",
	211	+ {
	212	+ withCredentials: true,
	213	+ }
	214	+ );
	215	+ console.log(response.data);
	216	+ const data = response.data;
	217	+ const labels = data.map((entry) => formatDate(entry.createdAt));
	218	+ const sumData = data.map((entry) => entry.sum);
	219	+
	220	+ setLabels(labels);
	221	+ setSumDataset([
	222	+ {
	223	+ label: "체급",
	224	+ data: sumData,
	225	+ borderColor: "rgba(255, 99, 132, 1)",
	226	+ fill: false,
	227	+ },
	228	+ ]);
	229	+ } catch (error) {
	230	+ console.error("Error fetching data:", error);
	231	+ }
	232	+ };
	233	+ const fetchSumAverage = async () => {
	234	+ try {
	235	+ const response = await axios.get(
	236	+ "http://localhost:8080/average-total-score",
	237	+ {
	238	+ withCredentials: true,
	239	+ }
	240	+ );
	241	+ console.log(response.data.averageTotalScore);
	242	+ setSumAverage(response.data.averageTotalScore);
	243	+ } catch (error) {
	244	+ console.error("Error fetching data:", error);
	245	+ }
	246	+ };
	247	+
	248	+ useEffect(() => {
	249	+ fetchSolvedCount();
	250	+ fetchSolved();
	251	+ fetchStudent();
	252	+ fetchData();
	253	+ fetchSumData(); // 새로운 데이터를 가져온 후에 호출되도록 변경
	254	+ fetchSumAverage();
	255	+ }, []);
	256	+
	257	+ const getProgressBarColor = (progress) => {
	258	+ if (progress < 30) {
	259	+ return "red";
	260	+ } else if (progress >= 30 && progress < 70) {
	261	+ return "orange";
	262	+ } else {
	263	+ return "green";
	264	+ }
	265	+ };
	266	+ const determineHealthStatus = (studentSum, average) => {
	267	+ const difference = studentSum - average;
	268	+ if (difference >= -50 && difference <= 50) {
	269	+ return "양호";
	270	+ } else if (difference > 50) {
	271	+ return "우수";
	272	+ } else if (difference >= -150) {
	273	+ return "주의";
	274	+ } else {
	275	+ return "경고";
	276	+ }
	277	+ };
	278	+ const getHealthClassName = (status) => {
	279	+ switch (status) {
	280	+ case "양호":
	281	+ return "health-good";
	282	+ case "우수":
	283	+ return "health-excellent";
	284	+ case "주의":
	285	+ return "health-warning";
	286	+ case "경고":
	287	+ return "health-danger";
	288	+ default:
	289	+ return "";
	290	+ }
	291	+ };
	292	+ useEffect(() => {
	293	+ // 체급을 결정할 때 사용될 함수
	294	+ if (student && sumAverage) {
	295	+ const healthStatus = determineHealthStatus(student.sum, sumAverage);
	296	+ setHealth(healthStatus);
	297	+ }
	298	+ }, [student, sumAverage]);
	299	+ return (
	300	+ <>
	301	+ <div className="mainstudent-container">
	302	+ <div className="mainstudent-chart">
	303	+ <div className="mainstudent-chart-container">
	304	+ <div className="mainstudent-chart-box">
	305	+ <div className="mainstudent-chart-box-container">
	306	+ <h2>집중</h2>
	307	+ <div className="chart-wrapper">
	308	+ <AllLineChart labels={labels} datasets={focusDataset} />
	309	+ </div>
	310	+ </div>
	311	+ </div>
	312	+ <div className="mainstudent-chart-box">
	313	+ <div className="mainstudent-chart-box-container">
	314	+ <h2>어휘</h2>
	315	+ <div className="chart-wrapper">
	316	+ <AllLineChart labels={labels} datasets={wordDataset} />
	317	+ </div>
	318	+ </div>
	319	+ </div>
	320	+ <div className="mainstudent-chart-box">
	321	+ <div className="mainstudent-chart-box-container">
	322	+ <h2>문법</h2>
	323	+ <div className="chart-wrapper">
	324	+ <AllLineChart labels={labels} datasets={grammarDataset} />
	325	+ </div>
	326	+ </div>
	327	+ </div>
	328	+ <div className="mainstudent-chart-box">
	329	+ <div className="mainstudent-chart-box-container">
	330	+ <h2>문장</h2>
	331	+ <div className="chart-wrapper">
	332	+ <AllLineChart labels={labels} datasets={sentenceDataset} />
	333	+ </div>
	334	+ </div>
	335	+ </div>
	336	+ <div className="mainstudent-chart-box">
	337	+ <div className="mainstudent-chart-box-container">
	338	+ <h2>이해와 표현</h2>
	339	+ <div className="chart-wrapper">
	340	+ <AllBarChart
	341	+ labels={labels}
	342	+ datasets={expressionAndUnderstandDatasets}
	343	+ />
	344	+ </div>
	345	+ </div>
	346	+ </div>
	347	+ <div className="mainstudent-chart-box">
	348	+ <div className="mainstudent-chart-box-container">
	349	+ <h2>자녀 종합 점수</h2>
	350	+ <div className="chart-wrapper">
	351	+ <AllLineChart labels={labels} datasets={sumDataset} />
	352	+ </div>
	353	+ </div>
	354	+ </div>
	355	+ </div>
	356	+ </div>
	357	+ <div className="mainstudent-progress-recommend">
	358	+ <div className="mainstudent-progress-left-container">
	359	+ <div className="mainstudent-progress-bar-container">
	360	+ <div className="progress-bar-container">
	361	+ <div
	362	+ className="progress-bar"
	363	+ style={{
	364	+ width: `${solved * 1.25}%`,
	365	+ backgroundColor: getProgressBarColor(solved * 1.25),
	366	+ }}
	367	+ ></div>
	368	+ </div>
	369	+ <div className="mainstudent-progress">
	370	+ 진행률 : {solved * 1.25}%
	371	+ </div>
	372	+ </div>
	373	+ </div>
	374	+ <div className="mainstudent-recommend-right-container">
	375	+ <div className="mainstudent-recommend-container">
	376	+ <div className="mainparent-recommend-question">
	377	+ <h2>자녀 정보</h2>
	378	+ </div>
	379	+ <div className="mainparent-recommend-keys">
	380	+ <div className="mainstudent-parent-information">
	381	+ {student && <span>이름: {student.name}</span>}
	382	+ </div>
	383	+
	384	+ <div className="mainstudent-parent-information">
	385	+ {student && <span>학년: {student.grade}</span>}
	386	+ </div>
	387	+ <div
	388	+ className={`mainstudent-parent-information ${getHealthClassName(
	389	+ health
	390	+ )}`}
	391	+ >
	392	+ {student && <span>상태: {health}</span>}
	393	+ </div>
	394	+ <div className="mainstudent-parent-information">
	395	+ {student && <span>성별: {student.gender}</span>}
	396	+ </div>
	397	+ </div>
	398	+ </div>
	399	+ </div>
	400	+ </div>
	401	+ </div>
	402	+ </>
	403	+ );
	404	+};
	405	+
	406	+export default MainParent;

79ca85e

src/pages/main/MainSelect.css (added)

+++ src/pages/main/MainSelect.css

@@ -0,0 +1,0 @@

79ca85e

src/pages/main/MainSelect.jsx (added)

+++ src/pages/main/MainSelect.jsx

...	...	@@ -0,0 +1,35 @@
	1	+import React, { useEffect } from "react";
	2	+import "./MainParent.css";
	3	+import { useNavigate } from "react-router-dom";
	4	+import axios from "axios";
	5	+
	6	+const MainSelect = () => {
	7	+ const navigate = useNavigate();
	8	+ const fetchData = async () => {
	9	+ try {
	10	+ const response = await axios.get(`http://localhost:8080/rating`, {
	11	+ withCredentials: true,
	12	+ });
	13	+ const responseData = response.data.data; // response.data는 이미 JavaScript 객체로 사용 가능합니다.
	14	+ const role = responseData.role;
	15	+ if (role == "parent") {
	16	+ navigate("/mainParent");
	17	+ } else if (role == "teacher") {
	18	+ navigate("/mainTeacher");
	19	+ } else {
	20	+ navigate("/mainStudent");
	21	+ }
	22	+
	23	+ console.log(response.data);
	24	+ } catch (error) {
	25	+ console.error("Error fetching data: ", error);
	26	+ }
	27	+ };
	28	+ useEffect(() => {
	29	+ fetchData();
	30	+ }, []);
	31	+
	32	+ return <div>loading...</div>;
	33	+};
	34	+
	35	+export default MainSelect;

6d74a74

79ca85e

src/pages/main/MainStudent.css

--- src/pages/main/MainStudent.css

+++ src/pages/main/MainStudent.css

...	...	@@ -1,6 +1,34 @@
1	1	.mainstudent-container {
2		- width: 100vw;
	2	+ width: 100%;
3	3	height: calc(100vh - 60px);
	4	+ overflow: hidden;
	5	+}
	6	+
	7	+.mainstudent-container1 {
	8	+ width: 100%;
	9	+ height: calc(170vh - 60px);
	10	+ background-size: cover; /* 배경 이미지가 컨테이너를 모두 채우도록 설정합니다. */
	11	+ /* 다른 스타일링 속성을 필요에 따라 추가할 수 있습니다. */
	12	+ overflow: hidden;
	13	+}
	14	+
	15	+.mainstudent-container-one {
	16	+ width: 100%;
	17	+ height: calc(70vh - 30px);
	18	+ overflow: hidden;
	19	+}
	20	+.mainstudent-container-two {
	21	+ width: 100%;
	22	+ height: calc(100vh - 30px);
	23	+ overflow: hidden;
	24	+ display: flex;
	25	+ justify-content: center;
	26	+ align-items: center;
	27	+}
	28	+
	29	+.mainstudent-container2 {
	30	+ width: 90%;
	31	+ margin: auto;
4	32	overflow: hidden;
5	33	}
6	34
...	...	@@ -21,10 +49,12 @@
21	49	.mainstudent-chart-all {
22	50	width: 90%;
23	51	height: 90%;
24		- border: 1px solid;
25	52	display: flex;
26	53	justify-content: center;
27	54	align-items: center;
	55	+ background-color: #ffffff;
	56	+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add this line for shadow */
	57	+ border-radius: 20px;
28	58	}
29	59
30	60	.mainstudent-chart-right-container {
...	...	@@ -38,8 +68,7 @@
38	68
39	69	.mainstudent-chart-three-box {
40	70	width: 100%;
41		- height: 33.33%;
42		- border: 1px solid;
	71	+ height: 32%;
43	72	display: flex;
44	73	justify-content: center;
45	74	align-items: center;
...	...	@@ -51,8 +80,13 @@
51	80	display: flex;
52	81	justify-content: center;
53	82	align-items: center;
54		- background-color: #f0f0f0;
	83	+ background-color: #ffffff;
	84	+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add this line for shadow */
55	85	border-radius: 10px;
	86	+}
	87	+
	88	+.goContent {
	89	+ cursor: pointer;
56	90	}
57	91
58	92	.mainstudent-chart-three-box-chart h1 {
...	...	@@ -67,25 +101,55 @@
67	101
68	102	.mainstudent-progress-left-container {
69	103	display: flex;
	104	+ flex-direction: column;
70	105	justify-content: center;
71	106	align-items: center;
72	107	width: 50%;
73	108	height: 100%;
74		- border: 1px solid;
75	109	}
76	110
77	111	.mainstudent-recommend-right-container {
78	112	width: 50%;
79	113	height: 100%;
80		- border: 1px solid;
	114	+ display: flex;
	115	+ justify-content: center;
	116	+ align-self: center;
	117	+ flex-direction: column;
	118	+}
	119	+
	120	+.mainstudent-progress-bar-container {
	121	+ width: 88.3%;
	122	+ height: 70%;
	123	+ padding: 2.5%;
	124	+ border-radius: 20px;
	125	+ display: flex;
	126	+ justify-content: center;
	127	+ align-self: center;
	128	+ flex-direction: column;
	129	+ background-color: #ffffff;
	130	+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add this line for shadow */
81	131	}
82	132
83	133	.progress-bar-container {
84	134	width: 80%;
85		- height: 20px;
	135	+ height: 50px;
86	136	background-color: #f0f0f0;
87	137	border-radius: 10px;
88	138	overflow: hidden;
	139	+ margin: auto;
	140	+}
	141	+
	142	+.mainstudent-recommend-container {
	143	+ width: 88%;
	144	+ height: 70%;
	145	+ border-radius: 20px;
	146	+ padding: 2.5%;
	147	+ background-color: #ffffff;
	148	+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add this line for shadow */
	149	+ display: flex;
	150	+ justify-content: center;
	151	+ align-self: center;
	152	+ flex-direction: column;
89	153	}
90	154
91	155	.progress-bar {
...	...	@@ -93,3 +157,92 @@
93	157	background-color: #4caf50;
94	158	transition: width 0.3s ease;
95	159	}
	160	+
	161	+.mainstudent-progress {
	162	+ margin-top: 5%;
	163	+ text-align: center;
	164	+}
	165	+
	166	+.mainstudent-recommend-keys {
	167	+ display: flex;
	168	+ justify-content: space-around;
	169	+ align-items: center;
	170	+ flex-wrap: wrap;
	171	+}
	172	+
	173	+.mainstudent-recommend-key {
	174	+ display: flex;
	175	+ justify-content: center;
	176	+ align-items: center;
	177	+ flex-direction: column;
	178	+}
	179	+
	180	+.mainstudent-recommend-key span {
	181	+ margin-top: 10%;
	182	+}
	183	+
	184	+.mainstudent-recommend-question {
	185	+ text-align: center;
	186	+ height: 25%;
	187	+ display: flex;
	188	+ justify-content: space-around;
	189	+ align-items: center;
	190	+}
	191	+
	192	+/* 추가된 스타일 */
	193	+
	194	+.mainstudent-chart-container {
	195	+ display: flex;
	196	+ flex-wrap: wrap;
	197	+}
	198	+
	199	+.mainstudent-chart-box-container {
	200	+ width: 90%;
	201	+ height: 90%;
	202	+ background-color: white;
	203	+ display: flex;
	204	+ flex-direction: column;
	205	+ justify-content: center;
	206	+ align-items: center;
	207	+ border-radius: 20px;
	208	+ background-color: #ffffff;
	209	+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add this line for shadow */
	210	+}
	211	+
	212	+.mainstudent-gocontent-box-container {
	213	+ width: 90%;
	214	+ height: 90%;
	215	+ display: flex;
	216	+ flex-direction: column;
	217	+ justify-content: center;
	218	+ align-items: center;
	219	+ border-radius: 20px;
	220	+ font-size: 50px;
	221	+ background-color: #ffffff;
	222	+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add this line for shadow */
	223	+}
	224	+
	225	+.mainstudent-chart-box-container h2 {
	226	+ height: 0;
	227	+}
	228	+
	229	+.mainstudent-chart-box {
	230	+ width: 33.3%;
	231	+ height: 50%;
	232	+ display: flex;
	233	+ flex-direction: column;
	234	+ justify-content: center;
	235	+ align-items: center;
	236	+}
	237	+
	238	+.mainstudent-chart-box h2 {
	239	+ text-align: center;
	240	+}
	241	+
	242	+.chart-wrapper {
	243	+ width: 90%;
	244	+ height: 90%;
	245	+ display: flex;
	246	+ justify-content: center;
	247	+ align-items: center;
	248	+}

6d74a74

79ca85e

src/pages/main/MainStudent.jsx

--- src/pages/main/MainStudent.jsx

+++ src/pages/main/MainStudent.jsx


-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import axios from "axios";
 import "./MainStudent.css";
 import AllLineChart from "../../components/chart/AllLineChart";
+import AllBarChart from "../../components/chart/AllBarChart";
 
 const MainStudent = () => {
   const navigate = useNavigate();
+  const [solved, setSolved] = useState([]);
+  const [topTwoKeys, setTopTwoKeys] = useState([]);
+  const [labels, setLabels] = useState([]);
+  const [focusDataset, setFocusDataset] = useState([]);
+  const [understandDataset, setUnderstandDataset] = useState([]);
+  const [wordDataset, setWordDataset] = useState([]);
+  const [grammarDataset, setGrammarDataset] = useState([]);
+  const [sentenceDataset, setSentenceDataset] = useState([]);
+  const [expressionDataset, setExpressionDataset] = useState([]);
+  const [progress, setProgress] = useState(0);
+  const [images, setImages] = useState({
+    동화여행: "fairytravel.png",
+    동화세계: "fairyworld.png",
+    문법요정: "grammerfariy.png",
+    문법랜드: "grammerland.png",
+    문장쑥쑥: "sentenceabsorb.png",
+    문장일기: "sentencediary.png",
+    동요여행: "songtravel.png",
+    동요나라: "songcountry.png",
+    어휘력쑥쑥: "wordabsorb.png",
+    단어뭉치: "wordbundle.png",
+  });
 
-  const datasets = [
-    {
-      label: "어휘",
-      data: [12, 19, 3, 5, 2, 3, 7],
-      borderColor: "rgba(75, 192, 192, 1)",
-      fill: false,
-    },
-    {
-      label: "문법",
-      data: [2, 3, 20, 5, 1, 4, 9],
-      borderColor: "rgba(153, 102, 255, 1)",
-      fill: false,
-    },
-    {
-      label: "문장",
-      data: [3, 10, 13, 15, 22, 30, 25],
-      borderColor: "rgba(255, 159, 64, 1)",
-      fill: false,
-    },
-    {
-      label: "이해",
-      data: [5, 15, 10, 20, 8, 7, 18],
-      borderColor: "rgba(54, 162, 235, 1)",
-      fill: false,
-    },
-    {
-      label: "표현",
-      data: [1, 4, 6, 8, 10, 12, 14],
-      borderColor: "rgba(255, 206, 86, 1)",
-      fill: false,
-    },
-    {
-      label: "집중",
-      data: [9, 7, 6, 4, 3, 2, 1],
-      borderColor: "rgba(75, 192, 192, 0.7)",
-      fill: false,
-    },
-  ];
+  const goContent = () => {
+    navigate("/");
+  };
 
-  const expressionDataset = [
-    {
-      label: "표현",
-      data: [3, 10, 13, 15, 22, 30, 25],
-      borderColor: "rgba(255, 159, 64, 1)",
-      fill: false,
-    },
-  ];
+  const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${month}-${day}`;
+  };
 
-  const comprehensionDataset = [
-    {
-      label: "이해",
-      data: [5, 15, 10, 20, 8, 7, 18],
-      borderColor: "rgba(54, 162, 235, 1)",
-      fill: false,
-    },
-  ];
+  const fetchSolved = async () => {
+    try {
+      const response = await axios.get(`http://localhost:8080/member/solved`, {
+        withCredentials: true,
+      });
+      console.log(response);
+      if (response.data && response.data.result) {
+        setSolved(response.data.data.length);
+      }
+    } catch (error) {
+      console.error("Error fetching data: ", error);
+    }
+  };
 
-  const progress = 60;
+  const fetchSolvedCount = async () => {
+    try {
+      const response = await axios.get(`http://localhost:8080/solved/count`, {
+        withCredentials: true,
+      });
+      const data = response.data;
+
+      // 객체의 키와 값을 배열로 변환
+      const solvedCounts = Object.entries(data);
+
+      // 값이 큰 순서대로 정렬
+      solvedCounts.sort((a, b) => b[1] - a[1]);
+
+      // 가장 큰 값 세 개의 키 가져오기
+      const [first, second, three] = solvedCounts
+        .slice(0, 3)
+        .map(([key, value]) => key);
+
+      // 상태로 설정
+      setTopTwoKeys([first, second, three]);
+
+      console.log("가장 큰 값 세 개의 키:", first, second, three);
+
+      // 이후에 필요한 로직을 수행하면 됩니다.
+    } catch (error) {
+      console.error("Error fetching data: ", error);
+    }
+  };
+
+  const fetchData = async () => {
+    try {
+      const response = await axios.get(
+        "http://localhost:8080/scorelog/latest",
+        {
+          withCredentials: true,
+        }
+      );
+      console.log(response);
+      const data = response.data;
+
+      const labels = data.map((entry) => formatDate(entry.createdAt));
+      const focusData = data.map((entry) => entry.focus);
+      const understandData = data.map((entry) => entry.understand);
+      const wordData = data.map((entry) => entry.word);
+      const grammarData = data.map((entry) => entry.grammar);
+      const sentenceData = data.map((entry) => entry.sentence);
+      const expressionData = data.map((entry) => entry.expression);
+
+      setLabels(labels);
+      setFocusDataset([
+        {
+          label: "집중",
+          data: focusData,
+          borderColor: "rgba(75, 192, 192, 0.7)",
+          fill: false,
+        },
+      ]);
+      setUnderstandDataset([
+        {
+          label: "이해",
+          data: understandData,
+          borderColor: "rgba(54, 162, 235, 1)",
+          fill: false,
+        },
+      ]);
+      setWordDataset([
+        {
+          label: "어휘",
+          data: wordData,
+          borderColor: "rgba(75, 192, 192, 1)",
+          fill: false,
+        },
+      ]);
+      setGrammarDataset([
+        {
+          label: "문법",
+          data: grammarData,
+          borderColor: "rgba(153, 102, 255, 1)",
+          fill: false,
+        },
+      ]);
+      setSentenceDataset([
+        {
+          label: "문장",
+          data: sentenceData,
+
+          borderColor: "rgba(255, 159, 64, 1)",
+          fill: false,
+        },
+      ]);
+      setExpressionDataset([
+        {
+          label: "표현",
+          data: expressionData,
+          borderColor: "rgba(255, 206, 86, 1)",
+          fill: false,
+        },
+      ]);
+
+      const totalProgress = data.reduce(
+        (acc, cur) =>
+          acc +
+          cur.focus +
+          cur.expression +
+          cur.understand +
+          cur.word +
+          cur.sentence +
+          cur.grammar,
+        0
+      );
+      setProgress(totalProgress / (6 * data.length));
+    } catch (error) {
+      console.error("Error fetching data:", error);
+    }
+  };
+
+  useEffect(() => {
+    fetchSolvedCount();
+    fetchSolved();
+    fetchData();
+  }, []);
 
   const getProgressBarColor = (progress) => {
     if (progress < 30) {

     }
   };
 
+  const expressionAndUnderstandDatasets = [
+    {
+      label: "이해",
+      data: understandDataset.length ? understandDataset[0].data : [],
+      backgroundColor: "rgba(54, 162, 235, 0.5)",
+    },
+    {
+      label: "표현",
+      data: expressionDataset.length ? expressionDataset[0].data : [],
+      backgroundColor: "rgba(255, 206, 86, 0.5)",
+    },
+  ];
+
   return (
     <>
       <div className="mainstudent-container">
         <div className="mainstudent-chart">
-          <div className="mainstudent-chart-left-container">
-            <div className="mainstudent-chart-all">
-              <AllLineChart datasets={datasets} />
-            </div>
-          </div>
-          <div className="mainstudent-chart-right-container">
-            <div className="mainstudent-chart-three-box">
-              <div className="mainstudent-chart-three-box-chart">
-                <h1 onClick={() => navigate("/")}>학습컨텐츠 가기</h1>
+          <div className="mainstudent-chart-container">
+            <div className="mainstudent-chart-box">
+              <div className="mainstudent-chart-box-container">
+                <h2>집중</h2>
+                <div className="chart-wrapper">
+                  <AllLineChart labels={labels} datasets={focusDataset} />
+                </div>
               </div>
             </div>
-            <div className="mainstudent-chart-three-box">
-              <div className="mainstudent-chart-three-box-chart">
-                <AllLineChart datasets={expressionDataset} />
+            <div className="mainstudent-chart-box">
+              <div className="mainstudent-chart-box-container">
+                <h2>어휘</h2>
+                <div className="chart-wrapper">
+                  <AllLineChart labels={labels} datasets={wordDataset} />
+                </div>
               </div>
             </div>
-            <div className="mainstudent-chart-three-box">
-              <div className="mainstudent-chart-three-box-chart">
-                <AllLineChart datasets={comprehensionDataset} />
+            <div className="mainstudent-chart-box">
+              <div className="mainstudent-chart-box-container">
+                <h2>문법</h2>
+                <div className="chart-wrapper">
+                  <AllLineChart labels={labels} datasets={grammarDataset} />
+                </div>
+              </div>
+            </div>
+            <div className="mainstudent-chart-box">
+              <div className="mainstudent-chart-box-container">
+                <h2>문장</h2>
+                <div className="chart-wrapper">
+                  <AllLineChart labels={labels} datasets={sentenceDataset} />
+                </div>
+              </div>
+            </div>
+            <div className="mainstudent-chart-box">
+              <div className="mainstudent-chart-box-container">
+                <h2>이해와 표현</h2>
+                <div className="chart-wrapper">
+                  <AllBarChart
+                    labels={labels}
+                    datasets={expressionAndUnderstandDatasets}
+                  />
+                </div>
+              </div>
+            </div>
+            <div className="mainstudent-chart-box">
+              <div
+                className="mainstudent-gocontent-box-container"
+                onClick={goContent}
+                style={{ cursor: "pointer" }}
+              >
+                학습 컨텐츠 바로가기
               </div>
             </div>
           </div>
         </div>
+
         <div className="mainstudent-progress-recommend">
           <div className="mainstudent-progress-left-container">
-            진행도
-            <div className="progress-bar-container">
-              <div
-                className="progress-bar"
-                style={{
-                  width: `${progress}%`,
-                  backgroundColor: getProgressBarColor(progress),
-                }}
-              ></div>
+            <div className="mainstudent-progress-bar-container">
+              <div className="progress-bar-container">
+                <div
+                  className="progress-bar"
+                  style={{
+                    width: `${solved * 1.25}%`,
+                    backgroundColor: getProgressBarColor(solved * 1.25),
+                  }}
+                ></div>
+              </div>
+              <div className="mainstudent-progress">
+                진행률 : {solved * 1.25}%
+              </div>
             </div>
           </div>
-          <div className="mainstudent-recommend-right-container">차트세개</div>
+          <div className="mainstudent-recommend-right-container">
+            <div className="mainstudent-recommend-container">
+              <div className="mainstudent-recommend-question">
+                <h2>가장 인기 많은 학습 컨텐츠</h2>
+              </div>
+              <div className="mainstudent-recommend-keys">
+                {topTwoKeys.map((key) => (
+                  <div key={key} className="mainstudent-recommend-key">
+                    <img src={`/images/${images[key]}`} alt={key} />
+                    <span>{key}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </>

79ca85e

src/pages/main/MainTeacher.css (added)

+++ src/pages/main/MainTeacher.css

...	...	@@ -0,0 +1,230 @@
	1	+.main-teacher-container {
	2	+ width: 80vw;
	3	+ margin: 0 auto;
	4	+ padding: 20px;
	5	+}
	6	+
	7	+.main-teacher-top-container {
	8	+ display: flex;
	9	+ height: 500px;
	10	+ margin-bottom: 20px;
	11	+}
	12	+
	13	+.mainteacher-chart {
	14	+ width: 100%;
	15	+ height: 95%;
	16	+ display: flex;
	17	+ overflow: hidden;
	18	+}
	19	+
	20	+.main-teacher-top-chart {
	21	+ flex: 9;
	22	+ border-radius: 10px;
	23	+ background-color: #ffffff;
	24	+ margin-right: 20px;
	25	+ display: flex;
	26	+ justify-content: center;
	27	+ align-items: center;
	28	+}
	29	+
	30	+.main-teacher-top-buttons {
	31	+ flex: 1;
	32	+ border-radius: 10px;
	33	+}
	34	+
	35	+.main-teacher-top-button {
	36	+ width: 150px;
	37	+ height: 150px;
	38	+ background-color: #ffffff;
	39	+ margin-bottom: 20px;
	40	+ font-size: 24px;
	41	+ display: flex;
	42	+ justify-content: center;
	43	+ align-items: center;
	44	+ border-radius: 15px;
	45	+}
	46	+
	47	+.main-teacher-top-button:hover {
	48	+ cursor: pointer;
	49	+}
	50	+
	51	+.main-teacher-next-button {
	52	+ width: 150px;
	53	+ height: 50px;
	54	+ background-color: #ffffff;
	55	+ font-size: 16px;
	56	+ border: none;
	57	+ border-radius: 10px;
	58	+ cursor: pointer;
	59	+}
	60	+
	61	+.mainteacher-left-container {
	62	+ width: 70%;
	63	+ height: 100%;
	64	+ display: flex;
	65	+ justify-content: center;
	66	+ flex-direction: column;
	67	+ align-items: center;
	68	+}
	69	+
	70	+.mainteacher-detail-container {
	71	+ width: 90%;
	72	+ height: 90%;
	73	+ display: flex;
	74	+ justify-content: center;
	75	+ align-items: center;
	76	+ flex-direction: column;
	77	+}
	78	+
	79	+.mainteacher-detail-name-container {
	80	+ width: 100%;
	81	+ height: 25%;
	82	+ display: flex;
	83	+ justify-content: center;
	84	+ align-items: center;
	85	+}
	86	+
	87	+.mainteacher-detail-name {
	88	+ width: 100%;
	89	+ height: 80%;
	90	+ display: flex;
	91	+ justify-content: center;
	92	+ align-items: center;
	93	+ border-radius: 20px;
	94	+ background-color: #ffffff;
	95	+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add this line for shadow */
	96	+}
	97	+
	98	+.mainteacher-detail-graph-container {
	99	+ width: 100%;
	100	+ height: 50%;
	101	+ display: flex;
	102	+ justify-content: center;
	103	+ align-items: center;
	104	+}
	105	+
	106	+.mainteacher-detail-graph {
	107	+ width: 80%;
	108	+ height: 90%;
	109	+ display: flex;
	110	+ justify-content: center;
	111	+ align-items: center;
	112	+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add this line for shadow */
	113	+ border-radius: 20px;
	114	+ background-color: #ffffff;
	115	+}
	116	+
	117	+.mainteacher-detail-threebutton {
	118	+ width: 20%;
	119	+ height: 90%;
	120	+ display: flex;
	121	+ justify-content: space-between;
	122	+ align-items: center;
	123	+ flex-direction: column;
	124	+}
	125	+
	126	+.mainteahcer-detail-button {
	127	+ width: 90%;
	128	+ height: 30%;
	129	+ display: flex;
	130	+ justify-content: center;
	131	+ align-items: center;
	132	+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add this line for shadow */
	133	+ border-radius: 20px;
	134	+ background-color: #ffffff;
	135	+}
	136	+
	137	+.mainteacher-detail-comment-container {
	138	+ width: 100%;
	139	+ height: 25%;
	140	+ display: flex;
	141	+ justify-content: space-between;
	142	+ align-items: center;
	143	+}
	144	+
	145	+.mainteacher-detail-comment {
	146	+ width: 47%;
	147	+ height: 90%;
	148	+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add this line for shadow */
	149	+ padding: 1% 3%;
	150	+ box-sizing: border-box;
	151	+ border-radius: 20px;
	152	+ background-color: #ffffff;
	153	+}
	154	+
	155	+.mainteacher-detail-comment-input {
	156	+ width: 50%;
	157	+ height: 90%;
	158	+ padding: 1% 3%;
	159	+ box-sizing: border-box;
	160	+ border-radius: 20px;
	161	+ background-color: #ffffff;
	162	+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add this line for shadow */
	163	+}
	164	+
	165	+.mainteacher-detail-comment-input-button {
	166	+ width: 100%;
	167	+ height: 50%;
	168	+ display: flex;
	169	+ justify-content: space-between;
	170	+ align-items: center;
	171	+
	172	+ div {
	173	+ width: 25%;
	174	+ height: 80%;
	175	+ box-sizing: border-box;
	176	+ text-align: center;
	177	+ font-size: 20px;
	178	+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add this line for shadow */
	179	+ display: flex;
	180	+ justify-content: center;
	181	+ align-items: center;
	182	+ border-radius: 10px;
	183	+ border: 1px solid;
	184	+ }
	185	+ input {
	186	+ width: 70%;
	187	+ height: 80%;
	188	+ font-size: 20px;
	189	+ box-sizing: border-box;
	190	+ padding: 0 2%;
	191	+ border: none;
	192	+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add this line for shadow */
	193	+ border-radius: 10px;
	194	+ border: 1px solid;
	195	+ }
	196	+}
	197	+
	198	+.mainteacher-right-container {
	199	+ width: 30%;
	200	+ height: 100%;
	201	+ display: flex;
	202	+ flex-direction: column;
	203	+ justify-content: center;
	204	+ align-items: center;
	205	+}
	206	+
	207	+.mainteacher-list-container {
	208	+ width: 90%;
	209	+ height: 90%;
	210	+ display: flex;
	211	+ flex-direction: column;
	212	+ justify-content: flex-start;
	213	+ align-items: center;
	214	+ overflow: auto;
	215	+ scrollbar-width: thin; /* For Firefox */
	216	+ scrollbar-color: #888 #f0f0f0; /* For Firefox */
	217	+}
	218	+
	219	+.mainteacher-list-student {
	220	+ width: 90%;
	221	+ padding: 40px 0px;
	222	+ background-color: #ffffff;
	223	+ border: none;
	224	+ border-radius: 20px;
	225	+ display: flex;
	226	+ flex-direction: column;
	227	+ align-items: center;
	228	+ margin-top: 4%;
	229	+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add this line for shadow */
	230	+}

79ca85e

src/pages/main/MainTeacher.jsx (added)

+++ src/pages/main/MainTeacher.jsx

...	...	@@ -0,0 +1,544 @@
	1	+import React, { useEffect, useState } from "react";
	2	+import { useNavigate } from "react-router-dom";
	3	+import axios from "axios";
	4	+import "./MainTeacher.css";
	5	+import AllLineChart from "../../components/chart/AllLineChart";
	6	+import mainBodyImage from "../../assets/mainbody.png";
	7	+
	8	+const MainTeacher = () => {
	9	+ const [sumAverage, setSumAverage] = useState();
	10	+ const [health, setHealth] = useState();
	11	+ const [clickComment, setClickComment] = useState();
	12	+ const [clickStudent, setClickStudent] = useState("이름을 누르세요");
	13	+ const navigate = useNavigate();
	14	+ const [selectedDataset, setSelectedDataset] = useState([]);
	15	+ const [solved, setSolved] = useState([]);
	16	+ const [topTwoKeys, setTopTwoKeys] = useState([]);
	17	+ const [student, setStudent] = useState();
	18	+ const [allDatasets, setAllDatasets] = useState([]);
	19	+ const [datasets, setDatasets] = useState([]);
	20	+ const [labels, setLabels] = useState([]);
	21	+ const [progress, setProgress] = useState(0);
	22	+ const [allDatasets2, setAllDatasets2] = useState([]);
	23	+ const [datasets2, setDatasets2] = useState();
	24	+ const [labels2, setLabels2] = useState([]);
	25	+ const [comment, setComment] = useState();
	26	+ const [onlyStudent, setOnlyStudent] = useState();
	27	+
	28	+ const saveComment = (e) => {
	29	+ setComment(e.target.value);
	30	+ console.log(comment);
	31	+ };
	32	+
	33	+ const sendComment = async () => {
	34	+ console.log(onlyStudent, comment);
	35	+ try {
	36	+ const response = await axios.put(
	37	+ `http://localhost:8080/updateComment`,
	38	+ { id: onlyStudent, comment: comment },
	39	+ {
	40	+ withCredentials: true,
	41	+ }
	42	+ );
	43	+ setClickComment(comment);
	44	+ } catch (error) {
	45	+ console.error("Error fetching data: ", error);
	46	+ }
	47	+ };
	48	+
	49	+ const determineHealthStatus = (studentSum, average) => {
	50	+ const difference = studentSum - average;
	51	+ if (difference >= -50 && difference <= 50) {
	52	+ return "양호";
	53	+ } else if (difference > 50) {
	54	+ return "우수";
	55	+ } else if (difference >= -150) {
	56	+ return "주의";
	57	+ } else {
	58	+ return "경고";
	59	+ }
	60	+ };
	61	+ const getHealthClassName = (status) => {
	62	+ switch (status) {
	63	+ case "양호":
	64	+ return "health-good";
	65	+ case "우수":
	66	+ return "health-excellent";
	67	+ case "주의":
	68	+ return "health-warning";
	69	+ case "경고":
	70	+ return "health-danger";
	71	+ default:
	72	+ return "";
	73	+ }
	74	+ };
	75	+
	76	+ const formatDate = (dateString) => {
	77	+ const date = new Date(dateString);
	78	+ const month = String(date.getMonth() + 1).padStart(2, "0");
	79	+ const day = String(date.getDate()).padStart(2, "0");
	80	+ return `${month}-${day}`;
	81	+ };
	82	+
	83	+ const fetchStudents = async () => {
	84	+ try {
	85	+ const response = await axios.get(`http://localhost:8080/studentAll`, {
	86	+ withCredentials: true,
	87	+ });
	88	+ console.log(response.data);
	89	+ setStudent(response.data);
	90	+ } catch (error) {
	91	+ console.error("Error fetching data: ", error);
	92	+ }
	93	+ };
	94	+
	95	+ const fetchSolvedCount = async () => {
	96	+ try {
	97	+ const response = await axios.get(`http://localhost:8080/solved/count`, {
	98	+ withCredentials: true,
	99	+ });
	100	+ const data = response.data;
	101	+
	102	+ // 객체의 키와 값을 배열로 변환
	103	+ const solvedCounts = Object.entries(data);
	104	+
	105	+ // 값이 큰 순서대로 정렬
	106	+ solvedCounts.sort((a, b) => b[1] - a[1]);
	107	+
	108	+ // 가장 큰 값 두 개의 키 가져오기
	109	+ const [first, second, three] = solvedCounts
	110	+ .slice(0, 3)
	111	+ .map(([key, value]) => key);
	112	+
	113	+ // 상태로 설정
	114	+ setTopTwoKeys([first, second, three]);
	115	+
	116	+ console.log("가장 큰 값 두 개의 키:", first, second, three);
	117	+
	118	+ // 이후에 필요한 로직을 수행하면 됩니다.
	119	+ } catch (error) {
	120	+ console.error("Error fetching data: ", error);
	121	+ }
	122	+ };
	123	+
	124	+ const fetchClickStudent = async (studentId, studentName, studentComment) => {
	125	+ try {
	126	+ setClickStudent(studentName);
	127	+ setClickComment(studentComment);
	128	+ setOnlyStudent(studentId);
	129	+ const response = await axios.get(
	130	+ `http://localhost:8080/scorelog/parents/latest?userId=${studentId}`,
	131	+ {
	132	+ withCredentials: true,
	133	+ }
	134	+ );
	135	+ console.log(response.data);
	136	+
	137	+ let data = response.data;
	138	+
	139	+ // Sort the data by date
	140	+ data.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
	141	+
	142	+ // Format dates and prepare datasets
	143	+ const newLabels = data.map((entry) => formatDate(entry.createdAt));
	144	+ const avgFocusData = data.map((entry) => entry.focus \|\| 0);
	145	+ const avgUnderstandData = data.map((entry) => entry.understand \|\| 0);
	146	+ const avgWordData = data.map((entry) => entry.word \|\| 0);
	147	+ const avgGrammarData = data.map((entry) => entry.grammar \|\| 0);
	148	+ const avgSentenceData = data.map((entry) => entry.sentence \|\| 0);
	149	+ const avgExpressionData = data.map((entry) => entry.expression \|\| 0);
	150	+
	151	+ const newDatasets = [
	152	+ {
	153	+ label: "집중",
	154	+ data: avgFocusData,
	155	+ borderColor: "rgba(75, 192, 192, 0.7)",
	156	+ fill: false,
	157	+ },
	158	+ {
	159	+ label: "이해",
	160	+ data: avgUnderstandData,
	161	+ borderColor: "rgba(54, 162, 235, 1)",
	162	+ fill: false,
	163	+ },
	164	+ {
	165	+ label: "어휘",
	166	+ data: avgWordData,
	167	+ borderColor: "rgba(75, 192, 192, 1)",
	168	+ fill: false,
	169	+ },
	170	+ {
	171	+ label: "문법",
	172	+ data: avgGrammarData,
	173	+ borderColor: "rgba(153, 102, 255, 1)",
	174	+ fill: false,
	175	+ },
	176	+ {
	177	+ label: "문장",
	178	+ data: avgSentenceData,
	179	+ borderColor: "rgba(255, 159, 64, 1)",
	180	+ fill: false,
	181	+ },
	182	+ {
	183	+ label: "표현",
	184	+ data: avgExpressionData,
	185	+ borderColor: "rgba(255, 206, 86, 1)",
	186	+ fill: false,
	187	+ },
	188	+ ];
	189	+
	190	+ setLabels2(newLabels);
	191	+ setAllDatasets2(newDatasets);
	192	+ setDatasets2(newDatasets); // Initially display all datasets
	193	+ } catch (error) {
	194	+ console.error("Error fetching data:", error);
	195	+ }
	196	+ };
	197	+
	198	+ // -----------------------------------------------------------------------------------------------------------------
	199	+ const fetchData = async () => {
	200	+ try {
	201	+ const response = await axios.get(
	202	+ "http://localhost:8080/scorelog/averages/all",
	203	+ {
	204	+ withCredentials: true,
	205	+ }
	206	+ );
	207	+ console.log(response.data);
	208	+ const data = response.data;
	209	+
	210	+ const newLabels = data.map((entry) => formatDate(entry.date));
	211	+ const avgFocusData = data.map((entry) => entry.avgFocus);
	212	+ const avgUnderstandData = data.map((entry) => entry.avgUnderstand);
	213	+ const avgWordData = data.map((entry) => entry.avgWord);
	214	+ const avgGrammarData = data.map((entry) => entry.avgGrammar);
	215	+ const avgSentenceData = data.map((entry) => entry.avgSentence);
	216	+ const avgExpressionData = data.map((entry) => entry.avgExpression);
	217	+
	218	+ const newDatasets = [
	219	+ {
	220	+ label: "집중",
	221	+ data: avgFocusData,
	222	+ borderColor: "rgba(75, 192, 192, 0.7)",
	223	+ fill: false,
	224	+ },
	225	+ {
	226	+ label: "이해",
	227	+ data: avgUnderstandData,
	228	+ borderColor: "rgba(54, 162, 235, 1)",
	229	+ fill: false,
	230	+ },
	231	+ {
	232	+ label: "어휘",
	233	+ data: avgWordData,
	234	+ borderColor: "rgba(75, 192, 192, 1)",
	235	+ fill: false,
	236	+ },
	237	+ {
	238	+ label: "문법",
	239	+ data: avgGrammarData,
	240	+ borderColor: "rgba(153, 102, 255, 1)",
	241	+ fill: false,
	242	+ },
	243	+ {
	244	+ label: "문장",
	245	+ data: avgSentenceData,
	246	+ borderColor: "rgba(255, 159, 64, 1)",
	247	+ fill: false,
	248	+ },
	249	+ {
	250	+ label: "표현",
	251	+ data: avgExpressionData,
	252	+ borderColor: "rgba(255, 206, 86, 1)",
	253	+ fill: false,
	254	+ },
	255	+ ];
	256	+
	257	+ setLabels(newLabels);
	258	+ setAllDatasets(newDatasets);
	259	+ setDatasets(newDatasets); // Initially display all datasets
	260	+ const totalProgress = data.reduce(
	261	+ (acc, cur) =>
	262	+ acc +
	263	+ cur.avgFocus +
	264	+ cur.avgExpression +
	265	+ cur.avgUnderstand +
	266	+ cur.avgWord +
	267	+ cur.avgSentence +
	268	+ cur.avgGrammar,
	269	+ 0
	270	+ );
	271	+ setProgress(totalProgress);
	272	+ } catch (error) {
	273	+ console.error("Error fetching data:", error);
	274	+ }
	275	+ };
	276	+
	277	+ useEffect(() => {
	278	+ fetchSolvedCount();
	279	+ fetchData();
	280	+ fetchStudents();
	281	+ fetchSumAverage();
	282	+ }, []);
	283	+
	284	+ const getProgressBarColor = (progress) => {
	285	+ if (progress < 30) {
	286	+ return "red";
	287	+ } else if (progress < 70) {
	288	+ return "orange";
	289	+ } else {
	290	+ return "green";
	291	+ }
	292	+ };
	293	+
	294	+ const showAllDatasets = () => {
	295	+ setDatasets(allDatasets);
	296	+ };
	297	+
	298	+ const showAllDatasets2 = () => {
	299	+ setDatasets2(allDatasets2);
	300	+ };
	301	+
	302	+ const showExpressionAndUnderstanding = () => {
	303	+ setDatasets(
	304	+ allDatasets.filter(
	305	+ (dataset) => dataset.label === "표현" \|\| dataset.label === "이해"
	306	+ )
	307	+ );
	308	+ };
	309	+
	310	+ const showExpressionAndUnderstanding2 = () => {
	311	+ setDatasets2(
	312	+ allDatasets2.filter(
	313	+ (dataset) => dataset.label === "표현" \|\| dataset.label === "이해"
	314	+ )
	315	+ );
	316	+ };
	317	+
	318	+ const showAllStudents = () => {
	319	+ const combinedData = allDatasets[0].data.map((_, index) => {
	320	+ return (
	321	+ allDatasets[0].data[index] +
	322	+ allDatasets[1].data[index] +
	323	+ allDatasets[2].data[index] +
	324	+ allDatasets[3].data[index] +
	325	+ allDatasets[4].data[index] +
	326	+ allDatasets[5].data[index]
	327	+ );
	328	+ });
	329	+
	330	+ const combinedDataset = [
	331	+ {
	332	+ label: "학생 체급 합계",
	333	+ data: combinedData,
	334	+ borderColor: "rgba(255, 99, 132, 1)",
	335	+ fill: false,
	336	+ },
	337	+ ];
	338	+
	339	+ setDatasets(combinedDataset);
	340	+ };
	341	+
	342	+ const showAllStudents2 = () => {
	343	+ const combinedData = allDatasets2[0].data.map((_, index) => {
	344	+ return (
	345	+ allDatasets2[0].data[index] +
	346	+ allDatasets2[1].data[index] +
	347	+ allDatasets2[2].data[index] +
	348	+ allDatasets2[3].data[index] +
	349	+ allDatasets2[4].data[index] +
	350	+ allDatasets2[5].data[index]
	351	+ );
	352	+ });
	353	+
	354	+ const combinedDataset = [
	355	+ {
	356	+ label: "학생 체급 합계",
	357	+ data: combinedData,
	358	+ borderColor: "rgba(255, 99, 132, 1)",
	359	+ fill: false,
	360	+ },
	361	+ ];
	362	+
	363	+ setDatasets2(combinedDataset);
	364	+ };
	365	+ const fetchSumAverage = async () => {
	366	+ try {
	367	+ const response = await axios.get(
	368	+ "http://localhost:8080/average-total-score",
	369	+ {
	370	+ withCredentials: true,
	371	+ }
	372	+ );
	373	+ console.log(response.data.averageTotalScore);
	374	+ setSumAverage(response.data.averageTotalScore);
	375	+ } catch (error) {
	376	+ console.error("Error fetching data:", error);
	377	+ }
	378	+ };
	379	+ useEffect(() => {
	380	+ // 체급을 결정할 때 사용될 함수
	381	+ if (student && sumAverage) {
	382	+ const healthStatus = determineHealthStatus(student.sum, sumAverage);
	383	+ setHealth(healthStatus);
	384	+ }
	385	+ }, [student, sumAverage]);
	386	+ return (
	387	+ <>
	388	+ <div
	389	+ className="mainstudent-container1"
	390	+ style={{
	391	+ backgroundImage: `url(${mainBodyImage})`,
	392	+ backgroundSize: "cover",
	393	+ backgroundPosition: "center",
	394	+ backgroundRepeat: "no-repeat",
	395	+ }}
	396	+ >
	397	+ <div className="mainstudent-container-one">
	398	+ <h2 style={{ textAlign: "center", marginBottom: "0" }}>
	399	+ 담당하는 학생들의 평균 역량
	400	+ </h2>
	401	+ <div className="mainteacher-chart">
	402	+ <div className="mainstudent-chart-left-container">
	403	+ <div className="mainstudent-chart-all">
	404	+ <AllLineChart labels={labels} datasets={datasets} />
	405	+ </div>
	406	+ </div>
	407	+ <div className="mainstudent-chart-right-container">
	408	+ <div className="mainstudent-chart-three-box">
	409	+ <div
	410	+ className="mainstudent-chart-three-box-chart"
	411	+ onClick={showAllStudents}
	412	+ >
	413	+ <h1>우리반 체급 보기</h1>
	414	+ </div>
	415	+ </div>
	416	+ <div className="mainstudent-chart-three-box">
	417	+ <div
	418	+ className="mainstudent-chart-three-box-chart"
	419	+ onClick={showAllDatasets}
	420	+ >
	421	+ <h1>우리반 전체 요소</h1>
	422	+ </div>
	423	+ </div>
	424	+ <div className="mainstudent-chart-three-box">
	425	+ <div
	426	+ className="mainstudent-chart-three-box-chart"
	427	+ onClick={showExpressionAndUnderstanding}
	428	+ >
	429	+ <h1>표현과 이해</h1>
	430	+ </div>
	431	+ </div>
	432	+ </div>
	433	+ </div>
	434	+ </div>
	435	+ <div className="mainstudent-container-two">
	436	+ <div className="mainteacher-left-container">
	437	+ <h2 style={{ margin: "0px" }}>학생 정보</h2>
	438	+ <div className="mainteacher-detail-container">
	439	+ <div className="mainteacher-detail-name-container">
	440	+ <div className="mainteacher-detail-name">
	441	+ <h1>{clickStudent}</h1>
	442	+ </div>
	443	+ </div>
	444	+ <div className="mainteacher-detail-graph-container">
	445	+ <div className="mainteacher-detail-graph">
	446	+ {datasets2 && (
	447	+ <AllLineChart labels={labels2} datasets={datasets2} />
	448	+ )}
	449	+ </div>
	450	+ <div className="mainteacher-detail-threebutton">
	451	+ {onlyStudent ? (
	452	+ <>
	453	+ <div
	454	+ className="mainteahcer-detail-button"
	455	+ onClick={showAllStudents2}
	456	+ >
	457	+ 체급보기
	458	+ </div>
	459	+ <div
	460	+ className="mainteahcer-detail-button"
	461	+ onClick={showAllDatasets2}
	462	+ >
	463	+ 전체요소
	464	+ </div>
	465	+ <div
	466	+ className="mainteahcer-detail-button"
	467	+ onClick={showExpressionAndUnderstanding2}
	468	+ >
	469	+ 표현과이해
	470	+ </div>
	471	+ </>
	472	+ ) : (
	473	+ <>
	474	+ <div className="mainteahcer-detail-button">체급보기</div>
	475	+ <div className="mainteahcer-detail-button">전체요소</div>
	476	+ <div className="mainteahcer-detail-button">
	477	+ 표현과이해
	478	+ </div>
	479	+ </>
	480	+ )}
	481	+ </div>
	482	+ </div>
	483	+ <div className="mainteacher-detail-comment-container">
	484	+ <div className="mainteacher-detail-comment">
	485	+ {clickComment && (
	486	+ <>
	487	+ <h3>선생님의 한말씀</h3>
	488	+ {clickComment}
	489	+ </>
	490	+ )}
	491	+ </div>
	492	+ <div className="mainteacher-detail-comment-input">
	493	+ {clickComment ? (
	494	+ <h3>{clickStudent}에게 코멘트</h3>
	495	+ ) : (
	496	+ <h3>코멘트</h3>
	497	+ )}
	498	+ <div className="mainteacher-detail-comment-input-button">
	499	+ <input type="text" onChange={saveComment} />
	500	+ <div onClick={sendComment}>코멘트달기</div>
	501	+ </div>
	502	+ </div>
	503	+ </div>
	504	+ </div>
	505	+ </div>
	506	+ <div className="mainteacher-right-container">
	507	+ <h2 style={{ margin: "0px" }}>학생 리스트</h2>
	508	+ <div className="mainteacher-list-container">
	509	+ {student &&
	510	+ student.map((student, index) => {
	511	+ return (
	512	+ <>
	513	+ <div
	514	+ className="mainteacher-list-student"
	515	+ onClick={() =>
	516	+ fetchClickStudent(
	517	+ student.id,
	518	+ student.name,
	519	+ student.comment
	520	+ )
	521	+ }
	522	+ >
	523	+ <h2>{student.name}</h2>
	524	+
	525	+ <div
	526	+ className={`mainstudent-student-information ${getHealthClassName(
	527	+ determineHealthStatus(student.sum, sumAverage)
	528	+ )}`}
	529	+ >
	530	+ {determineHealthStatus(student.sum, sumAverage)}
	531	+ </div>
	532	+ </div>
	533	+ </>
	534	+ );
	535	+ })}
	536	+ </div>
	537	+ </div>
	538	+ </div>
	539	+ </div>
	540	+ </>
	541	+ );
	542	+};
	543	+
	544	+export default MainTeacher;

79ca85e

src/pages/main/MainTeacher2.css (added)

+++ src/pages/main/MainTeacher2.css

...	...	@@ -0,0 +1,94 @@
	1	+.main-teacher-container-2 {
	2	+ width: 80vw;
	3	+ margin: 0 auto;
	4	+ padding: 20px;
	5	+}
	6	+
	7	+.main-teacher-top-container-2 {
	8	+ display: flex;
	9	+ height: 700px;
	10	+ margin-bottom: 20px;
	11	+}
	12	+
	13	+.main-student-top-chart-2 {
	14	+ border-radius: 10px;
	15	+ background-color: #ffffff;
	16	+ margin-right: 20px;
	17	+ display: flex;
	18	+ flex-direction: column;
	19	+ justify-content: center;
	20	+ align-items: center;
	21	+}
	22	+
	23	+.main-student-comment-container {
	24	+ display: flex;
	25	+ margin-top: 20px;
	26	+ height: 100px;
	27	+ width: 100%;
	28	+}
	29	+
	30	+.main-student-comment {
	31	+ width: 80%;
	32	+ background-color: #ffffff;
	33	+ margin: 0 10px;
	34	+ border-radius: 10px;
	35	+ padding: 10px;
	36	+ font-size: large;
	37	+}
	38	+
	39	+.main-student-comment-button {
	40	+ width: 20%;
	41	+ background-color: #ffffff;
	42	+ margin: 0 10px;
	43	+ border-radius: 10px;
	44	+ padding: 10px;
	45	+ display: flex;
	46	+ justify-content: center;
	47	+ align-items: center;
	48	+ font-size: 20px;
	49	+}
	50	+
	51	+.main-student-comment-button:hover {
	52	+ cursor: pointer;
	53	+}
	54	+
	55	+.main-student-top-buttons-2 {
	56	+ flex: 1;
	57	+}
	58	+
	59	+.main-student-top-button {
	60	+ width: 150px;
	61	+ height: 150px;
	62	+ background-color: #ffffff;
	63	+ margin-bottom: 20px;
	64	+ font-size: 24px;
	65	+ display: flex;
	66	+ justify-content: center;
	67	+ align-items: center;
	68	+ border-radius: 15px;
	69	+}
	70	+
	71	+.main-student-top-button:hover {
	72	+ cursor: pointer;
	73	+}
	74	+
	75	+.main-student-list {
	76	+ flex: 3;
	77	+ margin-left: 20px;
	78	+ border-radius: 20px;
	79	+ background-color: #ffffff;
	80	+ display: flex;
	81	+ flex-direction: column;
	82	+ align-items: center;
	83	+}
	84	+
	85	+.main-student-name {
	86	+ display: flex;
	87	+ align-items: center;
	88	+ justify-content: center;
	89	+ background-color: #e6daff;
	90	+ width: 90%;
	91	+ height: 50px;
	92	+ margin: 10px 0;
	93	+ border-radius: 20px;
	94	+}

79ca85e

src/pages/main/MainTeacher2.jsx (added)

+++ src/pages/main/MainTeacher2.jsx

...	...	@@ -0,0 +1,124 @@
	1	+import React, { useState } from "react";
	2	+import "./MainTeacher2.css";
	3	+import AllLineChart from "../../components/chart/AllLineChart";
	4	+
	5	+const MainTeacher2 = () => {
	6	+ const datasets = [
	7	+ {
	8	+ label: "어휘",
	9	+ data: [12, 19, 3, 5, 2, 3, 7],
	10	+ borderColor: "rgba(75, 192, 192, 1)",
	11	+ fill: false,
	12	+ },
	13	+ {
	14	+ label: "문법",
	15	+ data: [2, 3, 20, 5, 1, 4, 9],
	16	+ borderColor: "rgba(153, 102, 255, 1)",
	17	+ fill: false,
	18	+ },
	19	+ {
	20	+ label: "문장",
	21	+ data: [3, 10, 13, 15, 22, 30, 25],
	22	+ borderColor: "rgba(255, 159, 64, 1)",
	23	+ fill: false,
	24	+ },
	25	+ {
	26	+ label: "이해",
	27	+ data: [5, 15, 10, 20, 8, 7, 18],
	28	+ borderColor: "rgba(54, 162, 235, 1)",
	29	+ fill: false,
	30	+ },
	31	+ {
	32	+ label: "표현",
	33	+ data: [1, 4, 6, 8, 10, 12, 14],
	34	+ borderColor: "rgba(255, 206, 86, 1)",
	35	+ fill: false,
	36	+ },
	37	+ {
	38	+ label: "집중",
	39	+ data: [9, 7, 6, 4, 3, 2, 1],
	40	+ borderColor: "rgba(75, 192, 192, 0.7)",
	41	+ fill: false,
	42	+ },
	43	+ ];
	44	+
	45	+ const expressionDataset = [
	46	+ {
	47	+ label: "표현",
	48	+ data: [3, 10, 13, 15, 22, 30, 25],
	49	+ borderColor: "rgba(255, 159, 64, 1)",
	50	+ fill: false,
	51	+ },
	52	+ ];
	53	+
	54	+ const comprehensionDataset = [
	55	+ {
	56	+ label: "이해",
	57	+ data: [5, 15, 10, 20, 8, 7, 18],
	58	+ borderColor: "rgba(54, 162, 235, 1)",
	59	+ fill: false,
	60	+ },
	61	+ ];
	62	+
	63	+ const [selectedDataset, setSelectedDataset] = useState(datasets);
	64	+ const handleButtonClick = (dataset) => {
	65	+ switch (dataset) {
	66	+ case "전체성적":
	67	+ setSelectedDataset(datasets);
	68	+ break;
	69	+ case "이해성적":
	70	+ setSelectedDataset(comprehensionDataset);
	71	+ break;
	72	+ case "표현성적":
	73	+ setSelectedDataset(expressionDataset);
	74	+ break;
	75	+ default:
	76	+ setSelectedDataset(datasets);
	77	+ break;
	78	+ }
	79	+ };
	80	+
	81	+ return (
	82	+ <div className="main-teacher-container-2">
	83	+ <h2>교사 전용 페이지</h2>
	84	+ <div className="main-teacher-top-container-2">
	85	+ <div className="main-student-top-chart-2">
	86	+ <h2>이기창 학생</h2>
	87	+ <AllLineChart datasets={selectedDataset} />
	88	+ <div className="main-student-comment-container">
	89	+ <input className="main-student-comment"></input>
	90	+ <button className="main-student-comment-button">댓글달기</button>
	91	+ </div>
	92	+ </div>
	93	+ <div className="main-teacher-top-buttons-2">
	94	+ <div
	95	+ className="main-teacher-top-button"
	96	+ onClick={() => handleButtonClick("전체성적")}
	97	+ >
	98	+ 전체성적
	99	+ </div>
	100	+ <div
	101	+ className="main-teacher-top-button"
	102	+ onClick={() => handleButtonClick("이해성적")}
	103	+ >
	104	+ 이해성적
	105	+ </div>
	106	+ <div
	107	+ className="main-teacher-top-button"
	108	+ onClick={() => handleButtonClick("표현성적")}
	109	+ >
	110	+ 표현성적
	111	+ </div>
	112	+ </div>
	113	+ <div className="main-student-list">
	114	+ <div className="main-student-name">이기창</div>
	115	+ <div className="main-student-name">전승기</div>
	116	+ <div className="main-student-name">정채연</div>
	117	+ <div className="main-student-name">권상웅</div>
	118	+ </div>
	119	+ </div>
	120	+ </div>
	121	+ );
	122	+};
	123	+
	124	+export default MainTeacher2;

79ca85e

src/pages/main/MainTeacher3.css (added)

+++ src/pages/main/MainTeacher3.css

...	...	@@ -0,0 +1,95 @@
	1	+.main-teacher-container-2 {
	2	+ width: 80vw;
	3	+ margin: 0 auto;
	4	+ padding: 20px;
	5	+}
	6	+
	7	+.main-teacher-top-container-2 {
	8	+ display: flex;
	9	+ height: 700px;
	10	+ margin-bottom: 20px;
	11	+}
	12	+
	13	+.main-student-top-chart-2 {
	14	+ flex: 7;
	15	+ border-radius: 10px;
	16	+ background-color: #ffffff;
	17	+ margin-right: 20px;
	18	+ display: flex;
	19	+ flex-direction: column;
	20	+ justify-content: center;
	21	+ align-items: center;
	22	+}
	23	+
	24	+.main-student-comment-container {
	25	+ display: flex;
	26	+ margin-top: 20px;
	27	+ height: 100px;
	28	+ width: 100%;
	29	+}
	30	+
	31	+.main-student-comment {
	32	+ width: 80%;
	33	+ background-color: #ffffff;
	34	+ margin: 0 10px;
	35	+ border-radius: 10px;
	36	+ padding: 10px;
	37	+ font-size: large;
	38	+}
	39	+
	40	+.main-student-comment-button {
	41	+ width: 20%;
	42	+ background-color: #ffffff;
	43	+ margin: 0 10px;
	44	+ border-radius: 10px;
	45	+ padding: 10px;
	46	+ display: flex;
	47	+ justify-content: center;
	48	+ align-items: center;
	49	+ font-size: 20px;
	50	+}
	51	+
	52	+.main-student-comment-button:hover {
	53	+ cursor: pointer;
	54	+}
	55	+
	56	+.main-student-top-buttons-2 {
	57	+ flex: 1;
	58	+}
	59	+
	60	+.main-student-top-button {
	61	+ width: 150px;
	62	+ height: 150px;
	63	+ background-color: #ffffff;
	64	+ margin-bottom: 20px;
	65	+ font-size: 24px;
	66	+ display: flex;
	67	+ justify-content: center;
	68	+ align-items: center;
	69	+ border-radius: 15px;
	70	+}
	71	+
	72	+.main-student-top-button:hover {
	73	+ cursor: pointer;
	74	+}
	75	+
	76	+.main-student-list {
	77	+ flex: 3;
	78	+ margin-left: 20px;
	79	+ border-radius: 20px;
	80	+ background-color: #ffffff;
	81	+ display: flex;
	82	+ flex-direction: column;
	83	+ align-items: center;
	84	+}
	85	+
	86	+.main-student-name {
	87	+ display: flex;
	88	+ align-items: center;
	89	+ justify-content: center;
	90	+ background-color: #e6daff;
	91	+ width: 90%;
	92	+ height: 50px;
	93	+ margin: 10px 0;
	94	+ border-radius: 20px;
	95	+}

79ca85e

src/pages/main/MainTeacher3.jsx (added)

+++ src/pages/main/MainTeacher3.jsx

...	...	@@ -0,0 +1,125 @@
	1	+import React, { useState } from "react";
	2	+import "./MainTeacher.css";
	3	+import AllLineChart from "../../components/chart/AllLineChart";
	4	+import { useNavigate } from "react-router-dom";
	5	+
	6	+const MainTeacher3 = () => {
	7	+ const navigate = useNavigate();
	8	+ const datasets = [
	9	+ {
	10	+ label: "어휘",
	11	+ data: [12, 19, 3, 5, 2, 3, 7],
	12	+ borderColor: "rgba(75, 192, 192, 1)",
	13	+ fill: false,
	14	+ },
	15	+ {
	16	+ label: "문법",
	17	+ data: [2, 3, 20, 5, 1, 4, 9],
	18	+ borderColor: "rgba(153, 102, 255, 1)",
	19	+ fill: false,
	20	+ },
	21	+ {
	22	+ label: "문장",
	23	+ data: [3, 10, 13, 15, 22, 30, 25],
	24	+ borderColor: "rgba(255, 159, 64, 1)",
	25	+ fill: false,
	26	+ },
	27	+ {
	28	+ label: "이해",
	29	+ data: [5, 15, 10, 20, 8, 7, 18],
	30	+ borderColor: "rgba(54, 162, 235, 1)",
	31	+ fill: false,
	32	+ },
	33	+ {
	34	+ label: "표현",
	35	+ data: [1, 4, 6, 8, 10, 12, 14],
	36	+ borderColor: "rgba(255, 206, 86, 1)",
	37	+ fill: false,
	38	+ },
	39	+ {
	40	+ label: "집중",
	41	+ data: [9, 7, 6, 4, 3, 2, 1],
	42	+ borderColor: "rgba(75, 192, 192, 0.7)",
	43	+ fill: false,
	44	+ },
	45	+ ];
	46	+
	47	+ const expressionDataset = [
	48	+ {
	49	+ label: "표현",
	50	+ data: [3, 10, 13, 15, 22, 30, 25],
	51	+ borderColor: "rgba(255, 159, 64, 1)",
	52	+ fill: false,
	53	+ },
	54	+ ];
	55	+
	56	+ const comprehensionDataset = [
	57	+ {
	58	+ label: "이해",
	59	+ data: [5, 15, 10, 20, 8, 7, 18],
	60	+ borderColor: "rgba(54, 162, 235, 1)",
	61	+ fill: false,
	62	+ },
	63	+ ];
	64	+
	65	+ const [selectedDataset, setSelectedDataset] = useState(datasets);
	66	+ const handleButtonClick = (dataset) => {
	67	+ switch (dataset) {
	68	+ case "전체성적":
	69	+ setSelectedDataset(datasets);
	70	+ break;
	71	+ case "이해성적":
	72	+ setSelectedDataset(comprehensionDataset);
	73	+ break;
	74	+ case "표현성적":
	75	+ setSelectedDataset(expressionDataset);
	76	+ break;
	77	+ default:
	78	+ setSelectedDataset(datasets);
	79	+ break;
	80	+ }
	81	+ };
	82	+
	83	+ const handleNextPageClick = () => {
	84	+ navigate("/mainTeacher2");
	85	+ };
	86	+
	87	+ return (
	88	+ <div className="main-teacher-container">
	89	+ <h2>교사 전용 페이지</h2>
	90	+ <div className="main-teacher-top-container">
	91	+ <div className="main-teacher-top-chart">
	92	+ <AllLineChart datasets={selectedDataset} />
	93	+ </div>
	94	+ <div className="main-teacher-top-buttons">
	95	+ <div
	96	+ className="main-teacher-top-button"
	97	+ onClick={() => handleButtonClick("전체성적")}
	98	+ >
	99	+ 전체성적
	100	+ </div>
	101	+ <div
	102	+ className="main-teacher-top-button"
	103	+ onClick={() => handleButtonClick("이해성적")}
	104	+ >
	105	+ 이해성적
	106	+ </div>
	107	+ <div
	108	+ className="main-teacher-top-button"
	109	+ onClick={() => handleButtonClick("표현성적")}
	110	+ >
	111	+ 표현성적
	112	+ </div>
	113	+ <button
	114	+ className="main-teacher-next-button"
	115	+ onClick={handleNextPageClick}
	116	+ >
	117	+ 다음 페이지로
	118	+ </button>
	119	+ </div>
	120	+ </div>
	121	+ </div>
	122	+ );
	123	+};
	124	+
	125	+export default MainTeacher3;

6d74a74

79ca85e

src/pages/main/mainp.jsx

--- src/pages/main/mainp.jsx

+++ src/pages/main/mainp.jsx


 import AbilitiesChart from "../../components/chart/AbilitiesChart";
 import axios from "axios";
 import { useCookies } from "react-cookie";
+import { useNavigate } from "react-router-dom";
 const MainP = () => {
   const [cookies, setCookie, removeCookie] = useCookies(["loggedIn"]);
+  const navigate = useNavigate();
   const [currentStep, setCurrentStep] = useState(1);
   const [abilities, setAbilities] = useState([
     { name: "어휘", level: 50 },

       const response = await axios.get(`http://localhost:8080/rating`, {
         withCredentials: true,
       });
+      const responseData = response.data.data; // response.data는 이미 JavaScript 객체로 사용 가능합니다.
+      const role = responseData.role;
+      if (role == "parent") {
+        navigate("/mainParent");
+      } else {
+        navigate("/");
+      }
       if (response.data && response.data.result) {
         setAbilities(transformData(response.data.data));
       }

       console.error("Error fetching data: ", error);
     }
   };
+
   useEffect(() => {
+    fetchData();
+  }, []);
+  // 사용자 입력을 저장할 state 초기화
+  const [comment, setComment] = useState(
+    "어서와~ 꿈 속 우주공간은 처음이지? 여행하고 싶은 행성을 골라봐~"
+  );
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await axios.get("http://localhost:8080/member", {
+          withCredentials: true,
+        });
+        console.log(response);
+        setComment(response.data.data.comment);
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    };
     fetchData();
   }, []);
   return (

         <div className="mainp-left-top">
           <img src="/images/good.png" className="mainp-left-img" />
           <div className="mainp-left-top-div">
-            어서와~ 꿈 속 우주공간은 처음이지? 여행하고 싶은 행성을 골라봐~
+            {comment}
             <div className="bubble-tail"></div>
           </div>
         </div>

Add a comment

Open 0
Closed 0

List

...	...	@@ -18,6 +18,10 @@
18	18	import StudyMainFairyWorld from "./pages/studyMainFairyWorld/StudyMainFairyWorld";
19	19	import StudyMainFairyTravel from "./pages/studyMainFairyTravel/StudyMainFairyTravel";
20	20	import MainStudent from "./pages/main/MainStudent";
	21	+import MainTeacher from "./pages/main/MainTeacher";
	22	+import MainTeacher2 from "./pages/main/MainTeacher2";
	23	+import MainParent from "./pages/main/MainParent";
	24	+import MainSelect from "./pages/main/MainSelect";
21	25
22	26	function App() {
23	27	return (
...	...	@@ -77,6 +81,10 @@
77	81	/>
78	82	<Route path="/oneMainUnit" element={<OneMainUnit />} />
79	83	<Route path="/mainStudent" element={<MainStudent />} />
	84	+ <Route path="/mainTeacher" element={<MainTeacher />} />
	85	+ <Route path="/mainTeacher2" element={<MainTeacher2 />} />
	86	+ <Route path="/mainParent" element={<MainParent />} />
	87	+ <Route path="/mainSelect" element={<MainSelect />} />
80	88	</Routes>
81	89	</BrowserRouter>
82	90	</div>

...	...	@@ -1,7 +1,7 @@
1	1	import React, { useEffect, useRef } from "react";
2	2	import { Chart } from "chart.js/auto";
3	3
4		-const AllLineChart = ({ datasets }) => {
	4	+const AllLineChart = ({ labels, datasets }) => {
5	5	const chartRef = useRef(null);
6	6
7	7	useEffect(() => {
...	...	@@ -9,8 +9,12 @@
9	9	const chartInstance = new Chart(ctx, {
10	10	type: "line",
11	11	data: {
12		- labels: ["월", "화", "수", "목", "금", "토", "일"],
13		- datasets: datasets,
	12	+ labels: labels,
	13	+ datasets: datasets.map((dataset) => ({
	14	+ ...dataset,
	15	+ xAxisID: "x-axis-0", // Add xAxisID
	16	+ yAxisID: "y-axis-0", // Add yAxisID
	17	+ })),
14	18	},
15	19	options: {
16	20	responsive: true,
...	...	@@ -20,18 +24,30 @@
20	24	},
21	25	},
22	26	scales: {
23		- x: {
24		- display: true,
	27	+ "x-axis-0": {
	28	+ type: "category",
	29	+ position: "bottom",
25	30	title: {
26	31	display: true,
27		- text: "요일",
	32	+ text: "날짜",
	33	+ },
	34	+ ticks: {
	35	+ font: {
	36	+ family: "JalnanGothic, sans-serif",
	37	+ },
28	38	},
29	39	},
30		- y: {
31		- display: true,
	40	+ "y-axis-0": {
	41	+ type: "linear",
	42	+ position: "left",
32	43	title: {
33	44	display: true,
34	45	text: "점수",
	46	+ },
	47	+ ticks: {
	48	+ font: {
	49	+ family: "JalnanGothic, sans-serif",
	50	+ },
35	51	},
36	52	},
37	53	},
...	...	@@ -41,7 +57,7 @@
41	57	return () => {
42	58	chartInstance.destroy();
43	59	};
44		- }, [datasets]);
	60	+ }, [labels, datasets]);
45	61
46	62	return <canvas ref={chartRef} />;
47	63	};

...	...	@@ -40,7 +40,7 @@
40	40	path: "/",
41	41	expires: new Date(Date.now() + 30 * 60 * 1000),
42	42	});
43		- navigate("/");
	43	+ navigate("/mainSelect");
44	44	console.log(response.data);
45	45	})
46	46	.catch((error) => {

...	...	@@ -1,69 +1,181 @@
1		-import React from "react";
	1	+import React, { useEffect, useState } from "react";
2	2	import { useNavigate } from "react-router-dom";
	3	+import axios from "axios";
3	4	import "./MainStudent.css";
4	5	import AllLineChart from "../../components/chart/AllLineChart";
	6	+import AllBarChart from "../../components/chart/AllBarChart";
5	7
6	8	const MainStudent = () => {
7	9	const navigate = useNavigate();
	10	+ const [solved, setSolved] = useState([]);
	11	+ const [topTwoKeys, setTopTwoKeys] = useState([]);
	12	+ const [labels, setLabels] = useState([]);
	13	+ const [focusDataset, setFocusDataset] = useState([]);
	14	+ const [understandDataset, setUnderstandDataset] = useState([]);
	15	+ const [wordDataset, setWordDataset] = useState([]);
	16	+ const [grammarDataset, setGrammarDataset] = useState([]);
	17	+ const [sentenceDataset, setSentenceDataset] = useState([]);
	18	+ const [expressionDataset, setExpressionDataset] = useState([]);
	19	+ const [progress, setProgress] = useState(0);
	20	+ const [images, setImages] = useState({
	21	+ 동화여행: "fairytravel.png",
	22	+ 동화세계: "fairyworld.png",
	23	+ 문법요정: "grammerfariy.png",
	24	+ 문법랜드: "grammerland.png",
	25	+ 문장쑥쑥: "sentenceabsorb.png",
	26	+ 문장일기: "sentencediary.png",
	27	+ 동요여행: "songtravel.png",
	28	+ 동요나라: "songcountry.png",
	29	+ 어휘력쑥쑥: "wordabsorb.png",
	30	+ 단어뭉치: "wordbundle.png",
	31	+ });
8	32
9		- const datasets = [
10		- {
11		- label: "어휘",
12		- data: [12, 19, 3, 5, 2, 3, 7],
13		- borderColor: "rgba(75, 192, 192, 1)",
14		- fill: false,
15		- },
16		- {
17		- label: "문법",
18		- data: [2, 3, 20, 5, 1, 4, 9],
19		- borderColor: "rgba(153, 102, 255, 1)",
20		- fill: false,
21		- },
22		- {
23		- label: "문장",
24		- data: [3, 10, 13, 15, 22, 30, 25],
25		- borderColor: "rgba(255, 159, 64, 1)",
26		- fill: false,
27		- },
28		- {
29		- label: "이해",
30		- data: [5, 15, 10, 20, 8, 7, 18],
31		- borderColor: "rgba(54, 162, 235, 1)",
32		- fill: false,
33		- },
34		- {
35		- label: "표현",
36		- data: [1, 4, 6, 8, 10, 12, 14],
37		- borderColor: "rgba(255, 206, 86, 1)",
38		- fill: false,
39		- },
40		- {
41		- label: "집중",
42		- data: [9, 7, 6, 4, 3, 2, 1],
43		- borderColor: "rgba(75, 192, 192, 0.7)",
44		- fill: false,
45		- },
46		- ];
	33	+ const goContent = () => {
	34	+ navigate("/");
	35	+ };
47	36
48		- const expressionDataset = [
49		- {
50		- label: "표현",
51		- data: [3, 10, 13, 15, 22, 30, 25],
52		- borderColor: "rgba(255, 159, 64, 1)",
53		- fill: false,
54		- },
55		- ];
	37	+ const formatDate = (dateString) => {
	38	+ const date = new Date(dateString);
	39	+ const month = String(date.getMonth() + 1).padStart(2, "0");
	40	+ const day = String(date.getDate()).padStart(2, "0");
	41	+ return `${month}-${day}`;
	42	+ };
56	43
57		- const comprehensionDataset = [
58		- {
59		- label: "이해",
60		- data: [5, 15, 10, 20, 8, 7, 18],
61		- borderColor: "rgba(54, 162, 235, 1)",
62		- fill: false,
63		- },
64		- ];
	44	+ const fetchSolved = async () => {
	45	+ try {
	46	+ const response = await axios.get(`http://localhost:8080/member/solved`, {
	47	+ withCredentials: true,
	48	+ });
	49	+ console.log(response);
	50	+ if (response.data && response.data.result) {
	51	+ setSolved(response.data.data.length);
	52	+ }
	53	+ } catch (error) {
	54	+ console.error("Error fetching data: ", error);
	55	+ }
	56	+ };
65	57
66		- const progress = 60;
	58	+ const fetchSolvedCount = async () => {
	59	+ try {
	60	+ const response = await axios.get(`http://localhost:8080/solved/count`, {
	61	+ withCredentials: true,
	62	+ });
	63	+ const data = response.data;
	64	+
	65	+ // 객체의 키와 값을 배열로 변환
	66	+ const solvedCounts = Object.entries(data);
	67	+
	68	+ // 값이 큰 순서대로 정렬
	69	+ solvedCounts.sort((a, b) => b[1] - a[1]);
	70	+
	71	+ // 가장 큰 값 세 개의 키 가져오기
	72	+ const [first, second, three] = solvedCounts
	73	+ .slice(0, 3)
	74	+ .map(([key, value]) => key);
	75	+
	76	+ // 상태로 설정
	77	+ setTopTwoKeys([first, second, three]);
	78	+
	79	+ console.log("가장 큰 값 세 개의 키:", first, second, three);
	80	+
	81	+ // 이후에 필요한 로직을 수행하면 됩니다.
	82	+ } catch (error) {
	83	+ console.error("Error fetching data: ", error);
	84	+ }
	85	+ };
	86	+
	87	+ const fetchData = async () => {
	88	+ try {
	89	+ const response = await axios.get(
	90	+ "http://localhost:8080/scorelog/latest",
	91	+ {
	92	+ withCredentials: true,
	93	+ }
	94	+ );
	95	+ console.log(response);
	96	+ const data = response.data;
	97	+
	98	+ const labels = data.map((entry) => formatDate(entry.createdAt));
	99	+ const focusData = data.map((entry) => entry.focus);
	100	+ const understandData = data.map((entry) => entry.understand);
	101	+ const wordData = data.map((entry) => entry.word);
	102	+ const grammarData = data.map((entry) => entry.grammar);
	103	+ const sentenceData = data.map((entry) => entry.sentence);
	104	+ const expressionData = data.map((entry) => entry.expression);
	105	+
	106	+ setLabels(labels);
	107	+ setFocusDataset([
	108	+ {
	109	+ label: "집중",
	110	+ data: focusData,
	111	+ borderColor: "rgba(75, 192, 192, 0.7)",
	112	+ fill: false,
	113	+ },
	114	+ ]);
	115	+ setUnderstandDataset([
	116	+ {
	117	+ label: "이해",
	118	+ data: understandData,
	119	+ borderColor: "rgba(54, 162, 235, 1)",
	120	+ fill: false,
	121	+ },
	122	+ ]);
	123	+ setWordDataset([
	124	+ {
	125	+ label: "어휘",
	126	+ data: wordData,
	127	+ borderColor: "rgba(75, 192, 192, 1)",
	128	+ fill: false,
	129	+ },
	130	+ ]);
	131	+ setGrammarDataset([
	132	+ {
	133	+ label: "문법",
	134	+ data: grammarData,
	135	+ borderColor: "rgba(153, 102, 255, 1)",
	136	+ fill: false,
	137	+ },
	138	+ ]);
	139	+ setSentenceDataset([
	140	+ {
	141	+ label: "문장",
	142	+ data: sentenceData,
	143	+
	144	+ borderColor: "rgba(255, 159, 64, 1)",
	145	+ fill: false,
	146	+ },
	147	+ ]);
	148	+ setExpressionDataset([
	149	+ {
	150	+ label: "표현",
	151	+ data: expressionData,
	152	+ borderColor: "rgba(255, 206, 86, 1)",
	153	+ fill: false,
	154	+ },
	155	+ ]);
	156	+
	157	+ const totalProgress = data.reduce(
	158	+ (acc, cur) =>
	159	+ acc +
	160	+ cur.focus +
	161	+ cur.expression +
	162	+ cur.understand +
	163	+ cur.word +
	164	+ cur.sentence +
	165	+ cur.grammar,
	166	+ 0
	167	+ );
	168	+ setProgress(totalProgress / (6 * data.length));
	169	+ } catch (error) {
	170	+ console.error("Error fetching data:", error);
	171	+ }
	172	+ };
	173	+
	174	+ useEffect(() => {
	175	+ fetchSolvedCount();
	176	+ fetchSolved();
	177	+ fetchData();
	178	+ }, []);
67	179
68	180	const getProgressBarColor = (progress) => {
69	181	if (progress < 30) {
...	...	@@ -75,47 +187,111 @@
75	187	}
76	188	};
77	189
	190	+ const expressionAndUnderstandDatasets = [
	191	+ {
	192	+ label: "이해",
	193	+ data: understandDataset.length ? understandDataset[0].data : [],
	194	+ backgroundColor: "rgba(54, 162, 235, 0.5)",
	195	+ },
	196	+ {
	197	+ label: "표현",
	198	+ data: expressionDataset.length ? expressionDataset[0].data : [],
	199	+ backgroundColor: "rgba(255, 206, 86, 0.5)",
	200	+ },
	201	+ ];
	202	+
78	203	return (
79	204	<>
80	205	<div className="mainstudent-container">
81	206	<div className="mainstudent-chart">
82		- <div className="mainstudent-chart-left-container">
83		- <div className="mainstudent-chart-all">
84		- <AllLineChart datasets={datasets} />
85		- </div>
86		- </div>
87		- <div className="mainstudent-chart-right-container">
88		- <div className="mainstudent-chart-three-box">
89		- <div className="mainstudent-chart-three-box-chart">
90		- <h1 onClick={() => navigate("/")}>학습컨텐츠 가기</h1>
	207	+ <div className="mainstudent-chart-container">
	208	+ <div className="mainstudent-chart-box">
	209	+ <div className="mainstudent-chart-box-container">
	210	+ <h2>집중</h2>
	211	+ <div className="chart-wrapper">
	212	+ <AllLineChart labels={labels} datasets={focusDataset} />
	213	+ </div>
91	214	</div>
92	215	</div>
93		- <div className="mainstudent-chart-three-box">
94		- <div className="mainstudent-chart-three-box-chart">
95		- <AllLineChart datasets={expressionDataset} />
	216	+ <div className="mainstudent-chart-box">
	217	+ <div className="mainstudent-chart-box-container">
	218	+ <h2>어휘</h2>
	219	+ <div className="chart-wrapper">
	220	+ <AllLineChart labels={labels} datasets={wordDataset} />
	221	+ </div>
96	222	</div>
97	223	</div>
98		- <div className="mainstudent-chart-three-box">
99		- <div className="mainstudent-chart-three-box-chart">
100		- <AllLineChart datasets={comprehensionDataset} />
	224	+ <div className="mainstudent-chart-box">
	225	+ <div className="mainstudent-chart-box-container">
	226	+ <h2>문법</h2>
	227	+ <div className="chart-wrapper">
	228	+ <AllLineChart labels={labels} datasets={grammarDataset} />
	229	+ </div>
	230	+ </div>
	231	+ </div>
	232	+ <div className="mainstudent-chart-box">
	233	+ <div className="mainstudent-chart-box-container">
	234	+ <h2>문장</h2>
	235	+ <div className="chart-wrapper">
	236	+ <AllLineChart labels={labels} datasets={sentenceDataset} />
	237	+ </div>
	238	+ </div>
	239	+ </div>
	240	+ <div className="mainstudent-chart-box">
	241	+ <div className="mainstudent-chart-box-container">
	242	+ <h2>이해와 표현</h2>
	243	+ <div className="chart-wrapper">
	244	+ <AllBarChart
	245	+ labels={labels}
	246	+ datasets={expressionAndUnderstandDatasets}
	247	+ />
	248	+ </div>
	249	+ </div>
	250	+ </div>
	251	+ <div className="mainstudent-chart-box">
	252	+ <div
	253	+ className="mainstudent-gocontent-box-container"
	254	+ onClick={goContent}
	255	+ style={{ cursor: "pointer" }}
	256	+ >
	257	+ 학습 컨텐츠 바로가기
101	258	</div>
102	259	</div>
103	260	</div>
104	261	</div>
	262	+
105	263	<div className="mainstudent-progress-recommend">
106	264	<div className="mainstudent-progress-left-container">
107		- 진행도
108		- <div className="progress-bar-container">
109		- <div
110		- className="progress-bar"
111		- style={{
112		- width: `${progress}%`,
113		- backgroundColor: getProgressBarColor(progress),
114		- }}
115		- ></div>
	265	+ <div className="mainstudent-progress-bar-container">
	266	+ <div className="progress-bar-container">
	267	+ <div
	268	+ className="progress-bar"
	269	+ style={{
	270	+ width: `${solved * 1.25}%`,
	271	+ backgroundColor: getProgressBarColor(solved * 1.25),
	272	+ }}
	273	+ ></div>
	274	+ </div>
	275	+ <div className="mainstudent-progress">
	276	+ 진행률 : {solved * 1.25}%
	277	+ </div>
116	278	</div>
117	279	</div>
118		- <div className="mainstudent-recommend-right-container">차트세개</div>
	280	+ <div className="mainstudent-recommend-right-container">
	281	+ <div className="mainstudent-recommend-container">
	282	+ <div className="mainstudent-recommend-question">
	283	+ <h2>가장 인기 많은 학습 컨텐츠</h2>
	284	+ </div>
	285	+ <div className="mainstudent-recommend-keys">
	286	+ {topTwoKeys.map((key) => (
	287	+ <div key={key} className="mainstudent-recommend-key">
	288	+ <img src={`/images/${images[key]}`} alt={key} />
	289	+ <span>{key}</span>
	290	+ </div>
	291	+ ))}
	292	+ </div>
	293	+ </div>
	294	+ </div>
119	295	</div>
120	296	</div>
121	297	</>

...	...	@@ -5,8 +5,10 @@
5	5	import AbilitiesChart from "../../components/chart/AbilitiesChart";
6	6	import axios from "axios";
7	7	import { useCookies } from "react-cookie";
	8	+import { useNavigate } from "react-router-dom";
8	9	const MainP = () => {
9	10	const [cookies, setCookie, removeCookie] = useCookies(["loggedIn"]);
	11	+ const navigate = useNavigate();
10	12	const [currentStep, setCurrentStep] = useState(1);
11	13	const [abilities, setAbilities] = useState([
12	14	{ name: "어휘", level: 50 },
...	...	@@ -41,6 +43,13 @@
41	43	const response = await axios.get(`http://localhost:8080/rating`, {
42	44	withCredentials: true,
43	45	});
	46	+ const responseData = response.data.data; // response.data는 이미 JavaScript 객체로 사용 가능합니다.
	47	+ const role = responseData.role;
	48	+ if (role == "parent") {
	49	+ navigate("/mainParent");
	50	+ } else {
	51	+ navigate("/");
	52	+ }
44	53	if (response.data && response.data.result) {
45	54	setAbilities(transformData(response.data.data));
46	55	}
...	...	@@ -49,7 +58,27 @@
49	58	console.error("Error fetching data: ", error);
50	59	}
51	60	};
	61	+
52	62	useEffect(() => {
	63	+ fetchData();
	64	+ }, []);
	65	+ // 사용자 입력을 저장할 state 초기화
	66	+ const [comment, setComment] = useState(
	67	+ "어서와~ 꿈 속 우주공간은 처음이지? 여행하고 싶은 행성을 골라봐~"
	68	+ );
	69	+
	70	+ useEffect(() => {
	71	+ const fetchData = async () => {
	72	+ try {
	73	+ const response = await axios.get("http://localhost:8080/member", {
	74	+ withCredentials: true,
	75	+ });
	76	+ console.log(response);
	77	+ setComment(response.data.data.comment);
	78	+ } catch (error) {
	79	+ console.error("Error fetching data:", error);
	80	+ }
	81	+ };
53	82	fetchData();
54	83	}, []);
55	84	return (
...	...	@@ -58,7 +87,7 @@
58	87	<div className="mainp-left-top">
59	88	<img src="/images/good.png" className="mainp-left-img" />
60	89	<div className="mainp-left-top-div">
61		- 어서와~ 꿈 속 우주공간은 처음이지? 여행하고 싶은 행성을 골라봐~
	90	+ {comment}
62	91	<div className="bubble-tail"></div>
63	92	</div>
64	93	</div>

Delete comment