# design-type-06 인터랙션 인벤토리 (출처: dev-forum-type-b.vercel.app)

> 이 사이트는 GSAP/scrub/pin류 스크롤 연출이 없다. 스타일을 결정하는 것은 **정보 구조와 마이크로 인터랙션**(hover, 토글, 즉시반영형 UI)이다. 아래 항목이 시안에서 재현해야 할 전부다.

## ★1. 전역 hover 트랜지션 (실측 — 이 사이트의 뼈대)

- 위치: 버튼·링크·아이콘 전반 (로그인, 반응 pill, 사이드바 nav 항목, 태그)
- 트리거: hover
- 움직임: `background-color` / `color` / `border-color` 전환 (transform 없음 — 색상 전환만, 스케일/이동 없음)
- 타이밍: **0.15s, cubic-bezier(0.4, 0, 0.2, 1)** (Tailwind 기본 `transition-colors` 그대로 — 별도 커스텀 이징 없음)
- 재현 난이도: 낮음 (Tailwind `transition-colors duration-150` 그대로 사용 가능)

## ★2. 헤더 언어 전환 → AI 번역 즉시 반영

- 위치: 헤더 우측 언어 선택(EN/KO/JP)
- 트리거: 클릭(드롭다운/토글)
- 움직임: DOM 텍스트 자체가 교체됨 (트랜지션 없이 즉시 치환 — 로딩 스피너 등 별도 연출 없음)
- 이 커뮤니티 템플릿의 핵심 제품 기능(다국어 동시운영)을 시각적으로 증명하는 인터랙션. 시안에서는 실제 번역 기능은 불필요하지만, "동시 3개 언어 지원" 정체성을 배지/카피로만 차용 가능(사과사랑동호회 시안에는 해당 없음 — 참고용)

## ★3. 좌측 사이드바 접기 토글

- 위치: 사이드바 상단 "탐색 메뉴 접기" 버튼 (lg 이상에서만 노출)
- 트리거: 클릭
- 움직임: 사이드바 폭이 220px → 축소(아이콘만 남는 상태로 추정, 실측 미확인 — 클릭 후 상태 변화는 이번 조사에서 스크린샷 확보 못함)
- 재현 난이도: 중간 (width 트랜지션 + 텍스트 opacity 페이드)

## 4. Community Polls 위젯 (우측 레일)

- 위치: 우측 sticky 레일 상단 카드
- 트리거: 옵션 버튼(Reading posts / Writing posts / Commenting / Sharing media) 클릭
- 움직임: 클릭 시 투표 반영 예상(그레이 pill 버튼 → 선택 시 오렌지 강조 전환 추정). 진행률 "1/2" 표시로 여러 설문이 순차 노출되는 구조
- 재현 난이도: 낮음 (버튼 상태 토글)

## 5. 공지 배너 / 프로모션 모달 dismiss

- 위치: ①헤더 아래 오렌지 공지 띠배너 ②로드 시 AI 번역 홍보 모달(중앙, 오버레이 딤 처리)
- 트리거: "오늘 하루 안 보기" 텍스트 버튼 또는 × 아이콘 클릭
- 움직임: 배너/모달이 opacity 트랜지션과 함께 사라짐 (클릭 후 페이드아웃 확인, 정확한 duration 미실측)
- 재현 난이도: 낮음

## 6. 반응형 카드 전환 (구조적 "인터랙션"은 아니나 레이아웃 상태 변화)

- 데스크탑(1440/768): 피드 카드 사이 hairline 구분선만 존재, 카드 자체 border/shadow 없음
- 모바일(390): 동일 카드가 `border` + `shadow` + `rounded-lg`를 갖는 명확한 카드형으로 전환, 좌/우 사이드바는 햄버거 메뉴로 통합
- 재현 난이도: 낮음 (Tailwind 반응형 유틸로 카드 스타일 분기)

## 배경 매체

- video/canvas 없음 (판별 완료, tokens 조사에서 `document.querySelectorAll('canvas'|'video')` 결과 모두 빈 배열)

## 결론 — 시안 적용 우선순위

이 벤치마크의 시그니처는 애니메이션이 아니라 **①3컬럼 sticky 레이아웃 구조 ②게시글 카드 컴포넌트(태그+반응바) ③우측 위젯 레일(로그인 CTA/투표/랭킹)** 3가지 구조 패턴이다. 아래 components/는 이 3가지를 범용 컴포넌트로 재구현한다.