Feat/#20 rating

src/components/MapStoreReviewList.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
-import {StyleSheet, View} from 'react-native';
+import React, {useState} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import {FlatList} from 'react-native-gesture-handler';
+import ReviewModal from '../modal/ReviewModal';
 import {MapStoreReview} from './MapStoreReview';
 
 const dummyReviews = [
@@ -55,12 +56,10 @@ const dummyReviews = [
 ];
 
 export const MapStoreReviewList = () => {
-  return (
-    <View style={[styles.reviewListWrap]}>
-      <FlatList
-        data={dummyReviews}
-        keyExtractor={(item, index) => index.toString()}
-        renderItem={({item}) => {
+  const renderedReviews = (data: any) => {
+    return (
+      <>
+        {data.map((item: any) => {
           return (
             <MapStoreReview
               name={item.name}
@@ -70,10 +69,11 @@ export const MapStoreReviewList = () => {
               images={item.images}
             />
           );
-        }}
-      />
-    </View>
-  );
+        })}
+      </>
+    );
+  };
+  return <View style={[styles.reviewListWrap]}>{renderedReviews(dummyReviews)}</View>;
 };
 
 const styles = StyleSheet.create({

src/components/MapStoreReviewPhoto.tsx

@@ -13,28 +13,29 @@ const imagedata = [
   {uri: 'https://source.unsplash.com/1024x768/?man'},
 ];
 
-export const MapStoreReviewPhoto = () => {
+const renderedImageList = (data: any) => {
   return (
-    <View style={[styles.reviewPhotoWrap]}>
-      <FlatList
-        data={imagedata}
-        renderItem={({item}) => (
+    <>
+      {data.map((item) => {
+        return (
           <View style={{borderColor: '#FFFFFF', borderWidth: 1}}>
             <Image source={{uri: item.uri}} style={{height: IMAGESIZE - 2, width: IMAGESIZE - 2}} />
           </View>
-        )}
-        keyExtractor={(item, index) => index.toString()}
-        numColumns={3}
-        showsVerticalScrollIndicator={false}
-        scrollEventThrottle={10}
-      />
-    </View>
+        );
+      })}
+    </>
   );
 };
 
+export const MapStoreReviewPhoto = () => {
+  return <View style={[styles.reviewPhotoWrap]}>{renderedImageList(imagedata)}</View>;
+};
+
 const styles = StyleSheet.create({
   reviewPhotoWrap: {
     flex: 1,
     backgroundColor: '#FFFFFF',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
   },
 });

src/components/ReviewRate.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import type {FC} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {Rating} from 'react-native-ratings';
+type ReviewRateProps = {
+  name: string;
+  storeId: number;
+  setRating: (rating: number) => void;
+  rating: number;
+  goNext: () => void;
+};
+const RATE_STAR = require('../assets/images/Rate_Star.png');
+export const ReviewRate: FC<ReviewRateProps> = ({rating, setRating, storeId, name, goNext}) => {
+  return (
+    <View style={styles.MainContainer}>
+      <View>
+        <Text style={styles.textStyle}>음식은 어떠셨나요?</Text>
+        <Text style={styles.textStyleSmall}>{name}</Text>
+        <Rating
+          type="custom"
+          ratingColor="#f1c40f"
+          ratingBackgroundColor="#EFEFEF"
+          onFinishRating={setRating}
+          startingValue={rating}
+          imageSize={49}
+          ratingImage={RATE_STAR}
+          style={[styles.childView]}
+        />
+      </View>
+
+      <TouchableOpacity onPress={goNext} style={[styles.reviewConfirmButton]}>
+        <View>
+          <Text style={[styles.reviewConfirmButtonText]}>확인</Text>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  MainContainer: {
+    flex: 1,
+    alignItems: 'center',
+    marginTop: 60,
+    justifyContent: 'space-between',
+    marginLeft: 16,
+    marginRight: 16,
+  },
+  childView: {
+    marginTop: 150,
+  },
+  textStyle: {
+    fontFamily: 'Pretendard-SemiBold',
+    fontWeight: '600',
+    textAlign: 'center',
+    fontSize: 24,
+    lineHeight: 34,
+    color: '#111111',
+    marginBottom: 8,
+  },
+  textStyleSmall: {
+    fontFamily: 'Pretendard-Medium',
+    fontWeight: '500',
+    textAlign: 'center',
+    fontSize: 16,
+    lineHeight: 24,
+    color: '#616161',
+  },
+  reviewConfirmButton: {
+    width: '100%',
+    height: 56,
+    borderRadius: 10,
+    backgroundColor: '#E8E8E8',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  reviewConfirmButtonText: {
+    color: '#111111',
+  },
+});

src/components/ReviewWrite.tsx

@@ -0,0 +1,172 @@
+import React, {useState} from 'react';
+import type {FC} from 'react';
+import {Image, StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native';
+import {Rating} from 'react-native-ratings';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import {ImageLibraryOptions, launchCamera, launchImageLibrary} from 'react-native-image-picker';
+
+type imageData = {
+  uri: string;
+  type: string;
+  name: string;
+};
+
+type ReviewWriteProps = {
+  name: string;
+  submitReview: () => void;
+  rating: number;
+  setRating: (rating: number) => void;
+  reviewContent: string;
+  setReviewContent: React.Dispatch<React.SetStateAction<string>>;
+  imageUri: imageData[];
+  setImageUri: React.Dispatch<React.SetStateAction<imageData[]>>;
+};
+
+const options: ImageLibraryOptions = {
+  mediaType: 'photo',
+  maxWidth: 200,
+  maxHeight: 200,
+  quality: 0.5,
+};
+
+const RATE_STAR = require('../assets/images/Rate_Star.png');
+export const ReviewWrite: FC<ReviewWriteProps> = ({
+  name,
+  submitReview,
+  rating,
+  setRating,
+  imageUri,
+  setImageUri,
+  reviewContent,
+  setReviewContent,
+}) => {
+  const showImageLibrary = async () => {
+    const result = await launchImageLibrary(options, (response) => {
+      if (response.didCancel) {
+        console.log('취소');
+      } else if (response.errorCode) {
+        console.log(response.errorMessage);
+      }
+    });
+    if (result.assets) {
+      const data: imageData = {
+        uri: result.assets[0].uri as string,
+        type: result.assets[0].type as string,
+        name: result.assets[0].fileName as string,
+      };
+      setImageUri([...imageUri, data]);
+    }
+    console.log(result);
+  };
+  return (
+    <View style={[styles.mainContainer]}>
+      <View style={[styles.reviewContainer]}>
+        <Text style={styles.storeName}>{name}</Text>
+        <Rating
+          type="custom"
+          ratingColor="#f1c40f"
+          ratingBackgroundColor="#EFEFEF"
+          onFinishRating={setRating}
+          startingValue={rating}
+          imageSize={24}
+          ratingImage={RATE_STAR}
+          style={[styles.childView]}
+        />
+        <TextInput
+          style={[styles.reviewContent]}
+          multiline={true}
+          placeholder={'리뷰내용 작성'}
+          selectionColor={'#6C69FF'}
+          onChangeText={(text) => {
+            setReviewContent(text);
+          }}
+          value={reviewContent}
+        />
+        <View style={[styles.ImageSelectContainer]}>
+          <View style={[styles.flexRow]}>
+            <Text>사진 첨부</Text>
+            <Text>1/3</Text>
+          </View>
+
+          <View style={[styles.flexRow]}>
+            <TouchableOpacity style={[styles.imageAddButton]} onPress={showImageLibrary}>
+              <Icon name="plus" size={24} />
+            </TouchableOpacity>
+            {imageUri.map((data) => {
+              return (
+                <View style={{marginRight: 8}}>
+                  <Image source={{uri: data.uri}} style={{width: 80, height: 80}} />
+                </View>
+              );
+            })}
+          </View>
+        </View>
+      </View>
+
+      <TouchableOpacity onPress={submitReview} style={[styles.reviewConfirmButton]}>
+        <View>
+          <Text style={[styles.reviewConfirmButtonText]}>확인</Text>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginLeft: 16,
+    marginRight: 16,
+  },
+  reviewContainer: {
+    alignItems: 'center',
+    width: '100%',
+  },
+  storeName: {
+    fontFamily: 'Pretendard-Medium',
+    fontSize: 16,
+    lineHeight: 24,
+    textAlign: 'center',
+  },
+  childView: {marginTop: 8, marginBottom: 16},
+  reviewConfirmButton: {
+    width: '100%',
+    height: 56,
+    borderRadius: 10,
+    backgroundColor: '#6C69FF',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  reviewConfirmButtonText: {
+    color: '#FFFFFF',
+  },
+  reviewContent: {
+    width: '100%',
+    height: 164,
+    flexWrap: 'wrap',
+    backgroundColor: '#F5F5F5',
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 16,
+    borderRadius: 10,
+    marginBottom: 16,
+  },
+  ImageSelectContainer: {
+    width: '100%',
+  },
+  flexRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  imageAddButton: {
+    width: 80,
+    height: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#EFEFEF',
+    marginRight: 8,
+  },
+});