devlog #2

은유로그·2022년 4월 28일
0

✍️ devlog

목록 보기
2/6

Today I did

  • post 컴포넌트 레이아웃 구현
  • 홈에서 쓸 경우 제목, 내용 라인 제한 기능 구현
  • 이미지 160px 고정 -> 디테일 페이지에서 수정 필요
  • 각 데이터 별로 props로 가져와서 사용할 수 있게끔 구현
  • ts로 styled-components props 사용할 수 있게 구현

간단 기록

post 컴포넌트

진짜 수만번 고민하고 결국 post 컴포넌트를 공통 컴포넌트로 쓸 수 있게끔 구상했다. 홈과 디테일 페이지 두 군데서 비슷한 결로 쓸 수 있기 때문에 세세하게 다른 기능은 props로 조절하면 되겠단 생각으로 공통 컴포넌트로 만들기로 마음 먹었다.

공통적으로 쓸 수 있는 기능은 <제목, 글 내용, 이미지, 좋아요 수, 댓글 수>이고,
세세하게 다른 기능은 아래와 같다.

  • 제목 : 1줄 제한
  • 글 내용 : 2줄 제한
  • 이미지 : 홈에선 없거나 1장 / 디테일에선 없거나 1장이거나 여러장 존재
  • 홈에선 뷰 카운트 수 존재

이미지 부분 빼고 props로 기능들을 구현했다. 구현한 방법은 아래와 같다.

ts로 styled-components 사용

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 크기로 정해두고 할지 고민이다 ㅠㅠ..


Tomorrow To Do

  • 카테고리 기능 구현
  • 뷰 카운트 기능 구현
  • 좋아요 기능 구현
profile
๑•‿•๑

0개의 댓글