WORKFOLIO

문제

고객 검수에 필요한 진행 상황과 자료를 공유하면서도, 내부 메모·계약 정보·코드 백업은 별도로 관리할 경계가 필요했습니다.

제약

• 고객은 로그인 없이 공유 링크로 접근하므로 관리 화면의 버튼을 숨기는 것만으로는 공개 범위를 구분할 수 없음
• 공개 체험에는 샘플 데이터를 사용하며 실제 고객 정보와 운영 데이터는 공개하지 않음

주요 사용자

• 여러 외주 프로젝트를 운영하는 프리랜서
• 프로젝트에 참여하는 소규모 협업자
• 공유 링크에서 결과물을 검수하는 고객

핵심 결정

• 화면에서 내부 정보를 가리는 대신 공개 함수가 반환할 필드를 별도로 정의
• 공유 링크 토큰은 해시값으로 검증하고 공개 여부와 만료일을 설정할 수 있도록 구성
• Callable Function에서 UID·프로젝트 권한을 확인하고 Firestore·Storage Rules로 직접 접근 범위를 제한

구현

• 작업·자료 작성과 수정 시 고객 공개 여부를 선택하고 고객 화면에는 검수에 필요한 내용만 표시
• 고객의 댓글·승인·수정 요청을 구분하고 운영자가 원문과 담당자·기한·처리 상태를 함께 관리
• 공개 답글과 내부 메모를 분리하고 변경 이후 관련 TanStack Query 데이터를 갱신
• 관리 화면과 고객 공유 화면을 함께 살펴볼 수 있는 브라우저 전용 샘플 체험 제공

주요 화면

검증 방법

• 공개 데모에서 같은 프로젝트의 관리 화면과 고객 공유 화면을 각각 확인할 수 있습니다.
• 기술 기록에 공개 스냅샷의 반환 필드, 공유 토큰 해시 검증, Callable Function의 UID·프로젝트 권한과 Firestore·Storage Rules를 정리했습니다.
• 체험 변경은 현재 브라우저에만 저장되며 실제 Firebase 데이터와 고객 전달 흐름에서 분리됩니다.

결과

• 내부 운영 기록과 고객 공개 정보를 구분한 상태에서 프로젝트 관리·고객 검수·수정 작업을 연결

현재 개발 상태

실제 계정용 워크스페이스와 로그인 없는 고객 화면을 제공하며, 샘플 데이터 기반 체험 모드는 변경 내용을 현재 브라우저에만 저장하도록 운영하고 있습니다.

한계와 다음 개선

• 기능이 늘면서 흐려진 우선순위를 정리하고 고객 검수와 수정 작업 전환을 먼저 다듬을 예정

기술 기록과 근거

• 고객에게 공개되는 화면 체험 (새 창)
• 공개 범위·권한 설계와 화면 비교 (새 창)

사용 기술

• React 19
• TypeScript
• Vite 8
• TanStack Query
• Firebase Auth
• Firestore
• Cloud Functions
• Firebase Storage
• Firebase Hosting