20240712 바쁜하루..?

RingKim1·2024년 7월 12일

목록 보기

52/77

Today

1. 정리

2. 프로젝트

~~카운트다운 타이머~~

"use client";

import { useEffect, useState } from "react";

interface CountdownTimerProps {
  endDate: string;
}

// endDate를 props로 받고 그 날 까지 남은 시간 계산
const CountdownTimer: React.FC<CountdownTimerProps> = ({ endDate }) => {
  const parseDate = (date: string) => {
    const [year, month, day] = date.split(".").map(Number);
    return new Date(year, month - 1, day, 23, 59, 59);
  };
  const calculateTimeLeft = () => {
    const difference = +parseDate(endDate) - +new Date();
    let timeLeft = {
      days: 0,
      hours: 0,
      minutes: 0,
      seconds: 0
    };

    if (difference > 0) {
      timeLeft = {
        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
        minutes: Math.floor((difference / 1000 / 60) % 60),
        seconds: Math.floor((difference / 1000) % 60)
      };
    }

    return timeLeft;
  };

  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
  
  useEffect(() => {
    const timer = setTimeout(() => {
      setTimeLeft(calculateTimeLeft());
      setIsLoading(false);
    }, 1000);

    return () => clearTimeout(timer);
  }, [timeLeft]);
  
return (...)
}
export default CountdownTimer;

모달

// zustand 상태관리
import { create } from "zustand";

interface ModalState {
  modals: Record<string, boolean>;
  toggleModal: (id: string) => void;
}

const useModalStore = create<ModalState>((set) => ({
  modals: {},
  toggleModal: (id: string) =>
    set((state) => ({
      modals: {
        ...state.modals,
        [id]: !state.modals[id]
      }
    }))
}));

export default useModalStore;

~~예약 관련 날짜 지정(원하는 날짜만 가능 하게)~~

today = new Date()
.
.
.
<input
type="date"
value={date}
onChange={(e) => setDate(e.target.value)}
min={today}
max={datas?.prfpdto[0].replaceAll(".", "-")}
/>