feat: /newsのデザイン

src/app/_variables.scss

@@ -1,2 +1,7 @@
 $tablet-width: 768px;
-$pages-max-width: 1080px;
+$pages-max-width: 1080px;
+$hovering-color: #7FCC8F;
+$span-color: #47B660;
+$heroImage-change-width: 1280px;
+$header-change-width: 1200px;
+$background-color: #F1F1F1;

src/app/news/page.module.scss

@@ -0,0 +1,115 @@
+@use 'src/app/variables';
+
+/* heroImageとヘッダーのpadding調整 */
+@media (min-width: variables.$heroImage-change-width) {
+  .heroImage {
+    height: 60vh;
+  }
+}
+
+@media (max-width: variables.$heroImage-change-width) {
+  .heroImage {
+    height: 100%;
+  } 
+}
+
+@media (max-width: variables.$header-change-width) {
+  .main {
+    padding-top: 64px;
+  }
+}
+
+@media (min-width: variables.$header-change-width) {
+  .main {
+    padding-top: 72px;
+  }
+}
+
+/* 画面幅が768px以下の場合のスタイル */
+@media (max-width: variables.$tablet-width) {
+  .breadcrumb {
+    height: 28px;
+  }
+
+  .breadcrumbLink {
+    font-size: 0.75rem; // 12px
+  }
+
+  .contentTitle {
+    margin: 0px 16px;
+    padding: 24px 0px 0px;
+    font-size: 1.5rem; // 24px
+  }
+}
+
+/* 画面幅が768px以上の場合のスタイル */
+@media (min-width: variables.$tablet-width) {
+  .breadcrumb {
+    height: 64px;
+  }
+
+  .breadcrumbLink {
+    font-size: 1.5rem; // 24px
+  }
+
+  .contents {
+    max-width: variables.$pages-max-width;
+  }
+
+  .contentTitle {
+    margin: 0px 40px;
+    padding: 40px 0px 0px;
+    font-size: 2.5rem; // 40px
+  }
+}
+
+/* 共通 */
+.heroImage {
+  width: 100%;
+  object-fit: cover;
+}
+
+.main {
+  flex-direction: column;
+  background-color: variables.$background-color;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  background-color: variables.$background-color;
+}
+
+.hero {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+  background-color: variables.$background-color;
+}
+
+.breadcrumb {
+  width: 100%;
+  background-color: black;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.breadcrumbLink {
+  color: white;
+  text-decoration: none;
+}
+
+.contents {
+  width: 100%;
+  margin: 40px auto;
+  background-color: #fff;
+  box-shadow: 2px 2px 4px gray;
+}
+
+.contentTitle {
+  font-weight: normal;
+  border-bottom: 1px solid black;
+  width: 4em;
+}

src/app/news/page.tsx

@@ -1,7 +1,9 @@
 import path from 'path';
-import type { Metadata } from 'next';
+import { Metadata } from 'next';
 import Link from 'next/link';
-import { Doc, getMarkdowns } from '../../utils/markdown';
+import { getMarkdowns } from '../../utils/markdown';
+import style from './page.module.scss';
+import { NewsPageList } from '@/components/news-page-list';
 
 export const metadata: Metadata = {
   title: 'News',
@@ -20,13 +22,25 @@ export default async function News() {
   );
 
   return (
-    <div>
-      <h1>News</h1>
-      {docs.map((doc) => (
-        <div key={doc.slug}>
-          <Link href={`/news/${doc.slug}`}>{doc.frontmatter.title}</Link>
+    <div className={style.container}>
+      <main className={style.main}>
+        <div className={style.hero}>
+          <img src='/images/hero.png' alt='Hero' className={style.heroImage} />
+          <div className={style.breadcrumb}>
+            <Link href='/' className={style.breadcrumbLink}>
+              Top
+            </Link>
+            <p className={style.breadcrumbLink}>&nbsp;&gt;&nbsp;</p>
+            <Link href='/news' className={style.breadcrumbLink}>
+              News
+            </Link>
+          </div>
         </div>
-      ))}
+        <div className={style.contents}>
+          <h1 className={style.contentTitle}>新着情報</h1>
+          <NewsPageList />
+        </div>
+      </main>
     </div>
   );
 }

src/app/page.module.scss

@@ -1,30 +1,25 @@
 @use 'src/app/variables';
-$hovering-color: #7FCC8F;
-$span-color: #47B660;
-$heroImage-change-width: 1280px;
-$header-change-width: 1200px;
-$background-color: #F1F1F1;
 
 /* heroImageとヘッダーのpadding調整 */
-@media (min-width: $heroImage-change-width) {
+@media (min-width: variables.$heroImage-change-width) {
   .heroImage {
     height: 60vh;
   }
 }
 
-@media (max-width: $heroImage-change-width) {
+@media (max-width: variables.$heroImage-change-width) {
   .heroImage {
     height: 100%;
   } 
 }
 
-@media (max-width: $header-change-width) {
+@media (max-width: variables.$header-change-width) {
   .main {
     padding-top: 64px;
   }
 }
 
-@media (min-width: $header-change-width) {
+@media (min-width: variables.$header-change-width) {
   .main {
     padding-top: 72px;
   }
@@ -42,7 +37,7 @@ $background-color: #F1F1F1;
 
   .contentTitle {
     margin: 20px;
-    font-size: 1.25rem; // 20px
+    font-size: 1.5rem; // 24px
   }
 
   .aboutText {
@@ -211,21 +206,21 @@ $background-color: #F1F1F1;
 
 .main {
   flex-direction: column;
-  background-color: $background-color;
+  background-color: variables.$background-color;
 }
 
 .container {
   display: flex;
   flex-direction: column;
-  background-color: $background-color;
+  background-color: variables.$background-color;
 }
 
 .hero {
   align-items: center;
   justify-content: center;
   display: flex;
   flex-direction: column;
-  background-color: $background-color;
+  background-color: variables.$background-color;
 }
 
 .breadcrumb {
@@ -311,15 +306,15 @@ $background-color: #F1F1F1;
 }
 
 .breadcrumbLink:hover {
-  color: $hovering-color;
+  color: variables.$hovering-color;
 }
 
 .bold {
   font-weight: bold;
 }
 
 .span {
-  color: $span-color;
+  color: variables.$span-color;
 }
 
 .news {

src/components/NewsLinkCard/NewsLinkCard.module.scss

@@ -0,0 +1,97 @@
+@use '/src/app/variables';
+
+@media (max-width: variables.$tablet-width) {
+  .container {
+    margin: 16px;
+  }
+
+  .headForMobile {
+    display: flex;
+    gap: 16px;
+    .date {
+      font-size: 1rem; // 16px
+      margin: 0px;
+      color: black;
+    }
+  }
+
+  .dateForPC {
+    display: none;
+  }
+
+  .title {
+    font-size: 1.25rem; // 20px
+  }
+
+  .head {
+    margin: 8px 0px;
+    .group {
+      display: none;
+    }
+  }
+}
+
+@media (min-width: variables.$tablet-width) {
+  .container {
+    margin: 24px;
+  }
+
+  .dateForMobile {
+    display: none;
+  }
+
+  .dateForPC {
+    color: black;
+    text-decoration: none;
+    font-size: 1rem; // 16px
+    margin: 4px 0px 0px;
+  }
+
+  .headForMobile {
+    display: none;
+  }
+}
+
+.container {
+  display: flex;
+  gap: 16px;
+}
+
+.card {
+  text-decoration: none;
+  width: 100%;
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.title {
+  margin: 0px;
+  color: black;
+}
+
+.learn {
+  color: #439154;
+  margin: 0px;
+  font-weight: bold;
+}
+
+.text {
+  color: black;
+  font-size: 0.875rem; // 14px
+  margin: 8px 0px;
+  overflow-wrap: break-word;
+}
+
+.group {
+  font-size: 0.75rem; // 12px
+  color: #fff;
+  text-align: center;
+  margin: 0px;
+  padding: 4px 8px;
+  background-color: #439154;
+  white-space: nowrap;
+}

src/components/NewsLinkCard/NewsLinkCard.stories.tsx

@@ -0,0 +1,29 @@
+import { StoryFn, Meta } from '@storybook/react';
+import React from 'react';
+import { NewsLinkCard } from './NewsLinkCard';
+
+export default {
+  title: 'Components/LinkCard',
+  component: NewsLinkCard,
+  argTypes: {
+    style: { control: 'object' },
+    title: { control: 'text' },
+    content: { control: 'text' },
+    date: { control: 'text' },
+    group: { control: 'text' },
+    to: { control: 'text' },
+  },
+} as Meta;
+
+const Template: StoryFn<typeof NewsLinkCard> = (args) => (
+  <NewsLinkCard {...args} />
+);
+export const Default = Template.bind({});
+
+Default.args = {
+  title: 'Maximum Cup 2023',
+  content: 'description',
+  date: '2024/08',
+  group: 'Web研',
+  to: '/',
+};