#14 feat : reformed goods detail page (#49)

ios/Podfile.lock

@@ -68,9 +68,9 @@ PODS:
     - FlipperKit/FlipperKitNetworkPlugin
   - fmt (6.2.1)
   - glog (0.3.5)
-  - hermes-engine (0.73.1):
-    - hermes-engine/Pre-built (= 0.73.1)
-  - hermes-engine/Pre-built (0.73.1)
+  - hermes-engine (0.73.2):
+    - hermes-engine/Pre-built (= 0.73.2)
+  - hermes-engine/Pre-built (0.73.2)
   - libevent (2.1.12)
   - OpenSSL-Universal (1.1.1100)
   - RCT-Folly (2022.05.16.00):
@@ -944,15 +944,15 @@ PODS:
   - React-Mapbuffer (0.73.2):
     - glog
     - React-debug
-  - react-native-image-picker (7.1.0):
+  - react-native-image-picker (7.1.1):
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
   - react-native-pager-view (6.2.3):
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
-  - react-native-safe-area-context (4.8.2):
+  - react-native-safe-area-context (4.9.0):
     - React-Core
   - react-native-slider (4.5.0):
     - glog
@@ -1133,9 +1133,9 @@ PODS:
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
-  - RNKeychain (8.1.2):
+  - RNKeychain (8.2.0):
     - React-Core
-  - RNReanimated (3.7.1):
+  - RNReanimated (3.8.1):
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
@@ -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,8 +1384,8 @@ SPEC CHECKSUMS:
   Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9
   FlipperKit: 37525a5d056ef9b93d1578e04bc3ea1de940094f
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 035f1e36e53b355cf70f6434d161b36e7d21fecd
-  hermes-engine: 34df9d5034e90bd9bf1505e1ca198760373935af
+  glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
+  hermes-engine: b361c9ef5ef3cda53f66e195599b47e1f84ffa35
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
   RCT-Folly: 7169b2b1c44399c76a47b5deaaba715eeeb476c0
@@ -1409,9 +1409,9 @@ SPEC CHECKSUMS:
   React-jsinspector: 03644c063fc3621c9a4e8bf263a8150909129618
   React-logger: 66b168e2b2bee57bd8ce9e69f739d805732a5570
   React-Mapbuffer: 9ee041e1d7be96da6d76a251f92e72b711c651d6
-  react-native-image-picker: 6c51359eca7a7df9f07e297218c25696eb9da976
+  react-native-image-picker: 1a7cd3224036e080fe46bcb955f2eb42fcbf7acc
   react-native-pager-view: d81ab2060b9caf57ca8c3a0d57467ff407cdb825
-  react-native-safe-area-context: 0ee144a6170530ccc37a0fd9388e28d06f516a89
+  react-native-safe-area-context: b97eb6f9e3b7f437806c2ce5983f479f8eb5de4b
   react-native-slider: 7d387c7e8dd0b4c12bf49c975c8666435f082a33
   react-native-webview: 0f93dc8f4208ae5365884922c3cd14da5037ca4c
   React-nativeconfig: d753fbbc8cecc8ae413d615599ac378bbf6999bb
@@ -1435,13 +1435,13 @@ SPEC CHECKSUMS:
   React-utils: f5bc61e7ea3325c0732ae2d755f4441940163b85
   ReactCommon: 45b5d4f784e869c44a6f5a8fad5b114ca8f78c53
   RNGestureHandler: deda62b8339496ba721a45e0f3e2d7a319932cee
-  RNKeychain: a65256b6ca6ba6976132cc4124b238a5b13b3d9c
-  RNReanimated: beb07f7f900543928467da8107c175d1e57a1049
+  RNKeychain: bfe3d12bf4620fe488771c414530bf16e88f3678
+  RNReanimated: 3e23d4be380e295e504b7b3b3a357df60e1168a2
   RNScreens: b582cb834dc4133307562e930e8fa914b8c04ef2
   RNSVG: ba3e7232f45e34b7b47e74472386cf4e1a676d0a
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
-  Yoga: 13c8ef87792450193e117976337b8527b49e8c03
+  Yoga: e64aa65de36c0832d04e8c7bd614396c77a80047
 
 PODFILE CHECKSUM: eb490ed861c0caf2f2649ac9503532c4cce2d3d8
 
-COCOAPODS: 1.12.1
+COCOAPODS: 1.15.2

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;

src/components/Home/Market/GoodsDetailPage.tsx

@@ -1,4 +1,4 @@
-import { Dimensions, SafeAreaView, ScrollView, Text, TouchableOpacity, View, StyleSheet, useWindowDimensions } from 'react-native';
+import { Dimensions, SafeAreaView, ScrollView, Text, TouchableOpacity, View, StyleSheet, useWindowDimensions, Image, ImageBackground } from 'react-native';
 import { StackScreenProps, createStackNavigator } from '@react-navigation/stack';
 import { HomeStackParams } from '../../../pages/Home';
 import Arrow from '../../../assets/common/Arrow.svg';
