sdp-tech#11 feat: add heart, footer, bottom button component

src/common/BottomButton.tsx

@@ -0,0 +1,30 @@
+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';
+
+interface BottomButtonParams {
+  value: string;
+  pressed: boolean;
+  onPress: () => void;
+}
+
+const BottomButton = ({ value, pressed, onPress }: BottomButtonParams) => {
+  return (
+    <ButtonContainer pressed={pressed} onPress={onPress}>
+      <Body16M style={{color: pressed ? PURPLE : 'white'}}>{value}</Body16M>
+    </ButtonContainer>
+  )
+}
+
+const ButtonContainer = styled.TouchableOpacity<{ pressed: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  padding: 10px 90px;
+  background-color: ${(props: { pressed: boolean; }) => props.pressed ? GREEN : PURPLE};
+`
+
+export default BottomButton;

src/common/Footer.tsx

@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import styled from 'styled-components/native';
+import HeartButton from './HeartButton';
+import BottomButton from './BottomButton';
+
+const Footer = () => {
+  // API 연결 전, 인터랙션만
+  const [like, setLike] = useState<boolean>(false);
+  const [pressed, setPressed] = useState<boolean>(false);
+  return (
+    <FooterContainer>
+      <HeartButton like={like} onPress={() => setLike(!like)} />
+      <BottomButton value={'견적서 보내기'} pressed={pressed} onPress={() => setPressed(!pressed)} />
+    </FooterContainer>
+  )
+}
+
+const FooterContainer = styled.View`
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  background-color: white;
+  padding: 5px 15px;
+`
+
+export default Footer;

src/common/Hashtag.tsx

@@ -7,12 +7,13 @@ import { PURPLE } from '../styles/GlobalColor';
 interface HashtagParams {
   value: string;
   pressable?: boolean;
+  pressed?: boolean;
+  onPress?: () => void;
 }
 
-const Hashtag = ({value, pressable} : HashtagParams) => {
-  const [pressed, setPressed] = useState<boolean>(false);
+const Hashtag = ({value, pressable, pressed, onPress} : HashtagParams) => {
   return (
-    <HashtagContainer pressed={pressed} onPress={() => setPressed(!pressed)} disabled={!pressable}>
+    <HashtagContainer pressed={pressed} onPress={onPress} disabled={!pressable}>
       <Filter14M style={{color: pressed ? PURPLE : 'white'}}>{value}</Filter14M>
     </HashtagContainer>
   )

src/common/HeartButton.tsx

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

src/components/Home/Market/MarketTabView.tsx

@@ -1,14 +1,15 @@
 import { useState } from 'react';
-import { SafeAreaView, ScrollView, View, Text, TouchableOpacity, useWindowDimensions } from 'react-native';
+import { SafeAreaView, ScrollView, View, FlatList, Text, TouchableOpacity, useWindowDimensions } from 'react-native';
 import styled from 'styled-components/native';
 import { TabView, TabBar, SceneMap } from "react-native-tab-view";
 import { Title20B, Body14R, Caption11M } from '../../../styles/GlobalText.tsx';
 
 import { StackScreenProps } from '@react-navigation/stack';
 import { HomeStackParams } from '../../../pages/Home';
 
+import Footer from '../../../common/Footer.tsx';
+
 import LeftArrow from '../../../assets/common/LeftArrow.svg';
-import { FlatList } from 'react-native-gesture-handler';
 import Hashtag from '../../../common/Hashtag.tsx';
 
 const ProfileSection = () => {
@@ -113,6 +114,7 @@ const MarketTabView = ({ navigation, route } : StackScreenProps<HomeStackParams,
           />
         )}
       />
+      <Footer />
     </SafeAreaView>
   )
 }