DOCS/plans/250828_frontend_slack_login_mockup_plan.md

# Frontend Slack 로그인 목업 구현 계획

**작성일**: 2025-08-28  
**작성자**: 51123 서버 관리자  
**상태**: 🟡 계획  
**목표**: Frontend에 Slack으로 회원가입/로그인 목업 구현

---

## 1. 개요

Google OAuth 외에 Slack으로도 처음 회원가입/로그인 가능하도록 Frontend 목업 구현. 
- **회원가입**: 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/callback`

---

## 2. 목업 구현 (Phase 1)

### 2.1 UI 컴포넌트
```typescript
// components/slack-login-button.tsx
const SlackLoginButton = () => {
  return (
    <button 
      className="slack-login-btn"
      onClick={handleMockLogin}
    >
      <img src="/assets/integrations/slack-logo.svg" />
      Sign in with Slack
    </button>
  );
};
```

### 2.2 목업 로그인 핸들러
```typescript
const handleMockLogin = () => {
  // Slack이 제공하는 사용자 정보 시뮬레이션
  const slackUserInfo = {
    slack_id: 'U_NEW_USER_001',
    email: 'john.doe@slack-team.com',
    real_name: 'John Doe',
    display_name: 'johndoe',  // Slack 프로필 표시 이름
  };
  
  // Username 생성 우선순위
  const generateUsername = (info) => {
    // 1순위: display_name
    if (info.display_name) return info.display_name;
    // 2순위: email @ 앞부분
    if (info.email) return info.email.split('@')[0];
    // 3순위: real_name 첫 단어 (소문자)
    if (info.real_name) return info.real_name.split(' ')[0].toLowerCase();
    // 4순위: slack_{slack_id[:8]} 기본값
    return `slack_${info.slack_id.substring(0, 8)}`;
  };
  
  const newSlackUser = {
    ...slackUserInfo,
    username: generateUsername(slackUserInfo),  // 'johndoe'
    uuid: 'mock-uuid-' + Date.now()
  };
  
  // 목업 JWT 생성
  const mockToken = btoa(JSON.stringify({
    username: newSlackUser.username,
    email: newSlackUser.email,
    provider: 'slack',
    exp: Date.now() + 86400000
  }));
  
  // localStorage 키 (문서 확인됨)
  localStorage.setItem('token', mockToken);  // 또는 'auth_token'
  localStorage.setItem('authProvider', 'slack');  // Google과 구분
  
  // 로그인 후 원래 페이지로 복귀
  const redirectPath = localStorage.getItem('redirectAfterLogin') || '/';
  localStorage.removeItem('redirectAfterLogin');
  window.location.href = redirectPath;
};
```

---

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

### 3.1 환경변수 설정
```bash
# frontend-customer/.env
VITE_API_URL=http://localhost:8001
VITE_ROBING_API_URL=https://ro-being.com/gateway
VITE_SLACK_CLIENT_ID=9073915808149.9085704341778
VITE_AUTH_SERVER_URL=https://auth.ro-being.com
```

### 3.2 OAuth URL 생성
```typescript
const generateSlackAuthUrl = () => {
  const state = crypto.randomUUID();
  sessionStorage.setItem('slack_oauth_state', state);
  
  return `https://slack.com/oauth/v2/authorize?` +
    `client_id=${SLACK_CLIENT_ID}&` +
    `scope=openid,profile,email&` +
    `redirect_uri=${encodeURIComponent(REDIRECT_URI)}&` +
    `state=${state}`;
};
```

### 3.3 auth-server 연동 
**현재 구현된 엔드포인트:**
- **Slack 매핑 API**: `GET /api/slack/mapping/{slack_user_id}` ✅ 동작 확인
  - 반환: `{ user_id, username, email, robeing_id }`

**구현 필요한 엔드포인트:**
- **로그인 시작**: `/auth/slack/login` (미구현)
- **콜백 처리**: `/auth/slack/callback` (미구현)
- **사용자 정보**: `openid.connect.userInfo` 호출로 email, real_name, display_name 획득
- **Username 생성**: display_name > email@ 앞 > real_name 첫단어 > slack_ID 순
- **UUID 생성**: UUID5(namespace='6ba7b810-9dad-11d1-80b4-00c04fd430c8', slack_user_id)

### 3.4 Frontend 구현 필요사항
**현재 Frontend 구조:**
- 라우터: wouter 사용
- 페이지: `src/pages/` (landing, game-dashboard, inventory, ir-presentation)

**구현 필요:**
```typescript
// src/pages/slack-callback.tsx (생성 필요)
const handleSlackLogin = () => {
  const currentPath = window.location.pathname;
  localStorage.setItem('redirectAfterLogin', currentPath);
  // Slack OAuth로 리다이렉트
};
```

---

## 4. 구현 체크리스트

### Frontend 작업
- [ ] Slack 로그인 버튼 컴포넌트 생성
- [ ] 환경변수 추가 (VITE_SLACK_CLIENT_ID, VITE_AUTH_SERVER_URL)
- [ ] OAuth state 관리 (sessionStorage)
- [ ] 콜백 페이지 라우팅 추가
- [ ] JWT 토큰 저장 및 검증 로직

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

---

## 5. 테스트 시나리오

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