feat: EditPage ADD, EDIT 시 페이지 연결 #1 #3

'편집'에서 EditPage 들어올 때와 '새로운 약 추가하기'에서 EditPage 들어올 때 EditPage 에서 보이는 Input 과 Button 값을 다르게 가져가는 기능을 구현했습니다.
dypark26 · Jan 9, 2023 · fb925ef · fb925ef
1 parent d045bfe
commit fb925ef
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 16 deletions.
diff --git a/src/components/ManageList.jsx b/src/components/ManageList.jsx
@@ -2,7 +2,8 @@ import styled from '@emotion/native';
 import { COLORS } from '../shared/color';
 import { TouchableOpacity } from 'react-native';
 
-const ManageList = ({ pillName, id }) => {
+const ManageList = ({ pillName, time, id, navigate }) => {
+  // console.log(pillName, time);
   return (
     <ManageListContainer>
       <ManageListTitle>{pillName}</ManageListTitle>
@@ -11,7 +12,12 @@ const ManageList = ({ pillName, id }) => {
           // 클릭하면 페이지 이동
           buttonColor={COLORS.BLACK}
           buttonText="편집"
-          onPress={() => console.log('편집', id)}
+          onPress={() =>
+            navigate('Stacks', {
+              screen: '수정 페이지',
+              params: { isEdit: true, eachPillName: pillName, eachTime: time },
+            })
+          }
         />
         <TextButton
           // 클릭하면 alert()

diff --git a/src/screen/EditPage.jsx b/src/screen/EditPage.jsx
@@ -3,9 +3,15 @@ import { useState } from 'react';
 import styled from '@emotion/native';
 import { useAddPillData } from '../Hooks/usePill';
 
-function EditPage({ navigation: { navigate } }) {
-  const [pillName, setPillName] = useState('');
-  const [time, setTime] = useState('');
+function EditPage({ navigation: { navigate }, route: { params } }) {
+  // '편집'에서 EditPage 들어오면
+  // isEdit = true / eachPillName = 약 이름 / eachTime = 복용시간
+  // '새로운 약 추가하기'에서 EditPage 들어오면
+  // isEdit = false / eachPillName = "" / eachTime = ""
+  const { isEdit, eachPillName, eachTime } = params;
+
+  const [pillName, setPillName] = useState();
+  const [time, setTime] = useState();
 
   // usePill 커스텀 훅에서 약 추가 함수 import
   const { mutate: addPill, isError, isSuccess } = useAddPillData();
@@ -26,6 +32,7 @@ function EditPage({ navigation: { navigate } }) {
     }
     if (isSuccess) {
       console.log(`${pillName} 추가 성공`);
+      ``;
     }
     setPillName('');
     setTime('');
@@ -39,12 +46,14 @@ function EditPage({ navigation: { navigate } }) {
       <EditForm>
         {/* 약 이름 인풋 */}
         <CustomInput
+          defaultValue={eachPillName}
           placeholder="이름"
           value={pillName}
           onChangeText={setPillName}
         />
         {/* 약 복용시간 인풋 */}
         <CustomInput
+          defaultValue={eachTime}
           placeholder="복용시간"
           value={time}
           onChangeText={setTime}
@@ -53,10 +62,12 @@ function EditPage({ navigation: { navigate } }) {
           {/* 약 추가/저장 버튼 */}
           {/* 커스텀 버튼 완료시 children 값 변경하기 : Add 일때는 '추가' Edit 일때는 '저장'으로 */}
           <CustomButton onPress={handleAddPill} disabled={!pillName || !time}>
-            <Text>저장</Text>
+            <Text>{isEdit ? '수정' : '저장'}</Text>
           </CustomButton>
           {/* 취소 / 돌아가기 버튼 */}
-          <CustomButton onPress={() => navigate('Tabs', { screen: 'My' })}>
+          <CustomButton
+            onPress={() => navigate('Tabs', { screen: '마이 페이지' })}
+          >
             <Text>취소</Text>
           </CustomButton>
         </CustomButtonWrapper>

diff --git a/src/screen/MyPage.jsx b/src/screen/MyPage.jsx
@@ -1,7 +1,14 @@
 import styled from '@emotion/native';
-import { Text, View } from 'react-native';
+import { ScrollView, Text, View } from 'react-native';
 import { useQuery, useMutation, useQueryClient } from 'react-query';
-import { getDocs, query, collection, orderBy, where } from 'firebase/firestore';
+import {
+  getDocs,
+  query,
+  collection,
+  orderBy,
+  where,
+  doc,
+} from 'firebase/firestore';
 import {
   createUserWithEmailAndPassword,
   signInWithEmailAndPassword,
@@ -59,21 +66,46 @@ const MyPage = ({ navigation: { navigate } }) => {
     return getDocs(selectedDocs);
   };
 
+  // 기존 로직
   // 의존적 쿼리입니다. 사용자의 UID를 얻은 후에 통신이 가능합니다.
+  // const {
+  //   isLoading,
+  //   isError,
+  //   error,
+  //   data: pillList,
+  // } = useQuery('pill-list', () => getUsersPillList(uid), {
+  //   enabled: !!uid,
+  //   select: (data) => {
+  //     return data.docs.map((doc) => ({ ...doc.data(), id: doc.id }));
+  //   },
+  // });
+
+  // const renderPillList = pillList?.map(({ id, pillName }) => (
+  //   <ManageList key={id} id={id} pillName={pillName} />
+  // ));
+
+  // 임시 로직
+  const sampleUid = 'ALsTlRugmucb8QA1i8CVMNkSQgR2';
   const {
     isLoading,
     isError,
     error,
     data: pillList,
-  } = useQuery('pill-list', () => getUsersPillList(uid), {
-    enabled: !!uid,
+  } = useQuery('pill-list', () => getUsersPillList(sampleUid), {
+    enabled: !!sampleUid,
     select: (data) => {
       return data.docs.map((doc) => ({ ...doc.data(), id: doc.id }));
     },
   });
 
-  const renderPillList = pillList?.map(({ id, pillName }) => (
-    <ManageList key={id} id={id} pillName={pillName} />
+  const renderPillList = pillList?.map(({ id, pillName, time }) => (
+    <ManageList
+      key={id}
+      id={id}
+      pillName={pillName}
+      time={time}
+      navigate={navigate}
+    />
   ));
 
   // 에러 핸들링: 통신 실패의 경우 보여주는 화면입니다.
@@ -108,10 +140,17 @@ const MyPage = ({ navigation: { navigate } }) => {
       <AddPill onPress={() => handleLogin()}>
         <Text>임시 로그인</Text>
       </AddPill>
-      <AddPill onPress={() => navigate('Stacks', { screen: '수정 페이지' })}>
+      <ScrollView>{renderPillList}</ScrollView>
+      <AddPill
+        onPress={() =>
+          navigate('Stacks', {
+            screen: '수정 페이지',
+            params: { isEdit: false, eachPillName: '', eachTime: '' },
+          })
+        }
+      >
         <Text>약추가</Text>
       </AddPill>
-      {renderPillList}
       {/* TODO: 하단 tabs */}
     </MyPageContainer>
   );

diff --git a/src/shared/firebase.js b/src/shared/firebase.js
@@ -26,4 +26,3 @@ const firebaseConfig = {
 export const app = initializeApp(firebaseConfig);
 export const auth = getAuth(app);
 export const dbService = getFirestore(app);
-export const authService = getAuth(app);