Fix/ mypage UI bug

meokgu-skku · May 27, 2024 · 5b3ef36 · 5b3ef36
1 parent 940d93e
commit 5b3ef36
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 40 deletions.
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/StoreCompoForR.js b/src/components/StoreCompoForR.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState, useContext, useEffect} from 'react';
 import {View, Text, StyleSheet, Pressable} from 'react-native';
 import {
   COLOR_TEXT70GRAY,
@@ -10,40 +10,84 @@ 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 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={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>
+          <Text style={styles.storeName} numberOfLines={1}>
+            {storeInfo.name}
+          </Text>
           <View style={{flexDirection: 'row', alignItems: 'center'}}>
             <Text style={styles.reviewText}>
               <SvgXml
@@ -52,15 +96,15 @@ export default function StoreCompoForR(props) {
                 height="15"
                 style={{}}
               />
-              {storeData.score} ({storeData.reviewCount})
+              {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} 님
@@ -84,15 +128,17 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     justifyContent: 'center',
     alignItems: 'center',
+    backgroundColor: '#f0f0f0',
   },
   image: {
-    width: '100%',
-    height: '100%',
+    width: windowWidth / 4,
+    height: windowWidth / 4,
   },
   storeName: {
     fontSize: 19,
     color: COLOR_TEXT_BLACK,
     fontWeight: 'bold',
+    width: 245,
   },
   reviewText: {
     fontSize: 16,

diff --git a/src/screens/detail/ReviewWriteScreen.js b/src/screens/detail/ReviewWriteScreen.js
@@ -345,8 +345,6 @@ const styles = StyleSheet.create({
     marginHorizontal: 1,
   },
   submitButton: {
-    position: 'absolute',
-    bottom: 0,
     backgroundColor: COLOR_PRIMARY,
     padding: 16,
     borderRadius: 32,

diff --git a/src/screens/mypage/MypageScreen.js b/src/screens/mypage/MypageScreen.js
@@ -10,7 +10,13 @@ import {
 } from 'react-native';
 import {useNavigation, useFocusEffect} from '@react-navigation/native';
 import Header from '../../components/Header';
-import {COLOR_BACKGROUND, COLOR_PRIMARY} from '../../assets/color';
+import {
+  COLOR_BACKGROUND,
+  COLOR_PRIMARY,
+  COLOR_TEXT70GRAY,
+  COLOR_TEXT_BLACK,
+  COLOR_TEXT_DARKGRAY,
+} from '../../assets/color';
 import MyReview from '../../components/MyReview';
 import MyStore from '../../components/MyStore';
 import axios from 'axios';
@@ -31,6 +37,7 @@ export default function MyPageScreen() {
   const [storePage, setStorePage] = useState(0);
   const [hasMoreReviews, setHasMoreReviews] = useState(true);
   const [hasMoreStores, setHasMoreStores] = useState(true);
+  const [email, setEmail] = useState('');
 
   const fetchUserInfo = async () => {
     try {
@@ -43,6 +50,7 @@ export default function MyPageScreen() {
       console.log('User Info:', response.data);
       setNickname(response.data.data.userDto.nickname);
       setProfileImageUrl(response.data.data.userDto.profileImageUrl);
+      setEmail(response.data.data.userDto.email);
     } catch (error) {
       console.error('Failed to fetch user info:', error);
     }
@@ -165,6 +173,16 @@ export default function MyPageScreen() {
           />
         </TouchableOpacity>
 
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}>
+          <Text style={styles.text7}>이메일 주소</Text>
+          <Text style={styles.text8}> {email}</Text>
+        </View>
+
         <MyStore
           passData={myStoresData}
           onEndReached={handleLoadMoreStores}
@@ -197,13 +215,24 @@ const styles = StyleSheet.create({
   },
   myPageItemLayout: {
     marginTop: 20,
-    marginBottom: 20,
+    marginBottom: 10,
   },
   text6: {
     fontSize: 20,
-    color: COLOR_PRIMARY,
+    color: COLOR_TEXT70GRAY,
     marginLeft: 20,
     marginRight: 5,
+    fontWeight: 'bold',
+  },
+  text7: {
+    fontSize: 12,
+    color: COLOR_TEXT70GRAY,
+    marginRight: 6,
+  },
+  text8: {
+    fontSize: 12,
+    color: COLOR_TEXT70GRAY,
+    fontWeight: 'bold',
   },
   text6Position: {
     flexDirection: 'row',