[23.01.12] TIL

오늘은 추천기능을 만들었다 'ㅅ'ㅎㅎ

글 1개에 1사람당 추천을 1번씩만 할 수 있도록 해야했기에 일단 로직을 어떻게 짤지 고민해봤는데, 다른 팀원분에게 힌트를 얻었다.

데이터에 uid를 넣으라는 것,

아..? 그럼 이렇게 해보자.

 

1. 글에 추천을 누르면 아이콘이 검정색<->하얀색 토글되게 하기

2. 아이콘이 검정색이 되면 uid를 데이터에 추가하고

3. 흰색이 되면 uid를 데이터에서 삭제되게 하기

 

간단한 로직이다.

옛날 같았으면 로직도 생각 못하고 멍때리기만 했을텐데.. 많이 발전했다 ㅎㅎㅎ

그리고 코드를 짰다.

 

1. 글에 추천을 누르면 아이콘이 검정색<->하얀색 토글되게 하기.

이건 먼저 눌렀을 때 uid가 데이터 안에 있는지 확인하고, 그걸 true,false로 나타내어 아이콘 토글을 하려고 변수를 만들어줬다.

const countCheck = word?.likingUser.includes(uid);

word라는 데이터 안에 likingUser라는 배열이 있고, includes를 통해 uid를 찾는다.

있으면 true가 반환, 없으면 false가 반환된다.

{!countCheck ? (
	<AntDesign name="like2" size={24} color="black" />
) : (
	<AntDesign name="like1" size={24} color="black" />
)}

그리고 name like1이 검정색아이콘, 2가 하얀색 아이콘인데 삼항연산자를 통해 변수 상태에 따라 토글링되게 만들어줬다.

 

그리고 이제 함수를 만들어야 할 차례인가..

위 코드를 버튼으로 감싸주고 onPress를 적용해준다.

await updateDoc(doc(dbService, 'Words', id), {
	likingUser: [...word.likingUser, uid],
});
getWord();

firebase에서 updateDoc을 통해 데이터를 변경해줄건데,

Words에있는 해당 id의 데이터 중 likingUser를 스프레드문법으로 괄호를 벗기고, uid를 추가해준다.

근데 나는 계속 추가하는게 아닌, 한번만 추천을 할 수 있도록 해야하기에 여기에 if문으로 countCheck의 상태가 false인지 한번 검증해줘야 한다.

만약에 countCheck의 상태가 true라면 아래의 코드가 실행된다.

await updateDoc(doc(dbService, 'Words', id), {
	likingUser: word.likingUser.filter((prev) => prev !== uid),
});

데이터에서 uid와 일치하지 않는것들만 추려서 새 배열을 만들어 반환한다.

	if (countCheck) {
        await updateDoc(doc(dbService, 'Words', id), {
          likingUser: word.likingUser.filter((prev) => prev !== uid),
        });

        getWord();
        // 추천을 한적이 없을 때 클릭 시 추천추가
      } else {
        await updateDoc(doc(dbService, 'Words', id), {
          likingUser: [...word.likingUser, uid],
        });
        getWord();
      }

그래서 완성한 코드이다.

근데 여기에서 뭐가 더 있었으면 좋겠다.

로그인을 안한상태에서는 추천을 못하게 해야할텐데..?

그래서 if문을 한번 더 감싸고, 비로그인 상태에서는 로그인 화면으로 이동할 수 있도록 조치해줬다.

const counter = async () => {
    // 추천을 한적이 있을 때 클릭 시 추천취소
    if (auth.currentUser) {
      if (countCheck) {
        await updateDoc(doc(dbService, 'Words', id), {
          likingUser: word.likingUser.filter((prev) => prev !== uid),
        });

        getWord();
        // 추천을 한적이 없을 때 클릭 시 추천추가
      } else {
        await updateDoc(doc(dbService, 'Words', id), {
          likingUser: [...word.likingUser, uid],
        });
        getWord();
      }
      // 로그인상태가 아니라면 로그인 화면으로 이동
    } else {
      Alert.alert('로그인이 필요합니다.', '로그인 페이지로 이동합니다', [
        {
          text: 'OK',
          style: 'default',
          onPress: () =>
            navigation.reset({
              index: 1,
              routes: [
                { name: 'Tabs', params: { screen: 'Home' } },
                {
                  name: 'Stacks',
                  params: {
                    screen: 'Login',
                  },
                },
              ],
            }),
        },
      ]);
    }
  };

네이티브는 뭐 씨.. alert창 여는것도 어렵다...

휴 이렇게 추천기능을 완성했다.

 

간단하지만은 않았던...ㅎㅎ

이제 조금씩 코딩에 대한 감이 잡히고 있는 것 같아 뿌듯하다.

프로젝트도 막바지이고 조금 쉬엄쉬엄 하면서 리프레시를 해주는것도 좋을 것 같당 'ㅇ'

다음 주 부터는 타입스크립트를 배운다는데 그것도 참 기대되고 있당

오늘으 ㅣ TIL은 끄..읏