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), can_manage로 관리 권한을 DB에서 제어하려면 Node 서버로 실행하세요.

1. 의존성 설치

npm install

2. 테이블 생성

psql -h "$DB_HOST" -p "$DB_PORT" -U "$DB_USER" -d "$DB_NAME" -f db/schema.sql

3. 서버 실행

npm start

권한 부여

최초 로그인 사용자는 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 연결로 구성합니다.

설정 방법:

1. Auth0에서 Single Page Application 생성
2. index.html의 window.AUTH_CONFIG에 domain, clientId 입력
3. Auth0 Application 설정에서 아래 URL들을 등록
   • Allowed Callback URLs: 사이트 주소 (예: https://example.com/)
   • Allowed Logout URLs: 사이트 주소 (예: https://example.com/)
4. allowedEmails에 관리 허용 이메일 목록을 입력

팁:

• 서버에 바로 반영하기 전 테스트가 필요하면, 페이지 상단의 로그인을 누르면 뜨는 로그인 설정 모달에서 domain/clientId/allowedEmails를 입력하면 브라우저에 저장되어 즉시 테스트할 수 있습니다.
• Auth0에서 각 소셜 로그인 연결(connection)을 만들었다면, 모달의 connection 이름(예: google-oauth2, kakao, naver)을 입력하면 상단에 구글/카카오/네이버 간편 로그인 버튼이 표시됩니다.

데이터 저장

• 기본 링크: links.json
• 사용자가 추가/편집/삭제한 내용: 브라우저 localStorage에 저장됩니다.
• 내보내기: 현재 화면 기준 링크를 JSON으로 다운로드합니다.
• 가져오기: 내보내기 JSON(배열 또는 {links:[...]})을 다시 불러옵니다.