[이보연] 커스텀훅 실습

package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "canvas-confetti": "^1.9.3",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "styled-components": "^6.1.19"
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",

src/components/CountdownExample.jsx

@@ -1,31 +1,8 @@
-import { useState, useEffect } from "react";
+import { useCountdown } from "../hooks/useCountdown";
 
 export const CountdownExample = () => {
-  const targetDate = new Date("2025-08-25T00:00:00");
-
-  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]);
+    const targetDate = new Date("2025-08-25T00:00:00");
+  const timeLeft = useCountdown(targetDate);
 
   return (
     <div>

src/components/WindowSizeExample.jsx

@@ -1,32 +1,15 @@
-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 {width, height} = useWindowSize();
 
+  console.log(width);
   return (
     <div>
       <h2>useWindowSize 실습</h2>
-      <p>화면 너비: {windowSize.width}px</p>
-      <p>화면 높이: {windowSize.height}px</p>
+      <p>화면 너비: {width}px</p>
+      <p>화면 높이: {height}px</p>
     </div>
   );
-};
+};

src/components/YourOwnHookPage.jsx

@@ -1,11 +1,30 @@
-import { useSomething } from "../hooks/useSomething";
+import { useDice } from "../hooks/useDiceValue";
+import { styled } from "styled-components";
 
-export const YourOwnHookPage = () => {
-  // const { something... } = useSomething();
+const Dice = styled.div`
+  display: flex;
+  font-size: 100px;
+  width: 150px;
+  height: 150px;
+  border-radius: 20px;
+  border: 1px solid;
+  margin: 0 auto 30px auto;
+  justify-content: center;
+  background-color: #e7e7e7;
+`
+
+export const RollDice = () => {
+  const { diceValue, rollDice, rolling } = useDice();
+  // const { something... } = useSomething(); <- 이런 형태로 활용!
   // 하단 UI에 자유롭게 위에서 받아온 값들을 바인딩 해보세요~
   return (
     <div>
-      <h2>useSomething 실습</h2>
+      <Dice>{diceValue}</Dice> 
+      <button 
+      onClick={rollDice}
+      className="modern-btn">
+        {rolling ? "굴리는 중..." : "주사위 굴리기"}
+      </button>
     </div>
   );
 };

src/hooks/useCountdown.js

@@ -1,3 +1,33 @@
+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;
+
 };