feat/실제 웹 배포

.github/workflows/web-deploy.yml

@@ -0,0 +1,59 @@
+name: deploy flutter web to github pages
+
+on:
+  # main branch에 푸쉬가 들어올 경우 실행
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      # git 기본 세팅
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      # 플러터 세팅
+      - name: Setup flutter
+        uses: subosito/flutter-action@v2
+        with:
+          channel: stable
+          flutter-version: 3.29.2
+
+      # 임의로 .env 파일 생성
+      - name: Generate .env
+        run: |
+          cat <<EOF > .env
+          SUPABASE_URL=${{ secrets.SUPABASE_URL }}
+          SUPABASE_ANON_KEY=${{ secrets.SUPABASE_ANON_KEY }}
+          EOF
+
+      #  추가: 의존성 설치
+      - name: Install dependencies
+        run: flutter pub get
+
+      # Generator 빌드
+      - name: Run Code Generation
+        run: flutter pub run build_runner build --delete-conflicting-outputs
+
+      # Flutter Test 진행
+      # => test에서 실패하면 배포가 되지 않도록 설정
+      - name: Run Tests
+        run: flutter test
+
+      # 플러터 웹 빌드
+      - name: Build web
+        run: flutter build web --base-href "/${{ github.event.repository.name }}/"
+
+      # 404.html = index.html 복사
+      # => 강제 url로 라우팅이 404에러를 해결
+      - name: Copy index.html to 404.html
+        run: cp build/web/index.html build/web/404.html
+
+      # github page 배포
+      - name: Deploy to github pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.WEB_DEPLOY_KEY }}
+          publish_dir: ./build/web

.gitignore

@@ -14,14 +14,14 @@
 pubspec.lock
 package_config.json
 
-# Flutter Web 관련
-/web/favicon.png
-/web/icons/
-/web/splash/
-/web/manifest.json
-/web/index.html
-/web/flutter_service_worker.js
-/web/assets/
+# Flutter Web 관련 ignore 설정 주석처리
+# /web/favicon.png
+# /web/icons/
+# /web/splash/
+# /web/manifest.json
+# /web/index.html
+# /web/flutter_service_worker.js
+# /web/assets/
 
 # Android 관련
 **/android/**/gradle-wrapper.jar
@@ -156,4 +156,4 @@ logs/
 devtools_options.yaml
 
 # Firebase
-lib/firebase_options.dart
+# lib/firebase_options.dart

lib/auth/presentation/components/auth_header_widget.dart

