[update] メンバーページを作成

Author: shibe97

app/members/layout.module.css

@@ -0,0 +1,16 @@
+.container {
+  position: relative;
+  background-color: #fff;
+  width: 840px;
+  margin: -40px auto 0;
+  padding: 80px;
+  border-radius: 8px;
+}
+
+@media (max-width: 640px) {
+  .container {
+    width: calc(100% - 32px);
+    margin: -40px auto 0;
+    padding: 40px 16px;
+  }
+}

app/members/layout.tsx

@@ -0,0 +1,19 @@
+import Hero from '@/components/Hero';
+import styles from './layout.module.css';
+
+export const metadata = {
+  title: 'メンバー｜Simple Blog',
+};
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export default async function RootLayout({ children }: Props) {
+  return (
+    <>
+      <Hero title="Members" sub="メンバー" />
+      <div className={styles.container}>{children}</div>
+    </>
+  );
+}

app/members/page.module.css

@@ -0,0 +1,73 @@
+.text {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.list {
+  display: flex;
+  gap: 40px;
+  margin-bottom: 80px;
+}
+
+.list:nth-child(even) {
+  flex-direction: row-reverse;
+}
+
+.image {
+  width: 240px;
+  height: 240px;
+  border-radius: var(--border-radius);
+}
+
+.name {
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+
+.position {
+  margin-bottom: 8px;
+}
+
+.profile {
+  font-size: 0.9rem;
+}
+
+.footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-top: 1px solid var(--color-border);
+  padding-top: 40px;
+  text-align: center;
+  gap: 24px;
+}
+
+.message {
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+@media (max-width: 640px) {
+  .text {
+    text-align: left;
+  }
+
+  .list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 24px;
+  }
+
+  .list:nth-child(even) {
+    flex-direction: column;
+  }
+
+  .name {
+    text-align: center;
+  }
+
+  .position {
+    text-align: center;
+  }
+}

app/members/page.tsx

@@ -0,0 +1,37 @@
+import Image from 'next/image';
+import { getMembersList } from '@/libs/microcms';
+import styles from './page.module.css';
+import ButtonLink from '@/components/ButtonLink';
+
+export const revalidate = 60;
+
+export default async function Page() {
+  const data = await getMembersList();
+  return (
+    <div className={styles.container}>
+      <ul>
+        {data.contents.map((member) => (
+          <li key={member.id} className={styles.list}>
+            <Image
+              src={member.image?.url as string}
+              alt=""
+              width={member.image?.width}
+              height={member.image?.height}
+              className={styles.image}
+            />
+            <dl>
+              <dt className={styles.name}>{member.name}</dt>
+              <dd className={styles.position}>{member.position}</dd>
+              <dd className={styles.profile}>{member.profile}</dd>
+            </dl>
+          </li>
+        ))}
+      </ul>
+      <div className={styles.footer}>
+        <h2 className={styles.message}>We are hiring</h2>
+        <p>私たちは共にチャレンジする仲間を募集しています。</p>
+        <ButtonLink href="">採用情報へ</ButtonLink>
+      </div>
+    </div>
+  );
+}

components/Menu/index.tsx

@@ -18,6 +18,11 @@ export default function Menu() {
               ニュース
             </Link>
           </li>
+          <li>
+            <Link href="/members" onClick={close}>
+              メンバー
+            </Link>
+          </li>
           <li>
             <Link href="/recruit" onClick={close}>
               採用情報

libs/microcms.ts

@@ -22,6 +22,14 @@ export type News = {
   category: Category;
 };
 
+// メンバーの型定義
+export type Member = {
+  name: string;
+  position: string;
+  profile: string;
+  image?: MicroCMSImage;
+};
+
 export type Article = News & MicroCMSContentId & MicroCMSDate;
 
 if (!process.env.MICROCMS_SERVICE_DOMAIN) {
@@ -86,3 +94,14 @@ export const getCategoryDetail = async (contentId: string, queries?: MicroCMSQue
 
   return detailData;
 };
+
+// メンバー一覧を取得
+export const getMembersList = async (queries?: MicroCMSQueries) => {
+  const listData = await client
+    .getList<Member>({
+      endpoint: 'members',
+      queries,
+    })
+    .catch(notFound);
+  return listData;
+};

next.config.js

@@ -1,4 +1,13 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'images.microcms-assets.io',
+      },
+    ],
+  },
+};
 
 module.exports = nextConfig;