diff --git a/lib/views/home/home_head_widget.dart b/lib/views/home/home_head_widget.dart new file mode 100644 index 0000000..f4aba93 --- /dev/null +++ b/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, + ), + ), + ], + ), + ) + ], + ); + } +} diff --git a/lib/views/home/home_screen.dart b/lib/views/home/home_screen.dart index 3372fed..4d96395 100644 --- a/lib/views/home/home_screen.dart +++ b/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,10 +14,15 @@ import 'package:earlips/views/script/learning_session_screen.dart'; import '../realtime/real_create_script_screen.dart'; class HomeScreen extends BaseScreen { - 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( @@ -23,12 +30,14 @@ class HomeScreen extends BaseScreen { child: StreamBuilder( 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 { } } -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) {