Skip to content

Commit

Permalink
[KAN-136] 리뷰 이미지 업로드 한개만 (#44)
Browse files Browse the repository at this point in the history 
* Fix/

* Fix/reviewWrite

* Fix/UI
  • Loading branch information
@sjsjmine129
sjsjmine129 authored Jun 1, 2024
1 parent a1cdf1a commit 98a132a
Show file tree
Hide file tree
Showing 5 changed files with 92 additions and 77 deletions.
18 changes: 12 additions & 6 deletions src/assets/svg.js
View file

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

14 changes: 13 additions & 1 deletion src/components/StoreCompo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export default function StoreCompo(props) {

const scrollViewRef = useRef();

const {storeData, index, addPadding} = props;
const {storeData, index, addPadding, fade} = props;

console.log('storeData', storeData);
return (
Expand Down Expand Up @@ -86,6 +86,18 @@ export default function StoreCompo(props) {
uri: storeData.representativeImageUrl,
}}
/>

{fade ? (
<View
style={{
position: 'absolute',
width: windowWidth / 3,
height: windowWidth / 3,
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: 10,
}}
/>
) : null}
<View
style={{
flex: 1,
Expand Down
7 changes: 6 additions & 1 deletion src/components/TodayPick.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,12 @@ export default function TodayPick(props) {
ref={scrollViewRef}>
{todaysPick.map((pickData, index) => {
return (
<StoreCompo storeData={pickData} index={index} addPadding={10} />
<StoreCompo
storeData={pickData}
index={index}
addPadding={10}
fade={true}
/>
);
})}
</ScrollView>
Expand Down
107 changes: 48 additions & 59 deletions src/screens/detail/ReviewWriteScreen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
TextInput,
FlatList,
Pressable,
TouchableWithoutFeedback,
Alert,
} from 'react-native';
import {
Expand Down Expand Up @@ -57,7 +58,7 @@ export default function ReviewWriteScreen(props) {
const [showRatingError, setShowRatingError] = useState(false);
const [showContentError, setShowContentError] = useState(false);
const [showImageError, setShowImageError] = useState(false);
const [reviewImage, setReviewImage] = useState([]);
const [reviewImage, setReviewImage] = useState('');

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

Expand All @@ -76,7 +77,7 @@ export default function ReviewWriteScreen(props) {
`${API_URL}/v1/restaurants/${storeData.id}/reviews`,
{
content: reviewContent,
imageUrls: reviewImage,
imageUrls: [reviewImage],
rating: rating,
},
{
Expand Down Expand Up @@ -122,10 +123,7 @@ export default function ReviewWriteScreen(props) {
console.log('response image:', response.data);

if (response.data.result === 'SUCCESS') {
setReviewImage(prevImages => [
...prevImages,
response.data.data[0].imageUrl,
]);
setReviewImage(response.data.data[0].imageUrl);
break;
}
count += 1;
Expand All @@ -139,29 +137,17 @@ export default function ReviewWriteScreen(props) {
}
};

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>
);
};

return (
<>
<Header title={'리뷰 쓰기'} isBackButton={true} />
<View contentContainerStyle={styles.entire}>
<View style={styles.headerContainer}>
<Text style={styles.storeName}>{storeData.name}</Text>
<Text style={styles.storeName} numberOfLines={1}>
{storeData.name}
</Text>
<View style={styles.starContainer}>
{[...Array(5)].map((_, index) => (
<TouchableOpacity
<TouchableWithoutFeedback
key={index}
onPress={() => {
setRating(index + 1);
Expand All @@ -175,9 +161,9 @@ export default function ReviewWriteScreen(props) {
}
width="24"
height="24"
style={{marginLeft: 7}}
style={{marginLeft: 2}}
/>
</TouchableOpacity>
</TouchableWithoutFeedback>
))}
</View>
</View>
Expand All @@ -189,10 +175,10 @@ export default function ReviewWriteScreen(props) {
style={styles.photoButton}
onPress={() => {
console.log('리뷰 사진 추가', reviewImage);
if (reviewImage.length >= 3) {
console.log('Error: Maximum 3 images allowed');
return;
}
// if (reviewImage.) {
// console.log('Error: Maximum 3 images allowed');
// return;
// }
ImagePicker.openPicker({
width: 400,
height: 400,
Expand All @@ -206,8 +192,18 @@ export default function ReviewWriteScreen(props) {
console.error('Image Picker Error:', error);
});
}}>
<SvgXml xml={svgXml.icon.camera} width={24} height={24} />
<Text style={styles.photoButtonText}>사진 첨부하기</Text>
{reviewImage ? (
<View style={styles.imageWrapper}>
<Image source={{uri: reviewImage}} style={styles.image} />
<TouchableOpacity
style={styles.removeButton}
onPress={() => setReviewImage('')}>
<Text style={styles.removeButtonText}>X</Text>
</TouchableOpacity>
</View>
) : (
<SvgXml xml={svgXml.icon.reviewCamera} width={50} height={50} />
)}
</AnimatedButton>
{showImageError && (
<Text style={styles.errorText}>사진은 최대 3개만 넣어주세요</Text>
Expand All @@ -225,22 +221,7 @@ export default function ReviewWriteScreen(props) {
{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}>
Expand All @@ -267,13 +248,17 @@ const styles = StyleSheet.create({
marginVertical: 20,
},
Container: {
width: '100%',
// width: '100%',
marginHorizontal: 16,
justifyContent: 'center',
alignItems: 'center',
},
storeName: {
fontSize: 22,
fontWeight: 'bold',
// fontWeight: 'bold',
fontFamily: 'NIXGONFONTS M 2.0',
color: COLOR_TEXT_BLACK,
maxWidth: (windowWidth * 3) / 5,
},
starContainer: {
flexDirection: 'row',
Expand All @@ -282,14 +267,15 @@ const styles = StyleSheet.create({
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: COLOR_WHITE,
borderColor: COLOR_PRIMARY,
borderWidth: 1,
backgroundColor: COLOR_LIGHTGRAY,
// borderColor: COLOR_PRIMARY,
// borderWidth: 1,
padding: 12,
borderRadius: 8,
marginTop: 6,
marginBottom: 16,
width: '92%',
marginBottom: 0,
width: 130,
height: 130,
},
photoButtonText: {
color: COLOR_PRIMARY,
Expand All @@ -305,12 +291,12 @@ const styles = StyleSheet.create({
},
imageWrapper: {
position: 'relative',
marginRight: 8,
// marginRight: 8,
},
image: {
width: 120,
height: 120,
borderRadius: 10,
width: 130,
height: 130,
borderRadius: 8,
},
removeButton: {
position: 'absolute',
Expand All @@ -330,7 +316,9 @@ const styles = StyleSheet.create({
borderWidth: 1,
borderRadius: 8,
padding: 12,
width: '92%',
fontFamily: 'NanumSquareRoundB',
// width: '92%',
// marginHorizontal: 16,
height: 160,
textAlignVertical: 'top',
marginVertical: 16,
Expand Down Expand Up @@ -367,7 +355,8 @@ const styles = StyleSheet.create({
},
submitButtonText: {
color: COLOR_WHITE,
fontFamily: 'NanumSquareRoundEB',
fontSize: 18,
fontWeight: '600',
// fontWeight: '600',
},
});
23 changes: 13 additions & 10 deletions src/screens/mypage/MypageScreen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,18 +163,16 @@ export default function MyPageScreen() {
<ScrollView contentContainerStyle={styles.entire}>
{profileImageUrl != '' ? (
<Image
style={[styles.myPageItem, styles.myPageItemLayout]}
style={[styles.myPageItem]}
resizeMode="cover"
source={
profileImageUrl
? {uri: profileImageUrl}
: require('../../assets/images/logo.png')
}
source={{uri: profileImageUrl}}
/>
) : (
<View style={[styles.myPageItem, styles.myPageItemLayout]}>
<SvgXml xml={svgXml.icon.prodileDefault} width="100" height="100" />
</View>
<Image
style={[styles.myPageItemLayout]}
resizeMode="cover"
source={require('../../assets/images/logo.png')}
/>
)}
<TouchableOpacity
style={styles.text6Position}
Expand Down Expand Up @@ -228,11 +226,16 @@ const styles = StyleSheet.create({
myPageItem: {
width: 100,
height: 100,
marginTop: 20,
marginBottom: 10,
borderRadius: 50,
},
myPageItemLayout: {
width: 100,
height: 100,
marginTop: 20,
marginBottom: 10,
borderRadius: 50,
borderRadius: 15,
},
text6: {
fontSize: 20,
Expand Down

0 comments on commit 98a132a

Please sign in to comment.