image.png

전체 기능 체험 · 고객 화면 데모

<aside> 📁

프리랜서가 프로젝트를 관리하고, 고객에게 진행 상황을 공유하며, 수정 요청까지 이어서 처리하는 서비스입니다.

내부 운영 정보와 고객에게 공개할 정보를 데이터 단계에서 나누는 데 중점을 두었습니다.

</aside>

왜 만들었나요?

외주 작업의 진행 상황과 입금 기록, 고객의 승인·수정 요청이 메신저와 문서, 파일에 흩어지면 다시 모아 정리해야 합니다. 고객사·프로젝트·작업·입금 기록을 한곳에 모으고, 고객 피드백을 후속 업무로 연결하기 위해 만들었습니다.

맡은 일

2026.07부터 진행 중인 개인 프로젝트로, 기획·사용 흐름·프론트엔드와 Supabase 데이터·권한 설계를 모두 맡았습니다.

React와 TypeScript로 화면을 구성하고, Supabase의 PostgreSQL로 데이터 관계와 접근 권한을 관리했습니다. 서버에서 가져오는 데이터는 TanStack Query로 관리했습니다.

주요 화면

portfolio-workfolio-overview.jpg

고객에게 공유되는 프로젝트 진행률·검수·피드백 데모 화면

회원가입 없이 샘플 프로젝트의 운영·공유·검수 흐름을 확인할 수 있습니다.

문제를 해결한 과정

1. 고객에게 보여줄 정보만 서버에서 반환

프로젝트에는 계약 금액·내부 메모·코드 백업처럼 고객에게 공개하면 안 되는 정보도 있습니다. 화면에서 감추는 데 그치지 않고, 공개 함수가 공개 설명·진행률·공개 작업·기록·공유 자료만 반환하도록 구성했습니다.

작성·수정할 때 공개 여부를 정하고, 고객은 로그인 없이 공유 링크로 확인하게 했습니다. 공유 링크의 원본 토큰은 저장하지 않고, 검증에 사용하는 해시 값을 저장했습니다.

2. 데이터마다 접근할 수 있는 사람을 제한

소유자·편집자·조회자 역할과 협업자의 프로젝트별 접근 범위를 나눴습니다. 각 데이터 행의 접근 권한을 검사하는 PostgreSQL RLS를 적용하고, 서버에서 실행되는 데이터베이스 함수인 RPC에서도 요청 사용자와 프로젝트 권한을 다시 확인했습니다.

3. 수정 요청을 처리할 작업으로 연결

고객의 댓글·승인·수정 요청을 구분하고, 수정 요청은 후속 작업으로 전환하도록 만들었습니다. 공개 답글과 내부 메모는 분리하고, 고객과 운영자가 같은 피드백 상태를 확인하도록 구성했습니다. 중요 파일은 업로드 시점별 버전을 보존했습니다.