Svelte 5 preview + Tailwind 템플릿 튜토리얼

구성요소

• bun
• svelte 5 preview (+ vite)
• tailwindcss + daisyui

주요내용

• TailGrids 템플릿 3 종을 svelte 5 preview 버전으로 재작성
  • Agency Template
  • Startup Site Template
  • Dashboard and Admin Template
• state, effect 등의 svelte 5 기능 활용 (UI 컨트롤러)
• chartjs 활용 : 막대그래프, 라인그래프 등.. (액션 포함)
• youtube 비디오를 iframe 으로 재생 및 정지
• snippet 과 render 으로 html 을 조립하고 파라미터 활용하기
• KakaoMap API 로 지도 삽입하고 window 전역 변수에 타입 확장
• splidejs 로 슬라이드 기능 삽입

Agency Template

블로그 : SvelteKit Tailwind 튜토리얼 - 4일차

top 화면

전체 화면

Template Section and Pages:

• Home Page
• About Us
• Our Team
• Features
• Pricing
• Support
• Blog
• 404 Page

Startup Site Template

블로그 : SvelteKit Tailwind 튜토리얼 - 5일차

top 화면

전체 화면

Template Section and Pages:

• Home
• Pricing
• Features
• Team Section
• FAQ
• Call to Action
• Testimonials
• Contacts Us
• Newsletter
• Log In & Sign Up
• Privacy Policy Page
• Legal Notice Page
• Terms of Service Page
• 404 Page

Dashboard and Admin Template

블로그 : SvelteKit Tailwind 튜토리얼 - 6일차

top 화면

전체 화면

chartjs with actions

Template Section and Pages

• Home
• NavMenu
• Dashboard
• Orders
• Messages
• Notifications
• Sales
• Events
• Charts
• Docs
• Settings
• Account Settings
• Log In and Log Out
• Sales Analytics - Chart and Graph
• Revenue and Sales Section
• Product Table
• 404 Page