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