IMJW
Projects

멘토링 기반 학습 플랫폼

Mentoss

멘토와 학습자를 연결하는 서비스로, 강의 탐색, 질문, 메시지, 알림, 프로필 등 학습 커뮤니티 흐름을 다루는 프로젝트입니다.

2025GitHub
Mentoss cover

Role.

  • 프론트엔드 라우팅 및 화면 구조 설계
  • 강의, 질문, 메시지, 프로필 중심 사용자 흐름 구성
  • 백엔드 API 연동 환경 분리
  • 에디터 기반 콘텐츠 작성 화면 구성

Architecture.

  • React/Vite 기반 프론트엔드에서 페이지별 라우팅을 구성했습니다.
  • 로컬 Spring Boot 서버와 배포 서버 API를 환경별로 분리해 연결할 수 있도록 구성했습니다.
  • 강의 상세, 검색, 질문, 메시지, 마이페이지 등 기능 단위로 화면을 분리했습니다.

Gallery.

Mentoss architecture
Service architecture
Mentoss logo
Project identity

Key Work.

  • React Router 기반 주요 페이지 라우팅 구성
  • 강의 등록, 강의 상세, 강의 검색 화면 구성
  • 질문, 메시지, 알림, 프로필 관련 화면 흐름 정리
  • Tiptap 기반 텍스트 에디터 적용
  • Axios 기반 API 클라이언트와 환경별 서버 URL 분리

Troubleshooting.

Problem

로컬 개발 서버와 배포 서버 주소가 다르기 때문에 API 요청 주소가 환경마다 달라지는 문제가 있었습니다.

Root Cause

프론트엔드 코드에서 API base URL을 고정하면 로컬 테스트와 배포 검증을 반복할 때 설정 변경이 필요했습니다.

Action

환경 변수 기반으로 API URL을 분리해 로컬과 배포 환경을 전환할 수 있는 구조로 정리했습니다.

Stack.

React / Vite / JavaScript / MUI / Axios / Zustand / Tiptap / Spring Boot

Learning.

  • 기능이 많은 서비스일수록 라우팅, 상태, API 계층을 명확히 분리해야 유지보수가 쉬워집니다.
  • 포트폴리오 프로젝트 상세 페이지에는 화면 이미지와 아키텍처 이미지를 함께 남기면 서비스 맥락을 더 빠르게 전달할 수 있습니다.