From f7589df420bb05be9ce9c3dced163957e56b2cef Mon Sep 17 00:00:00 2001
From: khw2002 <hannahkhw@snu.ac.kr>
Date: Mon, 30 Sep 2024 16:40:02 +0900
Subject: [PATCH 1/5] #115 feat : add MarketTabView UI

---
 src/components/Home/Market/MarketTabView.tsx | 247 ++++++++++++-------
 1 file changed, 159 insertions(+), 88 deletions(-)

diff --git a/src/components/Home/Market/MarketTabView.tsx b/src/components/Home/Market/MarketTabView.tsx
index c582330..a43cf61 100644
--- a/src/components/Home/Market/MarketTabView.tsx
+++ b/src/components/Home/Market/MarketTabView.tsx
@@ -1,87 +1,124 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { SafeAreaView, ScrollView, View, FlatList, Text, TouchableOpacity, Image, ImageBackground } from 'react-native';
-import styled from 'styled-components/native';
+import React, { useRef, useState } from 'react';
+import {
+  SafeAreaView,
+  ScrollView,
+  View,
+  FlatList,
+  Text,
+  TouchableOpacity,
+  Image,
+  ImageBackground,
+  StyleSheet,
+} from 'react-native';
 import { Tabs, MaterialTabBar } from 'react-native-collapsible-tab-view';
-import { getStatusBarHeight } from 'react-native-safearea-height';
-import { Title20B, Body14R, Caption11M } from '../../../styles/GlobalText.tsx';
-import { BLACK, BLACK2 } from '../../../styles/GlobalColor.tsx';
+import { Caption11M } from '../../../styles/GlobalText.tsx';
+import { BLACK, BLACK2, PURPLE } from '../../../styles/GlobalColor.tsx';
+import StarIcon from '../../../assets/common/Star.svg';
 
 import { StackScreenProps } from '@react-navigation/stack';
 import { HomeStackParams } from '../../../pages/Home';
 
 import InfoPage from './InfoPage.tsx';
-import ProductPage from './ServicePage.tsx';
 import ReviewPage from './ReviewPage.tsx';
 
-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';
 import ServicePage from './ServicePage.tsx';
-import { CustomBackButton } from '../components/CustomBackButton.tsx';
 import DetailScreenHeader from '../components/DetailScreenHeader.tsx';
-import { useBottomBar } from '../../../../contexts/BottomBarContext.tsx';
-import TextToggle from '../../../common/TextToggle.tsx';
 import ScrollToTopButton from '../../../common/ScrollToTopButtonFlat.tsx';
 import ScrollTopButton from '../../../common/ScrollTopButton.tsx';
-import ReviewComment from '../components/ReviewComment.tsx';
 
 export const ProfileSection = ({ navigation }: { navigation: any }) => {
+  const marketName: string = '이하늘의 마켓';
+  const selfIntroduce: string =
+    '안녕하세요 리폼러 이하늘입니다! 저는 업씨대학교 패션디자인학과에 수석입학했고요 짱짱 천재에요';
+  const rate: number = 4.5; // 평점
+  const reviewNumber: number = 100; // 후기 개수
 
-  const filter = [
-    { id: 1, tag: '스포티' }, { id: 2, tag: '영캐주얼' }, { id: 3, tag: '깔끔' }
-  ]
-  const tagList = filter.map(item => item.tag);
-  const markerName = '이하늘의 마켓';
-  const selfIntroduce = '안녕하세요 리폼러 이하늘입니다! 저는 업씨대학교 패션디자인학과에 수석입학했고요 짱짱 천재에요'
   return (
     <View style={{ alignItems: 'center' }}>
-      <DetailScreenHeader
-        title=''
-        leftButton='CustomBack'
-        onPressLeft={() => { }}
-        rightButton='Edit'
-        onPressRight={() => { }} />
-      <ImageBackground
-        style={{ width: '100%', height: 200 }}
-        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 }} />
-        <Image
-          style={{ alignSelf: 'center', width: 90, height: 90, borderRadius: 180, position: 'absolute', top: 110 }}
-          source={{ uri: 'https://image.made-in-china.com/2f0j00efRbSJMtHgqG/Denim-Bag-Youth-Fashion-Casual-Small-Mini-Square-Ladies-Shoulder-Bag-Women-Wash-Bags.webp' }}
-        />
-      </ImageBackground>
-      <Title20B style={{ marginTop: 8 }}>{markerName}</Title20B>
+      <ProfileHeader
+        marketName={marketName}
+        rate={rate}
+        reviewNumber={reviewNumber}
+      />
       <View style={{ padding: 20, paddingTop: 0, paddingBottom: 0 }}>
