📊 Profile 기능 고도화 – 팔로잉/팔로워 UI 구성과 숫자 포맷 고민기

이전까지는 단순히 나의 프로필과 거래 통계 정도만 보여주는 구조였지만, 이번에는 더 많은 소셜적 정보를 보여주기 위해 팔로잉/팔로워 리스트를 추가했다. 또한 숫자 포맷, 응답 시간 표시, 전투력 표현 등에서 유틸 함수 분리 및 포맷 정화도 함께 진행했다.

✅ 팔로잉 / 팔로워 기능 추가

📌 어느 정보를 어떻게 보여줄까?

ProfileData에는 다음과 같은 구조가 있었다:

{
  following: ["userId1", "userId2", ...],
  followers: ["userId3", "userId4", ...],
}

단순히 유저 ID 배열만 있어서, 화면에 보여주기 위해서는 각 유저 ID에 대해 다시 API 호출이 필요했다.

const followingProfiles = await Promise.all(
  following.map(userId => shootingStar.launch(GetProfileByUserIDGameIDWing(userId, gameID)))
)

→ 각각의 userID에 대해 다시 ProfileData를 받아와야 화면을 구성할 수 있었음.

🎛 UI 구성

버튼은 좌우 양방향 토글으로 구성:

<FavoriteButton
  onLeftClick={handleLeftButtonClick}
  onRightClick={handleRightButtonClick}
  FollowingNumber={followingProfiles.length}
  FollowerNumber={followerProfiles.length}
/>

• 내가 즐겨찾는 → 팔로잉 목록

• 나를 즐겨찾는 → 팔로워 목록

해당 버튼 클릭 시, 각각 visibleSection을 업데이트해서 아래에 리스트가 보여지도록 구성:

{visibleSection === 'following' && followingProfiles.map(...) }
{visibleSection === 'follower' && followerProfiles.map(...) }

FollowContainer, FollowerContainer는 재사용 가능한 구조로 설계해 스타일 유지와 컴포넌트 분리가 깔끔해졌다.

📀 숫자 포맷과 유틸 함수

🧠 문제 상황

• 전투력: 14,213,000 → 1,000만+ 식으로 축약

• 응답 시간: 1,542,300 마이크로초 → 1.5초 형태로 변환

• 재거래율: 0.864444444%처럼 너무 긴 실수 → 불편하고 지저분한 표현

처음에는 toFixed() 같은 내장 함수만 쓰기도 했지만, 결국 중복되고 유지보수가 어려워지는 걸 막기 위해 utils로 분리했다.

또한 이 과정에서 toFixed(1)이 문자열을 반환한다는 점도 고려하게 됐는데, 예를 들어 0.864444444.toFixed(1)은 문자열 "0.9"를 반환하기 때문에 숫자 계산이 필요한 UI에는 적절하지 않았다. 대신 Math.floor를 사용하여 정수 처리를 직접 제어하는 방식으로 개선했다.

🔋 전투력 표현: formatPower

이 함수에서 핵심은 단순히 단위를 나누는 것뿐 아니라, Math.floor()를 활용해서 소수점 없이 정수로 '딱 끊어내는' 처리를 함께 적용했다는 점이다. 예를 들어 54213000은 5.4213천만이지만, 우리는 이를 5천만으로 표현하기 위해 Math.floor(power / 10000000) 같은 형태로 구성했다. → 소수점 이하를 버리고 단위를 끊어주는 방식.

export const formatPower = (power: number): string => {
    if (power >= 100000000) {
        const billions = Math.floor(power / 100000000);
        return `${billions}억`;
    } else if (power >= 10000000) {
        const tenMillions = Math.floor(power / 10000000);
        return `${tenMillions}천만`;
    } else if (power >= 10000) {
        const tenThousand = Math.floor(power / 10000);
        return `${tenThousand}만`;
    } else {
        return power.toLocaleString();
    }
};

📌 작동 방식 예시

입력 전투력			출력 문자열

1234				1,234

120000				12만

987654321			9억

20000000			2천만

54213000			5천만

이 구조는 "천만" 단위 표현도 지원해서, 억 단위로 표현하기 애매한 숫자도 자연스럽게 단위 끊어서 표현할 수 있음
→ 숫자 규모가 클수록 시각적으로 명확하게 구분 가능하고, 가독성과 전달력이 향상됨

🔁 재거래율 표현: FormatRetrade

작업 중 "그냥 서버에서 정수로 잘라서 주면 되는 거 아닌가?"라는 요청도 했는데, 이에 대해 백엔드 개발자가 설명하길:
"같은 포맷을 여러 API에서 공유해야 하고, 이걸 서버에서 매번 가공하면 오히려 자원 낭비가 크다. 클라이언트에서 한 줄로 자르고 쓰는 게 부담도 적고 확장성도 좋다"고 했다.

실제로 프론트에서는 Math.floor로 잘라주기만 하면 되니까, 재사용성과 유지보수 측면에서도 더 합리적이었다.

• 재거래율은 숫자 형태로 들어오면 다음처럼 보인다:

// 0.864444444 → 너무 보기 불편함!

그래서 유저가 직관적으로 이해할 수 있도록 퍼센트 단위로 정리해서 표현했다.

export const FormatRetrade = (retrade: number): number => {
  const FormattedRetrade = Math.floor(retrade * 100);
  return FormattedRetrade;
};

0.743 → 74%

0.812 → 81%

0.864444444 → 86%

toFixed()를 쓰면 "0.9"처럼 문자열로 반환되어 재사용이 불편하지만,
Math.floor를 사용하면 숫자 그대로 딱 떨어지는 정수로 처리 가능해서 퍼센트 표현에 더 적합했다.

✨ 최종 결과: Profile.tsx 활용 예

<StatusBadge
  level={mainCharacter?.level}
  power={formatPower(mainCharacter?.power || 0)}
  union={mainCharacter?.union}
/>

<TradeStatus
  popularity={profileData.stat.popularity}
  retrade_rate={FormatRetrade(profileData.stat.retrade_rate)}
  response_time={convertMicrosecondsToTime(profileData.stat.mean_response_time)}
/>

• 유틸 함수로 모든 숫자 표현이 표준화됨

• 사용자에게 보여지는 정보가 더 간결하고 직관적임

🧠 회고

“숫자 하나에도 UX가 있다.”

숫자 표현은 단순한 데이터가 아닌, 사용자가 그 유저를 어떤 느낌으로 인식할지 결정하는 시각 요소다.

전투력은 시원하게 끊어진 단위로,
퍼센트는 짧고 명확한 정수로 표현하니 전체 프로필 화면이 신뢰감 있고 정돈된 느낌을 주게 되었다.

앞으로도 모든 숫자 표현은 유틸 기반으로 관리하고, 사용자 관점의 정보 전달을 우선하겠다.