9fe71ad6a4d862fb1fc48c17b7aaf7203ffe5820
- Flask로 /api/* 및 정적 파일 서빙 - Postgres(ncue_user/ncue_app_config) 연동 및 Auth0 ID 토큰 검증 - README/requirements/.gitignore 업데이트 Co-authored-by: Cursor <cursoragent@cursor.com>
Links (개인 링크 홈)
정적 파일(HTML/CSS/JS)만으로 만든 개인 링크 대시보드입니다.
사용법
-
가장 간단한 방법:
index.html을 브라우저로 열기- 즐겨찾기/추가/편집/삭제/정렬/검색/가져오기/내보내기 기능은 정상 동작합니다.
- 기본 링크 목록은
index.html내부의linksData(JSON)에서 읽기 때문에 파이썬 실행 없이도 순서가 그대로 반영됩니다.
-
(선택)
links.json을 별도 파일로 운용하고 싶다면 로컬 서버로 실행
python3 -m http.server 8000
그 후 브라우저에서 http://localhost:8000으로 접속합니다.
서버(Node) + PostgreSQL 사용자 저장
로그인 후 사용자 정보를 ncue_user에 저장하고(Upsert), 로그인/로그아웃 시간을 기록하며,
/api/config/auth로 Auth0 설정을 공유하려면 백엔드 서버가 필요합니다.
현재 백엔드는 Python Flask(기본 포트 8023) 로 제공합니다. (정적 HTML/JS는 그대로 사용 가능)
- 의존성 설치(Python)
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
- 테이블 생성
psql -h "$DB_HOST" -p "$DB_PORT" -U "$DB_USER" -d "$DB_NAME" -f db/schema.sql
- 서버 실행
python flask_app.py
기본적으로 .env의 ADMIN_EMAILS에 포함된 이메일은 can_manage=true로 자동 승격됩니다.
(선택) 역프록시/분리 배포
- Flask가 정적까지 함께 서빙:
http://ncue.net:8023로 접속 (same-origin) - 정적은 별도 호스팅 + API만 Flask:
index.html의window.AUTH_CONFIG.apiBase에 API 주소를 넣고, Flask에서는CORS_ORIGINS로 허용 도메인을 지정하세요.
최초 로그인 사용자는 DB에 저장되지만 can_manage=false입니다. 관리 권한을 주려면:
update ncue_user set can_manage = true where email = 'me@example.com';
로그인(관리 기능 잠금)
이 프로젝트는 정적 사이트에서 동작하도록, 관리 기능(추가/편집/삭제/가져오기)을 로그인 후(관리자 이메일) 에만 활성화할 수 있습니다.
- 지원 방식: Auth0 SPA SDK + Auth0 Universal Login
- 구글/카카오/네이버: Auth0 대시보드에서 Social/Custom OAuth 연결로 구성합니다.
설정 방법(.env):
- Auth0에서 Single Page Application 생성
.env에 아래 값을 설정AUTH0_DOMAINAUTH0_CLIENT_IDAUTH0_GOOGLE_CONNECTION(예:google-oauth2)ADMIN_EMAILS(예:dosangyoon@gmail.com,dsyoon@ncue.net)
- Auth0 Application 설정에서 아래 URL들을 등록
- Allowed Callback URLs: 사이트 주소 (예:
https://example.com/) - Allowed Logout URLs: 사이트 주소 (예:
https://example.com/)
- Allowed Callback URLs: 사이트 주소 (예:
데이터 저장
- 기본 링크:
links.json - 사용자가 추가/편집/삭제한 내용: 브라우저
localStorage에 저장됩니다. - 내보내기: 현재 화면 기준 링크를 JSON으로 다운로드합니다.
- 가져오기: 내보내기 JSON(배열 또는
{links:[...]})을 다시 불러옵니다.
Description
Languages
JavaScript
42.3%
HTML
31.7%
Python
15.6%
CSS
10.4%