From 51d9df40bf5827c6dde07cbad273c169a81b2b24 Mon Sep 17 00:00:00 2001
From: sjsjmine129 <sjsjmine129@gmail.com>
Date: Sat, 1 Jun 2024 21:11:42 +0900
Subject: [PATCH] Fix/

---
 src/assets/svg.js                       |  6 ++
 src/screens/detail/ReviewWriteScreen.js | 84 ++++++++++---------------
 2 files changed, 39 insertions(+), 51 deletions(-)

diff --git a/src/assets/svg.js b/src/assets/svg.js
index f4d1ac1..1315ece 100644
--- a/src/assets/svg.js
+++ b/src/assets/svg.js
@@ -312,6 +312,12 @@ export const svgXml = {
     </defs>
     </svg>
 `,
+    reviewCamera: `
+    <svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M22.5 30C25.6066 30 28.125 27.4816 28.125 24.375C28.125 21.2684 25.6066 18.75 22.5 18.75C19.3934 18.75 16.875 21.2684 16.875 24.375C16.875 27.4816 19.3934 30 22.5 30Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M37.5 13.125H7.5C6.46447 13.125 5.625 13.9645 5.625 15V33.75C5.625 34.7855 6.46447 35.625 7.5 35.625H37.5C38.5355 35.625 39.375 34.7855 39.375 33.75V15C39.375 13.9645 38.5355 13.125 37.5 13.125Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M26.7736 7.5H18.2264C17.4194 7.5 16.7028 8.01643 16.4476 8.78207L15.8226 10.6571C15.4179 11.8712 16.3216 13.125 17.6014 13.125H27.3986C28.6784 13.125 29.5821 11.8712 29.1773 10.6571L28.5523 8.78207C28.2971 8.01643 27.5806 7.5 26.7736 7.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>`,
     phone: `
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M17.7071 13.7071L20.3552 16.3552C20.7113 16.7113 20.7113 17.2887 20.3552 17.6448C18.43 19.57 15.3821 19.7866 13.204 18.153L11.6286 16.9714C9.88504 15.6638 8.33622 14.115 7.02857 12.3714L5.84701 10.796C4.21341 8.61788 4.43001 5.56999 6.35523 3.64477C6.71133 3.28867 7.28867 3.28867 7.64477 3.64477L10.2929 6.29289C10.6834 6.68342 10.6834 7.31658 10.2929 7.70711L9.27175 8.72825C9.10946 8.89054 9.06923 9.13846 9.17187 9.34373C10.3585 11.7171 12.2829 13.6415 14.6563 14.8281C14.8615 14.9308 15.1095 14.8905 15.2717 14.7283L16.2929 13.7071C16.6834 13.3166 17.3166 13.3166 17.7071 13.7071Z" stroke="#535353" stroke-width="1.2"/>
diff --git a/src/screens/detail/ReviewWriteScreen.js b/src/screens/detail/ReviewWriteScreen.js
index d52ddf8..3f2a73a 100644
--- 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,