From 6cb396378c8d3adc93d761b0f22f33d3cd4e9057 Mon Sep 17 00:00:00 2001
From: eujin-shin <eujinshin0124@gmail.com>
Date: Sat, 6 Jul 2024 15:50:58 +0900
Subject: [PATCH] #77 feat: add lookbook addButton component

---
 src/assets/lookbook/plusSquare.svg            |  3 ++
 src/components/Lookbook/LookbookAddButton.tsx | 29 +++++++++++++++++++
 src/pages/ComponentsTest.tsx                  |  2 ++
 3 files changed, 34 insertions(+)
 create mode 100644 src/assets/lookbook/plusSquare.svg
 create mode 100644 src/components/Lookbook/LookbookAddButton.tsx

diff --git a/src/assets/lookbook/plusSquare.svg b/src/assets/lookbook/plusSquare.svg
new file mode 100644
index 0000000..e97aec4
--- /dev/null
+++ b/src/assets/lookbook/plusSquare.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 9.33333V18.6667M9.33333 14H18.6667M9.1 24.5H18.9C20.8602 24.5 21.8403 24.5 22.589 24.1185C23.2475 23.783 23.783 23.2475 24.1185 22.589C24.5 21.8403 24.5 20.8602 24.5 18.9V9.1C24.5 7.13982 24.5 6.15972 24.1185 5.41103C23.783 4.75247 23.2475 4.21703 22.589 3.88148C21.8403 3.5 20.8602 3.5 18.9 3.5H9.1C7.13982 3.5 6.15972 3.5 5.41103 3.88148C4.75247 4.21703 4.21703 4.75247 3.88148 5.41103C3.5 6.15972 3.5 7.13982 3.5 9.1V18.9C3.5 20.8602 3.5 21.8403 3.88148 22.589C4.21703 23.2475 4.75247 23.783 5.41103 24.1185C6.15972 24.5 7.13982 24.5 9.1 24.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/Lookbook/LookbookAddButton.tsx b/src/components/Lookbook/LookbookAddButton.tsx
new file mode 100644
index 0000000..97b8756
--- /dev/null
+++ b/src/components/Lookbook/LookbookAddButton.tsx
@@ -0,0 +1,29 @@
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import PlusSquare from '../../assets/lookbook/plusSquare.svg';
+import { Container } from 'react-native-collapsible-tab-view';
+
+const LookbookAddButton = ({ onPress }: { onPress: () => void }) => {
+  return (
+    <View>
+      <TouchableOpacity onPress={onPress}>
+        <View style={Styles.container}>
+          <PlusSquare />
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const Styles = StyleSheet.create({
+  container: {
+    width: 54,
+    height: 54,
+    backgroundColor: 'black',
+    borderRadius: 100,
+    alignItems: 'center',
+    justifyContent: 'center',
+    margin: 5,
+  },
+});
+
+export default LookbookAddButton;
diff --git a/src/pages/ComponentsTest.tsx b/src/pages/ComponentsTest.tsx
index 03cfe82..e18f59c 100644
--- a/src/pages/ComponentsTest.tsx
+++ b/src/pages/ComponentsTest.tsx
@@ -3,6 +3,7 @@ import Dropdown from '../common/Dropdown';
 import { useState } from 'react';
 import { Body16M } from '../styles/GlobalText';
 import LookbookButton from '../components/Lookbook/LookbookButton';
+import LookbookAddButton from '../components/Lookbook/LookbookAddButton';
 
 const TestDropdown = ({ index }: { index: number }) => {
   const [value, setValue] = useState<string | undefined>(undefined);
@@ -26,6 +27,7 @@ export default function ComponentsTest() {
       <View style={{ flex: 1 }}>
         <Body16M>테스트용 페이지</Body16M>
         <LookbookButton />
+        <LookbookAddButton onPress={() => {}} />
       </View>
     </SafeAreaView>
   );