-        <TextToggle text={selfIntroduce} />
         {/* 이 밑에거 지우면 이상하게 에러남... 그냥 냅둬도 되는 거라 무시하셔도 됩니다.  */}
         <TouchableOpacity>
           <Caption11M style={{ color: BLACK2, marginLeft: 0 }}></Caption11M>
         </TouchableOpacity>
       </View>
-      <FlatList
-        horizontal
-        scrollEnabled={false}
-        data={tagList}
-        keyExtractor={(index) => index.toString()}
-        renderItem={({ item }) => {
-          return (
-            <ReviewComment value={item} backgroundColor='#612FEF' />
-          )
-        }}
-      />
     </View>
-  )
-}
+  );
+};
 
-const MarketTabView = ({ navigation, route }: StackScreenProps<HomeStackParams, 'Market'>) => {
+const ProfileHeader = ({
+  marketName,
+  rate,
+  reviewNumber,
+}: {
+  marketName: string;
+  rate: number;
+  reviewNumber: number;
+}) => {
+  return (
+    <>
+      <DetailScreenHeader
+        title=""
+        leftButton="CustomBack"
+        onPressLeft={() => {}}
+        rightButton="Edit"
+        onPressRight={() => {}}
+      />
+      <ImageBackground
+        style={{ width: '100%', height: 200 }}
+        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,
+          }}
+        />
+        <Image
+          style={{
+            alignSelf: 'center',
+            width: 90,
+            height: 90,
+            borderRadius: 180,
+            position: 'absolute',
+            top: 110,
+          }}
+          source={{
+            uri: 'https://image.made-in-china.com/2f0j00efRbSJMtHgqG/Denim-Bag-Youth-Fashion-Casual-Small-Mini-Square-Ladies-Shoulder-Bag-Women-Wash-Bags.webp',
+          }}
+        />
+      </ImageBackground>
+      <Text style={TextStyles.marketName}>{marketName}</Text>
+      <View style={styles.profileHeaderRateBox}>
+        <StarIcon color={PURPLE} />
+        <Text style={TextStyles.rate}>{rate}</Text>
+        <Text style={TextStyles.reviewNumber}>({reviewNumber})</Text>
+        <Arrow color={BLACK} style={styles.arrow} />
+        {/* TODO: click event 걸기 */}
+      </View>
+    </>
+  );
+};
 
+const MarketTabView = ({
+  navigation,
+  route,
+}: StackScreenProps<HomeStackParams, 'Market'>) => {
   const [routes] = useState([
     { key: 'info', title: '정보' },
     { key: 'service', title: '서비스' },
-    { key: 'review', title: '리뷰' }
+    { key: 'review', title: '리뷰' },
   ]);
   const flatListRef = useRef<FlatList>(null);
   const scrollRef = useRef<ScrollView | null>(null);
@@ -93,14 +130,14 @@ const MarketTabView = ({ navigation, route }: StackScreenProps<HomeStackParams,
         headerContainerStyle={{
           shadowOpacity: 0,
           borderBottomWidth: 1,
-          borderColor: '#D9D9D9'
+          borderColor: '#D9D9D9',
         }}
         renderTabBar={props => (
           <MaterialTabBar
             {...props}
             indicatorStyle={{
               backgroundColor: '#BDBDBD',
-              height: 2
+              height: 2,
             }}
             style={{
               backgroundColor: 'white',
@@ -108,45 +145,79 @@ const MarketTabView = ({ navigation, route }: StackScreenProps<HomeStackParams,
             labelStyle={{
               color: BLACK,
               fontWeight: '700',
-              fontSize: 16
+              fontSize: 16,
             }}
           />
-        )}
-      >
-        {routes.map(route =>
-        (<Tabs.Tab key={route.key} name={route.title}>
-          {route.key === 'info' && <InfoPage />}
-          {route.key === 'service' &&
-            <View>
-              <ServicePage scrollViewRef={scrollRef} />
-              <ScrollTopButton scrollViewRef={scrollRef} />
-            </View>
-          }
-          {route.key === 'review' &&
-            <View>
-              <ReviewPage flatListRef={flatListRef} />
-              <ScrollToTopButton flatListRef={flatListRef} />
-            </View>}
-        </Tabs.Tab>)
-        )}
+        )}>
+        {routes.map(route => (
+          <Tabs.Tab key={route.key} name={route.title}>
+            {route.key === 'info' && <InfoPage />}
+            {route.key === 'service' && (
+              <View>
+                <ServicePage scrollViewRef={scrollRef} />
+                <ScrollTopButton scrollViewRef={scrollRef} />
+              </View>
+            )}
+            {route.key === 'review' && (
+              <View>
+                <ReviewPage flatListRef={flatListRef} />
+                <ScrollToTopButton flatListRef={flatListRef} />
+              </View>
+            )}
+          </Tabs.Tab>
+        ))}
       </Tabs.Container>
       <Footer />
     </SafeAreaView>
-  )
-}
+  );
+};
 
