Tabs

현대적이고 세련된 탭 컴포넌트입니다. 글래스 효과와 부드러운 애니메이션을 제공합니다.

기본 사용법

📋 개요 💡 사용법 🎨 예시

Tabs 컴포넌트는 콘텐츠를 여러 탭으로 나누어 표시할 때 사용합니다. 각 탭은 아이콘과 라벨을 가질 수 있으며, 부드러운 전환 애니메이션을 제공합니다.

탭을 클릭하면 해당 콘텐츠가 부드럽게 나타나며, 호버 시 미묘한 애니메이션 효과를 제공합니다.

다양한 예시와 사용 사례를 통해 컴포넌트의 활용법을 확인할 수 있습니다.

Props

Prop	Type	Default	Description
tabs	Array<Tab>	-	탭 설정 배열 (필수)
defaultTab	string	첫 번째 탭의 id	기본 선택 탭

Tab 객체

Property	Type	Required	Description
id	string	✅	탭의 고유 식별자
label	string	✅	탭에 표시될 라벨
icon	string	❌	탭에 표시될 아이콘 (이모지)

예시

기본 탭

---
import Tabs from "@pelagornis/page/components/Tabs.astro";
---

<Tabs tabs={[
  { id: "tab1", label: "첫 번째 탭" },
  { id: "tab2", label: "두 번째 탭" },
  { id: "tab3", label: "세 번째 탭" }
]} defaultTab="tab1">
  <div>
    첫 번째 탭의 콘텐츠입니다.
  </div>
  <div>
    두 번째 탭의 콘텐츠입니다.
  </div>
  <div>
    세 번째 탭의 콘텐츠입니다.
  </div>
</Tabs>

아이콘이 있는 탭

---
import Tabs from "@pelagornis/page/components/Tabs.astro";
---

<Tabs tabs={[
  { id: "info", label: "정보", icon: "ℹ️" },
  { id: "settings", label: "설정", icon: "⚙️" },
  { id: "help", label: "도움말", icon: "❓" }
]} defaultTab="info">
  <div>
    <h3>정보 탭</h3>
    <p>여기에 정보 콘텐츠를 배치합니다.</p>
  </div>
  <div>
    <h3>설정 탭</h3>
    <p>여기에 설정 콘텐츠를 배치합니다.</p>
  </div>
  <div>
    <h3>도움말 탭</h3>
    <p>여기에 도움말 콘텐츠를 배치합니다.</p>
  </div>
</Tabs>

다양한 아이콘 예시

📚 문서 💻 코드 🎨 디자인 🚀 배포

📚 문서

프로젝트 문서와 가이드를 확인하세요.

💻 코드

소스 코드와 예시를 살펴보세요.

🎨 디자인

UI/UX 디자인 가이드를 참고하세요.

🚀 배포

배포 방법과 환경 설정을 확인하세요.

특징

✨ 현대적인 디자인

• 글래스 효과와 그라데이션 배경
• 부드러운 그림자와 호버 효과
• 세련된 타이포그래피

🎭 부드러운 애니메이션

• 탭 전환 시 자연스러운 페이드인 효과
• 호버 시 아이콘 스케일 애니메이션
• 부드러운 전환 효과

🌙 다크 모드 지원

• 라이트/다크 테마 완벽 호환
• 자동 색상 조정
• 일관된 사용자 경험

📱 반응형 디자인

• 모바일에서 가로 스크롤 지원
• 다양한 화면 크기에 최적화
• 터치 친화적 인터페이스

♿ 접근성

• 키보드 네비게이션 지원
• 포커스 표시
• 스크린 리더 호환

스타일링

Tabs 컴포넌트는 CSS 변수를 통해 커스터마이징할 수 있습니다:

:root {
  --page-tab-border-radius: 12px;
  --page-tab-padding: 14px 24px;
  --page-tab-gap: 12px;
}

브라우저 지원

• Chrome 88+
• Firefox 85+
• Safari 14+
• Edge 88+

모던 브라우저에서 최적의 성능을 제공합니다.