[FE] 클라이언트에서 Enum으로 데이터 관리하기

프로젝트를 하다보니 서버에선 지역이나 플랫폼에 대한 정보를 관리해야 했다.

하지만, 클라이언트에서 유저가 데이터를 볼때에는 숫자가 아닌 문자로 봐야한다.

따라서 서버에 저장되어 있는 number type 정보들을 클라이언트에서 문자로 변환하여 사용할 수 있게 했다.

// types/common.ts

export enum PlatformType {
  PC = 1,
  ANDROID = 2,
  IOS = 3,
  SWITCH = 4,
  STEAM = 5,
  XBOX_ONE = 6,
  XBOX_SERIES = 7,
  PS4 = 8,
  PS5 = 9,
  MAC = 10
}

export const PlatformOptions: Option[] = [
  { value: PlatformType.PC, label: 'PC' },
  { value: PlatformType.ANDROID, label: 'Android' },
  { value: PlatformType.IOS, label: 'IOS' },
  { value: PlatformType.SWITCH, label: 'Switch' },
  { value: PlatformType.STEAM, label: 'Steam' },
  { value: PlatformType.XBOX_ONE, label: 'Xbox_One' },
  { value: PlatformType.XBOX_SERIES, label: 'Xbox_Series' },
  { value: PlatformType.PS4, label: 'PS4' },
  { value: PlatformType.PS5, label: 'PS5' },
  { value: PlatformType.MAC, label: 'Mac' }
];

export enum RegionType {
  LOCAL = 1,
  DEV = 2,
  QA = 3,
  KR = 4,
  EAST = 5,
  WEST = 6,
  EU = 7
}

export const RegionOptions: Option[] = [
  { value: RegionType.LOCAL, label: 'local' },
  { value: RegionType.DEV, label: 'dev' },
  { value: RegionType.QA, label: 'qa' },
  { value: RegionType.KR, label: 'kr' },
  { value: RegionType.EAST, label: 'east' },
  { value: RegionType.WEST, label: 'west' },
  { value: RegionType.EU, label: 'eu' }
];

타입을 정한 후 클라이언트에서 데이터를 변환할때엔 서버에서 받은 number type 정보를 Enum을 통해 문자로 바꿔줄 수 있다.

  const getPlatformLabel = (platform: number) => {
    const platformOption = PlatformOptions.find(option => option.value === platform);
    return platformOption ? platformOption.label : '-';
  };

  const getRegionLabel = (region: number) => {
    const regionOption = RegionOptions.find(option => option.value === region);
    return regionOption ? regionOption.label : '-';
  };
  
  
  ...
  
       <div className="flex items-center justify-between rounded-t-2xl px-2">
          <div className="flex flex-col w-full items-start justify-center rounded-2xl bg-white bg-clip-border px-3 py-4 shadow-3xl shadow-shadow-500 dark:!bg-navy-700 dark:shadow-none">
            <p className="text-sm text-gray-800 dark:text-white">Platform</p>
            <p className="text-base font-medium text-navy-700 dark:text-white">
              {userInfo ? getPlatformLabel(userInfo.platform) : '-'}
            </p>
          </div>
        </div>

        <div className="flex items-center justify-between rounded-t-2xl px-2">
          <div className="flex flex-col w-full items-start justify-center rounded-2xl bg-white bg-clip-border px-3 py-4 shadow-3xl shadow-shadow-500 dark:!bg-navy-700 dark:shadow-none">
            <p className="text-sm text-gray-800 dark:text-white">Region</p>
            <p className="text-base font-medium text-navy-700 dark:text-white">
              {userInfo ? getRegionLabel(userInfo.region) : '-'}
            </p>
          </div>
        </div>