TFT 툴

롤토체스용 개인 도구. 배치판 · 유물 · 상징 · 저장한 덱을 한 곳에서 본다. 모바일에서 쓰는 걸 우선으로 만들었다. 현재 시즌 18 기준.

https://tftbox.github.io/

main 브랜치에 올리면 GitHub Actions가 자동으로 다시 배포한다 (.github/workflows/deploy.yml).

시작하기

npm install
npm run dev        # http://localhost:3000

평소에는 위 주소로 그냥 쓰면 되고, 아래 내용은 코드를 고칠 때만 필요하다.

처음 한 번은 Supabase에 테이블을 만들어야 한다. Supabase 대시보드 → SQL Editor에 supabase/schema.sql을 붙여넣고 실행하면 된다. 이걸 하지 않으면 덱 저장과 유물·상징 메모가 동작하지 않는다 (화면에 안내가 뜬다).

저장 · 수정 · 삭제는 로그인한 사람만 할 수 있다 (보는 건 누구나 로그인 없이 가능). 회원가입 화면은 없으므로, Supabase 대시보드 → Authentication → Users → Add user에서 본인 계정(이메일 + 비밀번호)을 직접 하나 만들어야 한다. 오른쪽 위 자물쇠 아이콘으로 로그인한다.

화면

경로	하는 일
/	상단 탭으로 배치판 · 아이템 · 유물 · 상징을 전환한다. "배치판"에서 챔피언을 놓고 성급·아이템을 정하면 특성이 실시간으로 계산된다. 탭을 바꿔도 배치 내용은 그대로 남아 있다. "아이템"·"유물"·"상징"은 S~D 등급 순위표(고정 목록)
/artifacts	유물 31종. 검색 · 즐겨찾기 · 메모
/emblems	상징 20종. 조합식, 특성 단계, 조합 불가 여부
/decks	상단 탭으로 내 덱 · 아이템 순위 · 유물 순위 · 상징 순위를 전환한다. "내 덱"은 이름 · 챔피언 · 특성 · 유물 · 상징 · 태그 · 메모로 검색해서 배치툴로 바로 연다(우측 상단에 휴지통 · 초기화). 나머지 세 탭은 배치툴의 "아이템"·"유물"·"상징" 탭과 같은 내용이다

배치툴 조작:

• 아래 목록(챔피언 · 아이템 전환 가능)에서 배치판으로 끌어다 놓는다 (모바일에서는 잠깐 누르고 있으면 끌리기 시작한다 — 바로 쓸면 화면 스크롤로 넘어간다)
• 눌러서 고른 뒤 칸을 눌러도 놓인다. 좁은 화면에서 정확히 놓고 싶을 때 편하다
• 배치된 유닛을 끌면 자리를 옮기거나 다른 유닛과 자리를 바꾼다
• 유닛에 마우스를 올리면 별 1~3개가 떠서 성급을 바로 정할 수 있다 (PC 전용 — 폰은 시트의 큰 버튼으로)
• 아이템은 목록에서 유닛 위로 직접 끌어다 장착한다. 조합 · 찬란한 · 유물 · 상징 · 기본 다섯 갈래에서 고른다 (마우스를 올리면 재료를 아이콘 + 이름으로 보여주는 툴팁이 뜬다 — 목록, 유닛 시트, 배치판 위에 이미 장착된 아이템까지 전부 동일하다. 눌러서 고르면 위쪽 배너에도 재료가 나온다)
• 배치된 유닛을 누르면 성급 · 아이템 · 스킬 설명이 나온다 (아이템 추가·해제도 여기서 가능)
• 빼는 건 PC에서 오른쪽 클릭, 폰에서 두 번 두드리기
• 같은 아이템을 여러 개 껴도 된다 (유니크로 표시된 아이템만 중복이 막힌다)
• 배치판과 목록 사이 메모 칸에 자유롭게 적어 두면 덱과 함께 저장된다
• 상징을 끼우면 특성 계산에 바로 반영된다
• 특성 패널 아래에 지금 낀 아이템을 전부 기본 재료로 쪼개 합산한 표가 뜬다 (예: 대천사의 지팡이 + 라바돈의 죽음모자 → 지팡이 x3, 눈물 x1). 아이템이 하나도 없으면 안 보인다
• 링크 없이 배치툴에 들어오면 항상 빈 판으로 시작한다. 계속 쓰려면 저장하거나, 링크 버튼으로 지금 배치만 담은 주소를 복사해 둔다
• 링크 버튼 옆 클립보드 아이콘은 게임 안 "팀 계획표"에 붙여넣을 수 있는 팀 코드를 복사한다. 어떤 챔피언이 있는지만 담기고, 배치·성급·아이템은 안 담기니 게임 안에서 다시 정해야 한다. 챔피언이 10명을 넘으면 앞에서부터 10명까지만 담긴다
• "저장"은 항상 새 덱을 만들고, 덱을 하나 저장하고 나면 그 옆에 "덮어쓰기"가 따로 뜬다 — 지금 열어 둔 덱을 고칠 때만 덮어쓰기를 쓰고, 다른 덱을 만들 땐 저장을 쓴다. (예전엔 버튼 하나가 상황에 따라 저장/덮어쓰기로 바뀌어서, 다른 덱을 만들려던 게 실수로 이전 덱을 덮어써 버리는 일이 있었다)
• "초기화" 버튼은 배치판·이름·태그·메모를 한 번에 비운다. 저장된 덱에는 영향이 없다 — 다른 덱을 새로 시작하고 싶을 때 쓴다
• "불러오기"는 내 덱 페이지로 나가지 않고 배치툴 안에서 바로 저장해 둔 덱을 골라 이어서 고칠 수 있게 한다. 링크 없이 들어와서 빈 판일 때(=덮어쓰기가 아직 안 뜰 때) 기존 덱을 수정하려면 이걸로 먼저 불러온다
• 배치툴과 내 덱 맨 위에 "밤돌노트"라는 공지 한 줄이 뜬다. 특정 덱이 아니라 사이트 전체가 같이 보는 한 줄이라, 어느 쪽에서 고쳐도 같은 문구가 양쪽에 다 보인다 (새로고침해야 반영된다). 비워 두면 아예 안 보인다

