From 93fab2a6caf2afb600aa6cf2be6b69364a9d01a6 Mon Sep 17 00:00:00 2001
From: SJ-Kwak <seojin7@ewhain.net>
Date: Sat, 27 Jan 2024 15:39:54 +0900
Subject: [PATCH] sdp-tech#11 feat: add heart, footer, bottom button component

---
 src/assets/common/Heart.svg                  |  3 ++
 src/common/BottomButton.tsx                  | 30 +++++++++++++++++++
 src/common/Footer.tsx                        | 31 ++++++++++++++++++++
 src/common/Hashtag.tsx                       |  7 +++--
 src/common/HeartButton.tsx                   | 19 ++++++++++++
 src/components/Home/Market/MarketTabView.tsx |  6 ++--
 6 files changed, 91 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/common/Heart.svg
 create mode 100644 src/common/BottomButton.tsx
 create mode 100644 src/common/Footer.tsx
 create mode 100644 src/common/HeartButton.tsx

diff --git a/src/assets/common/Heart.svg b/src/assets/common/Heart.svg
new file mode 100644
index 0000000..7bbebef
--- /dev/null
+++ b/src/assets/common/Heart.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9932 5.13581C9.9938 2.7984 6.65975 2.16964 4.15469 4.31001C1.64964 6.45038 1.29697 10.029 3.2642 12.5604C4.89982 14.6651 9.84977 19.1041 11.4721 20.5408C11.6536 20.7016 11.7444 20.7819 11.8502 20.8135C11.9426 20.8411 12.0437 20.8411 12.1361 20.8135C12.2419 20.7819 12.3327 20.7016 12.5142 20.5408C14.1365 19.1041 19.0865 14.6651 20.7221 12.5604C22.6893 10.029 22.3797 6.42787 19.8316 4.31001C17.2835 2.19216 13.9925 2.7984 11.9932 5.13581Z" stroke="currentColor" 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
new file mode 100644
index 0000000..ca86198
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/common/Footer.tsx b/src/common/Footer.tsx
new file mode 100644
index 0000000..b3cbc9f
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/common/Hashtag.tsx b/src/common/Hashtag.tsx
index f7b2643..1c53dd3 100644
--- a/src/common/Hashtag.tsx
+++ b/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>
   )
diff --git a/src/common/HeartButton.tsx b/src/common/HeartButton.tsx
new file mode 100644
index 0000000..682c082
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/components/Home/Market/MarketTabView.tsx b/src/components/Home/Market/MarketTabView.tsx
index 380ef0c..5623119 100644
--- a/src/components/Home/Market/MarketTabView.tsx
+++ b/src/components/Home/Market/MarketTabView.tsx
@@ -1,5 +1,5 @@
 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';
@@ -7,8 +7,9 @@ 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>
   )
 }