240620 TIL

👩🏻‍💻 [아웃소싱 프로젝트 4일차] 🌱

 

날짜랑 해당 카테고리 보이게 하고 styled components 를 이용해서 스타일링했다. :>

 

 

---

🔜 오늘 프로젝트때 한 일 

• 날짜랑 카테고리 보이게 하고 스타일 주기 ✅
• 카테고리를 검색했을 때 해당 카테고리 post가 콘솔에 뿌려지는 건 확인함 ✅
• navbar에 카테고리 검색했을 때 (ex : 운동) 해당 post만 나오게 메인 페이지에 보이게 하기 ❌ 

 

🍀  해당 코드 

 

> 스타일 컴포넌트 

const StyledInformation = styled.p`
  font-size: 14px;
  color: #323232;
  float: right;
  margin-top: 15px;
  margin-right: 20px;
`;

 

 

> 리턴하는 코드 

return (
    <>
      <StyledLogoDiv></StyledLogoDiv>
      <MainMapTitle />

      <StyledMainMapsContainer>
        {posts
          .filter((post) => post.distance == null || post.distance <= 15)
          .map((post) => (
            <StyledMapsBox onClick={() => navigate(`/post-detail/${post.id}`)} key={post.id}>
              <StyledMapPhoto src={post.image} />
              <StyledSubHeading>{post.title}</StyledSubHeading>
              <StyledSubContent>{post.body}</StyledSubContent>
              <StyledInformation>
                {post.category} | {post.time}
              </StyledInformation>
            </StyledMapsBox>
          ))}
      </StyledMainMapsContainer>
    </>
  );
}

 

- styledinformation 부분이 날짜와 카테고리 스타일링

- {post.category} : 해당 카테고리가 나오게 함 (ex 운동,취미) 

- {post.time} : 작성한 시간이 보이게 함 

 

 

 

오늘 느낀 점 

 

-  화면에 보이게 뿌려지는건 코드를 뭘 써야할지 모르겠어서 내일 다시 해보는 걸로 ! 😓   

-  새로운 것을 도전해 볼 수 있는 계기가 되었다 :>