chore: change deliveryfee, userscore ui in detail page - #11

BaedalMate · Jan 18, 2023 · 505c1fe · 505c1fe
1 parent b5d0ae9
commit 505c1fe
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 28 deletions.
diff --git a/baedalmate/src/components/molecules/Detail/DeliveryFeeModal.tsx b/baedalmate/src/components/molecules/Detail/DeliveryFeeModal.tsx
@@ -113,7 +113,7 @@ const DeliveryFeeModal = ({item}: {item: RecruitItemProps | undefined}) => {
                 style={{
                   marginTop: 10,
                   marginBottom: 10,
-                  paddingBottom: 30,
+                  // paddingBottom: 30,
                   borderBottomWidth: 1,
                   borderBottomColor: LINE_GRAY_COLOR,
                 }}>
@@ -122,35 +122,61 @@ const DeliveryFeeModal = ({item}: {item: RecruitItemProps | undefined}) => {
                     fontSize: 18,
                     lineHeight: 22,
                     color: PRIMARY_COLOR,
+                    marginBottom: 8,
                   }}>
                   배달비 상세정보
                 </TextKRBold>
+                <TextKRReg style={styles.Description}>
+                  배달팁 계산 시, 나누어 떨어지지 않는 경우 1원이 추가되어
+                  계산됩니다.
+                </TextKRReg>
               </View>
               <View>
-                <View
-                  style={{
-                    flexDirection: 'row',
-                    justifyContent: 'space-between',
-                    marginBottom: 10,
-                  }}>
-                  <TextKRReg style={styles.Label}>주문금액</TextKRReg>
-                  <TextKRReg style={styles.Label}>배달팁</TextKRReg>
-                </View>
-                {item?.shippingFeeDetail.map((v, i) => (
+                {item?.shippingFeeDetail && (
                   <View
-                    key={i}
                     style={{
                       flexDirection: 'row',
                       justifyContent: 'space-between',
+                      marginBottom: 10,
+                    }}>
+                    <TextKRReg style={styles.Label}>주문금액</TextKRReg>
+                    <TextKRReg style={styles.Label}>배달팁</TextKRReg>
+                  </View>
+                )}
+
+                {item?.shippingFeeDetail ? (
+                  item?.shippingFeeDetail.map((v, i) => (
+                    <View
+                      key={i}
+                      style={{
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                      }}>
+                      <TextKRReg style={styles.Description}>
+                        {formPrice(v.lowerPrice)}원 이상
+                      </TextKRReg>
+                      <TextKRReg style={styles.Description}>
+                        {formPrice(v.shippingFee)}원
+                      </TextKRReg>
+                    </View>
+                  ))
+                ) : (
+                  <View
+                    style={{
+                      height: 120,
+                      justifyContent: 'center',
+                      alignItems: 'center',
                     }}>
-                    <TextKRReg style={styles.Description}>
-                      {formPrice(v.lowerPrice)}원 이상
-                    </TextKRReg>
-                    <TextKRReg style={styles.Description}>
-                      {formPrice(v.shippingFee)}원
-                    </TextKRReg>
+                    <TextKRBold
+                      style={{
+                        fontSize: 24,
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                      }}>
+                      배달비 없음
+                    </TextKRBold>
                   </View>
-                ))}
+                )}
               </View>
             </View>
             <View

diff --git a/baedalmate/src/components/molecules/Detail/UserInfo.tsx b/baedalmate/src/components/molecules/Detail/UserInfo.tsx
@@ -1,15 +1,24 @@
 import {useNavigation} from '@react-navigation/native';
 import {UserProfileImage} from 'components/atoms/Image/UserImage';
 import {RecruitItemProps} from 'components/pages/Detail';
-import React from 'react';
-import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import React, {useEffect, useState} from 'react';
+import {
+  Easing,
+  Image,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import StarRating, {StarIconProps} from 'react-native-star-rating-widget';
 import {TextKRBold} from 'themes/text';
 import {
   BLACK_COLOR,
   DARK_GRAY_COLOR,
   MARKER_BLACK,
-  STAR_LINEORANGE,
-  STAR_PRIMARY,
+  PRIMARY_COLOR,
+  STAR_ACTIVE,
+  STAR_DEACTIVE,
 } from 'themes/theme';
 
 export type BtnWithoutTextProps = {
@@ -18,6 +27,11 @@ export type BtnWithoutTextProps = {
 
 const UserInfo = ({item}: {item: RecruitItemProps | undefined}) => {
   const navigation = useNavigation();
+  const [rating, setRating] = useState(0);
+  useEffect(() => {
+    item?.userInfo.score && setRating(item?.userInfo.score);
+  }, [item]);
+
   return (
     <View
       style={{
@@ -39,10 +53,44 @@ const UserInfo = ({item}: {item: RecruitItemProps | undefined}) => {
           marginLeft: 11,
           justifyContent: 'space-around',
         }}>
-        <TextKRBold>{item?.userInfo.nickname}</TextKRBold>
-        <View style={{flexDirection: 'row'}}>
-          <Image source={STAR_LINEORANGE} />
-          <TextKRBold>
+        <TextKRBold style={{fontSize: 16}}>
+          {item?.userInfo.nickname}
+        </TextKRBold>
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'center',
+            alignItems: 'center',
+            // borderWidth: 1,
+          }}>
+          <StarRating
+            rating={rating}
+            onChange={() => {}}
+            starSize={20}
+            color={PRIMARY_COLOR}
+            starStyle={{
+              width: 14,
+              marginRight: 3,
+              display: 'flex',
+              // borderWidth: 1,
+              justifyContent: 'flex-end',
+              alignItems: 'flex-end',
+            }}
+            animationConfig={{
+              scale: 1,
+              duration: 0,
+              delay: 0,
+              easing: Easing.elastic(1),
+            }}
+          />
+          <TextKRBold
+            style={{
+              justifyContent: 'center',
+              alignItems: 'center',
+              textAlignVertical: 'center',
+              fontSize: 14,
+              lineHeight: 20,
+            }}>
             {item?.userInfo.score
               ? Math.round(item?.userInfo.score * 10) / 10
               : 0}
@@ -65,7 +113,13 @@ const UserInfo = ({item}: {item: RecruitItemProps | undefined}) => {
         {!item?.host && (
           <TouchableOpacity
             onPress={() => {
-              navigation.navigate('게시글 신고하기' as never);
+              navigation.navigate(
+                '게시글 신고하기' as never,
+                {
+                  item: item,
+                  userInfo: item?.userInfo,
+                } as never,
+              );
             }}
             style={{
               borderBottomWidth: 1,