Instagram 토큰 갱신 · SNS 토큰 관리 UI 추가
Instagram 액세스 토큰이 만료돼 발행이 안 되는 문제를 해결하고, 토큰 잔여일 표시 및 수동 갱신 UI를 추가한 날입니다.
Instagram 토큰 만료 문제
SNS 동시발행 시 "Invalid OAuth access token - Cannot parse access token" 에러가 발생했습니다.
Instagram 장기 토큰은 60일 유효기간을 가집니다. 기존 코드에도 갱신 로직이 있었지만, API 호출 시 401 응답이 왔을 때만 갱신을 시도하는 구조였습니다. 문제는 토큰이 완전히 만료되면 401이 아니라 파싱 불가 에러가 오기 때문에 갱신 자체도 실패합니다. 한동안 Instagram 발행을 하지 않아서 토큰이 그 사이 만료된 겁니다.
Pinterest는 핀을 올릴 때마다 토큰을 갱신하는 구조여서 이 문제가 없었습니다.
새 토큰을 Meta Graph API Explorer에서 발급받아 .env.local과 Netlify 환경변수에 업데이트해서 해결했습니다.
SNS 토큰 관리 UI 추가
같은 문제가 반복되지 않도록 글쓰기 어드민 페이지 SNS 섹션에 토큰 관리 UI를 추가했습니다.
구성 요소
플랫폼별로 한 줄씩, pill 배지 두 개와 갱신 버튼으로 구성됩니다.
[Instagram 토큰] [잔여 58일] [↺ 갱신]
[Pinterest 토큰] [잔여 22일] [↺ 갱신]
잔여일 배지는 일수에 따라 색이 바뀝니다. 15일 이상은 초록, 7~14일은 노랑, 7일 미만은 빨강입니다. 갱신 버튼을 누르면 즉시 갱신되고 잔여일이 업데이트됩니다.
구현 내용
meta.ts: Instagram 갱신 시 만료일을SiteConfigDB에 저장pinterest.ts: Pinterest 갱신 시 만료일 저장 추가/api/sns/token-status: 플랫폼별 잔여 일수 반환/api/sns/refresh-token: Instagram / Pinterest 수동 갱신 APIwrite/page.tsx: 토큰 상태 표시 및 갱신 버튼 UI
토큰을 한 번도 이 시스템으로 갱신한 적이 없으면 만료일이 DB에 없어서 배지가 —으로 표시됩니다. 갱신 버튼을 한 번 누르면 만료일이 저장되고 이후부터 잔여일이 표시됩니다.
관련 게시글