안녕하세요 @realmankwon입니다.

이전 포스팅에서 보팅비율을 고정값으로 입력하는 기능을 만들어보았습니다.
그때 @naha님의 댓글도 있었고 저도 그 기능이 있었으면 좋겠다 싶어서 어제 오늘 작업을 해서 추가를 해 보았습니다.

1. 보팅비율 수동 입력

숫자를 입력하면 보팅바가 움직이고 보팅바를 움직여도 숫자가 변경이 됩니다.
이것도 보기에 아주 쉬울 것 같아서 시작했는데...
2일이 걸렸습니다 ㅜㅜ
소스는 다음과 같습니다.

    const slider = up => {
        const b = up
            ? this.state.sliderWeight.up
            : this.state.sliderWeight.down;
        const s = up ? '' : '-';
        return (
            <span>
                <div>
                    steem vp : {post_obj.get('voting_power')}
                    sct vp : {post_obj.get('scotVotingPower')}
                </div>
                <div id="btn_group">
                    <button id="weight-left" onClick={this.handleButtonWeightChange(up, 1000)}> 10% </button>
                    <button id="weight-center" onClick={this.handleButtonWeightChange(up, 2500)}> 25% </button>
                    <button id="weight-center" onClick={this.handleButtonWeightChange(up, 5000)}> 50% </button>
                    <button id="weight-center" onClick={this.handleButtonWeightChange(up, 7500)}> 75% </button>
                    <button id="weight-right" onClick={this.handleButtonWeightChange(up, 10000)}> 100% </button>
                </div>
                <div>

                    <div className="weight-display">
                        <form>
                            <input type="number" min="0" max="100" maxlength="3"
                            value={s + b / 100} 
                            onChange={this.handleButtonWeightChange(up, -1)}/>
                        </form>
                    </div>

                    <div>
                        <Slider
                            min={100}
                            max={MAX_WEIGHT}
                            step={100}
                            value={b}
                            onChange={this.handleWeightChange(up)}
                            onChangeComplete={this.storeSliderWeight(up)}
                            tooltip={false}
                        />
                    </div>
                </div>
            </span>
        );
    };

이부분부터 6 라인이 숫자를 입력받는 부분이며 입력받았을때 처리하는 함수는 이전 포스팅에서 작성했던 함수를 재사용하였습니다.
이때 validation을 위해 함수를 조금 변경하였습니다.
validation은 입력받을때 부터 number type으로 받게해서 숫자외에는 입력이 안되며 이값을 입력받은 함수에서 100을 초과하면 100으로 입력되게끔 변경하였습니다.
이 validation 때문에 시간이 좀 많이 걸렸네요.
기존의 input과 이벤트가 좀 다른가 봅니다.
onKeyDown, onKeyUp, onKeyDown 등 여러 이벤트에서 100을 초과하면 input의 value 값을 100으로 변경할려고 해도 잘 안되더군요.
이래저래 하다가 결국은 onChange 함수에서 처리를 하였습니다.
handleButtonWeightChange 함수의 2번째 라인에 100을 초과하면 100으로 값을 변경시키도록 하였습니다.

if(e.target.value > 100) e.target.value = 100;

    this.handleButtonWeightChange = (up, weight) => e => {
        let w;
        if(e.target.value > 100) e.target.value = 100;

        if(weight === -1){
            weight = e.target.value * 100;
        }

        if (up) {
            w = {
                up: weight,
                down: this.state.sliderWeight.down,
            };
        } else {
            w = {
                up: this.state.sliderWeight.up,
                down: weight,
            };
        }
        this.setState({ sliderWeight: w });

        const { username, is_comment } = this.props;
        
        localStorage.setItem(
            'voteWeight' +
                (up ? '' : 'Down') +
                '-' +
                username +
                (is_comment ? '-comment' : ''),
            weight
        );
    };

2. 화살표 버튼으로 값 변경

보팅비율을 직접 입력해도 되지만 옆에 화살표를 클릭해서 1씩 올려줄 수도 있습니다.
뿐만 아니라 화살표 위, 아래 버튼을 눌러도 값을 변경해 줄 수 있습니다.

3. 보팅비율 고정 버튼 꾸미기

보팅 버튼이랑 수동 입력란을 추가하니 보팅바가 지저분해 졌습니다.
그래서 다음과 같이 style을 추가해 주었습니다.
react에서는 jsx 파일에 style 을 추가하면 버그가 발생합니다.
그래서 style을 입력해주는 scss 파일에 모든 소스를 입력합니다.
Voting.jsx 의 style을 담당하는 다음의 파일에 소스를 추가시켜줍니다.

src/app/components/elements/Voting.scss

#weight-left {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
padding :5px;
margin-right: 0px !important;
}
#weight-center {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
padding :5px;
margin-right: 0px !important;
}
#weight-right {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
padding :5px;
margin-right: 0px !important;
}
#btn_group button{
border: 1px solid skyblue;
background-color: rgba(0,0,0,0);
color: skyblue;
}
#btn_group button:hover{
color:white;
background-color: skyblue;
}

#btn_group button:focus{
outline:none;
}

이전에 벌어져 있던 버튼 사이의 간격을 없애고 둥근 모서리도 가운데는 사각형으로 양 사이드 버튼은 둥글게 변경하고 기능들 사이의 간격도 추가시켰습니다.
이것도 하나하나 찾아가면서 한다고 시간이 꽤 걸렸네요 ㅜㅜ

변경전

변경후

조금 차이가 보이시나요?? ^^;;

좀 더 신박한 기능을 추가하고 싶지만 분석하고 공부하는데 너무 오랜시간이 걸리다 보니까 생각보다 쉽지가 않네요 ㅜㅜ
다음에는 더 좋은 기능을 추가해서 포스팅하도록 하겠습니다.
남은 주말 편히 보내세요 ^^

* 이전글

Intro 내 컴퓨터에서 나만의 sct를 실행해 보자
1. [나만의 SCT #1] 보팅 비율 보기
2. [나만의 SCT #2] SCT 보상액과 Steem 보상액 함께 보기
3. [나만의 SCT #3] 보팅 금액 (SCT), 글 리스트에서 보팅자 확인, 보팅자 Limit 풀기
4. [나만의 SCT #4] 보팅바 고정값 클릭 기능