게시판 목록에서 천 이상의 숫자가 표시될 경우 상황에 따라 읽기 힘든 경우가 있습니다. 따라서 아래 사진과 같이 기능 개선을 요청드리는 바입니다.

기존 게시판 목록

위 사진은 현재 자유게시판을 추천순으로 정렬했을 때 보이는 화면을 캡쳐한 것입니다.

개선시 보여질 게시판 목록

위 사진과 같이 숫자를 좀 더 쉽게 읽을 수 있는 장점이 있을걸로 사료됩니다.

아래에는 개선된 게시판 목록으로 업데이트하는 코드를 대략적으로 나타낸 것입니다.

[code=javascript]const recommendElements = document.querySelectorAll('[class^="rcmd-box step"]');

​

const visitCountElements = document.querySelectorAll('.wr-num.text-nowrap.order-4');

recommendElements.forEach(element => {

let number = parseInt(element.textContent.trim(), 10);

const classNames = element.className.split(' ');

classNames.forEach(className => {

element.textContent = number.toLocaleString(navigator.language);

})

});

visitCountElements.forEach(element => {

let number = parseInt(element.textContent.trim(), 10);

element.textContent = number.toLocaleString(navigator.language);

});[/code]

간략하게  표시되는 공감 및 조회수

만약 위 사진과 같이 천 단위를 생략하고자 할 경우에는 아래 코드를 사용할 수 있습니다.

[code=javascript]const recommendElements = document.querySelectorAll('[class^="rcmd-box step"]');

const visitCountElements = document.querySelectorAll('.wr-num.text-nowrap.order-4');

recommendElements.forEach(element => {

const classNames = element.className.split(' ');

classNames.forEach(className => {

if(className.startsWith('step') && className.length === 5) {

let number = parseInt(element.textContent.trim(), 10);

if(!isNaN(number) && number >= 1000) {

let formattedNumber = (number / 1000).toFixed(1) + 'k';

formattedNumber = formattedNumber.replace('.0', '');

element.textContent = formattedNumber;

}

element.textContent = element.textContent;

element.title = '받은 추천수: ' + number.toLocaleString(navigator.language);

}

})

});

visitCountElements.forEach(element => {

let number = parseInt(element.textContent.trim(), 10);

if (!isNaN(number) && number >= 1000) {

let formattedNumber = (number / 1000).toFixed(1) + 'k';

formattedNumber = formattedNumber.replace('.0', '');

element.textContent = formattedNumber;

element.title = '조회수: ' + number.toLocaleString(navigator.language);

}

});[/code]