API key authentication

1

api_key: "[YOUR_API_KEY]"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# Python으로 구현한 API 키 생성 예시
import secrets
import base64
import hashlib
import time

def generate_api_key(client_id, prefix=""):
    """안전한 API 키 생성"""
    # 랜덤 바이트 생성
    random_bytes = secrets.token_bytes(32)
    
    # 타임스탬프 추가
    timestamp = int(time.time()).to_bytes(8, 'big')
    
    # 클라이언트 ID 해싱
    client_hash = hashlib.sha256(client_id.encode()).digest()[:8]
    
    # 모든 요소 결합
    key_material = random_bytes + timestamp + client_hash
    
    # Base64로 인코딩하고 URL 안전하게 만듦
    encoded_key = base64.urlsafe_b64encode(key_material).decode('utf-8')
    
    # 접두사 추가 (예: 환경 또는 권한 수준)
    if prefix:
        encoded_key = f"{prefix}_{encoded_key}"
    
    return encoded_key

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

// 서버에 API 키를 저장하는 예시 (Node.js/MongoDB)
const mongoose = require('mongoose');
const bcrypt = require('bcrypt');

const apiKeySchema = new mongoose.Schema({
  clientId: { type: String, required: true, unique: true },
  apiKey: { type: String, required: true },
  // 해싱된 키 값을 저장
  apiKeyHash: { type: String, required: true },
  scopes: [String],
  createdAt: { type: Date, default: Date.now },
  expiresAt: { type: Date, required: true },
  lastUsed: Date,
  rateLimit: {
    requests: { type: Number, default: 1000 },
    perTimeWindow: { type: Number, default: 3600 } // 초 단위
  }
});

// 키를 해시하여 저장
apiKeySchema.pre('save', async function(next) {
  if (this.isModified('apiKey')) {
    this.apiKeyHash = await bcrypt.hash(this.apiKey, 10);
    // 저장 후에는 원본 키를 데이터베이스에서 제거
    // 이것은 해시 값만 데이터베이스에 유지하기 위한 것
    this.apiKey = undefined;
  }
  next();
});

// API 키 검증 메서드
apiKeySchema.methods.verifyKey = async function(providedKey) {
  return await bcrypt.compare(providedKey, this.apiKeyHash);
};

const ApiKey = mongoose.model('ApiKey', apiKeySchema);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

# Flask에서 API 키 검증 미들웨어 예시
from flask import Flask, request, jsonify
from functools import wraps
import redis
import time

app = Flask(__name__)
redis_client = redis.Redis(host='localhost', port=6379, db=0)

def require_api_key(f):
    @wraps(f)
    def decorated_function(*args, **kwargs):
        api_key = request.headers.get('X-API-Key')
        
        if not api_key:
            return jsonify({"error": "API 키가 제공되지 않았습니다"}), 401
        
        # 데이터베이스에서 키 검증
        key_data = validate_key_from_db(api_key)
        if not key_data:
            return jsonify({"error": "유효하지 않은 API 키"}), 401
        
        # 키가 만료되었는지 확인
        if key_data.get('expires_at') and key_data['expires_at'] < time.time():
            return jsonify({"error": "API 키가 만료되었습니다"}), 401
        
        # 속도 제한 확인
        rate_limit_key = f"rate_limit:{api_key}"
        current_count = redis_client.get(rate_limit_key)
        
        if current_count and int(current_count) >= key_data['rate_limit']['requests']:
            return jsonify({"error": "속도 제한 초과"}), 429
        
        # 요청 카운터 증가
        if not current_count:
            redis_client.setex(rate_limit_key, 
                              key_data['rate_limit']['per_time_window'], 
                              1)
        else:
            redis_client.incr(rate_limit_key)
        
        # API 키 사용 로그 기록
        log_api_key_usage(api_key, request.path, request.method)
        
        # 요청 객체에 클라이언트 정보 추가
        request.client_id = key_data['client_id']
        request.api_key_scopes = key_data['scopes']
        
        return f(*args, **kwargs)
    return decorated_function

