Feat: MyReview 사진 연결

BOBpossible · Jul 12, 2022 · 53bd613 · 53bd613
1 parent a3b9b88
commit 53bd613
Show file tree

Hide file tree

Showing 13 changed files with 332 additions and 205 deletions.
diff --git a/ios/BOB_FrontEnd/Info.plist b/ios/BOB_FrontEnd/Info.plist
@@ -56,7 +56,7 @@
 	<key>NSCameraUsageDescription</key>
 	<string>$(PRODUCT_NAME) would like to use your camera</string>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string/>
 	<key>NSPhotoLibraryAddUsageDescription</key>
 	<string>$(PRODUCT_NAME) would like to save photos to your photo gallery</string>
 	<key>NSPhotoLibraryUsageDescription</key>

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Map/MapStoreReviewList.tsx b/src/components/Map/MapStoreReviewList.tsx
@@ -37,7 +37,7 @@ export const MapStoreReviewList = ({
     ({pageParam}) => getStoreReviewList({pageParam}, storeData?.storeId),
     {
       getNextPageParam: (lastPage, pages) => {
-        console.log('페이지들:', pages.length);
+        // console.log('페이지들:', pages.length);
         if (lastPage.data.result.last === false) {
           return pages.length + 1;
         } else {

diff --git a/src/components/Map/MapStoreReviewPhoto.tsx b/src/components/Map/MapStoreReviewPhoto.tsx
@@ -44,7 +44,7 @@ export const MapStoreReviewPhoto = ({
     ({pageParam}) => getStoreReviewImages({pageParam}, storeData?.storeId),
     {
       getNextPageParam: (lastPage, pages) => {
-        console.log('페이지들:', pages.length);
+        // console.log('페이지들:', pages.length);
         if (lastPage.data.result.last === false) {
           return pages.length + 1;
         } else {
@@ -98,8 +98,8 @@ export const MapStoreReviewPhoto = ({
       renderItem={({item}) => {
         return (
           <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
-            {item.data.result.content.map((image: any) => (
-              <TouchableOpacity onPress={() => openPhotoModal(image.imageUrl)}>
+            {item.data.result.content.map((image: any, index: number) => (
+              <TouchableOpacity key={index} onPress={() => openPhotoModal(image.imageUrl)}>
                 <View style={{borderColor: '#FFFFFF', borderWidth: 1}}>
                   <FastImage
                     source={{uri: image.imageUrl}}

diff --git a/src/components/My/MyReviewEach.tsx b/src/components/My/MyReviewEach.tsx
@@ -4,11 +4,39 @@ import {View, StyleSheet, Text, TouchableOpacity} from 'react-native';
 import {DesignSystem} from '../../assets/DesignSystem';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {IMyReviewEachProps} from '../../data';
+import FastImage from 'react-native-fast-image';
+
+type MyReviewEachType = {
+  images: {imageUrl: string}[];
+  name: string;
+  date: string;
+  rate: number;
+  content: string;
+  reply: {date: string; reply: string; reviewReplyId: number}[];
+  openPhotoModal: (imageSource: string) => void;
+};
 
 //prettier-ignore
-export const MyReviewEach: FC<IMyReviewEachProps> = ({name, date, rate, content, images, reply, reviewId}) => {
+export const MyReviewEach: FC<MyReviewEachType> = ({
+  name, date, rate, content, images, reply, openPhotoModal
+}) => {
+  const renderedImage = (imagedata: {imageUrl: string}[]) => {
+    return (
+      <View style={[styles.reviewRow3]}>
+        {imagedata.map((item, index) => {
+          return (
+            <TouchableOpacity key={index} onPress={() => openPhotoModal(item.imageUrl)}>
+              <View style={[styles.reviewImageWrap]}>
+                <FastImage source={{uri: item.imageUrl}} style={[styles.imageSize]} />
+              </View>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    );
+  };
   return (
-    <View style={{backgroundColor: 'white'}}>
+    <View style={{backgroundColor: 'white', marginBottom: 8}}>
       <View style={[styles.totalWrap]}>
         <View style={[styles.customerWrap]}>
             <View style={[styles.title]}>
@@ -30,10 +58,7 @@ export const MyReviewEach: FC<IMyReviewEachProps> = ({name, date, rate, content,
             <View style={[styles.reviewContents]}>
                 <Text style={[DesignSystem.body1Lt, {color: 'black'}]}>{content}</Text>
             </View>
-            <View style={[styles.reviewImg]}>
-              <Text>🚨🚨🚨🚨🚨🚨🚨🚨🚨리뷰사진🚨🚨🚨🚨🚨</Text>
-              {/* images.imageUrl */}
-            </View>
+            {renderedImage(images)}
         </View>
         {reply.length !== 0 && (
           <View style={[styles.ownerWrap]}>
@@ -60,7 +85,6 @@ const styles = StyleSheet.create({
   },
   customerWrap: {
     flexDirection: 'column',
-    marginBottom: 16,
   },
   title: {
     flexDirection: 'row',
@@ -70,13 +94,9 @@ const styles = StyleSheet.create({
   },
   stars: {
     flexDirection: 'row',
-    marginBottom: 10,
   },
   reviewContents: {
-    marginBottom: 10,
-  },
-  reviewImg: {
-    flexDirection: 'column',
+    marginTop: 10,
   },
   ownerWrap: {
     flexDirection: 'column',
@@ -96,4 +116,10 @@ const styles = StyleSheet.create({
     marginTop: 12,
     marginBottom: 12,
   },
+  reviewRow3: {flexDirection: 'row', alignItems: 'center', marginTop: 8},
+  reviewImageWrap: {marginRight: 8},
+  imageSize: {
+    height: 80,
+    width: 80,
+  },
 });