Next.js 14.2.7 / Typescript / Tailwindcss을 기반으로 작성된 글입니다.
UI 구성
Deadlock의 아이템에는 무기, 생명력, 스피릿의 3가지 타입(Type)과, 1티어부터 4티어까지의 아이템 티어(Tier)가 있습니다.
이를 기반으로 타입은 탭(Tab)으로 분류, 티어는 Grid의 Row로 분류하는 UI를 구성하도록 하겠습니다. 이는 실제 인게임에서도 볼 수 있는 구조와 같습니다.
Tab 기능이나 아이템 아이콘에 커서를 올렸을 때 세부 정보가 뜨게 하는 기능 등을 구현할 때 필요한 기본적인 UI들은 Headless UI 라이브러리인 Shadcn UI의 컴포넌트를 사용해 구현하였습니다.
데이터 번역
// data.ts
{
id: 1548066885,
name: "upgrade_clip_size",
localization: {
en: "Basic Magazine",
ko: "기본 탄창",
},
tier: 1,
type: "weapon",
image: "/Image/items/mods_weapon/clip_size.png",
desc: {
en: "Increases ammo.",
ko: "탄약이 증가합니다.",
},
stats: {
bullet: 24,
weapon_damage: 15,
},
},상세 정보나 아이템 이름의 경우 추후 확장을 위해 영어 원문과 한글 번역본 두가지를 모두 data에 정리해두었는데, 때문에 선택한 언어(locale)에 따라 정보를 번역해야할 필요성이 생겼습니다.
그렇기에 위 형식의 객체를 Item이라는 커스텀 타입으로 정의하고, 해당 타입의 객체와 "ko" | "en"중 하나를 인자로 받아 적절한 형태로 stats을 가공하는 함수를 만들기로 했습니다.
Object.entries()
json 형태의 data 객체를 배열 형태로 가공하기 위해 Object.entries()를 사용했습니다. Object.entries()를 사용하면 key:value 형태로 나열되어 있는 객체를 [key, value] 쌍의 배열로 변환할 수 있습니다.
그리고 변환된 배열을 구조 분해 할당을 통해 다음과 같이 객체를 순회하는 방식으로 코드를 짤 수 있습니다.
// locale에 따른 아이템 스탯 번역
export const itemStats = (stats: ItemStats, locale: string) => {
const entries = Object.entries(stats);
if (locale === "ko") {
const ret = [];
for (const [key, value] of entries) {
//영어 원문 : 한글 번역 맵핑한 Map 형태의 객체 활용
const translated = translationMap[key];
ret.push(translated);
}
return ret;
}
return entries;
};
// 번역 맵핑 객체
const translationMap: Map = {
bullet_speed: "탄환 속도",
weapon_damage: "무기 피해",
bullet_shield: "방탄막 체력",
...
}이로써 itemStats 함수는 locale 값이 'ko'라면 번역된 데이터를, 'en'이라면 원본 데이터를 불러올 수 있게 되었습니다. locale 값을 유저가 정할 수 있는 기능은 추후 추가할 계획입니다.
다음 포스팅에서는 내용을 검색하는 기능에 대해 다뤄보겠습니다.