sdp-tech#11 feat: add product & service item

src/common/BottomButton.tsx

@@ -4,13 +4,13 @@ import styled from 'styled-components/native';
 import { Body16M } from '../styles/GlobalText';
 import { PURPLE, GREEN } from '../styles/GlobalColor';
 
-interface BottomButtonParams {
+interface BottomButtonProps {
   value: string;
   pressed: boolean;
   onPress: () => void;
 }
 
-const BottomButton = ({ value, pressed, onPress }: BottomButtonParams) => {
+const BottomButton = ({ value, pressed, onPress }: BottomButtonProps) => {
   return (
     <ButtonContainer pressed={pressed} onPress={onPress}>
       <Body16M style={{color: pressed ? PURPLE : 'white'}}>{value}</Body16M>

src/common/Footer.tsx

@@ -9,7 +9,7 @@ const Footer = () => {
   const [pressed, setPressed] = useState<boolean>(false);
   return (
     <FooterContainer>
-      <HeartButton like={like} onPress={() => setLike(!like)} />
+      <HeartButton like={like} onPress={() => setLike(!like)} blank />
       <BottomButton value={'견적서 보내기'} pressed={pressed} onPress={() => setPressed(!pressed)} />
     </FooterContainer>
   )

src/common/Hashtag.tsx

@@ -4,14 +4,14 @@ import styled from 'styled-components/native';
 import { Filter14M } from '../styles/GlobalText';
 import { PURPLE } from '../styles/GlobalColor';
 
-interface HashtagParams {
+interface HashtagProps {
   value: string;
   pressable?: boolean;
   pressed?: boolean;
   onPress?: () => void;
 }
 
-const Hashtag = ({value, pressable, pressed, onPress} : HashtagParams) => {
+const Hashtag = ({value, pressable, pressed, onPress} : HashtagProps) => {
   return (
     <HashtagContainer pressed={pressed} onPress={onPress} disabled={!pressable}>
       <Filter14M style={{color: pressed ? PURPLE : 'white'}}>{value}</Filter14M>

src/common/HeartButton.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
 import { TouchableOpacity } from 'react-native';
 import Heart from '../assets/common/Heart.svg';
-import { PURPLE } from '../styles/GlobalColor';
+import { PURPLE, PURPLE2, PURPLE3 } from '../styles/GlobalColor';
 
 interface HeartProps {
   like: boolean;
   onPress: () => void;
+  blank?: boolean;
 }
 
-const HeartButton = ({ like, onPress }: HeartProps) => {
+const HeartButton = ({ like, onPress, blank }: HeartProps) => {
   return (
-    <TouchableOpacity onPress={onPress} style={{display:'flex', alignItems:'center'}}>
-      <Heart color={like ? '#FF0000' : PURPLE} fill={like ? '#FF0000' : 'none'} />
+    <TouchableOpacity onPress={onPress} style={{display:'flex', alignItems:'center', padding: 5}}>
+      <Heart color={blank || like ? PURPLE : PURPLE2} fill={like ? PURPLE : blank ? 'none': PURPLE3} />
     </TouchableOpacity>
   )
 }

src/common/ThumbnailHashtag.tsx

@@ -0,0 +1,26 @@
+import styled from 'styled-components/native';
+import { PURPLE3 } from '../styles/GlobalColor';
+import { Caption11M } from '../styles/GlobalText';
+
+interface ThumbnailHashtagProps {
+  value: string;
+}
+
+const ThumbnailHashtag = ({ value }: ThumbnailHashtagProps) => {
+  return (
+    <Container>
+      <Caption11M>{value}</Caption11M>
+    </Container>
+  )
+}
+
+const Container = styled.View`
+  display: flex;
+  padding: 4px 8px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  background: ${PURPLE3};
+`
+
+export default ThumbnailHashtag;

src/components/Home/Market/MarketTabView.tsx

@@ -8,9 +8,10 @@ import { StackScreenProps } from '@react-navigation/stack';
 import { HomeStackParams } from '../../../pages/Home';
 
 import InfoPage from './InfoPage.tsx';
+import ProductPage from './ProductPage.tsx';
 import Footer from '../../../common/Footer.tsx';
 
-import LeftArrow from '../../../assets/common/LeftArrow.svg';
+import Arrow from '../../../assets/common/Arrow.svg';
 import Hashtag from '../../../common/Hashtag.tsx';
 
 const ProfileSection = () => {
@@ -39,14 +40,6 @@ const ProfileSection = () => {
   )
 }
 
-const ProductPage = () => {
-  return (
-    <View>
-      <Text>상품</Text>
-    </View>
-  )
-}
-
 const ReviewPage = () => {
   return (
     <View>
@@ -78,7 +71,7 @@ const MarketTabView = ({ navigation, route } : StackScreenProps<HomeStackParams,
   return (
     <SafeAreaView style={{flex: 1}}>
       <BackButton onPress={() => navigation.goBack()}>
-        <LeftArrow />
+        <Arrow />
       </BackButton>
       <ProfileSection />
       <TabView

src/components/Home/components/ProductItem.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import { View, TouchableOpacity, ImageBackground } from 'react-native';
+import styled from 'styled-components/native';
+
+import HeartButton from '../../../common/HeartButton';
+import { Body14R, Body16M } from '../../../styles/GlobalText';
+import ThumbnailHashtag from '../../../common/ThumbnailHashtag';
+
+interface ProductItemProps {
+  onPress: () => void;
+}
+
+const ProductItem = ({ onPress }: ProductItemProps) => {
+  const [like, setLike] = useState<boolean>(false);
+  return (
+    <TouchableOpacity style={{paddingHorizontal: 20, paddingVertical: 5, width: '50%'}} onPress={onPress}>
+      <ImageBackground
+        style={{width: '100%', height: 170, justifyContent: 'flex-end', alignItems: 'flex-end'}}
+        source={{uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSuOFPZloY83xIUAOR_4ADrZzBhXt7UZH7qJA&usqp=CAU'}}
+      >
+        <HeartButton like={like} onPress={() => setLike(!like)} />
+      </ImageBackground>
+      <Body14R>청바지 에코백</Body14R>
+      <TextContainer>
+        <Body16M>25,000</Body16M>
+        <ThumbnailHashtag value={'빈티지'} />
+      </TextContainer>
+    </TouchableOpacity>
+  )
+}
+
+const TextContainer = styled.View`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-vertical: 5px;
+`
+
+export default ProductItem;

src/components/Home/components/ServiceItem.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import { View, TouchableOpacity, ImageBackground } 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';
+
+interface ServiceItemProps {
+  onPress: () => void;
+}
+
+const ServiceItem = ({ onPress }: ServiceItemProps) => {
+  const [like, setLike] = useState<boolean>(false);
+  return (
+    <TouchableOpacity style={{paddingHorizontal: 20, paddingVertical: 5}} 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>
+  )
+}
+
+const TitleContainer = styled.View`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-vertical: 5px;
+`
+
+export default ServiceItem;

src/styles/GlobalColor.tsx

@@ -1,4 +1,6 @@
 export const PURPLE = '#612FEF';
+export const PURPLE2 = '#CEBFFA';
+export const PURPLE3 = '#E7E0FD';
 export const GREEN = '#DBFC72';
 export const BLACK = '#222222';
 export const BLACK2 = '#929292';