Vue UI

수주 전 기술 검토 과정에서 Vue 3의 공통 UI를 어떻게 감쌀지 실험했습니다. 버튼의 native 속성과 길게 누르기 이벤트, 스타일 변형을 다뤘고 Ark UI의 tooltip와 날짜 선택을 조합한 예제를 만들었습니다. 검토 단계에 남은 코드와 후속 확인 과제를 함께 정리했습니다.

검증 질문

질문	구현한 부분	더 확인할 부분
공통 버튼이 native 속성을 어떻게 받을 것인가	button 속성, `$attrs`와 스타일 변형 계약	이벤트 전달과 비활성 상태
기본 콘텐츠와 호출부 교체를 어떻게 나눌 것인가	icon과 본문 slot, tooltip의 trigger와 content	모든 조합의 상호작용
기존 UI 도구를 어떤 범위로 감쌀 것인가	Ark UI tooltip와 날짜 선택의 예제	props와 emits 전달, 키보드와 접근성

개요

항목	내용
기록 시기	2025.10 ~ 2025.11의 Git 기록
구성	날짜별로 별도 초기화한 두 저장소를 한 검토 사례로 묶었습니다
역할	UI 예제와 wrapper 구현
기술	Vue 3, TypeScript, Vite, Ark UI, CSS
단계	수주로 이어지지 않아 PoC에서 마무리한 기술 검토

구현과 판단

버튼의 속성과 스타일 변형을 구분하기

검증 질문. 공통 버튼이 native 속성을 유지하면서 크기와 색, 표현 방식을 어느 계약으로 받을지 검토했습니다.

구현. native button 속성을 바탕으로 variants를 별도로 두고 size, semantic과 appearance를 data attribute에 연결했습니다. 버튼 바깥에서 전달한 속성은 $attrs로 연결하고 icon과 본문은 slot으로 나눴습니다.

flowchart LR
    Native["native 속성과 listener"] --> Wrapper["Vue 버튼 wrapper"]
    Variants["크기, 의미와 표현 방식"] --> Wrapper
    Slots["왼쪽 icon, 본문, 오른쪽 icon"] --> Wrapper
    Wrapper --> Button["button과 data attribute"]

남은 과제. native 속성의 형식을 가져온 것과 실제 이벤트 전달이 모두 맞는지는 별도로 확인해야 합니다. 비활성 상태와 터치, 키보드 입력까지 완료한 UI 라이브러리로 설명하지 않았습니다.

길게 누르는 동작의 시작과 취소를 코드로 검토하기

검증 질문. 마우스를 누른 시간으로 별도 이벤트를 만들 때 어떤 동작에서 판정을 취소해야 하는지 검토했습니다.

구현. mousedown에서 타이머를 시작하고 mouseup과 mouseleave에서 타이머를 정리했습니다. 길게 누르기 판정 시간을 prop으로 받았습니다.

구현 코드: 길게 누르기 타이머의 시작

const handleMouseDown = (event: MouseEvent): void => {
  isLongPressing.value = false;
  longPressTimer.value = window.setTimeout(() => {
    isLongPressing.value = true;
    emits("long-press", event);
  }, props.longPressDuration);
};

초기 실험 코드에서 발췌했습니다. 후속 실험에서는 native button 속성과 스타일 계약을 확장했습니다.

남은 과제. 버튼이 사라질 때의 타이머 정리와 터치, 키보드에서 같은 의미의 동작을 제공하는지 확인이 필요합니다. 타이머 코드의 존재만으로 상호작용 검증이 끝났다고 쓰지 않았습니다.

headless UI의 구조를 감추되 전달 계약을 확인하기

검증 질문. Ark UI가 제공하는 동작을 유지하면서 호출부가 반복해서 쓰는 구조를 어느 정도 감출지 검토했습니다.

구현. tooltip는 기본 trigger와 content를 두고 필요하면 slot으로 교체하도록 구성했습니다. 날짜 선택에는 day, month와 year view, 단일과 범위 입력의 구조를 조합했습니다.

남은 과제. 선언한 props와 emits, $attrs가 실제 하위 컴포넌트에 어떻게 전달되는지 재현이 필요합니다. Ark UI의 동작을 자체 구현한 성과와 wrapper의 구조 검토는 구분했습니다.

결과와 활용

공통 UI를 구성하는 속성과 이벤트, 콘텐츠 교체의 경계를 코드로 남겼습니다. 이 PoC에서 이어질 글은 wrapper의 전달 계약을 실제로 재현하고 설명하는 주제로 잡았습니다. 기본 Welcome 화면과 counter 같은 생성 템플릿은 본인 기여에 포함하지 않았습니다.