230217 팀프로젝트 9

오늘은 navigate hooks를 사용하는 것을 했다.
보통은 onclick으로 빠지는 방법으로 하다보니 엄청 헤맸다;;
그래서 다른 분들에게 조언을 구했는데
1. link to 사용
2. useNavigate 사용
을 권장받았다.

1번의 경우 시도해봤지만 실패했고....ㅎㅎ
그래서 2번인 useNavigate를 사용했다.

const navigate = useNavigate();
  const handeMoveToDetail = () => {
  // 상세페이지로 빠지는 navigate 함수
    navigate(`/matedetail/${item.id}`);
  };
  
  return (
  // 전체로 걸어줘서 카드를 누를 경우 상세페이지로 빠지게 설정
    <PostCard onClick={handeMoveToDetail}>
      <BookmarkIconBox>
        <Location>{item.partyLocation}</Location>
        <span>{item.bookmark}</span>
        <BsBookmarkHeart cursor="pointer" size="20px" />
      </BookmarkIconBox>

      <PostBox>
        <PostTitle>{item.partyPostTitile}</PostTitle>
        <PostDesc>{item.partyDesc}</PostDesc>
        <TechStackIcon>
          {item.partyStack.map((item, idx) => (
            <Tag key={idx} style={{ fontSize: 12 }} color="purple">
              {item}
            </Tag>
          ))}
        </TechStackIcon>
      </PostBox>

      <PartyStatusBox>
        <RecruitingBox>
          <Recruiting>
            {item.partyIsOpen === true ? (
              <span style={{ color: 'green' }}>모집 중</span>
            ) : (
              <span style={{ color: 'red' }}>모집완료</span>
            )}
          </Recruiting>
        </RecruitingBox>
        <HeadCountBox>
          <BsPeopleFill size="15px" />
          <HeadCount>{`: 1 / ${item.partyNum}`}</HeadCount>
        </HeadCountBox>
      </PartyStatusBox>

      <HorizontalLine />

      <PostInfo>
        <ProfileBox>
          <ProfileImage></ProfileImage>
          <NickName>{item.nickName}</NickName>
        </ProfileBox>
        <InfoBox>
          <GrFormView size="24px" />
          <PostView>12</PostView>
          <FaRegCommentDots size="15px" />
          <PostComments>3</PostComments>
        </InfoBox>
      </PostInfo>
    </PostCard>
  );

너무 쉽지 않나? 싶을 정도다
이번에 내장 hooks인 useNavigate를 알게 됐는데...
너무 유용하다!
넘겨줘야하는 페이지들이 너무 많은데 useNavigate쓰면 다 해결되서...ㅎㅎㅎㅎㅎ!!!