From 9e976e45b2962d9ab91815393e7e9cc55c393a6f Mon Sep 17 00:00:00 2001
From: Sungho Park <43461389+psh320@users.noreply.github.com>
Date: Fri, 17 Jun 2022 17:44:20 +0900
Subject: [PATCH 1/5] Feat: add review Button
---
src/components/MapStoreReviewList.tsx | 37 +++++++++++++++++++++--
src/modal/ReviewModal.tsx | 43 +++++++++++++++++++++++++++
src/screens/Map.tsx | 6 +++-
3 files changed, 83 insertions(+), 3 deletions(-)
create mode 100644 src/modal/ReviewModal.tsx
diff --git a/src/components/MapStoreReviewList.tsx b/src/components/MapStoreReviewList.tsx
index 7024998..a1d59a4 100644
--- a/src/components/MapStoreReviewList.tsx
+++ b/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,11 +56,20 @@ const dummyReviews = [
];
export const MapStoreReviewList = () => {
+ const [reviewModal, setReviewModal] = useState(false);
+ const [storeId, setStoreId] = useState(0);
+
+ const openReviewModal = async (id: number) => {
+ await setStoreId(id);
+ setReviewModal(true);
+ };
+
return (
index.toString()}
+ showsVerticalScrollIndicator={false}
renderItem={({item}) => {
return (
{
);
}}
/>
+ setReviewModal(false)}
+ storeId={storeId}
+ />
+ openReviewModal(0)}>
+
+ 리뷰 남기기
+
+
);
};
@@ -81,4 +101,17 @@ const styles = StyleSheet.create({
backgroundColor: '#FFFFFF',
flex: 1,
},
+ reviewButton: {
+ width: '80%',
+ height: 56,
+ backgroundColor: '#000000',
+ position: 'absolute',
+ bottom: 8,
+ alignSelf: 'center',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ reviewButtonText: {
+ color: '#FFFFFF',
+ },
});
diff --git a/src/modal/ReviewModal.tsx b/src/modal/ReviewModal.tsx
new file mode 100644
index 0000000..1f17e27
--- /dev/null
+++ b/src/modal/ReviewModal.tsx
@@ -0,0 +1,43 @@
+import React 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';
+
+type ReviewModalProps = {
+ storeId: number;
+ visible: boolean;
+ closeReviewModal: () => void;
+};
+
+const ReviewModal: FC = ({visible, closeReviewModal, storeId}) => {
+ return (
+
+
+
+
+
+
+
+
+
+ 리뷰!!
+
+
+ );
+};
+
+export default ReviewModal;
+
+const styles = StyleSheet.create({
+ safeView: {flex: 1, backgroundColor: '#FFFFFF'},
+ modalHeader: {
+ height: 40,
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ },
+ backButton: {
+ marginLeft: 16,
+ marginRight: 16,
+ },
+});
diff --git a/src/screens/Map.tsx b/src/screens/Map.tsx
index c2d1926..6fe73f4 100644
--- a/src/screens/Map.tsx
+++ b/src/screens/Map.tsx
@@ -45,7 +45,11 @@ const Map = () => {
return (
setAddressModal(false)} />
- setStoreModal(false)} storeId={0} />
+ setStoreModal(false)}
+ storeId={storeId}
+ />
setAddressModal(true)}>
삼성동
From e0990abeac4619e17308665684842a0ce5ea16e3 Mon Sep 17 00:00:00 2001
From: Sungho Park <43461389+psh320@users.noreply.github.com>
Date: Sun, 19 Jun 2022 00:21:14 +0900
Subject: [PATCH 2/5] Feat: add animation for header text
---
src/components/MapStoreReviewList.tsx | 51 +++-----------
src/components/MapStoreReviewPhoto.tsx | 25 +++----
src/modal/StoreModal.tsx | 92 ++++++++++++++++++++++----
3 files changed, 102 insertions(+), 66 deletions(-)
diff --git a/src/components/MapStoreReviewList.tsx b/src/components/MapStoreReviewList.tsx
index a1d59a4..2ecd7b7 100644
--- a/src/components/MapStoreReviewList.tsx
+++ b/src/components/MapStoreReviewList.tsx
@@ -56,21 +56,10 @@ const dummyReviews = [
];
export const MapStoreReviewList = () => {
- const [reviewModal, setReviewModal] = useState(false);
- const [storeId, setStoreId] = useState(0);
-
- const openReviewModal = async (id: number) => {
- await setStoreId(id);
- setReviewModal(true);
- };
-
- return (
-
- index.toString()}
- showsVerticalScrollIndicator={false}
- renderItem={({item}) => {
+ const renderedReviews = (data: any) => {
+ return (
+ <>
+ {data.map((item: any) => {
return (
{
images={item.images}
/>
);
- }}
- />
- setReviewModal(false)}
- storeId={storeId}
- />
- openReviewModal(0)}>
-
- 리뷰 남기기
-
-
-
- );
+ })}
+ >
+ );
+ };
+ return {renderedReviews(dummyReviews)};
};
const styles = StyleSheet.create({
@@ -101,17 +81,4 @@ const styles = StyleSheet.create({
backgroundColor: '#FFFFFF',
flex: 1,
},
- reviewButton: {
- width: '80%',
- height: 56,
- backgroundColor: '#000000',
- position: 'absolute',
- bottom: 8,
- alignSelf: 'center',
- justifyContent: 'center',
- alignItems: 'center',
- },
- reviewButtonText: {
- color: '#FFFFFF',
- },
});
diff --git a/src/components/MapStoreReviewPhoto.tsx b/src/components/MapStoreReviewPhoto.tsx
index 0c44db9..1b497c7 100644
--- a/src/components/MapStoreReviewPhoto.tsx
+++ b/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 (
-
- (
+ <>
+ {data.map((item) => {
+ return (
- )}
- keyExtractor={(item, index) => index.toString()}
- numColumns={3}
- showsVerticalScrollIndicator={false}
- scrollEventThrottle={10}
- />
-
+ );
+ })}
+ >
);
};
+export const MapStoreReviewPhoto = () => {
+ return {renderedImageList(imagedata)};
+};
+
const styles = StyleSheet.create({
reviewPhotoWrap: {
flex: 1,
backgroundColor: '#FFFFFF',
+ flexDirection: 'row',
+ flexWrap: 'wrap',
},
});
diff --git a/src/modal/StoreModal.tsx b/src/modal/StoreModal.tsx
index c291bb5..9bce965 100644
--- a/src/modal/StoreModal.tsx
+++ b/src/modal/StoreModal.tsx
@@ -1,6 +1,15 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
import type {FC} from 'react';
-import {Modal, StyleSheet, Text, View, SafeAreaView, TouchableOpacity, Image} from 'react-native';
+import {
+ Modal,
+ StyleSheet,
+ Text,
+ View,
+ SafeAreaView,
+ TouchableOpacity,
+ Image,
+ Animated,
+} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import Swiper from 'react-native-swiper';
import {
@@ -9,6 +18,9 @@ import {
MapStoreReviewList,
MapStoreReviewPhoto,
} from '../components';
+import {ScrollView} from 'react-native-gesture-handler';
+import ReviewModal from './ReviewModal';
+import {useStyle} from '../hooks';
type StoreModalProps = {
storeId: number;
@@ -45,8 +57,21 @@ const activeDot = () => {
const StoreModal: FC = ({storeId, visible, closeStoreModal}) => {
const [isReview, setIsReview] = useState(false);
+ const [reviewModal, setReviewModal] = useState(false);
+ const openReviewModal = async () => {
+ setReviewModal(true);
+ };
+ const offset1 = useRef(new Animated.Value(0)).current;
useEffect(() => {}, []);
+ const headerTextStyle = useStyle({
+ opacity: offset1.interpolate({
+ inputRange: [250, 260],
+ outputRange: [0, 1],
+ extrapolate: 'clamp',
+ }),
+ });
+
return (
@@ -56,12 +81,24 @@ const StoreModal: FC = ({storeId, visible, closeStoreModal}) =>
- 반이학생마라탕
+
+
+ 반이학생마라탕
+
+
- {!isReview && (
+ {
+ Animated.event([{nativeEvent: {contentOffset: {y: offset1}}}], {
+ useNativeDriver: false,
+ })(event);
+ }}
+ >
@@ -92,15 +129,28 @@ const StoreModal: FC = ({storeId, visible, closeStoreModal}) =>
/>
+
+
+ setIsReview(true)}
+ togglePhoto={() => setIsReview(false)}
+ isReview={isReview}
+ />
+
+ {isReview ? : }
+
+ {isReview && (
+ openReviewModal(0)}>
+
+ 리뷰 남기기
+
+
)}
-
- setIsReview(true)}
- togglePhoto={() => setIsReview(false)}
- isReview={isReview}
- />
-
- {isReview ? : }
+ setReviewModal(false)}
+ storeId={storeId}
+ />
);
@@ -137,4 +187,22 @@ const styles = StyleSheet.create({
borderBottomColor: '#EDEDED',
borderBottomWidth: 1,
},
+ reviewButton: {
+ width: 178,
+ height: 41,
+ borderRadius: 41,
+ backgroundColor: '#000000',
+ position: 'absolute',
+ bottom: 8,
+ alignSelf: 'center',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ reviewButtonText: {
+ color: '#FFFFFF',
+ fontSize: 16,
+ lineHeight: 24,
+ fontFamily: 'Pretendard-Medium',
+ fontWeight: '300',
+ },
});
From 44ab254a457e00889ed79637fbb4785a2eaaafed Mon Sep 17 00:00:00 2001
From: Sungho Park <43461389+psh320@users.noreply.github.com>
Date: Sun, 19 Jun 2022 21:17:20 +0900
Subject: [PATCH 3/5] Feat: add rating component
---
src/components/ReviewRate.tsx | 29 +++++++++++++++++++++++++++++
src/modal/ReviewModal.tsx | 19 +++++++++++++++----
src/modal/StoreModal.tsx | 9 +++++++--
3 files changed, 51 insertions(+), 6 deletions(-)
create mode 100644 src/components/ReviewRate.tsx
diff --git a/src/components/ReviewRate.tsx b/src/components/ReviewRate.tsx
new file mode 100644
index 0000000..884e78d
--- /dev/null
+++ b/src/components/ReviewRate.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import type {FC} from 'react';
+import {Text, View} from 'react-native';
+import {Rating, AirbnbRating} from 'react-native-ratings';
+
+type ReviewRateProps = {
+ name: string;
+ storeId: number;
+ setRating: (rating: number) => void;
+};
+
+export const ReviewRate: FC = ({setRating, storeId, name}) => {
+ return (
+
+
+ 음식은 어떠셨나요?
+ {name}
+
+ {
+ setRating(rating);
+ }}
+ />
+
+ );
+};
diff --git a/src/modal/ReviewModal.tsx b/src/modal/ReviewModal.tsx
index 1f17e27..97cae0a 100644
--- a/src/modal/ReviewModal.tsx
+++ b/src/modal/ReviewModal.tsx
@@ -1,7 +1,8 @@
-import React from 'react';
+import React, {useCallback, 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';
type ReviewModalProps = {
storeId: number;
@@ -10,17 +11,27 @@ type ReviewModalProps = {
};
const ReviewModal: FC = ({visible, closeReviewModal, storeId}) => {
+ const [rating, setRating] = useState(0);
+ const callbackRating = useCallback((rate: number) => {
+ setRating(rate);
+ }, []);
+ console.log(rating);
return (
-
+ {
+ setRating(0);
+ closeReviewModal();
+ }}
+ >
-
+
- 리뷰!!
+ {}
);
diff --git a/src/modal/StoreModal.tsx b/src/modal/StoreModal.tsx
index 9bce965..e10f55b 100644
--- a/src/modal/StoreModal.tsx
+++ b/src/modal/StoreModal.tsx
@@ -143,6 +143,7 @@ const StoreModal: FC = ({storeId, visible, closeStoreModal}) =>
openReviewModal(0)}>
리뷰 남기기
+
)}
@@ -165,6 +166,8 @@ const styles = StyleSheet.create({
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
+ borderBottomColor: '#EDEDED',
+ borderBottomWidth: 1,
},
backButton: {
marginLeft: 16,
@@ -191,12 +194,13 @@ const styles = StyleSheet.create({
width: 178,
height: 41,
borderRadius: 41,
- backgroundColor: '#000000',
+ backgroundColor: '#2A2A2A',
position: 'absolute',
- bottom: 8,
+ bottom: 4,
alignSelf: 'center',
justifyContent: 'center',
alignItems: 'center',
+ flexDirection: 'row',
},
reviewButtonText: {
color: '#FFFFFF',
@@ -204,5 +208,6 @@ const styles = StyleSheet.create({
lineHeight: 24,
fontFamily: 'Pretendard-Medium',
fontWeight: '300',
+ marginRight: 4,
},
});
From 3b583223157552f32e44991dd03082d735d90033 Mon Sep 17 00:00:00 2001
From: Sungho Park <43461389+psh320@users.noreply.github.com>
Date: Mon, 20 Jun 2022 17:35:36 +0900
Subject: [PATCH 4/5] Feat: finish review rate first draft
---
src/assets/images/Rate_Star.png | Bin 0 -> 695 bytes
src/components/ReviewRate.tsx | 83 ++++++++++++---
src/components/ReviewWrite.tsx | 172 ++++++++++++++++++++++++++++++++
src/modal/ReviewModal.tsx | 44 ++++++--
src/modal/StoreModal.tsx | 6 +-
5 files changed, 278 insertions(+), 27 deletions(-)
create mode 100644 src/assets/images/Rate_Star.png
create mode 100644 src/components/ReviewWrite.tsx
diff --git a/src/assets/images/Rate_Star.png b/src/assets/images/Rate_Star.png
new file mode 100644
index 0000000000000000000000000000000000000000..46ff1362c709f310fea611ab696099e9f37177a1
GIT binary patch
literal 695
zcmV;o0!aOdP)6nE;re-2j~+Cf*$n`}%R0UZDE=doQnt
zv|Rq?lFLDY1pINX;2$uE=nI1gPYO^*TSP{7Pxc9lXp2}TNx}l&K#@dopD0Mcm9Pg|v?8%M6~NHz43wgwC1P3g_YY7&V>ulY
zx{OWmoNNRU(TK!L-5XlvHg+Uxqu`+FQZUhoM(jvrZ8zA2Z@n*s*pV2Qt5OxQ%k4GD
zDZunZ?z;C8z;L-GA)GsRV3OQf3IeJk!4C0m`&DxCIJOC@f~{aF{1)cMw`8-bhsxwO
z`FaQYMRq7VTqUBHLdc(q^$UGPI3W}00p!O+RRnxQpndQGE(py(Z}G8JgkugDfaZPm
zan4u7S%uJCBeJ!xV<94#6`B&LDS#``F2t!&5loIsl?xjxP;3z@Lg@3R*ieC*=+Zm!
z&V2(BKvT-MAf!td8?*H&paWe*>>(1i7b`$W7ZDl6MSTA5lZYJ%ktTMuq;_D3W2-b0
z;{RG5_CO^n7E%!#pPOv$Uj^(bqP&ob$eP|n(>kocoTK?9mZNFrQfNjNVU#gy_`G?;
z&YP1xHat5)0TL108V9E6-}h{>CMqasJtWI%Q<{|9<^`CglY$@IX5?t1R*q`;lEQFi
zC(k~iuxUFX$CD*S<7W&+B7&2amrhX6@4-(MBb#9$lFe>smxC4s1b&I8`AgB+7=DcJ
d3xkNh@C|_tBV&Oa6Y~H7002ovPDHLkV1ng2BrX5|
literal 0
HcmV?d00001
diff --git a/src/components/ReviewRate.tsx b/src/components/ReviewRate.tsx
index 884e78d..ff3de6e 100644
--- a/src/components/ReviewRate.tsx
+++ b/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 = ({setRating, storeId, name}) => {
+const RATE_STAR = require('../assets/images/Rate_Star.png');
+export const ReviewRate: FC = ({rating, setRating, storeId, name, goNext}) => {
return (
-
+
- 음식은 어떠셨나요?
- {name}
+ 음식은 어떠셨나요?
+ {name}
+
- {
- setRating(rating);
- }}
- />
+
+
+
+ 확인
+
+
);
};
+
+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',
+ },
+});
diff --git a/src/components/ReviewWrite.tsx b/src/components/ReviewWrite.tsx
new file mode 100644
index 0000000..6a2b8d1
--- /dev/null
+++ b/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>;
+ imageUri: imageData[];
+ setImageUri: React.Dispatch>;
+};
+
+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 = ({
+ 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 (
+
+
+ {name}
+
+ {
+ setReviewContent(text);
+ }}
+ value={reviewContent}
+ />
+
+
+ 사진 첨부
+ 1/3
+
+
+
+
+
+
+ {imageUri.map((data) => {
+ return (
+
+
+
+ );
+ })}
+
+
+
+
+
+
+ 확인
+
+
+
+ );
+};
+
+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,
+ },
+});
diff --git a/src/modal/ReviewModal.tsx b/src/modal/ReviewModal.tsx
index 97cae0a..e0c2e18 100644
--- a/src/modal/ReviewModal.tsx
+++ b/src/modal/ReviewModal.tsx
@@ -1,21 +1,31 @@
-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 = ({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([]);
+
+ const submitReview = () => {
+ //post 리뷰
+ //review content, image...
+ };
return (
@@ -23,6 +33,9 @@ const ReviewModal: FC = ({visible, closeReviewModal, storeId})
{
setRating(0);
+ setShowRating(true);
+ setImageUri([]);
+ setReviewContent('');
closeReviewModal();
}}
>
@@ -31,7 +44,26 @@ const ReviewModal: FC = ({visible, closeReviewModal, storeId})
- {}
+ {showRating ? (
+ setShowRating(false)}
+ />
+ ) : (
+ {}}
+ setRating={setRating}
+ rating={rating}
+ imageUri={imageUri}
+ setImageUri={setImageUri}
+ reviewContent={reviewContent}
+ setReviewContent={setReviewContent}
+ />
+ )}
);
diff --git a/src/modal/StoreModal.tsx b/src/modal/StoreModal.tsx
index e10f55b..4508470 100644
--- a/src/modal/StoreModal.tsx
+++ b/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 = ({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 = ({storeId, visible, closeStoreModal}) =>
{isReview ? : }
{isReview && (
- openReviewModal(0)}>
+ openReviewModal()}>
리뷰 남기기
@@ -166,8 +164,6 @@ const styles = StyleSheet.create({
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
- borderBottomColor: '#EDEDED',
- borderBottomWidth: 1,
},
backButton: {
marginLeft: 16,
From 70b182aa59adaa2e4cf602c01901544c50ea6909 Mon Sep 17 00:00:00 2001
From: Sungho Park <43461389+psh320@users.noreply.github.com>
Date: Mon, 20 Jun 2022 17:37:02 +0900
Subject: [PATCH 5/5] Feat: Add close modal when submit
---
src/modal/ReviewModal.tsx | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/modal/ReviewModal.tsx b/src/modal/ReviewModal.tsx
index e0c2e18..4e66888 100644
--- a/src/modal/ReviewModal.tsx
+++ b/src/modal/ReviewModal.tsx
@@ -25,6 +25,7 @@ const ReviewModal: FC = ({visible, closeReviewModal, storeId})
const submitReview = () => {
//post 리뷰
//review content, image...
+ closeReviewModal();
};
return (
@@ -55,7 +56,7 @@ const ReviewModal: FC = ({visible, closeReviewModal, storeId})
) : (
{}}
+ submitReview={submitReview}
setRating={setRating}
rating={rating}
imageUri={imageUri}