#11 feat: add product & service view all options

sdp-tech · Jan 31, 2024 · 18da378 · 18da378
1 parent 4b971e7
commit 18da378
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 37 deletions.
diff --git a/src/assets/common/Pencil.svg b/src/assets/common/Pencil.svg
diff --git a/src/common/BottomButton.tsx b/src/common/BottomButton.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import styled from 'styled-components/native';
 import { Body16M } from '../styles/GlobalText';
-import { PURPLE, GREEN } from '../styles/GlobalColor';
+import { PURPLE, GREEN, PURPLE2 } from '../styles/GlobalColor';
 
 interface BottomButtonProps {
   value: string;
@@ -13,7 +13,7 @@ interface BottomButtonProps {
 const BottomButton = ({ value, pressed, onPress }: BottomButtonProps) => {
   return (
     <ButtonContainer pressed={pressed} onPress={onPress}>
-      <Body16M style={{color: pressed ? PURPLE : 'white'}}>{value}</Body16M>
+      <Body16M style={{color: pressed ? PURPLE2 : PURPLE }}>{value}</Body16M>
     </ButtonContainer>
   )
 }
@@ -24,7 +24,7 @@ const ButtonContainer = styled.TouchableOpacity<{ pressed: boolean }>`
   justify-content: center;
   border-radius: 8px;
   padding: 10px 90px;
-  background-color: ${(props: { pressed: boolean; }) => props.pressed ? GREEN : PURPLE};
+  background-color: ${(props: { pressed: boolean; }) => props.pressed ? PURPLE : GREEN};
 `
 
 export default BottomButton;
diff --git a/src/common/Footer.tsx b/src/common/Footer.tsx
@@ -9,8 +9,8 @@ const Footer = () => {
   const [pressed, setPressed] = useState<boolean>(false);
   return (
     <FooterContainer>
-      <HeartButton like={like} onPress={() => setLike(!like)} blank />
-      <BottomButton value={'견적서 보내기'} pressed={pressed} onPress={() => setPressed(!pressed)} />
+      <HeartButton like={like} onPress={() => {setLike(!like)}} blank />
+      <BottomButton value={'견적서 보내기'} pressed={pressed} onPress={() => {}} />
     </FooterContainer>
   )
 }

diff --git a/src/components/Home/Market/MarketTabView.tsx b/src/components/Home/Market/MarketTabView.tsx
@@ -17,6 +17,7 @@ import Hashtag from '../../../common/Hashtag.tsx';
 import Footer from '../../../common/Footer.tsx';
 
 import Arrow from '../../../assets/common/Arrow.svg';
+import Pencil from '../../../assets/common/Pencil.svg';
 
 const ProfileSection = ({ navigation }: {navigation: any}) => {
   const filter = ['스포티', '영캐주얼', '깔끔']
@@ -25,6 +26,9 @@ const ProfileSection = ({ navigation }: {navigation: any}) => {
       <BackButton onPress={() => navigation.goBack()}>
         <Arrow color={'white'} />
       </BackButton>
+      <EditButton>
+        <Pencil />
+      </EditButton>
       <ImageBackground
         style={{width: '100%', height: 200}}
         imageStyle={{height: 160}}
@@ -113,4 +117,12 @@ const BackButton = styled.TouchableOpacity`
   z-index: 1;
 `
 
+const EditButton = styled.TouchableOpacity`
+  padding: 10px;
+  position: absolute;
+  right: 7px;
+  top: ${statusBarHeight-10}px;
+  z-index: 1;
+`
+
 export default MarketTabView;
diff --git a/src/components/Home/Market/ProductPage.tsx b/src/components/Home/Market/ProductPage.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { Key, useState } from 'react';
 import { View, TouchableOpacity, ScrollView, FlatList, Dimensions } from 'react-native';
 import { Tabs } from 'react-native-collapsible-tab-view';
 import styled from 'styled-components/native';
@@ -12,8 +12,11 @@ import Arrow from '../../../assets/common/Arrow.svg';
 import { BLACK, LIGHTGRAY } from '../../../styles/GlobalColor';
 
 const ProductPage = () => {
+  const [service, setService] = useState<boolean>(false);
+  const [product, setProduct] = useState<boolean>(false);
+
   // 한 줄에 2개씩 상품 아이템 배치
-  const product = [...new Array(6).keys()]
+  const items = [...new Array(6).keys()]
   const splitArrayIntoPairs = (arr: any[], pairSize: number) => {
     return arr.reduce((result, item, index) => {
       if (index % pairSize === 0) {
@@ -23,42 +26,62 @@ const ProductPage = () => {
       return result;
     }, []);
   };
-  const splitProduct = splitArrayIntoPairs(product, 2);
+  const splitItems = splitArrayIntoPairs(items, 2);
 
   return (
     <Tabs.ScrollView>
-      <View>
-        <LabelButton>
+      <View style={{marginBottom: (service || product) ? 60 : 0}}>
+        <LabelButton onPress={() => setService(!service)}>
           <Subtitle18B>리폼러의 서비스</Subtitle18B>
-          <Arrow transform={[{ rotate: '180deg' }]} color={BLACK} />
+          { !service && <Arrow transform={[{ rotate: '180deg' }]} color={BLACK} />}
         </LabelButton>
-        <Carousel
-          data={[...new Array(6).keys()]}
-          renderItem={({item}: any) => {
-            return (
-              <ServiceItem onPress={() => {}} />
-            )
-          }}
-          slider
-        />
+        { service ?
+          <View>
+            {items.map((item, index) => (
+              <ServiceItem key={index} onPress={() => {}} />
+            ))}
+          </View>
+          :
+          <Carousel
+            data={[...new Array(6).keys()]}
+            renderItem={({item}: any) => {
+              return (
+                <ServiceItem onPress={() => {}} />
+              )
+            }}
+            slider
+          />
+        }
         <View style={{height: 1, backgroundColor: LIGHTGRAY, marginTop: 10 }} />
-        <LabelButton>
+        <LabelButton onPress={() => setProduct(!product)}>
           <Subtitle18B>리폼러의 판매상품</Subtitle18B>
-          <Arrow transform={[{ rotate: '180deg' }]} color={BLACK} />
+          { !product && <Arrow transform={[{ rotate: '180deg' }]} color={BLACK} />}
         </LabelButton>
-        <Carousel
-          data={splitProduct}
-          renderItem={({item}: any) => {
-            return (
-              <View style={{ flexDirection: 'row' }}>
-                {item.map((subItem: any) => (
-                  <ProductItem key={subItem.id} onPress={() => {}} />
+        { product ?
+          <View>
+            {splitItems.map((row: any[], rowIndex: number) => (
+              <View key={rowIndex} style={{flexDirection: 'row'}}>
+                {row.map((item, columnIndex) => (
+                  <ProductItem key={columnIndex} onPress={() => {}} />
                 ))}
               </View>
-            )
-          }}
-          dot
-        />
+            ))}
+          </View>
+          :
+          <Carousel
+            data={splitItems}
+            renderItem={({item}: any) => {
+              return (
+                <View style={{ flexDirection: 'row' }}>
+                  {item.map((subItem: any) => (
+                    <ProductItem key={subItem.id} onPress={() => {}} />
+                  ))}
+                </View>
+              )
+            }}
+            slider
+          />
+        }
       </View>
     </Tabs.ScrollView>
   )

diff --git a/src/components/Home/components/ReviewItem.tsx b/src/components/Home/components/ReviewItem.tsx
@@ -12,7 +12,7 @@ interface ReviewItemProps {
 
 const ReviewItem = ({ onPress }: ReviewItemProps) => {
   // 한 줄에 2개씩 아이템 배치
-  const product = [...new Array(6).keys()]
+  const items = [...new Array(6).keys()]
   const splitArrayIntoPairs = (arr: any[], pairSize: number) => {
     return arr.reduce((result, item, index) => {
       if (index % pairSize === 0) {
@@ -22,7 +22,7 @@ const ReviewItem = ({ onPress }: ReviewItemProps) => {
       return result;
     }, []);
   };
-  const splitProduct = splitArrayIntoPairs(product, 2);
+  const splitItems = splitArrayIntoPairs(items, 2);
   return (
     <View style={{ borderBottomWidth: 1, borderBottomColor: LIGHTGRAY }}>
       <ItemContainer style={{marginVertical: 10}}>
@@ -36,7 +36,7 @@ const ReviewItem = ({ onPress }: ReviewItemProps) => {
         </View>
       </ItemContainer>
       <Carousel
-        data={splitProduct}
+        data={splitItems}
         renderItem={({item}: any) => {
           return (
             <View style={{ flexDirection: 'row' }}>

diff --git a/src/components/Home/components/ServiceItem.tsx b/src/components/Home/components/ServiceItem.tsx
@@ -13,7 +13,7 @@ interface ServiceItemProps {
 const ServiceItem = ({ onPress }: ServiceItemProps) => {
   const [like, setLike] = useState<boolean>(false);
   return (
-    <TouchableOpacity style={{paddingHorizontal: 20, paddingVertical: 10}} onPress={onPress}>
+    <TouchableOpacity style={{paddingHorizontal: 20, paddingBottom: 10}} onPress={onPress}>
       <ImageBackground
         style={{width: '100%', height: 180, justifyContent: 'flex-end', alignItems: 'flex-end'}}
         source={{uri: 'https://image.made-in-china.com/2f0j00efRbSJMtHgqG/Denim-Bag-Youth-Fashion-Casual-Small-Mini-Square-Ladies-Shoulder-Bag-Women-Wash-Bags.webp'}}