내 덱 페이지 조작:

• 덱 카드의 휴지통 아이콘을 누르면 바로 삭제되는 게 아니라 휴지통으로 이동한다. 실수로 눌러도 우측 상단 휴지통에서 되돌릴 수 있다
• 우측 상단 "초기화"는 지금 보이는 덱을 전부 한 번에 휴지통으로 보낸다 (배치툴의 "초기화"와는 다른 버튼이다 — 이건 저장된 덱 자체를 정리할 때 쓴다). 이것도 바로 없어지는 게 아니라 휴지통을 거친다
• 우측 상단 휴지통 아이콘(지운 덱이 있으면 개수가 뱃지로 뜬다)을 누르면 지운 덱 목록이 뜨고, 하나씩 복원하거나 완전 삭제할 수 있다. "휴지통 비우기"는 휴지통에 있는 걸 전부 한 번에 완전히 지운다 — 이 단계만 되돌릴 수 없다

데이터

챔피언 · 특성 · 아이템 정보와 아이콘은 Community Dragon에서 받아 온다. Riot API 키는 필요 없다.

npm run sync-data          # 현재 시즌 데이터 갱신 (패치 후에 돌리면 된다)
SET=19 npm run sync-data   # 다음 시즌 데이터 받기

받은 결과는 public/data/set{번호}.json과 public/img/ 아래에 저장된다. 아이콘까지 프로젝트 안에 두기 때문에 화면이 뜰 때 외부 서버를 기다리지 않는다.

데이터는 서버가 뜰 때 한 번 읽어 메모리에 들고 있으므로, 갱신한 뒤에는 개발 서버를 다시 시작해야 반영된다.

시즌마다 이름 규칙이 다르다

게임 내부 데이터의 이름 규칙은 시즌마다 바뀐다.

시즌	챔피언	아이템
17	TFT17_Briar	공용 네임스페이스 TFT_Item_*
18	DA_18_Sentry	세트 전용 네임스페이스 DA_*

그래서 scripts/sync-tft-data.mjs는 접두사를 코드에 박아 두지 않는다. 아이콘 경로에 tft{번호}가 들어간 챔피언을 먼저 골라내고, 거기서 접두사를 알아낸 뒤 그 접두사로 아이템을 찾는다. 기본 아이템이 세트 전용인지 공용인지를 보고 유물·조합 아이템을 어느 쪽에서 가져올지도 자동으로 정한다.

다음 시즌으로 넘어갈 때

1. SET=19 npm run sync-data
2. lib/set-data.ts의 CURRENT_SET 값을 바꾼다
3. 팀 코드가 새 시즌에서도 맞는지 확인한다 — lib/team-code.ts의 CODE_VERSION("02")과 슬롯 폭(3자리)은 시즌마다 라이엇이 바꿀 수 있는 값이라 자동으로 알아낼 방법이 없다. lolchess.gg 같은 사이트가 새 시즌에서 실제로 만드는 코드를 하나 구해서 비교해 보고, 다르면 이 두 값을 맞게 고친다.

이전 시즌에 저장해 둔 덱은 set_number로 구분되어 남아 있는다.

알아두면 좋은 것

• 보는 건 로그인 없이 전부 열려 있고, 저장 · 수정 · 삭제만 로그인(본인 계정)해야 된다 (supabase/schema.sql의 RLS 정책으로 강제한다 — 화면에서 버튼만 숨기는 게 아니라 Supabase 자체가 익명 요청의 쓰기를 막는다). 회원가입 화면은 없다.
• 챔피언 스킬 설명에서 일부 수치가 비어 보일 수 있다. 게임 안에서 계산되는 값이라 원본 데이터에도 들어 있지 않은 것들이다. 특성과 아이템 수치는 정상적으로 채워진다.
• 증강체는 아직 다루지 않는다.
• 아이템 · 유물 · 상징 순위(S~D 등급)는 통계 사이트에서 자동으로 받아오는 게 아니라 lib/item-tier-list.ts · lib/artifact-tier-list.ts · lib/emblem-tier-list.ts에 직접 정해서 넣어 둔 고정 목록이다. 패치로 순위가 바뀌면 이 파일들을 손으로 고쳐야 한다.
• 어떤 챔피언도 갖고 있지 않고 상징으로도 붙일 수 없는 특성(시즌 18의 일월식)은 목록에서 빠진다. 배치만으로는 켤 수 없는 특성이라 계산에 영향은 없다.
• 나무정령(Elderwood) 3특성 이상에서 자동으로 소환되는 "돌껍질 나무"·"생명꽃"은 Community Dragon에 정식 챔피언으로 등록돼 있지 않아, 배치 확인용으로 이름만 수동으로 추가해 뒀다 (전용 초상화가 없어 나무정령 특성 아이콘을 대신 쓴다). 코스트 0, 특성 없음으로 등록되어 있어 특성 계산에는 영향을 주지 않는다.