[CSS] 함수를 이용한 CSS 적용 방법

getStyle 이라는 변수를 만들고 이를 style 안에 넣어주는 방식이다.

const getStyle = ():React.CSSProperties => {
        if(reserve) {
            // 예약된 상태라면,
            return {
                backgroundColor: 'green',
                color: 'white',
                border: `1.5px solid green`,
                borderRadius: 5,
                width: '100%',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center',
                gap: 4,
                cursor: 'pointer',
            };
        } else {
            if(isClicked) {// 클릭이 된 상태라면
                if(checkIsFull()) {
                    return {
                        backgroundColor: '#CCC',
                        color: 'white',
                        border: `1.5px solid #CCC`,
                        borderRadius: 5,
                        width: '100%',
                        display: 'flex',
                        flexDirection: 'column',
                        justifyContent: 'center',
                        alignItems: 'center',
                        gap: 4,
                        cursor: 'pointer',
                    };
                } else {
                    return {
                        backgroundColor: '#E8535C',
                        color: 'white',
                        border: `1.5px solid #E8535C`,
                        borderRadius: 5,
                        width: '100%',
                        display: 'flex',
                        flexDirection: 'column',
                        justifyContent: 'center',
                        alignItems: 'center',
                        gap: 4,
                        cursor: 'pointer',
                    };
                }
            } else { // 클릭이 되지 않은 상태라면
                return {
                    border: `1.5px solid ${setBorderColor()}`,
                    borderRadius: 5,
                    width: '100%',
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center',
                    gap: 4,
                    cursor: 'pointer',
                };
            }
        }
    }

    return (
        <button style={getStyle()}>
            <div className={styles.bold_text}>
                {time}
            </div>
            <div>
                {applyNumber}/{maxNumber}
            </div>
        </button>
    );