@app.route('/api/data')
@require_api_key
def get_data():
    # API 키 범위(scopes) 확인
    if 'read:data' not in request.api_key_scopes:
        return jsonify({"error": "권한 부족"}), 403
    
    # API 엔드포인트 로직
    return jsonify({"data": "요청한 데이터"})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

// Express.js에서 API 키 취소 및 갱신 API 예시
const express = require('express');
const router = express.Router();

// API 키 취소
router.post('/api-keys/:id/revoke', async (req, res) => {
  try {
    const { id } = req.params;
    
    // 키 소유권 확인
    const apiKey = await ApiKey.findById(id);
    if (!apiKey || apiKey.userId !== req.user.id) {
      return res.status(404).json({ error: '키를 찾을 수 없음' });
    }
    
    // 키 취소 (즉시 또는 마감일 설정)
    apiKey.revokedAt = new Date();
    apiKey.status = 'revoked';
    await apiKey.save();
    
    // 취소된 키 캐시 업데이트
    await updateRevokedKeysCache();
    
    return res.json({ message: 'API 키가 성공적으로 취소되었습니다' });
  } catch (error) {
    console.error('API 키 취소 오류:', error);
    return res.status(500).json({ error: '내부 서버 오류' });
  }
});

// API 키 갱신
router.post('/api-keys/:id/refresh', async (req, res) => {
  try {
    const { id } = req.params;
    
    // 키 소유권 확인
    const apiKey = await ApiKey.findById(id);
    if (!apiKey || apiKey.userId !== req.user.id) {
      return res.status(404).json({ error: '키를 찾을 수 없음' });
    }
    
    if (apiKey.status === 'revoked') {
      return res.status(400).json({ error: '취소된 키는 갱신할 수 없습니다' });
    }
    
    // 새 키 생성 및 기존 키 마킹
    const newKey = generateApiKey(req.user.id, apiKey.prefix);
    
    // 기존 키를 취소하고 새 키 저장
    apiKey.status = 'replaced';
    apiKey.replacedBy = newKey.id;
    await apiKey.save();
    
    // 유예 기간 설정 (이전 키가 일정 기간 동안 계속 작동)
    const graceEnd = new Date();
    graceEnd.setDate(graceEnd.getDate() + 30); // 30일 유예 기간
    
    await ApiKey.create({
      _id: newKey.id,
      key: newKey.key,
      keyHash: await hashKey(newKey.key),
      userId: req.user.id,
      prefix: apiKey.prefix,
      scopes: apiKey.scopes,
      expiresAt: apiKey.expiresAt,
      replacesKey: apiKey._id,
      graceEnd: graceEnd
    });
    
    return res.json({
      message: '새 API 키가 생성되었습니다',
      newKey: newKey.key,
      graceEnd: graceEnd
    });
  } catch (error) {
    console.error('API 키 갱신 오류:', error);
    return res.status(500).json({ error: '내부 서버 오류' });
  }
});

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

// Node.js Express로 구현한 간단한 API 게이트웨이 예시
const express = require('express');
const rateLimit = require('express-rate-limit');
const { createProxyMiddleware } = require('http-proxy-middleware');
const jwt = require('jsonwebtoken');

const app = express();

// API 키 인증 미들웨어
const apiKeyAuth = (req, res, next) => {
  const apiKey = req.headers['x-api-key'];
  
  if (!apiKey) {
    return res.status(401).json({ error: 'API 키가 필요합니다' });
  }
  
  // API 키 검증 로직
  validateApiKey(apiKey)
    .then(keyData => {
      if (!keyData) {
        return res.status(401).json({ error: '유효하지 않은 API 키' });
      }
      
      req.clientId = keyData.clientId;
      req.scopes = keyData.scopes;
      next();
    })
    .catch(err => {
      console.error('API 키 검증 오류:', err);
      res.status(500).json({ error: '내부 서버 오류' });
    });
};

// JWT 인증 미들웨어
const jwtAuth = (req, res, next) => {
  const authHeader = req.headers.authorization;
  
  if (!authHeader || !authHeader.startsWith('Bearer ')) {
    return res.status(401).json({ error: '유효한 JWT가 필요합니다' });
  }
  
  const token = authHeader.split(' ')[1];
  
  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded;
    next();
  } catch (err) {
    return res.status(401).json({ error: '유효하지 않은 토큰' });
  }
};