@@ -27,75 +27,93 @@ const GoodsDetailPageScreen = ({ navigation, route }: StackScreenProps<HomeStack
       screenOptions={() => ({
         headerShown: false,
       })}>
-      <DetailPageStack.Screen name='DetailPage' component={GoodsDetailPageMainScreen}/>
+      <DetailPageStack.Screen name='DetailPage' component={GoodsDetailPageMainScreen} />
     </DetailPageStack.Navigator>
   );
 };
 
-const ProfileSection = ({ navigation }: {navigation:any}) => {
+const ProfileSection = ({ navigation }: { navigation: any }) => {
   const [data, setData] = useState([]);
   return (
-    <View>
-    <View style={{flexDirection: "row", height: 50, alignItems: 'center', justifyContent:"space-between"}}>
-        <TouchableOpacity onPress={() => {
-          navigation.goBack();
-        }}>
-          <Arrow color='black' />
-        </TouchableOpacity>
-        <TouchableOpacity onPress={() => {
-          navigation.goBack();
-        }}>
-          <Search stroke={"black"}/>
-        </TouchableOpacity>
-      </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 }}
-          // />
-        )}
-      />
+    <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%' }} />
+            <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 style={TextStyles.borderBottom}>
-          <Text style={TextStyles.Sub}>#키워드 #키워드 #키워드 #키워드 #키워드</Text>
+        <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.borderBottom, 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 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>
         </View>
-        </View>
+      </View>
+    </ScrollView>
   )
 }
 
 const GoodsDetailPageMainScreen = ({ navigation }: StackScreenProps<DetailPageStackParams, 'DetailPage'>) => {
   const layout = useWindowDimensions();
   const [index, setIndex] = useState<number>(0);
   const [routes] = useState([
-    { key: 'detail', title: '상세설명'},
+    { key: 'detail', title: '상세설명' },
     { key: 'option', title: '필독사항' },
-    { key: 'review', title: '리뷰'}
+    { key: 'review', title: '리뷰' }
   ]);
-  
+
   return (
-    <View style={{flex:1}}>
-        <Tabs.Container
+    <View style={{ flex: 1 }}>
+      <Tabs.Container
         renderHeader={props => <ProfileSection navigation={navigation} />}
         headerContainerStyle={{
           shadowOpacity: 0,
@@ -113,22 +131,22 @@ const GoodsDetailPageMainScreen = ({ navigation }: StackScreenProps<DetailPageSt
               backgroundColor: 'white',
             }}
             labelStyle={{
-              color: BLACK,
+              color: '#222222',
               fontWeight: '700',
-              fontSize: 16
+              fontSize: 14
             }}
           />
         )}
       >
         {routes.map(route =>
-          (<Tabs.Tab key={route.key} name={route.title}>
-            {route.key === 'detail' && <DetailBox />}
-            {route.key === 'option' && <OptionBox />}
-            {route.key === 'review' && <ReviewPage />}
-          </Tabs.Tab>)
+        (<Tabs.Tab key={route.key} name={route.title}>
+          {route.key === 'detail' && <DetailBox />}
+          {route.key === 'option' && <OptionBox />}
+          {route.key === 'review' && <ReviewPage />}
+        </Tabs.Tab>)
         )}
       </Tabs.Container>
-      <Footer/>
+      <Footer />
     </View>
   )
 }
@@ -137,29 +155,38 @@ const TextStyles = StyleSheet.create({
   Title: {
     // fontFamily:"Inter",
     padding: 10,
-    color: '#000',
-    fontWeight: "600",
-    fontSize: 24,
-    lineHeight: 28,
+    color: '#222222',
+    fontWeight: "700",
+    fontSize: 18,
+    lineHeight: 24,
     width: "100%",
   },
   Sub: {
     width: "70%",
     fontWeight: "400",
-    padding: 10,
+    paddingLeft: 10,
+    paddingTop: 10,
+    paddingRight: 10,
     fontSize: 14,
     color: "#612EFE",
   },
-  PriceInfo:{
+  PriceInfo: {
     fontWeight: "600",
-    fontSize: 16,
-    padding:10,
+    fontSize: 14,
+    paddingLeft: 10,
+    paddingTop: 5,
+    paddingRight: 10,
+    paddingBottom: 5,
+    color: 'rgba(34, 34, 34, 0.50)',
   },
   Price: {
-    fontWeight: "600",
+    fontWeight: "700",
     fontSize: 16,
-    padding:10,
-    color: '#000',
+    paddingLeft: 10,
+    paddingTop: 5,
+    paddingRight: 10,
+    paddingBottom: 5,
+    color: '#222222',
   },
   recommend: {
     color: "#FFFFFF",
@@ -171,9 +198,13 @@ const TextStyles = StyleSheet.create({
     overflow: "hidden",
     marginTop: 5,
   },
-  borderBottom: {
-    borderBottomWidth:5,
-    borderBlockColor:"#dcdcdc"
+  borderBottom1: {
+    borderBottomWidth: 1,
+    borderBlockColor: "#dcdcdc"
+  },
+  borderBottom2: {
+    borderBottomWidth: 6,
+    borderBlockColor: "#dcdcdc"
   }
 });