⁕ 1. 문제점
- 수동 업무 처리의 비효율: 학교, 강사, 내부 담당자 간 커뮤니케이션과 행정 처리를 수동으로 진행
- 정보 분산: 프로그램 개설, 강사 섭외, 출강 관리, 강사료 정산 등이 각각 독립적으로 관리
- 높은 관리 비용: 엑셀, 이메일, 전화 등 다양한 채널을 통한 비체계적 관리
- 정산 오류: 수기 계산으로 인한 강사료 정산 오류 및 지급 지연
- 낮은 투명성: 프로그램 신청부터 정산까지의 전체 프로세스 가시성 부족

⁕ 2. 바카라 안전 사이트 목표
- 업무 효율성 극대화: 통합 웹 플랫폼을 통한 One-stop 관리 시스템 구축
- 자동화 시스템 도입: 강사 매칭, 강사료 정산, 지급조서 생성 자동화
- 실시간 정보 공유: 역할별 대시보드를 통한 실시간 현황 파악
- 사용자 경험 향상: 직관적이고 현대적인 UI/UX로 사용자 만족도 제고
- 확장 가능성: 향후 백엔드 개발 시 명확한 기능 명세와 가이드 제공

⁕ 3. 주안점
- 완전한 시뮬레이션: MockData를 활용하여 실제 백엔드 없이도 모든 시나리오 테스트 가능
- 명확한 API 명세: 향후 백엔드 개발을 위한 상세한 데이터 구조 및 API 설계
- 벤치마킹: 늘봄허브, 1365자원봉사포털 등을 참고하되 더 현대적인 UI/UX 구현
- 품질 보증: ESLint, Prettier를 통한 코드 품질 유지 및 일관성 확보

교육 프로그램 운영에서 강사 매칭, 정산까지 하나의 플랫폼으로 통합했습니다. React와 TypeScript 기반의 직관적인 인터페이스로 업무 처리 시간을 단축하고, *산 오류를 감소시킬 수 있는 시스템입니다. 실제 백엔드 개발 전, 완벽한 프론트엔드 목업으로 모든 사용자 시나리오를 미리 검증하고 개선할 수 있습니다.

■ 1. 포트폴리오 소개
오프라인 교육 서비스 및 강사 파견 관리 시스템 - 프론트엔드 목업 개발

- 서비스 카테고리: 교육 플랫폼, 매칭 서비스, 관리 시스템
- 메인 타겟:
- 교육 프로그램을 운영하는 학교 및 기관 담당자
- 교육 프로그램에 참여하는 강사
- 내부 관리자 (프로그램 운영 관리자)
- 청소년, 대학생, 청년 등 개인 신청자
- 바카라 안전 사이트 목적: 오프라인 교육 프로그램 운영, 강사 파견, 정산 관리를 통합하는 웹 플랫폼의 프론트엔드 목업 개발
- 개발 규모: 예산 40,000,000원 / 개발 기간 84일

---

■ 2. 작업 범위

⁕ 담당 업무
- 전체 바카라 안전 사이트 설계 및 기획: PRD 작성, 요구사항 정의, 시스템 설계
- Front-end 개발 전체: React 18.x + TypeScript 기반 전체 UI/UX 개발
- UI/UX 디자인: 화면 설계, 디자인 시스템 구축, 사용자 경험 설계
- 바카라 안전 사이트 관리: 일정 관리, 마일스톤 설정, 품질 관리

⁕ 기술 스택
Core Technologies
- Framework: React 18.x (Create React App)
- Language: TypeScript 4.x
- State Management: Redux Toolkit
- Styling: Tailwind CSS v3.x

UI/UX Libraries
- Component Library: Headless UI, React Icons
- Animation: Framer Motion
- Form Management: React Hook Form + Yup
- Date Handling: date-fns
- Charts: Chart.js (react-chartjs-2)
- PDF Generation: @react-pdf/renderer
- Toast Notifications: react-hot-toast

Development Tools
- Package Manager: pnpm
- Code Formatting: Prettier
- Linting: ESLint (airbnb-typescript config)
- Version Control: Git

⁕ 지원 환경
- 반응형 웹: Mobile (0-640px), Tablet (641px-1024px), Desktop (1025px+)
- 브라우저 지원: Chrome, Edge, Safari, iOS Safari, Android Chrome

