sdp-tech#77 fix: set overlap order between dropdowns at same level

eujin-shin · Jun 22, 2024 · a85c7e8 · a85c7e8
1 parent 8fa5723
commit a85c7e8
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 14 deletions.
diff --git a/src/common/Dropdown.tsx b/src/common/Dropdown.tsx
@@ -16,7 +16,8 @@ interface DropdownProps {
   value: string | undefined;
   setValue: (text: string) => void;
   items: string[];
-  width: DimensionValue;
+  index?: number | undefined;
+  width?: DimensionValue;
   style?: ViewStyle;
 }
 const ITEM_HEIGHT = 40;
@@ -27,7 +28,8 @@ export default function Dropdown({
   setValue,
   value,
   items,
-  width,
+  index = undefined,
+  width = '90%',
 }: DropdownProps) {
   const [open, setOpen] = useState(false);
 
@@ -41,7 +43,14 @@ export default function Dropdown({
   };
 
   return (
-    <View>
+    <View
+      style={{
+        position: 'relative',
+        height: ITEM_HEIGHT + 4,
+        backgroundColor: 'red',
+        marginVertical: 8,
+        zIndex: index,
+      }}>
       <View
         style={{
           width: width,
@@ -87,11 +96,12 @@ export default function Dropdown({
 
 const Styles = StyleSheet.create({
   container: {
-    marginVertical: 8,
+    position: 'absolute',
     alignSelf: 'center',
     borderWidth: 2,
     borderRadius: 8,
     borderColor: BLACK2,
+    backgroundColor: 'white',
   },
   item: {
     height: ITEM_HEIGHT,

diff --git a/src/pages/ComponentsTest.tsx b/src/pages/ComponentsTest.tsx
@@ -3,20 +3,19 @@ import Dropdown from '../common/Dropdown';
 import { useState } from 'react';
 import { Body16M } from '../styles/GlobalText';
 
-const TestDropdown = () => {
+const TestDropdown = ({ index }: { index: number }) => {
   const [value, setValue] = useState<string | undefined>(undefined);
   const [open, setOpen] = useState(false);
   const items = ['a', 'b', 'c', 'd', 'e'];
 
   return (
-    <View>
-      <Dropdown
-        title="서비스 선택하기"
-        setValue={t => setValue(t)}
-        value={value}
-        items={items}
-        width="90%"></Dropdown>
-    </View>
+    <Dropdown
+      title="서비스 선택하기"
+      setValue={t => setValue(t)}
+      value={value}
+      items={items}
+      index={index}
+      width="90%"></Dropdown>
   );
 };
 
@@ -25,7 +24,9 @@ export default function ComponentsTest() {
     <SafeAreaView style={{ flex: 1 }}>
       <View style={{ flex: 1 }}>
         <Body16M>테스트용 페이지</Body16M>
-        <TestDropdown />
+        <TestDropdown index={4} />
+        <Body16M>테스트용 페이지</Body16M>
+        <TestDropdown index={3} />
       </View>
     </SafeAreaView>
   );