From 53c4942393642d46c4c694406420b2155a9d3c11 Mon Sep 17 00:00:00 2001
From: Sae-byeol <toquf0424@naver.com>
Date: Wed, 18 Aug 2021 04:25:03 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B3=B5=EB=B6=80=EC=8B=9C=EA=B0=84=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js              |  2 ++
 src/MyTime.css          | 68 ++++++++++++++++++++++++++++++++++++
 src/component/MyPage.js |  9 ++++-
 src/component/MyTime.js | 77 +++++++++++++++++++++++++++++++++++++++++
 4 files changed, 155 insertions(+), 1 deletion(-)
 create mode 100644 src/MyTime.css
 create mode 100644 src/component/MyTime.js

diff --git a/src/App.js b/src/App.js
index d06bf81..3c1c3ff 100644
--- a/src/App.js
+++ b/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>
   );
diff --git a/src/MyTime.css b/src/MyTime.css
new file mode 100644
index 0000000..84520f6
--- /dev/null
+++ b/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;
+  }
\ No newline at end of file
diff --git a/src/component/MyPage.js b/src/component/MyPage.js
index 3304de0..ea4da7f 100644
--- a/src/component/MyPage.js
+++ b/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>
diff --git a/src/component/MyTime.js b/src/component/MyTime.js
new file mode 100644
index 0000000..907d13b
--- /dev/null
+++ b/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>
+    );
+}
\ No newline at end of file