SNS 대시보드에서 X에 자동발행 성공

소개

시도하고자 했던 것과 그 이유

React + Supabase 기반의 SNS 통합 대시보드를 직접 실습해보고, X(Twitter) 자동 발행 기능까지 연동하는 것을 목표로 했습니다. 여러 SNS 플랫폼을 하나의 화면에서 관리하고, AI로 초안을 자동 생성한 뒤 X에 바로 발행하는 워크플로우를 구현하고 싶었습니다.

진행 방법

사용 도구: Claude Code, React + Vite, Supabase, Supabase Edge Functions

주요 프롬프트:

"아래의 설명을 참고해서 SNS 대시보드에 연동 관리 메뉴 생성해줘"

진행 과정:

1. GitHub 저장소 클론 및 로컬 실행

2. Supabase 프로젝트 생성 → .env 파일 설정

3. SQL Editor에서 테이블 5개 생성 (contents, sns_credentials, service_credentials, settings, members)

4. 연동 관리에서 X API 키 입력 및 저장

5. Supabase CLI로 post-x Edge Function 배포

6. 콘텐츠 작성 → 초안 자동 생성 → X 발행 성공 ✅

결과와 배운 점

• 성공: X(Twitter) 실제 발행까지 완료

• 시행착오: Supabase 프로젝트가 두 개라 계정 혼선이 있었음 → CLI 로그인 계정과 .env 프로젝트를 일치시켜야 한다는 것을 배움

• 배운 점: Edge Function은 배포하지 않으면 "Failed to send a request" 오류가 나고, 배포 후에도 DB에 키가 없으면 non-2xx 오류가 남 → 순서가 중요함

• 꿀팁: supabase projects list로 CLI 로그인된 계정의 프로젝트를 먼저 확인하면 혼선을 줄일 수 있음

도움 받은 글

• sns-dashboard-study GitHub

• Supabase 공식 문서 (Edge Functions, SQL Editor)

  

  ALT

  한국 트위터 계정 스크린샷

  

  ALT

  kodex라는 버튼이 있는 한국 웹사이트