Today I Learned

오늘 한일✅

• 달력 필터링을 구현하였다.

문제점✅

1. 내가 선택한 날짜를 useState를 사용하여 reverseDate에 넣고 db에 올라간 RsvHour_posting이랑 같으면 의존성 배열에 넣어 그 값이 바뀔때마다 실행하게끔 코드 구현을 하였다.

2. 코드 구현한 방식은 두번 호출하는것이기 때문에 접근 방식이 잘못되었다는 말을 들었다.

해결✅

1. 내가 AntCalendarMap에서 클릭한 날짜를 Category페이지에서 들고와야된다.
   달력에서 클릭한 date값을 setfilterSelectedDate 넣어준다.
   리코일을 사용하여 클릭한 값을 FilterSelectedDate 에 매개변수로 넘겨준다.

// AntCalendarMap.tsx
const AntCalendarMap: React.FC = () => {
  const format = 'YYYY/MM/DD';
  const [filterSelectedDate, setfilterSelectedDate] =
    useRecoilState<any>(FilterSelectedDate);

  const onChange: DatePickerProps['onChange'] = (date, dateString) => {
    setfilterSelectedDate(date);
  };

2. 클릭한 값은 useRecoilState을 사용하여 매개변수로 넘겨준 FilterSelectedDate초기값을 지정해준다.
   console.log(SelectedDate) 를 찍어보면 내가 클릭한 달력의 값이 가공이 되어 3/11(토) 잘 넘어온다.

// Category.tsx
//약속 시간
  const [meetDate, setMeetDate] = useRecoilState(FilterSelectedDate);

  const date = (y: number, m: number, d: number) => {
    const D = new Date(y, m, d);

    switch (D.getDay()) {
      case 0:
        return '(일)';
      case 1:
        return '(월)';
      case 2:
        return '(화)';
      case 3:
        return `(수)`;
      case 4:
        return `(목)`;
      case 5:
        return '(금)';
      case 6:
        return `(토)`;
      default:
        return '';
    }
  };

  const y = meetDate.$y;
  const m = meetDate.$M;
  const d = meetDate.$D;
  const month = meetDate.$M + 1;

  const SelectedDate = `${month}/${d} ${date(y, m, d)}`;

구현 방법✅

1. 조회순 필터링 기능을 위해postpage.tsx에 addDoc에 View 를 추가해준다.

// postpage.tsx

 addDoc(collection(dbService, 'Post'), {
                Description_Posting: Description,
                Nickname: userinfo?.mynickname,
                RsvDate_Posting,
                RsvHour_Posting,
                createdAt: Date.now(),
                TimeStamp_Posting: postTime,
                Title_Posting: Title,
                UID: postAuthor,
                PostingID_Posting,
                KeyForChat_Posting,
                Category_Posting: postCategory,
                ThumbnailURL_Posting: getThumbnail,
                BannerURL_Posting: getBanner,
                CountLiked_Posting: 0,
                ProceedState_Posting: posting,
                Address_Posting,
                MeetLongitude_Posting,
                MeetLatitude_Posting,
                Hashtag_Posting: Tag,
                LikedUsers: [],
                View: 0,

2. Detailpage에서 글 페이지를 들어갈때마다 getposting.view가 하나씩 증가하게 한다.

// Detailpage.tsx
// 조회순 카운트
  const UpdateView = async () => {
    const q = doc(dbService, 'Post', id);
    // dbService에 있는 getPostings.View + 1 를 View 넣어준다.
    // 글 페이지를 들어갈떄마다 getpostings.view가 하나씩 증가한다.
    await updateDoc(q, { View: getPostings.View + 1 });
  };

  // getPostings.View가 0보다 크거나 작으면 UpdateView()를 호출한다.
  useEffect(() => {
    if (getPostings.View >= 0) {
      UpdateView();
    }
  }, [isLoading]);

3. 최신 등록순으로 초기값을 설정해준다.

 // 조회순
  const [viewCount, setViewCount] = useState('최신 등록순');

 {/*최신순 / 조회순 / 좋아요순*/}
            <S.FilterSortWrapper>
              <S.FilterNewest onClick={() => setViewCount('최신 등록순')}>
                최신 등록순
                <S.FilterAreaLine></S.FilterAreaLine>
              </S.FilterNewest>
              <S.FilterNewest onClick={() => setViewCount('조회순')}>
                조회순
                <S.FilterAreaLine></S.FilterAreaLine>
              </S.FilterNewest>
              <S.FilterNewest onClick={() => setViewCount('좋아요 순')}>
                좋아요 순
              </S.FilterNewest>
            </S.FilterSortWrapper>

 // switch문
  const DoubleFilteredDateFunction = () => {
    switch (viewCount) {
      case '조회순':
        return [...FilteredDate].sort((a, b) => b.View - a.View);
      case '좋아요 순':
        return [...FilteredDate].sort(
          (a, b) => b.LikedUsers.length - a.LikedUsers.length
        );
      default:
        return FilteredDate;
    }
  };

  const DoubledFilterDate = DoubleFilteredDateFunction();

알게 된점✅

• 필터링 구현에서 너무 막막했는데 다른 팀원에게 물어보면서 하나하나 코드를 작성해 보니 내가 생각했던 것보다 어렵진 않았다:)