ログアウト機能の実装

.env.example

@@ -1,2 +1,2 @@
 # API接続先（開発時のプロキシ先）
-VITE_API_TARGET="https://your-api-domain.com"
+VITE_API_URL="https://your-api-domain.com"

README.md

@@ -1,4 +1,4 @@
-# AIE-DXプロジェクト１（フロントエンド）
+# AIE-DXプロジェクト１【フロントエンド】
 
 ## 動かし方
 
@@ -33,7 +33,7 @@ cp .env.example .env
 `.env`ファイルを編集して、バックエンドAPIのURLを指定してください。
 ```bash
 # API接続先（開発時のプロキシ先）
-VITE_API_TARGET="https://your-api-domain.com"
+VITE_API_URL="https://your-api-domain.com"
 ```
 
 ### 5. 開発サーバーの起動

src/App.tsx

@@ -6,7 +6,7 @@ import { CourseDashboard } from './components/CourseDashboard';
 import { DataUpload } from './components/DataUpload';
 import { DataDelete } from './components/DataDelete';
 import { Toaster } from './components/ui/sonner';
-import { fetchCourses, ApiError } from './api/client';
+import { fetchCourses, ApiError, logout } from './api/client';
 import type { CourseItem } from './types/api';
 import { Loader2, AlertCircle, RefreshCw } from 'lucide-react';
 import { Button } from './components/ui/button';
@@ -77,13 +77,21 @@ export default function App() {
     setViewMode('list');
   };
 
+  const handleLogout = () => {
+    logout();
+  };
+
   const showBackButton = viewMode === 'dashboard' || viewMode === 'upload' || viewMode === 'delete';
 
   // ローディング表示
   if (isLoading && viewMode === 'list') {
     return (
       <div className="min-h-screen bg-gray-50">
-        <Header showBackButton={false} onBackClick={handleBackToList} />
+        <Header
+          showBackButton={false}
+          onBackClick={handleBackToList}
+          onLogout={handleLogout}
+        />
         <div className="container mx-auto px-4 py-8">
           <div className="flex flex-col items-center justify-center py-20">
             <Loader2 className="h-12 w-12 animate-spin text-blue-600 mb-4" />
@@ -99,7 +107,11 @@ export default function App() {
   if (error && viewMode === 'list') {
     return (
       <div className="min-h-screen bg-gray-50">
-        <Header showBackButton={false} onBackClick={handleBackToList} />
+        <Header
+          showBackButton={false}
+          onBackClick={handleBackToList}
+          onLogout={handleLogout}
+        />
         <div className="container mx-auto px-4 py-8">
           <Card className="max-w-md mx-auto">
             <CardContent className="py-8">
@@ -125,6 +137,7 @@ export default function App() {
       <Header
         showBackButton={showBackButton}
         onBackClick={handleBackToList}
+        onLogout={handleLogout}
       />
 
       {viewMode === 'dashboard' && selectedCourse ? (

src/api/client.ts

@@ -30,10 +30,10 @@ function redirectToLogin() {
   if (isRedirectingToLogin) return;
 
   // すでにログイン開始URLならループ防止
-  if (window.location.pathname === '/api/login') return;
+  if (window.location.pathname === `${BASE_URL}/login`) return;
 
   isRedirectingToLogin = true;
-  window.location.href = '/api/login';
+  window.location.href = `${BASE_URL}/login`;
 }
 
 // 「認証切れ」と判断する条件
@@ -361,3 +361,13 @@ export async function fetchAttributes(): Promise<AttributesResponse> {
 export async function fetchUserInfo(): Promise<UserInfoResponse> {
   return fetchApi<UserInfoResponse>('/me');
 }
+
+// ===== 7. 認証API =====
+
+/**
+ * ログアウト
+ * ログアウトエンドポイントへリダイレクト
+ */
+export function logout(): void {
+  window.location.href = `${BASE_URL}/logout`;
+}

src/components/Header.tsx

@@ -4,9 +4,10 @@ import { Button } from './ui/button';
 interface HeaderProps {
   showBackButton?: boolean;
   onBackClick?: () => void;
+  onLogout?: () => void;
 }
 
-export function Header({ showBackButton, onBackClick }: HeaderProps) {
+export function Header({ showBackButton, onBackClick, onLogout }: HeaderProps) {
   return (
     <header className="border-b bg-white">
       <div className="container mx-auto px-4 py-4 flex items-center justify-between">
@@ -26,7 +27,7 @@ export function Header({ showBackButton, onBackClick }: HeaderProps) {
             <User className="h-5 w-5" />
             <span>運営者</span>
           </div>
-          <Button variant="ghost" size="sm">
+          <Button variant="ghost" size="sm" onClick={onLogout}>
             <LogOut className="h-4 w-4 mr-2" />
             ログアウト
           </Button>

vite.config.ts

@@ -4,7 +4,7 @@ import path from 'path';
 
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '');
-  const apiTarget = env.VITE_API_TARGET || 'http://localhost:8000';
+  const apiTarget = env.VITE_API_URL || 'http://localhost:8000';
 
   return {
     plugins: [react()],