From fb925efbdbf64bcb3b09f6fbf307e8268a986de9 Mon Sep 17 00:00:00 2001
From: Dayoung Park <qkrekdud26@gmail.com>
Date: Mon, 9 Jan 2023 23:54:22 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20EditPage=20ADD,=20EDIT=20=EC=8B=9C=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=97=B0=EA=B2=B0=20#1=20#3=20'?=
 =?UTF-8?q?=ED=8E=B8=EC=A7=91'=EC=97=90=EC=84=9C=20EditPage=20=EB=93=A4?=
 =?UTF-8?q?=EC=96=B4=EC=98=AC=20=EB=95=8C=EC=99=80=20'=EC=83=88=EB=A1=9C?=
 =?UTF-8?q?=EC=9A=B4=20=EC=95=BD=20=EC=B6=94=EA=B0=80=ED=95=98=EA=B8=B0'?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20EditPage=20=EB=93=A4=EC=96=B4=EC=98=AC=20?=
 =?UTF-8?q?=EB=95=8C=20EditPage=20=EC=97=90=EC=84=9C=20=EB=B3=B4=EC=9D=B4?=
 =?UTF-8?q?=EB=8A=94=20Input=20=EA=B3=BC=20Button=20=EA=B0=92=EC=9D=84=20?=
 =?UTF-8?q?=EB=8B=A4=EB=A5=B4=EA=B2=8C=20=EA=B0=80=EC=A0=B8=EA=B0=80?=
 =?UTF-8?q?=EB=8A=94=20=EA=B8=B0=EB=8A=A5=EC=9D=84=20=EA=B5=AC=ED=98=84?=
 =?UTF-8?q?=ED=96=88=EC=8A=B5=EB=8B=88=EB=8B=A4.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ManageList.jsx | 10 +++++--
 src/screen/EditPage.jsx       | 21 +++++++++----
 src/screen/MyPage.jsx         | 55 ++++++++++++++++++++++++++++++-----
 src/shared/firebase.js        |  1 -
 4 files changed, 71 insertions(+), 16 deletions(-)

diff --git a/src/components/ManageList.jsx b/src/components/ManageList.jsx
index 15f7e87..928719e 100644
--- 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
index f6ed61e..84efdc7 100644
--- 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
index d374363..5dafbb7 100644
--- 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
index 14d8648..d72afea 100644
--- 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);