👀 깃허브 링크
😎 클론 사이트 바로가기

---

⚠ 아직 부족한 점이 많아 정보 및 코드가 올바르지 않을 수 있습니다. 이 점 양해 부탁드리며 수정이 필요한 부분은 피드백 주시면 감사하겠습니다!

이슈가 있었던 부분은 제목 옆에 ❗를 붙였습니다.

---

➕ 기능 및 특징

※ '탐색하기'에서의 대부분 기능들은 Home(main)과 같으며 반복되는 코드들을 하나의 컴포넌트들로 묶어 재사용할 수 있게 했습니다.

• 검색창 및 트윗·사용자 탭
  • 반응형 액션 (답글, 리트윗, 좋아요, 북마크)
  • 유저 팔로우, 언팔로우 가능

---

✨ 검색창 및 트윗·사용자 탭

• 모든 트윗과 유저들을 볼 수 있게 '트윗·사용자' 탭으로 페이지를 구분했습니다.
  • 사용자 탭에서는 본인 계정을 제외하고 노출시켰습니다.
  • 팔로우는 반복 사용되기에 custom hooks으로 따로 빼내어 사용했습니다.
    
    
• 트윗, 사용자 리스트에서 각각의 오브젝트(프로필, 트윗) 클릭 시 해당 라우터로 이동하도록 했습니다.

└ 팔로우 custom hook

export const useToggleFollow = (myInfo) => {
  const dispatch = useDispatch();
  const currentUser = useSelector((state) => state.user.currentUser);

  const toggleFollow = async (userInfo) => {
    if (myInfo.following?.some((follow) => follow.email === userInfo.email)) {
      const followCopyFilter = myInfo.following.filter(
        (follow) => follow.email !== userInfo.email
      );

      const followerCopyFilter = userInfo.follower.filter(
        (follow) => follow.email !== myInfo.email
      );

      const updateMyInfo = () =>
        updateDoc(doc(dbService, "users", myInfo.email), {
          following: followCopyFilter,
        });

      const updateUserInfo = () =>
        updateDoc(doc(dbService, "users", userInfo.email), {
          follower: followerCopyFilter,
        });

      await Promise.all([updateMyInfo(), updateUserInfo()]).then(() => {
        dispatch(
          setCurrentUser({
            ...currentUser,
            following: followCopyFilter,
          })
        );
      });
    } else {
      const time = Date.now();

      const updateMyInfo = () =>
        updateDoc(doc(dbService, "users", myInfo.email), {
          following: [
            ...myInfo.following,
            { email: userInfo.email, followAt: time },
          ],
        });
      const updateUserInfo = () =>
        updateDoc(doc(dbService, "users", userInfo.email), {
          follower: [
            ...userInfo.follower,
            { email: myInfo.email, followAt: time },
          ],
        });

      await Promise.all([updateMyInfo(), updateUserInfo()]).then(() => {
        dispatch(
          setCurrentUser({
            ...currentUser,
            following: [
              ...myInfo.following,
              { email: userInfo.email, followAt: time },
            ],
          })
        );
      });
    }
  };

  return toggleFollow;
};