← 포트폴리오 목록

임상 검토 워크스페이스 안정화 의료진 화면

기존 Next.js·Supabase 기반 임상 검토 도구를 의료진과 발주자가 직접 확인하는 화면으로 구성한 프로젝트입니다.

프로젝트 납품 요약

아래 프로젝트 개요와 핵심 기능에서 구현 화면을 확인할 수 있습니다.

서비스 타입Web
업종헬스케어
기술 스택
Next.jsTypeScriptTailwind CSSSupabasePostgreSQLVercelGitHubClaude Code
주요 기능
  • 홈
  • 내 증례
  • 추천 결과
  • 환경·배포

프로젝트 개요

범위: 개발, 디자인, 기획

기존 Next.js·Supabase 기반 임상 검토 도구를 의료진과 발주자가 직접 확인하는 화면으로 구성한 프로젝트입니다. 로그인한 사용자의 비식별·합성 증례만 보이는 접근 제한, 임상 입력·OCR 확인·추천 결과 조회 흐름, 저장 입력과 추천 결과의 일관성 표시, 개발·테스트·운영 환경과 자동 점검, Preview 시험 배포와 운영 배포 승인, 이전 정상 버전 복구까지 한 흐름으로 보여 드립니다. 추천 알고리즘은 변경 금지 보호 영역으로 표기하며 이 데모는 그 내부를 바꾸지 않습니다.

작업 범위

  • 홈: 로그인한 의료진이 자신의 비식별·합성 증례와 접근 범위, 환경 상태를 첫 화면에서 확인합니다
  • 내 증례: 의료진이 자신의 증례를 만들고 목록·상세로 다시 조회하며 첨부 파일 접근 범위도 확인합니다
  • 추천 결과: 저장된 입력과 기존 추천 엔진 결과가 서로 맞는지 항목별로 확인합니다
  • 환경·배포: 개발·테스트·운영 환경과 자동 점검 결과, Preview 시험 배포, 운영 배포 승인 대기를 확인합니다

주요 업무

  • 홈 화면: 내 증례 목록과 접근 범위 카드를 한 화면에 두고 타인 기록 요청 시 차단 안내를 같은 카드 안에서 보여 줍니다
  • 내 증례 화면: 저장과 재조회 경로를 정비한 목록·상세 화면과 새 증례 등록 대화상자를 구성합니다
  • 추천 결과 화면: 기존 임상 입력 요약과 추천 결과 3건, 일치 검증 6항목을 나란히 두고 추천 알고리즘은 변경 금지 보호 영역으로 표기합니다
  • 환경·배포 화면: 승인 대기 배포를 열어 시험 결과를 보고 승인 또는 반려하며, 비밀 값은 개수만 표시합니다
임상 검토 워크스페이스 안정화 의료진 화면
요구사항 정의

프로젝트 핵심 과제

프로젝트 진행 시 해결한 핵심 기술 과제입니다.

기존 증례 테이블과 저장 경로를 바꾸지 않고 RLS 정책만 더해야 해 기존 조회가 막히지 않

정책별 확인 시험이 필요합니다

추천 결과 저장본과 입력 저장본의 시점이 다를 수

일치 검증 기준을 항목별로 정해 둘 필요가 있습니다

발주자 소유 Supabase·Vercel 프로젝트 권한 초대가 선행되어야 환경 분리를 확인할 수

초대 절차를 함께 안내합니다

구현 내용

핵심 기능 상세

핵심 기능 1

홈

로그인한 의료진이 자신의 비식별·합성 증례와 접근 범위, 환경 상태를 첫 화면에서 확인합니다. 내 증례 목록과 접근 범위 카드를 한 화면에 두고 타인 기록 요청 시 차단 안내를 같은 카드 안에서 보여 줍니다.

  • Supabase Auth 세션으로 로그인 사용자와 관리자·일반 권한을 구분하는 상단 계정 영역 구현
  • RLS 정책 기준으로 본인 증례만 조회되는 목록 쿼리와 타인 기록 요청 시 403 안내 화면 설계
  • Next.js 서버 API 가드의 응답 코드(401·403·200)를 접근 결과 목록에 연결

화면에서 보이는 허용·차단 결과를 RLS 정책과 서버 API 가드 응답으로 그대로 보여 주는 구조를 설계합니다.

홈
홈 실제 화면
핵심 기능 2

내 증례

