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 83: 가게 상세 및 리뷰 작성 페이지 기능 추가 #19

Merged
merged 5 commits into from
May 27, 2024
Merged

Kan 83: 가게 상세 및 리뷰 작성 페이지 기능 추가 #19

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
161de64
feat: 가게 상세 및 리뷰 작성 페이지 기능 추가
May 26, 2024
3ded1a8
Merge branch 'main' into KAN-83
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
84 changes: 83 additions & 1 deletion src/screens/detail/ReviewWriteScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,89 @@ export default function ReviewWriteScreen(props) {
const [showImageError, setShowImageError] = useState(false);
const [reviewImage, setReviewImage] = useState([]);

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

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 handleReviewSubmit = async () => {
if (rating === 0) {
Expand Down
91 changes: 66 additions & 25 deletions src/screens/detail/StoreDetailScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,10 @@ import {
COLOR_TEXT_BLACK,
COLOR_LIGHTGRAY,
COLOR_ORANGE,
COLOR_SECONDARY,
} from '../../assets/color';
import AnimatedButton from '../../components/AnimationButton';
import {useNavigation} from '@react-navigation/native';
import {useNavigation, useFocusEffect} from '@react-navigation/native';
import {SvgXml} from 'react-native-svg';
import {svgXml} from '../../assets/svg';
import Header from '../../components/Header';
Expand All @@ -47,7 +48,7 @@ export default function StoreDetailScreen(props) {
const navigation = useNavigation();
const context = useContext(AppContext);
const { route } = props;
const restaurantId = route.params?.data?.id || 1;
const restaurantId = route.params?.data?.id || 2;
const [restaurant, setRestaurant] = useState(null);
const [isHearted, setIsHearted] = useState(false);
const [heartCount, setHeartCount] = useState(0);
Expand All @@ -63,7 +64,11 @@ export default function StoreDetailScreen(props) {
restaurantDetail();
handleHeartPress();
}, []);

useFocusEffect(
useCallback(() => {
restaurantDetail();
}, [])
);
useEffect(() => {
setDisplayedMenuList(menuList.slice(0, menuCount));
}, [menuList, menuCount]);
Expand All @@ -84,9 +89,6 @@ export default function StoreDetailScreen(props) {
const data = response.data.data;
const dataReview = responseReview.data.data;

console.log('data: ', data.restaurant.isLike);
console.log('review: ', dataReview);

setRestaurant(data);
setIsHearted(data.restaurant.isLike);
setHeartCount(data.restaurant.likeCount);
Expand All @@ -102,7 +104,6 @@ export default function StoreDetailScreen(props) {
const newHeartedState = !isHearted;
setIsHearted(newHeartedState);
setHeartCount(newHeartedState ? heartCount + 1 : heartCount - 1);

await axios.post(
`${API_URL}/v1/restaurants/${restaurantId}/like`,
{
Expand All @@ -112,12 +113,12 @@ export default function StoreDetailScreen(props) {
headers: { Authorization: `Bearer ${context.accessToken}` },
},
);
setIsHearted(newHeartedState);
setHeartCount(newHeartedState ? heartCount + 1 : heartCount - 1);

console.log('isLike: ', newHeartedState);
} catch (error) {
console.error('Error updating heart count:', error);
setIsHearted(!newHeartedState);
setHeartCount(newHeartedState ? heartCount - 1 : heartCount + 1);
}
};

Expand All @@ -140,7 +141,7 @@ export default function StoreDetailScreen(props) {
<Image source={{ uri: item.imageUrl }} style={styles.menuImage} />
) : (
<View style={styles.menuImagePlaceholder}>
<Text style={styles.menuImagePlaceholderText}>(빈 이미지)</Text>
<Text style={styles.menuImagePlaceholderText}>음식 사진 준비중</Text>
</View>
)}
<View style={styles.menuTextContainer}>
Expand Down Expand Up @@ -231,9 +232,16 @@ export default function StoreDetailScreen(props) {
<Text style={styles.storeCategory}>{restaurant.restaurant.categories}</Text>
</View>
<View style={styles.sectionTitle}>
<Text style={styles.storeReview}>찜 {heartCount}</Text>
<Text style={styles.storeReview}>·</Text>
<Text style={styles.storeReview}>리뷰 {restaurant.restaurant.reviewCount}</Text>
<View style={styles.sectionTitle}>
<Text style={styles.storeReview}>찜 {heartCount}</Text>
<Text style={styles.storeReview}>·</Text>
<Text style={styles.storeReview}>리뷰 {restaurant.restaurant.reviewCount}</Text>
</View>
<View style={styles.sectionTitle}>
<Text style={styles.storeReviewNaver}>{"("} 네이버 평점 {restaurant.restaurant.naverRatingAvg}</Text>
<Text style={styles.storeReviewNaver}>·</Text>
<Text style={styles.storeReviewNaver}>리뷰 {restaurant.restaurant.naverReviewCount} {")"}</Text>
</View>
</View>
</View>
<View style={styles.horizontalDivider} />
Expand Down Expand Up @@ -334,14 +342,21 @@ export default function StoreDetailScreen(props) {
>
<View style={styles.modalView}>
<Text style={styles.modalText}>전화번호: {restaurant.restaurant.detailInfo.contactNumber}</Text>
<TouchableHighlight
style={styles.closeButton}
onPress={() => {
setModalVisible(!modalVisible);
}}
>
<Text style={styles.textStyle}>닫기</Text>
</TouchableHighlight>
<View style={styles.sectionItem}>
<TouchableHighlight
style={styles.callButton}
>
<Text style={styles.textStyle}>전화</Text>
</TouchableHighlight>
<TouchableHighlight
style={styles.closeButton}
onPress={() => {
setModalVisible(!modalVisible);
}}
>
<Text style={styles.textStyle}>닫기</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
</>
Expand All @@ -361,6 +376,7 @@ export default function StoreDetailScreen(props) {
storeImage: {
width: '100%',
height: '100%',
resizeMode: 'cover',
},
storeInfo: {
width: '100%',
Expand Down Expand Up @@ -389,6 +405,12 @@ export default function StoreDetailScreen(props) {
marginBottom: 16,
marginRight: 6,
},
storeReviewNaver: {
fontSize: 15,
color: COLOR_GRAY,
marginBottom: 16,
marginRight: 6,
},
contactContainer: {
flexDirection: 'row',
justifyContent: 'space-around',
Expand Down Expand Up @@ -423,6 +445,7 @@ export default function StoreDetailScreen(props) {
fontSize: 15,
color: COLOR_TEXT_DARKGRAY,
marginVertical: 8,
flex: 1,
},
storeHours: {
fontSize: 15,
Expand Down Expand Up @@ -480,21 +503,27 @@ export default function StoreDetailScreen(props) {
justifyContent: 'center',
},
menuImagePlaceholderText: {
color: COLOR_LIGHTGRAY,
textAlign: 'center',
color: COLOR_SECONDARY,
fontSize: 16,
margin: 5,
},
menuTextContainer: {
marginLeft: 10,
marginVertical: 5,
justifyContent: 'center',
flex: 1,
},
menuTitle: {
fontSize: 18,
color: COLOR_TEXT_BLACK,
fontWeight: '500',
flexWrap: 'wrap',
},
menuDescription: {
fontSize: 16,
color: COLOR_TEXT_DARKGRAY,
flexWrap: 'wrap',
},
menuPrice: {
fontSize: 17,
Expand Down Expand Up @@ -556,12 +585,13 @@ export default function StoreDetailScreen(props) {
marginTop: 10,
},
modalView: {
top: 350,
margin: 20,
backgroundColor: "white",
borderRadius: 20,
padding: 35,
padding: 20,
alignItems: "center",
shadowColor: "#000",
shadowColor: "#000000",
shadowOffset: {
width: 0,
height: 2,
Expand All @@ -570,10 +600,19 @@ export default function StoreDetailScreen(props) {
shadowRadius: 4,
elevation: 5,
},
callButton: {
borderRadius: 20,
paddingHorizontal: 10,
paddingVertical: 5,
marginHorizontal: 10,
elevation: 2,
},
closeButton: {
backgroundColor: COLOR_PRIMARY,
borderRadius: 20,
padding: 10,
paddingHorizontal: 10,
paddingVertical: 5,
marginHorizontal: 10,
elevation: 2,
},
textStyle: {
Expand All @@ -584,5 +623,7 @@ export default function StoreDetailScreen(props) {
modalText: {
marginBottom: 15,
textAlign: "center",
fontSize: 17,
color: COLOR_TEXT_BLACK,
},
});
Loading