기사의 제목(헤드라인)을 표시하는 부분 생성

src/components/Headline.tsx

@@ -0,0 +1,25 @@
+import { Box, Typography, Stack } from '@mui/material';
+
+interface HeadlineProps {
+  title: string;
+  uploadDate: string;
+  viewCount: number;
+  source: string;
+}
+
+const Headline = ({ title, uploadDate, viewCount, source }: HeadlineProps) => {
+  return (
+    <Box>
+      <Typography mb={1} variant="h1">
+        {title}
+      </Typography>
+      <Stack alignItems="center" direction="row">
+        <Typography variant="h4">
+          {uploadDate} | 조회 {viewCount}회 | {source}
+        </Typography>
+      </Stack>
+    </Box>
+  );
+};
+
+export default Headline;

src/components/TagChip.tsx

@@ -0,0 +1,17 @@
+import Chip from '@mui/material/Chip';
+
+import color from '@/constants/color';
+
+const TagChip = ({ label }: { label: string }) => {
+  return (
+    <Chip
+      color="primary"
+      label={label}
+      sx={{
+        background: `linear-gradient(${color.gradient_blue_dark}, ${color.gradient_blue_light})`
+      }}
+    />
+  );
+};
+
+export default TagChip;

src/constants/color.ts

@@ -2,6 +2,8 @@ const color = {
   blue: '#4187FF',
   gray_light: '#F8F8F8',
   gray_dark: '#3E3E3E',
+  gradient_blue_dark: '#1D71F1', // 진한 파란색
+  gradient_blue_light: '#1AC6FB', // 밝은 파란색
 };
 
 export default color;