[최선우] custom hook 실습

src/components/CountdownExample.jsx

@@ -1,31 +1,10 @@
 import { useState, useEffect } from "react";
+import {useCountdown} from "../hooks/useCountdown"
 
 export const CountdownExample = () => {
   const targetDate = new Date("2025-08-25T00:00:00");
+  const timeLeft=useCountdown(targetDate);
 
-  const calculateTimeLeft = (targetDate) => {
-    const difference = targetDate.getTime() - new Date().getTime();
-
-    if (difference <= 0) {
-      return { days: 0, hours: 0, minutes: 0, seconds: 0 };
-    }
-
-    const days = Math.floor(difference / (1000 * 60 * 60 * 24));
-    const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);
-    const minutes = Math.floor((difference / (1000 * 60)) % 60);
-    const seconds = Math.floor((difference / 1000) % 60);
-
-    return { days, hours, minutes, seconds };
-  };
-  const [timeLeft, setTimeLeft] = useState(() => calculateTimeLeft(targetDate));
-
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setTimeLeft(calculateTimeLeft(targetDate));
-    }, 1000);
-
-    return () => clearInterval(timer);
-  }, [targetDate]);
 
   return (
     <div>

src/components/WindowSizeExample.jsx

@@ -1,27 +1,8 @@
-import { useEffect, useState } from "react";
+import {useWindowSize} from "../hooks/useWindowSize"
 
 export const WindowSizeExample = () => {
   // 실습 1. 하단 코드를 useWindowSize (커스텀 훅으로 바꿔주세요!)
-  const [windowSize, setWindowSize] = useState({
-    width: window.innerWidth,
-    height: window.innerHeight,
-  });
-
-  useEffect(() => {
-    const handleResize = () => {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight,
-      });
-    };
-
-    window.addEventListener("resize", handleResize);
-
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-
+  const {windowSize}=useWindowSize();
   return (
     <div>
       <h2>useWindowSize 실습</h2>

src/components/YourOwnHookPage.jsx

@@ -1,11 +1,12 @@
-import { useSomething } from "../hooks/useSomething";
+import { useErasebtn } from "../hooks/useErasebtn";
 
 export const YourOwnHookPage = () => {
-  // const { something... } = useSomething();
-  // 하단 UI에 자유롭게 위에서 받아온 값들을 바인딩 해보세요~
+   const { erase,toggleErase } = useErasebtn(true);
+
   return (
     <div>
-      <h2>useSomething 실습</h2>
+          {erase ? <div>안녕</div> : null}
+          <button onClick={toggleErase}>눌러보기</button>
     </div>
   );
 };

src/hooks/useCountdown.js

@@ -1,3 +1,30 @@
+import { useState, useEffect } from "react";
+
 export const useCountdown = (targetDate) => {
+
+
+  const calculateTimeLeft = (targetDate) => {
+    const difference = targetDate.getTime() - new Date().getTime();
+
+    if (difference <= 0) {
+      return { days: 0, hours: 0, minutes: 0, seconds: 0 };
+    }
+
+    const days = Math.floor(difference / (1000 * 60 * 60 * 24));
+    const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);
+    const minutes = Math.floor((difference / (1000 * 60)) % 60);
+    const seconds = Math.floor((difference / 1000) % 60);
+
+    return { days, hours, minutes, seconds };
+  };
+  const [timeLeft, setTimeLeft] = useState(() => calculateTimeLeft(targetDate));
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft(targetDate));
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [targetDate]);
   return timeLeft;
 };

src/hooks/useErasebtn.js

@@ -0,0 +1,12 @@
+import { useState, useEffect } from "react";
+
+export const useErasebtn = (initialValue) => {
+  const [erase, setErase] = useState(initialValue);
+
+  const toggleErase = () => {
+
+    setErase((prev) => !prev);
+  };
+
+  return { erase, toggleErase };
+};

src/hooks/useWindowSize.js

@@ -1 +1,26 @@
 // 커스텀훅 코드를 작성해보세요!
+import { useEffect,useState } from "react";
+
+export const useWindowSize=()=>{
+    const [windowSize, setWindowSize] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return {windowSize};
+}