플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - 성장 데이터 입력 주기가 불규칙할 경우 차트 보간 처리가 필요하며, null 데이터 포인트를 connectNulls 옵션으로 대응할 계획입니다. - 유튜브 oEmbed API의 CORS 제한으로 서버 사이드 프록시 처리가 필요하며, Express 미들웨어에서 캐싱하여 반복 호출을 최소화할 계획입니다. - 학부모와 관리자 역할의 접근 권한 분리가 필요하며, JWT 클레임
프로젝트 성과
레이더·라인 차트 조합 성장 분석 화면 설계
Recharts RadarChart 6축과 LineChart 기간 필터를 조합하여 단면·시계열 성장 데이터를 동시에 제공하는 분석 컴포넌트를 구현할 예정입니다.
학생별 고유 URL 기반 공유 구조 설계
React Router v6 동적 라우팅(/students/:id)으로 학생별 접근 URL을 설계하고 학부모 공유 링크 생성 기능을 구현합니다.
유튜브 oEmbed API 연동 영상 라이브러리 구현
유튜브 링크 입력만으로 썸네일·제목을 자동 파싱하는 영상 카드 갤러리를 설계하고 다중 태그 필터 로직을 적용합니다.
관리자 폼 Zod 스키마 유효성 검증 적용
React Hook Form + Zod를 조합하여 학생 등록·성장 데이터 입력 시 클라이언트 단에서 즉시 오류를 감지하는 폼 구조를 설계합니다.
PC+Mobile 반응형 레이아웃 설계
Tailwind CSS 브레이크포인트 3단계(mobile/tablet/desktop)를 적용하고 모바일에서는 사이드바를 드로어 방식으로 전환하는 반응형 구조를 구현합니다.
핵심 기능
대시보드
학원의 전체 현황을 한눈에 파악할 수 있는 메인 대시보드를 제공합니다
진행 단계
데이터 모델 설계
2026.03.
학생-클래스-성장데이터-공지-영상 엔티티 관계 설계, Prisma 스키마 정의 및 마이그레이션 구성
프로젝트 상세
1) 포트폴리오 소개 체육학원의 학생 성장 데이터 시각화, 수업영상 관리, 공지사항, 관리자 백오피스를 포함한 학생 관리 웹앱을 구현한 맞춤 데모입니다. 반응형(PC+Mobile) 설계와 레이더·라인 차트 기반 성장 분석, 학생별 고유 URL 구조를 적용합니다. 프로젝트 착수 시 이 데모를 그대로 확장하여 빠르게 개발을 진행할 수 있습니다. 2) 작업 범위 - 대시보드: 학원의 전체 현황을 한눈에 파
