이력서

업무

• turborepo, pnpm, rollup, typescript, react, vanilla-extract, storybook, vitest 기술 점검 및 선택
• 디자인시스템을 통해 기획자들이 공통 컴포넌트를 참고 및 사용해서 기획문서를 작성할 수 있도록 가이드하고, 이를 통해 의사소통 비용을 줄이며 상대적으로 완성된 기획서를 얻을 수 있는 효과를 기대.
• 기간계 디자인 시스템 구축 리딩
  • 코딩 컨벤션 정의
    • 컴포넌트 파일명 : PascalCase vs KebabCase → KebabCase
    • 컴포넌트 선언 : 익명함수표현식 vs 기명함수선언식 → 기명함수선언식
    • 내보내기 : named export vs default export → named export
    • barrel index 사용여부 → 사용
• 디자인시스템 패키지 구조를 설계 및 정의
  • eslint 커스텀 정의
  • icons 패키지 정의
    • svg 아이콘을 @svgr/cli 를 활용하여 자동 생성
  • design-system 패키지 정의
    • CSS-in-JS vs vanilla-extract → vanilla-extract
      • React Server Componet 에서 원활한 사용을 위해 build 타임에 css를 추출해주는 vanilla-extract 선택
      • tailwind 는 클래스명의 길어짐으로 인한 팀원들의 불호와 props 에 따른 스타일을 좀 더 효율적으로 관리되는 vanilla-extract 로 채택
  • storybook 패키지 정의
    • UI 구성 요소를 독립적으로 개발하고 디자인 시스템 패키지에 종속적으로 관리하지 않기 위해 분리
    • icons 패키지와 design-system 패키지를 참조
• 번들 환경 구성
  • 최초 rollup 으로 구성 → vite 환경으로 변경
• 공통 디자인 요소 토큰화
  • 각 컴포넌트가 공통으로 사용할 스타일 css 토큰화
    • opacity, border, space, neutral color, brand color, accent color 등을 사전 정의
    • vanilla-extract 를 통해 global 에 위에서 생성한 토큰 변수를 생성
    • atomic 한 css 사용을 위한 sprinkles 정의
• 컴포넌트 개발
  • 탭 메뉴 컴포넌트 개발
  • 타이포그래피 컴포넌트 개발

작업 결과물

.
├── package.json
├── packages (9개의 package)
│   ├── erp-design-system
│   ├── erp-icons
│   ├── erp-storybook
│   ├── eslint-config-hanssem
│   └── utils
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
└── turbo.json

vite 환경 변경으로 변경

• vitest 사용으로 환경 통일
• 기존 rollup 번들러에 따로 트랜스파일러를 추가해야했음 -> vite 는 기본적으로 rollup (+esbuild) 를 기본
• 빌드 속도 비교

※ 빌드속도만 놓고보면 최소 30% 차이로 보여짐 (물론 아직 패키지가 적다는 점도 고려바랍니다.)

• 빌드속도는 같은 모듈번들러를 사용하기 때문에 차이가 없어야 하는것이 맞지만, 내부적인 설정차이가 있는것으로 판단됨.(상대적으로 적은 설정으로 번들러 최적화설정을 쉽게 할 수 있을 것으로 판단)

업무

• 상용 Dhtmlx 그리드 라이브러리 메모리 누수 분석 및 개선 요청
  • 크롬 개발자모드의 performance 탭에서 그리드 스크롤링 시 리스너가 증가했다가 다시 감소되지 않는 현상 발견
  • 이 후, 라이브러리 소스코드내용 점검 결과 컬럼의 필터 이벤트가 이미 있어도 계속 add 되는 소스 발견
  • 상용 업체에 개선 요청
• FE 파트 리딩(정기배포를 위한 일정 플래닝)
  • 기획 회의 참여 및 기술적 점검
  • 각 기획에 대한 일정 산정 및 담당자 할당
  • QA 배포 및 운영 배포 항목 점검
  • git 브랜치 관리 및 히스토리 관리
    • merge 전략 재검토 및 재정의
      • 1 commit + rebase and merge 방식으로 정의
• 홈퍼니싱 시공 시스템 개선 및 운영 건 처리
  • 기획 팀 선정 회의를 통한 개선 건 추가 개발
  • 운영 버그 건 수정 개발
