# 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](../plans/250828_slack_integration_level3_plan.md) 참조

---

## 3. Frontend 목업 구현

### 3.1 UI 컴포넌트
Slack 로그인 버튼 추가

### 3.2 목업 로그인 핸들러
Username 생성 우선순위: display_name → email@ 앞부분 → real_name → slack_{id[:8]}

---

## 4. 향후 auth-server 연동 계획

### 4.1 환경변수 설정
```bash
# 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 연동

```typescript
- 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 작업
- [x] Slack 로그인 버튼 컴포넌트 생성 ✅ (2025-08-29)
- [x] 환경변수 추가 (VITE_AUTH_SERVER_URL) ✅
- [x] login-dialog.tsx에 Slack 버튼 추가 ✅
- [x] auth-context.tsx에 loginWithSlack 함수 추가 ✅
- [ ] OAuth state 관리 (sessionStorage) - auth-server 구현 대기
- [ ] 콜백 페이지 라우팅 추가 - auth-server 구현 대기

### auth-server 확인사항
- [x] Slack Client ID/Secret 설정 (.env에 존재)
- [x] `/api/slack/mapping/{slack_id}` API 동작 확인
- [x] `/auth/slack/login/` 엔드포인트 (목업 구현 2025-08-29)
- [x] `/auth/slack/login/callback` 엔드포인트 (목업 구현)
- [x] `/auth/slack/passport/install?user_id={user_id}` (목업 구현, Gmail 패턴 통일)
- [ ] JWT 발급 로직 (TODO 구현 필요)

---

## 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 저장)