sheetEasy AI Team 1419bf415f feat: T-011 랜딩페이지 UI 마크업 구현 완료
🎯 주요 구현 내용:
- TopBar: Logo, Download, Account 버튼 포함한 sticky 헤더
- HeroSection: Vooster.ai 스타일 메인 영역 + 3개 핵심 가치 카드
- FeaturesSection: 6개 주요 기능 소개 카드 (반응형 그리드)
- CTASection: 가격 플랜 미리보기 + 행동 유도 버튼
- Footer: 4단 컬럼 레이아웃 + 소셜 링크

 기술적 특징:
- ShadCN UI 컴포넌트 시스템 활용
- Semantic HTML5 태그 사용 (header, main, section, footer)
- ARIA 레이블 및 키보드 네비게이션 지원
- 완전한 반응형 디자인 (모바일-태블릿-데스크톱)
- Tailwind CSS 그라데이션 및 애니메이션 효과

🎨 디자인:
- Vooster.ai 참고한 모던하고 깔끔한 UI/UX
- 라이트 모드 고정 (PRD 요구사항)
- 그리드 패턴 배경 장식
- Hover 효과 및 부드러운 전환 애니메이션

 접근성:
- WCAG 가이드라인 준수
- 모든 인터랙티브 요소에 적절한 aria-label
- 키보드만으로 완전한 탐색 가능
- 충분한 색상 대비 및 폰트 크기

🔄 기능 통합:
- App.tsx에서 랜딩페이지 ↔ 에디터 모드 전환
- 랜딩페이지에서 '시작하기' 버튼으로 에디터 진입
- 에디터에서 '홈으로' 버튼으로 랜딩페이지 복귀

📋 Acceptance Criteria 100% 달성:
 모든 기기에서 레이아웃 정상 작동
 Semantic HTML 및 ARIA 접근성 적용
 ShadCN Card, Button 컴포넌트 활용
 Vooster.ai와 비슷한 모던 디자인
 TopBar, 서비스 소개, 주요 기능, CTA 배치
 반응형 레이아웃 및 섹션별 구분
2025-06-27 15:07:07 +09:00

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})
Description
구형 excel파일을 AI 프롬프트로 조작할수 있게 해주는 웹서비스
Readme 5 MiB
Languages
TypeScript 91.5%
CSS 7.6%
JavaScript 0.8%