-const BackButton = styled.TouchableOpacity`
-  padding: 10px;
-  position: absolute;
-  left: 0px;
-  z-index: 1;
-`
+const styles = StyleSheet.create({
+  profileHeaderRateBox: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 4,
+    lineHeight: 24,
+  },
+  star: {
+    width: 12,
+    height: 12,
+  },
+  arrow: {
+    transform: [{ rotate: '180deg' }],
+    paddingHorizontal: 9,
+    paddingVertical: 6,
+    width: 6,
+    height: 12,
+    gap: 8,
+  },
+});
 
-const EditButton = styled.TouchableOpacity`
-  padding: 10px;
-  position: absolute;
-  right: 7px;
-  z-index: 1;
-`
+const TextStyles = StyleSheet.create({
+  marketName: {
+    color: '#000',
+    fontSize: 20,
+    fontFamily: 'Pretendard Variable',
+    fontWeight: '700',
+    lineHeight: 24,
+    textAlign: 'center',
+    marginTop: 8,
+    marginBottom: 4,
+  },
+  rate: {
+    color: '#222',
+    textAlign: 'center',
+    fontFamily: 'Pretendard Variable',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  reviewNumber: {
+    color: '#222',
+    textAlign: 'center',
+    fontFamily: 'Pretendard Variable',
+    fontSize: 16,
+    fontWeight: '400',
+  },
+});
 
-export default MarketTabView;
\ No newline at end of file
+export default MarketTabView;

From 71b00fe7c855770a30a7f9de95bb20c1cd2a078f Mon Sep 17 00:00:00 2001
From: khw2002 <hannahkhw@snu.ac.kr>
Date: Mon, 30 Sep 2024 17:53:55 +0900
Subject: [PATCH 2/5] #115 feat : make InfoPage UI

---
 src/components/Home/Market/InfoPage.tsx | 59 ++++++++++++++++++-------
 1 file changed, 42 insertions(+), 17 deletions(-)

diff --git a/src/components/Home/Market/InfoPage.tsx b/src/components/Home/Market/InfoPage.tsx
index 0651445..f4ece29 100644
--- a/src/components/Home/Market/InfoPage.tsx
+++ b/src/components/Home/Market/InfoPage.tsx
@@ -1,42 +1,67 @@
-import { useState, useEffect } from 'react';
-import { View, SafeAreaView, FlatList, Text } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { Tabs } from 'react-native-collapsible-tab-view';
 import styled from 'styled-components/native';
 import { Body14R, Body16B } from '../../../styles/GlobalText';
 
-
 const InfoPage = () => {
   const data = [
-    { label: '학교/학과', data: '업씨대학교 패션디자인학과'},
-    { label: '실력/경력', data: '한국패션디자인공모전 동상\n업씨패션회사 인턴 6개월'}, 
-    { label: '특수소재', data: '비즈, 퍼'},
-    { label: '주요 활동지역', data: '서울 서대문구'},
-    { label: '포트폴리오', data: ''}
-  ]
+    {
+      label: '소개글',
+      data: '안녕하세요 데님 전문 리폼러 하느리퐁퐁입니다!\n 어쩌구 저쩌구',
+    },
+    { label: '오픈채팅 링크', data: 'https://www.naver.com' },
+    { label: '주요 활동지역', data: '서울 서대문구' },
+    {
+      label: '경력',
+      data: [
+        '업씨대학교 패션디자인학과 졸업',
+        '한국패션디자인공모전 동상',
+        '업씨패션회사 인턴 6개월',
+      ],
+    },
+  ];
 
   return (
     <Tabs.FlatList
       data={data}
-      renderItem={({item}:any) => {
+      renderItem={({ item }: any) => {
         return (
           <InfoSection>
             <Body16B>{item.label}</Body16B>
-            <Body14R style={{textAlign: 'right'}}>{item.data}</Body14R>
+            {item.label === '경력' ? (
+              // item.data가 list인 경우
+              <View style={styles.flexColumn}>
+                {item.data.map((itemData: string, index: number) => (
+                  <Body14R key={index}>{itemData}</Body14R>
+                ))}
+              </View>
+            ) : (
+              <Body14R style={{ textAlign: 'right' }}>{item.data}</Body14R>
+            )}
           </InfoSection>
-        )
+        );
       }}
       keyExtractor={(item, index) => index.toString()}
     />
-  )
-}
+  );
+};
+
+const styles = StyleSheet.create({
+  flexColumn: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-end',
+  },
+});
 
 const InfoSection = styled.View`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  align-items: flex-start;
   padding: 16px;
   border-bottom-width: 1px;
-  border-color: #DFDFDF;
-`
+  border-color: #dfdfdf;
+`;
 
-export default InfoPage;
\ No newline at end of file
+export default InfoPage;

From c5855b25f588439f823b9758882338fae4cf9a2b Mon Sep 17 00:00:00 2001
From: khw2002 <hannahkhw@snu.ac.kr>
Date: Mon, 30 Sep 2024 17:56:51 +0900
Subject: [PATCH 3/5] #115 feat : Profile tab name fix

---
 src/components/Home/Market/InfoPage.tsx      |  1 +
 src/components/Home/Market/MarketTabView.tsx | 11 ++---------
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/components/Home/Market/InfoPage.tsx b/src/components/Home/Market/InfoPage.tsx
index f4ece29..41bd540 100644
--- a/src/components/Home/Market/InfoPage.tsx
+++ b/src/components/Home/Market/InfoPage.tsx
@@ -3,6 +3,7 @@ import { Tabs } from 'react-native-collapsible-tab-view';
 import styled from 'styled-components/native';
 import { Body14R, Body16B } from '../../../styles/GlobalText';
 
+//TODO: ReformerProfilePage로 이름 수정
 const InfoPage = () => {
   const data = [
     {
diff --git a/src/components/Home/Market/MarketTabView.tsx b/src/components/Home/Market/MarketTabView.tsx
index a43cf61..424bddc 100644
--- a/src/components/Home/Market/MarketTabView.tsx
+++ b/src/components/Home/Market/MarketTabView.tsx
@@ -116,9 +116,8 @@ const MarketTabView = ({
   route,
 }: StackScreenProps<HomeStackParams, 'Market'>) => {
   const [routes] = useState([
-    { key: 'info', title: '정보' },
+    { key: 'profile', title: '프로필' },
     { key: 'service', title: '서비스' },
-    { key: 'review', title: '리뷰' },
   ]);
   const flatListRef = useRef<FlatList>(null);
   const scrollRef = useRef<ScrollView | null>(null);
@@ -151,19 +150,13 @@ const MarketTabView = ({
         )}>
         {routes.map(route => (
           <Tabs.Tab key={route.key} name={route.title}>
-            {route.key === 'info' && <InfoPage />}
+            {route.key === 'profile' && <InfoPage />}
             {route.key === 'service' && (
               <View>
                 <ServicePage scrollViewRef={scrollRef} />
                 <ScrollTopButton scrollViewRef={scrollRef} />
               </View>
             )}
-            {route.key === 'review' && (
-              <View>
-                <ReviewPage flatListRef={flatListRef} />
-                <ScrollToTopButton flatListRef={flatListRef} />
-              </View>
-            )}
           </Tabs.Tab>
         ))}
       </Tabs.Container>

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 4/5] #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';

From b760fc519bf1ba038691f345356a946947fc494f Mon Sep 17 00:00:00 2001
From: khw2002 <hannahkhw@snu.ac.kr>
Date: Mon, 30 Sep 2024 20:22:54 +0900
Subject: [PATCH 5/5] #115 feat : update minor design changes

---
 src/components/Home/Market/InfoPage.tsx       |  1 +
 src/components/Home/Market/ServicePage.tsx    | 35 ++++++++++--------
 .../Home/components/ServiceItem.tsx           | 37 +------------------
 3 files changed, 21 insertions(+), 52 deletions(-)

diff --git a/src/components/Home/Market/InfoPage.tsx b/src/components/Home/Market/InfoPage.tsx
index 41bd540..f8c6831 100644
--- a/src/components/Home/Market/InfoPage.tsx
+++ b/src/components/Home/Market/InfoPage.tsx
@@ -25,6 +25,7 @@ const InfoPage = () => {
   return (
     <Tabs.FlatList
       data={data}
+      style={{ marginTop: 12 }}
       renderItem={({ item }: any) => {
         return (
           <InfoSection>
diff --git a/src/components/Home/Market/ServicePage.tsx b/src/components/Home/Market/ServicePage.tsx
index 42c4b8e..58252a2 100644
--- a/src/components/Home/Market/ServicePage.tsx
+++ b/src/components/Home/Market/ServicePage.tsx
@@ -1,14 +1,10 @@
 import { useState } from 'react';
-import { View, ScrollView } from 'react-native';
+import { View, ScrollView, StyleSheet, Text } 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 { LIGHTGRAY } from '../../../styles/GlobalColor';
-
 interface ServicePageProps {
   scrollViewRef: React.RefObject<ScrollView>;
 }
@@ -35,10 +31,8 @@ const ServicePage: React.FC<ServicePageProps> = ({ scrollViewRef }) => {
       style={{ marginBottom: service || product ? 60 : -2000 }}
       bounces={false}
       overScrollMode="never">
-      <View>
-        <LabelButton onPress={() => setService(!service)}>
-          <Subtitle18B>리폼러의 서비스</Subtitle18B>
-        </LabelButton>
+      <View style={styles.container}>
+        <Text style={TextStyles.title}>리폼러의 서비스</Text>
         {service ? (
           <View>
             {items.map((item, index) => (
@@ -47,7 +41,7 @@ const ServicePage: React.FC<ServicePageProps> = ({ scrollViewRef }) => {
           </View>
         ) : (
           <Carousel
-            data={[...new Array(6).keys()]}
+            data={[...new Array(1).keys()]}
             renderItem={({ item, index }: any) => {
               return <ServiceItem onPress={() => {}} key={index} />;
             }}
@@ -60,11 +54,20 @@ const ServicePage: React.FC<ServicePageProps> = ({ scrollViewRef }) => {
   );
 };
 
-const LabelButton = styled.TouchableOpacity`
-  display: flex;
-  flex-direction: row;
-  padding: 4px 16px;
-  margin-top: 12px;
-`;
+const styles = StyleSheet.create({
+  container: {},
+});
+
+const TextStyles = StyleSheet.create({
+  title: {
+    color: '#222',
+    fontFamily: 'Pretendard Variable',
+    fontSize: 18,
+    fontWeight: '700',
+    lineHeight: 24,
+    marginTop: 12,
+    marginHorizontal: 16,
+  },
+});
 
 export default ServicePage;
diff --git a/src/components/Home/components/ServiceItem.tsx b/src/components/Home/components/ServiceItem.tsx
index 3d15daa..be0b27d 100644
--- a/src/components/Home/components/ServiceItem.tsx
+++ b/src/components/Home/components/ServiceItem.tsx
@@ -1,6 +1,5 @@
 import { useState } from 'react';
-import { StyleSheet, View } from 'react-native';
-import styled from 'styled-components/native';
+import { View } from 'react-native';
 
 import ServiceImage2 from '../../../assets/common/ServiceImage2.svg';
 
@@ -27,38 +26,4 @@ const ServiceItem = ({ onPress }: ServiceItemProps) => {
   );
 };
 
-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;