#77 feat: add lookbook base components (#92)

* #77 feat: add lookbook button component

* #77 feat: add lookbook addButton component

* #77 feat: add toggle component

* fix: set patch package to solve deprecated prop types error

src/common/Toggle.tsx

@@ -0,0 +1,75 @@
+import { Dispatch, SetStateAction, useEffect, useRef } from 'react';
+import {
+  Animated,
+  StyleSheet,
+  Touchable,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import { PURPLE, PURPLE2 } from '../styles/GlobalColor';
+
+const Toggle = ({
+  isOn,
+  setIsOn,
+}: {
+  isOn: boolean;
+  setIsOn: Dispatch<SetStateAction<boolean>>;
+}) => {
+  const X_COORD_OFF = 0;
+  const X_COORD_ON = 24;
+  const ANIMATION_DURATION = 500;
+
+  const animationXTrans = useRef(new Animated.Value(0)).current;
+
+  const handlePress = () => {
+    setIsOn(prev => !prev);
+  };
+
+  useEffect(() => {
+    console.log('animation on');
+    Animated.timing(animationXTrans, {
+      toValue: isOn ? X_COORD_ON : X_COORD_OFF,
+      duration: ANIMATION_DURATION,
+      useNativeDriver: true,
+    }).start();
+  }, [animationXTrans, isOn]);
+
+  return (
+    <View>
+      <TouchableWithoutFeedback onPress={handlePress}>
+        <View
+          style={{
+            backgroundColor: isOn ? PURPLE : PURPLE2,
+            ...Styles.container,
+          }}>
+          <Animated.View
+            style={{
+              transform: [{ translateX: animationXTrans }],
+              ...Styles.button,
+            }}
+          />
+        </View>
+      </TouchableWithoutFeedback>
+    </View>
+  );
+};
+
+const Styles = StyleSheet.create({
+  container: {
+    width: 50,
+    height: 26,
+    borderRadius: 100,
+    margin: 5,
+    justifyContent: 'center',
+    paddingHorizontal: 3,
+  },
+  button: {
+    width: 20,
+    height: 20,
+    borderRadius: 100,
+    backgroundColor: 'white',
+  },
+});
+
+export default Toggle;

src/components/Lookbook/LookbookAddButton.tsx

@@ -0,0 +1,28 @@
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import PlusSquare from '../../assets/lookbook/plusSquare.svg';
+
+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;

src/components/Lookbook/LookbookButton.tsx

@@ -0,0 +1,27 @@
+import { StyleSheet, View, ViewStyle } from 'react-native';
+import { GREEN, PURPLE } from '../../styles/GlobalColor';
+import { Upcymall12M } from '../../styles/GlobalText';
+
+const LookbookButton = ({ positioning }: { positioning?: ViewStyle }) => {
+  return (
+    <View style={{ ...positioning }}>
+      <View style={Styles.container}>
+        <Upcymall12M style={{ color: GREEN }}>UPCYMALL</Upcymall12M>
+      </View>
+    </View>
+  );
+};
+
+const Styles = StyleSheet.create({
+  container: {
+    backgroundColor: PURPLE,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 5,
+    width: 'auto',
+    alignSelf: 'flex-start',
+    margin: 5,
+  },
+});
+
+export default LookbookButton;

src/pages/ComponentsTest.tsx

@@ -1,7 +1,11 @@
 import { SafeAreaView, TouchableOpacity, View } from 'react-native';
 import Dropdown from '../common/Dropdown';
 import { useState } from 'react';
-import { Body16M } from '../styles/GlobalText';
+import { Body16M, Title20B } from '../styles/GlobalText';
+import LookbookButton from '../components/Lookbook/LookbookButton';
+import LookbookAddButton from '../components/Lookbook/LookbookAddButton';
+import TextToggle from '../common/TextToggle';
+import Toggle from '../common/Toggle';
 
 const TestDropdown = ({ index }: { index: number }) => {
   const [value, setValue] = useState<string | undefined>(undefined);
@@ -19,14 +23,19 @@ const TestDropdown = ({ index }: { index: number }) => {
   );
 };
 
+const TestToggle = () => {
+  const [isOn, setIsOn] = useState(true);
+  return <Toggle isOn={isOn} setIsOn={setIsOn} />;
+};
+
 export default function ComponentsTest() {
   return (
     <SafeAreaView style={{ flex: 1 }}>
-      <View style={{ flex: 1 }}>
-        <Body16M>테스트용 페이지</Body16M>
-        <TestDropdown index={4} />
-        <Body16M>테스트용 페이지</Body16M>
-        <TestDropdown index={3} />
+      <View style={{ flex: 1, padding: 20 }}>
+        <Title20B>룩북 컴포넌트</Title20B>
+        <LookbookButton />
+        <LookbookAddButton onPress={() => {}} />
+        <TestToggle />
       </View>
     </SafeAreaView>
   );