[Feat] DataFunctions.js, Folderpage.js, Note.js / DirDetailModal.js 삭제

htj7425 · Jun 6, 2023 · 339de14 · 339de14
2 parents f2c0a26 + 6e6aa1f
commit 339de14
Show file tree

Hide file tree

Showing 10 changed files with 767 additions and 521 deletions.
diff --git a/App.js b/App.js
@@ -17,7 +17,7 @@ import Main from './src/Screen/Main';
 import AIPage from './src/Screen/AIPage';
 import TextPage from './src/Screen/TextPage';
 import InformationPage from './src/Screen/InformationPage';
-
+import NotePage from './src/Screen/Note';
 import FolderPage from './src/Screen/FolderPage';
 
 import { getData } from './src/Functions/DataFunction';
@@ -111,7 +111,16 @@ export default function App() {
           <Stack.Screen
             name="Folder"
             component={FolderPage}
-            options={{ headerShown: false }}
+            options={{
+              headerShown: false,
+            }}
+          />
+          <Stack.Screen
+            name="Note"
+            component={NotePage}
+            options={{
+              headerShown: false,
+            }}
           />
         </Stack.Navigator>
         <StatusBar style="auto" />

diff --git a/src/Components/Header.js b/src/Components/Header.js
@@ -1,26 +1,48 @@
 import React, { useState, useEffect } from 'react';
-import { Text, View, Image, StyleSheet, SafeAreaView } from 'react-native';
-import { Fontisto, MaterialCommunityIcons } from '@expo/vector-icons';
+import {
+  Text,
+  View,
+  Image,
+  StyleSheet,
+  SafeAreaView,
+  Pressable,
+  Button,
+} from 'react-native';
 
 // Fontisto 부분 size 수정해줘야함 24나 32로 해놓으면 휴대폰 스크린 크기에 따라 크고 작게 보일 수 있으므로
 
-function Header({ style, headerTitle }) {
-  const notice = () => {}; // 종 모양 눌렀을 때 발생할 이벤트
+function Header({ style, headerTitle, onEditStateChange }) {
+  const [pressBtnState, setPressBtnState] = useState(false);
+  // True일 시 편집중인것임
+  const onPressEditBtn = () => {
+    setPressBtnState(pressBtnState ? false : true);
+    //onEditStateChange(pressBtnState);
+    // 구현 완료시 이부분 주석 제거
+  };
 
-  const user = () => {}; // 사람 모양 눌렀을 때 발생할 이벤트
   return (
     <SafeAreaView style={styles.container}>
       <Text style={styles.titletext}>{headerTitle}</Text>
-      <View style={styles.logo}>
-        <Image
-          style={styles.aiimage}
-          source={require('../../assets/icons/icon_ai.png')}
-        />
-        <Image
-          style={styles.applogo}
-          source={require('../../assets/icons/icon_nine.png')}
-        />
-      </View>
+      {headerTitle === '내 정보' ? (
+        <View style={styles.logo}>
+          <Image
+            style={styles.aiimage}
+            source={require('../../assets/icons/icon_ai.png')}
+          />
+          <Image
+            style={styles.applogo}
+            source={require('../../assets/icons/icon_nine.png')}
+          />
+        </View>
+      ) : (
+        <View style={styles.editView}>
+          <Button
+            title={pressBtnState ? '완료' : '편집'}
+            style={styles.editBtn}
+            onPress={onPressEditBtn}
+          ></Button>
+        </View>
+      )}
     </SafeAreaView>
   );
 }
@@ -32,6 +54,14 @@ const styles = StyleSheet.create({
     backgroundColor: '#B7C6E6',
     justifyContent: 'flex-end',
   },
+  editView: {
+    flex: 0.5,
+    justifyContent: 'flex-end',
+    marginBottom: 4,
+    marginRight: 20,
+    alignItems: 'flex-end',
+  },
+  editBtn: {},
   titletext: {
     flex: 1.5,
     fontFamily: 'SUITE-Medium',
@@ -43,11 +73,11 @@ const styles = StyleSheet.create({
     textAlign: 'left',
   },
   logo: {
-    flex: 1,
+    flex: 0.8,
     flexDirection: 'row',
     alignItems: 'flex-end',
     marginBottom: 5,
-    marginRight: 10,
+    marginRight: 20,
     justifyContent: 'flex-end',
   },
   aiimage: {

diff --git a/src/Components/ModalPopup.js b/src/Components/ModalPopup.js
@@ -68,6 +68,7 @@ function ModalPopup({ visibleState, onClose, navigation }) {
   const handleImagePicker = async () => {
     console.log('camera 켜짐');
     const result = await ImagePicker.launchCameraAsync({
+      allowsEditing: true,
       base64: true,
     });
 
@@ -116,7 +117,10 @@ function ModalPopup({ visibleState, onClose, navigation }) {
               setHasCameraPermisson(cameraStatus.status === 'granted');
             })();
 
-            handleImagePicker();
+            closeModal();
+            setTimeout(function () {
+              handleImagePicker();
+            }, 500);
           }}
         >
           <Text style={styles.modal_Text}>카메라</Text>

diff --git a/src/Functions/DataFunction.js b/src/Functions/DataFunction.js
@@ -1,22 +1,59 @@
-import { getDatabase, ref, onValue, set, query } from 'firebase/database';
+import {
+  getDatabase,
+  ref,
+  onValue,
+  set,
+  query,
+  remove,
+} from 'firebase/database';
 import { db } from '../firebase/config';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import * as FileSystem from 'expo-file-system';
 
 //새로운 폴더 생성 (DB에서 적용되는 부분)
 function makeFolder(userId, folderName) {
-  const path = 'users' + '/' + userId + '/' + folderName;
+  const path = `users/${userId}/${folderName}`;
   const reference = ref(db, path);
   console.log(path);
   set(reference, { folderName });
-  getData();
 }
 
+function folderDelete(userId, folderName) {
+  const path = `users/${userId}/${folderName}`;
+  const reference = ref(db, path);
+  remove(reference)
+    .then(() => {
+      console.log('폴더 삭제 완료');
+    })
+    .catch((error) => {
+      console.log('폴더 삭제 중 오류 발생: ', error);
+    });
+}
+
+async function questionDelete(userId, folderName, number) {
+  const path = `users/${userId}/${folderName}/${number}`;
+  const reference = ref(db, path);
+  console.log(path);
+  remove(reference)
+    .then(() => {
+      console.log('질문 삭제 완료');
+    })
+    .catch((error) => {
+      console.log('질문 삭제 중 오류 발생: ', error);
+    });
+}
+/*
+function questionDelete(userId, folderName, number, question, answer, com) {
+  const path = `users/${userId}/${folderName}/${number}`;
+  const reference = ref(db, path);
+  set(reference);
+  getData(userId);
+}*/
+
 function exportData(userId, folderName, number, question, answer, com) {
-  const path = 'users/' + userId + '/' + folderName + '/' + number;
+  const path = `users/${userId}/${folderName}/${number}`;
   const reference = ref(db, path);
   set(reference, { question: { question }, answer: { answer }, com: { com } });
-  getData();
 }
 
 //DB에서 JSON 데이터를 받음
@@ -36,7 +73,7 @@ function exportData(userId, folderName, number, question, answer, com) {
 
 // DB로 부터 data 받아와서 local json에 저장
 function getData(userId) {
-  const path = 'users' + '/' + userId + '/';
+  const path = `users/${userId}`;
   const temp = query(ref(db, path));
   let data;
   onValue(temp, async (res) => {
@@ -66,4 +103,11 @@ async function getJSON() {
   return readData;
 }
 
-export { getJSON, getData, makeFolder, exportData };
+export {
+  getJSON,
+  getData,
+  makeFolder,
+  exportData,
+  questionDelete,
+  folderDelete,
+};
diff --git a/src/Screen/FolderPage.js b/src/Screen/FolderPage.js
@@ -1,27 +1,15 @@
 import React, { useState, useEffect } from 'react';
-import * as Font from 'expo-font';
 import {
   View,
-  Image,
   Text,
   StyleSheet,
   TouchableOpacity,
   FlatList,
-  Dimensions,
   ScrollView,
 } from 'react-native';
-import { Fontisto, AntDesign } from '@expo/vector-icons';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import * as FileSystem from 'expo-file-system';
+import { AntDesign } from '@expo/vector-icons';
 
-import { getDatabase, ref, onValue, set, query } from 'firebase/database';
-import { db } from '../firebase/config';
-import {
-  getJSON,
-  getData,
-  makeFolder,
-  userLoad,
-} from '../Functions/DataFunction';
+import { getJSON } from '../Functions/DataFunction';
 
 import Header from '../Components/Header';
 
@@ -31,7 +19,7 @@ function Home({ route, navigation }) {
   const [jsonDataState, setJsonDataState] = useState('Loading ...');
   const [selectState, setSelectState] = useState([]);
   const [extractedData, setExtractedData] = useState();
-  console.log(otherParam);
+
   useEffect(() => {
     uploadData();
   }, []);
@@ -46,7 +34,7 @@ function Home({ route, navigation }) {
         jsonData.hasOwnProperty('folderName')
       ) {
         setJsonDataState(
-          'HOME 하단의 추가 버튼을 눌러\n나인에게 모르는 문제를 물어보고\n내 오답노트에 추가할 수 있어요'
+          '폴더가 비어있어요\n문제를 추가하려면 나인에게 물어본 후\n오답노트에 추가해주세요'
         );
       } else {
         setJsonData(jsonData);
@@ -65,7 +53,7 @@ function Home({ route, navigation }) {
 
   return (
     <View style={{ flex: 1, backgroundColor: '#DCE2F0' }}>
-      <Header style={{ flex: 1 }} headerTitle={''} />
+      <Header style={{ flex: 1 }} headerTitle={otherParam} />
       <View style={{ flex: 12 }}>
         {jsonData ? (
           <FlatList
@@ -74,7 +62,30 @@ function Home({ route, navigation }) {
             renderItem={({ item, index }) => (
               <TouchableOpacity
                 style={{ flex: 1 }}
-                onPress={() => handleTouchableOpacityPress(index)}
+                onPress={() => {
+                  /*const fullData =
+                    item +
+                    '번 문제/' +
+                    jsonData[item].question.question +
+                    '/' +
+                    jsonData[item].answer.answer +
+                    '/' +
+                    jsonData[item].com.com;
+                  */
+                  const makeStr = item + '번 문제';
+                  const fullData = {
+                    folderName: otherParam,
+                    numQuestion: makeStr,
+                    number: item,
+                    question: jsonData[item].question.question,
+                    answer: jsonData[item].answer.answer,
+                    com: jsonData[item].com.com,
+                  };
+                  navigation.navigate('Note', {
+                    itemId: 1601,
+                    otherParam: JSON.stringify(fullData),
+                  });
+                }}
                 activeOpacity={selectState[index] ? 1 : 0}
               >
                 <View style={styles.page} key={index}>
@@ -87,15 +98,7 @@ function Home({ route, navigation }) {
                       }}
                     >
                       <View style={{ position: 'absolute', right: '55%' }}>
-                        {selectState[index] ? (
-                          <AntDesign name="caretdown" size={14} color="black" />
-                        ) : (
-                          <AntDesign
-                            name="caretright"
-                            size={14}
-                            color="black"
-                          />
-                        )}
+                        <AntDesign name="caretright" size={14} color="black" />
                       </View>
                       <View
                         style={{
@@ -114,26 +117,6 @@ function Home({ route, navigation }) {
                         </Text>
                       </View>
                     </View>
-                    {selectState[index] ? (
-                      <View style={{ flex: 1, paddingVertical: 12 }}>
-                        <ScrollView style={{ flex: 1 }}>
-                          <Text
-                            style={{
-                              fontSize: 12,
-                              fontFamily: 'SUITE-Light',
-                            }}
-                          >
-                            {jsonData[item].question.question}
-                          </Text>
-                        </ScrollView>
-                        <ScrollView style={{ flex: 1 }}>
-                          <Text>{jsonData[item].answer.answer}</Text>
-                          <Text>{jsonData[item].com.com}</Text>
-                        </ScrollView>
-                      </View>
-                    ) : (
-                      <View></View>
-                    )}
                   </View>
                 </View>
               </TouchableOpacity>

diff --git a/src/Screen/HomePage.js b/src/Screen/HomePage.js
@@ -33,8 +33,6 @@ const { height, width } = Dimensions.get('window');
 function Home({ navigation }) {
   const [jsonData, setJsonData] = useState(null);
   const [jsonDataState, setJsonDataState] = useState('Loading ...');
-  const [modalVisible, setModalVisible] = useState(false);
-  const [selectFolder, setSelectFolder] = useState('');
 
   useEffect(() => {
     uploadData();
@@ -71,7 +69,6 @@ function Home({ navigation }) {
                   <TouchableOpacity
                     style={{ flex: 1 }}
                     onPress={() => {
-                      setModalVisible(true);
                       navigation.navigate('Folder', {
                         itemId: 1101,
                         otherParam: item,