diff --git a/src/components/WindowSizeExample.jsx b/src/components/WindowSizeExample.jsx index 8a4c768..295affd 100644 --- a/src/components/WindowSizeExample.jsx +++ b/src/components/WindowSizeExample.jsx @@ -1,26 +1,9 @@ -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(); // 훅이 객체를 반환하고, 그 객체 안에 windowSize라는 속성이 있는 경우 + const windowSize = useWindowSize(); // 이건 useWindowSize()가 windowSize 객체 자체를 반환하는 경우에만 사용 return (
@@ -30,3 +13,4 @@ export const WindowSizeExample = () => {
); }; + diff --git a/src/hooks/useCountdown.js b/src/hooks/useCountdown.js index 19c04c3..4dc3f18 100644 --- a/src/hooks/useCountdown.js +++ b/src/hooks/useCountdown.js @@ -1,3 +1,12 @@ +import { useEffect, useState } from "react"; +const targetDate = new Date("2025-08-25T00:00:00"); + export const useCountdown = (targetDate) => { + const difference = targetDate.getTime() - Date().getTime(); + + const Days = Math.floor(difference / (1000*60*60*24)); + + + return timeLeft; }; diff --git a/src/hooks/useWindowSize.js b/src/hooks/useWindowSize.js index 28d9f7c..2e8c117 100644 --- a/src/hooks/useWindowSize.js +++ b/src/hooks/useWindowSize.js @@ -1 +1,27 @@ // 커스텀훅 코드를 작성해보세요! +import { useEffect, useState } from "react"; + +//defalut 여부 +export const useWindowSize = () => { + const [windowSize, setWindowSize] = useState({ + width: window.innerWidth, + height: window.innerHeight, + }); + + useEffect(() => { + const handelResize = () => { //setWindowSize를 호출 + setWindowSize({ + width: window.innerWidth, + height: window.innerHeight, + }); + }; + + window.addEventListener("resize", handelResize); + + return () => { + window.removeEventListener("resize", handelResize); + }; + }, []); + + return windowSize; +}; \ No newline at end of file