✨ Feat: 홈 로그인 여부 판단

lib/utilities/app_routes.dart

@@ -17,7 +17,7 @@ abstract class Routes {
   static final routes = [
     GetPage(
       name: HOME,
-      page: () => const HomeScreen(),
+      page: () => HomeScreen(),
     ),
     GetPage(
       name: PROFILE,

lib/views/home/home_head_widget.dart

@@ -0,0 +1,70 @@
+import 'dart:math';
+
+import 'package:earlips/viewModels/user/user_viewmodel.dart';
+import 'package:flutter/material.dart';
+
+final messages = [
+  "발음 연습해볼까요? 오늘도 화이팅!",
+  "오늘도 화이팅!",
+  "귀와 입을 이어요, 이어립스",
+  "꾸준함이 능력! 꾸준히 노력하자!",
+];
+
+class HomeHeaderWidget extends StatelessWidget {
+  final bool isLoggedIn;
+  final UserViewModel vm;
+
+  const HomeHeaderWidget(
+      {super.key, required this.isLoggedIn, required this.vm});
+
+  @override
+  Widget build(BuildContext context) {
+    final random = Random();
+    final randomIndex = random.nextInt(messages.length);
+    final randomMessage = messages[randomIndex];
+    return Column(
+      children: [
+        Container(
+          //왼쪽으로 정렬
+          alignment: Alignment.centerLeft,
+          margin: const EdgeInsets.only(left: 20.0, top: 20.0),
+
+          child: Text(
+            randomMessage,
+            style: const TextStyle(
+              fontSize: 21,
+              fontWeight: FontWeight.w600,
+            ),
+          ),
+        ),
+        Container(
+          alignment: Alignment.centerLeft,
+          margin: const EdgeInsets.only(left: 20.0),
+          child: Row(
+            mainAxisSize: MainAxisSize.min, // Row의 크기를 내용물에 맞게 조정
+            children: [
+              Container(
+                margin: const EdgeInsets.only(right: 8.0), // 점과 텍스트 사이의 간격 조정
+                height: 10.0, // 점의 높이
+                width: 10.0, // 점의 너비
+                decoration: const BoxDecoration(
+                  color: Colors.green, // 점의 색상을 초록색으로 설정
+                  shape: BoxShape.circle, // 원형으로 점을 만듭니다
+                ),
+              ),
+// Use ViewModel data
+              Text(
+                isLoggedIn
+                    ? '${vm.learningLanguage.value} - ${vm.nickname.value}'
+                    : 'korean - 로그인이 필요합니다',
+                style: const TextStyle(
+                  fontSize: 12,
+                ),
+              ),
+            ],
+          ),
+        )
+      ],
+    );
+  }
+}

lib/views/home/home_screen.dart

@@ -1,3 +1,5 @@
+import 'package:earlips/viewModels/user/user_viewmodel.dart';
+import 'package:earlips/views/home/home_head_widget.dart';
 import 'package:flutter/material.dart';
 import 'package:earlips/viewModels/home/home_viewmodel.dart';
 import 'package:earlips/views/base/base_screen.dart';
@@ -12,23 +14,30 @@ import 'package:earlips/views/script/learning_session_screen.dart';
 import '../realtime/real_create_script_screen.dart';
 
 class HomeScreen extends BaseScreen<HomeViewModel> {
-  const HomeScreen({super.key});
+  final User? user =
+      FirebaseAuth.instance.currentUser; // FirebaseFirestore 인스턴스 생성
+
+  HomeScreen({super.key});
 
   @override
   Widget buildBody(BuildContext context) {
+    // Inject the HomeViewModel using GetX
+    final viewModel = Get.put(UserViewModel());
     return Scaffold(
       backgroundColor: const Color(0xFFF0F4F8),
       body: SafeArea(
         top: true,
         child: StreamBuilder<User?>(
           stream: FirebaseAuth.instance.authStateChanges(),
           builder: (context, snapshot) {
+            viewModel.onInit();
+
             final bool isLoggedIn = snapshot.hasData;
             return SingleChildScrollView(
               child: Column(
                 children: [
-                  const _Header(),
-                  const _Top(),
+                  HomeHeaderWidget(isLoggedIn: isLoggedIn, vm: viewModel),
+                  _Top(isLoggedIn: isLoggedIn),
                   const _Middle(),
                   // 로그인 상태에 따라 _Bottom 클래스의 컨테이너 색상을 변경
                   _Bottom(isLoggedIn: isLoggedIn),
@@ -42,75 +51,50 @@ class HomeScreen extends BaseScreen<HomeViewModel> {
   }
 }
 
-class _Header extends StatelessWidget {
-  const _Header({super.key});
+class _Top extends StatelessWidget {
+  final bool isLoggedIn;
+  const _Top({required this.isLoggedIn});
 
   @override
   Widget build(BuildContext context) {
-    return Column(
+    return Center(
+        child: Stack(
       children: [
         Container(
-          //왼쪽으로 정렬
-          alignment: Alignment.centerLeft,
-          margin: const EdgeInsets.only(left: 20.0, top: 20.0),
-
-          child: const Text(
-            "오늘도 열심히 해볼까요?",
-            style: TextStyle(
-              fontFamily: 'Pretendard-Bold',
-              fontSize: 25,
-              //weight
-              fontWeight: FontWeight.bold,
-            ),
+          margin: const EdgeInsets.all(20.0),
+          decoration: BoxDecoration(
+            color: const Color(0xFFFFFFFF),
+            borderRadius: BorderRadius.circular(30.0),
           ),
-        ),
-        Container(
-          alignment: Alignment.centerLeft,
-          margin: const EdgeInsets.only(left: 20.0),
-          child: Row(
-            mainAxisSize: MainAxisSize.min, // Row의 크기를 내용물에 맞게 조정
+          height: Get.height * 0.19,
+          child: Stack(
             children: [
-              Container(
-                margin: const EdgeInsets.only(right: 8.0), // 점과 텍스트 사이의 간격 조정
-                height: 10.0, // 점의 높이
-                width: 10.0, // 점의 너비
-                decoration: const BoxDecoration(
-                  color: Colors.green, // 점의 색상을 초록색으로 설정
-                  shape: BoxShape.circle, // 원형으로 점을 만듭니다
-                ),
-              ),
-              const Text(
-                "korean - Bunju",
-                style: TextStyle(
-                  fontFamily: 'Pretendard-Regular',
-                  fontSize: 12,
+              const Row(children: [
+                _Circle(),
+                _SpeakingAbility(),
+              ]),
+              if (!isLoggedIn) // 로그인 안 됐을 때만 블러 효과와 자물쇠 아이콘 표시
+                Positioned.fill(
+                  child: ClipRRect(
+                    borderRadius: BorderRadius.circular(30.0),
+                    child: BackdropFilter(
+                      filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
+                      child: Container(
+                        alignment: Alignment.center,
+                        color: Colors.grey.withOpacity(0.1),
+                        child: Icon(
+                          Icons.lock_outline,
+                          size: 60,
+                          color: Colors.white.withOpacity(1.0),
+                        ),
+                      ),
+                    ),
+                  ),
                 ),
-              ),
             ],
           ),
-        )
+        ),
       ],
-    );
-  }
-}
-
-class _Top extends StatelessWidget {
-  const _Top({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return Center(
-        child: Container(
-      margin: const EdgeInsets.all(20.0),
-      decoration: BoxDecoration(
-        color: const Color(0xFFFFFFFF),
-        borderRadius: BorderRadius.circular(30.0),
-      ),
-      height: Get.height * 0.19,
-      child: const Row(children: [
-        _Circle(),
-        _SpeakingAbility(),
-      ]),
     ));
   }
 }
@@ -210,7 +194,7 @@ class _Middle extends StatelessWidget {
 
 class _Bottom extends StatelessWidget {
   final bool isLoggedIn;
-  const _Bottom({super.key, required this.isLoggedIn});
+  const _Bottom({required this.isLoggedIn});
 
   @override
   Widget build(BuildContext context) {
@@ -279,8 +263,8 @@ class _Circle extends StatelessWidget {
         children: [
           SvgPicture.asset(
             'assets/images/home/circle.svg',
-            width: 110,
-            height: 110,
+            width: 90,
+            height: 90,
           ),
           Obx(() => Text(
                 homeViewModel.circleNumber.toString(), // Observable 값을 사용
@@ -319,7 +303,7 @@ class _SpeakingAbility extends StatelessWidget {
           ),
         ),
         Container(
-          margin: const EdgeInsets.only(top: 0.0, right: 25.0, left: 40.0),
+          margin: const EdgeInsets.only(top: 8.0, right: 25.0, left: 40.0),
           child: Row(
             children: [
               Obx(() => Text(

lib/views/root/root_screen.dart

@@ -19,9 +19,9 @@ class RootScreen extends BaseScreen<RootViewModel> {
     return Obx(
       () => IndexedStack(
         index: viewModel.selectedIndex,
-        children: const [
+        children: [
           HomeScreen(),
-          ProfileScreen(),
+          const ProfileScreen(),
         ],
       ),
     );