• 리팩토링
  • CRA → Vite 변경 (보류)
    • 엄격모드 적용으로 인한 업데이트 되지 않는 외부 구형 라이브러리에 대한 런타임 에러 발생
    • 적용을 위한 테스트 코드 작성 계획 중
  • any 타입 수정 (진행 중)
  • eslint + prettier 적용 및 룰에 맞는 코드 수정 (진행 중)

작업 결과물

업무

• 기존에 운영 중이던 한샘몰 디자인시스템 담당자가 퇴사함으로 인해 인수인계 후 운영 및 개선 작업 진행
• 디자이너 및 FE개발자들이 검수할 수 있는 스토리북을 pre-release 로 선 배포 후 사내 저장소인 Nexus 에 라이브러리 배포 진행
• 단독 진행으로 관리되지 않던 Git merge 전략 및 branch 전략 정리
  • 브랜치는 정기배포날짜로 정의 ex) sprint/v20240701
  • feature 브랜치에서 개발 브랜치로 merge 시 squash
• 리팩토링
  • eslint v9 업데이트 (flat config 적용)
  • lint-staged 추가
  • version 관리를 위한 도구 changeset 추가 (CHANGLOG 작성)
  • monorepo 관리 툴 추가 (turborepo)
  • 번들러 및 트랜스파일러 변경 (rollup → vite 환경)

작업 결과물

PC Storybook

@storybook/cli - Storybook

Mobile Storybook

@storybook/cli - Storybook

라이브러리 Publish

업무

• turborepo, pnpm, vite, typescript, react, @tanstack/query, tailwindcss, storybook, vitest 기술 점검 및 선택
• FE 프로젝트 구축 리딩
• 신규 ERP(기간계) 모노리포 구조 정의
  • eslint 패키지 정의
    • Flat Config 구성
  • ui 패키지 정의
    • 공통화한 아토믹한 컴포넌트를 점진적으로 확대하여 ERP의 디자인 시스템으로 활용하기 위해 UI 패키지 구성
    • 디자인 가이드의 기초 구성 (토큰화)
    • tailwind의 커스텀 클래스 확장
    • 컴포넌트 개발
      • 버튼, 체크박스, 필터칩, 다이얼로그, 타이포그래피
      • 외부 사용 시 class 명 순서를 보장받기 위한 tailwind-merge 도입
  • storybook 모듈 추가
    • CDD 개발을 위한 컴포넌트 개발 툴 추가
    • ui 구성요소와는 별개로 stories 를 용이하게 관리하기 위해 별도 분리
• 화면 개발
  • 모바일 웹앱(웹)
  • toss/slash 의 funnel 을 리액트용으로 개선 후 추가

작업 결과물

프로젝트 구조

├── README.md
├── apps
│   ├── site-visit
│   └── storybook
├── package.json
├── packages
│   ├── eslint-config
│   ├── tailwind-config
│   ├── typescript-config
│   └── ui
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── .npmrc
├── .nvmrc
├── .prettierrc
├── lint-staged.config.mjs
├── bitbucket-pipelines.yml
└── turbo.json

의존성 관계

외주 시공 출입 관리 시스템

• 전체 화면을 웹뷰로 전환함으로인한 유지보수성 증가

업무

• 기술 검토 및 선택
• 기본 템플릿 구성
• 기술 문서 작성 (저장소 내 README.md 및 팀 컨플루언스)
  • 전체 모노리포 구조 및 실행 방법
  • 하위 패키지들에 대한 사용방법
• 전체 프로젝트 구조 설계(FSD)
• 공통 디자인가이드 적용
• 공통 컴포넌트 개발
• 화면 개발
  • 메인, 메뉴, as게시판, 제품교육자료, 동영상교육센터, 현장지식DB, 상시자재관리, AS 및 오더 조회

작업 결과물

프로젝트 구조

