Notion Page Viewer

# 📄 Notion Page Viewer Notion 페이지의 컨텐츠를 웹에서 볼 수 있는 Streamlit 앱입니다. ## ✨ 주요 기능 ### 🔍 **4가지 보기 모드** 1. **전체 컨텐츠** - 토글, 이미지, 하위 페이지까지 모든 컨텐츠 표시 2. **제목 + 이미지** - 메인페이지의 제목과 이미지만 표시 3. **하위 페이지** - 연결된 하위 페이지들의 제목 리스트 4. **원본 데이터** - JSON 형태의 원본 데이터 (디버깅용) ## 🚀 빠른 시작 ### 1. 설치 ```bash git clone https://github.com/ar-codelabs/MCP_NotionMCP_Webviewer.git cd MCP_notion_webviewer # 설치 pip install -r requirements.txt ``` ### 2. Notion 설정 1. [developers.notion.com/](https://www.notion.so/profile/integrations))에서 Integration 생성 2. Integration Token 복사 3. 보고 싶은 Notion 페이지에 Integration 연결 4. 페이지 ID 복사 (URL에서 추출) ### 3. 설정 파일 수정 (Notion) `application/mcp.json` 파일에서: ```json { "mcpServers": { "notion": { "command": "python3", "args": ["./application/mcp_server_notion.py"], "env": { "NOTION_API_KEY": "your_notion_integration_token", "NOTION_PAGE_ID": "your_notion_page_id" } } } } ``` ### 4. 실행 ```bash streamlit run application/app_webview_mcp_simple.py ``` ## 📖 사용 방법 ### 1. 웹 앱 접속 - 브라우저에서 접속 ### 2. 4가지 버튼 활용 - **🔍 전체 컨텐츠**: 페이지의 모든 내용을 구조적으로 표시 - **🖼️ 제목 + 이미지**: 제목과 이미지만 깔끔하게 정리해서 표시 - **📑 하위 페이지**: 연결된 하위 페이지들의 제목 목록과 링크 - **🔧 원본 데이터**: 개발자용 JSON 데이터 확인 ### 3. 지원하는 Notion 블록 - 텍스트 (paragraph) - 헤딩 (heading_1, heading_2, heading_3) - 리스트 (bulleted_list_item, numbered_list_item) - 토글 (toggle) - 이미지 (image) - 코드 (code) - 인용문 (quote) - 컬럼 (column_list, column) - 하위 페이지 (child_page) ## 🔧 고급 설정 ### Notion 페이지 ID 찾기 1. Notion 페이지 URL: `https://notion.so/페이지제목-abc123def456...` 2. 마지막 하이픈 뒤의 32자리 문자열이 페이지 ID 3. 하이픈 제거: `abc123def456...` ### 포트 변경 ```bash # MCP 방식 streamlit run application/app_webview_mcp_simple.py --server.port 8502 ``` ## 🛠️ 기술 스택 ### 공통 - **Frontend**: Streamlit - **API**: Notion API (notion-client) - **Language**: Python 3.8+ ### MCP 방식 추가 - **MCP**: Model Context Protocol - **Architecture**: Server-Client 분리 - **Modularity**: 재사용 가능한 MCP 서버 ## 📝 주의사항 - Notion Integration에 페이지 읽기 권한이 있어야 합니다 - 이미지는 Notion의 임시 URL을 사용하므로 일정 시간 후 만료될 수 있습니다 - 대용량 페이지의 경우 로딩 시간이 길어질 수 있습니다