From 6b5e3e011b2e405678ca7a3501be29ca544b4d5f Mon Sep 17 00:00:00 2001
From: eujin-shin <eujinshin0124@gmail.com>
Date: Wed, 10 Jul 2024 21:03:10 +0900
Subject: [PATCH] #77 feat: add lookbook base layout

---
 src/common/Toggle.tsx                    |  1 -
 src/components/Lookbook/ListItem.tsx     | 16 ++++++++++++++++
 src/components/Lookbook/LookbookList.tsx | 11 +++++++++++
 src/pages/ComponentsTest.tsx             | 11 ++++++++---
 4 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Lookbook/ListItem.tsx
 create mode 100644 src/components/Lookbook/LookbookList.tsx

diff --git a/src/common/Toggle.tsx b/src/common/Toggle.tsx
index dbca00e..1a519d2 100644
--- a/src/common/Toggle.tsx
+++ b/src/common/Toggle.tsx
@@ -27,7 +27,6 @@ const Toggle = ({
   };
 
   useEffect(() => {
-    console.log('animation on');
     Animated.timing(animationXTrans, {
       toValue: isOn ? X_COORD_ON : X_COORD_OFF,
       duration: ANIMATION_DURATION,
diff --git a/src/components/Lookbook/ListItem.tsx b/src/components/Lookbook/ListItem.tsx
new file mode 100644
index 0000000..758572d
--- /dev/null
+++ b/src/components/Lookbook/ListItem.tsx
@@ -0,0 +1,16 @@
+import { Dimensions, View } from 'react-native';
+
+const ListItem = () => {
+  const { width } = Dimensions.get('screen');
+
+  const COLUMN_COUNT = 2;
+  const ITEM_WIDTH = (width * 0.9) / COLUMN_COUNT;
+
+  return (
+    <View style={{ width: ITEM_WIDTH }}>
+      <View style={{ width: '100%', backgroundColor: 'gray', height: 200 }} />
+    </View>
+  );
+};
+
+export default ListItem;
diff --git a/src/components/Lookbook/LookbookList.tsx b/src/components/Lookbook/LookbookList.tsx
new file mode 100644
index 0000000..bb7babd
--- /dev/null
+++ b/src/components/Lookbook/LookbookList.tsx
@@ -0,0 +1,11 @@
+import { Dimensions, View } from 'react-native';
+
+const LookbookList = () => {
+  const { width } = Dimensions.get('window');
+  return (
+    <View
+      style={{ width: '100%', backgroundColor: 'gray', height: 300 }}></View>
+  );
+};
+
+export default LookbookList;
diff --git a/src/pages/ComponentsTest.tsx b/src/pages/ComponentsTest.tsx
index 633a8ed..2b46dc0 100644
--- a/src/pages/ComponentsTest.tsx
+++ b/src/pages/ComponentsTest.tsx
@@ -6,6 +6,8 @@ import LookbookButton from '../components/Lookbook/LookbookButton';
 import LookbookAddButton from '../components/Lookbook/LookbookAddButton';
 import TextToggle from '../common/TextToggle';
 import Toggle from '../common/Toggle';
+import ListItem from '../components/Lookbook/ListItem';
+import LookbookList from '../components/Lookbook/LookbookList';
 
 const TestDropdown = ({ index }: { index: number }) => {
   const [value, setValue] = useState<string | undefined>(undefined);
@@ -33,9 +35,12 @@ export default function ComponentsTest() {
     <SafeAreaView style={{ flex: 1 }}>
       <View style={{ flex: 1, padding: 20 }}>
         <Title20B>룩북 컴포넌트</Title20B>
-        <LookbookButton />
-        <LookbookAddButton onPress={() => {}} />
-        <TestToggle />
+        <View style={{ marginVertical: 20 }}>
+          <LookbookButton />
+          <LookbookAddButton onPress={() => {}} />
+          <TestToggle />
+          <LookbookList />
+        </View>
       </View>
     </SafeAreaView>
   );