[React] 특정 시간대에만 버튼 활성화 (feat. 공휴일, 주말 제외)

 

📂 목차

• 시간 조건에 따라 버튼활성화 or 비활성화 커스텀 훅 예제 코드
• 1. 상태 초기화
• 2. useEffect Hooks
• 3. 현재 시간과 요일 가져오기
• 4. 공휴일 판단 함수
• 5. 버튼 활성 여부 결정
• 6. 주기적으로 갱신
• 7. 마운트 해제 시 interval 정리
• 8. 최종 반환
• 📌 실제 사용 예시

 

---

시간 조건에 따라 버튼활성화 or 비활성화 커스텀 훅 예제 코드

import {useState, useEffect} from "react";

export const useTimeRestrictedToggle = () => {
    const [isEnabled, setIsEnabled] = useState(false);
useEffect(()=>{
    const checkIsHoliday = (date: Date) => {
        const month = date.getMonth() + 1;
        const day = date.getDate();

        // 공휴일 (신정, 설날, 추석, 등)
        const isNewYear = month === 1 && day === 1;
        const isLunarHolidy = month === 2 && day === 29;
        const isChuseok = month === 10 && [6,7,8].includes(day); 

        return isNewYear || isLunarHolidy || isChuseok;
    }

    const getCurrentTime = () => {
        const now = new Date();
        const hours = now.getHours();   // 현재 시 (0~23)
        const dayOfWeek = now.getDay(); // 요일 (0: 일요일, 6: 토요일)
        const isHoliday = checkIsHoliday(now);  // 휴일 인지 확인
        return {hours, dayOfWeek, isHoliday}
    }

    const evaluateToggle = () => {
        const {hours, dayOfWeek, isHoliday} = getCurrentTime();
        const isWithinBuinessHours = hours >=9 && hours <18;
        const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;

        setIsEnabled(isWithinBuinessHours && !isWeekend && !isHoliday);
    };

    evaluateToggle(); // 초기 상태 설정
    const interval = setInterval(evaluateToggle, 60000); // 매 1분마다 재확인

    return () => clearInterval(interval); // 언마운트 시 클린업
},[]);
    return isEnabled;

}

 

 

조건은 아래과 같습니다 .

• 평일에만 가능(주말 ❌)
• 오전 9시 ~ 오후 6시 사이만 가능
• 특정 공휴일도 제외(예: 신정, 설, 추석 등)

 

🔁 실시간으로 상태를 체크하려면?

JavaScript의 setInterval()을 사용해 1분마다 현재 시간을 체크합니다. 

 

그리고 React에서는 useEffect() 안에서 interval()을 등록하고, 컴포넌트가 언마운트되면 clearInterval()로 꼭 정리해야합니다.

 

 

1. 상태 초기화

const [isEnabled, setIsEnabled] = useState(false);

 

👉 버튼 활성 여부를 저장하는 상태 변수

처음에는 기본값 false(비활성 상태)

 

 

2. useEffect Hooks

useEffect(() => {
 // 실행할 코드
},[]);

 

👉 컴포넌트가 처음 마운트될 때 실행되는 코드 블럭

 

위처럼 []를 두 번째 인자로 넣으면, 

• 해당 코드는 컴포넌트가 처음 화면에 나타날 때만 1번 실행 됩니다.

그래서 그 안에 setInterval을 넣으면 컴포넌트 기준으로 시작되고 반대로, 컴포넌트가 화면에서 사라질 때는 정리도 같이 할수 있습니다.

 

 

3. 현재 시간과 요일 가져오기

const getCurrentTime = () => {
        const now = new Date();
        const hours = now.getHours();   // 현재 시 (0~23)
        const dayOfWeek = now.getDay(); // 요일 (0: 일요일, 6: 토요일)
        const isHoliday = checkIsHoliday(now);  // 휴일 인지 확인
        return {hours, dayOfWeek, isHoliday}
    }

 

🕐 현재 시간을 가져오고,

📅 요일도 가져오고,

🎌 공휴일인지도 확인합니다.

 

 

4. 공휴일 판단 함수

const checkIsHoliday = (date: Date) => {
        const month = date.getMonth() + 1;
        const day = date.getDate();

        // 공휴일 (신정, 설날, 추석, 등)
        const isNewYear = month === 1 && day === 1;
        const isLunarHolidy = month === 2 && day === 29;
        const isChuseok = month === 10 && [6,7,8].includes(day); 

        return isNewYear || isLunarHolidy || isChuseok
    }

 

2025년 기준으로,

• 1월 1일 → 신정
• 1월 29일 → 설날
• 10월 6일, 7일, 8일 → 추석

이 날짜면 공휴일(true)로 간주

 

5. 버튼 활성 여부 결정

const evaluateToggle = () => {
        const {hours, dayOfWeek, isHoliday} = getCurrentTime();
        const isWithinBuinessHours = hours >=9 && hours <18;
        const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;

        setIsEnabled(isWithinBuinessHours && !isWeekend && !isHoliday);
    }

📌 조건:

• 시간은 오전 9시부터 저녁 6시 전까지만 가능(9 <= hour < 18 )
• 주말(토, 일) ❌
• 공휴일 ❌

조건이 모두 만족되면 true, 아니면 false

 

6. 주기적으로 갱신

const interval = setInterval(evaluateToggle, 60000); // 매 1분마다 재확인

 

👉 매 60초마다 다시 검사해서 실시간으로 버튼 상태를 업데이트합니다.

 

 

7. 마운트 해제 시 interval 정리

return () => clearInterval(interval); // 언마운트 시 클린업

👉 컴포넌트가 화면에서 사라지면 메모리 누수 방지를 위해 interval 제거를 합니다.

 

 

8. 최종 반환

 return isEnabled;

👉 이 hook을 사용한 곳에서는 true 또는 false 값을 받을수 있습니다.

 

 

📌 실제 사용 예시

const 가능시간 = useTimeRestrictedToggle();

return (
	<button disabled={!가능시간}>신청하기</button>
)