AI导哈

习惯养成网页

Ghost是一个习惯养成网页，提供习惯跟踪、统计和社区功能，适用于个人习惯管理和自我提升。

  • by daeunxxx
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 daeunxxx/mcp-test

使用说明

Ghost - 습관형성 웹페이지

1440px 가로 사이즈의 습관형성 웹페이지입니다. 피그마 디자인을 기반으로 제작되었습니다.

🌐 배포

이 프로젝트는 GitHub Pages로 배포되어 있습니다.

배포 URL: https://daeunxxx.github.io/mcp-test/

📱 프로젝트 개요

  • 메인 페이지: 습관형성 웹페이지 (index.html)
  • 기존 페이지: 모바일 상품 상세 페이지 (피그마 디자인 기반)

기술 스택

  • HTML5
  • CSS3 (Vanilla CSS)
  • Vanilla JavaScript

주요 기능

습관형성 웹페이지 (메인)

  • Header: Ghost 로고, 메뉴 3개 (나의 습관, 통계, 커뮤니티), 로그인/회원가입 버튼
  • Hero Section: 그라데이션 배경의 인트로 섹션
  • 나의 습관목록: 습관 카드 그리드, 진행률 표시, 통계, 완료 기능
  • Footer: 서비스 링크, 지원 섹션, 약관 정보
  • 모달: 로그인, 회원가입, 새 습관 추가 모달
  • 로컬스토리지: 습관 데이터 저장

모바일 상품 상세 페이지

  • 이미지 슬라이드: 자동 슬라이드 및 터치/스와이프 지원
  • 하트 버튼: 좋아요 기능 (토글)
  • 선물하기 버튼: 선물 기능
  • 구매하기 버튼: 구매 기능 및 장바구니 시트 모달
  • 뒤로가기: 이전 페이지로 이동
  • 검색바: 검색 기능
  • 장바구니/알림 아이콘: 각각의 기능 연결

파일 구조

MCP-project/
├── index.html      # 메인 HTML 파일
├── styles.css      # 스타일시트
├── script.js       # JavaScript 기능
└── README.md       # 프로젝트 설명

실행 방법

  1. 피그마 MCP 서버가 실행 중이어야 합니다 (이미지 로드용)
  2. index.html 파일을 브라우저에서 열기
  3. 또는 로컬 서버 실행:
    # Python 3
python -m http.server 8000

# Node.js (http-server)
npx http-server

주요 특징

  • 모바일 최적화 (375px 기준)
  • 터치 제스처 지원 (스와이프)
  • 반응형 디자인
  • iOS 스타일 UI 요소 (상태바, 홈 인디케이터)

브라우저 호환성

  • Chrome (권장)
  • Safari
  • Firefox
  • Edge

참고사항

  • 이미지는 피그마 MCP 서버(localhost:3845)에서 제공됩니다
  • 실제 구매/선물 기능은 백엔드 API와 연동 필요
  • 검색 기능은 프롬프트로 구현되어 있으며, 실제 검색 페이지로 연결 가능

相关 MCP