01문제
사내 나눔을 게시판 댓글로 하면 누가 받기로 했는지 정리하기 어렵고, ESG 활동으로 보고할 숫자도 남지 않습니다.
Service 03공기업 사내 나눔 · 거래 플랫폼
챙겨가게
충당근 챙겨가게
다시 쓰이는 물건, 숫자로 쌓이는 탄소 절감
공기업 임직원끼리 안 쓰는 물건을 나누고 거래하는 사내 플랫폼. 등록 → 받고싶어요 요청 → 판매자 선정 → 거래 완료까지 처리하고, 거래된 물건의 무게로 CO₂ 절감량을 계산해 첫 화면에 누적해 보여줍니다.
받고싶어요 요청CO₂ 임팩트 집계실시간 알림관리자 · CSV
Overview
무엇을 풀었나
대상 — 공기업 임직원
02해결
물품마다 “받고싶어요” 요청을 받고 판매자가 선정 · 거절하는 흐름을 DB 함수(RPC)로 처리했습니다. 거래가 끝나면 무게 × 2.5kg으로 CO₂ 절감량을 기록하고, 물품이 지워져도 기록은 남겨 누적 통계(소나무 환산)를 보여줍니다.
03설계 포인트
기관 CI의 초록과 “충당근”의 주황을 그대로 가져왔습니다. 카드에서는 판매중 · 거래완료와 무료 나눔을 먼저 읽히게 했고, 모바일은 하단 탭 가운데에 등록 버튼을 둡니다.
Key features
핵심 기능
챙겨가게에서 눈여겨볼 3가지
01
ESG 임팩트를 첫 화면에
재사용 물품 수, CO₂ 절감량, 참여 임직원, 나눔 · 거래 완료 건수를 첫 화면에서 셉니다. 절감량은 소나무가 1년간 흡수하는 양으로 바꿔 한 문장으로 풀어 줍니다.
- 거래 완료 무게 × 2.5kg CO₂ · 소나무 환산
- 물품이 삭제돼도 임팩트 기록은 유지
02
등록부터 거래 완료까지
사진 0–5장(아이폰 HEIC는 JPEG로 변환 후 WebP로 압축), 카테고리 6종, 무료 나눔 체크, 무게를 입력해 등록합니다. 받고싶어요 요청이 오면 판매자가 메시지와 함께 선정하거나 거절하고, 상태 변화는 실시간 알림으로 전달됩니다.
- 요청 → 선정 · 거절 · 선정 취소 · 요청 취소
- 찜 · 조회수 · 카테고리 · 상태 필터 · 검색
03
모바일에서 바로 올리고 찾기
사무실 밖에서 사진을 찍어 바로 올리는 경우가 많아 모바일 화면을 먼저 다듬었습니다. 하단 탭(홈 · 물품 · 찜 · 마이)과 가운데 등록 버튼, 상단 검색을 고정했습니다.
- 하단 탭 · 가운데 등록 버튼
- 마이페이지 6탭(내 물품 · 받은/보낸 요청 · 찜 · 알림 등)
All screens
전체 화면 7장
화면은 실제 서비스 · 개발 서버를 띄워 직접 촬영했습니다. 실제 사내 데이터라 고객 기관명, 임직원 부서 · 이름, 담당자 연락처는 흐리게 처리했습니다. 화면을 누르면 전체 페이지를 볼 수 있어요.
서비스
401홈 · ESG 임팩트 02물품 둘러보기 03물품 상세 · 받고싶어요 04로그인 · 회원가입
모바일
301홈 · ESG 임팩트 02물품 둘러보기 03물품 상세 · 받고싶어요
Scope
구현 범위
화면 뒤에서 무엇이 돌아가는지, 숫자와 함께 정리했습니다.
9페이지
18서버 액션
6DB 테이블
19DB 마이그레이션
52컴포넌트
1E2E 거래 흐름 테스트
관리자 페이지
판매중 · 판매완료 · 삭제됨 · 회원별 4개 탭. 관리자 삭제와 복원, 회원별 등록 · 판매 · 구매 수와 CO₂, 회원 목록 CSV 내려받기.
배포 · 인수인계
GitHub → Vercel 자동 배포, Supabase 구성, 그리고 비개발자 담당자가 읽을 수 있게 쓴 운영자 매뉴얼을 함께 넘겼습니다.
기술 스택
반응형 웹 서비스 · 관리자 · 실서비스 배포
Next.js 16React 19SupabaseRealtimeTailwind CSS v4shadcn/uiPlaywrightVercel