sdp-tech#78 feat: add uploaded file list

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

Hide file tree

Showing 3 changed files with 42 additions and 12 deletions.
diff --git a/src/common/FileBox.tsx b/src/common/FileBox.tsx
@@ -1,14 +1,22 @@
-import { View, TextInput, TextStyle, StyleSheet } from 'react-native';
+import {
+  View,
+  TextInput,
+  TextStyle,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
 import styled from 'styled-components/native';
 import { BLACK, BLACK2 } from '../styles/GlobalColor';
 import { Body14M } from '../styles/GlobalText';
 import PlusIcon from '../assets/common/Plus.svg';
+import DeleteIcon from '../assets/header/Close.svg';
 
 import FilePicker from './FilePicker';
+import { Files } from '../types/UserTypes';
 
 export interface FileBoxProps {
-  data: any[];
-  setData: (r: any[]) => void;
+  data: Files;
+  setData: (r: Files) => void;
   max: number;
 }
 
@@ -27,13 +35,18 @@ const SelectView = styled.View`
 `;
 
 const FileBox = ({ data, setData, max }: FileBoxProps) => {
+  const handleFileDelete = (index: number) => {
+    const newData = data.filter((v, i) => i !== index);
+    setData(newData);
+  };
+
   return (
     <View>
       <SelectView>
         <FilePicker
           callback={r => {
             console.log(r);
-            setData([{ name: r.name, uri: r.uri }]);
+            setData([{ name: r.name ? r.name : 'noname', uri: r.uri }]);
           }}
           disabled={data.length >= max}
           style={styles.BoxView}>
@@ -49,11 +62,14 @@ const FileBox = ({ data, setData, max }: FileBoxProps) => {
           )}
         </FilePicker>
       </SelectView>
-      <View style={{ backgroundColor: 'white' }}>
+      <View style={styles.ListView}>
         {data.map((v, index) => {
           return (
-            <View key={index} style={{ backgroundColor: 'gray' }}>
+            <View key={index} style={styles.ItemView}>
               <Body14M style={{ color: BLACK }}>{v.name}</Body14M>
+              <TouchableOpacity onPress={() => handleFileDelete(index)}>
+                <DeleteIcon color={BLACK2} />
+              </TouchableOpacity>
             </View>
           );
         })}
@@ -65,13 +81,23 @@ const FileBox = ({ data, setData, max }: FileBoxProps) => {
 const styles = StyleSheet.create({
   BoxView: {
     display: 'flex',
-    flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
     width: '100%',
     height: 44,
     paddingLeft: 16,
     paddingRight: 16,
+    gap: 10,
+  },
+  ListView: {
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    height: 44,
+    paddingLeft: 16,
+    paddingRight: 16,
+    marginTop: 10,
+    gap: 15,
   },
   ItemView: {
     display: 'flex',

diff --git a/src/components/Auth/Reformer/CareerModal.tsx b/src/components/Auth/Reformer/CareerModal.tsx
@@ -92,7 +92,7 @@ export default function CareerModal({
   const handleContentChange = (v: any, t: string) => {
     const prevCareer = form.career;
     prevCareer[index] = { ...prevCareer[index], [t]: v };
-    // console.log(prevCareer[index]);
+    console.log(prevCareer[index]);
     setForm(prev => {
       return { ...prev, career: prevCareer };
     });
@@ -362,7 +362,7 @@ export default function CareerModal({
               <FileBox
                 data={form.career[index].file}
                 setData={r => {
-                  handleContentChange([r], 'file');
+                  handleContentChange(r, 'file');
                 }}
                 max={1}
               />

diff --git a/src/types/UserTypes.ts b/src/types/UserTypes.ts
@@ -1,6 +1,10 @@
 type Styles = '빈티지' | '미니멀' | '캐주얼';
 type Materials = '가죽' | '스웨이드' | '벨벳' | '데님' | '퍼' | '실크' | '울';
-type File = any[];
+interface File {
+  name: string;
+  uri: string;
+}
+export type Files = File[];
 
 export type StyleType = Styles[];
 export type MaterialType = Materials[];
@@ -9,13 +13,13 @@ export type EducType = {
   school: string;
   major: string;
   status: string | undefined;
-  file: File;
+  file: Files;
   // 파일 형식 추가
 };
 
 export type Careers = {
   name: string;
-  file: File;
+  file: Files;
   type: string | undefined;
   team?: string;
   position?: string;