.
├── CHANGELOG.md
├── eslint.config.js
├── index.html
├── lint-staged.config.js
├── package.json
├── public
│   ├── favicon.ico
│   ├── index2.html
│   └── robots.txt
├── README.md
├── src
│   ├── app
│   │   ├── app-providers.tsx
│   │   ├── index.css
│   │   ├── main.tsx
│   │   └── providers
│   ├── entities
│   │   ├── always-on-material
│   │   ├── board
│   │   ├── construction-guide
│   │   ├── education
│   │   ├── home
│   │   ├── inquiry
│   │   ├── schedule
│   │   └── site-knowledge-db
│   ├── features
│   │   ├── always-on-material
│   │   ├── as-board
│   │   ├── construction-guide
│   │   ├── education
│   │   ├── home
│   │   ├── inquiry
│   │   ├── schedule
│   │   └── site-knowledge-db
│   ├── pages
│   │   ├── always-on-material
│   │   ├── as-board
│   │   ├── construction-guide
│   │   ├── education
│   │   ├── error
│   │   ├── home
│   │   ├── inquiry
│   │   ├── layout
│   │   ├── schedule
│   │   └── site-knowledge-db
│   ├── shared
│   │   ├── apis
│   │   ├── env
│   │   ├── lib
│   │   ├── session
│   │   └── ui
│   ├── vite-env.d.ts
│   └── widgets
│       ├── education
│       ├── home
│       ├── layouts
│       ├── schedule
│       └── schedule-pkg
├── tsconfig.json
└── vite.config.ts

작업 화면

메인화면

업무

• 기술 검토 및 선택
• 기본 템플릿 구성
• 기술 문서 작성 (저장소 내 README.md 및 팀 컨플루언스)
  • 전체 모노리포 구조 및 실행 방법
  • 하위 패키지들에 대한 사용방법
• 현재 프로젝트 분석 단계로 프론트 프로젝트에 대한 기술 검토 및 선택, 프로젝트 초기 구성 진행
• 공통 요소 개발
  • 좌측 메뉴 및 그에 따른 탭 메뉴 레이아웃 구성
    • 많은 양의 데이터로 인한 성능 문제로 인해 최초에는 라우트 탭 형식으로 설계 및 개발되었으나, 탭 이동 시 작업내용 초기화로 인해 마운트 유지 방식으로 변경
  • 메인 탭 내의 화면상에서 api를 통해 공통으로 관리되는 탭, 그에따른 컬럼, 데이터 MUI DataGrid(Premium) 에서 사용할 수 있는 데이터로 가공하여 공통 그리드(탭+컬럼+데이터) 영역 개발
• 작업 등록 및 그에 따른 6대 마스터 기준정보 작업화면 개발(작업관리)
  • 상품, BOM, 가격, 인포소스 작업화면 공통영역 개발
  • 작업등록 화면 개발
  • 배포대기열 화면 개발

작업 결과물

프로젝트 구조

.
├── CHANGELOG.md
├── coverage
│   ├── base.css
│   ├── block-navigation.js
│   ├── clover.xml
│   ├── coverage-final.json
│   ├── favicon.png
│   ├── index.html
│   ├── mds
│   │   ├── index.html
│   │   ├── lint-staged.config.js.html
│   │   └── src
│   ├── prettify.css
│   ├── prettify.js
│   ├── sort-arrow-sprite.png
│   └── sorter.js
├── eslint.config.js
├── index.html
├── lint-staged.config.js
├── nginx.conf
├── package.json
├── public
│   ├── favicon.ico
│   └── robots.txt
├── README.md
├── src
│   ├── app
│   │   ├── app-providers.tsx
│   │   ├── main.tsx
│   │   ├── providers
│   │   └── theme
│   ├── entities
│   │   ├── apply-target
│   │   ├── bom-ecn
│   │   ├── bom-grid
│   │   ├── bom-manufacture
│   │   ├── bom-sales
│   │   ├── bom-task
│   │   ├── code
│   │   ├── deploy-queue
│   │   ├── download-task
│   │   ├── field
│   │   ├── file
│   │   ├── generate
│   │   ├── goods
│   │   ├── goods-grid
│   │   ├── goods-task
│   │   ├── goods-task-deletion
│   │   ├── grid-preset
│   │   ├── history
│   │   ├── info-source
│   │   ├── info-source-grid
│   │   ├── info-source-task
│   │   ├── menu
│   │   ├── price
│   │   ├── price-grid
│   │   ├── price-task
│   │   ├── reference
│   │   ├── sales-office
│   │   ├── sales-office-grid
│   │   ├── task
│   │   ├── task-target
│   │   ├── vendor
│   │   └── vendor-grid
│   ├── features
│   │   ├── auth
│   │   ├── bom-ecn-list
│   │   ├── bom-manufacture-list
│   │   ├── bom-sales-list
│   │   ├── bom-task
│   │   ├── code-list
│   │   ├── download-list
│   │   ├── field
│   │   ├── generate
│   │   ├── goods-list
│   │   ├── goods-task
│   │   ├── grid-preset
│   │   ├── history-list
│   │   ├── info-source-list
│   │   ├── info-source-task
│   │   ├── price-list
│   │   ├── price-task
│   │   ├── sales-office-list
│   │   ├── task
│   │   └── vendor-list
│   ├── pages
│   │   ├── bom-ecn-list
│   │   ├── bom-manufacture-list
│   │   ├── bom-sales-list
│   │   ├── code-list
│   │   ├── deploy-queue
│   │   ├── download-list
│   │   ├── error
│   │   ├── generate-list
│   │   ├── generate-register
│   │   ├── goods-list
│   │   ├── history-list
│   │   ├── home
│   │   ├── info-source-list
│   │   ├── layout
│   │   ├── price-list
│   │   ├── sales-office-list
│   │   ├── task
│   │   ├── task-list
│   │   ├── task-register
│   │   └── vendor-list
│   ├── shared
│   │   ├── apis
│   │   ├── env
│   │   ├── lib
│   │   ├── session
│   │   └── ui
│   ├── vite-env.d.ts
│   └── widgets
│       ├── layout
│       └── task
├── tsconfig.json
└── vite.config.ts