@@ -20,7 +20,7 @@ class AuthHeaderWidget extends StatelessWidget {
           ),
           child: Center(
             child: Image.asset(
-              'images/mongo_ai_logo.png',
+              'assets/images/mongo_ai_logo.png',
               width: 24,
               height: 24,
             ),

lib/auth/presentation/sign_in/screen/sign_in_screen.dart

@@ -141,7 +141,9 @@ class _SignInScreenState extends State<SignInScreen> {
                             ),
                             focusedBorder: OutlineInputBorder(
                               borderRadius: BorderRadius.circular(8),
-                              borderSide: const BorderSide(color: AppColor.primary),
+                              borderSide: const BorderSide(
+                                color: AppColor.primary,
+                              ),
                             ),
                             errorBorder: OutlineInputBorder(
                               borderRadius: BorderRadius.circular(8),
@@ -204,7 +206,9 @@ class _SignInScreenState extends State<SignInScreen> {
                             ),
                             focusedBorder: OutlineInputBorder(
                               borderRadius: BorderRadius.circular(8),
-                              borderSide: const BorderSide(color: AppColor.primary),
+                              borderSide: const BorderSide(
+                                color: AppColor.primary,
+                              ),
                             ),
                             errorBorder: OutlineInputBorder(
                               borderRadius: BorderRadius.circular(8),
@@ -287,7 +291,9 @@ class _SignInScreenState extends State<SignInScreen> {
 
                         ElevatedButton(
                           onPressed: () {
-                            widget.onAction(const SignInAction.onTapGoogleSingIn());
+                            widget.onAction(
+                              const SignInAction.onTapGoogleSingIn(),
+                            );
                           },
                           style: ElevatedButton.styleFrom(
                             backgroundColor: AppColor.white,
@@ -300,11 +306,28 @@ class _SignInScreenState extends State<SignInScreen> {
                             mainAxisAlignment: MainAxisAlignment.center,
                             children: [
                               Padding(
-                                padding: const EdgeInsets.symmetric(vertical: 10),
-                                child: SizedBox(width: 40, height: 40, child: Image.asset('images/google_logo.png', width: 40, height: 40,)),
+                                padding: const EdgeInsets.symmetric(
+                                  vertical: 10,
+                                ),
+                                child: SizedBox(
+                                  width: 40,
+                                  height: 40,
+                                  child: Image.asset(
+                                    'assets/images/google_logo.png',
+                                    width: 40,
+                                    height: 40,
+                                  ),
+                                ),
                               ),
                               const Gap(10),
-                              Text('Sign in with Google', style: AppTextStyle.bodyMedium.copyWith(fontWeight: FontWeight.w500, color: AppColor.black, fontSize: 16))
+                              Text(
+                                'Sign in with Google',
+                                style: AppTextStyle.bodyMedium.copyWith(
+                                  fontWeight: FontWeight.w500,
+                                  color: AppColor.black,
+                                  fontSize: 16,
+                                ),
+                              ),
                             ],
                           ),
                         ),
@@ -325,7 +348,9 @@ class _SignInScreenState extends State<SignInScreen> {
                       ),
                       GestureDetector(
                         onTap:
-                            () => widget.onAction(const SignInAction.onTapSignUp()),
+                            () => widget.onAction(
+                              const SignInAction.onTapSignUp(),
+                            ),
                         child: Text(
                           '회원가입',
                           style: AppTextStyle.captionRegular.copyWith(

lib/dashboard/presentation/dashboard_screen.dart

@@ -36,7 +36,9 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
     super.initState();
 
     WidgetsBinding.instance.addPostFrameCallback((_) {
-      unawaited(ref.read(dashboardViewModelProvider.notifier).fetchSelectedTeam());
+      unawaited(
+        ref.read(dashboardViewModelProvider.notifier).fetchSelectedTeam(),
+      );
     });
   }
 
@@ -51,7 +53,7 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
       _currentPath = ['최근 항목'];
     } else if (selectedIndex == 3) {
       _currentPath = ['휴지통'];
-    } else if(selectedIndex == 4) {
+    } else if (selectedIndex == 4) {
       _currentPath = ['내 정보'];
     }
 
@@ -74,35 +76,35 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
                           children: [
                             PathWidget(path: _currentPath),
                             const Spacer(),
-                        ElevatedButton(
-                          onPressed: () {
-                            context.go(Routes.myProfile);
-                          },
-                          style: ElevatedButton.styleFrom(
-                            backgroundColor: AppColor.white,
-                            shadowColor: Colors.transparent,
-                            overlayColor: Colors.transparent,
-                            shape: RoundedRectangleBorder(
-                              borderRadius: BorderRadius.circular(0),
-                            ),
-                          ),
-                          child: Row(
-                            children: [
-                              const Icon(
-                                Icons.person,
-                                color: AppColor.deepBlack,
-                              ),
-                              const Gap(10),
-                              Text(
-                                dashboard.userProfile.userName,
-                                style: AppTextStyle.bodyMedium.copyWith(
-                                    fontWeight: FontWeight.bold,
-                                    color: AppColor.black
+                            ElevatedButton(
+                              onPressed: () {
+                                context.go(Routes.myProfile);
+                              },
+                              style: ElevatedButton.styleFrom(
+                                backgroundColor: AppColor.white,
+                                shadowColor: Colors.transparent,
+                                overlayColor: Colors.transparent,
+                                shape: RoundedRectangleBorder(
+                                  borderRadius: BorderRadius.circular(0),
                                 ),
                               ),
-                            ],
-                          ),
-                        ),
+                              child: Row(
+                                children: [
+                                  const Icon(
+                                    Icons.person,
+                                    color: AppColor.deepBlack,
+                                  ),
+                                  const Gap(10),
+                                  Text(
+                                    dashboard.userProfile.userName,
+                                    style: AppTextStyle.bodyMedium.copyWith(
+                                      fontWeight: FontWeight.bold,
+                                      color: AppColor.black,
+                                    ),
+                                  ),
+                                ],
+                              ),
+                            ),
                           ],
                         ),
                       ),
@@ -166,7 +168,7 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
                               height: 40,
                               child: SelectModeButtonWidget(
                                 onClick: () {
-                                  if(dashboard.currentTeamId != null) {
+                                  if (dashboard.currentTeamId != null) {
                                     viewModel.toggleSelectMode();
                                   }
                                 },
@@ -235,7 +237,7 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> {
                       ),
                       child: Center(
                         child: Image.asset(
-                          'images/mongo_ai_logo.png',
+                          'assets/images/mongo_ai_logo.png',
                           width: 16,
                           height: 16,
                         ),

lib/firebase_options.dart

@@ -0,0 +1,64 @@
+// File generated by FlutterFire CLI.
+// ignore_for_file: type=lint
+import 'package:firebase_core/firebase_core.dart' show FirebaseOptions;
+import 'package:flutter/foundation.dart'
+    show defaultTargetPlatform, kIsWeb, TargetPlatform;
+
+/// Default [FirebaseOptions] for use with your Firebase apps.
+///
+/// Example:
+/// ```dart
+/// import 'firebase_options.dart';
+/// // ...
+/// await Firebase.initializeApp(
+///   options: DefaultFirebaseOptions.currentPlatform,
+/// );
+/// ```
+class DefaultFirebaseOptions {
+  static FirebaseOptions get currentPlatform {
+    if (kIsWeb) {
+      return web;
+    }
+    switch (defaultTargetPlatform) {
+      case TargetPlatform.android:
+        throw UnsupportedError(
+          'DefaultFirebaseOptions have not been configured for android - '
+          'you can reconfigure this by running the FlutterFire CLI again.',
+        );
+      case TargetPlatform.iOS:
+        throw UnsupportedError(
+          'DefaultFirebaseOptions have not been configured for ios - '
+          'you can reconfigure this by running the FlutterFire CLI again.',
+        );
+      case TargetPlatform.macOS:
+        throw UnsupportedError(
+          'DefaultFirebaseOptions have not been configured for macos - '
+          'you can reconfigure this by running the FlutterFire CLI again.',
+        );
+      case TargetPlatform.windows:
+        throw UnsupportedError(
+          'DefaultFirebaseOptions have not been configured for windows - '
+          'you can reconfigure this by running the FlutterFire CLI again.',
+        );
+      case TargetPlatform.linux:
+        throw UnsupportedError(
+          'DefaultFirebaseOptions have not been configured for linux - '
+          'you can reconfigure this by running the FlutterFire CLI again.',
+        );
+      default:
+        throw UnsupportedError(
+          'DefaultFirebaseOptions are not supported for this platform.',
+        );
+    }
+  }
+
+  static const FirebaseOptions web = FirebaseOptions(
+    apiKey: 'AIzaSyDv6taLhWiRmfLBY7v7h2iZRHABowiB4UU',
+    appId: '1:108515543625:web:3a816c4fb36a9baaa74d98',
+    messagingSenderId: '108515543625',
+    projectId: 'mongo-ai-9d6ac',
+    authDomain: 'mongo-ai-9d6ac.firebaseapp.com',
+    storageBucket: 'mongo-ai-9d6ac.firebasestorage.app',
+    measurementId: 'G-ZB5G231MQH',
+  );
+}

pubspec.yaml

@@ -105,6 +105,7 @@ flutter:
   uses-material-design: true
   assets:
     - .env
+    - assets/images/
 
   fonts:
     - family: Pretendard

web/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!--
+    If you are serving your web app in a path other than the root, change the
+    href value below to reflect the base path you are serving from.
+
+    The path provided below has to start and end with a slash "/" in order for
+    it to work correctly.
+
+    For more details:
+    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
+
+    This is a placeholder for base href that will be replaced by the value of
+    the `--base-href` argument provided to `flutter build`.
+  -->
+  <base href="$FLUTTER_BASE_HREF">
+
+  <meta charset="UTF-8">
+  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+  <meta name="description" content="A new Flutter project.">
+
+  <!-- iOS meta tags & icons -->
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="mongoai_web">
+  <link rel="apple-touch-icon" href="icons/Icon-192.png">
+
+  <!-- Favicon -->
+  <link rel="icon" type="image/png" href="favicon.png"/>
+
+  <title>mongoai_web</title>
+  <link rel="manifest" href="manifest.json">
+</head>
+<body>
+  <script src="flutter_bootstrap.js" async></script>
+</body>
+</html>