Tencent Cloud PoC 가이드

Tencent Cloud 서비스를 활용한 PoC(Proof of Concept) 개발을 위한 종합 가이드 사이트입니다.

🚀 주요 기능

📖 콘텐츠 관리

• 마크다운 기반 문서: 구조화된 가이드 문서 제공
• 실시간 에디터: Monaco Editor를 활용한 전문적인 마크다운 에디터
• 미리보기 기능: 편집과 동시에 실시간 미리보기 제공
• 이미지 관리: 드래그 앤 드롭, 클립보드 붙여넣기 지원

🎨 사용자 경험

• 다크/라이트 모드: 사용자 선호도에 따른 테마 전환
• 반응형 디자인: 모바일, 태블릿, 데스크톱 모든 기기 지원
• 실시간 검색: 전체 콘텐츠 검색 기능
• 목차 자동 생성: 문서 구조에 따른 동적 목차

🔧 편집 기능

• 이미지 붙여넣기: 클립보드에서 이미지를 직접 붙여넣기
• 드래그 앤 드롭: 파일 탐색기에서 이미지 파일 드래그
• 실시간 저장: 편집 내용 자동 저장
• 코드 하이라이팅: 구문 강조 지원

📁 프로젝트 구조

poc/
├── index.html              # 메인 페이지 (SPA)
├── css/
│   ├── style.css           # 메인 스타일
│   ├── markdown.css        # 마크다운 스타일
│   └── editor.css          # 에디터 스타일
├── js/
│   ├── main.js             # 메인 애플리케이션 로직
│   ├── editor.js           # 에디터 관리
│   ├── markdown.js         # 마크다운 렌더링
│   └── toc.js              # 목차 생성
├── content/
│   ├── config.json         # 메뉴 구성
│   └── guides/             # 마크다운 문서들
│       ├── getting-started/
│       ├── basic/
│       ├── advanced/
│       ├── troubleshooting/
│       └── reference/
└── assets/                 # 이미지 및 기타 자산

🛠️ 기술 스택

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• 에디터: Monaco Editor (VS Code 기반)
• 마크다운: Marked.js
• 코드 하이라이팅: Highlight.js
• 스타일링: CSS Custom Properties (CSS Variables)
• 아이콘: Emoji 및 SVG

🚀 시작하기

로컬 개발 서버 실행

# Python 3
python -m http.server 8000

# 또는 Node.js
npx http-server

# 또는 PHP
php -S localhost:8000

브라우저에서 http://localhost:8000으로 접속하세요.

주요 기능 사용법

1. 편집 모드 전환

• 헤더의 ✏️ 버튼을 클릭하여 편집 모드로 전환
• 실시간 미리보기와 함께 편집 가능

2. 이미지 삽입

• 편집 모드에서 "이미지 삽입" 버튼 클릭
• 드래그 앤 드롭으로 이미지 파일 업로드
• 클립보드에서 Ctrl+V로 이미지 붙여넣기

3. 테마 변경

• 헤더의 🌙/☀️ 버튼으로 다크/라이트 모드 전환
• 설정이 로컬 스토리지에 자동 저장

4. 검색 기능

• 헤더의 🔍 버튼으로 검색 패널 열기
• 실시간 검색 결과 표시

📝 콘텐츠 작성 가이드

마크다운 문법 지원

• 제목 (H1~H6)
• 목록 (순서 있는/없는)
• 링크 및 이미지
• 코드 블록 (구문 강조)
• 표
• 인용문
• 강조 (굵게, 기울임)

이미지 관리

• 지원 형식: PNG, JPG, JPEG, GIF, WebP
• 최대 크기: 10MB
• 자동 압축 및 최적화

🔧 커스터마이징

메뉴 구조 변경

content/config.json 파일을 수정하여 메뉴 구조를 변경할 수 있습니다.

{
  "menu": [
    {
      "title": "섹션 제목",
      "items": [
        {
          "title": "페이지 제목",
          "file": "파일경로.md",
          "description": "설명"
        }
      ]
    }
  ]
}

스타일 커스터마이징

CSS 변수를 수정하여 테마를 커스터마이징할 수 있습니다.

:root {
  --primary-color: #your-color;
  --bg-primary: #your-bg-color;
  /* 기타 변수들 */
}

🌟 주요 개선사항

v2.0 (현재 버전)

• ✅ SPA 방식으로 변경하여 리다이렉트 문제 해결
• ✅ Monaco Editor 기반 실시간 에디터 추가
• ✅ 이미지 복사/붙여넣기 기능 구현
• ✅ 드래그 앤 드롭 이미지 업로드
• ✅ 실시간 미리보기 기능
• ✅ URL 기반 라우팅 지원
• ✅ 로컬 스토리지 임시 저장

v1.0 (이전 버전)

• 기본 마크다운 뷰어
• 사이드바 네비게이션
• 검색 기능
• 다크/라이트 모드

🤝 기여하기

1. 이 저장소를 포크합니다
2. 기능 브랜치를 생성합니다 (git checkout -b feature/amazing-feature)
3. 변경사항을 커밋합니다 (git commit -m 'Add amazing feature')
4. 브랜치에 푸시합니다 (git push origin feature/amazing-feature)
5. Pull Request를 생성합니다

📄 라이선스

이 프로젝트는 MIT 라이선스 하에 배포됩니다.

🆘 문제 해결

일반적인 문제들

Q: 이미지가 업로드되지 않습니다 A: 브라우저의 클립보드 접근 권한을 확인하세요.

Q: 에디터가 로드되지 않습니다 A: 인터넷 연결을 확인하고 Monaco Editor CDN 접근이 가능한지 확인하세요.

Q: 저장이 되지 않습니다 A: 브라우저의 로컬 스토리지 권한을 확인하세요.

📞 지원

문제가 발생하거나 기능 요청이 있으시면 이슈를 생성해 주세요.