Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[KAN-84] 리뷰 작성, 가게 상세 페이지 #18

Merged
merged 5 commits into from
May 26, 2024
Merged

[KAN-84] 리뷰 작성, 가게 상세 페이지 #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
af16f1a
feature: 리뷰 작성 페이지 UI 작업
May 24, 2024
724e77c
feat: 가게 상세 페이지 ui
May 25, 2024
50d2cc8
가게 상세 페이지 정보(메뉴, 리뷰) 로딩 및 전화 모달 창 추가
May 26, 2024
34721d4
리뷰 작성 시 사진 최대 3개 추가 및 작성 완료
May 26, 2024
481f3c8
Merge branch 'main' into KAN-84
m1nse0kim May 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/assets/color.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,4 @@ export const COLOR_TEXT70GRAY = '#4D4D4D';
export const COLOR_TEXT60GRAY = '#666666';
export const COLOR_NAVY = '#003C71';
export const COLOR_LIGHTGRAY = '#dddddd';
export const COLOR_ORANGE = '#FF6A13';
42 changes: 40 additions & 2 deletions src/assets/svg.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

231 changes: 205 additions & 26 deletions src/screens/detail/ReviewWriteScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
COLOR_TEXT70GRAY,
COLOR_TEXT_BLACK,
COLOR_LIGHTGRAY,
COLOR_ORANGE,
} from '../../assets/color';
import AnimatedButton from '../../components/AnimationButton';
import {useNavigation} from '@react-navigation/native';
Expand All @@ -35,22 +36,112 @@ import {svgXml} from '../../assets/svg';
import Header from '../../components/Header';
import AppContext from '../../components/AppContext';
import axios from 'axios';
import {API_URL} from '@env';
import { API_URL, IMG_URL } from '@env';
import {Dimensions} from 'react-native';
import TodayPick from '../../components/TodayPick';
import FoodCategory from '../../components/FoodCategory';
import KingoPass from '../../components/KingoPass';
import ImagePicker from 'react-native-image-crop-picker';
import RNFS from 'react-native-fs'

const windowWidth = Dimensions.get('window').width;

