DOCS/troubleshooting/250829_frontend_slack_login_mockup_completed.md

Frontend Slack 로그인 목업 구현 계획

작성일: 2025-08-28
작성자: 51123 서버 관리자
상태: ✅ 완료 (2025-08-29)
목표: Frontend에 Slack으로 회원가입/로그인 목업 구현

---

1. 개요

Google OAuth와 Slack 로그인 모두 레벨과 무관하게 제공. Frontend 목업 구현.

• 모든 레벨: Google OAuth + Slack 로그인 (둘 다 사용 가능)
• 레벨 2: Gmail 권한 아이템 획득
• 레벨 3: Slack 아이템 획득 (봇 설치, 대화 동기화 등)
• 회원가입: Slack 계정으로 처음 로그인하는 사용자도 자동 가입
• 현재 목표: Frontend 목업만 구현, auth-server 연동은 향후 과제

확인된 설정 (auth-server/.env)

• Slack Client ID: 9073915808149.9085704341778
• Slack Client Secret: 5f8701a3c97a9e0b406817f44f5dbb5f
• Redirect URI: https://auth.ro-being.com/auth/slack/login/callback

---

2. 백엔드 통합 계획

상세 구현은 250828_slack_integration_level3_plan.md 참조

핵심 요약:

• Phase 1: Sign in with Slack (OIDC 로그인)
  • /auth/slack/login/: OAuth URL 생성 및 리다이렉트
  • /auth/slack/login/callback: 토큰 교환, UUID 매핑, JWT 발급
• Phase 2: Slack 패스포트 (레벨 3 아이템)
  • /auth/slack/passport/*: Gmail과 동일한 패스포트 구조
  • 봇 설치, workspace 토큰 저장, 활성화/비활성화
• Phase 3: 대화 동기화 (Slack ↔ Frontend)

---

3. Frontend 목업 구현

3.1 UI 컴포넌트

Slack 로그인 버튼 추가

3.2 목업 로그인 핸들러

Username 생성 우선순위: display_name → email@ 앞부분 → real_name → slack_{id[:8]}

---

4. 향후 auth-server 연동 계획

4.1 환경변수 설정

# frontend-customer/.env
VITE_API_URL=http://localhost:8001
VITE_ROBING_API_URL=https://ro-being.com/gateway
VITE_AUTH_SERVER_URL=https://auth.ro-being.com

4.2 OAuth URL 생성

state 생성 → sessionStorage 저장 → Slack OAuth URL 생성

4.3 auth-server 연동

- OAuth 로그인: `${VITE_AUTH_SERVER_URL}/auth/slack/login/` 직접 연결
- API 호출: `/api/auth/slack/passport/*` Gateway 경유

4.4 JWT 및 Storage 정책

• localStorage: token 키로 통일 (auth_token 사용 안함)
• JWT 만료: 24시간, refresh token 없음
• OAuth State: sessionStorage 사용
• User ID: UUID 형식으로 저장 현재 구현된 엔드포인트:
• Slack 매핑 API: GET /api/slack/mapping/{slack_user_id} ✅ 동작 확인
  • 반환: { user_id, username, email, robeing_id }

구현 필요한 엔드포인트:

• 로그인 시작: /auth/slack/login/ (미구현)
• 콜백 처리: /auth/slack/login/callback (미구현)
• 사용자 정보: openid.connect.userInfo 호출로 email, real_name, display_name 획득
• Username 생성: display_name > email@ 앞 > real_name 첫단어 > slack_ID 순
• UUID 생성: slack_user_mapping 테이블 조회, 없으면 uuid4() 생성 후 저장

4.5 Frontend 구현 필요사항

현재 Frontend 구조:

• 라우터: wouter 사용
• 페이지: src/pages/ (landing, game-dashboard, inventory, ir-presentation)

구현 필요:

• src/pages/slack-callback.tsx 페이지 생성
• OAuth 콜백 처리 로직

---

5. 구현 체크리스트

Frontend 작업

• Slack 로그인 버튼 컴포넌트 생성 ✅ (2025-08-29)
• 환경변수 추가 (VITE_AUTH_SERVER_URL) ✅
• login-dialog.tsx에 Slack 버튼 추가 ✅
• auth-context.tsx에 loginWithSlack 함수 추가 ✅
• OAuth state 관리 (sessionStorage) - auth-server 구현 대기
• 콜백 페이지 라우팅 추가 - auth-server 구현 대기

auth-server 확인사항

• Slack Client ID/Secret 설정 (.env에 존재)
• /api/slack/mapping/{slack_id} API 동작 확인
• /auth/slack/login/ 엔드포인트 (미구현)
• /auth/slack/login/callback 엔드포인트 (미구현)
• JWT 발급 로직 (미구현)

---

6. 테스트 시나리오

1. 목업 테스트 (현재 단계)

   • Slack 로그인 버튼 UI 확인
   • localStorage에 'token' 키로 저장 확인
   • authProvider='slack' 설정 확인
   • redirectAfterLogin 처리로 원래 페이지 복귀 확인
   • username='johndoe' 형식 확인

2. 향후 실제 OAuth 테스트

   • Slack OAuth 권한 승인 화면
   • 신규 가입자 UUID 자동 생성
   • 기존 사용자 로그인 처리

---

6. 주의사항

• 목업 단계: 실제 Slack API 연동 없이 Frontend만 구현
• 회원가입 플로우: Slack 로그인 = 자동 회원가입 (Google OAuth와 동일)
• Slack 권한: 로그인용 최소 권한만, 추가 권한은 아이템으로 관리
• Provider 구분: Google/Slack 로그인 구분 필요 (authProvider 저장)