🔀 :: (#11) madmovie 페이지 퍼블리싱

lib/components/hashtag.dart

@@ -16,9 +16,7 @@ class GrapperHashtag extends StatelessWidget {
     return Container(
       height: 30,
       alignment: Alignment.center,
-      padding: isSelected
-          ? const EdgeInsets.symmetric(horizontal: 20)
-          : const EdgeInsets.all(0),
+      padding: isSelected ? const EdgeInsets.symmetric(horizontal: 20) : const EdgeInsets.all(0),
       decoration: BoxDecoration(
         color: isSelected ? GrapperColorRed.normal : Colors.black,
         borderRadius: const BorderRadius.all(

lib/main.dart

@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:grapper/views/recommend/recommend_page.dart';
+import 'package:grapper/views/home/home_page.dart';
 
 void main() {
   runApp(const MyApp());
@@ -15,7 +15,7 @@ class MyApp extends StatelessWidget {
         scaffoldBackgroundColor: Colors.black,
       ),
       debugShowCheckedModeBanner: false,
-      home: const RecommendPage(),
+      home: const HomePage(),
     );
   }
 }

lib/views/home/home_page.dart

@@ -0,0 +1,81 @@
+import 'package:flutter/material.dart';
+import 'package:grapper/components/appbar.dart';
+import 'package:grapper/components/hashtag.dart';
+import 'package:grapper/utils/grapper_color.dart';
+import 'package:grapper/views/recommend/recommend_page.dart';
+
+// ignore: must_be_immutable
+class HomePage extends StatefulWidget {
+  const HomePage({super.key});
+
+  @override
+  State<HomePage> createState() => _HomePageState();
+}
+
+class _HomePageState extends State<HomePage> {
+  bool touch = true;
+  int hashtagIndex = 1;
+  final List<String> hashtags = ['핫딜', '추천', '인디게임', '매드무비'];
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: SafeArea(
+        left: false,
+        right: false,
+        bottom: false,
+        child: Column(
+          children: <Widget>[
+            Container(
+              margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
+              child: Column(
+                children: <Widget>[
+                  const GrapperAppbar(
+                    text: '테스트',
+                  ),
+                  const SizedBox(
+                    height: 25,
+                  ),
+                  Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: List.generate(
+                      hashtags.length,
+                      (index) => GestureDetector(
+                        onTap: () {
+                          setState(() {
+                            hashtagIndex = index;
+                          });
+                        },
+                        child: GrapperHashtag(
+                          text: hashtags[index],
+                          isSelected: hashtagIndex == index,
+                        ),
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            GestureDetector(
+              onTap: () => setState(() {
+                touch = false;
+              }),
+              child: touch
+                  ? Container(
+                      margin: const EdgeInsets.only(top: 12),
+                      decoration: const BoxDecoration(color: Colors.white),
+                      height: 50,
+                    )
+                  : Container(
+                      margin: const EdgeInsets.only(top: 5),
+                      height: 14,
+                      color: GrapperColorGrey.darkHover,
+                    ),
+            ),
+            const RecommendPage(),
+          ],
+        ),
+      ),
+    );
+  }
+}