작업 화면

업무

• FE 파트 리딩 — 프론트엔드 아키텍처와 개발 범위 정의
  • 1단계에서 정한 스택(React + TypeScript + Vite, MUI X DataGrid, TanStack Query, Zustand, react-hook-form + zod)을 그대로 이어받고, FSD 레이어 규칙을 2단계 화면에 맞게 확장
  • 화면 단위로 개발 범위를 쪼개 일정과 담당을 배분하고, 공통으로 빼야 할 요소를 먼저 식별해 선개발
• API 계약 정의 — 응답 스키마(zod)와 타입, api client 메서드를 화면 개발보다 먼저 확정
  • Non-SAP 작업·작업단위·템플릿·필드그룹
  • 메타데이터, 참조코드, 권한 조회
  • 그리드 통합조회와 엑셀 다운로드
  • 장 전개·장 가격, 가격안·비규격 가격
  • SAP 로그 조회와 SSE 구독
  • 1단계에서 빠져 있던 엔드포인트 보완
• Non-SAP 작업·템플릿 화면 개발
  • 작업 목록·등록 화면
  • 템플릿 관리 목록과 등록·수정 다이얼로그
  • 작업 상세 화면
    • 작업단위 탭 전환 — 저장하지 않은 변경이 있으면 이동 전에 확인
    • 대상 그리드 인라인 편집과 행 추가·삭제, 작업 복사, 선택 행 일괄 변경
    • 버전 검증(낙관적 잠금) 기반 임시저장 — 다른 사람이 먼저 저장한 경우를 충돌로 잡아낸다
    • 엑셀 업로드와 대상 추가 팝업
    • 검증 실패 건만 골라내는 재작업
    • 작업단위 개별 배포와 전체 배포, 시각을 지정하는 배포 예약
• 기타 작업 화면 개발
  • OMS 카탈로그, 카탈로그 상품구분 맵핑 — 그리드 조회·편집·저장, 엑셀 업로드와 비동기 전체 다운로드
  • 상품이미지 조회·작업 — 이미지 업로드와 원본 크기로 보는 뷰어 다이얼로그
  • 공통 파일 업로드 다이얼로그·업로드 버튼과 엑셀 양식 다운로드 버튼을 공통 컴포넌트로 개발해 화면들이 나눠 쓰도록 정리
• SSE 실시간 반영 공통 인프라 구축
  • 사내 공통 패키지에 SSE 클라이언트와 훅을 추가하고, 토큰 재발급과 연결 중단 처리를 여러 앱이 함께 쓰도록 공유화
  • 도메인별로 흩어져 있던 SSE 훅을 공통 base 훅 경유로 정리
  • 엑셀 파싱 진행률과 작업단위 상태를 화면에 실시간 반영 — 새로고침으로 결과를 확인하던 흐름을 없앰
  • 알림이 연달아 와도 묻히지 않도록 스택형 스낵바 도입
