sdp-tech#77 feat: add dropdown with write option

eujin-shin · Jun 22, 2024 · 950c9d6 · 950c9d6
1 parent a85c7e8
commit 950c9d6
Show file tree

Hide file tree

Showing 3 changed files with 137 additions and 42 deletions.
diff --git a/src/common/Dropdown.tsx b/src/common/Dropdown.tsx
@@ -12,11 +12,11 @@ import { BLACK, BLACK2, GRAY } from '../styles/GlobalColor';
 import ArrowIcon from '../assets/common/Arrow.svg';
 
 interface DropdownProps {
-  title: Text;
+  title: string;
   value: string | undefined;
   setValue: (text: string) => void;
   items: string[];
-  index?: number | undefined;
+  index?: number | undefined; // 동일 레벨에서 dropdown을 여러번 사용할 경우 z-index 사용
   width?: DimensionValue;
   style?: ViewStyle;
 }

diff --git a/src/common/DropdownWrite.tsx b/src/common/DropdownWrite.tsx
@@ -0,0 +1,113 @@
+import { useState } from 'react';
+import {
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+  TextInput,
+} from 'react-native';
+import { Body14M } from '../styles/GlobalText';
+import { BLACK2 } from '../styles/GlobalColor';
+import Dropdown from './Dropdown';
+import ArrowIcon from '../assets/common/Arrow.svg';
+
+const ITEM_HEIGHT = 40;
+
+export default function DropdownWrite({
+  title,
+  style,
+  setValue,
+  value,
+  items,
+  index = undefined,
+  width = '90%',
+}: Parameters<typeof Dropdown>[0]) {
+  const [open, setOpen] = useState(false);
+
+  const handlePress = () => {
+    setOpen(prev => !prev);
+  };
+
+  const handleSelect = (value: string) => {
+    setValue(value);
+    setOpen(false);
+  };
+
+  return (
+    <View
+      style={{
+        width: width,
+        position: 'relative',
+        height: ITEM_HEIGHT + 4,
+        marginVertical: 8,
+        zIndex: index,
+      }}>
+      <View
+        style={{
+          ...style,
+          ...Styles.container,
+        }}>
+        <View style={{ ...Styles.pressArea, ...Styles.item }}>
+          <TextInput
+            defaultValue={value}
+            onChangeText={setValue}
+            placeholderTextColor={BLACK2}
+            placeholder={title}
+            autoCapitalize="none"
+            autoCorrect={false}
+            style={{ flex: 1 }}
+          />
+          <TouchableOpacity onPress={handlePress}>
+            <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: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    alignSelf: 'center',
+    borderWidth: 2,
+    borderRadius: 5,
+    borderColor: BLACK2,
+    backgroundColor: 'white',
+  },
+  item: {
+    height: ITEM_HEIGHT,
+    paddingHorizontal: 16,
+  },
+  pressArea: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flex: 1,
+  },
+});
diff --git a/src/components/Auth/BasicForm.tsx b/src/components/Auth/BasicForm.tsx
@@ -25,10 +25,11 @@ import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import SelectBox from '../../common/SelectBox';
 import BasicSignupSplash from './BasicSignupSplash';
 import CustomScrollView from '../../common/CustomScrollView';
+import DropdownWrite from '../../common/DropdownWrite';
 
 interface SignupProps {
   mail: string;
-  domain: string;
+  domain: string | undefined;
   password: string;
   region: string;
 }
@@ -85,7 +86,7 @@ export default function BasicForm({ navigation, route }: FormProps) {
   const { width, height } = Dimensions.get('window');
   const [form, setForm] = useState<SignupProps>({
     mail: '',
-    domain: '',
+    domain: undefined,
     password: '',
     region: '',
   });
@@ -155,7 +156,13 @@ export default function BasicForm({ navigation, route }: FormProps) {
                 }}>
                 <SectionView style={{ zIndex: 1 }}>
                   <Body16B>이메일</Body16B>
-                  <MailView>
+                  <View
+                    style={{
+                      flexDirection: 'row',
+                      justifyContent: 'space-between',
+                      alignItems: 'center',
+                      width: '100%',
+                    }}>
                     <InputBox
                       value={form.mail}
                       setValue={text =>
@@ -167,43 +174,18 @@ export default function BasicForm({ navigation, route }: FormProps) {
                       style={{ height: 44, marginTop: 8, width: '44%' }}
                     />
                     <Body16M style={{ color: BLACK2 }}>@</Body16M>
-                    <SelectView>
-                      <TextInput
-                        value={form.domain}
-                        onChangeText={text =>
-                          setForm(prev => {
-                            return { ...prev, domain: text };
-                          })
-                        }
-                        style={{ width: '70%' }}
-                        placeholder="직접 입력"
-                        placeholderTextColor={BLACK2}
-                        readOnly={false}
-                        autoCapitalize="none"
-                        autoCorrect={false}
-                      />
-                      <Dropdown
-                        open={domainOpen}
-                        setOpen={setDomainOpen}
-                        value={form.domain}
-                        setValue={text =>
-                          setForm(prev => {
-                            return { ...prev, domain: text };
-                          })
-                        }
-                        items={['gmail.com', 'naver.com', 'kakao.com']}
-                        style={{ width: '100%', top: 44 }}
-                      />
-                      <TouchableOpacity
-                        onPress={() =>
-                          setDomainOpen(prev => {
-                            return !prev;
-                          })
-                        }>
-                        <DownArrow />
-                      </TouchableOpacity>
-                    </SelectView>
-                  </MailView>
+                    <DropdownWrite
+                      title="직접 입력"
+                      width="44%"
+                      value={form.domain}
+                      setValue={text =>
+                        setForm(prev => {
+                          return { ...prev, domain: text };
+                        })
+                      }
+                      items={['gmail.com', 'naver.com', 'kakao.com']}
+                    />
+                  </View>
                 </SectionView>
                 <InputView
                   title="비밀번호"