항해99 WIL 9주차

우리조 실전프로젝트인 유학생커뮤니티에 있어서 주요기능 중 하나인 투표기능에서 쓸 카운트당운을
내가 맡아서 만들었다.

물론 카운트다운 라이브러리 종류가 많아서 능숙한 사람은 간단하게 적용시킬 수 있는거겠지만
클라이언트에서 받은 시간 형식에 맞춰서 적용시키는 것에 있어서
나한테는 약간의 챌린징이였다

물론 이틀이나썼다

적당한 카운트다운라이브러리를 받아 썼는데 class형 컴포넌트여서
함수형 컴포넌트로 바꿀려다가 더 복잡해지는거 같아 그냥 class형 대로 썼다

라이브러리를 쓰기전에는 나혼자 밀리세컨드 계산해서 범위내에있는건 초, 또 어떠한 범위는 분, 등등을 계산해야지라고 막 생각했었던 때가있엇고..아깝고..

class Clock extends Component {
    constructor(props) {
        super(props);
        this.state = {
            days: 0,
            hours: 0,
            minutes: 0,
            seconds: 0,
        };
    }

    componentDidMount() {
        this.timer = setInterval(
            () => this.getTimeUntil(this.props.deadline),
            1000,
        );
    }

    leading0(num) {
        return num < 10 ? "0" + num : num;
    }

    componentWillUnmount() {
        clearInterval(this.timer);
    }

    getTimeUntil(deadline) {
        const time = Date.parse(deadline) - Date.parse(new Date());
        if (time < 0) {
            this.setState({
                days: 0,
                hours: 0,
                minutes: 0,
                seconds: 0,
            });
            clearInterval(this.timer);
        } else {
            const seconds = Math.floor((time / 1000) % 60);
            const minutes = Math.floor((time / 1000 / 60) % 60);
            const hours = Math.floor((time / (1000 * 60 * 60)) % 24);
            const days = Math.floor(time / (1000 * 60 * 60 * 24));
            this.setState({ days, hours, minutes, seconds });
        }
        return;
    }
    render() {
        return (
            <span>
                D-{this.leading0(this.state.days)}일{" "}
                {this.leading0(this.state.hours)}:
                {this.leading0(this.state.minutes)}:
                {this.leading0(this.state.seconds)}
            </span>
        );
    }
}

deadline으로 props값 시간 받아와서 적용쓰