대표 프로젝트
Emissions Dashboard
국가·기업별 샘플 배출량을 여러 차트로 살펴볼 수 있는 대시보드입니다.
- 역할
- 개인 프로젝트 · 대시보드 UI와 데이터 흐름 구현
- 기술
- Next.js 15 (App Router) · React 19 · TypeScript · Tailwind CSS · Zustand · Recharts
문제
배출량의 추이·구성·목표를 여러 관점으로 보여주면서, 데이터 조회와 메모 저장의 로딩·실패 상태를 구분할 필요가 있었습니다.
주요 기여
- 월별 추이, 에너지원 비중, 누적 막대, Top N, 목표 대비 실제 차트를 구성하고 단위 변환과 기간·목표 설정 UI를 연결했습니다.
- Zustand에서 데이터·UI·환율 설정 상태를 나누고, 조회 오류와 저장 오류를 별도로 관리했습니다.
- 메모 저장의 낙관적 갱신·실패 시 롤백·토스트 재시도 경로와 섹션별 스켈레톤을 구현했습니다.
- 환율 Route Handler에 외부 API 조회와 실패 시 USD/KRW 기본값 반환을 구현했습니다.
결과
- 다섯 종류의 차트와 국가·기업 상세 화면을 갖춘 공개 데모를 구성했습니다.
- 지연과 저장 실패를 발생시키는 샘플 API로 로딩·저장·오류 UI를 실험할 수 있게 했습니다.
검증 범위와 한계
- 배출량은 샘플 데이터를 사용하고, 메모는 메모리에 임시 저장합니다. 실서비스 데이터 수집과 서버 영구 저장은 포함하지 않았습니다.
- 환율 API 실패 시 기본값을 사용하므로 실제 환율이나 세금 계산의 정확성을 보장하지 않습니다.
- 실서비스 규모에서의 성능 지표는 측정하지 않았습니다.