diff --git a/assets/icons/Group 8.svg b/assets/icons/Group 8.svg new file mode 100644 index 0000000..117d4a7 --- /dev/null +++ b/assets/icons/Group 8.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/icons/TimeCircle.svg b/assets/icons/TimeCircle.svg new file mode 100644 index 0000000..6df939b --- /dev/null +++ b/assets/icons/TimeCircle.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/book.svg b/assets/icons/book.svg new file mode 100644 index 0000000..ceea23a --- /dev/null +++ b/assets/icons/book.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/icons/done.svg b/assets/icons/done.svg new file mode 100644 index 0000000..3500d99 --- /dev/null +++ b/assets/icons/done.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/images/background.png b/assets/images/background.png new file mode 100644 index 0000000..75b2b79 Binary files /dev/null and b/assets/images/background.png differ diff --git a/lib/viewModels/script/learning_session_screen_viewmodel.dart b/lib/viewModels/script/learning_session_screen_viewmodel.dart index 7156b35..f5ed4e6 100644 --- a/lib/viewModels/script/learning_session_screen_viewmodel.dart +++ b/lib/viewModels/script/learning_session_screen_viewmodel.dart @@ -37,9 +37,9 @@ class LearningSessionScreenViewModel extends GetxController { // DateTime 객체를 원하는 문자열 형식으로 변환 final formattedDate = DateFormat('yyyy/MM/dd').format(dateFormat); - + String timeFormat = DateFormat('h:mm a').format(dateFormat); return Paragraph( - title: title, text: text, dateFormat: formattedDate.toString()); + title: title, text: text, dateFormat: formattedDate.toString(), timeFormat: timeFormat); }).toList(); paragraphs.value = fetchedParagraphs; // 상태 업데이트 @@ -83,6 +83,7 @@ class Paragraph { final String title; final String text; final String ?dateFormat; + final String ?timeFormat; Paragraph( - {required this.title, required this.text, this.dateFormat}); + {required this.title, required this.text, this.dateFormat, this.timeFormat}); } diff --git a/lib/views/home/home_screen.dart b/lib/views/home/home_screen.dart index 7f509ca..09f713e 100644 --- a/lib/views/home/home_screen.dart +++ b/lib/views/home/home_screen.dart @@ -20,32 +20,36 @@ class HomeScreen extends BaseScreen { Widget buildBody(BuildContext context) { final viewModel = Get.put(UserViewModel()); return Scaffold( + backgroundColor: ColorSystem.background, - body: SafeArea( - top: true, - child: StreamBuilder( - stream: FirebaseAuth.instance.authStateChanges(), - builder: (context, snapshot) { - viewModel.onInit(); - final bool isLoggedIn = snapshot.hasData; - return SingleChildScrollView( - child: Column( - children: [ - const SizedBox(height: 15), - HomeHeaderWidget(isLoggedIn: isLoggedIn, vm: viewModel), - TopWidget( - isLoggedIn: isLoggedIn, - vm: viewModel, - ), - MidWidget(), - // 로그인 상태에 따라 _Bottom 클래스의 컨테이너 색상을 변경 - BottomWidget(isLoggedIn: isLoggedIn), - ], - ), - ); - }, + body: Container( + child: SafeArea( + top: true, + child: StreamBuilder( + stream: FirebaseAuth.instance.authStateChanges(), + builder: (context, snapshot) { + viewModel.onInit(); + final bool isLoggedIn = snapshot.hasData; + return SingleChildScrollView( + child: Column( + children: [ + const SizedBox(height: 15), + HomeHeaderWidget(isLoggedIn: isLoggedIn, vm: viewModel), + TopWidget( + isLoggedIn: isLoggedIn, + vm: viewModel, + ), + MidWidget(), + // 로그인 상태에 따라 _Bottom 클래스의 컨테이너 색상을 변경 + BottomWidget(isLoggedIn: isLoggedIn), + ], + ), + ); + }, + ), ), ), ); } + } diff --git a/lib/views/script/learning_session_screen.dart b/lib/views/script/learning_session_screen.dart index ad01f3a..9fef2fb 100644 --- a/lib/views/script/learning_session_screen.dart +++ b/lib/views/script/learning_session_screen.dart @@ -1,6 +1,7 @@ import 'package:earlips/views/base/default_back_appbar.dart'; import 'package:firebase_auth/firebase_auth.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; import 'package:get/get.dart'; import 'package:earlips/views/script/widget/small_card.dart'; import 'package:earlips/views/script/create_script_screen.dart'; @@ -68,7 +69,7 @@ class _LearningSessionScreenState extends State { dateFormat: dummyDate, ); return Container( - margin: const EdgeInsets.only(left: 20, top: 20), + margin: const EdgeInsets.only(left: 20), height: Get.height * 0.15, width: Get.width * 0.9, child: _buildParagraphContainer(dummyParagraph)); @@ -76,7 +77,7 @@ class _LearningSessionScreenState extends State { // 로그인 했을 경우의 UI 구성 return Container( child: ListView.separated( - padding: const EdgeInsets.fromLTRB(25, 20, 25, 20), + padding: const EdgeInsets.fromLTRB(20, 40, 20, 16), itemCount: viewModel.paragraphs.length, itemBuilder: (context, index) { var paragraph = viewModel.paragraphs[index]; @@ -101,12 +102,14 @@ class _LearningSessionScreenState extends State { Widget _buildParagraphContainer(Paragraph paragraph) { return Container( + width: Get.width * 0.9, + height: 94.0, decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(15.0), boxShadow: [ BoxShadow( - color: Colors.grey.withOpacity(0.15), + color: Colors.grey.withOpacity(0.05), spreadRadius: 0.1, blurRadius: 10, offset: const Offset(0, 2), @@ -115,31 +118,93 @@ class _LearningSessionScreenState extends State { ), child: Column( children: [ - Container( - alignment: Alignment.centerLeft, - margin: const EdgeInsets.only(left: 10.0, top: 10.0), - child: SmallCard(text: paragraph.dateFormat!), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Container( + alignment: Alignment.centerLeft, + margin: EdgeInsets.only(left: 16.0,top: 16.0,bottom: 8.0), + child: Text( + "${DateFormat('yyyy년 MM월 dd일 ').format(DateFormat('yyyy/MM/dd').parse(paragraph.dateFormat!))}진행한 학습", + style: TextStyle( + fontSize: 11, + color: Color(0xFF6E6A7C), + ), + ), + ), + Container( + margin: const EdgeInsets.only(right: 12.0, top: 12.0), + child: SvgPicture.asset("assets/icons/book.svg", + width: 24, height: 24), + ) + ], ), - ListTile( - contentPadding: - const EdgeInsets.only(left: 20, right: 20, bottom: 30), - title: Container( - alignment: Alignment.center, + + InkWell( + onTap: () { + Get.to(() => CreateScriptPage( + title: paragraph.title, text: paragraph.text)); + }, + child: Container( + alignment: Alignment.centerLeft, + margin: EdgeInsets.only(left: 16.0,bottom: 8.0), child: Text( paragraph.title, style: const TextStyle( - fontSize: 20.0, + fontSize: 14.0, fontWeight: FontWeight.bold, ), ), ), - onTap: () { - Get.to(() => CreateScriptPage( - title: paragraph.title, text: paragraph.text)); - }, + ), + + Container( + margin: const EdgeInsets.only(left: 16, right: 12), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Row( + children: [ + SvgPicture.asset("assets/icons/TimeCircle.svg", + width: 14, + color: const Color(0xFF5EC4E5)), + const SizedBox(width: 4), + Text( + paragraph.timeFormat!, + style: const TextStyle( + fontSize: 11, + color: Color(0xFF5EC4E5), + fontWeight: FontWeight.bold, + ), + ), + ], + ), + _tagText(paragraph.text.length.toString()), + ], + ), ), ], ), ); } + + Widget _tagText(String text) { + return Container( + padding: const EdgeInsets.symmetric(horizontal: 6.0, vertical: 2.0), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(7.0), + color: const Color(0xFFE6F9E3), + ), + alignment: Alignment.center, + height: 17, + child: Text( + '대본의 총 글자수 : ${text}', + style: const TextStyle( + color: Color(0xFF34AF20), + fontSize: 9, + fontWeight: FontWeight.w600, + ), + ), + ); + } }