DealDesk

외주 작업은 문의, 제안, 진행중, 검수, 완료로 흘러가지만 이 과정의 기록과 정산 금액은 여기저기 흩어지기 쉽습니다. 어떤 건이 얼마짜리인지, 언제 마감인지, 이번 달에 얼마가 들어오는지를 한 화면에서 보기가 어려웠습니다. DealDesk는 이 흐름을 프로젝트 단위로 관리하고, 로그인하면 이번 달 예상 정산액과 마감이 임박한 건이 바로 보이게 만들었습니다.

프레임워크는 Next.js 16 App Router, React 19, TypeScript, 스타일은 Tailwind v4를 사용했습니다. 백엔드는 Supabase — Auth로 로그인을 처리하고 PostgreSQL에 Row Level Security를 걸어 모든 행 접근을 본인으로 제한했습니다. Next.js 16에서 middleware.ts가 proxy.ts로 바뀐 변화에 맞춰 세션 갱신을 proxy.ts에서 처리하고, 서버 컴포넌트의 getUser() 호출로 한 번 더 인증을 확인하는 이중 가드를 뒀습니다. 차트는 Recharts를 사용했습니다. 로컬에 Docker가 없는 환경이라 Supabase는 클라우드 무료 프로젝트를 선택했습니다.

세부 완성도에도 기준을 뒀습니다. 다크모드에서 항상 어두워야 하는 요소는 테마 토큰과 분리해 고정 색으로 처리했고, 테마 초기화는 하이드레이션 경고가 나지 않도록 시스템 선호는 CSS 미디어쿼리로, 수동 토글은 effect로 나눴습니다. 환경변수가 없으면 빌드가 실패하는 대신 설정 안내 화면이 뜨도록 했고, 배포 전 점검에서 nosniff·X-Frame-Options 같은 보안 헤더를 확인해 추가했습니다.

아래 데모는 정적 호스팅(GitHub Pages)에 맞춰 인증 가드와 데이터 호출을 클라이언트로 이식한 버전입니다. 행 단위 접근 제한은 서버측 RLS가 그대로 강제합니다.