Merge pull request #22 from PKNU-Assemble/feat/#20

Feat/#20 마이 페이지 UI

frontend/lib/main.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
-import 'package:frontend/pages/home_page.dart';
-import 'package:frontend/pages/search_page.dart';
+
+import 'package:frontend/pages/my_page.dart';
 
 void main() {
   runApp(const MyApp());
@@ -33,6 +33,7 @@ class _MyHomePageState extends State<MyHomePage> {
   @override
   Widget build(BuildContext context) {
     // return const HomePage();
-    return const SearchPage();
+    // return const SearchPage();
+    return const MyPage();
   }
 }

frontend/lib/pages/home_page.dart

@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:frontend/widgets/custom_app_bar.dart';
+import 'package:frontend/widgets/main_app_bar.dart';
 import 'package:frontend/colors/app_colors.dart';
 import 'package:frontend/widgets/custom_bottom_navigation_bar.dart';
 import 'package:frontend/widgets/home_recommend_list.dart';
@@ -16,7 +16,7 @@ class _HomePageState extends State<HomePage> {
   @override
   Widget build(BuildContext context) {
     return const Scaffold(
-      appBar: CustomAppBar(),
+      appBar: MainAppBar(),
       backgroundColor: AppColors.backgroundColor,
       body: SingleChildScrollView(
         child: Padding(

frontend/lib/pages/my_page.dart

@@ -0,0 +1,42 @@
+import 'package:flutter/material.dart';
+import 'package:frontend/colors/app_colors.dart';
+import 'package:frontend/widgets/custom_bottom_navigation_bar.dart';
+import 'package:frontend/widgets/my_app_bar.dart';
+import 'package:frontend/widgets/bookmark_list_togle.dart';
+import 'package:frontend/widgets/my_page_function_list.dart';
+
+class MyPage extends StatefulWidget {
+  const MyPage({super.key});
+
+  @override
+  _MyPageState createState() => _MyPageState();
+}
+
+class _MyPageState extends State<MyPage> {
+  @override
+  Widget build(BuildContext context) {
+    return const Scaffold(
+      appBar: MyAppBar(),
+      backgroundColor: AppColors.backgroundColor,
+      body: Column(
+        children: [
+          Padding(
+            padding: EdgeInsets.only(
+              top: 70.0,
+            ),
+            child: Column(
+              children: [
+                BookmarkListTogle(),
+                SizedBox(
+                  height: 10,
+                ),
+                MyPageFunctionList(),
+              ],
+            ),
+          ),
+        ],
+      ),
+      bottomNavigationBar: CustomBottomNavigationBar(),
+    );
+  }
+}

frontend/lib/widgets/bookmark_list_togle.dart

@@ -0,0 +1,72 @@
+import 'package:flutter/material.dart';
+
+class BookmarkListTogle extends StatefulWidget {
+  const BookmarkListTogle({Key? key}) : super(key: key);
+
+  @override
+  _BookmarkListTogleState createState() => _BookmarkListTogleState();
+}
+
+class _BookmarkListTogleState extends State<BookmarkListTogle> {
+  bool isExpanded = false;
+
+  void _toggleExpand() {
+    setState(() {
+      isExpanded = !isExpanded;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.orangeAccent,
+      padding: const EdgeInsets.all(16.0),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              const Text(
+                "오리님의 관심있는 컨텐츠",
+                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+              ),
+              IconButton(
+                icon: Icon(isExpanded ? Icons.remove : Icons.add),
+                onPressed: _toggleExpand,
+              ),
+            ],
+          ),
+          const SizedBox(height: 16.0),
+          GridView.builder(
+            shrinkWrap: true,
+            physics: const NeverScrollableScrollPhysics(),
+            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+              crossAxisCount: 3, // 한 줄에 3개의 항목
+              crossAxisSpacing: 10.0,
+              mainAxisSpacing: 10.0,
+              childAspectRatio: 1, // 정사각형 비율
+            ),
+            itemCount: isExpanded ? 9 : 3, // 확장 여부에 따른 항목 수
+            itemBuilder: (context, index) {
+              return Column(
+                children: [
+                  Container(
+                    height: 80,
+                    width: 80,
+                    color: Colors.grey,
+                  ),
+                  const SizedBox(height: 8),
+                  const Text(
+                    "도덕과 역대사이",
+                    style: TextStyle(fontSize: 12),
+                  ),
+                ],
+              );
+            },
+          ),
+        ],
+      ),
+    );
+  }
+}

frontend/lib/widgets/custom_app_bar.dart → frontend/lib/widgets/main_app_bar.dart

@@ -1,8 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 
-class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
-  const CustomAppBar({super.key});
+class MainAppBar extends StatelessWidget implements PreferredSizeWidget {
+  const MainAppBar({super.key});
 
   @override
   Widget build(BuildContext context) {

frontend/lib/widgets/my_app_bar.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
+  const MyAppBar({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return AppBar(
+      backgroundColor: Colors.transparent,
+      elevation: 0,
+      title: const Text('마이페이지'),
+      actions: [
+        Padding(
+          padding: const EdgeInsets.only(right: 20),
+          child: SvgPicture.asset(
+            'assets/icons/menu.svg',
+            height: 20,
+          ),
+        ),
+      ],
+    );
+  }
+
+  @override
+  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
+}

frontend/lib/widgets/my_page_function_list.dart

@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+
+class MyPageFunctionList extends StatelessWidget {
+  const MyPageFunctionList({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: const BoxDecoration(
+        border: Border(
+          top: BorderSide(color: Colors.orange, width: 2.0), // 위쪽 실선
+          bottom: BorderSide(color: Colors.orange, width: 2.0), // 아래쪽 실선
+        ),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          _buildSettingsItem("포즈 정렬 수정"),
+          _buildDottedDivider(),
+          _buildSettingsItem("환경설정"),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildSettingsItem(String title) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 8.0),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Text(
+            title,
+            style: const TextStyle(
+              fontSize: 16,
+              fontWeight: FontWeight.bold,
+            ),
+          ),
+          const Icon(
+            Icons.arrow_drop_down,
+            color: Colors.orange,
+            size: 24.0, // 더 큰 아이콘 크기
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildDottedDivider() {
+    return Container(
+      margin: const EdgeInsets.symmetric(horizontal: 8.0),
+      child: Row(
+        children: List.generate(
+            150 ~/ 5,
+            (index) => Expanded(
+                  child: Container(
+                    color: index % 2 == 0 ? Colors.transparent : Colors.orange,
+                    height: 1,
+                  ),
+                )),
+      ),
+    );
+  }
+}