Merge pull request #11 from SoluxProject/feature/#9

Timer 기능 추가

src/App.js

@@ -9,6 +9,7 @@ import Search from './component/Search';
 import Dailynote from './component/Dailynote';
 import MyPage from './component/MyPage';
 import EditMyPage from './component/EditMyPage';
+import Timer from './component/Timer';
 
 function App() {
   return (
@@ -23,6 +24,7 @@ function App() {
           <Route exact path="/auth/search" component={Search} />
           <Route exact path="/mypage" component={MyPage}/>
           <Route exact path="/editMyPage" component={EditMyPage}/>
+          <Route exact path="/timer" component={Timer} />
       </div>
     </BrowserRouter>
   );

src/Timer.css

@@ -0,0 +1,59 @@
+@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap');
+
+.Timer {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+.timer-set {
+    width: 70%;
+    margin: 60px 0px;
+    margin-bottom: 50px;
+    padding: 40px;
+    padding-top: 20px;
+    background-color: #456268;
+    background: linear-gradient( to right, #5d8c96, #25383a );
+}
+.dayRecord-set {
+    text-align: left;
+    width: 70%;
+}
+.dayRecord-bar {
+    border-bottom: 1.5px solid #456268;
+    padding: 8px;
+    padding-left: 20px;
+}
+.dayRecord-list {
+    border-bottom: 1.5px solid #456268;
+    padding: 8px;
+    padding-left: 20px;
+}
+.dayRecord-bar > span {
+    margin: 61px;
+}
+.dayRecord-list > span {
+    margin: 40px;
+}
+.time {
+    margin: 15px 0px;
+    font-family: 'Nanum Myeongjo', serif;
+    font-size: 100px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    color: white;
+}
+.control {
+    padding: 0px 60px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+}
+.control-btn {
+    font-size: 2rem;
+    cursor: pointer;
+    color: white;
+}

src/component/Navbar.js

@@ -46,7 +46,7 @@ function Navbar(props) {
                     </Link>)
                     }
                     {(thisPage !== "Timer") &&
-                    (<Link to="/">
+                    (<Link to="/timer">
                         <li>
                             TIMER
                         </li>

src/component/Timer.js

@@ -0,0 +1,113 @@
+import React, { useState, useRef, useEffect } from "react";
+import Axios from "axios";
+import Navbar from './Navbar';
+import '../Timer.css';
+import { VscDebugStart } from 'react-icons/vsc';
+import { AiOutlinePause } from 'react-icons/ai';
+import { VscDebugRestart } from 'react-icons/vsc';
+import { AiOutlineSave } from 'react-icons/ai';
+
+
+function Timer() {
+    const time = useRef(0);
+    const intervalId = useRef(null);
+    const [min, setMin] = useState(0);
+    const [sec, setSec] = useState(0);
+    const [hr, setHr] = useState(0);
+
+    const [date, setDate] = useState('');
+    const [recordDay, setRecordDay] = useState('');
+    // console.log(`렌더링...time: ${time.current}`);
+
+    const startTimer = () => {
+        intervalId.current = setInterval(() => {
+            setHr(parseInt((time.current/60)/60));
+            setMin(parseInt((time.current/60)%60)); 
+            setSec(parseInt(time.current % 60));
+            time.current += 1}, 1000);
+        // console.log(`시작...intervalId: ${intervalId.current}`);
+    };
+
+    const stopTimer = () => {
+        clearInterval(intervalId.current);
+        // console.log(`정지...intervalId: ${intervalId.current}`);
+    };
+
+    const resetTimer = () => {
+        time.current = 0;
+        setHr(0);
+        setMin(0);
+        setSec(0);
+        // console.log(`초기화...time:${time.current} intervalId: ${intervalId.current}`);
+    };
+
+    const saveTimer = () => {
+        if(window.confirm('기록을 저장하시겠습니까?')) {
+            Axios.post('/timerDay/update', {
+                recordDay: time.current,
+            })
+            .then(res => {
+                if(res.data.success === undefined) {
+                    showRecord(res.data[0]);
+                }
+                else {
+                    alert(res.data.message);
+                }
+            })
+        }
+    };
+
+    const showRecord = (result) => {
+        const hour = parseInt((result.recordDay/60)/60);
+        const minute = parseInt((result.recordDay/60)%60);
+        const second = parseInt(result.recordDay%60);
+        setDate(`${new Date().getFullYear()}.${new Date().getMonth() + 1}.${new Date().getDate()}`); 
+        setRecordDay(`${hour<10 ? `0${hour}` : hour} : ${minute<10 ? `0${minute}` : minute} : ${second<10 ? `0${second}` : second}`);
+    };
+
+    useEffect(() => {
+        Axios.get('/timerDay/list')
+        .then(res => {
+            if(res.data.success === undefined) {
+                showRecord(res.data[0]);
+            }
+            else {
+                alert(res.data.message);
+            }
+        })
+    }, []);
+
+    return (
+        <div className = 'wrapper'>
+            <div className = 'navbar'>
+                <Navbar page="Timer" />
+            </div>
+            <div className = 'Timer'>
+                <div className = 'timer-set'>
+                    <h2 style={{color: 'white'}}>TIMER</h2>
+                    <div className = 'time'>
+                        {hr<10 ? `0${hr}` : hr} : {min<10 ? `0${min}` : min} : {sec<10 ? `0${sec}` : sec}
+                    </div>
+                    <div className = 'control'>
+                        <VscDebugStart className='control-btn' title="START" onClick={startTimer} />
+                        <AiOutlinePause className='control-btn' title="STOP" onClick={stopTimer} />
+                        <AiOutlineSave className='control-btn' title="SAVE" onClick={saveTimer} />
+                        <VscDebugRestart className='control-btn' title="RESET" onClick={resetTimer} />
+                    </div>
+                </div>
+                <div className = 'dayRecord-set'>
+                    <div className = 'dayRecord-bar'>
+                        <span>날짜</span>
+                        <span>기록</span>
+                    </div>
+                    <div className = 'dayRecord-list'>
+                        <span>{date}</span>
+                        <span>{recordDay}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Timer;