플러스프로젝트 배경
1) 문제점 - AI 생성 서비스 관리자 페이지의 344개 이상 컴포넌트가 일관된 디자인 체계 없이 개발되어 UI 불일치 발생 - 컴포넌트 간 반복 로직이 산재하여 유지보수 비용 증가 및 개발 속도 저하 - 코드 리뷰 프로세스가 수동으로 진행되어 팀 내 컨벤션 준수 미흡 2) 프로젝트 목표 - 디자인 시스템 기반 공통 컴포넌트 라이브러리 구축으로 UI 일관성 확보 - Turborepo monor
프로젝트 성과
디자인 시스템 기반 컴포넌트 라이브러리 구축
MUI 의존 탈피, Headless UI + shadcn/ui 기반 재사용 컴포넌트 체계 구축. TanStack Table 활용 고급 데이터 테이블 구현
AI 코드 리뷰 자동화로 코드 품질 관리 체계 구축
AI 코드 리뷰 봇 도입으로 PR 리뷰 시간 단축. ESLint 커스텀 룰 + FSD 구조 적용으로 팀 내 코드 컨벤션 준수율 향상
핵심 기능
디자인 시스템 컴포넌트
Headless UI + shadcn/ui 기반 재사용 컴포넌트. TanStack Table 정렬/필터/페이지네이션, Zustand + React Query 상태 관리
진행 단계
프로젝트 구조 설계 및 monorepo 구축
2025.01.
FSD 구조 설계, Turborepo monorepo 구축, 공통 패키지(@types, @utils, @ui) 분리 및 npm workspaces 설정
프로젝트 상세
1) 서비스 소개 AI 생성 서비스의 관리자 페이지 프론트엔드 유지보수 및 신규 기능 개발을 담당했습니다. 디자인 시스템 기반 컴포넌트를 구현하고 AI 코드 리뷰 봇을 도입하여 팀 내 코드 품질 관리를 자동화했습니다. 2) 작업 범위 - Front-End 개발 (React + TypeScript + Next.js) - Turborepo 기반 monorepo 구조에서 의존성 관리 및 구조 통일 -
