Subin min

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 timeLeft = useCountdown(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,16 @@
-import { useSomething } from "../hooks/useSomething";
+import { useTextColor } from "../hooks/useTextColor";
 
 export const YourOwnHookPage = () => {
   // const { something... } = useSomething();
   // 하단 UI에 자유롭게 위에서 받아온 값들을 바인딩 해보세요~
+  const { color, changeColor } = useTextColor();
+
   return (
     <div>
-      <h2>useSomething 실습</h2>
+      <h2 style={{ color }}>useSomething 실습</h2>
+      <button className="modern-btn" onClick={changeColor}>
+        색상 변경
+      </button>
     </div>
   );
-};
+};

src/hooks/useCountdown.js

@@ -1,3 +1,29 @@
+import { useState, useEffect } from "react";
+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 };
+};
+
 export const useCountdown = (targetDate) => {
+  const [timeLeft, setTimeLeft] = useState(() => calculateTimeLeft(targetDate));
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft(targetDate));
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [targetDate]);
+
   return timeLeft;
 };

src/hooks/useTextColor.js

@@ -0,0 +1,17 @@
+import { useState } from 'react';
+
+export const useTextColor = () => {
+  // 여러분의 use{Something}을 만들어주세요!
+  // 정답은 없습니다. 커스텀훅의 필요성을 스스로 느껴보세요.
+  // 아이디어를 생각하고, 스스로 구현하다가 어려우면 손 들어주세요!
+  const [color, setColor] = useState('black');
+
+  const changeColor = () => {
+    // 예시로 색상을 랜덤하게 바꾸거나, 정해진 목록에서 바꿀 수 있음
+    const colors = ['red', 'blue', 'green', 'orange', 'purple'];
+    const nextColor = colors[Math.floor(Math.random() * colors.length)];
+    setColor(nextColor);
+  };
+
+  return { color, changeColor };
+};

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 }; 
+};