---

■ 3. 주요 업무

⁕ 핵심 기능 구현

• 3.1 교육 프로그램 관리
- 프로그램 목록 조회 (필터링, 정렬, 페이지네이션)
- 프로그램 상세 정보 표시 (Markdown 지원)
- 프로그램 신청 시스템 (기관/개인 신청 분리)
- 신청 현황 조회 및 상태 관리

• 3.2 강사 관리 시스템
- 강사 등록 Multi-step Form (4단계 회원가입)
- 강사 프로필 관리 (경력, 전문분야, 활동지역, 정산정보)
- 강사 매칭 내역 조회 및 관리
- 강사 활동 이력 및 통계 대시보드

• 3.3 강사 매칭 및 출강 관리
- 프로그램별 강사 배정 시스템
- 강사 검색 및 자동 매칭 (거리 기반, 전문분야 필터링)
- 매칭 승인/반려 처리 워크플로우
- 자동 채팅방 생성 및 안내 챗봇 시스템

• 3.4 강사료 정산 관리
- 강사료 자동 계산 시스템 (기본료 + 거리 기반 교통비)
- 지급조서 자동 생성 (PDF)
- 정산 상태 관리 및 이력 추적
- 강사료 기준 설정 관리자 페이지

• 3.5 커뮤니티 및 공지 시스템
- 공지사항, FAQ, 자료실 관리
- 우수 활동 사례 게시판
- 1:1 문의 및 신고센터
- 홍보 영상 및 보도자료 관리

• 3.6 역할별 맞춤 대시보드
- 관리자 대시보드: 전체 통계, Chart.js 차트 (라인, 막대, 도넛 차트)
- 학교 대시보드: 신청 프로그램 현황, 일정 캘린더 뷰
- 강사 대시보드: 출강 일정, 정산 내역, 평가 점수 통계
- 개인 대시보드: 신청 상태, 추천 프로그램

⁕ 주요 페이지
- 메인페이지 (Hero Banner, 최신 프로그램, 통계 요약)
- 교육 프로그램 목록/상세/신청 페이지
- 강사 등록/프로필/매칭/활동이력 페이지
- 관리자 페이지 (회원, 프로그램, 매칭, 정산 관리)
- 커뮤니티 페이지 (공지, FAQ, 자료실, 우수사례)
- 마이페이지 (역할별 대시보드, 알림함, 내 정보)
- 정책 페이지 (이용약관, 개인정보처리방침 등)

---

■ 4. 주안점

⁕ 4.1 사용자 중심 설계
- 직관적 UI/UX: 학습 없이 사용 가능한 인터페이스 설계
- 역할 전환 시스템: 관리자/학교/강사/개인 역할 간 원활한 전환
- 반응형 디자인: Mobile-first 접근으로 모든 기기에서 최적화된 경험 제공

⁕ 4.2 접근성 및 포용성
- WCAG 2.1 Level AA 준수: 키보드 네비게이션, 스크린 리더 지원
- 색상 대비: 최소 4.5:1 대비율 확보
- 명확한 포커스 표시: 인터랙티브 요소의 명확한 시각적 피드백

⁕ 4.3 개발 효율성 및 유지보수성
- Atomic Design 패턴: 재사용 가능한 컴포넌트 라이브러리 구축
- TypeScript: 타입 안전성 확보로 런타임 오류 최소화
- Redux Toolkit: 일관된 상태 관리 및 디버깅 용이성
- MockData 시스템: 실제 백엔드 없이 완전한 프론트엔드 시뮬레이션

⁕ 4.4 성능 최적화
- Code Splitting: React.lazy() + Suspense를 활용한 번들 최적화
- 초기 로딩 속도: 3초 이내 목표 (First Contentful Paint)
- Image Optimization: Lazy loading 및 최적화된 이미지 포맷

⁕ 4.5 데이터 보안 및 개인정보 보호
- 개인정보 마스킹: 주민등록번호, 계좌번호 등 마스킹 처리
- 입력 검증: React Hook Form + Yup을 통한 클라이언트 측 검증
- XSS 방지: 사용자 입력 데이터 sanitize 처리