01 / 06
01
대시보드
캐릭터 현황, 이번 달 흐름, 최근 기록을 한눈에 보여주는 메인 허브 화면입니다. 현재 플레이 상태와 핵심 지표를 빠르게 확인할 수 있습니다.
02 / 06
02
사냥
재획 기록을 날짜별로 정리하고, 사냥 시간과 수익을 한 번에 관리하는 사냥 화면입니다. 기록을 쌓을수록 누적 흐름을 보기 쉽게 구성했습니다.
03 / 06
03
지출 장부
아이템 구매나 강화비처럼 게임 내 지출을 따로 기록하는 지출 장부 화면입니다. 월별, 날짜별로 정리해 실제 순자산 흐름을 파악할 수 있습니다.
04 / 06
04
수익 분석
사냥, 보스, 보스 드랍템 수익을 기간별로 비교하고 통계로 확인하는 수익 분석 화면입니다. 주간, 월간 성과를 통해 플레이 패턴을 분석할 수 있습니다.
05 / 06
05
보스
주간 보스와 월간 보스를 캐릭터별로 관리하고, 드랍템 수익까지 함께 기록하는 보스 관리 화면입니다. 일반 보스 수익과 물욕템 수익을 분리해 더 정확하게 볼 수 있습니다.
06 / 06
06
목표 관리
여러 목표를 등록하고 우선순위를 조절하면서 진행률을 관리하는 목표 관리 화면입니다. 목표가 앞에서부터 자동으로 채워지도록 설계해 흐름을 직관적으로 볼 수 있습니다.
한눈에 보기
메이플스토리의 재획, 보스, 지출, 목표를 하나의 대시보드에서 관리하는 기록 웹앱
역할
Full-stack
범위
10개
//핵심 포인트5개
01
캐릭터별 최근 7일 경험치 히스토리를 자동 저장해 성장 흐름을 한눈에 확인
02
보스 일반 수익과 물욕템 수익을 분리 관리하고 분석 화면에서 함께 집계
03
목표를 드래그로 우선순위 정렬하고 앞에서부터 자동 채움되도록 구성
04
로컬 IndexedDB 저장과 Supabase 서버 동기화를 함께 지원
05
인벤 커뮤니티 피드백을 반영해 캐릭터 관리, 수정/삭제, 지출, 드랍템 기능을 반복 개선
//기술 스택10개
//FRONTEND(5)
탭을 바꿔가며 역할과 설명을 한 범주씩 확인할 수 있습니다.
Next.js (App Router)
도구(Utility)Next.js (App Router)을(를) 프로젝트의 안정성과 구현 속도를 위해 활용했다.
TypeScript
타입 안정성API 응답/컴포넌트 Props 계약을 타입으로 고정해 런타임 오류를 줄이고 협업 시 실수를 예방했다.
React
UI 상태/컴포넌트상태 변화에 따라 UI를 컴포넌트 단위로 조합하고, 재사용 가능한 화면 구조로 유지보수를 쉽게 했다.
Zustand
UI 상태 엔진페이지 간 공유되는 UI 상태(오버레이·사이드바·카드 확장 등)를 가볍고 예측 가능한 스토어로 관리해 인터랙션의 연속성을 유지했다.
Tailwind CSS
디자인 시스템/스타일토큰(색/타이포/간격)과 유틸 기반으로 스타일 규칙을 표준화해 화면 간 일관성을 유지했다.