feat: 판매 페이지 레이아웃 및 상품 카드 & 배너 추가

lib/common/main_navigation_screen.dart

@@ -101,7 +101,7 @@ class _MainNavigationScreenState extends ConsumerState<MainNavigationScreen>
                         ? ColorConstants.primaryColor
                         : Colors.grey,
                   ),
-                  label: '퍼스널브랜딩',
+                  label: '판매 서비스',
                 ),
                 BottomNavigationBarItem(
                   icon: Image.asset(
@@ -111,7 +111,7 @@ class _MainNavigationScreenState extends ConsumerState<MainNavigationScreen>
                         ? ColorConstants.primaryColor
                         : Colors.grey,
                   ),
-                  label: '직무 매칭',
+                  label: '트티 홈',
                 ),
                 BottomNavigationBarItem(
                   icon: Image.asset(

lib/constants/color.dart

@@ -7,4 +7,7 @@ class ColorConstants {
   static const Color naverColor = Color(0xFF03C75A);
   static const Color profileUserNameColor = Color(0xFF52B69A);
   static const Color primary600Color = Color(0xFF34A0A4);
+  static const Color readyServiceColor = Color(0xFFC8C8C8);
+  static const Color personalBrandingTextHighlightColor = Color(0xFFD9ED92);
+  static const Color personalBrandingDividerColor = Color(0XFFD80C0C);
 }

lib/constants/string.dart

@@ -1,9 +1,7 @@
 // getter로 string 만들기
 class StringConstants {
   static String appName = "TuTi";
-  // 원래 서버 도메인 : 'https://www.tuti-service.site'
-  // AWS 과금 정책으로 인해 도메인 적용까지 임시 서버 주소 사용
-  static const baseUrl = 'http://52.78.238.81:8080';
+  static const baseUrl = 'https://www.tuti-service.site';
 }
 
 final jobConstant = [

lib/features/tutis/models/goods_card.dart

@@ -0,0 +1,12 @@
+class GoodsCard {
+  final String title;
+  final double? regularPrice;
+  final double? discountRate;
+  final double discountedPrice;
+
+  const GoodsCard(
+      {required this.title,
+      required this.discountedPrice,
+      this.discountRate,
+      this.regularPrice});
+}

lib/features/tutis/views/goods_detail_screen.dart

@@ -0,0 +1,13 @@
+import 'package:flutter/cupertino.dart';
+
+class GoodsDetailScreen extends StatelessWidget {
+  const GoodsDetailScreen({super.key});
+
+  static const routeName = "goodsDetail";
+  static const routePath = "/goodsDetail";
+
+  @override
+  Widget build(BuildContext context) {
+    return const Placeholder();
+  }
+}

lib/features/tutis/views/personal_branding_screen.dart

@@ -1,4 +1,15 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:tuti/common/constraints_scaffold.dart';
+import 'package:tuti/common/tuti_text.dart';
+import 'package:tuti/constants/color.dart';
+import 'package:tuti/features/tutis/models/goods_card.dart';
+import 'package:tuti/features/tutis/views/goods_detail_screen.dart';
+import 'package:tuti/features/tutis/widgets/tuti_widgets/goods_container.dart';
+import 'package:tuti/features/tutis/widgets/tuti_widgets/main_banner.dart';
+import 'package:universal_html/js.dart';
 
 class PersonalBrandingScreen extends StatelessWidget {
   const PersonalBrandingScreen({super.key});
@@ -8,6 +19,42 @@ class PersonalBrandingScreen extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return const Placeholder();
+    return ConstraintsScaffold(
+      child: Column(
+        children: [
+          Container(
+            margin: EdgeInsets.only(top: 35.h, bottom: 15.h),
+            child: const TuTiBanner(
+              location: GoodsDetailScreen.routePath,
+              title: '오직, 트티에서만 제공하는\n2024년 당신의 커리어 고민 해결 솔루션.',
+              subtitle: '체계적이고 알찬 개인 맞춤형 레벨업!',
+            ),
+          ),
+          Expanded(
+            child: ListView.builder(
+              itemCount: goodsCards.length,
+              itemBuilder: (BuildContext context, index) {
+                return GoodsContainer(
+                    title: goodsCards[index].title,
+                    regularPrice: goodsCards[index].regularPrice,
+                    discountRate: goodsCards[index].discountRate,
+                    discountedPrice: goodsCards[index].discountedPrice);
+              },
+            ),
+          ),
+        ],
+      ),
+    );
   }
 }
+
+List<Goods> goodsCards = const [
+  Goods(
+      title: '강점 발견 연구소 1기',
+      regularPrice: 600000,
+      discountRate: 50,
+      discountedPrice: 300000),
+  Goods(title: '발표잘하는 방법 특강 1회', discountedPrice: 250000),
+  Goods(title: '[건축학과] 공모전 컨설팅', discountedPrice: 250000),
+  Goods(title: '내 성격에 맞는\n외모 스타일링 컨설팅', discountedPrice: 250000),
+];

lib/features/tutis/widgets/tuti_widgets/goods_container.dart

@@ -0,0 +1,86 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:intl/intl.dart';
+import 'package:tuti/constants/color.dart';
+
+class GoodsContainer extends StatelessWidget {
+  const GoodsContainer(
+      {super.key,
+      required this.title,
+      required this.discountedPrice,
+      this.discountRate,
+      this.regularPrice});
+
+  final String title;
+  final double? regularPrice;
+  final double? discountRate;
+  final double discountedPrice;
+
+  @override
+  Widget build(BuildContext context) {
+    final numberFormat = NumberFormat.currency(
+      locale: 'ko_KR',
+      symbol: '',
+    );
+    return GestureDetector(
+      onTap: () {},
+      child: Container(
+        width: MediaQuery.of(context).size.width * 0.8,
+        margin: EdgeInsets.symmetric(horizontal: 45.w, vertical: 8.h),
+        padding: EdgeInsets.symmetric(horizontal: 25.w, vertical: 30.h),
+        decoration: BoxDecoration(
+          color: ColorConstants.primaryColor,
+          borderRadius: BorderRadius.circular(25.sp),
+        ),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              title,
+              style: Theme.of(context)
+                  .textTheme
+                  .bodyLarge!
+                  .copyWith(color: Colors.white),
+            ),
+            if (regularPrice != null)
+              Text(
+                numberFormat.format(regularPrice),
+                style: Theme.of(context).textTheme.bodyLarge!.copyWith(
+                    color: Colors.white,
+                    fontSize: 22.sp,
+                    decoration: TextDecoration.lineThrough,
+                    decorationColor:
+                        ColorConstants.personalBrandingDividerColor,
+                    decorationThickness: 2.0),
+              ),
+            if (regularPrice == null)
+              RSizedBox(
+                height: 35.w,
+              ),
+            if (discountRate != null)
+              Text(
+                '${numberFormat.format(discountRate)}%할인',
+                style: Theme.of(context).textTheme.bodyLarge!.copyWith(
+                    fontSize: 18.sp,
+                    color: ColorConstants.personalBrandingTextHighlightColor),
+              ),
+            if (discountRate == null)
+              RSizedBox(
+                height: 35.w,
+              ),
+            Text(
+              numberFormat.format(discountedPrice),
+              style: Theme.of(context).textTheme.bodyLarge!.copyWith(
+                  color: Colors.white,
+                  fontSize: 35.sp,
+                  fontWeight: FontWeight.w900),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/features/tutis/widgets/tuti_widgets/main_banner.dart

@@ -3,23 +3,27 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:go_router/go_router.dart';
 import 'package:tuti/constants/color.dart';
 import 'package:tuti/constants/gaps.dart';
-import 'package:tuti/features/tutis/views/personal_branding_screen.dart';
 
 class TuTiBanner extends StatelessWidget {
-  const TuTiBanner({
-    super.key,
-  });
+  const TuTiBanner(
+      {super.key,
+      required this.location,
+      required this.title,
+      required this.subtitle});
+
+  final String location;
+  final String title;
+  final String subtitle;
 
   @override
   Widget build(BuildContext context) {
     return GestureDetector(
       onTap: () {
-        context.push(PersonalBrandingScreen.routePath);
+        context.push(location);
       },
       child: Container(
         width: MediaQuery.of(context).size.width * 0.8,
         height: 80.h,
-        margin: EdgeInsets.symmetric(horizontal: 15.w),
         decoration: ShapeDecoration(
           color: Colors.white,
           shape: RoundedRectangleBorder(
@@ -42,14 +46,14 @@ class TuTiBanner extends StatelessWidget {
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
                 Text(
-                  '[공지]\n트티 강점 발견 연구소 1기 모집 중!',
+                  title,
                   style: Theme.of(context)
                       .textTheme
                       .titleSmall!
                       .copyWith(fontSize: 12.sp),
                 ),
                 Text(
-                  '🤯 인생 고민, 진로 고민 ! 미래에 대한 확신이 들지 않을 때!',
+                  subtitle,
                   style: Theme.of(context).textTheme.bodySmall!.copyWith(
                       color: ColorConstants.primary600Color,
                       fontSize: 11.sp,

lib/features/tutis/widgets/tuti_widgets/tuti_card_mobile.dart

@@ -97,7 +97,11 @@ class _TuTiCardMobileState extends ConsumerState<TuTiCardMobile> {
             floating: false,
             pinned: false,
             flexibleSpace: const FlexibleSpaceBar(
-              background: TuTiBanner(),
+              background: TuTiBanner(
+                location: PersonalBrandingScreen.routePath,
+                title: '[공지]\n트티 강점 발견 연구소 1기 모집 중!',
+                subtitle: '🤯 인생 고민, 진로 고민 ! 미래에 대한 확신이 들지 않을 때!',
+              ),
             ),
           ),
           SliverGrid(

pubspec.yaml

@@ -45,6 +45,7 @@ dependencies:
   kakao_flutter_sdk_user: ^1.8.0
   flutter_secure_storage: ^4.2.1
   universal_html: ^2.2.4
+  intl: ^0.19.0
 
 dev_dependencies:
   flutter_test: