diff --git a/src/assets/color.js b/src/assets/color.js index b8c02ac..95c667e 100644 --- a/src/assets/color.js +++ b/src/assets/color.js @@ -8,3 +8,4 @@ export const COLOR_WHITE = '#FFFFFF'; export const COLOR_TEXT70GRAY = '#4D4D4D'; export const COLOR_TEXT60GRAY = '#666666'; export const COLOR_NAVY = '#003C71'; +export const COLOR_LIGHTGRAY = '#dddddd'; diff --git a/src/assets/svg.js b/src/assets/svg.js index f50b933..cbb347c 100644 --- a/src/assets/svg.js +++ b/src/assets/svg.js @@ -83,6 +83,16 @@ export const svgXml = { `, + starFill:` + + + + `, + starEmpty:` + + + + `, heart: ` diff --git a/src/screens/detail/ReviewWriteScreen.js b/src/screens/detail/ReviewWriteScreen.js index 10900f3..39d1634 100644 --- a/src/screens/detail/ReviewWriteScreen.js +++ b/src/screens/detail/ReviewWriteScreen.js @@ -14,6 +14,7 @@ import { StyleSheet, Image, TouchableOpacity, + TextInput, FlatList, Pressable, } from 'react-native'; @@ -22,8 +23,10 @@ import { COLOR_BACKGROUND, COLOR_GRAY, COLOR_PRIMARY, + COLOR_SECONDARY, COLOR_TEXT70GRAY, COLOR_TEXT_BLACK, + COLOR_LIGHTGRAY, } from '../../assets/color'; import AnimatedButton from '../../components/AnimationButton'; import {useNavigation} from '@react-navigation/native'; @@ -44,14 +47,51 @@ export default function ReviewWriteScreen(props) { const navigation = useNavigation(); const {route} = props; const storeData = route.params?.data; + const [rating, setRating] = useState(0); console.log('storeData:', storeData); + const DottedLine = () => { + return ( + + {[...Array(20)].map((_, index) => ( + + ))} + + ); + }; + return ( <>
- {storeData.name} + < View style={styles.headerContainer}> + {storeData.name} + + {[...Array(5)].map((_, index) => ( + setRating(index + 1)}> + + + ))} + + + + 사진 첨부하기 + + + + + 완료 + ); @@ -59,8 +99,85 @@ export default function ReviewWriteScreen(props) { const styles = StyleSheet.create({ entire: { - backgroundColor: COLOR_BACKGROUND, + backgroundColor: COLOR_WHITE, // justifyContent: 'center', alignItems: 'center', + height: '100%', + }, + headerContainer: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + width: '100%', + paddingHorizontal: 16, + marginVertical: 24, + }, + storeName: { + fontSize: 22, + fontWeight: 'bold', + color: COLOR_TEXT_BLACK, + }, + starContainer: { + flexDirection: 'row', + }, + photoButton: { + backgroundColor: COLOR_WHITE, + borderColor: COLOR_PRIMARY, + borderWidth: 1, + padding: 12, + borderRadius: 8, + alignItems: 'center', + marginTop: 8, + marginBottom: 16, + width: '92%', + height: '', + }, + photoButtonText: { + color: COLOR_PRIMARY, + fontSize: 16, + }, + reviewInput: { + backgroundColor: COLOR_WHITE, + borderColor: COLOR_PRIMARY, + borderWidth: 1, + borderRadius: 8, + padding: 12, + width: '92%', + height: 150, + textAlignVertical: 'top', + marginVertical: 16, + fontSize: 16, + }, + dottedContainer: { + flexDirection: 'row', + width: '92%', + justifyContent: 'space-between', + marginVertical: 16, + }, + dot: { + width: 9, + height: 2, + backgroundColor: COLOR_LIGHTGRAY, + marginHorizontal: 1, + }, + submitButton: { + position: 'absolute', + bottom: 0, + backgroundColor: COLOR_PRIMARY, + padding: 16, + borderRadius: 32, + alignItems: 'center', + width: '90%', + marginBottom: 16, + shadowColor: COLOR_TEXT_BLACK, + shadowOffset: { width: 0, height: 3 }, + shadowOpacity: 1, + shadowRadius: 5, + elevation: 8, + }, + submitButtonText: { + color: COLOR_WHITE, + fontSize: 18, + fontWeight: '600', }, });