01문제
헌혈증은 매매가 금지돼 있어, 필요한 사람과 가진 사람이 만날 공식 통로가 없습니다. 게시판 글만으로는 누가 언제 실제로 전달했는지도 남지 않습니다.
Service 01헌혈증 나눔 매칭 플랫폼
피움
PIUM
헌혈증이 필요한 사람과 가진 사람을 잇다
헌혈증은 사고팔 수 없습니다. 피움은 환자 · 보호자가 요청을 올리면 헌혈증을 가진 사람이 1:1 채팅으로 연락하고, 수령 확인을 거쳐 기부를 확정하는 무료 나눔 플랫폼입니다.
조건별 요청 목록실시간 1:1 채팅기부 확정 흐름신고 · 관리자
Overview
무엇을 풀었나
대상 — 헌혈증이 필요한 환자 · 보호자, 헌혈증을 가진 헌혈자
02해결
요청 글에 혈액형 · Rh · 헌혈 종류 · 긴급도 · 지역 · 마감일을 구조화해 걸러 볼 수 있게 했고, 연락은 사이트 안 1:1 채팅으로 합니다. 채팅 안에서 수령 확인 요청 → 기부자 수락을 거치면 기부 이력과 알림이 남습니다.
03설계 포인트
코랄 레드 한 색을 포인트로, 나머지는 흰 바탕과 회색 위계로 정리했습니다. 긴급 · 마감은 배지로만 구분해 목록 전체가 붉게 물들지 않게 했습니다.
Key features
핵심 기능
피움에서 눈여겨볼 4가지
01
조건으로 거르는 헌혈 요청
혈액형(A · B · O · AB)과 헌혈 종류(전혈 · 혈소판 · 혈장), 긴급도, 지역으로 요청을 좁혀 봅니다. 요청을 누르면 혈액형 · 헌혈 종류 · 지역 · 마감일을 카드로 보여주고, “채팅으로 돕기”로 바로 대화를 엽니다.
- 긴급도 3단계 · 17개 시도 지역 · 마감 D-day
- 상단 긴급 배너가 위급 · 긴급 요청을 차례로 띄움
02
실시간 1:1 채팅과 기부 확정
채팅창 위에는 연결된 요청(긴급도 · 혈액형 · 병원)이 고정되고, 오른쪽에는 상대의 요청 · 기부 횟수와 혈액형이 보입니다. 헌혈증을 받은 쪽이 수령을 확인하면 “기부 확정 요청” 카드가 뜨고, 기부자가 수락하면 기부 이력과 알림이 남습니다.
- Supabase Realtime · 읽음 표시 · 안 읽은 메시지 배지
- 방 목록 필터(요청 · 안 읽음 · 진행 중 · 즐겨찾기) · 사용자 차단
03
매매를 막는 안내와 신고
헌혈증 매매는 혈액관리법 위반입니다. 채팅방에 처음 들어가면 처벌 조항을 담은 안내를 띄우고, 대화 중에도 상단에 매매 금지 · 신고 안내를 고정해 둡니다. 거래를 유도하는 상대는 사유를 골라 바로 신고할 수 있습니다.
- 첫 진입 안내(세션당 한 번) · 상단 고정 안내
- 신고 사유 선택 · 관리자 신고 처리
04
처음 온 사람에게 절차부터
랜딩은 “사연 등록 → 직접 소통 → 무료 전달” 세 단계로 이용 방법부터 보여주고, 자주 묻는 질문은 법적 안전성 · 이용 방법 · 보안 등 카테고리로 나눴습니다.
- 이용 절차 3단계 · 실시간 나눔 피드
- FAQ 카테고리 필터 · 아코디언
All screens
전체 화면 20장
화면은 실제 서비스 · 개발 서버를 띄워 직접 촬영했습니다. 운영 DB 대신 시연용 데이터(가상의 닉네임 · 사연)를 넣은 로컬 서버에 붙여 긴급 배너 · 요청 · 커뮤니티 · 채팅까지 촬영했습니다. 화면을 누르면 전체 페이지를 볼 수 있어요.
서비스
501홈 · 긴급 배너 02헌혈 요청 목록 · 필터 03요청 상세 · 채팅으로 돕기 04커뮤니티 05로그인 · 회원가입(이메일 · 카카오)
채팅
306채팅 · 매매 금지 안내 07채팅 · 기부 확정 요청 08채팅 · 상대 정보
안내 · 고객 지원
309자주 묻는 질문 10제휴존 11고객센터 · 1:1 문의
회사 소개
312회사 개요 13사업 분야 14협력사
모바일
601홈 · 긴급 배너 02헌혈 요청 목록 · 필터 03채팅 목록 04채팅방 · 기부 확정 요청 05자주 묻는 질문 06회사 개요
Scope
구현 범위
화면 뒤에서 무엇이 돌아가는지, 숫자와 함께 정리했습니다.
37페이지
(사용자 22 · 관리자 15)
(사용자 22 · 관리자 15)
84API 라우트
27DB 테이블
65DB 마이그레이션
관리자 페이지 15종
회원 기간 정지 · 역할 변경, 게시글 · 요청 복원과 영구 삭제, 신고 처리와 관리자 메모, 1:1 문의 답변, 감사 로그 CSV, 접속 로그 보관 기간 설정(pg_cron 자동 삭제).
인증 · 보안
이메일 · 카카오 로그인, 정지 계정 강제 이동, CSP 보안 헤더, API 레이트 리밋, 게시글 HTML 정화(DOMPurify), 닉네임 욕설 필터.
기술 스택
반응형 웹 서비스 · 관리자
Next.js 16React 19TypeScriptSupabaseRealtimeTailwind CSS v4Radix UIZod