sdp-tech#11 feat: add market product page

SJ-Kwak · Jan 28, 2024 · 327f15e · 327f15e
1 parent 60a92fd
commit 327f15e
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 33 deletions.
diff --git a/src/common/CustomHeader.tsx b/src/common/CustomHeader.tsx
@@ -56,23 +56,21 @@ const Toggletag = ({pressable} : ToggleButtonParams) => {
 
 const CustomHeader = ({ onSearch, onAlarm }: CustomHeaderProps) => {
   return (
-    <TouchableOpacity>
-        <FrameBox>
-          <Logo />
-          <View style={{flex: 1}}>
-          <ToggleBox>
-            <ToggleButton>
-              <Text style={{ fontSize: 16, fontWeight: '500', marginRight: 5 }}>상품</Text>
-            </ToggleButton>
-            <ToggleButton>
-              <Text style={{ fontSize: 16, fontWeight: '500', marginRight: 5 }}>마켓</Text>
-            </ToggleButton>
-          </ToggleBox>
-          </View>
-          <Search />
-          <Bell />
-        </FrameBox>
-      </TouchableOpacity>
+    <FrameBox>
+      <Logo />
+      <View style={{flex: 1}}>
+        <ToggleBox>
+          <ToggleButton>
+            <Text style={{ fontSize: 16, fontWeight: '500', marginRight: 5 }}>상품</Text>
+          </ToggleButton>
+          <ToggleButton>
+            <Text style={{ fontSize: 16, fontWeight: '500', marginRight: 5 }}>마켓</Text>
+          </ToggleButton>
+        </ToggleBox>
+      </View>
+      <Search />
+      <Bell />
+    </FrameBox>
   )
 }
 

diff --git a/src/components/Home/Market/DetailPage.tsx b/src/components/Home/Market/DetailPage.tsx
@@ -1,7 +1,7 @@
 import { Dimensions, SafeAreaView, ScrollView, Text, TextInput, TouchableOpacity, View, StyleSheet } from 'react-native';
 import { StackScreenProps, createStackNavigator } from '@react-navigation/stack';
 import { HomeStackParams } from '../../../pages/Home';
-import LeftArrow from '../../../assets/common/LeftArrow.svg';
+import Arrow from '../../../assets/common/Arrow.svg';
 import UnFilledLike from '../../../assets/common/UnFilledLike.svg';
 import Search from '../../../assets/common/Search.svg';
 import styled from "styled-components/native";
@@ -73,7 +73,7 @@ const DetailPageMainScreen = ({ navigation }: StackScreenProps<DetailPageStackPa
         <TouchableOpacity onPress={() => {
           navigation.goBack();
         }}>
-          <LeftArrow/>
+          <Arrow/>
         </TouchableOpacity>
       </View>
       <ScrollView>

diff --git a/src/components/Home/Market/MarketTabView.tsx b/src/components/Home/Market/MarketTabView.tsx
@@ -84,7 +84,7 @@ const MarketTabView = ({ navigation, route } : StackScreenProps<HomeStackParams,
             {...props}
             indicatorContainerStyle={{
               borderBottomColor: '#DFDFDF',
-              borderBottomWidth: 2
+              borderBottomWidth: 1
             }}
             indicatorStyle={{
               backgroundColor: '#BDBDBD',

diff --git a/src/components/Home/Market/ProductPage.tsx b/src/components/Home/Market/ProductPage.tsx
@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import { View, TouchableOpacity, ScrollView, FlatList, Dimensions } from 'react-native';
+import styled from 'styled-components/native';
+import { Subtitle18B } from '../../../styles/GlobalText';
+import Carousel from '../../../common/Carousel';
+
+import ServiceItem from '../components/ServiceItem';
+import ProductItem from '../components/ProductItem';
+
+import Arrow from '../../../assets/common/Arrow.svg';
+import { LIGHTGRAY } from '../../../styles/GlobalColor';
+
+const ProductPage = () => {
+  // 한 줄에 2개씩 상품 아이템 배치
+  const product = [...new Array(6).keys()]
+  const splitArrayIntoPairs = (arr: any[], pairSize: number) => {
+    return arr.reduce((result, item, index) => {
+      if (index % pairSize === 0) {
+        result.push([]);
+      }
+      result[result.length - 1].push(item);
+      return result;
+    }, []);
+  };
+  const splitProduct = splitArrayIntoPairs(product, 2);
+
+  return (
+    <ScrollView style={{marginBottom: 60}}>
+      <LabelButton>
+        <Subtitle18B>리폼러의 서비스</Subtitle18B>
+        <Arrow transform={[{ rotate: '180deg' }]} />
+      </LabelButton>
+      <Carousel
+        data={[...new Array(6).keys()]}
+        renderItem={({item}: any) => {
+          return (
+            <ServiceItem onPress={() => {}} />
+          )
+        }}
+        slider
+      />
+      <View style={{height: 1, backgroundColor: LIGHTGRAY, marginTop: 10 }} />
+      <LabelButton>
+        <Subtitle18B>리폼러의 판매상품</Subtitle18B>
+        <Arrow transform={[{ rotate: '180deg' }]} />
+      </LabelButton>
+      <Carousel
+        data={splitProduct}
+        renderItem={({item}: any) => {
+          return (
+            <View style={{ flexDirection: 'row' }}>
+              {item.map((subItem: any) => (
+                <ProductItem key={subItem.id} onPress={() => {}} />
+              ))}
+            </View>
+          )
+        }}
+        dot
+      />
+    </ScrollView>
+  )
+}
+
+const LabelButton = styled.TouchableOpacity`
+  display: flex;
+  flex-direction: row;
+  padding: 16px;
+`
+
+export default ProductPage;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -2,42 +2,59 @@ import { useEffect, useState } from 'react';
 import { SafeAreaView, Text, View } from 'react-native';
 import styled from 'styled-components/native';
 import { Filter14M } from '../styles/GlobalText';
-import { StackScreenProps, createStackNavigator } from '@react-navigation/stack';
+
+import {
+  StackScreenProps,
+  createStackNavigator,
+} from '@react-navigation/stack';
 import { TabProps } from '../../App';
 import { TouchableOpacity } from 'react-native-gesture-handler';
-import DetailPageScreen from '../components/Home/Market/DetailPage';
+
 import CustomHeader from '../common/CustomHeader';
+import MarketTabView from '../components/Home/Market/MarketTabView';
+import DetailPageScreen from '../components/Home/Market/DetailPage';
+
 export type HomeStackParams = {
   Home: undefined;
+  Market: undefined;
   DetailPage: {
     id?: number;
   };
-}
+};
 
 const HomeStack = createStackNavigator<HomeStackParams>();
 
-const HomeScreen = ({ navigation, route }: StackScreenProps<TabProps, '홈'>) => {
+const HomeScreen = ({
+  navigation,
+  route,
+}: StackScreenProps<TabProps, '홈'>) => {
   return (
     <HomeStack.Navigator
       screenOptions={() => ({
         headerShown: false,
       })}>
-      <HomeStack.Screen name='Home' component={HomeMainScreen}/>
-      <HomeStack.Screen name='DetailPage' component={DetailPageScreen}/>
+      <HomeStack.Screen name='Home' component={HomeMainScreen} />
+      <HomeStack.Screen name='Market' component={MarketTabView} />
+      <HomeStack.Screen name='DetailPage' component={DetailPageScreen} />
     </HomeStack.Navigator>
   );
 };
 
-const HomeMainScreen = ({ navigation }: StackScreenProps<HomeStackParams, 'Home'>) => {
-
+const HomeMainScreen = ({
+  navigation,
+}: StackScreenProps<HomeStackParams, 'Home'>) => {
   return (
     <SafeAreaView>
-      <CustomHeader
-        onSearch={() => {}}
-      />
+      <CustomHeader onSearch={() => {}} />
       <Text>홈</Text>
+      <TouchableOpacity onPress={() => navigation.navigate('DetailPage', {})}>
+        <Text>상품 디테일</Text>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={() => navigation.navigate('Market')}>
+        <Text>마켓</Text>
+      </TouchableOpacity>
     </SafeAreaView>
-  )
-}
+  );
+};
 
 export default HomeScreen;