From 1e235804d46efc95462862c9aa5f7f91691aeecb Mon Sep 17 00:00:00 2001
From: khw2002 <hannahkhw@snu.ac.kr>
Date: Mon, 30 Sep 2024 18:31:41 +0900
Subject: [PATCH] #115 feat : add Service section of Reformer Profile Page

---
 src/common/HeartButton.tsx                    | 22 ++++--
 src/components/Home/Market/MarketTabView.tsx  |  2 -
 src/components/Home/Market/Service.tsx        |  5 +-
 src/components/Home/Market/ServicePage.tsx    | 44 ++++++------
 .../Home/components/ServiceItem.tsx           | 67 +++++++++++++------
 src/pages/Home.tsx                            |  3 +
 6 files changed, 88 insertions(+), 55 deletions(-)

diff --git a/src/common/HeartButton.tsx b/src/common/HeartButton.tsx
index fdbc1bd..cb28ea9 100644
--- a/src/common/HeartButton.tsx
+++ b/src/common/HeartButton.tsx
@@ -11,10 +11,22 @@ interface HeartProps {
 
 const HeartButton = ({ like, onPress, blank }: HeartProps) => {
   return (
-    <TouchableOpacity onPress={onPress} style={{ display: 'flex', alignItems: 'center', padding: 5 }}>
-      <Heart color={blank || like ? PURPLE : PURPLE2} fill={like ? PURPLE : blank ? 'none' : PURPLE3} />
+    <TouchableOpacity
+      onPress={onPress}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        padding: 5,
+        justifyContent: 'center',
+        width: 24,
+        height: 24,
+      }}>
+      <Heart
+        color={blank || like ? PURPLE : PURPLE2}
+        fill={like ? PURPLE : blank ? 'none' : PURPLE3}
+      />
     </TouchableOpacity>
-  )
-}
+  );
+};
 
-export default HeartButton;
\ No newline at end of file
+export default HeartButton;
diff --git a/src/components/Home/Market/MarketTabView.tsx b/src/components/Home/Market/MarketTabView.tsx
index 424bddc..08d658e 100644
--- a/src/components/Home/Market/MarketTabView.tsx
+++ b/src/components/Home/Market/MarketTabView.tsx
@@ -19,14 +19,12 @@ import { StackScreenProps } from '@react-navigation/stack';
 import { HomeStackParams } from '../../../pages/Home';
 
 import InfoPage from './InfoPage.tsx';
-import ReviewPage from './ReviewPage.tsx';
 
 import Footer from '../../../common/Footer.tsx';
 
 import Arrow from '../../../assets/common/Arrow.svg';
 import ServicePage from './ServicePage.tsx';
 import DetailScreenHeader from '../components/DetailScreenHeader.tsx';
-import ScrollToTopButton from '../../../common/ScrollToTopButtonFlat.tsx';
 import ScrollTopButton from '../../../common/ScrollTopButton.tsx';
 
 export const ProfileSection = ({ navigation }: { navigation: any }) => {
diff --git a/src/components/Home/Market/Service.tsx b/src/components/Home/Market/Service.tsx
index 2bf19ad..400ab02 100644
--- a/src/components/Home/Market/Service.tsx
+++ b/src/components/Home/Market/Service.tsx
@@ -17,8 +17,7 @@ import {
   Subtitle18B,
   Body14R,
 } from '../../../styles/GlobalText';
-import { BLACK, LIGHTGRAY, PURPLE } from '../../../styles/GlobalColor';
-import Arrow from '../../../assets/common/Arrow.svg';
+import { BLACK, LIGHTGRAY } from '../../../styles/GlobalColor';
 import { getStatusBarHeight } from 'react-native-safearea-height';
 import HeartButton from '../../../common/HeartButton';
 import CategoryDownButton from '../../../assets/common/CategoryDownButton.svg';
@@ -105,7 +104,7 @@ const ServiceMarket = (/*{ navigation }*/) => {
   );
 };
 
