실무 프로젝트 • 2026.02~ • 결과

조앤소프트 프레임워크 구축

프로젝트마다 화면 구조·공통 UI·SCSS를 처음부터 다시 짜던 비효율을 없애기 위해, Nuxt 3 기반의 자사 프론트엔드 프레임워크를 직접 구축한 내부 프로젝트입니다. 자동 라우팅·컴포넌트 자동 import·상태 관리·API 플러그인 같은 기반 구조와, 실무 상태(size·disabled·readonly·focus·error 등)를 반영한 재사용 UI 컴포넌트, 디자인 토큰 기반 SCSS를 하나의 표준으로 묶었습니다.

페이지 이동하기GitHub

유형
내부 프로젝트 / 프레임워크
소요 시간
진행 중
기간
2026.02~
역할
퍼블리싱 100%, 프론트엔드 구조 설계 70%, 디자인 시스템 구축 70%

캡처

1 / 1
이미지 준비 중대신 설명은 먼저 열어뒀어요.

등록된 프로젝트 이미지가 없습니다.

내가 한 일

  1. 자동 라우팅·컴포넌트 자동 import·Pinia 상태 관리·Axios API 플러그인 등 기반 구조 정리
  2. AppButton·AppInput·AppSelect·AppDatePicker·AppProgress·Chart·AG Grid 등 재사용 컴포넌트 제작
  3. 컴포넌트마다 size·disabled·readonly·focus·error·loading·active 등 실무 상태를 반영
  4. BEM 네이밍과 디자인 토큰(색·타이포·간격·상태·반응형)을 기준으로 SCSS 구조 설계
  5. composable·레이아웃·공통 플러그인을 실무 적용 가능한 형태로 구성하고 예제 페이지 제작

성과

  • 프로젝트마다 반복 구축하던 기본 UI·레이아웃·API 연동·SCSS 구조를 프레임워크화
  • 컴포넌트·API 구조·예제 페이지를 함께 정리해 신규 프로젝트 착수 속도를 높이는 협업 표준 구축

포인트

  • Nuxt 3 프레임워크화
  • 실무 상태 반영 컴포넌트
  • 디자인 토큰 기반 SCSS