// 속도 제한 미들웨어
const apiLimiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15분
  max: 100, // IP당 최대 요청 수
  standardHeaders: true,
  message: { error: '너무 많은 요청, 나중에 다시 시도하세요' }
});

// 로깅 미들웨어
const loggingMiddleware = (req, res, next) => {
  const start = Date.now();
  
  res.on('finish', () => {
    const duration = Date.now() - start;
    console.log(`${req.method} ${req.originalUrl} ${res.statusCode} ${duration}ms`);
    
    // 상세 로그 기록
    logApiCall({
      clientId: req.clientId || 'anonymous',
      endpoint: req.originalUrl,
      method: req.method,
      statusCode: res.statusCode,
      responseTime: duration,
      timestamp: new Date()
    });
  });
  
  next();
};

// 미들웨어 적용
app.use(loggingMiddleware);
app.use(apiLimiter);

// 사용자 서비스 라우팅
app.use('/api/users',
  apiKeyAuth,
  createProxyMiddleware({
    target: 'http://user-service:3001',
    changeOrigin: true,
    pathRewrite: {
      '^/api/users': '/users' // 경로 재작성
    }
  })
);

// 결제 서비스 라우팅 (JWT 인증 필요)
app.use('/api/payments',
  jwtAuth,
  createProxyMiddleware({
    target: 'http://payment-service:3002',
    changeOrigin: true,
    pathRewrite: {
      '^/api/payments': '/payments'
    }
  })
);

// 공개 서비스 라우팅 (인증 필요 없음)
app.use('/api/public',
  createProxyMiddleware({
    target: 'http://public-service:3003',
    changeOrigin: true,
    pathRewrite: {
      '^/api/public': '/public'
    }
  })
);

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`API 게이트웨이가 포트 ${PORT}에서 실행 중입니다`);
});

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

