트라이얼인포매틱스

의약품 이상사례 관리와 규제기관 보고를 지원하는 약물감시 솔루션 Csafer의 프론트엔드 개발을 담당하고 있습니다. 신규 버전인 Csafer 2.0의 프론트엔드를 단독으로 설계·개발하며, 기존 서비스의 유지보수와 운영 안정화를 함께 수행하고 있습니다.

---

Csafer 2.0 신규 프론트엔드 개발

• Next.js·React·TypeScript 기반 단독 개발
  Next.js App Router와 React, TypeScript를 기반으로 프로젝트 초기 구성부터 공통 구조 설계, 화면 구현 및 API 연동까지 프론트엔드 개발 전반을 담당하고 있습니다.

• 공통 컴포넌트 및 복잡한 입력 화면 설계
  Ant Design과 Tailwind CSS를 활용해 공통 UI와 레이아웃을 구성했습니다. 입력 유형·필수값·노출 조건을 메타데이터로 정의해 다양한 입력 화면에서 재사용하는 구조를 구현하고, 반복 입력과 유효성 검증, 변경사항 감지 및 저장 충돌 처리를 개발했습니다.

• 서버 상태 관리와 비동기 처리
  TanStack Query로 API 데이터 조회·캐시·갱신을 관리하고, Zustand로 클라이언트 상태를 분리했습니다. 장시간 실행되는 작업의 상태를 폴링으로 추적하고, 화면 재진입 시 진행 상태 복원과 완료 후 데이터 갱신을 처리했습니다.

• 테스트 환경 구축 및 회귀 오류 방지
  Vitest와 Testing Library로 주요 로직과 컴포넌트 동작을 검증하고, MSW 기반 API 모킹과 Playwright 기반 E2E 테스트 환경을 구성했습니다. 복잡한 입력·저장 흐름과 사용자 상호작용에 대한 테스트를 작성했습니다.

• 다국어 및 사용자 경험 개선
  next-intl 기반 한국어·영어 다국어 환경을 구축했습니다. 인증과 역할별 접근 제어 UI를 구현하고, 미저장 상태의 페이지 이탈 확인과 취소 시 원본 복원 등 데이터 유실을 방지하는 사용자 흐름을 개발했습니다.

• AI를 활용한 개발 워크플로 개선
  Claude Code를 활용해 반복적인 코드 작성·리팩터링·테스트 작성을 보조하고, 프로젝트 구조와 코딩 규칙을 문서화해 일관된 작업을 지원했습니다. Playwright 기반 데모 영상 제작 과정을 재사용 가능한 스킬로 구성해 반복 촬영과 점검 작업을 자동화했습니다. AI가 생성한 코드는 변경사항 검토와 테스트를 통해 검증하며 활용했습니다.

---

기존 서비스 유지보수 및 운영 개선

• React 기반 서비스 안정화 및 성능 개선
  입력값과 저장 데이터의 불일치, 회사 전환 시 캐시 오류 등 운영 문제를 수정했습니다. 반복 입력 영역의 상태 동기화와 테이블 렌더링을 개선해 항목이 많은 화면의 입력 지연을 완화하고, 운영 요구사항에 따른 기능을 추가했습니다.
• Sentry 기반 오류 모니터링 개선
  오류 추적에 필요한 API·사용자 컨텍스트와 Session Replay를 보강했습니다. 세션 만료와 일시적인 네트워크 오류 등 불필요한 수집을 줄이고, Error Boundary와 오류 복구 UI를 개선했습니다.
• GitHub Actions·Claude 기반 오류 대응 자동화
  Sentry에서 수집한 오류를 GitHub Actions와 Claude로 연결해 오류 수준에 따른 자동 분석, 이슈 생성 및 수정 PR 생성 흐름을 구축했습니다.
• AWS CodeCommit에서 GitHub로 저장소 이전
  AWS의 CodeCommit 신규 고객 이용 제한 발표를 계기로 장기 운영 리스크에 대응하기 위해, Csafer 소스 코드 저장소를 GitHub로 이전했습니다.