Fix/

meokgu-skku · Jun 1, 2024 · 51d9df4 · 51d9df4
1 parent a1cdf1a
commit 51d9df4
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 51 deletions.
diff --git a/src/assets/svg.js b/src/assets/svg.js
diff --git a/src/screens/detail/ReviewWriteScreen.js b/src/screens/detail/ReviewWriteScreen.js
@@ -57,7 +57,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);
 
@@ -76,7 +76,7 @@ export default function ReviewWriteScreen(props) {
         `${API_URL}/v1/restaurants/${storeData.id}/reviews`,
         {
           content: reviewContent,
-          imageUrls: reviewImage,
+          imageUrls: [reviewImage],
           rating: rating,
         },
         {
@@ -122,10 +122,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;
@@ -139,20 +136,6 @@ 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} />
@@ -189,10 +172,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,
@@ -206,8 +189,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>
@@ -225,22 +218,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}>
@@ -267,8 +245,10 @@ const styles = StyleSheet.create({
     marginVertical: 20,
   },
   Container: {
-    width: '100%',
+    // width: '100%',
     marginHorizontal: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   storeName: {
     fontSize: 22,
@@ -282,14 +262,15 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: COLOR_WHITE,
+    backgroundColor: COLOR_GRAY,
     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,
@@ -305,12 +286,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',
@@ -330,7 +311,8 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: 8,
     padding: 12,
-    width: '92%',
+    // width: '92%',
+    // marginHorizontal: 16,
     height: 160,
     textAlignVertical: 'top',
     marginVertical: 16,