sdp-tech#78 feat: add file picker callback

eujin-shin · Jul 20, 2024 · f5730bb · f5730bb
1 parent 69326ec
commit f5730bb
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 27 deletions.
diff --git a/node_modules/react-native/index.js b/node_modules/react-native/index.js
diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
     "react-native-bouncy-checkbox": "^3.0.7",
     "react-native-collapsible-tab-view": "^6.2.1",
     "react-native-date-picker": "^5.0.0",
-    "react-native-document-picker": "^9.1.1",
+    "react-native-document-picker": "^9.3.0",
     "react-native-dotenv": "^3.4.9",
     "react-native-dropdown-picker": "^5.4.6",
     "react-native-gesture-handler": "^2.15.0",

diff --git a/src/common/FileBox.tsx b/src/common/FileBox.tsx
@@ -1,14 +1,14 @@
 import { View, TextInput, TextStyle, StyleSheet } from 'react-native';
 import styled from 'styled-components/native';
-import { BLACK2 } from '../styles/GlobalColor';
+import { BLACK, BLACK2 } from '../styles/GlobalColor';
 import { Body14M } from '../styles/GlobalText';
 import PlusIcon from '../assets/common/Plus.svg';
-import RightArrowIcon from '../assets/common/RightArrow.svg';
-import DownArrowIcon from '../assets/common/DownArrow.svg';
+
 import FilePicker from './FilePicker';
 
 export interface FileBoxProps {
   data: any[];
+  setData: (r: any[]) => void;
   max: number;
 }
 
@@ -26,37 +26,60 @@ const SelectView = styled.View`
   margin-bottom: 5px;
 `;
 
-const FileBox = ({ data, max }: FileBoxProps) => {
+const FileBox = ({ data, setData, max }: FileBoxProps) => {
   return (
-    <SelectView>
-      <FilePicker
-        callback={r => {}}
-        disabled={data.length >= max}
-        style={styles.BoxView}>
-        {data.length >= max ? (
-          <Body14M>더 이상 추가할 수 없습니다.</Body14M>
-        ) : (
-          <>
-            <Body14M style={{ color: BLACK2 }}>추가해 주세요</Body14M>
-            <PlusIcon color={BLACK2} />
-          </>
-        )}
-      </FilePicker>
-    </SelectView>
+    <View>
+      <SelectView>
+        <FilePicker
+          callback={r => {
+            console.log(r);
+            setData([{ name: r.name, uri: r.uri }]);
+          }}
+          disabled={data.length >= max}
+          style={styles.BoxView}>
+          {data.length >= max ? (
+            <Body14M style={{ color: BLACK2 }}>
+              더 이상 추가할 수 없습니다
+            </Body14M>
+          ) : (
+            <View style={styles.ItemView}>
+              <Body14M style={{ color: BLACK2 }}>추가해 주세요</Body14M>
+              <PlusIcon color={BLACK2} />
+            </View>
+          )}
+        </FilePicker>
+      </SelectView>
+      <View style={{ backgroundColor: 'white' }}>
+        {data.map((v, index) => {
+          return (
+            <View key={index} style={{ backgroundColor: 'gray' }}>
+              <Body14M style={{ color: BLACK }}>{v.name}</Body14M>
+            </View>
+          );
+        })}
+      </View>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
   BoxView: {
     display: 'flex',
     flexDirection: 'row',
-    justifyContent: 'space-between',
+    justifyContent: 'center',
     alignItems: 'center',
     width: '100%',
     height: 44,
     paddingLeft: 16,
     paddingRight: 16,
   },
+  ItemView: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+  },
 });
 
 export default FileBox;
diff --git a/src/common/FilePicker.tsx b/src/common/FilePicker.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { TouchableOpacity, ViewStyle } from 'react-native';
+import { Alert, TouchableOpacity, ViewStyle } from 'react-native';
 import {
   DocumentPickerOptions,
   DocumentPickerResponse,
@@ -9,24 +9,23 @@ import {
 interface FilePickerProps {
   style?: ViewStyle;
   children?: any;
-  options?: DocumentPickerOptions<'android' | 'ios'>;
   callback: (r: DocumentPickerResponse) => void;
   disabled: boolean;
 }
 
 const FilePicker = ({
   children,
   style,
-  options,
   callback,
   disabled,
 }: FilePickerProps) => {
   const handleFile = async () => {
     try {
-      const [selectedFile] = await pick(options);
+      const [selectedFile] = await pick();
       callback(selectedFile);
     } catch (e: unknown) {
       console.log(e);
+      Alert.alert('파일 업로드에 실패했습니다.');
     }
   };
 

diff --git a/src/components/Auth/Reformer/CareerModal.tsx b/src/components/Auth/Reformer/CareerModal.tsx
@@ -359,7 +359,13 @@ export default function CareerModal({
                 <Body16B>증빙자료첨부</Body16B>
                 <Caption11M style={{ color: BLACK2 }}>선택사항</Caption11M>
               </View>
-              <FileBox data={form.career[index].file} max={1} />
+              <FileBox
+                data={form.career[index].file}
+                setData={r => {
+                  handleContentChange([r], 'file');
+                }}
+                max={1}
+              />
             </View>
 
             <View style={{ marginTop: 'auto' }}>

diff --git a/yarn.lock b/yarn.lock
@@ -6958,7 +6958,7 @@ react-native-date-picker@^5.0.0:
   resolved "https://registry.yarnpkg.com/react-native-date-picker/-/react-native-date-picker-5.0.4.tgz#5965141617463bc11ebe0b16e2b0ea7239758e37"
   integrity sha512-UycNfXGd4ipgdU2a+oZGj7h1nvp8Gz49f/Ko+YdWh6nrBKB49MEp0n9eF1QngbxMKqdK0AdY4udb4IdVVWji4g==
 
-react-native-document-picker@^9.1.1:
+react-native-document-picker@^9.3.0:
   version "9.3.0"
   resolved "https://registry.yarnpkg.com/react-native-document-picker/-/react-native-document-picker-9.3.0.tgz#4651d354623367d06397fe6dbf4a496f7d92ca6b"
   integrity sha512-X/j0xKn8cObckpHTNwE/hW9WzBiP6oKx820FYu1Nat43QnnHmmT6uozFgAUDcJfxmZGcEdLlbv0lNhnyRXJyyA==