[TROUBLE SHOOTING]카드 이미지 깨짐 현상과 데이터 매핑 구조 개선 #2
Description
[TROUBLE SHOOTING]카드 이미지 깨짐 현상과 데이터 매핑 구조 개선
📅 일시: 2025.11.20
📂 관련 파일:
- 레포:cardbenepick-app
- backend/app/api/endpoints/assets.py, frontend/.../RegisterCards.tsx 🏷 태그: #DatabaseDesign #DataMapping
📌 상황 (Context)
'카드 직접 등록' 기능을 통해 등록한 카드가 월렛 화면에서 이미지가 깨져서(X 박스) 나오는 현상 발생.
⚠️ 문제 (Problem)
초기 설계에서는 사용자가 입력한 **'카드 번호(16자리)'**를 user_assets 테이블의 식별자(external_account_id)로 저장함. 하지만 프론트엔드는 이미지를 띄우기 위해 {식별자}card.png 파일을 요청하는데, 서버에는 12341234...card.png라는 파일이 존재하지 않음. (이미지 파일명은 card_master의 card_id인 13, 51 등으로 저장되어 있음)
🛠 해결 (Solution)
등록 프로세스와 데이터 저장 로직을 전면 수정함.
등록 절차 변경: 사용자에게 카드 번호 입력 전, '카드 상품(Master Data)'을 먼저 선택하게 함.
저장 값 변경: user_assets 테이블에 사용자의 카드 번호 대신, 선택한 상품의 고유 ID(card_id)를 저장하도록 변경.
결과적으로 조회 시 별도의 변환 없이 {card_id}card.png를 호출할 수 있게 되어 이미지 매핑 문제 해결.
💡 회고 (Retrospective)
사용자 입력 데이터(User Data)와 시스템 기준 정보(Master Data) 간의 연결 고리를 설계 단계에서 명확히 정의해야 함을 배움. "화면에 무엇을 보여줘야 하는가?"를 먼저 고려했다면 DB 설계를 더 효율적으로 할 수 있었을 것임.