프로젝트 한눈에 보기
조앤소프트 프레임워크 구축
쉽게 말하면
프로젝트마다 화면 기반을 새로 짜던 비효율을 줄이기 위해 Nuxt 3 기반 자사 프론트엔드 프레임워크를 구축했습니다. 자동 라우팅, 컴포넌트 자동 import, 상태 관리, API 플러그인과 실무 상태를 반영한 UI 컴포넌트, 디자인 토큰 기반 SCSS를 하나의 표준으로 묶었습니다.
Nuxt 3 / Vue 3 / TypeScript / JavaScript / SCSS / Pinia / Axios / Vite / Vue I18n / Chart.js / vue-chartjs / AG Grid / flatpickr / noUiSlider
01 / PROJECT NOTE
제가 맡고 끝까지 책임진 일
완성 화면만 나열하지 않았습니다. 왜 그렇게 만들었고 어떤 변화를 남겼는지 차례대로 설명합니다.
문제를 이렇게 풀었습니다
- 자동 라우팅 / 컴포넌트 자동 import / Pinia 상태 관리 / Axios API 플러그인 등 기반 구조 정리
- AppButton / AppInput / AppSelect / AppDatePicker / AppProgress / Chart / AG Grid 등 재사용 컴포넌트 제작
- 컴포넌트마다 size / disabled / readonly / focus / error / loading / active 등 실무 상태를 반영
- BEM 네이밍과 디자인 토큰(색 / 타이포 / 간격 / 상태 / 반응형)을 기준으로 SCSS 구조 설계
- composable / 레이아웃 / 공통 플러그인을 실무 적용 가능한 형태로 구성하고 예제 페이지 제작
그래서 실제로 달라진 점
- 프로젝트마다 반복 구축하던 기본 UI / 레이아웃 / API 연동 / SCSS 구조를 프레임워크화
- 컴포넌트 / API 구조 / 예제 페이지를 함께 정리해 신규 프로젝트 착수 속도를 높이는 협업 표준 구축
이 프로젝트에서 눈여겨볼 점
- Nuxt 3 프레임워크화
- 실무 상태 반영 컴포넌트
- 디자인 토큰 기반 SCSS
02 / SCREENS
화면으로 확인하기
말보다 화면이 빠를 때가 있습니다. 실제 결과물에서 구현의 디테일을 확인해 보세요.
