Actions
기능 #677
진행중
기능 #784: [프레임워크] 테마형 캠페인 데이터 주도화 (카탈로그 라우팅 + 어드민 저작)
[여름테마-바캉스MBTI] 결과 브랜드 템플릿 하단 상품추천 영역 추가
기능 #677:
[여름테마-바캉스MBTI] 결과 브랜드 템플릿 하단 상품추천 영역 추가
시작일:
2026/06/30
완료일:
진척도:
0%
추정시간:
설명
h2. 배경
여름 테마 '바캉스 MBTI' 화면 구성 PPT 기준으로, 테스트 결과 화면의 브랜드 템플릿 하단에 상품 추천 영역을 추가한다.
h2. 요구사항
- 바캉스 MBTI 결과 화면/브랜드 템플릿 하단에 상품 추천 영역을 노출한다.
- 상품 추천은 해당 결과에서 추천된 쇼핑 브랜드를 기준으로 한다.
- 추천 상품은 추천 브랜드 중 '선물라운지'에 노출 가능한 상품만 보여준다.
- PPT 와이어프레임 기준 상품 카드는 이미지, 상품명, 가격을 포함한다.
- 결과 화면 내 추천 쇼핑 브랜드 예시는 템퍼, 이솝, 오설록, 조말론 런던이다.
- 사용자가 확인한 바캉스 유형과 추천 브랜드/상품 영역이 한 흐름에서 이어지도록 구성한다.
h2. 바캉스 MBTI 구성
질문:
- 내가 좋아하는 여행지는? A. 바다 / B. 산
- 바캉스 준비를 할 때? A. 전부 챙겨! 보부상 타입 / B. 짐은 무조건 가볍게, 미니멀리스트
- 내가 선호하는 스케줄은? A. 휴식이 최고! 쉬고 먹는 휴양 여행 / B. 쉴 틈이 어디 있어! 빽빽한 관광 일정
결과 유형:
- 산 + 보부상 + 휴양: 숲캉스 풀세팅러
- 산 + 보부상 + 관광: 산타고 맛집찍고형
- 산 + 간단한 짐 + 휴양: 담백한 자연 휴식러
- 산 + 간단한 짐 + 관광: 실속형 숲길 트래블러
- 바다 + 보부상 + 휴양: 맥시멀 비치 휴양러
- 바다 + 보부상 + 관광: 해변 도시 정복자
- 바다 + 간단한 짐 + 휴양: 선셋 미니멀 휴양형
- 바다 + 간단한 짐 + 관광: 도시형 바캉스 트래블러
h2. 완료 기준
- 테스트 결과 화면에서 추천 브랜드 영역 하단에 상품 추천 영역이 표시된다.
- 결과별 추천 브랜드 목록을 기준으로 선물라운지 상품만 조회/필터링한다.
- 상품 카드에는 이미지, 상품명, 가격이 표시된다.
- 추천 가능한 선물라운지 상품이 없을 때의 빈 상태가 깨지지 않는다.
- 로딩/오류 상태가 기존 화면 흐름을 해치지 않는다.
- 신규 문구는 화면 범위 i18n 기준으로 관리한다.
- 상품 카드와 액션 요소는 키보드 접근, 포커스 표시, 접근 가능한 이름을 갖춘다.
- PC/모바일 반응형에서 브랜드 영역과 상품 추천 영역이 겹치거나 잘리지 않는다.
h2. 참고 자료
- 첨부 PPT: 바캉스 MBTI (와이어프레임).pptx
파일
민찬 김이(가) 약 21시간 전에 변경
구현 계획 (코드베이스 탐색 완료 기준)¶
범위: 프론트엔드 단독. 백엔드 변경 없음 — 선물라운지 상품은 기존 getOpenSearchList(azure ai search=선물라운지 카탈로그)로 제공됨. 단일 일감으로 진행.
노출 방식: 추천 브랜드들의 선물라운지 상품 중 이미지·가격이 유효한 항목을 3~4개 큐레이션하여 카드 그리드로 노출(와이어프레임 기준).
주요 파일¶
- codes/app/web-front/src/page/jellbbo/chat/templates/TypeTestTemplate.tsx — '추천 쇼핑 브랜드'(SolutionSection) 하단에 신규 섹션 렌더
- (신규) templateSection/SolutionProductRecommendSection.tsx — 상품 조회·큐레이션·카드 그리드
- codes/app/web-front/src/hooks/useOpensearchListApi.ts — getOpenSearchList(brandList) 재사용(브랜드별 상품 조회)
- templateCard/GiftSmallCard.tsx — 상품 카드(이미지+상품명+가격) 재사용
- i18n: 컴포넌트 라벨 상수 + useTranslation (ko/en/ja/zh/fr/es)
구현 단계¶
- 신규 섹션 컴포넌트: 추천 브랜드 목록(dataInfo) 받아 getOpenSearchList 호출 → 브랜드별 결과 병합 → 이미지·가격 유효 상품 3~4개 큐레이션(브랜드 다양성 고려).
- TypeTestTemplate에서 SolutionSection 바로 아래 배치. 중복 API 호출 방지를 위해 상품 조회를 상위에서 1회 수행해 공유하는 방식 검토.
- 상단 문구 '당신의 바캉스 MBTI에 맞는 바캉스 아이템을 확인해보세요!' + 카드 그리드 렌더.
- 상태 처리: 로딩=Skeleton, 빈 상태=영역 숨김 또는 안내(레이아웃 유지), 오류=조용히 폴백.
- 카드 클릭 → 상품 링크(link/mobile_link) 이동.
- i18n 신규 문구 6개 언어 등록.
- 접근성: 카드 링크 키보드 포커스·accessible name 점검.
- 반응형: PC 그리드 / 모바일 스택·2열, 브랜드 영역과 겹침·잘림 없음.
완료 기준 대비¶
- 추천 브랜드 하단 상품 추천 영역 표시 O
- 결과별 추천 브랜드 기준 선물라운지 상품만 조회/필터 O(getOpenSearchList)
- 카드=이미지·상품명·가격 O(GiftSmallCard)
- 추천 가능 상품 없을 때 빈 상태 안 깨짐 O(빈 상태 처리)
- 로딩/오류가 기존 흐름 안 해침 O
- 신규 문구 화면 범위 i18n O
- 카드/액션 키보드 접근·포커스·접근가능한 이름 O
- PC/모바일 반응형 겹침·잘림 없음 O
검증¶
- web-front build/tsc, 관련 유닛 테스트
- 결과 화면 상품 영역 렌더·빈/로딩/오류·반응형 수동 확인
상태: 계획 확정. 구현은 별도 지시 시 착수.
Actions