[2일차] 박하린 과제 제출합니다.

src/App.jsx

@@ -1,17 +1,43 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
+import { useState, useEffect } from "react";
 import "./App.css";
+import TimerDisplay from './components/TimerDisplay';
+import TimerControls from './components/TimerControls';
 
 function App() {
-  const [count, setCount] = useState(0);
-  const name = "류승찬";
+  const [start, setStart] = useState(false);
+  const [time, setTime] = useState(1500);
+  const [mods, setMods] = useState(true);
+
+
+  useEffect(()=>{
+    if(start){
+      const interval = setInterval(()=>{
+        setTime(time=>time-1);
+      }, 1000);
+      if(time===0){
+        setMods(!mods);
+        mods?setTime(1500):setTime(300);
+      }
+      return () => clearInterval(interval);
+    }
+  }, [start, mods]);
+
+
+  const timerOn = ()=>{
+    setStart(!start);
+  }
+  const changeMods = ()=>{
+    setStart(false);
+    mods ? setTime(300) : setTime(1500);
+    setMods(!mods);
+  }
 
   return (
     <>
-      화이팅
+      <TimerDisplay time={time} />
+      <TimerControls mods={mods} start={start} timerOn={timerOn} changeMods={changeMods} />
     </>
   );
 }
 
-export default App;
+export default App;

src/components/TimerControls.jsx

@@ -0,0 +1,8 @@
+export default function TimerControls({mods, start, timerOn, changeMods}){
+    return(
+        <>
+            <button onClick={timerOn}>{start?'끝내기':'시작하기'}</button>
+            <button onClick={changeMods}>{mods?'공부 📓':'휴식 🎈'}</button>
+        </>
+    )
+}

src/components/TimerDisplay.jsx

@@ -0,0 +1,16 @@
+import {useRef, useEffect} from "react";
+
+export default function TimerDisplay({time}){
+    const timeRef = useRef(null);
+    useEffect(()=>{
+        const timeText = `${String(Math.floor(time / 60)).padStart(2, '0')} : ${String(Math.floor(time%60)).padStart(2, '0')}`;
+        if(timeRef.current)
+            timeRef.current.textContent = timeText;
+    }, [time]);
+    return (
+        <>
+            <h1>🍅뽀모도로 타이머🍅</h1>
+            <h2 ref={timeRef}>00 : 00</h2>
+        </>
+    );
+}