Merge pull request #21 from PKNU-Assemble/feat/#17

Feat/#17 검색 페이지 UI

frontend/lib/main.dart

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

frontend/lib/pages/search_page.dart

@@ -1,9 +1,10 @@
 import 'package:flutter/material.dart';
-import 'package:frontend/widgets/custom_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';
 import 'package:frontend/widgets/search_box.dart';
+import 'package:frontend/widgets/recent_search_word.dart';
+import 'package:frontend/widgets/select_movie_drama_tab.dart';
+import 'package:frontend/widgets/selectable_circle.dart';
 
 class SearchPage extends StatefulWidget {
   const SearchPage({super.key});
@@ -16,19 +17,20 @@ class _SearchPageState extends State<SearchPage> {
   @override
   Widget build(BuildContext context) {
     return const Scaffold(
-      appBar: CustomAppBar(),
       backgroundColor: AppColors.backgroundColor,
       body: SingleChildScrollView(
         child: Padding(
-          padding: EdgeInsets.all(10.0),
+          padding: EdgeInsets.only(
+            left: 10.0,
+            right: 10.0,
+            top: 70.0,
+          ),
           child: Column(
             children: [
-              Text('data'),
-              SizedBox(
-                height: 200,
-                child: HomeRecommendList(),
-              ),
               SearchBox(),
+              RecentSearchWord(),
+              SelectMovieDramaTab(),
+              SelectableCircle(),
             ],
           ),
         ),

frontend/lib/widgets/custom_bottom_navigation_bar.dart

@@ -35,10 +35,6 @@ class _CustomBottomNavigationBarState extends State<CustomBottomNavigationBar> {
           icon: Icon(Icons.person),
           label: '카메라',
         ),
-        BottomNavigationBarItem(
-          icon: Icon(Icons.person),
-          label: '지도',
-        ),
         BottomNavigationBarItem(
           icon: Icon(Icons.person),
           label: '마이페이지',

frontend/lib/widgets/recent_search_word.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+
+class RecentSearchWord extends StatelessWidget {
+  const RecentSearchWord({super.key});
+
+  // final String text;
+  // final VoidCallback onDelete;
+
+  // const RecentSearchWord({
+  //   Key? key,
+  //   required this.text,
+  //   required this.onDelete,
+  // }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 100,
+      margin: const EdgeInsets.symmetric(horizontal: 4.0),
+      decoration: BoxDecoration(
+        color: Colors.lightBlueAccent.shade100,
+        borderRadius: BorderRadius.circular(15.0),
+      ),
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            const Flexible(
+              child: Text(
+                "안녕안녕안녕안녕안녕",
+                overflow: TextOverflow.fade,
+                maxLines: 1,
+                softWrap: false,
+                style: TextStyle(color: Colors.black),
+              ),
+            ),
+            const SizedBox(width: 4.0),
+            GestureDetector(
+              // onTap: ,
+              child: const Icon(
+                Icons.cancel,
+                size: 16.0,
+                color: Colors.grey,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

frontend/lib/widgets/select_movie_drama_tab.dart

@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+
+class SelectMovieDramaTab extends StatefulWidget {
+  const SelectMovieDramaTab({super.key});
+
+  @override
+  _SelectMovieDramaTabState createState() => _SelectMovieDramaTabState();
+}
+
+class _SelectMovieDramaTabState extends State<SelectMovieDramaTab>
+    with SingleTickerProviderStateMixin {
+  late TabController tabController;
+
+  @override
+  void initState() {
+    super.initState();
+    tabController = TabController(length: 2, vsync: this);
+  }
+
+  @override
+  void dispose() {
+    tabController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return TabBar(
+      controller: tabController,
+      tabs: const [
+        Tab(text: '영화'),
+        Tab(text: '드라마'),
+      ],
+      indicator: const BoxDecoration(
+        border: Border(
+          bottom: BorderSide(
+            color: Colors.orange,
+            width: 4.0,
+          ),
+        ),
+      ),
+      indicatorSize: TabBarIndicatorSize.tab, // 이 속성으로 인디케이터 크기를 탭 크기에 맞춤
+      labelColor: Colors.black,
+      unselectedLabelColor: Colors.grey,
+    );
+  }
+}

frontend/lib/widgets/selectable_circle.dart

@@ -0,0 +1,79 @@
+import 'package:flutter/material.dart';
+
+class SelectableCircle extends StatefulWidget {
+  // final String label;
+
+  const SelectableCircle({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  _SelectableCircleState createState() => _SelectableCircleState();
+}
+
+class _SelectableCircleState extends State<SelectableCircle> {
+  bool isSelected = false;
+
+  void _toggleSelection() {
+    setState(() {
+      isSelected = !isSelected;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: _toggleSelection,
+      child: Column(
+        children: [
+          Stack(
+            alignment: Alignment.center,
+            children: [
+              // 회색 원
+              CircleAvatar(
+                radius: 35,
+                backgroundColor: Colors.grey.shade300,
+              ),
+              // 주황색 테두리가 그려진 원
+              if (isSelected)
+                CircleAvatar(
+                  radius: 37,
+                  backgroundColor: Colors.transparent,
+                  child: Container(
+                    decoration: BoxDecoration(
+                      shape: BoxShape.circle,
+                      border: Border.all(color: Colors.orange, width: 3.0),
+                    ),
+                  ),
+                ),
+            ],
+          ),
+          const SizedBox(height: 8),
+          Text("영화",
+              style: TextStyle(color: isSelected ? Colors.black : Colors.grey)),
+        ],
+      ),
+    );
+  }
+}
+
+class CircleGrid extends StatelessWidget {
+  const CircleGrid({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return GridView.builder(
+      padding: const EdgeInsets.all(16.0),
+      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: 3, // 한 줄에 3개의 항목
+        crossAxisSpacing: 10.0,
+        mainAxisSpacing: 10.0,
+        childAspectRatio: 1, // 정사각형 비율
+      ),
+      itemCount: 9, // 예시를 위해 9개의 아이템을 표시
+      itemBuilder: (context, index) {
+        return const SelectableCircle();
+      },
+    );
+  }
+}