의료진이 자신의 증례를 만들고 목록·상세로 다시 조회하며 첨부 파일 접근 범위도 확인합니다. 저장과 재조회 경로를 정비한 목록·상세 화면과 새 증례 등록 대화상자를 구성합니다.

  • Supabase PostgreSQL 증례 테이블의 저장·재조회 경로를 하나의 데이터 접근 모듈로 정리
  • Supabase Storage 버킷 정책에 맞춘 본인 파일만 여는 첨부 목록 구현
  • 검색·진단군·상태 칩을 URL 쿼리와 동기화한 목록 구현

비식별·합성 증례만 다루는 저장·재조회 흐름을 시험 가능한 구조로 정리합니다.

내 증례
내 증례 실제 화면
핵심 기능 3

추천 결과

저장된 입력과 기존 추천 엔진 결과가 서로 맞는지 항목별로 확인합니다. 기존 임상 입력 요약과 추천 결과 3건, 일치 검증 6항목을 나란히 두고 추천 알고리즘은 변경 금지 보호 영역으로 표기합니다.

  • 저장 입력 해시와 추천 결과 저장본을 대조하는 일관성 검증 함수 구현
  • 검증 항목별 통과·불일치 상태를 서버 응답에서 받아 표시
  • 추천 엔진 호출부는 기존 인터페이스만 사용하고 내부는 수정하지 않는 경계 설계

추천 엔진 내부는 건드리지 않고 입력 저장과 결과 저장의 일치만 검증하는 경계를 만듭니다.

추천 결과
추천 결과 실제 화면
핵심 기능 4

환경·배포

개발·테스트·운영 환경과 자동 점검 결과, Preview 시험 배포, 운영 배포 승인 대기를 확인합니다. 승인 대기 배포를 열어 시험 결과를 보고 승인 또는 반려하며, 비밀 값은 개수만 표시합니다.

  • Vercel 환경별 변수 세트와 Supabase 프로젝트를 개발·테스트·운영으로 분리한 구성 표시
  • GitHub Actions 빌드·타입 검사·핵심 시험 결과를 점검 행으로 표시
  • 운영 배포는 승인 기록이 있어야 진행되는 승인 대화상자 구현

환경 분리와 승인 절차를 화면에서 따라가며 확인할 수 있게 구성합니다.

환경·배포
환경·배포 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

기존 구조 점검과 접근 범위 정리 · 2026.11

Next.js·Supabase 구조 점검, 증례·파일 접근 대상 목록 정리, 보호 영역 경계 확정

STEP 2

로그인·권한과 증례 접근 화면 구현 · 2026.11

Supabase Auth 세션, 관리자·일반 권한 구분, 본인 증례만 보이는 목록·상세 화면 구현

STEP 3

입력·OCR 확인·추천 결과 흐름 개선 · 2026.11

기존 입력 화면과 OCR 확인표 정비, 저장 입력과 추천 결과 일치 검증 표시 구현

STEP 4

환경·배포·복구 확인 화면 구현 · 2026.11

환경 카드, 자동 점검 행, 승인 대화상자, 이전 정상 버전 복구 화면 구현

개발 결과

본인 증례만 보이는 조회 구조 설계RLS 정책과 서버 API 가드를 같은 기준으로 맞춰 목록·상세·첨부 파일 3곳의 접근 범위를 일치시키는 구조를 설계합니다
저장 입력·추천 결과 일치 검증 구현입력 해시와 결과 저장본을 대조하는 6항목 검증 함수를 구현하고 추천 엔진 내부는 호출 경계만 사용합니다
복구 절차 확인 화면 구축이전 정상 버전 선택, 복구 확인 대화상자, 복구 후 시험 결과 4행을 한 흐름으로 확인하는 화면을 구축합니다
승인 기반 배포 확인 화면 구축자동 점검 결과가 통과한 배포만 승인할 수 있는 대화상자와 승인 이력 기록 구조를 구축합니다

기술적 주안점

  • 화면에서 보이는 허용·차단 결과를 RLS 정책과 서버 API 가드 응답으로 그대로 보여 주는 구조를 설계합니다
  • 비식별·합성 증례만 다루는 저장·재조회 흐름을 시험 가능한 구조로 정리합니다
  • 추천 엔진 내부는 건드리지 않고 입력 저장과 결과 저장의 일치만 검증하는 경계를 만듭니다

유사한 프로젝트를 기획하고 계신가요?

필요한 기능과 일정을 알려주시면 개발 범위를 함께 정리하겠습니다.

프로젝트 문의