export default function ReviewWriteScreen(props) {
const navigation = useNavigation();
const {route} = props;
const context = useContext(AppContext);
const { route } = props;
const storeData = route.params?.data;
const [rating, setRating] = useState(0);
const [reviewContent, setReviewContent] = useState('');
const [showRatingError, setShowRatingError] = useState(false);
const [showContentError, setShowContentError] = useState(false);
const [showImageError, setShowImageError] = useState(false);
const [reviewImage, setReviewImage] = useState([]);

console.log('storeData:', storeData);

const handleReviewSubmit = async () => {
if (rating === 0) {
setShowRatingError(true);
return;
}
if (reviewContent.trim() === '') {
setShowContentError(true);
return;
}

try {
const response = await axios.post(
`${API_URL}/v1/restaurants/${storeData.id}/reviews`,
{
content: reviewContent,
imageUrls: reviewImage,
rating: rating,
},
{
headers: { Authorization: `Bearer ${context.accessToken}` },
},
);
console.log('Review submitted successfully:', response.data);
navigation.goBack();
} catch (error) {
console.error('Error submitting review:', error);
}
};

const uploadImage = async (image) => {
if (reviewImage.length >= 3) {
setShowImageError(true);
return;
}

let imageData = '';
await RNFS.readFile(image.path, 'base64')
.then((data) => {
console.log('encoded', data);
imageData = data;
})
.catch((err) => {
console.error(err);
});

try {
const response = await axios.post(`${IMG_URL}/v1/upload-image`, {
images: [
{
imageData: imageData,
location: 'test',
},
],
});

console.log('response image:', response.data);

if (response.data.result != 'SUCCESS') {
console.log('Error: No return data');
return;
}

setReviewImage((prevImages) => [...prevImages, response.data.data[0].imageUrl]);
} catch (error) {
console.log('Error:', error);
}
};

const removeImage = (index) => {
setReviewImage((prevImages) => prevImages.filter((_, i) => i !== index));
};

const DottedLine = () => {
return (
<View style={styles.dottedContainer}>
{[...Array(20)].map((_, index) => (
<View key={index} style={styles.dot} />
))}
</View>
);
};

const DottedLine = () => {
return (
<View style={styles.dottedContainer}>
Expand All @@ -64,12 +155,18 @@ export default function ReviewWriteScreen(props) {
return (
<>
<Header title={'리뷰 쓰기'} isBackButton={true} />
<ScrollView contentContainerStyle={styles.entire}>
< View style={styles.headerContainer}>
<View contentContainerStyle={styles.entire}>
<View style={styles.headerContainer}>
<Text style={styles.storeName}>{storeData.name}</Text>
<View style={styles.starContainer}>
{[...Array(5)].map((_, index) => (
<TouchableOpacity key={index} onPress={() => setRating(index + 1)}>
<TouchableOpacity
key={index}
onPress={() => {
setRating(index + 1);
setShowRatingError(false);
}}
>
<SvgXml
xml={index < rating ? svgXml.icon.starFill : svgXml.icon.starEmpty}
width="24"
Expand All @@ -80,27 +177,71 @@ export default function ReviewWriteScreen(props) {
))}
</View>
</View>
<TouchableOpacity style={styles.photoButton}>
<Text style={styles.photoButtonText}>사진 첨부하기</Text>
</TouchableOpacity>
<TextInput
style={styles.reviewInput}
multiline
placeholder="음식의 맛, 양, 위생 상태 등 음식에 대한 솔직한 리뷰를 남겨주세요. (선택)"
/>
<DottedLine />
<TouchableOpacity style={styles.submitButton}>
<Text style={styles.submitButtonText}>완료</Text>
</TouchableOpacity>
</ScrollView>
<View style={styles.Container}>
{showRatingError && <Text style={styles.errorText}>평점을 매겨주세요</Text>}
<AnimatedButton
style={styles.photoButton}
onPress={() => {
console.log('리뷰 사진 추가', reviewImage);
if (reviewImage.length >= 3) {
console.log('Error: Maximum 3 images allowed');
return;
}
ImagePicker.openPicker({
width: 400,
height: 400,
cropping: true,
multiple: true,
}).then((images) => {
images.forEach((image) => uploadImage(image));
}).catch((error) => {
console.error('Image Picker Error:', error);
});
}}>
<SvgXml xml={svgXml.icon.camera} width={24} height={24} />
<Text style={styles.photoButtonText}>사진 첨부하기</Text>
</AnimatedButton>
{showImageError && <Text style={styles.errorText}>사진은 최대 3개만 넣어주세요</Text>}
<TextInput
style={styles.reviewInput}
multiline
placeholder="음식의 맛, 양, 위생 상태 등 음식에 대한 솔직한 리뷰를 남겨주세요. (선택)"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

하다가 문제 생기면 바로 수정하겠습니다! 감사합니당

value={reviewContent}
onChangeText={(text) => {
setReviewContent(text);
setShowContentError(false);
}}
/>
{showContentError && <Text style={styles.errorText}>리뷰 내용을 작성해주세요</Text>}
<DottedLine />
<ScrollView alwaysBounceHorizontal style={styles.imageScrollView}>
<View style={styles.imageContainer}>
{reviewImage.map((image, index) => (
<View key={index} style={styles.imageWrapper}>
<Image
source={{ uri: image }}
style={styles.image}
/>
<TouchableOpacity style={styles.removeButton} onPress={() => removeImage(index)}>
<Text style={styles.removeButtonText}>X</Text>
</TouchableOpacity>
</View>
))}
</View>
</ScrollView>
<DottedLine />
<TouchableOpacity style={styles.submitButton} onPress={handleReviewSubmit}>
<Text style={styles.submitButtonText}>완료</Text>
</TouchableOpacity>
</View>
</View>
</>
);
}

const styles = StyleSheet.create({
entire: {
backgroundColor: COLOR_WHITE,
// justifyContent: 'center',
alignItems: 'center',
height: '100%',
},
Expand All @@ -110,7 +251,11 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
width: '100%',
paddingHorizontal: 16,
marginVertical: 24,
marginVertical: 20,
},
Container: {
width: '100%',
marginHorizontal: 16,
},
storeName: {
fontSize: 22,
Expand All @@ -121,20 +266,50 @@ const styles = StyleSheet.create({
flexDirection: 'row',
},
photoButton: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: COLOR_WHITE,
borderColor: COLOR_PRIMARY,
borderWidth: 1,
padding: 12,
borderRadius: 8,
alignItems: 'center',
marginTop: 8,
marginTop: 6,
marginBottom: 16,
width: '92%',
height: '',
},
photoButtonText: {
color: COLOR_PRIMARY,
fontSize: 16,
marginLeft: 4,
},
imageScrollView: {
height: 120,
},
imageContainer: {
flexDirection: 'row',
alignItems: 'center',
},
imageWrapper: {
position: 'relative',
marginRight: 8,
},
image: {
width: 120,
height: 120,
borderRadius: 10,
},
removeButton: {
position: 'absolute',
top: 5,
right: 5,
backgroundColor: 'rgba(0,0,0,0.5)',
padding: 4,
borderRadius: 5,
},
removeButtonText: {
color: COLOR_WHITE,
fontSize: 12,
},
reviewInput: {
backgroundColor: COLOR_WHITE,
Expand All @@ -143,11 +318,15 @@ const styles = StyleSheet.create({
borderRadius: 8,
padding: 12,
width: '92%',
height: 150,
height: 160,
textAlignVertical: 'top',
marginVertical: 16,
fontSize: 16,
},
errorText: {
color: COLOR_ORANGE,
fontSize: 10,
},
dottedContainer: {
flexDirection: 'row',
width: '92%',
Expand All @@ -167,7 +346,7 @@ const styles = StyleSheet.create({
padding: 16,
borderRadius: 32,
alignItems: 'center',
width: '90%',
width: '92%',
marginBottom: 16,
shadowColor: COLOR_TEXT_BLACK,
shadowOffset: { width: 0, height: 3 },
Expand All @@ -180,4 +359,4 @@ const styles = StyleSheet.create({
fontSize: 18,
fontWeight: '600',
},
});
});
Loading
Loading