diff --git a/src/components/global/Aside.tsx b/src/components/global/Aside.tsx
new file mode 100644
index 0000000..2a896fd
--- /dev/null
+++ b/src/components/global/Aside.tsx
@@ -0,0 +1,12 @@
+// Components
+import SectionTitle from './SectionTitle';
+
+const Aside = () => {
+ return (
+
+ );
+};
+
+export default Aside;
diff --git a/src/components/global/SectionTitle.tsx b/src/components/global/SectionTitle.tsx
new file mode 100644
index 0000000..9089c0c
--- /dev/null
+++ b/src/components/global/SectionTitle.tsx
@@ -0,0 +1,9 @@
+interface Props {
+ title: string;
+}
+
+const SectionTitle = ({ title }: Props) => {
+ return
{title}
;
+};
+
+export default SectionTitle;
diff --git a/src/pages/News.tsx b/src/pages/News.tsx
index f5b9f1a..6d8431f 100644
--- a/src/pages/News.tsx
+++ b/src/pages/News.tsx
@@ -1,5 +1,6 @@
// Components
import NewsItem from '../components/news/NewsItem';
+import Aside from '../components/global/Aside';
const News = () => {
return (
@@ -7,6 +8,7 @@ const News = () => {
diff --git a/src/styles/_aside.scss b/src/styles/_aside.scss
new file mode 100644
index 0000000..1c33cd5
--- /dev/null
+++ b/src/styles/_aside.scss
@@ -0,0 +1,6 @@
+.title {
+ font-size: 2.4rem;
+ color: $main;
+ border-bottom: 0.1rem solid $main;
+ padding: 0.8rem 2.4rem;
+}
diff --git a/src/styles/_news.scss b/src/styles/_news.scss
index c1e4785..ae4dd09 100644
--- a/src/styles/_news.scss
+++ b/src/styles/_news.scss
@@ -1,7 +1,7 @@
.news-inner {
display: grid;
- grid-template-columns: 1fr minmax(60rem, 30rem);
- gap: 4.8rem;
+ grid-template-columns: 1fr minmax(50rem, 30rem);
+ gap: 4rem;
padding: 6.4rem 0;
}
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 58dff6d..b7b0d3a 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -4,3 +4,4 @@
@import './footer';
@import './video';
@import './news';
+@import './aside';