• MUI v9 마이그레이션 — system props를 sx로, 컴포넌트 커스터마이징을 슬롯 API로 전환. 앱과 사내 공통 UI 패키지에 함께 적용
• 1단계(MDS) 본체 수정
  • 작업 API 경로를 SAP 작업 기준으로 정리
  • 일괄 변경 요청 필드명과 작업 상태값을 공통 코드셋에 맞춰 정렬
  • BOM 외주생산 조회·작업 화면 추가

작업 결과물

• 두 시스템에 나뉘어 있던 기준정보 업무를 한 화면 흐름으로 모아, 작업 등록부터 검증·배포까지 기준정보시스템 안에서 끝낼 수 있게 함
• 엑셀 업로드·배포처럼 오래 걸리는 작업의 진행 상태를 SSE로 실시간 노출해, 결과를 기다리며 화면을 새로 고치던 대기 시간을 없앰

프로젝트 구조

.
├── CHANGELOG.md
├── eslint.config.js
├── index.html
├── lint-staged.config.js
├── nginx.conf
├── package.json
├── public
│   ├── favicon.ico
│   └── robots.txt
├── README.md
├── src
│   ├── app            # 4
│   ├── entities       # 47
│   ├── features       # 43
│   ├── pages          # 49
│   ├── shared         # 5
│   ├── vite-env.d.ts
│   └── widgets        # 15
├── tsconfig.json
└── vite.config.ts

숫자는 레이어별 슬라이스 개수다.

업무

• FE 전환 설계·개발 전담 — 아키텍처 정의와 전 화면 마이그레이션
  • React + TypeScript + Vite SPA, FSD 아키텍처. TanStack Query·Table·Virtual, react-hook-form + zod, zustand, Tailwind CSS + shadcn/ui 조합
  • 기준정보·A/S 접수·A/S 요청·조치관리·고객관리·평가분석·정산(유상수금, 현금영수증·카드결제)·게시판·교육·관리자 등 업무 도메인 전반의 화면 50여 개 전환
• 공통 기능·인프라
  • 메인·영업조직 선택, GNB 메뉴, 탭 워크스페이스(탭 상태 유지·스크롤), breadcrumb, SSO 로그인 리다이렉트, nginx 배포 구성
  • 검색 다이얼로그를 합성 컴포넌트로 공통화하고 중복 도메인 서비스를 정리 — 화면들이 같은 조회·검색 패턴을 나눠 쓰도록 수렴
  • 엑셀 다운로드를 서버사이드 EXPORT로 전환(컬럼 그룹화·다중 시트)하고 암호화 팝업을 전 화면에 적용
• UI 현대화 — shadcn/ui 기반 디자인 토큰·다크모드·Pretendard 적용, Radix에서 Base UI로 전환
• 테스트 체계 — Vitest + Testing Library + MSW로 레거시 동작 보존을 검증하는 테스트 374파일 3,867건 구축, 실행 속도 개선 병행
• 두 차례 QA 라운드 대응 — 수정필요 판정 207건을 이슈당 1커밋·1PR 원칙으로 처리

AI 에이전트 활용

이 프로젝트의 방법론 자체가 성과다. Claude Code 에이전트 스킬을 직접 제작해 "레거시 분석 → PRD 생성 → 구현 → 테스트 → 리뷰 → 커밋·PR"을 잇는 마이그레이션 파이프라인을 만들었고, 화면 단위로 워크트리를 쪼개 여러 에이전트가 동시에 화면을 옮기게 했다.

• PRD 생성 스킬(nexacro-react-prd) — 레거시 화면을 분석해 마이그레이션 명세를 자동 작성
  • 메뉴 스코프·화면 분석·API 추적·PRD 조립·통합테스트 시나리오 5개 에이전트가 병렬로 분석
  • 같은 분석을 반복해 누락(갭)이 0이 될 때까지 도는 자동 보완 루프(최대 10회) — 기능 누락 문제를 스킬 수준에서 해소
  • 전체 이관용 full 모드와 누락 기능 탐지용 gap 모드 분리
