✨feat: ContentHeader.jsx - 한눈에 보기 탭에서 사용될 통합 헤더 컴포넌트 구현

#54

src/pages/main/contents-item/ContentHeader.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { HeaderContentDiv } from "./ContentHeader.style";
+
+export default function ContentHeader(props) {
+  return (
+    <HeaderContentDiv>
+      <img style={{ width: "60px", height: "60px" }} src={props.imgUrl}></img>
+      <span style={{ fontSize: "24px", color: "#2E2E30" }}>
+        <strong
+          style={{
+            fontSize: "30px",
+          }}
+        >
+          "{props.keyword}"
+        </strong>
+        {props.description}
+      </span>
+    </HeaderContentDiv>
+  );
+}

src/pages/main/contents-item/ContentHeader.style.js

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const HeaderContentDiv = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 1rem;
+`;