2026 Low-Code AI Challenge Exhibition

2026 Low-Code AI Challenge 수상작을 소개하는 온라인 전시 페이지입니다. 수상 프로젝트의 문제 정의, 해결 방안, 주요 기능, 팀원 소개, 데모 영상, 발표 자료와 배포 서비스를 한곳에서 확인할 수 있습니다.

✨ 주요 기능

• 수상 프로젝트 목록 및 상세 페이지 제공
• 프로젝트별 문제 정의, 해결 방안, 주요 기능, 팀원 소개 표시
• YouTube 데모 영상 임베드 및 외부 링크 제공
• 발표 자료, 배포 서비스, 포스터 이미지 링크 제공
• 프로젝트별 구글폼 피드백 링크 연결
• GA4 기반 관람 행동 이벤트 수집

🛠️ 기술 스택

• 코어: React, JavaScript
• UI/스타일링: Tailwind CSS
• 빌드 도구: Vite
• 패키지 매니저: npm
• 코드 품질: ESLint

🚀 시작하기

설치

npm install

개발 서버 실행

npm run dev

프로덕션 빌드

npm run build

📁 프로젝트 구조

.
├── docs/
│   └── ga-events.md          # GA4 이벤트 수집 가이드
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/               # 로고 및 프로젝트 포스터 이미지
│   ├── components/           # 공용 UI 컴포넌트
│   ├── data/
│   │   └── projects.js       # 수상작 데이터, 링크, 팀 정보
│   ├── hooks/                # 프로젝트 라우팅 훅
│   ├── pages/                # 목록/상세 페이지
│   ├── utils/                # 수상 라벨, 분석 이벤트 유틸
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── index.html
├── package.json
└── vite.config.js

📊 GA4 이벤트

관람객 행동 분석을 위해 다음 이벤트를 수집합니다.

• page_view
• select_content
• view_project_detail
• click_demo_video
• click_project_resource
• view_project_section

자세한 이벤트 설계와 파라미터는 docs/ga-events.md를 참고하세요.

✅ 배포 전 체크리스트

• 모든 프로젝트의 발표 자료 링크가 올바른지 확인
• 배포 서비스 링크가 열리는지 확인
• YouTube 데모 영상이 상세 페이지에 임베드되는지 확인
• 포스터 이미지가 깨지지 않는지 확인
• 피드백 폼 링크가 팀별로 올바른지 확인
• GA4 DebugView에서 이벤트가 의도대로 수집되는지 확인
• /projects/* 직접 접근 시 페이지가 정상 렌더링되는지 확인