기획 의도
Context
문제점
멘토는 멘티의 학습 현황과 과제·피드백·일정을 한눈에 관리하고 싶고, 멘티는 과제·피드백·학습 일정·성과를 한곳에서 점검하고 싶습니다. 실제 코칭 현장에서 바로 사용할 수 있는 MVP가 필요했습니다.
설계 원칙
Design Principles
핵심 원칙
- • 멘티 편의성 1순위
- • 날짜 기반 학습 관리
- • 전문적이지만 딱딱하지 않은 톤
- • 복잡 기능보다 실행 흐름 우선
왜 이렇게 설계했는가
System Approach
01
라우팅·권한 분리
- •/mentor · /mentee 라우트 분리 및 접근 제어
02
Mock ↔ 실 API 전환
- •데모 및 테스트를 위한 유연한 API 스위칭 구조
03
상태 관리 전략
- •React Query(서버) + Zustand(UI) 역할 분담
시스템 아키텍처
System Architecture
Frontend SPA
React SPA, 역할별 레이아웃 분리
Routing
ProtectedRoute + 역할 기반 접근
State & API
React Query + axiosInstance
환경 변수 기반으로 Auth만 실서버를 사용하거나 전체를 Mock 데이터로 운영하는 등 유연한 데모 환경을 구축했습니다.
멘티 앱 화면
Mentee App UI
화면 구성 요약
Screen Description
01멘토 대시보드: 학습 흐름·피드백 상태·미처리 항목 요약
02멘토 과제 등록: 날짜/과목/목표 기반 등록·반복 설정
03멘토 피드백 작성: 제출물 확인 + 템플릿 코멘트
04멘티 플래너: 캘린더·과제·코멘트·타임테이블 통합
05과제/피드백 상세: 과제 내용 + 피드백 한 화면
06알림: 과제 마감/피드백 등록 알림 제공
사용된 기술 스택
Engineering Stack
Frontend
React 19Vite 7React Router v7Tailwind CSSReact Hook FormLucide React
State
TanStack QueryZustand
Data & Export
Axioshtml2pdf.jsdocx
수행 역할 및 구현 포인트
My Contributions
Frontend Role
프론트엔드 개발 참여 (라우팅·권한 구조, 상태/데이터 분리, 리포트 내보내기, UI/UX 구현)