먼저 파이어스토어에서 이전에 작성한 트윗 모두 지우고 시작하자!

트윗 작성자 정보 넣기

트윗을 누가 했는지 알기 위해 로그인한 사용자의 정보를 받아와야 한다.
App.js에서 모든 auth를 처리하고 있기 때문에 다음과 같이 처리하자.

• App.js > Router.js > Home.js으로 prop으로 유저 정보를 보내주자.

📍 App.js

1. useState()를 사용하여 로그인한 유저 정보를 담는 오브젝트 state를 만든다. 디폴트 값은 일단 아무도 없으니까 null로 하면 된다.

   • const [userObj, setUserObj] = useState(null);

2. 모디파이어를 사용하여 로그인한 유저 정보를 userObj에 업데이트한다.

   • setUserObj(user);

     function App() {
     //생략
     
     //🔥로그인한 유저 정보 담은 오브젝트 state, 디폴트 값은 일단 아무도 없으니까 null
     const [userObj, setUserObj] = useState(null);
     
     useEffect(() => {
      const auth = getAuth();
      //유저 변화가 있는지 listen하기: onAuthStateChanged관찰자 사용
      //onAuthStateChanged은 콜백이 필요한데, 콜백은 user이다.
      onAuthStateChanged(auth, (user) => {
        //user가 있다면 로그인 참으로 바꿔주고, 아니라면 로그인 거짓으로
        if (user) {
          setIsLoggedIn(true);
          //🔥로그인하면 로그인한 유저 정보 userObj에 업데이트
          setUserObj(user);
        } else {
          setIsLoggedIn(false);
        }
        //그러고 나서 초기화 시켜라
        setInit(true);
      });
     }, []);

3. 로그인한 유저 정보인 userObj를 prop으로 Router로 보낸다.

   {/*로그인한 user 정보 AppRouter로 보내기*/}
   <AppRouter isLoggedIn={isLoggedIn} userObj={userObj} />

📍 Router.js

1. AppRouter에서 로그인한 유저 정보인 userObj를 받는다.

   //🔥로그인한 유저 정보 userObj 받기
   const AppRouter = ({ isLoggedIn, userObj }) => {
   //...
   };
   //...

2. 로그인한 유저정보(userObj)를 prop으로 Home컴포넌트에 보낸다.

   {/*🔥로그인한 유저정보(userObj)를 prop으로 Home컴포넌트에 보내기*/}
   <Route path="/" element={<Home userObj={userObj} />}></Route>

📍 Home.js

1. Home에서 로그인한 유저 정보인 userObj를 받는다.

   const Home = ({ userObj }) => {
   //...
   }

2. onSubmit 핸들러에서 트윗하기 누르면 새로운 document를 생성하는 부분에 트윗 작성자(creatorId)에 userObj 오브젝트의 uid를 넣어 주면 된다.

   • tweet: tweet이던 부분 text: tweet으로 key 값을 수정해주자.(편하려고 하는거임 ㅇㅇ!)
   • 그리고 렌더 되는 부분도 <h4>{tweet.text}</h4> 라고 바꿔주자.

     const onSubmit = async (event) => {
     event.preventDefault();
     //트윗하기 누르면 새로운 document 생성하기
     try {
      const docRef = await addDoc(collection(dbService, "tweets"), {
        //🔥트윗 작성자에 userObj 오브젝트의 uid를 넣어 주면 된다.
        creatorId: userObj.uid,
        text: tweet, //tweet(value로 tweet state 값)
        createdAt: serverTimestamp(), //Date.now(),로 해도 되지만 이왕 있는거 함 써보자(타임존 동북아3 = 서울로 설정되어 있음)
      });
      console.log("Document written with ID: ", docRef.id);
     } catch (error) {
      console.error("Error adding document: ", error);
     }
     //state 비워서 form 비우기
     setTweet("");
     };