[Kan 102] 각 개발 내역 통합 및 버그 수정 (#20)

* Fix/duplicate * Fix/bug * Add/imageModal * Fix/heart store * Fix/ mypage UI bug * Add/ image three time try * Fix * Fix
meokgu-skku · May 27, 2024 · bf406f5 · bf406f5
1 parent 5bddaaf
commit bf406f5
Show file tree

Hide file tree

Showing 9 changed files with 2,187 additions and 818 deletions.
diff --git a/android/app/src/main/assets/index.android.bundle b/android/app/src/main/assets/index.android.bundle
diff --git a/src/components/MyReview.js b/src/components/MyReview.js
@@ -1,9 +1,16 @@
-import React, { useState, useCallback, useEffect, useContext, useRef } from 'react';
-import { View, Text, ScrollView, StyleSheet } from 'react-native';
-import { COLOR_WHITE, COLOR_PRIMARY, COLOR_TEXT70GRAY } from '../assets/color';
-import { useNavigation } from '@react-navigation/native';
+/* eslint-disable react-native/no-inline-styles */
+import React, {
+  useState,
+  useCallback,
+  useEffect,
+  useContext,
+  useRef,
+} from 'react';
+import {View, Text, ScrollView, StyleSheet} from 'react-native';
+import {COLOR_WHITE, COLOR_PRIMARY, COLOR_TEXT70GRAY} from '../assets/color';
+import {useNavigation} from '@react-navigation/native';
 import AppContext from './AppContext';
-import { Dimensions } from 'react-native';
+import {Dimensions} from 'react-native';
 import StoreCompoForR from './StoreCompoForR';
 
 const windowWidth = Dimensions.get('window').width;
@@ -14,7 +21,7 @@ export default function MyReview(props) {
 
   const scrollViewRef = useRef();
 
-  const { myReviews, onEndReached, hasMore } = props; 
+  const {myReviews, onEndReached, hasMore} = props;
   const [currentIndex, setCurrentIndex] = useState(0);
 
   const handleScroll = event => {
@@ -23,12 +30,12 @@ export default function MyReview(props) {
     const currentPage = Math.floor(offsetX / pageWidth + 0.5);
     setCurrentIndex(currentPage);
 
-    if (currentPage === myReviews.length - 1 && hasMore) { 
+    if (currentPage === myReviews.length - 1 && hasMore) {
       onEndReached();
     }
   };
 
-  const Indicator = Array.from({ length: myReviews.length }, (_, index) => (
+  const Indicator = Array.from({length: myReviews.length}, (_, index) => (
     <View
       key={index.toString()}
       style={{
@@ -51,17 +58,28 @@ export default function MyReview(props) {
           <ScrollView
             showsVerticalScrollIndicator={false}
             showsHorizontalScrollIndicator={false}
-            style={{ marginTop: 10 }}
+            style={{marginTop: 10}}
             horizontal={true}
             pagingEnabled
             onScroll={handleScroll}
             scrollEventThrottle={16}
             ref={scrollViewRef}>
             {myReviews.map((reviewData, index) => {
-              return <StoreCompoForR key={index.toString()} storeData={reviewData} index={index} />;
+              return (
+                <StoreCompoForR
+                  key={index.toString()}
+                  storeData={reviewData}
+                  index={index}
+                />
+              );
             })}
           </ScrollView>
-          <View style={{ flexDirection: 'row', justifyContent: 'center', marginTop: 8 }}>
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'center',
+              marginTop: 8,
+            }}>
             {Indicator}
           </View>
         </>
@@ -84,7 +102,7 @@ const styles = StyleSheet.create({
     },
     shadowOpacity: 0.25,
     shadowRadius: 4,
-    elevation: 4, 
+    elevation: 4,
   },
   myReviewTitle: {
     fontSize: 20,

diff --git a/src/components/MyStore.js b/src/components/MyStore.js
@@ -1,18 +1,9 @@
-import React, { useContext, useRef } from 'react';
-import {
-  View,
-  Text,
-  ScrollView,
-  StyleSheet,
-  Image,
-} from 'react-native';
-import {
-  COLOR_WHITE,
-  COLOR_TEXT70GRAY,
-} from '../assets/color';
-import { useNavigation } from '@react-navigation/native';
+import React, {useContext, useRef} from 'react';
+import {View, Text, ScrollView, StyleSheet, Image} from 'react-native';
+import {COLOR_WHITE, COLOR_TEXT70GRAY} from '../assets/color';
+import {useNavigation} from '@react-navigation/native';
 import AppContext from './AppContext';
-import { Dimensions } from 'react-native';
+import {Dimensions} from 'react-native';
 import AnimatedButton from './AnimationButton';
 
 const windowWidth = Dimensions.get('window').width;
@@ -23,11 +14,12 @@ export default function MyStore(props) {
 
   const scrollViewRef = useRef();
 
-  const { passData, onEndReached, hasMore } = props;
+  const {passData, onEndReached, hasMore} = props;
 
-  const handleScroll = (event) => {
-    const { contentOffset, layoutMeasurement, contentSize } = event.nativeEvent;
-    const isCloseToEnd = contentOffset.x + layoutMeasurement.width >= contentSize.width - 50;
+  const handleScroll = event => {
+    const {contentOffset, layoutMeasurement, contentSize} = event.nativeEvent;
+    const isCloseToEnd =
+      contentOffset.x + layoutMeasurement.width >= contentSize.width - 50;
 
     if (isCloseToEnd && hasMore) {
       onEndReached();
@@ -47,17 +39,17 @@ export default function MyStore(props) {
           horizontal={true}
           ref={scrollViewRef}
           onScroll={handleScroll}
-          scrollEventThrottle={16}
-        >
-          <View style={{ width: 16 }} />
+          scrollEventThrottle={16}>
+          {/* <View style={{width: 16}} /> */}
           {passData.map((data, index) => {
             return (
               <AnimatedButton
                 key={index.toString()}
                 style={styles.kingopassKard}
                 onPress={() => {
-                  console.log('찜한 가게 페이지로 이동');
-                  navigation.navigate('StoreDetail', { data: data });
+                  //TODO: 찜한 가게  불러올 때 가게 id가 안나옴
+                  console.log('찜한 가게 페이지로 이동', data);
+                  navigation.navigate('StoreDetail', {data: data});
                 }}>
                 <Image
                   source={{
@@ -101,7 +93,7 @@ export default function MyStore(props) {
               </AnimatedButton>
             );
           })}
-          <View style={{ width: 16 }} />
+          {/* <View style={{width: 16}} /> */}
         </ScrollView>
       )}
     </View>
@@ -119,6 +111,7 @@ const styles = StyleSheet.create({
     marginLeft: 26,
     color: COLOR_TEXT70GRAY,
     fontWeight: '700',
+    marginBottom: 10,
   },
   kingopassKard: {
     height: 140,

diff --git a/src/components/StoreCompo.js b/src/components/StoreCompo.js
@@ -61,12 +61,7 @@ export default function StoreCompo(props) {
         navigation.navigate('StoreDetail', {data: storeData});
       }}>
       <View style={{flexDirection: 'row'}}>
-        <ImageModal
-          swipeToDismiss={true}
-          modalImageResizeMode="contain"
-          // resizeMode="contain"
-          imageBackgroundColor="transparent"
-          overlayBackgroundColor="rgba(32, 32, 32, 0.9)"
+        <Image
           resizeMode="cover"
           style={{
             width: windowWidth / 3,
@@ -148,20 +143,13 @@ export default function StoreCompo(props) {
 
           {storeData.representativeReviewContent ? (
             <>
-              <Text
-                style={{
-                  fontSize: 11,
-                  color: COLOR_TEXT70GRAY,
-                }}>
-                {storeData.representativeReviewContent.reviewer + ' 님'}
-              </Text>
               <Text
                 numberOfLines={4}
                 style={{
                   fontSize: 11,
                   color: COLOR_TEXT60GRAY,
                 }}>
-                {storeData.representativeReviewContent.body}
+                {storeData.representativeReviewContent}
               </Text>
             </>
           ) : (

diff --git a/src/components/StoreCompoForR.js b/src/components/StoreCompoForR.js
@@ -1,59 +1,110 @@
-import React from 'react';
-import { View, Text, StyleSheet, Pressable } from 'react-native';
-import { COLOR_TEXT70GRAY, COLOR_TEXT_BLACK, COLOR_TEXT60GRAY } from '../assets/color';
-import { useNavigation } from '@react-navigation/native';
-import { Dimensions } from 'react-native';
+import React, {useState, useContext, useEffect} from 'react';
+import {View, Text, StyleSheet, Pressable} from 'react-native';
+import {
+  COLOR_TEXT70GRAY,
+  COLOR_TEXT_BLACK,
+  COLOR_TEXT60GRAY,
+} from '../assets/color';
+import {useNavigation} from '@react-navigation/native';
+import {Dimensions} from 'react-native';
 import ImageModal from 'react-native-image-modal';
 import {SvgXml} from 'react-native-svg';
 import {svgXml} from '../assets/svg';
+import AppContext from './AppContext';
+import axios from 'axios';
+import {API_URL} from '@env';
 
 const windowWidth = Dimensions.get('window').width;
 
 export default function StoreCompoForR(props) {
   const navigation = useNavigation();
-  const { storeData, index } = props;
+  const context = useContext(AppContext);
+
+  const {storeData, index} = props;
+
+  const [storeInfo, setStoreInfo] = useState([]);
+
+  const restaurantDetail = async () => {
+    console.log('Id: ', storeData.id);
+    try {
+      const response = await axios.get(
+        `${API_URL}/v1/restaurants/${storeData.id}`,
+        {
+          headers: {Authorization: `Bearer ${context.accessToken}`},
+        },
+      );
+
+      console.log('Restaurant heart:', response.data.data.restaurant);
+      setStoreInfo(response.data.data.restaurant);
+    } catch (error) {
+      console.error('Error fetching restaurant details:', error);
+    }
+  };
+
+  useEffect(() => {
+    restaurantDetail();
+  }, []);
 
   return (
     <Pressable
       key={index.toString()}
-      style={{
-        width: windowWidth - 32,
-        height: windowWidth / 3,
-      }}
+      style={
+        {
+          // width: windowWidth - 32,
+          // height: windowWidth / 3,
+        }
+      }
       onPress={() => {
-        console.log('가게 상세 페이지로 이동');
-        navigation.navigate('StoreDetail', { data: storeData });
+        console.log('가게 상세 페이지로 이동', storeData);
+        // navigation.navigate('StoreDetail', {data: storeData});
       }}>
-      <View style={{ flexDirection: 'row' }}>
+      <View style={{flexDirection: 'row'}}>
         <View style={styles.imageContainer}>
-          <ImageModal
-            swipeToDismiss={true}
-            modalImageResizeMode="contain"
-            imageBackgroundColor="transparent"
-            overlayBackgroundColor="rgba(32, 32, 32, 0.9)"
-            resizeMode="cover"
-            style={styles.image}
-            source={{
-              uri: storeData.image || 'https://via.placeholder.com/150',
-            }}
-          />
+          {storeData.image ? (
+            <ImageModal
+              swipeToDismiss={true}
+              modalImageResizeMode="contain"
+              imageBackgroundColor="transparent"
+              overlayBackgroundColor="rgba(32, 32, 32, 0.9)"
+              resizeMode="cover"
+              style={styles.image}
+              source={{
+                uri: storeData.image || 'https://via.placeholder.com/150',
+              }}
+            />
+          ) : (
+            <ImageModal
+              swipeToDismiss={true}
+              modalImageResizeMode="contain"
+              imageBackgroundColor="transparent"
+              overlayBackgroundColor="rgba(32, 32, 32, 0.9)"
+              resizeMode="cover"
+              style={styles.image}
+              source={{uri: storeInfo.representativeImageUrl}}
+            />
+          )}
         </View>
-        <View style={{ flex: 1, marginLeft: 12 }}>
-          <Text style={styles.storeName}>{storeData.name}</Text>
-          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        <View style={{flex: 1, marginLeft: 12}}>
+          <Text style={styles.storeName} numberOfLines={1}>
+            {storeInfo.name}
+          </Text>
+          <View style={{flexDirection: 'row', alignItems: 'center'}}>
             <Text style={styles.reviewText}>
-            <SvgXml xml={svgXml.icon.star} width="15" height="15" style={{}} />
-              {storeData.score} ({storeData.reviewCount})
+              <SvgXml
+                xml={svgXml.icon.star}
+                width="15"
+                height="15"
+                style={{}}
+              />
+              {storeInfo.ratingAvg} ({storeInfo.reviewCount})
             </Text>
             <SvgXml
               xml={svgXml.icon.heart}
               width="15"
               height="15"
               style={{marginLeft: 7}}
             />
-            <Text style={styles.heartText}>
-              {storeData.heartCount}
-            </Text>
+            <Text style={styles.heartText}>{storeInfo.likeCount}</Text>
           </View>
           <Text style={styles.reviewerName}>
             {storeData.firstReview.reviewer} 님
@@ -69,40 +120,42 @@ export default function StoreCompoForR(props) {
 
 const styles = StyleSheet.create({
   imageContainer: {
-    width: windowWidth / 4,  
-    height: windowWidth / 4, 
+    width: windowWidth / 4,
+    height: windowWidth / 4,
     borderWidth: 1,
     borderColor: COLOR_TEXT70GRAY,
     borderRadius: 10,
     overflow: 'hidden',
     justifyContent: 'center',
     alignItems: 'center',
+    backgroundColor: '#f0f0f0',
   },
   image: {
-    width: '100%',
-    height: '100%',
+    width: windowWidth / 4,
+    height: windowWidth / 4,
   },
   storeName: {
-    fontSize: 19,  
+    fontSize: 19,
     color: COLOR_TEXT_BLACK,
     fontWeight: 'bold',
+    width: 245,
   },
   reviewText: {
-    fontSize: 16,  
+    fontSize: 16,
     color: COLOR_TEXT70GRAY,
     marginLeft: 7,
   },
   heartText: {
-    fontSize: 16, 
+    fontSize: 16,
     color: COLOR_TEXT70GRAY,
     marginLeft: 7,
   },
   reviewerName: {
-    fontSize: 14,  
+    fontSize: 14,
     color: COLOR_TEXT70GRAY,
   },
   reviewContent: {
-    fontSize: 15,  
+    fontSize: 15,
     color: COLOR_TEXT60GRAY,
   },
 });