[LoaTodo / React] 휴식게이지 출력 디자인 수정

1. 서론

휴식 게이지 표시가 보기 불편해서 바꾸었다

 

 

2. 개발

2 - 1. 기존 UI

버튼안에 "숙제 체크(휴식게이지)" 모양
글씨크키도 작아 가시성이 떨어지는거 같아 디자인 변경

 

2 - 2. 변경 UI

 

로스트아크내에 디자인 참고하여 반영

2 - 3. 핵심 코드

<div className="content" style={{ height: 24, padding: 0, position: "relative", cursor: "pointer" }}
                                            onContextMenu={(e) => handleDayContentGuage(e, character.id, "chaos")}>
    {Array.from({ length: 5 }, (_, index) => (
        <div key={index} className="gauge-wrap">
            <div
                className="gauge"
                style={{ backgroundColor: index * 2 < character.chaosGauge / 10 ? "#0ec0c3" : undefined }}
            ></div>
            <div
                className="gauge"
                style={{ backgroundColor: index * 2 + 1 < character.chaosGauge / 10 ? "#0ec0c3" : undefined }}
            ></div>
        </div>
    ))}
    <span style={{ position: "absolute", left: 75, top: 5, color: "white", backgroundColor: "rgba(0,0,0,0.3)", width: 140, textAlign: "center", borderRadius: 4 }}>
        휴식게이지 : {character.chaosGauge}
    </span>
</div>

 

 

3. 정리 및 후기

 

가시성이 더 좋아진거같다!