0e74ee5fcd
🎨 프리미엄 카드 디자인: 1. 고급스러운 그라데이션 배경 - 기본: 화이트 → 라이트 그레이 그라데이션 - 호버: 화이트 → 블루 틴트 그라데이션 - 부드러운 색상 전환 효과 2. 동적 상단 그라데이션 바 - 4색 그라데이션 (블루, 퍼플, 시안, 그린) - 3초 주기 애니메이션 효과 - 호버 시 나타나는 시각적 피드백 ✨ 3D 호버 효과: 1. 카드 전체: - Y축 -8px 이동 + 2% 확대 - 고급 그림자 효과 (다층 그림자) - 0.4초 cubic-bezier 애니메이션 2. 아이콘 개선: - 크기 확대 (64px → 80px) - 호버 시 15% 확대 + 5도 회전 - 색상 변화 (라이트 블루 → 다크 블루) - 3D 그림자 및 테두리 효과 🎯 인터랙션 개선: 1. 화살표 버튼: - 원형 배경 추가 (32px) - 슬라이드 + 스케일 애니메이션 - 호버 시 블루 그라데이션 활성화 2. 텍스트 색상 변화: - 제목: 다크 그레이 → 다크 블루 - 설명: 미디엄 그레이 → 다크 그레이 - 부드러운 색상 전환 📱 반응형 최적화: - 모바일: 아이콘 60px, 회전 각도 3도로 조정 - 태블릿: 2열 그리드 유지 - 데스크톱: 4열 그리드 최적화 🚀 성능 최적화: - GPU 가속 애니메이션 (transform, opacity) - 최적화된 cubic-bezier 전환 - 레이어 분리를 통한 렌더링 성능 향상 🎨 시각적 효과: - 방사형 그라데이션 오버레이 - 다층 그림자 시스템 - 부드러운 색상 전환 - 프리미엄 느낌의 시각적 계층 결과: 사용자 경험을 크게 향상시키는 매력적이고 인터랙티브한 카드 디자인 테스트: http://localhost:20000/pages/dashboard/group-leader.html
TK-FB-Project - 통합 실행 가이드
🚀 한 번에 모든 서비스 실행
🎯 간편 실행 (권장)
cd /Users/hyungi/docker/TK-FB-Project
./start.sh
🛑 간편 중지
./stop.sh
📋 직접 실행
docker-compose up -d
docker-compose down
📊 서비스 목록
| 서비스 | 포트 | 접속 URL | 설명 |
|---|---|---|---|
| 웹 UI | 20000 | http://localhost:20000 | 메인 웹 인터페이스 |
| API 서버 | 20005 | http://localhost:20005 | Node.js API 서버 ✅ |
| FastAPI 브릿지 | 20010 | http://localhost:20010 | Python FastAPI 서비스 |
| phpMyAdmin | 20080 | http://localhost:20080 | DB 관리도구 |
| MariaDB | 20306 | - | 데이터베이스 서버 |
🛠️ 관리 명령어
모든 서비스 중지
cd /Users/hyungi/docker/TK-FB-Project
docker-compose down
서비스 상태 확인
docker ps | grep fb_
로그 확인
docker-compose logs -f
💾 데이터베이스 정보
- 호스트: localhost:20306
- 데이터베이스: hyungi
- 사용자: hyungi
- 비밀번호: hyungi_password_2025
- Root 비밀번호: hyungi_root_password_2025
✨ 주요 개선사항
- 통합 실행: 한 번의 명령으로 모든 서비스 실행
- 깔끔한 DB 초기화: 마이그레이션 오류 해결
- 일관된 네이밍: fb_ 접두사로 컨테이너 구분
- 안정적인 포트: 20000번대 포트 사용