[KAN-117] 가게 상세 정보 디자인 개선 및 복사 기능 추가 (#35)

Co-authored-by: MinseoKim <[email protected]>
meokgu-skku · Jun 1, 2024 · 0c7dffb · 0c7dffb
1 parent 1076c38
commit 0c7dffb
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 9 deletions.
diff --git a/src/assets/svg.js b/src/assets/svg.js
diff --git a/src/screens/detail/StoreDetailScreen.js b/src/screens/detail/StoreDetailScreen.js
@@ -18,6 +18,7 @@ import {
   FlatList,
   Pressable,
   Linking,
+  Alert,
 } from 'react-native';
 import {
   COLOR_WHITE,
@@ -35,7 +36,7 @@ import {
 } from '../../assets/color';
 import AnimatedButton from '../../components/AnimationButton';
 import {useNavigation, useFocusEffect} from '@react-navigation/native';
-import {SvgXml} from 'react-native-svg';
+import {ClipPath, SvgXml} from 'react-native-svg';
 import {svgXml} from '../../assets/svg';
 import Header from '../../components/Header';
 import AppContext from '../../components/AppContext';
@@ -44,6 +45,7 @@ import {API_URL} from '@env';
 import {Dimensions} from 'react-native';
 import ImageModal from 'react-native-image-modal';
 import {Modal, TouchableHighlight} from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
 
 const windowWidth = Dimensions.get('window').width;
 
@@ -132,6 +134,11 @@ export default function StoreDetailScreen(props) {
     Linking.openURL(`tel:${phoneNumber}`);
   };
 
+  const onCopy = (text) => {
+    Clipboard.setString(text);
+    Alert.alert('클립보드에 복사되었습니다.');
+  }
+
   const handleLoadMoreMenus = () => {
     setMenuCount(menuCount + 4);
   };
@@ -302,13 +309,19 @@ export default function StoreDetailScreen(props) {
                 </Text>
               </View>
               <View style={styles.sectionTitle}>
+                <Text style={styles.storeReviewNaver}>{'('}</Text>
+                <Text style={styles.storeReviewNaver}>
+                  <SvgXml xml={svgXml.icon.naver} width={15} height={15} />
+                </Text>
                 <Text style={styles.storeReviewNaver}>
-                  {'('} 네이버 평점 {restaurant.restaurant.naverRatingAvg}
+                  평점 {restaurant.restaurant.naverRatingAvg}
                 </Text>
                 <Text style={styles.storeReviewNaver}>·</Text>
                 <Text style={styles.storeReviewNaver}>
-                  리뷰 {restaurant.restaurant.naverReviewCount} {')'}
+                  <SvgXml xml={svgXml.icon.naver} width={15} height={15} />
                 </Text>
+                <Text style={styles.storeReviewNaver}>
+                  리뷰 {restaurant.restaurant.naverReviewCount} {')'}</Text>
               </View>
             </View>
           </View>
@@ -334,12 +347,12 @@ export default function StoreDetailScreen(props) {
               <Text style={styles.contactButtonText}>찜</Text>
             </TouchableOpacity>
             <View style={styles.verticalDivider} />
-            <TouchableOpacity style={styles.contactButton}>
+            <View style={styles.contactButton}>
               <SvgXml xml={svgXml.icon.starGrey} width={24} height={24} />
               <Text style={styles.contactButtonText}>
                 {restaurant.restaurant.ratingAvg.toFixed(1)}
               </Text>
-            </TouchableOpacity>
+            </View>
             <View style={styles.verticalDivider} />
             <AnimatedButton
               style={styles.contactButton}
@@ -368,6 +381,9 @@ export default function StoreDetailScreen(props) {
             <Text style={styles.storeAddress}>
               위치: {restaurant.restaurant.detailInfo.address}
             </Text>
+            <TouchableOpacity onPress={() => {onCopy(restaurant.restaurant.detailInfo.address)}}>
+              <Text style={styles.copyButtonText}>복사</Text>
+            </TouchableOpacity>
           </View>
           <View style={{flexDirection: 'row', alignItems: 'center'}}>
             <SvgXml
@@ -379,6 +395,9 @@ export default function StoreDetailScreen(props) {
             <Text style={styles.storePhoneNum}>
               전화번호: {restaurant.restaurant.detailInfo.contactNumber}
             </Text>
+            <TouchableOpacity onPress={() => {onCopy(restaurant.restaurant.detailInfo.contactNumber)}}>
+              <Text style={styles.copyButtonText}>복사</Text>
+            </TouchableOpacity>
           </View>
         </View>
         <View style={styles.section}>
@@ -509,8 +528,9 @@ const styles = StyleSheet.create({
     fontFamily: 'NanumSquareRoundB',
   },
   storeReviewNaver: {
-    fontSize: 13,
-    color: '#636363',
+    fontSize: 14,
+    color: COLOR_GRAY,
+    marginTop: 3,
     marginBottom: 16,
     marginRight: 6,
     fontFamily: 'NanumSquareRoundB',
@@ -550,7 +570,6 @@ const styles = StyleSheet.create({
     fontSize: 13,
     color: COLOR_TEXT_DARKGRAY,
     marginVertical: 8,
-    flex: 1,
     fontFamily: 'NanumSquareRoundB',
   },
   storeHours: {
@@ -561,7 +580,15 @@ const styles = StyleSheet.create({
   storePhoneNum: {
     fontSize: 13,
     color: COLOR_TEXT_DARKGRAY,
+    marginVertical: 8,
+    fontFamily: 'NanumSquareRoundB',
+  },
+  copyButtonText: {
+    fontSize: 13,
     marginVertical: 7,
+    marginLeft: 7,
+    color: COLOR_GRAY,
+    textDecorationLine: 'underline',
     fontFamily: 'NanumSquareRoundB',
   },
   section: {