sdp-tech#77 refactor: refactor dropdown component

src/common/Dropdown.tsx

@@ -1,57 +1,107 @@
-import { Dispatch, SetStateAction } from 'react';
-import { View, TouchableOpacity, ViewStyle } from 'react-native';
+import { Dispatch, SetStateAction, useState } from 'react';
+import {
+  View,
+  TouchableOpacity,
+  ViewStyle,
+  StyleSheet,
+  DimensionValue,
+  ScrollView,
+} from 'react-native';
 import { Body14M } from '../styles/GlobalText';
+import { BLACK, BLACK2, GRAY } from '../styles/GlobalColor';
+import ArrowIcon from '../assets/common/Arrow.svg';
 
-export interface DropdownProps {
-  items: string[];
-  value: string | undefined | null;
+interface DropdownProps {
+  title: Text;
+  value: string | undefined;
   setValue: (text: string) => void;
-  setOpen: Dispatch<SetStateAction<boolean>>;
-  open: boolean;
+  items: string[];
+  width: DimensionValue;
   style?: ViewStyle;
 }
+const ITEM_HEIGHT = 40;
 
 export default function Dropdown({
-  items,
-  value,
-  setValue,
-  setOpen,
-  open,
+  title,
   style,
+  setValue,
+  value,
+  items,
+  width,
 }: DropdownProps) {
-  const handleSelect = (text: string) => {
-    setValue(text);
+  const [open, setOpen] = useState(false);
+
+  const handlePress = () => {
+    setOpen(prev => !prev);
+  };
+
+  const handleSelect = (value: string) => {
+    setValue(value);
     setOpen(false);
   };
+
   return (
-    <View
-      style={{
-        position: 'absolute',
-        display: 'flex',
-        flexDirection: 'column',
-        borderBottomWidth: 0,
-        zIndex: 1,
-        ...style,
-      }}>
-      {open &&
-        items.map((item, index) => {
-          return (
-            <View key={index}>
-              <TouchableOpacity
-                onPress={() => {
-                  handleSelect(item);
-                }}
-                style={{
-                  backgroundColor: 'white',
-                  paddingLeft: 16,
-                  height: 30,
-                  borderWidth: 1,
-                }}>
-                <Body14M>{item}</Body14M>
-              </TouchableOpacity>
-            </View>
-          );
-        })}
+    <View>
+      <View
+        style={{
+          width: width,
+          ...style,
+          ...Styles.container,
+        }}>
+        <View style={{ ...Styles.item }}>
+          <TouchableOpacity
+            style={{
+              ...Styles.pressArea,
+            }}
+            onPress={handlePress}>
+            <Body14M>{value !== undefined ? value : title}</Body14M>
+            <ArrowIcon
+              color={BLACK2}
+              style={{ transform: [{ rotate: open ? '270deg' : '180deg' }] }}
+            />
+          </TouchableOpacity>
+        </View>
+        <ScrollView
+          style={{
+            maxHeight: open ? ITEM_HEIGHT * 3 : ITEM_HEIGHT + 4,
+            borderTopWidth: open ? 2 : 0,
+            borderColor: BLACK2,
+          }}>
+          {open &&
+            items.map((value, index) => {
+              return (
+                <View style={Styles.item} key={index}>
+                  <TouchableOpacity
+                    style={Styles.pressArea}
+                    onPress={() => handleSelect(value)}>
+                    <Body14M>{value}</Body14M>
+                  </TouchableOpacity>
+                </View>
+              );
+            })}
+        </ScrollView>
+      </View>
     </View>
   );
 }
+
+const Styles = StyleSheet.create({
+  container: {
+    marginVertical: 8,
+    alignSelf: 'center',
+    borderWidth: 2,
+    borderRadius: 8,
+    borderColor: BLACK2,
+  },
+  item: {
+    height: ITEM_HEIGHT,
+    paddingHorizontal: 16,
+    borderColor: BLACK2,
+  },
+  pressArea: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flex: 1,
+  },
+});

src/pages/ComponentsTest.tsx

@@ -1,34 +1,30 @@
 import { SafeAreaView, TouchableOpacity, View } from 'react-native';
 import Dropdown from '../common/Dropdown';
 import { useState } from 'react';
+import { Body16M } from '../styles/GlobalText';
 
 const TestDropdown = () => {
-  const [value, setValue] = useState<string>();
+  const [value, setValue] = useState<string | undefined>(undefined);
   const [open, setOpen] = useState(false);
-  const items = ['a', 'b', 'c'];
+  const items = ['a', 'b', 'c', 'd', 'e'];
 
   return (
-    <TouchableOpacity onPress={() => {}}>
+    <View>
       <Dropdown
-        items={items}
-        value={value}
+        title="서비스 선택하기"
         setValue={t => setValue(t)}
-        open={open}
-        setOpen={setOpen}
-        style={{
-          height: 40,
-          width: 500,
-          // backgroundColor: 'red',
-        }}
-      />
-    </TouchableOpacity>
+        value={value}
+        items={items}
+        width="90%"></Dropdown>
+    </View>
   );
 };
 
 export default function ComponentsTest() {
   return (
     <SafeAreaView style={{ flex: 1 }}>
       <View style={{ flex: 1 }}>
+        <Body16M>테스트용 페이지</Body16M>
         <TestDropdown />
       </View>
     </SafeAreaView>