Plug Platform
SI 프로젝트 공통 모노레포 — 디자인 시스템 · API 계층
Role: Frontend 개발 (디자인 시스템 · 공통 API 계층)
Overview
여러 관제 SI 프로젝트가 각자 비슷한 컴포넌트와 API 호출을 복사해 쓰던 상황을 정리하기 위한 pnpm 워크스페이스 모노레포입니다. UI 디자인 시스템(@plug/ui), 공통 API 훅 계층(@plug/api-hooks), 도메인 서비스(@plug/common-services)를 패키지로 분리하고, 부산 사상하단선을 포함한 실제 프로젝트 앱이 이 패키지들을 가져다 쓰도록 구성했습니다. 2025년 4월부터 9월까지 PR 19건(머지 17건)을 올렸고, 컴포넌트 신규 구현부터 아토믹 구조 재편, HTTP 클라이언트 교체, 도메인 서비스 이관까지 담당했습니다.
이 프로젝트의 핵심
머지된 PR 17건 · +13,391 / −9,701줄 · 450개 파일 (2025.04
2025.09)
디자인 시스템 구축
Form·Input·Checkbox·Radio·Select·Slider·Sheet·Accordion·Table 등을 Storybook 스토리와 함께 패키지화
자체 폼 시스템
useForm 훅과 validationUtils를 직접 구현해 폼 상태·검증을 컴포넌트 밖으로 분리
아토믹 구조 재편
평면적이던 컴포넌트를 atom / molecule 계층으로 정리하고 shadcn 기반으로 전환
나머지 3개 더 보기접기
공통 API 클라이언트를 fetch에서 ky로 리팩토링
인터셉터·에러 처리·prefix URL을 한 곳으로 수렴
useApi · useSWRApi · useReducer 훅과 요청/응답 타입 체계를 api-hooks 패키지로 분리
도메인 서비스 공통화
auth·user·role·building·file 서비스를 common-services로 이관해 프로젝트 간 중복 제거
자세히
@plug/ui — 디자인 시스템5
Form·Input·InputText·Checkbox·Radio·Slider·Sheet·Accordion·Button·Dropdown·BreadCrumb·Label 구현 및 Storybook 스토리 작성
useForm 훅 + validationUtils를 직접 만들어 폼 상태와 검증 규칙을 컴포넌트에서 분리
프로젝트마다 폼 로직을 다시 짜지 않게 함
atom(Button·Input·Select·MultiSelect·Table·Textarea·Card·Badge·SearchInput·DropdownMenu·Avatar) / molecule(Form·AdminProfile) 계층으로 재편
shadcn 의존성을 도입해 접근성·동작이 검증된 프리미티브 위에 자체 스타일을 얹는 방향으로 전환
사이드바 접기/펼치기 아이콘, 프로필 아바타 등 관리자 화면용 공통 에셋 정리
@plug/api-hooks — 공통 API 계층4
fetch 기반 클라이언트를 ky로 리팩토링
재시도·에러 처리·prefix URL 설정을 클라이언트 한 곳에서 관리
일반 요청용 client와 파일 업로드용 fileClient를 분리해 헤더·바디 처리 차이를 호출부가 신경 쓰지 않게 함
useApi · useSWRApi · useReducer 훅과 request/response 타입을 함께 제공해 호출부에서 타입이 자동으로 따라오게 구성
PR #131에서 훅 로직 전면 개편(+2,042 / −467)
사용처가 늘어난 뒤 드러난 인터페이스 문제를 한 번에 정리
@plug/common-services — 도메인 서비스3
auth·user·user_admin·role·building·file 서비스를 패키지로 분리해 프로젝트별 중복 구현 제거
사상하단 프로젝트의 역사(station) 서비스를 common-services로 이관하고 토스트·confirm 처리를 함께 정리
인증 흐름 정비
로그인, 토큰 리프레시, 만료 처리, protected router, 리프레시 실패 시 로그아웃까지 연결
모노레포 운영3
pnpm 워크스페이스로 packages(ui · api-hooks · common-services · engine)와 apps(프로젝트별 앱)를 분리
husky + lint-staged로 커밋 시점 린트를 걸어 프로젝트 앱 기준 규칙을 강제
보일러플레이트 프로젝트 세팅(라우팅·린트) 정리로 새 SI 프로젝트의 출발선을 만듦