-const ServiceCard = ({
+export const ServiceCard = ({
   name,
   price,
   tag,
diff --git a/src/components/Home/Market/ServicePage.tsx b/src/components/Home/Market/ServicePage.tsx
index 45d87d5..42c4b8e 100644
--- a/src/components/Home/Market/ServicePage.tsx
+++ b/src/components/Home/Market/ServicePage.tsx
@@ -1,15 +1,13 @@
-import {Key, useState } from 'react';
-import { View, TouchableOpacity, ScrollView, FlatList, Dimensions } from 'react-native';
+import { useState } from 'react';
+import { View, ScrollView } from 'react-native';
 import { Tabs } from 'react-native-collapsible-tab-view';
 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 { BLACK, LIGHTGRAY } from '../../../styles/GlobalColor';
+import { LIGHTGRAY } from '../../../styles/GlobalColor';
 
 interface ServicePageProps {
   scrollViewRef: React.RefObject<ScrollView>;
@@ -20,7 +18,7 @@ const ServicePage: React.FC<ServicePageProps> = ({ scrollViewRef }) => {
   const [product, setProduct] = useState<boolean>(false);
 
   // 한 줄에 2개씩 상품 아이템 배치
-  const items = [...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) {
@@ -30,45 +28,43 @@ const ServicePage: React.FC<ServicePageProps> = ({ scrollViewRef }) => {
       return result;
     }, []);
   };
-  const splitItems = splitArrayIntoPairs(items, 2);
 
   return (
     <Tabs.ScrollView
       ref={scrollViewRef}
-      style={{ marginBottom: (service || product) ? 60 : -2000 }}
-      bounces={false} overScrollMode="never">
-      <View >
+      style={{ marginBottom: service || product ? 60 : -2000 }}
+      bounces={false}
+      overScrollMode="never">
+      <View>
         <LabelButton onPress={() => setService(!service)}>
           <Subtitle18B>리폼러의 서비스</Subtitle18B>
-          {!service && <Arrow transform={[{ rotate: '180deg' }]} color={BLACK} />}
         </LabelButton>
-        {service ?
+        {service ? (
           <View>
             {items.map((item, index) => (
-              <ServiceItem key={index} onPress={() => { }} />
+              <ServiceItem key={index} onPress={() => {}} />
             ))}
           </View>
-          :
+        ) : (
           <Carousel
             data={[...new Array(6).keys()]}
             renderItem={({ item, index }: any) => {
-              return (
-                <ServiceItem onPress={() => { }} key={index} />
-              )
+              return <ServiceItem onPress={() => {}} key={index} />;
             }}
             slider
           />
-        }
-        <View style={{ height: 1, backgroundColor: LIGHTGRAY, marginTop: 10 }} />
+        )}
+        <View style={{ paddingBottom: 100 }} />
       </View>
     </Tabs.ScrollView>
-  )
-}
+  );
+};
 
 const LabelButton = styled.TouchableOpacity`
   display: flex;
   flex-direction: row;
-  padding: 16px;
-`
+  padding: 4px 16px;
+  margin-top: 12px;
+`;
 
-export default ServicePage;
\ No newline at end of file
+export default ServicePage;
diff --git a/src/components/Home/components/ServiceItem.tsx b/src/components/Home/components/ServiceItem.tsx
index 74de178..3d15daa 100644
--- a/src/components/Home/components/ServiceItem.tsx
+++ b/src/components/Home/components/ServiceItem.tsx
@@ -1,10 +1,10 @@
 import { useState } from 'react';
-import { View, TouchableOpacity, ImageBackground } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import styled from 'styled-components/native';
 
-import HeartButton from '../../../common/HeartButton';
-import { Body16B, Caption12M, Subtitle16B } from '../../../styles/GlobalText';
-import { BLACK2 } from '../../../styles/GlobalColor';
+import ServiceImage2 from '../../../assets/common/ServiceImage2.svg';
+
+import { ServiceCard } from '../Market/Service';
 
 interface ServiceItemProps {
   onPress: () => void;
@@ -13,27 +13,52 @@ interface ServiceItemProps {
 const ServiceItem = ({ onPress }: ServiceItemProps) => {
   const [like, setLike] = useState<boolean>(false);
   return (
-    <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'}}
-      >
-        <HeartButton like={like} onPress={() => setLike(!like)} />
-      </ImageBackground>
-      <TitleContainer>
-        <Subtitle16B>청바지 에코백 서비스</Subtitle16B>
-        <Body16B style={{color: BLACK2}}>20000원 ~</Body16B>
-      </TitleContainer>
-      <Caption12M style={{color: BLACK2}}>안입는 청바지를 활용한 나만의 에코백! 아주 좋은 에코백 환경에도 좋고 나에게도 좋고 어쩌구저쩌구한 에코백입니다 최고임 짱짱</Caption12M>
-    </TouchableOpacity>
-  )
-}
+    <>
+      <ServiceCard
+        name="똥구르리리"
+        price="20,000원 ~ "
+        tag="미니멀"
+        image={ServiceImage2}
+        title="커스텀 짐색"
+        text="안입는 청바지를 활용한 나만의 에코백! 아주 좋은 에코백 환경에도 좋고 나에게도 좋고 어찌구저찌구한 에코백입니다 최고임 짱짱"
+      />
+      <View style={{ paddingBottom: 100 }} />
+    </>
+  );
+};
 
 const TitleContainer = styled.View`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   padding-vertical: 5px;
-`
+`;
+
+const TextStyles = StyleSheet.create({
+  title: {
+    color: '#222',
+    fontFamily: 'Pretendard Variable',
+    fontSize: 18,
+    fontWeight: '700',
+    lineHeight: 24,
+  },
+  detail: {
+    color: '#222',
+    fontFamily: 'Pretendard Variable',
+    fontSize: 14,
+    fontWeight: '400',
+    lineHeight: 24,
+  },
+  price: {
+    color: '#fff',
+    textAlign: 'right',
+    fontFamily: 'Pretendard Variable',
+    fontSize: 18,
+    fontWeight: '700',
+    lineHeight: 24,
+    marginRight: 11,
+    marginBottom: 13,
+  },
+});
 
-export default ServiceItem;
\ No newline at end of file
+export default ServiceItem;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 2782095..a9fd353 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -59,6 +59,9 @@ import Footer from '../common/Footer';
 import { BLACK, White } from '../styles/GlobalColor';
 import InfoPage from '../components/Home/Market/InfoPage';
 import OrderPage from './OrderPage';
+// import OrderPage from '../components/Home/Order/OrderPage';
+// FIXME: OrderPage가 존재하지 않는 관계로 임시 주석 처리
+import OrderManagement from '../components/Home/Order/OrderManagement';
 import ReformerMarket from '../components/Home/Market/ReformerMarket';
 import Service from '../components/Home/Market/Service';
 import { PhotoType } from '../hooks/useImagePicker';