<!-- 개발자 포털 API 키 관리 인터페이스 예시 (React 컴포넌트) -->
function ApiKeyManagement() {
  const [apiKeys, setApiKeys] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    fetchApiKeys();
  }, []);
  
  const fetchApiKeys = async () => {
    try {
      setLoading(true);
      const response = await fetch('/api/developer/keys', {
        headers: {
          'Authorization': `Bearer ${getAccessToken()}`
        }
      });
      
      if (!response.ok) {
        throw new Error('API 키를 가져오는 데 실패했습니다');
      }
      
      const data = await response.json();
      setApiKeys(data.keys);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  
  const createNewKey = async () => {
    try {
      const response = await fetch('/api/developer/keys', {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${getAccessToken()}`,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          name: 'New API Key',
          scopes: ['read:users', 'write:users']
        })
      });
      
      if (!response.ok) {
        throw new Error('새 키 생성에 실패했습니다');
      }
      
      const data = await response.json();
      alert(`새 API 키가 생성되었습니다: ${data.key}\n이 키는 다시 표시되지 않으므로 안전한 곳에 보관하세요.`);
      
      fetchApiKeys();
    } catch (err) {
      setError(err.message);
    }
  };
  
  const revokeKey = async (keyId) => {
    if (!confirm('이 API 키를 취소하시겠습니까? 이 작업은 되돌릴 수 없습니다.')) {
      return;
    }
    
    try {
      const response = await fetch(`/api/developer/keys/${keyId}/revoke`, {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${getAccessToken()}`
        }
      });
      
      if (!response.ok) {
        throw new Error('키 취소에 실패했습니다');
      }
      
      fetchApiKeys();
    } catch (err) {
      setError(err.message);
    }
  };
  
  if (loading) return <div>로딩 중…</div>;
  if (error) return <div>오류: {error}</div>;
  
  return (
    <div className="api-keys-container">
      <h2>API 키 관리</h2>
      
      <button onClick={createNewKey}>새 API 키 생성</button>
      
      <table className="api-keys-table">
        <thead>
          <tr>
            <th>이름</th>
            <th>접두사</th>
            <th>생성일</th>
            <th>마지막 사용</th>
            <th>상태</th>
            <th>작업</th>
          </tr>
        </thead>
        <tbody>
          {apiKeys.map(key => (
            <tr key={key.id}>
              <td>{key.name}</td>
              <td>{key.prefix}…</td>
              <td>{new Date(key.createdAt).toLocaleDateString()}</td>
              <td>{key.lastUsed ? new Date(key.lastUsed).toLocaleDateString() : '미사용'}</td>
              <td>
                <span className={`status-badge ${key.status}`}>
                  {key.status}
                </span>
              </td>
              <td>
                {key.status === 'active' && (
                  <>
                    <button onClick={() => revokeKey(key.id)}>취소</button>
                    <button onClick={() => refreshKey(key.id)}>갱신</button>
                  </>
                )}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      
      <div className="api-usage">
        <h3>API 사용량</h3>
        <p>이번 달 API 호출: {usage.currentMonth}</p>
        <p>할당량: {usage.quota}</p>
        <progress value={usage.currentMonth} max={usage.quota}></progress>
      </div>
    </div>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

# Flask에서 JWT 및 API 키를 함께 사용하는 예
from flask import Flask, request, jsonify
from functools import wraps
import jwt
import datetime

app = Flask(__name__)
app.config['JWT_SECRET_KEY'] = 'your-secret-key'

def jwt_and_api_key_required(f):
    @wraps(f)
    def decorated(*args, **kwargs):
        token = None
        api_key = None
        
        # JWT 확인
        auth_header = request.headers.get('Authorization')
        if auth_header and auth_header.startswith('Bearer '):
            token = auth_header.split(' ')[1]
        
        if not token:
            return jsonify({'message': 'JWT 토큰이 없습니다!'}), 401
        
        # API 키 확인
        api_key = request.headers.get('X-API-Key')
        if not api_key:
            return jsonify({'message': 'API 키가 없습니다!'}), 401
        
        try:
            # JWT 검증
            data = jwt.decode(token, app.config['JWT_SECRET_KEY'], algorithms=["HS256"])
            current_user = data['sub']
            
            # API 키 검증
            is_valid_key = validate_api_key(api_key, current_user)
            if not is_valid_key:
                return jsonify({'message': '유효하지 않은 API 키!'}), 401
            
            # 추가 컨텍스트 저장
            request.user_id = current_user
            request.api_scopes = get_api_key_scopes(api_key)
            
        except jwt.ExpiredSignatureError:
            return jsonify({'message': '토큰이 만료되었습니다!'}), 401
        except jwt.InvalidTokenError:
            return jsonify({'message': '유효하지 않은 토큰!'}), 401
        except Exception as e:
            return jsonify({'message': f'인증 오류: {str(e)}'}), 401
            
        return f(*args, **kwargs)
    
    return decorated

@app.route('/api/secure-resource')
@jwt_and_api_key_required
def secure_resource():
    # 리소스에 대한 추가 권한 확인
    if 'read:resource' not in request.api_scopes:
        return jsonify({'message': '접근 권한이 없습니다'}), 403
        
    # 리소스 로직 처리
    return jsonify({'data': '보호된 데이터'})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

# FastAPI에서 API 사용량 추적 구현
from fastapi import FastAPI, Depends, Request, Response
from fastapi.middleware.cors import CORSMiddleware
import time
import redis
import json
from datetime import datetime

app = FastAPI()
redis_client = redis.Redis(host='localhost', port=6379, db=0)

@app.middleware("http")
async def track_api_usage(request: Request, call_next):
    # 요청 시작 시간
    start_time = time.time()
    
    # API 키 추출
    api_key = request.headers.get("X-API-Key", "anonymous")
    
    # 요청 처리
    response = await call_next(request)
    
    # 응답 시간 계산
    duration = time.time() - start_time
    
    # 사용량 데이터 구성
    usage_data = {
        "api_key": api_key,
        "endpoint": request.url.path,
        "method": request.method,
        "status_code": response.status_code,
        "duration": duration,
        "timestamp": datetime.utcnow().isoformat(),
        "ip": request.client.host if request.client else "unknown"
    }
    
    # Redis에 사용량 데이터 저장
    try:
        # 실시간 처리를 위한 스트림에 추가
        redis_client.xadd("api_usage_stream", usage_data)
        
        # 집계를 위한 카운터 증가
        day_key = f"api:usage:{api_key}:{datetime.utcnow().strftime('%Y-%m-%d')}"
        endpoint_key = f"{day_key}:{request.url.path}"
        
        pipe = redis_client.pipeline()
        pipe.incr(day_key)  # 일일 총 요청 수
        pipe.incr(endpoint_key)  # 엔드포인트별 요청 수
        
        # 응답 시간 집계
        pipe.lpush(f"{endpoint_key}:times", duration)
        pipe.ltrim(f"{endpoint_key}:times", 0, 999)  # 최근 1000개만 유지
        
        # 상태 코드 집계
        pipe.incr(f"{endpoint_key}:{response.status_code}")
        
        pipe.execute()
    except Exception as e:
        print(f"사용량 추적 오류: {str(e)}")
    
    return response

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257

// React로 구현한 API 키 사용량 대시보드 컴포넌트
import React, { useState, useEffect } from 'react';
import { Line, Bar, Pie } from 'react-chartjs-2';
import { format, subDays } from 'date-fns';

function ApiUsageDashboard({ apiKey }) {
  const [usageData, setUsageData] = useState({
    dailyRequests: [],
    endpointUsage: [],
    responseTimeData: [],
    statusCodesData: {},
    loading: true,
    error: null
  });
  
  // 날짜 범위 선택 상태
  const [dateRange, setDateRange] = useState(7); // 기본 7일
  
  useEffect(() => {
    async function fetchUsageData() {
      try {
        const startDate = format(subDays(new Date(), dateRange), 'yyyy-MM-dd');
        const endDate = format(new Date(), 'yyyy-MM-dd');
        
        // API 사용량 데이터 가져오기
        const response = await fetch(
          `/api/analytics/usage?apiKey=${apiKey}&startDate=${startDate}&endDate=${endDate}`,
          {
            headers: {
              'Authorization': `Bearer ${localStorage.getItem('token')}`
            }
          }
        );
        
        if (!response.ok) {
          throw new Error('사용량 데이터를 가져오는 데 실패했습니다');
        }
        
        const data = await response.json();
        
        // 데이터 처리 및 상태 업데이트
        const processedData = processUsageData(data);
        setUsageData({
          …processedData,
          loading: false
        });
      } catch (error) {
        setUsageData({
          …usageData,
          loading: false,
          error: error.message
        });
      }
    }
    
    fetchUsageData();
  }, [apiKey, dateRange]);
  
  // 사용량 데이터 처리 함수
  function processUsageData(data) {
    // 일일 요청 데이터 처리
    const dailyRequests = data.dailyRequests.map(item => ({
      date: item.date,
      count: item.count
    }));
    
    // 엔드포인트별 사용량 처리
    const endpointUsage = Object.entries(data.endpointUsage)
      .map(([endpoint, count]) => ({
        endpoint,
        count
      }))
      .sort((a, b) => b.count - a.count)
      .slice(0, 10); // 상위 10개만
    
    // 응답 시간 데이터 처리
    const responseTimeData = data.responseTimeData.map(item => ({
      date: item.date,
      avg: item.avg,
      p95: item.p95
    }));
    
    // 상태 코드 데이터 처리
    const statusCodesData = {
      labels: Object.keys(data.statusCodes),
      datasets: [{
        data: Object.values(data.statusCodes),
        backgroundColor: [
          '#4CAF50', // 2xx (성공)
          '#FF9800', // 3xx (리디렉션)
          '#F44336', // 4xx (클라이언트 오류)
          '#9C27B0'  // 5xx (서버 오류)
        ]
      }]
    };
    
    return {
      dailyRequests,
      endpointUsage,
      responseTimeData,
      statusCodesData
    };
  }
  
  if (usageData.loading) return <div>로딩 중…</div>;
  if (usageData.error) return <div>오류: {usageData.error}</div>;
  
  return (
    <div className="api-usage-dashboard">
      <h2>API 키 사용량 대시보드</h2>
      
      <div className="date-range-selector">
        <label>기간 선택:</label>
        <select 
          value={dateRange} 
          onChange={(e) => setDateRange(parseInt(e.target.value))}
        >
          <option value={7}>최근 7일</option>
          <option value={30}>최근 30일</option>
          <option value={90}>최근 90일</option>
        </select>
      </div>
      
      <div className="usage-summary">
        <div className="summary-card">
          <h3>총 API 호출</h3>
          <p className="summary-value">
            {usageData.dailyRequests.reduce((sum, item) => sum + item.count, 0).toLocaleString()}
          </p>
        </div>
        
        <div className="summary-card">
          <h3>평균 응답 시간</h3>
          <p className="summary-value">
            {(usageData.responseTimeData.reduce((sum, item) => sum + item.avg, 0) / 
              usageData.responseTimeData.length).toFixed(2)}ms
          </p>
        </div>
        
        <div className="summary-card">
          <h3>성공률</h3>
          <p className="summary-value">
            {((usageData.statusCodesData.datasets[0].data[0] /
              usageData.statusCodesData.datasets[0].data.reduce((a, b) => a + b, 0)) * 100).toFixed(2)}%
          </p>
        </div>
      </div>
      
      <div className="chart-container">
        <div className="chart-card">
          <h3>일일 API 호출</h3>
          <Line
            data={{
              labels: usageData.dailyRequests.map(item => item.date),
              datasets: [{
                label: 'API 호출 수',
                data: usageData.dailyRequests.map(item => item.count),
                borderColor: '#2196F3',
                backgroundColor: 'rgba(33, 150, 243, 0.1)',
                tension: 0.1
              }]
            }}
            options={{
              responsive: true,
              scales: {
                y: {
                  beginAtZero: true
                }
              }
            }}
          />
        </div>
        
        <div className="chart-card">
          <h3>상위 엔드포인트</h3>
          <Bar
            data={{
              labels: usageData.endpointUsage.map(item => item.endpoint),
              datasets: [{
                label: 'API 호출 수',
                data: usageData.endpointUsage.map(item => item.count),
                backgroundColor: '#4CAF50'
              }]
            }}
            options={{
              responsive: true,
              indexAxis: 'y'
            }}
          />
        </div>
        
        <div className="chart-card">
          <h3>응답 시간</h3>
          <Line
            data={{
              labels: usageData.responseTimeData.map(item => item.date),
              datasets: [
                {
                  label: '평균 응답 시간',
                  data: usageData.responseTimeData.map(item => item.avg),
                  borderColor: '#FF9800',
                  backgroundColor: 'rgba(255, 152, 0, 0.1)',
                  tension: 0.1
                },
                {
                  label: 'P95 응답 시간',
                  data: usageData.responseTimeData.map(item => item.p95),
                  borderColor: '#F44336',
                  backgroundColor: 'rgba(244, 67, 54, 0.1)',
                  tension: 0.1
                }
              ]
            }}
            options={{
              responsive: true,
              scales: {
                y: {
                  beginAtZero: true,
                  title: {
                    display: true,
                    text: '응답 시간 (ms)'
                  }
                }
              }
            }}
          />
        </div>
        
        <div className="chart-card">
          <h3>HTTP 상태 코드 분포</h3>
          <Pie
            data={usageData.statusCodesData}
            options={{
              responsive: true,
              plugins: {
                legend: {
                  position: 'right'
                },
                tooltip: {
                  callbacks: {
                    label: function(context) {
                      const label = context.label || '';
                      const value = context.raw || 0;
                      const total = context.dataset.data.reduce((a, b) => a + b, 0);
                      const percentage = ((value / total) * 100).toFixed(2);
                      return `${label}: ${value} (${percentage}%)`;
                    }
                  }
                }
              }
            }}
          />
        </div>
      </div>
    </div>
  );
}