FAQ 아코디언과 모바일 메뉴가 애니메이션 없이 즉시 열림

DaleStudy/daleui#1214에 취합된 피드백에서 옮긴 이슈입니다.
원 댓글: @hyoseong1994 (2번 항목)

현상

홈의 "자주 묻는 질문" 아코디언과 모바일 햄버거 메뉴가 열릴 때 애니메이션 없이 즉시 펼쳐집니다. 내용이 툭 나타나서 어디가 열렸는지 눈으로 따라가기 어렵습니다.

원인

FAQ 아코디언

네이티브 <details>/<summary>를 씁니다 (src/pages/HomePage.tsx:139-151). 화살표 아이콘에는 이미 트랜지션이 걸려 있는데 정작 열리는 본문에는 없어서, 화살표만 부드럽게 돌고 내용은 즉시 튀어나오는 어긋난 동작이 됩니다.

src/styles/site.css:1146-1163

.faq-chevron {
  transition: transform 0.15s; /* ← 화살표는 애니메이션 있음 */
}

.faq-list details[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-list details > p {
  margin: 0;
  padding: 0 4px 20px; /* ← 본문은 트랜지션 없음 */
  ...
}

<details>는 기본적으로 열림/닫힘 사이에 전환 상태가 없어서, 본문에 transition을 걸어도 그대로는 동작하지 않습니다.

모바일 햄버거 메뉴

메뉴가 열릴 때만 DOM에 삽입되는 조건부 렌더링입니다 (src/components/Header.tsx:99-116).

{menuOpen && (
  <nav className="mobile-nav" aria-label={...}>
    ...
  </nav>
)}

엘리먼트 자체가 마운트/언마운트되므로 CSS 트랜지션이 걸릴 시작 상태가 존재하지 않습니다. .mobile-nav(site.css:240-247)에도 transition 선언이 없습니다.

제안

FAQ 아코디언

두 가지 방향이 있습니다. 어느 쪽을 택할지 결정이 필요합니다.

1. max-height 트랜지션 (원 코멘트에서 제안된 방식)

모든 브라우저에서 동작하지만, 실제 내용 높이를 모르므로 넉넉한 상한값을 하드코딩해야 합니다. 답변이 짧은 항목은 상한까지의 여백만큼 시간이 낭비되어 열리는 속도가 항목마다 달라 보이는 단점이 있습니다.

2. ::details-content + interpolate-size: allow-keywords

height: auto로의 트랜지션이 가능해져 상한값 없이 내용 높이에 정확히 맞춰 열립니다. 다만 비교적 최신 CSS 기능이므로 작업 전에 지원 범위를 먼저 확인하고, 미지원 브라우저에서는 애니메이션 없이 열리는 것으로 자연스럽게 폴백되는지 검증해 주세요.

모바일 햄버거 메뉴

nav를 항상 렌더링하고 열림 상태를 클래스로 전환하는 구조로 바꿔야 트랜지션이 가능합니다.

이때 닫힌 상태에서 링크가 키보드 포커스를 받지 않도록 해야 합니다. visibility: hidden이나 hidden 속성 없이 max-height: 0만으로 감추면, 모바일에서 Tab 키가 보이지 않는 메뉴 항목들을 순회하게 됩니다.

공통

site.css:1511-1520에 prefers-reduced-motion: reduce 처리가 이미 있어 모든 transition/animation을 끕니다. 애니메이션을 추가해도 접근성 측면은 자동으로 커버됩니다.

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

Start with the FAQ markup in src/pages/HomePage.tsx:139-151, the related rules in src/styles/site.css:1146-1163, and the conditional mobile navigation in src/components/Header.tsx:99-116 with its styles at site.css:240-247. First check browser support for the proposed details-content approach. Done means both interactions animate, closed mobile links cannot receive keyboard focus, and reduced-motion behavior remains intact.