Feat: finish review rate first draft

src/components/ReviewRate.tsx

@@ -1,29 +1,80 @@
 import React from 'react';
 import type {FC} from 'react';
-import {Text, View} from 'react-native';
-import {Rating, AirbnbRating} from 'react-native-ratings';
-
+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;
 };
-
-export const ReviewRate: FC<ReviewRateProps> = ({setRating, storeId, name}) => {
+const RATE_STAR = require('../assets/images/Rate_Star.png');
+export const ReviewRate: FC<ReviewRateProps> = ({rating, setRating, storeId, name, goNext}) => {
   return (
-    <View>
+    <View style={styles.MainContainer}>
       <View>
-        <Text>음식은 어떠셨나요?</Text>
-        <Text>{name}</Text>
+        <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>
-      <AirbnbRating
-        count={5}
-        defaultRating={0}
-        size={30}
-        onFinishRating={(rating: number) => {
-          setRating(rating);
-        }}
-      />
+
+      <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,
+  },
+});

src/modal/ReviewModal.tsx

@@ -1,28 +1,41 @@
-import React, {useCallback, useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import type {FC} from 'react';
 import {Modal, SafeAreaView, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {ReviewRate} from '../components/ReviewRate';
+import {ReviewWrite} from '../components/ReviewWrite';
 
 type ReviewModalProps = {
   storeId: number;
   visible: boolean;
   closeReviewModal: () => void;
 };
+type imageData = {
+  uri: string;
+  type: string;
+  name: string;
+};
 
 const ReviewModal: FC<ReviewModalProps> = ({visible, closeReviewModal, storeId}) => {
   const [rating, setRating] = useState(0);
-  const callbackRating = useCallback((rate: number) => {
-    setRating(rate);
-  }, []);
-  console.log(rating);
+  const [showRating, setShowRating] = useState(true);
+  const [reviewContent, setReviewContent] = useState('');
+  const [imageUri, setImageUri] = useState<imageData[]>([]);
+
+  const submitReview = () => {
+    //post 리뷰
+    //review content, image...
+  };
   return (
     <Modal visible={visible} animationType="fade">
       <SafeAreaView style={[styles.safeView]}>
         <View style={[styles.modalHeader]}>
           <TouchableOpacity
             onPress={() => {
               setRating(0);
+              setShowRating(true);
+              setImageUri([]);
+              setReviewContent('');
               closeReviewModal();
             }}
           >
@@ -31,7 +44,26 @@ const ReviewModal: FC<ReviewModalProps> = ({visible, closeReviewModal, storeId})
             </View>
           </TouchableOpacity>
         </View>
-        {<ReviewRate name={'마라탕'} setRating={callbackRating} storeId={storeId} />}
+        {showRating ? (
+          <ReviewRate
+            name={'마라탕'}
+            rating={rating}
+            setRating={setRating}
+            storeId={storeId}
+            goNext={() => setShowRating(false)}
+          />
+        ) : (
+          <ReviewWrite
+            name={'마라탕'}
+            submitReview={() => {}}
+            setRating={setRating}
+            rating={rating}
+            imageUri={imageUri}
+            setImageUri={setImageUri}
+            reviewContent={reviewContent}
+            setReviewContent={setReviewContent}
+          />
+        )}
       </SafeAreaView>
     </Modal>
   );

src/modal/StoreModal.tsx

@@ -18,7 +18,6 @@ import {
   MapStoreReviewList,
   MapStoreReviewPhoto,
 } from '../components';
-import {ScrollView} from 'react-native-gesture-handler';
 import ReviewModal from './ReviewModal';
 import {useStyle} from '../hooks';
 
@@ -62,7 +61,6 @@ const StoreModal: FC<StoreModalProps> = ({storeId, visible, closeStoreModal}) =>
     setReviewModal(true);
   };
   const offset1 = useRef(new Animated.Value(0)).current;
-  useEffect(() => {}, []);
 
   const headerTextStyle = useStyle({
     opacity: offset1.interpolate({
@@ -140,7 +138,7 @@ const StoreModal: FC<StoreModalProps> = ({storeId, visible, closeStoreModal}) =>
           {isReview ? <MapStoreReviewList /> : <MapStoreReviewPhoto />}
         </Animated.ScrollView>
         {isReview && (
-          <TouchableOpacity onPress={() => openReviewModal(0)}>
+          <TouchableOpacity onPress={() => openReviewModal()}>
             <View style={[styles.reviewButton]}>
               <Text style={[styles.reviewButtonText]}>리뷰 남기기</Text>
               <Icon name="pencil" size={18} color="#FFFFFF" />
@@ -166,8 +164,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    borderBottomColor: '#EDEDED',
-    borderBottomWidth: 1,
   },
   backButton: {
     marginLeft: 16,