Chore/#318 : 꿀팁 페이지 라우팅 추가 & 홈 화면 디자인 수정

[hwinkr]

🤠 개요

• closes : Chore: 건의사항, 꿀팁 페이지 라우팅 추가 & 홈 화면 디자인 수정 #318

💫 설명

• 꿀팁 페이지 라우팅 카드를 추가 했어요
  • InformHalfCard 컴포넌트를 재사용하기 위해서 render props를 활용했어요

interface InformHalfCardProps extends React.HTMLAttributes<HTMLDivElement> {
  asset: () => JSX.Element;
  title: string;
  subTitle: string;
}

const InformHalfCard = ({
  asset,
  title,
  subTitle,
  ...props
}: InformHalfCardProps) => {
  return (
    <Container {...props}>
      {asset()}
	  //...
    </Container>
  );
};

이렇게 한 이유는

• 채용, 어학 정보 카드 컴포넌트는 Icon 컴포넌트 사용
• 꿀팁 페이지 카드 컴포넌트는 Image 컴포넌트 사용

두 종류의 카드 컴포넌트의 UI가 동일한데 다른 에셋을 사용한다고 해서 두개의 컴포넌트를 따로 만들고 싶지 않아서 render props를 활용했어요

• WebpImage 컴포넌트를 추가로 구현해서 재사용할 수 있도록 했어요 (TipImage) 컴포넌트에서 재사용중이에요
• 홈 화면에서 사용하는 카드 컴포넌트들의 배경색을 IVORY에서 WHITE로 변경했어요, box-shadow를 사용해서 배경과 구분해요

📷 스크린샷 (Optional)

[pp449]

#320 추가 반영 부탁드려요~