크라우니AI welcome 화면 생태계 카드 추가

개요

crowny.org:9852 크라우니AI 채팅 welcome 화면에 "크라우니 둘러보기 — 먼저 경험해보세요" 섹션 추가. AI 대화 시작 전에 크라우니 생태계 서비스를 자연스럽게 권유하는 5개 카드.

무엇을 했는지

수정 파일

• /Users/ef/crowny-ai/public/index.html — CSS + HTML + JS (프론트엔드만, server.js 무수정)

추가 내용

1. CSS: .eco-explore, .eco-cards, .eco-card 등 전용 클래스 (줄 약 1178~1260 부근)

- 베이지+골드(var(--accent) = #C9A961) 상단 2px 선 호버 인터랙션 - 5열 그리드, 반응형 (900px→3열, 600px→2열, 380px→1열) - 라이트/다크 테마 자동 적용 (CSS 변수 사용)

1. HTML: welcome div 내 .suggestions 아래 #ecoExplore 섹션

- 헤더: "크라우니 둘러보기 — 먼저 경험해보세요" + "전체 보기 →" (서비스 탐색 패널 연동) - #ecoCards div — JS가 a.eco-card 태그로 채움

1. JS: ECO_FEATURED_FALLBACK, buildEcoCards(), renderEcoCards(), loadEcoCards()

- 즉시 fallback 5개 렌더 (API 대기 없음) - 이후 /api/services 호출 → 응답 성공 시 preferred IDs로 업그레이드 - init() 에서 loadEcoCards() 호출

5개 카드

아이콘	서비스명	URL
📖	하마성경	bible.crowny.org
📈	크라우니트레이딩	trading.crowny.org
♾️	크라우니파이낸스	finance.crowny.org
✳	티옴타	tiomta.com
🇰🇷	크라우니 한국	crowny.kr

검증

• curl -s http://127.0.0.1:9852/ | grep -c "둘러보기\|경험하기\|ecoExplore" → 4 (pass)
• HTML 파서 오류 없음
• /api/services 20개 반환 확인

잔여 이슈

• crowny.kr / tiomta.com / finance.crowny.org 은 SERVICES_DIR에 없으므로 항상 fallback 카드로 표시됨

→ 추후 server.js SERVICES_DIR에 추가하면 buildEcoCards가 자동 픽업