feat: 라이프스타일 api 연동

[waldls]

📌 관련 이슈번호

close : #108

🔍 구현한 내용

• 라이프스타일 페이지 API 연동했습니다.

  • tagKey 기준으로 대표 디바이스 3개를 조회하고, 하단 기기 요약 카드에 노출되도록 했습니다.
  • 디바이스 목록은 slot 기준으로 정렬해 사용합니다.

• 라이프스타일 관련 상수와 타입을 분리했습니다.

  • 라이프스타일 태그 목록과 이미지 매핑을 constants/lifestyle.ts로 이동했습니다.
  • Label ↔ TagKey 매핑 구조로 UI와 API 간 책임을 분리했습니다.

• DeviceSummaryCard에 API 응답 데이터를 연결했습니다.

  • 이미지, 기기명, 출시일, 가격 정보를 실제 응답 값으로 렌더링합니다.
  • 데이터가 없는 경우를 고려해 fallback 처리를 추가했습니다.

📸 스크린샷 or 실행 영상

2026-02-04.230228.mov

📢 리뷰어에게

• tagKey = tour 일 때 첫 번째 기기 사진이 제대로 안 보여 pm님께 이미지 url 수정 요청 드린 상황입니다. 연동 상의 이상은 없습니다.

[github-actions]

✅ PREVIEW https://device-life-frontend-lkff-m2te97bl0-yuminparks-projects.vercel.app

[H-un1]

1. 가격 포맷팅 처리 (UX/UI)
   현재 DeviceSummaryCard.tsx에서 가격을 device?.price 그대로 렌더링하고 있습니다. API 응답 타입에 currency: 'KRW'가 있으므로, 천 단위 콤마와 통화 단위를 붙여주는 것이 사용자 경험상 훨씬 좋을 것 같습니다.

2. 상수 관리 구조 개선
   src/constants/lifestyle.ts를 보면 LIFESTYLE_TAGS, LIFESTYLE_TAG_IMAGE_MAP, LIFESTYLE_LABEL_TO_TAGKEY가 서로 다른 객체로 분리되어 있습니다. 이를 Config Object로 묶는 건 어떨까요

3. useEffect Cleanup 누락 점검
   LifestylePage.tsx의 handleClickTag 함수 내에서 setTimeout을 사용하고 있는데, 만약 타임아웃이 돌기 전에 컴포넌트가 언마운트되면 메모리 누수나 상태 업데이트 에러가 발생할 수 있습니다. 이미 useEffect에서 resumeTimerRef를 정리하고 계시지만, 로직 안전성을 위해 handleClickTag 실행 시 기존 타이머를 확실히 clear 해주는 것도 고려해주세요

[Seony777]

확인했습니다. 고생하셨습니다!
저도 통화단위 붙이는 거만 추가해주시면 좋을 거 같다는 생각이 듭니다.

[github-actions]

✅ PREVIEW https://device-life-frontend-lkff-wwsyeas4s-yuminparks-projects.vercel.app

[waldls]

1. 가격 포맷팅 처리 (UX/UI)
   현재 DeviceSummaryCard.tsx에서 가격을 device?.price 그대로 렌더링하고 있습니다. API 응답 타입에 currency: 'KRW'가 있으므로, 천 단위 콤마와 통화 단위를 붙여주는 것이 사용자 경험상 훨씬 좋을 것 같습니다.
2. 상수 관리 구조 개선
   src/constants/lifestyle.ts를 보면 LIFESTYLE_TAGS, LIFESTYLE_TAG_IMAGE_MAP, LIFESTYLE_LABEL_TO_TAGKEY가 서로 다른 객체로 분리되어 있습니다. 이를 Config Object로 묶는 건 어떨까요
3. useEffect Cleanup 누락 점검
   LifestylePage.tsx의 handleClickTag 함수 내에서 setTimeout을 사용하고 있는데, 만약 타임아웃이 돌기 전에 컴포넌트가 언마운트되면 메모리 누수나 상태 업데이트 에러가 발생할 수 있습니다. 이미 useEffect에서 resumeTimerRef를 정리하고 계시지만, 로직 안전성을 위해 handleClickTag 실행 시 기존 타이머를 확실히 clear 해주는 것도 고려해주세요

1,2,3 모두 반영했습니다. 감사합니다.
현재는 모든 태그의 응답에서 currency가 KRW로 오는데 추후 KRW가 아닌 다른 통화 단위가 응답으로 들어올 수 있는지 백엔드 측에 문의 드렸습니다. 만약 예외가 있다면 그것까지 수정해서 merge 하겠습니다.

[waldls]

1. 가격 포맷팅 처리 (UX/UI)
   현재 DeviceSummaryCard.tsx에서 가격을 device?.price 그대로 렌더링하고 있습니다. API 응답 타입에 currency: 'KRW'가 있으므로, 천 단위 콤마와 통화 단위를 붙여주는 것이 사용자 경험상 훨씬 좋을 것 같습니다.
2. 상수 관리 구조 개선
   src/constants/lifestyle.ts를 보면 LIFESTYLE_TAGS, LIFESTYLE_TAG_IMAGE_MAP, LIFESTYLE_LABEL_TO_TAGKEY가 서로 다른 객체로 분리되어 있습니다. 이를 Config Object로 묶는 건 어떨까요
3. useEffect Cleanup 누락 점검
   LifestylePage.tsx의 handleClickTag 함수 내에서 setTimeout을 사용하고 있는데, 만약 타임아웃이 돌기 전에 컴포넌트가 언마운트되면 메모리 누수나 상태 업데이트 에러가 발생할 수 있습니다. 이미 useEffect에서 resumeTimerRef를 정리하고 계시지만, 로직 안전성을 위해 handleClickTag 실행 시 기존 타이머를 확실히 clear 해주는 것도 고려해주세요

1,2,3 모두 반영했습니다. 감사합니다. 현재는 모든 태그의 응답에서 currency가 KRW로 오는데 추후 KRW가 아닌 다른 통화 단위가 응답으로 들어올 수 있는지 백엔드 측에 문의 드렸습니다. 만약 예외가 있다면 그것까지 수정해서 merge 하겠습니다.

++ PM님 답변으로 KRW 만 사용한다고 하시네요 승인해주시면 merge 하겠습니다