진짜 수만번 고민하고 결국 post 컴포넌트를 공통 컴포넌트로 쓸 수 있게끔 구상했다. 홈과 디테일 페이지 두 군데서 비슷한 결로 쓸 수 있기 때문에 세세하게 다른 기능은 props로 조절하면 되겠단 생각으로 공통 컴포넌트로 만들기로 마음 먹었다.
공통적으로 쓸 수 있는 기능은 <제목, 글 내용, 이미지, 좋아요 수, 댓글 수>이고,
세세하게 다른 기능은 아래와 같다.
이미지 부분 빼고 props로 기능들을 구현했다. 구현한 방법은 아래와 같다.
const Content = styled.p<DetailProps>`
${(props) => {
const homeCss = `
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
`;
const detailCss = `
display: flex;
`;
return props.isDetail ? detailCss : homeCss;
}}
`;
interface DetailProps {
isDetail: boolean;
}
// render
<Content isDetail={isDetail ? true : false}>{content}</Content>
ts는 타입 지정하는 것이 제일 중요한 포인트이기 때문에!! props로 조건별 스타일링을 하고싶다면 위 코드와 같이 interface에 사용할 props의 타입을 지정하고 사용하면 된다. (참고한 공식 글)
글자 수 제한 기능은 아래에 적어둔 css 코드로 구현했다. (참고한 블로그)
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
웹뷰 크기를 어느 정도로 지정해야할지 고민이다.. 모바일용은 맞는데, 반응형 웹 구현할 때 모바일은 보통 미디어 쿼리 768px로 지정하는데 애초에 width를 768px로 정해두고 구현할지 아님 피그마에 나와있는 width 크기로 정해두고 할지 고민이다 ㅠㅠ..