From 1fa37ac872549195da8af10bc4a87f27a1191c8b Mon Sep 17 00:00:00 2001
From: jm3789 <jm37890@gmail.com>
Date: Thu, 30 May 2024 04:55:54 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=20=EC=B9=B4=ED=8E=98=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20handle=20marker=20tap=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=EA=B0=80=EC=A0=B8=EC=98=A4=EB=8A=94=20=EA=B2=83=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD(=EC=9E=84=EC=8B=9C)=20#387?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/lib/screen/cafe_details.dart | 36 ++----------------
 frontend/lib/screen/map_place.dart    | 53 +++++++++++++++++++++++++--
 2 files changed, 52 insertions(+), 37 deletions(-)

diff --git a/frontend/lib/screen/cafe_details.dart b/frontend/lib/screen/cafe_details.dart
index 209cfc5a90..603fcc2e3f 100644
--- a/frontend/lib/screen/cafe_details.dart
+++ b/frontend/lib/screen/cafe_details.dart
@@ -61,12 +61,14 @@ class CafeDetails extends StatefulWidget {
   final String cafeId;
   final String cafeName;
   final List<String> cafeDetailsArguments;
+  final Image? cafeImage;
 
   const CafeDetails({
     super.key,
     this.cafeId = "defaultCafeId",
     this.cafeName = "defaultCafeName",
     this.cafeDetailsArguments = const [],
+    this.cafeImage,
   });
 
   @override
@@ -118,27 +120,9 @@ class _CafeDetailsState extends State<CafeDetails>
     autoOfflineService.autoOffline();
   }
 
-  Future<void> getPlacePhotoUri() async {
-    try {
-      PlacesDetailsResponse place =
-          await places.getDetailsByPlaceId(widget.cafeDetailsArguments[9]);
-      if (place.isOkay && place.result.photos.isNotEmpty) {
-        String photoReference = place.result.photos[0].photoReference;
-        photoUrl =
-            'https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=$photoReference&key=${dotenv.env['googleApiKey']}';
-        setState(() {});
-      } else {
-        throw Exception('No photo found for this place.');
-      }
-    } catch (e) {
-      print('Error: $e');
-    }
-  }
-
   @override
   void initState() {
     super.initState();
-    getPlacePhotoUri();
     tabController = TabController(length: 2, vsync: this);
   }
 
@@ -181,21 +165,7 @@ class _CafeDetailsState extends State<CafeDetails>
       ),
       body: Column(
         children: [
-          Center(
-            child: photoUrl.isNotEmpty
-                ? Image.network(
-                    photoUrl,
-                    width: 450,
-                    height: 250,
-                    fit: BoxFit.cover,
-                  )
-                : Image.asset(
-                    "assets/no_image.png",
-                    width: 450,
-                    height: 250,
-                    fit: BoxFit.fitWidth,
-                  ),
-          ),
+          Center(child: widget.cafeImage),
           TabBar(
             controller: tabController,
             indicatorColor: Colors.black,
diff --git a/frontend/lib/screen/map_place.dart b/frontend/lib/screen/map_place.dart
index 442d6de706..b5ff3511ca 100644
--- a/frontend/lib/screen/map_place.dart
+++ b/frontend/lib/screen/map_place.dart
@@ -6,6 +6,7 @@ import 'package:frontend/model/matching_info_model.dart';
 import 'package:frontend/service/api_service.dart';
 import 'package:frontend/widgets/dialog/yn_dialog.dart';
 import 'package:frontend/widgets/dialog/one_button_dialog.dart';
+import 'package:google_maps_webservice/places.dart';
 import 'package:stomp_dart_client/stomp.dart';
 import 'package:frontend/service/stomp_service.dart';
 import 'package:provider/provider.dart';
@@ -231,13 +232,57 @@ class _GoogleMapWidgetState extends State<Google_Map> {
       cafeId,
     ];
 
+    // cafeId를 인자로 받아 photoUrl을 만들고 image를 반환하는 메소드
+    Future<Image> cafeIdToCafeImage(String cafeId) async {
+      final places = GoogleMapsPlaces(apiKey: "${dotenv.env['googleApiKey']}");
+      String photoUrl = '';
+      try {
+        PlacesDetailsResponse place = await places.getDetailsByPlaceId(cafeId);
+        if (place.isOkay && place.result.photos.isNotEmpty) {
+          String photoReference = place.result.photos[0].photoReference;
+          photoUrl =
+              'https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=$photoReference&key=${dotenv.env['googleApiKey']}';
+        } else {
+          throw Exception('No photo found for this place.');
+        }
+      } catch (e) {
+        print('Error: $e');
+      }
+      return photoUrl.isNotEmpty
+          ? Image.network(
+              photoUrl,
+              width: 450,
+              height: 250,
+              fit: BoxFit.cover,
+            )
+          : Image.asset(
+              "assets/no_image.png",
+              width: 450,
+              height: 250,
+              fit: BoxFit.fitWidth,
+            );
+    }
+
     Navigator.push(
       context,
       MaterialPageRoute(
-        builder: (context) => CafeDetails(
-          cafeId: cafeId,
-          cafeName: cafeName,
-          cafeDetailsArguments: detailsArguments,
+        builder: (context) => FutureBuilder<Image>(
+          future: cafeIdToCafeImage(cafeId),
+          builder: (context, snapshot) {
+            if (snapshot.connectionState == ConnectionState.done) {
+              if (snapshot.hasError) {
+                return Text('Error: ${snapshot.error}');
+              }
+              return CafeDetails(
+                cafeId: cafeId,
+                cafeName: cafeName,
+                cafeDetailsArguments: detailsArguments,
+                cafeImage: snapshot.data!,
+              );
+            } else {
+              return const Center(child: CircularProgressIndicator());
+            }
+          },
         ),
       ),
     );