From e3fe458271783e85084209d7fce0dca38769ebea Mon Sep 17 00:00:00 2001
From: SJ-Kwak <seojin7@ewhain.net>
Date: Wed, 31 Jan 2024 21:27:24 +0900
Subject: [PATCH] sdp-tech#11 feat: add product & service view all options

---
 src/assets/common/Pencil.svg                  |  3 +
 src/common/BottomButton.tsx                   |  6 +-
 src/common/Footer.tsx                         |  4 +-
 src/components/Home/Market/MarketTabView.tsx  | 12 +++
 src/components/Home/Market/ProductPage.tsx    | 79 ++++++++++++-------
 src/components/Home/components/ReviewItem.tsx |  6 +-
 .../Home/components/ServiceItem.tsx           |  2 +-
 7 files changed, 75 insertions(+), 37 deletions(-)
 create mode 100644 src/assets/common/Pencil.svg

diff --git a/src/assets/common/Pencil.svg b/src/assets/common/Pencil.svg
new file mode 100644
index 0000000..4d77ec7
--- /dev/null
+++ b/src/assets/common/Pencil.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M18 2L22 6M2 22L3.2764 17.3199C3.35968 17.0145 3.40131 16.8619 3.46523 16.7195C3.52199 16.5931 3.59172 16.4729 3.67332 16.3609C3.76521 16.2348 3.87711 16.1229 4.1009 15.8991L14.4343 5.56569C14.6323 5.36768 14.7313 5.26867 14.8455 5.23158C14.9459 5.19895 15.0541 5.19895 15.1545 5.23158C15.2687 5.26867 15.3677 5.36768 15.5657 5.56569L18.4343 8.43431C18.6323 8.63232 18.7313 8.73133 18.7684 8.84549C18.8011 8.94591 18.8011 9.05409 18.7684 9.15451C18.7313 9.26867 18.6323 9.36768 18.4343 9.56569L8.1009 19.8991C7.87711 20.1229 7.76521 20.2348 7.63908 20.3267C7.52709 20.4083 7.40692 20.478 7.28052 20.5348C7.13815 20.5987 6.98548 20.6403 6.68014 20.7236L2 22Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/common/BottomButton.tsx b/src/common/BottomButton.tsx
index 585f801..fcb14b1 100644
--- 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;
\ No newline at end of file
diff --git a/src/common/Footer.tsx b/src/common/Footer.tsx
index ab46de3..45aa1ec 100644
--- 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
index 0f1956f..6c397c8 100644
--- 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;
\ No newline at end of file
diff --git a/src/components/Home/Market/ProductPage.tsx b/src/components/Home/Market/ProductPage.tsx
index 2d7e747..f60a9f3 100644
--- 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
index 3dd6146..8d3044b 100644
--- 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
index 3e025fe..74de178 100644
--- 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'}}