feat : 친구 목록 보기 + 친구 추가하기 ui 완료 ( 서버 api 완료 시 마무리 예정 )

[yeongipark]

구현한 것

1. 친구 목록에서 휴지통 버튼 누르면 사용자 삭제되는 거 구현완료

   // 친구 삭제 버튼 눌렀을 때 실행할 함수
   // 현재는 화면에서만 지우는데 백엔드에서 api 완료되면 삭제 요쳥까지 추가하기
   const handleDelete = (id) => {
   if (window.confirm("정말로 삭제하시겠습니까?")) {
     let arr = users.filter((item) => item.id !== id);
     setNum(arr.length); // 친구 삭제후 숫자 저장
     setUsers(arr);
     // 서버에게 삭제 요청 보내기
   }
   };

2. zustand로 친구 수 관리하여 부모 컴포넌트가 친구 수를 사용할 수 있게끔 구현

   // 친구 숫자 저장할 store
   export const useFriendNumStore = create((set) => ({
   num: 0,
   setNum: (num) => set(() => ({ num })),
   }));

3. 친구 추가 ui 완료

   • ui만 구현하여 기능은 없습니다
   • 체크 표시로 변경될 때 애니메이션 넣어봤습니다.

     // 체크 버튼으로 변경될 때 애니메이션 적용
     const fadeIn = keyframes`
     from{
     transform: scale(0);
     }
     to{
     transform: scale(1);
     }
     `;
     // 체크 버튼으로 변경될 때 애니메이션 적용
     const AnimationCheck = styled(FaCheck)`
     animation: ${fadeIn} 0.5s ease;
     `;

이슈

1. 매번 아이디 비번 입력하기 귀찮아서 임시로 login페이지 아이디 비번 state를 바로 로그인할 수 있도록 변경했습니다!

[jihyun132]

수고하셨습니다! 코드 보고 많이 배워가요!