• 구현 스킬(nexacro-react-migration) — PRD를 입력받아 코드·테스트·리뷰까지 수행
  • 코딩 컨벤션 선로딩, 기존 API 스캔(재사용 맵 작성으로 중복 엔드포인트 생성 방지) 두 게이트를 통과해야 코드 편집 가능
  • UI·API/상태·테스트 등 역할별 에이전트 4~5개 병렬 구현, 이후 컨벤션 리뷰어와 자동 코드 리뷰 에이전트가 순차로 후처리
  • 분석과 구현을 한 세션에서 하던 초기 접근이 컨텍스트 오염으로 품질이 흔들리는 문제를 겪고, PRD와 구현을 별도 스킬로 분리한 것이 가장 큰 전환점
• 컨벤션 스킬(basis-web-conventions) — FSD·React·테스트 규칙을 라우터 + 주제별 레퍼런스 구조(Progressive Disclosure)로 설계해, 모든 에이전트가 필요한 규칙만 로드하면서도 같은 규칙으로 코드를 쓰게 함
• 워크트리 병렬화(git-ops) — 화면(이슈) 단위로 git 워크트리·브랜치·에이전트 세션을 만들어 다수 화면을 동시에 진행
  • 워크트리 일괄 생성 시 서브에이전트가 install·build·세션 구성을 독립 컨텍스트에서 수행, 터미널 멀티플렉서(tmux·cmux·Orca) 자동 감지
  • rebase → 커밋 → 명세 문서 정리 → PR 생성까지 커밋 파이프라인을 스킬로 자동화, PRD에서 워크트리 생성과 구현 지시까지 한 번에 이어지는 원스텝 트리거 완성
• 멀티에이전트 오케스트레이션(Orca) — 코디네이터 에이전트가 작업 DAG를 만들어 워커 에이전트들에게 분배
  • PostToolUse 훅으로 오케스트레이션 시작 순간 프로젝트 규칙을 자동 주입 — 키워드 트리거에 기대지 않고 규칙 적용을 구조적으로 보장
  • 워커는 plan mode로 기동해 사람 승인 전 코드 수정을 차단, 모노레포 테스트 동시 실행은 2개로 제한(순번 세마포어), 머지는 코디네이터만 수행
• 보조 스킬 — 테스트 작성 워크플로우(write-test), 대용량 OpenAPI 명세 부분 조회(swagger), Jira 일감 일괄 생성·Bitbucket PR 자동화까지 개발 프로세스 전반을 스킬로 도구화
• QA 대응도 에이전트 루프로 처리 — 이슈마다 레거시 원본과 대조 조사 후 이슈당 1커밋·1PR로 수정하고, 코드 결함이 아닌 건은 근거 코멘트로 판별해 종결 요청
  • 1차 라운드: 수정필요 152건 전량 처리 — 커밋 131건, PR 31건, 전체 테스트 3,867건 통과 상태 유지
  • 2차 라운드: 55건 중 49건 PR 머지, 나머지 6건은 기해결·재현정보 필요·범위 밖 판정 근거를 달아 종결 — 지적 범위 밖 잠재 결함 14건과 QA 시트 오기재 5건을 역으로 발견해 보고

작업 결과물

• 넥사크로 레거시 업무시스템의 화면 50여 개를 React로 전환 — 작업 이슈 350여 건을 에이전트 파이프라인으로 처리
• 한 화면씩 수작업으로 옮기던 방식을 여러 화면 동시 진행으로 바꾸고, 자동 보완 루프로 기능 누락을, 공유 컨벤션 스킬로 코드 스타일 불일치를 구조적으로 제거
• 레거시 동작 보존을 검증하는 테스트 374파일 3,867건이 매 수정의 회귀 안전망으로 동작
• 파이프라인 스킬 제작기와 운영 규칙을 사내 문서로 공유해 다른 프로젝트가 같은 방식을 재사용할 수 있게 함

프로젝트 구조

.
├── CHANGELOG.md
├── components.json
├── docs
├── eslint.config.js
├── index.html
├── lint-staged.config.js
├── nexacro-legacy
├── nginx.conf
├── package.json
├── public
│   └── legacy
├── src
│   ├── app            # 4
│   ├── entities       # 119
│   ├── features       # 64
│   ├── pages          # 57
│   ├── shared         # 6
│   ├── vite-env.d.ts
│   └── widgets        # 31
├── tsconfig.json
└── vite.config.ts

숫자는 레이어별 슬라이스 개수다.