Merge pull request #1 from Dindb-dong/feat/14/ui_fix

sdp-tech#14 feat : fixed goods detail page, added review.svg file
Dindb-dong · Mar 23, 2024 · 67e4f3d · 67e4f3d
2 parents 839330d + 0738114
commit 67e4f3d
Show file tree

Hide file tree

Showing 5 changed files with 164 additions and 108 deletions.
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -1370,7 +1370,7 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
-  boost: 26fad476bfa736552bbfa698a06cc530475c1505
+  boost: d3f49c53809116a5d38da093a8aa78bf551aed09
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
   DoubleConversion: fea03f2699887d960129cc54bba7e52542b6f953
   FBLazyVector: fbc4957d9aa695250b55d879c1d86f79d7e69ab4
@@ -1384,7 +1384,7 @@ SPEC CHECKSUMS:
   Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9
   FlipperKit: 37525a5d056ef9b93d1578e04bc3ea1de940094f
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 035f1e36e53b355cf70f6434d161b36e7d21fecd
+  glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
   hermes-engine: b361c9ef5ef3cda53f66e195599b47e1f84ffa35
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
@@ -1440,7 +1440,7 @@ SPEC CHECKSUMS:
   RNScreens: b582cb834dc4133307562e930e8fa914b8c04ef2
   RNSVG: ba3e7232f45e34b7b47e74472386cf4e1a676d0a
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
-  Yoga: 13c8ef87792450193e117976337b8527b49e8c03
+  Yoga: e64aa65de36c0832d04e8c7bd614396c77a80047
 
 PODFILE CHECKSUM: eb490ed861c0caf2f2649ac9503532c4cce2d3d8
 

diff --git a/ios/upcy.xcodeproj/project.pbxproj b/ios/upcy.xcodeproj/project.pbxproj
@@ -690,7 +690,11 @@
 					"-DFOLLY_USE_LIBCPP=1",
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 				);
-				OTHER_LDFLAGS = "$(inherited)";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					"-Wl",
+					"-ld_classic",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;
@@ -759,7 +763,11 @@
 					"-DFOLLY_USE_LIBCPP=1",
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 				);
-				OTHER_LDFLAGS = "$(inherited)";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					"-Wl",
+					"-ld_classic",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;

diff --git a/src/assets/common/Review.svg b/src/assets/common/Review.svg
diff --git a/src/components/Home/Market/GoodsDetailPage.tsx b/src/components/Home/Market/GoodsDetailPage.tsx
@@ -3,6 +3,8 @@ import { StackScreenProps, createStackNavigator } from '@react-navigation/stack'
 import { HomeStackParams } from '../../../pages/Home';
 import Arrow from '../../../assets/common/Arrow.svg';
 import Search from '../../../assets/common/Search.svg';
+import Community from '../../../assets/common/community.svg';
+import Review from "../../../assets/common/Review.svg";
 import UnFilledLike from '../../../assets/common/UnFilledLike.svg';
 import { useRef, useState } from 'react';
 import DetailBox from './DetailBox';
@@ -12,6 +14,9 @@ import Footer from '../../../common/Footer';
 import { MaterialTabBar, Tabs } from 'react-native-collapsible-tab-view';
 import { BLACK } from '../../../styles/GlobalColor';
 import ReviewPage from './ReviewPage';
+import styled from 'styled-components';
+
+
 
 const { width, height } = Dimensions.get("window");
 
