다행히 Turbo는 이러한 상태를 알리는 내장된 신호를 제공합니다. turbo-frame이 새로운 콘텐츠를 가져올 때마다 자동으로 두 가지 속성을 요소에 추가합니다. 하나는 값이 없는 단순한 busy 속성이고, 다른 하나는 보조 기술에서 사용되는 접근성 속성인 aria-busy="true"입니다. 요청이 완료되면 Turbo는 busy를 제거하고 aria-busy를 false로 되돌립니다. 즉, 프레임은 이미 브라우저와 개발자에게 자신이 ‘바쁜’ 상태임을 알려주고 있는 것입니다. 우리는 이 상태를 스타일링하여 사용자에게 명확한 로딩 표시기를 제공하기만 하면 됩니다. Turbo Frames 문서에서 프레임 속성의 전체 목록을 자세히 확인할 수 있습니다.
aria-busy 상태 스타일링
Turbo는 모든 프레임에서 aria-busy 속성을 최신 상태로 유지하므로, 이 속성을 스타일링에 활용할 수 있습니다. Tailwind CSS는 이미 aria-busy:* 변형을 포함하고 있어, JavaScript 없이도 마크업에서 직접 이 상태에 반응할 수 있습니다. 동일한 개념은 일반 CSS를 사용하여 turbo-frame[aria-busy="true"] { ... }와 같은 속성 선택자로 완벽하게 작동합니다.
일반적으로 두 가지 패턴이 있습니다.
- 프레임 내부에 오버레이 표시:
group-aria-busy- 이 접근 방식은 로딩 표시기를
turbo-frame자체 내부에 배치합니다. 프레임을group으로 지정하면, 프레임이 바쁠 때 그 자식 요소를 스타일링할 수 있습니다. Turbo가aria-busy="true"로 설정하면, 콘텐츠가 어두워지고 스피너 오버레이가 서서히 나타납니다. - 예시:
```html
```
- 프레임이 유휴 상태일 때는 오버레이가 숨겨져 있다가,
aria-busy="true"로 표시되는 즉시 스피너가 나타나고 콘텐츠가 약간 흐려져 활동을 알립니다.
- 이 접근 방식은 로딩 표시기를
- 프레임 외부에 로더 배치:
peer-aria-busy- 때로는 로더를 프레임 외부에 배치하고 싶을 수 있습니다. 예를 들어, 프레임의 내부 마크업을 수정하고 싶지 않거나 더 큰 오버레이를 원할 때입니다. 이 경우, 프레임을 컨테이너로 감싸고 프레임을
peer로 지정합니다. 이를 통해 형제 요소들이peer-aria-busy:유틸리티를 사용하여 프레임의aria-busy상태에 반응할 수 있습니다. - 예시:
```html
```
- 여기서 오버레이는 프레임 옆에 위치하지만, 여전히 프레임의 바쁜 상태에 반응합니다. 이 패턴은 프레임 마크업을 깔끔하게 유지하면서도 명확한 시각적 피드백을 제공합니다.
- 때로는 로더를 프레임 외부에 배치하고 싶을 수 있습니다. 예를 들어, 프레임의 내부 마크업을 수정하고 싶지 않거나 더 큰 오버레이를 원할 때입니다. 이 경우, 프레임을 컨테이너로 감싸고 프레임을