2025.04 — 2025.09회사 프로젝트
Plug Platform
SI 프로젝트 공통 모노레포 — 디자인 시스템 · API 계층
- 맡은 일
- Frontend 개발 (디자인 시스템 · 공통 API 계층)
- 기간
- 2025.04 — 2025.09
- 소속
- 플럭시티DX 기술팀
여러 관제 SI 프로젝트가 각자 비슷한 컴포넌트와 API 호출을 복사해 쓰던 상황을 정리하기 위한 pnpm 워크스페이스 모노레포입니다. UI 디자인 시스템(@plug/ui), 공통 API 훅 계층(@plug/api-hooks), 도메인 서비스(@plug/common-services)를 패키지로 분리하고, 부산 사상하단선을 포함한 실제 프로젝트 앱이 이 패키지들을 가져다 쓰도록 구성했습니다.
2025년 4월부터 9월까지 PR 19건(머지 17건)을 올렸고, 컴포넌트 신규 구현부터 아토믹 구조 재편, HTTP 클라이언트 교체, 도메인 서비스 이관까지 담당했습니다.
핵심
- 01
머지된 PR 17건 · +13,391 / −9,701줄 · 450개 파일 (2025.04
2025.09)
- 02
디자인 시스템 구축
Form·Input·Checkbox·Radio·Select·Slider·Sheet·Accordion·Table 등을 Storybook 스토리와 함께 패키지화
- 03
자체 폼 시스템
useForm 훅과 validationUtils를 직접 구현해 폼 상태·검증을 컴포넌트 밖으로 분리
- 04
아토믹 구조 재편
평면적이던 컴포넌트를 atom / molecule 계층으로 정리하고 shadcn 기반으로 전환
나머지 3개 더 보기접기
- 05
공통 API 클라이언트를 fetch에서 ky로 리팩토링
인터셉터·에러 처리·prefix URL을 한 곳으로 수렴
- 06
useApi · useSWRApi · useReducer 훅과 요청/응답 타입 체계를 api-hooks 패키지로 분리
- 07
도메인 서비스 공통화
auth·user·role·building·file 서비스를 common-services로 이관해 프로젝트 간 중복 제거
화면
Pl. 2of2
실제 운영 화면입니다. 손님·직원의 이름과 CCTV에 잡힌 이용객은 알아볼 수 없게 처리했고, 내부 접속 주소는 잘라냈습니다.
자세히
궁금한 항목을 펼치면 그때 무엇이 문제였고 어떻게 판단했는지 나옵니다.
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 의존성을 도입해 접근성·동작이 검증된 프리미티브 위에 자체 스타일을 얹는 방향으로 전환
사이드바 접기/펼치기 아이콘, 프로필 아바타 등 관리자 화면용 공통 에셋 정리
fetch 기반 클라이언트를 ky로 리팩토링
재시도·에러 처리·prefix URL 설정을 클라이언트 한 곳에서 관리
일반 요청용 client와 파일 업로드용 fileClient를 분리해 헤더·바디 처리 차이를 호출부가 신경 쓰지 않게 함
useApi · useSWRApi · useReducer 훅과 request/response 타입을 함께 제공해 호출부에서 타입이 자동으로 따라오게 구성
PR #131에서 훅 로직 전면 개편(+2,042 / −467)
사용처가 늘어난 뒤 드러난 인터페이스 문제를 한 번에 정리
쓴 기술
링크
이어서 볼 것
플럭시티에서 한 다른 프로젝트