@@ -35,70 +40,95 @@ const GoodsDetailPageScreen = ({ navigation, route }: StackScreenProps<HomeStack
 const ProfileSection = ({ navigation }: { navigation: any }) => {
   const [data, setData] = useState([]);
   return (
-    <ScrollView>
-      <View>
-        <View style={{ flexDirection: "column", height: 80, alignItems: 'center', justifyContent: "space-between" }}>
-          <View style={ // To see the top line
-            {
-              width: '100%', height: 30,
-              backgroundColor: '#00000066',
-              opacity: 0.5
-            }} />
-          <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
-            <TouchableOpacity onPress={() => {
-              navigation.goBack();
-            }}>
-              <Arrow color='black' />
-            </TouchableOpacity>
-            <View // The justifyContent didn't work, so I put this
-              style={{ width: '80%' }} />
+    <View>
+      <View style={{ flexDirection: "column", height: 80, alignItems: 'center', justifyContent: "space-between" }}>
+        <View style={ // To see the top line
+          {
+            width: '100%', height: 30,
+            backgroundColor: '#00000066',
+            opacity: 0.5
+          }} />
+        <View // Top bar part: back arrow, service name, search
+          style={{ flexDirection: "row", justifyContent: "space-between", alignItems: 'center' }}>
+          <TouchableOpacity onPress={() => {
+            navigation.goBack();
+          }}>
+            <Arrow color='black' />
+          </TouchableOpacity>
+          <View // service name
+            style={{ width: '80%' }}>
+            <Text style={{ textAlign: 'center', fontSize: 18, fontWeight: '700' }}>
+              서비스 명 어쩌구
+            </Text>
+          </View>
+          <TouchableOpacity onPress={() => {
+            navigation.goBack();
+          }}>
+            <Search stroke={"black"} />
+          </TouchableOpacity>
+        </View >
+      </View>
+      <CardView // 데이터 들어오면 렌더링
+        gap={0}
+        offset={0}
+        data={data}
+        pageWidth={width}
+        dot={true}
+        renderItem={({ item }: any) => (
+          <View style={{ width: width, height: height * 0.4 }}><UnFilledLike color={'black'} /></View>
+          // <CurationItemCard
+          //   rep={true}
+          //   data={item}
+          //   style={{ width: width, height: height * 0.4 }}
+          // />
+        )}
+      />
+      {/* 컴포넌트로 변경 예정 */}
+      <View >
+        <ImageBackground // 임시 이미지 
+          style={{ width: '100%', height: height * 0.3 }}
+          imageStyle={{ height: height * 0.3 }}
+          source={{ uri: 'https://image.made-in-china.com/2f0j00efRbSJMtHgqG/Denim-Bag-Youth-Fashion-Casual-Small-Mini-Square-Ladies-Shoulder-Bag-Women-Wash-Bags.webp' }}>
+          <View style={{ width: '100%', height: height * 0.3, backgroundColor: '#00000066', opacity: 0.7 }} />
+        </ImageBackground>
+      </View>
+      <View style={TextStyles.borderBottom1}>
+        <View style={{ flex: 5, flexDirection: 'column' }}>
+          <Text style={TextStyles.Sub}>#키워드 #키워드 #키워드 #키워드</Text>
+          <Text style={TextStyles.Title}>상품 이름</Text>
+          <Text style={TextStyles.Price}>20,000 원</Text>
+        </View>
+        <View style={{ flex: 1, alignItems: 'flex-end', justifyContent: 'flex-end' }}>
+          <View style={{
+            marginBottom: 15, marginRight: 15, flexDirection: 'column',
+            justifyContent: 'center', alignItems: 'center'
+          }}>
             <TouchableOpacity onPress={() => {
               navigation.goBack();
             }}>
-              <Search stroke={"black"} />
+              <Review color={BLACK} />
             </TouchableOpacity>
+            <Text style={{ marginTop: 8 }}>후기(3)</Text>
           </View>
         </View>
-        <CardView // 데이터 들어오면 렌더링
-          gap={0}
-          offset={0}
-          data={data}
-          pageWidth={width}
-          dot={true}
-          renderItem={({ item }: any) => (
-            <View style={{ width: width, height: height * 0.4 }}><UnFilledLike color={'black'} /></View>
-            // <CurationItemCard
-            //   rep={true}
-            //   data={item}
-            //   style={{ width: width, height: height * 0.4 }}
-            // />
-          )}
-        />
-        {/* 컴포넌트로 변경 예정 */}
-        <View style={TextStyles.borderBottom1}>
-          <ImageBackground // 임시 이미지 
-            style={{ width: '100%', height: 160 }}
-            imageStyle={{ height: 160 }}
-            source={{ uri: 'https://image.made-in-china.com/2f0j00efRbSJMtHgqG/Denim-Bag-Youth-Fashion-Casual-Small-Mini-Square-Ladies-Shoulder-Bag-Women-Wash-Bags.webp' }}>
-            <View style={{ width: '100%', height: 160, backgroundColor: '#00000066', opacity: 0.7 }} />
-          </ImageBackground>
-          <Text style={TextStyles.Sub}>#키워드 #키워드 #키워드 #키워드</Text>
-          <Text style={TextStyles.Title}>상품 이름</Text>
-          <Text style={TextStyles.PriceInfo}>기본: <Text style={TextStyles.Price}>20000원</Text></Text>
-          <Text style={TextStyles.PriceInfo}>최대: <Text style={TextStyles.Price}>20000원</Text></Text>
-        </View>
-        {/* 컴포넌트로 변경 예정 */}
-        <View style={{ ...TextStyles.borderBottom2, justifyContent: 'space-between' }}>
-          <View style={{ padding: 15, flexDirection: 'row' }}>
-            <View style={{ backgroundColor: "gray", width: 50, height: 50, borderRadius: 25 }}></View>
-            <View style={{ marginLeft: 20, justifyContent: 'center' }}>
-              <Text style={{ fontSize: 16, padding: 3, fontWeight: '700', color: '#000' }}>마켓명 &gt;</Text>
-              <Text style={{ fontSize: 16, padding: 3, color: '#000' }}>리폼러닉네임</Text>
+      </View>
+      {/* 컴포넌트로 변경 예정 */}
+      <View style={{ ...TextStyles.borderBottom2, justifyContent: 'space-between' }}>
+        <View style={{ padding: 15, flexDirection: 'row' }}>
+          <View style={{ backgroundColor: "gray", width: 50, height: 50, borderRadius: 25 }}></View>
+          <View style={{ marginLeft: 20, justifyContent: 'center' }}>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Text style={{ fontSize: 14, padding: 3, fontWeight: '700', color: '#22222' }}>마켓명 </Text>
+              <Arrow // Arrow at the right side of 'marketname'
+                style={{ marginLeft: -7, transform: [{ scaleX: -1 }] }}
+                color={BLACK}>
+              </Arrow>
             </View>
+            <Text style={{ fontSize: 14, padding: 3, fontWeight: '700', color: '#222222' }}>리폼러닉네임</Text>
           </View>
         </View>
       </View>
-    </ScrollView>
+    </View>
   )
 }
 
@@ -163,11 +193,12 @@ const TextStyles = StyleSheet.create({
   },
   Sub: {
     width: "70%",
-    fontWeight: "400",
+    fontWeight: "700",
     paddingLeft: 10,
     paddingTop: 10,
     paddingRight: 10,
     fontSize: 14,
+    lineHeight: 24,
     color: "#612EFE",
   },
   PriceInfo: {
@@ -185,7 +216,7 @@ const TextStyles = StyleSheet.create({
     paddingLeft: 10,
     paddingTop: 5,
     paddingRight: 10,
-    paddingBottom: 5,
+    paddingBottom: 15,
     color: '#222222',
   },
   recommend: {
@@ -199,6 +230,7 @@ const TextStyles = StyleSheet.create({
     marginTop: 5,
   },
   borderBottom1: {
+    flexDirection: 'row',
     borderBottomWidth: 1,
     borderBlockColor: "#dcdcdc"
   },