Merge pull request #24 from SoluxProject/feature/#23

공부시간관리 페이지

src/App.js

@@ -12,6 +12,7 @@ import EditMyPage from './component/EditMyPage';
 import Timer from './component/Timer';
 import ExamDday from './component/ExamDday';
 import DailynoteAdd from './component/DailynoteAdd';
+import MyTime from './component/MyTime';
 
 function App() {
   return (
@@ -29,6 +30,7 @@ function App() {
           <Route exact path="/editMyPage" component={EditMyPage}/>
           <Route exact path="/timer" component={Timer} />
           <Route exact path="/examDday" component={ExamDday}/>
+          <Route exact path="/mytime" component={MyTime}/>
       </div>
     </BrowserRouter>
   );

src/MyTime.css

@@ -0,0 +1,68 @@
+.MyTime{
+    display: flex;
+    flex-direction: column;
+}
+.MyTimeMain{
+    margin-left: 250px;
+    margin-right: 250px;
+}
+.MyTimeTitle{
+    margin-top: 50px;
+    color:  #456268;
+    font-weight: bold;
+    font-size: 40px;
+}
+.TodayTitle{
+    width: 300px;
+    text-align: left;
+    margin-left: 100px;
+    margin-top: 50px;
+    font-size: 20px;
+    font-weight: 900;
+} 
+
+.WeekTitle{
+    width: 300px;
+    text-align: left;
+    margin-left: 100px;
+    margin-top: 50px;
+    font-size: 20px;
+    font-weight: 900;
+}
+.MyTimeNoteBox{
+    padding-top: 10px;
+    padding-right: 100px;
+    padding-left: 10px;
+}
+.MyTimeNotes {
+    height: 80px;
+    border: 1px solid none;
+    border-radius: 10px;
+    padding: 20px;
+    margin-bottom: 50px;
+    margin-left: 100px;
+    background-color: white;
+  }
+  .Time{
+      font-weight: bold;
+      font-size: 28px;
+  }
+  .TimerBtn{
+    width: 100px;
+    color:#FCF8EC;
+    background-color:#456268;
+    border-color:#456268;
+    padding: 1rem 1.75rem;
+    font-size: 20px;
+    display: inline-block;
+    font-weight: 400;
+    line-height: 1.5;
+    text-align: center;
+    text-decoration: none;
+    vertical-align: middle;
+    cursor: pointer;
+    background-color: #456268;
+    border: 0.125rem solid transparent;
+    padding: 0.375rem 0.75rem;
+    border-radius: 0.5rem;
+  }

src/component/MyPage.js

@@ -68,7 +68,14 @@ export default function MyPage(){
                         }}>
                         <button className="MyPageBtn MyPageExamBtn">시험일정 관리</button>
                     </Link>
-                    <button className="MyPageBtn MyPageTimeBtn">공부시간 관리</button>
+                    <Link to={{
+                        pathname:"/mytime",
+                        state: {
+                            id:user.id
+                        }
+                        }}>
+                        <button className="MyPageBtn MyPageTimeBtn">공부시간 관리</button>
+                    </Link>
                 </div>
             </div>
         </div>

src/component/MyTime.js

@@ -0,0 +1,77 @@
+import '../MyTime.css';
+import React, {useState, useEffect} from 'react';
+import Axios from "axios";
+import MyPageNavbar from './MyPageNavbar';
+
+export default function MyTime ({location}){
+
+    const id=location.state.id;
+
+    const [recordDay, setRecordDay] = useState('');
+    const [recordWeek, setRecordWeek] = useState('');
+    const [timerWeekRank, setTimerWeekRank] = useState([]);
+
+
+    useEffect(() => {
+        Axios.get('/timerDay/list')
+        .then(res => {
+            if(res.data.success === undefined) {
+                showRecordDay(res.data[0]);
+            }
+            else {
+                alert(res.data.message);
+            }
+        })
+
+        Axios.get('/timerWeek/rank')
+        .then(res=>{
+            if(res.data.success) {
+                showRecordWeek((res.data.data.filter(arr => arr.timerWeekid ===id))[0]);
+            }
+        })
+    }, []);
+
+    const showRecordDay = (result) => {
+        const hour = parseInt((result.recordDay/60)/60);
+        const minute = parseInt((result.recordDay/60)%60);
+        const second = parseInt(result.recordDay%60);
+        setRecordDay(`${hour<10 ? `0${hour}` : hour} : ${minute<10 ? `0${minute}` : minute} : ${second<10 ? `0${second}` : second}`);
+    };
+
+
+
+    const showRecordWeek = (result) => {
+        const hour = parseInt((result.recordWeek/60)/60);
+        const minute = parseInt((result.recordWeek/60)%60);
+        const second = parseInt(result.recordWeek%60);
+        setRecordWeek(`${hour<10 ? `0${hour}` : hour} : ${minute<10 ? `0${minute}` : minute} : ${second<10 ? `0${second}` : second}`);
+    };
+
+    return(
+        <div className="MyTime">
+            <div className="MyPageNavbar">
+            <MyPageNavbar></MyPageNavbar>
+            </div>
+            <div className="MyTimeTitle">나의 공부 시간</div>
+            <div className="MyTimeMain">
+                <div className="TodayTitle">[오늘의 공부 시간]</div>
+                <div className="MyTimeNoteBox">
+                    <div className="MyTimeNotes">
+                        <div className="Time">{recordDay}</div>
+                    </div>
+                </div>
+                <div className="WeekTitle">[주간 공부 시간]</div>
+                <div className="MyTimeNoteBox">
+                    <div className="MyTimeNotes">
+                        <div className="Time">{recordWeek}</div>
+                    </div>
+                </div>
+            </div>
+            <div className="ExamBtn">
+                <button className="TimerBtn">Timer</button>
+            </div>
+
+
+        </div>
+    );
+}