TIL_52_230110

52일 차 회고

프로젝트

• 로그인 후 마이페이지에서 내정보 수정하기

import {
  collection,
  onSnapshot,
  orderBy,
  query,
  where,
  addDoc,
} from 'firebase/firestore';
import { authService, dbService } from '../firebase';
import { useFocusEffect } from '@react-navigation/native';
import { signOut } from 'firebase/auth';

const MyPage = ({ navigation: { navigate, reset, setOptions } }) => {

  const newProfile = {
    nickName,
    profileText,
    userId: authService.currentUser?.uid,
    createdAt: Date.now(),
  };

  const addProfile = async () => {
    if (nickName && profileText) {
      await addDoc(collection(dbService, 'profile'), newProfile);
      setIsOpenModal(!isOpenModal);
      setNickName('');
      setProfileText('');
    } else {
      if (!nickName) {
        alert('닉네임을 입력해주세요.');
      } else if (!profileText) {
        alert('자기소개를 입력해주세요.');
      }
    }
  };
  const logout = () => {
    signOut(authService)
      .then(() => {
        console.log('로그아웃 성공');
        navigate('Slide');
      })
      .catch((err) => alert(err));
  };

  useFocusEffect(
    useCallback(() => {
      if (!authService.currentUser) {
        reset({
          index: 1,
          routes: [
            {
              name: 'Tabs',
              params: {
                screen: 'Slide',
              },
            },
            {
              name: 'Stacks',
              params: {
                screen: 'Login',
              },
            },
          ],
        });
        return;
      }

      setOptions({
        headerRight: () => {
          return (
            <TouchableOpacity style={{ marginRight: 10 }} onPress={logout}>
              <Text>로그아웃</Text>
            </TouchableOpacity>
          );
        },
      });

      const q = query(
        collection(dbService, 'profile'),
        orderBy('createdAt', 'desc'),
        where('userId', '==', authService.currentUser?.uid)
      );
      onSnapshot(q, (snapshot) => {
        const newProfiles = snapshot.docs.map((doc) => {
          const newProfile = {
            id: doc.id,
            ...doc.data(),
          };
          return newProfile;
        });
        setProfile(newProfiles);
      });
    }, [])
  );
  const profileFirst = profile[0];

  return (
    <>
      <MypageTop>
        <ProfileId>{profileFirst?.nickName ?? '닉네임없음'}</ProfileId>
        <ProfileText>
          {profileFirst?.profileText ?? '안녕하세요. 반갑습니다.'}
        </ProfileText>
        <ProfileBTN
          onPress={() => {
            setIsOpenModal(true);
          }}
        >
          <BTNText>내 정보 수정</BTNText>
        </ProfileBTN>
      </MypageTop>
    </>
  );
};

export default MyPage;

1.새로운프로필이 없을 경우 텍스트 고정

• 처음 로그인 하고 마이페이지에 들어갔을 경우 닉네임 없음, 안녕하세요~ 로 텍스트를 고정시킨다.

 <ProfileId>{profileFirst?.nickName ?? '닉네임없음'}</ProfileId>
 <ProfileText>
 {profileFirst?.profileText ?? '안녕하세요. 반갑습니다.'}
</ProfileText>

2. 새로운 내 정보 등록

• newProfile 로 닉네임, 자기소개, 사용자아이디, 등록날짜 를 등록한다.

  const newProfile = {
    nickName,
    profileText,
    userId: authService.currentUser?.uid,
    createdAt: Date.now(),
  };

3. 유효성 검사 및 firebase 및 로그아웃

const addProfile = async () => {
    if (nickName && profileText) {
      await addDoc(collection(dbService, 'profile'), newProfile);
      setIsOpenModal(!isOpenModal);
      setNickName('');
      setProfileText('');
    } else {
      if (!nickName) {
        alert('닉네임을 입력해주세요.');
      } else if (!profileText) {
        alert('자기소개를 입력해주세요.');
      }
    }
  };
  const logout = () => {
    signOut(authService)
      .then(() => {
        console.log('로그아웃 성공');
        navigate('Slide');
      })
      .catch((err) => alert(err));
  };

4. onSnapshot을 통해 reade

useFocusEffect(
    useCallback(() => {
      if (!authService.currentUser) {
        reset({
          index: 1,
          routes: [
            {
              name: 'Tabs',
              params: {
                screen: 'Slide',
              },
            },
            {
              name: 'Stacks',
              params: {
                screen: 'Login',
              },
            },
          ],
        });
        return;
      }

      setOptions({
        headerRight: () => {
          return (
            <TouchableOpacity style={{ marginRight: 10 }} onPress={logout}>
              <Text>로그아웃</Text>
            </TouchableOpacity>
          );
        },
      });

      const q = query(
        collection(dbService, 'profile'),
        orderBy('createdAt', 'desc'),
        where('userId', '==', authService.currentUser?.uid)
      );
      onSnapshot(q, (snapshot) => {
        const newProfiles = snapshot.docs.map((doc) => {
          const newProfile = {
            id: doc.id,
            ...doc.data(),
          };
          return newProfile;
        });
        setProfile(newProfiles);
      });
    }, [])
  );
  const profileFirst = profile[0];