feat: Create member page (#341)

* chore: Fix Not found page * chore: Add loading properties to img tag * feat: Add member's photo * chore: Update snapshot * feat: Create member component * chore: Move component because of name was same * chore: Fix styleing of member card * chore: Update tailwind config * feat: Create member page template * chore: Format code * chore: Update snapshot * chore: Rename to lower_snake case * chore: Add button to link to top page * feat: Create member page * chore: Format code
suzuka-kosen-festa · Oct 25, 2022 · 9a1bece · 9a1bece
1 parent 46dc4cf
commit 9a1bece
Show file tree

Hide file tree

Showing 67 changed files with 803 additions and 9 deletions.
diff --git a/public/statics/members/akane_ito.webp b/public/statics/members/akane_ito.webp
diff --git a/public/statics/members/akinori_asai.webp b/public/statics/members/akinori_asai.webp
diff --git a/public/statics/members/ayaka_ito.webp b/public/statics/members/ayaka_ito.webp
diff --git a/public/statics/members/haruka_iwata.webp b/public/statics/members/haruka_iwata.webp
diff --git a/public/statics/members/haruka_kawamura.webp b/public/statics/members/haruka_kawamura.webp
diff --git a/public/statics/members/hina_inagaki.webp b/public/statics/members/hina_inagaki.webp
diff --git a/public/statics/members/iota_komatani.webp b/public/statics/members/iota_komatani.webp
diff --git a/public/statics/members/junsei_yahata.webp b/public/statics/members/junsei_yahata.webp
diff --git a/public/statics/members/kanta_maeda.webp b/public/statics/members/kanta_maeda.webp
diff --git a/public/statics/members/kazuyuki_yasuda.webp b/public/statics/members/kazuyuki_yasuda.webp
diff --git a/public/statics/members/keiichiro_masuda.webp b/public/statics/members/keiichiro_masuda.webp
diff --git a/public/statics/members/keito_kobayashi.webp b/public/statics/members/keito_kobayashi.webp
diff --git a/public/statics/members/keito_yada.webp b/public/statics/members/keito_yada.webp
diff --git a/public/statics/members/kosei_sakai.webp b/public/statics/members/kosei_sakai.webp
diff --git a/public/statics/members/kota_yamashita.webp b/public/statics/members/kota_yamashita.webp
diff --git a/public/statics/members/kotone_okada.webp b/public/statics/members/kotone_okada.webp
diff --git a/public/statics/members/marin_arakawa.webp b/public/statics/members/marin_arakawa.webp
diff --git a/public/statics/members/miku_tsuji.webp b/public/statics/members/miku_tsuji.webp
diff --git a/public/statics/members/minami_iwasaki.webp b/public/statics/members/minami_iwasaki.webp
diff --git a/public/statics/members/nana_tsutsui.webp b/public/statics/members/nana_tsutsui.webp
diff --git a/public/statics/members/nana_wada.webp b/public/statics/members/nana_wada.webp
diff --git a/public/statics/members/nanako_taniguchi.webp b/public/statics/members/nanako_taniguchi.webp
diff --git a/public/statics/members/natsumi_aoki.webp b/public/statics/members/natsumi_aoki.webp
diff --git a/public/statics/members/ohjiro_yoshitake.webp b/public/statics/members/ohjiro_yoshitake.webp
diff --git a/public/statics/members/raito_kimura.webp b/public/statics/members/raito_kimura.webp
diff --git a/public/statics/members/riho_takahashi.webp b/public/statics/members/riho_takahashi.webp
diff --git a/public/statics/members/rikuto_kuwahara.webp b/public/statics/members/rikuto_kuwahara.webp
diff --git a/public/statics/members/rintaro_itokawa.webp b/public/statics/members/rintaro_itokawa.webp
diff --git a/public/statics/members/rui_takeuchi.webp b/public/statics/members/rui_takeuchi.webp
diff --git a/public/statics/members/ryubi_kobayashi.webp b/public/statics/members/ryubi_kobayashi.webp
diff --git a/public/statics/members/sakura_tanaka.webp b/public/statics/members/sakura_tanaka.webp
diff --git a/public/statics/members/shoma_kobayashi.webp b/public/statics/members/shoma_kobayashi.webp
diff --git a/public/statics/members/shoya_hasegawa.webp b/public/statics/members/shoya_hasegawa.webp
diff --git a/public/statics/members/takuma_koto.webp b/public/statics/members/takuma_koto.webp
diff --git a/public/statics/members/tatsuki_nagaoka.webp b/public/statics/members/tatsuki_nagaoka.webp
diff --git a/public/statics/members/yoshiki_chuma.webp b/public/statics/members/yoshiki_chuma.webp
diff --git a/public/statics/members/yuki_miyata.webp b/public/statics/members/yuki_miyata.webp
diff --git a/public/statics/members/yumea_kobayashi.webp b/public/statics/members/yumea_kobayashi.webp
diff --git a/public/statics/members/yuta_goto.webp b/public/statics/members/yuta_goto.webp
diff --git a/public/statics/members/yuuno_yamamoto.webp b/public/statics/members/yuuno_yamamoto.webp
diff --git a/public/statics/members/yuzuki_ichikawa.webp b/public/statics/members/yuzuki_ichikawa.webp
diff --git a/src/components/molecules/bazaar-card/__snapshots__/bazaar-card.test.tsx.snap b/src/components/molecules/bazaar-card/__snapshots__/bazaar-card.test.tsx.snap
@@ -9,6 +9,7 @@ exports[`(components) molecules/bazaar-card > take snap shot 1`] = `
       alt="バザーに関するイメージ画像"
       class="css-61q9gc-BazaarCard"
       height="300"
+      loading="lazy"
       src="https://panproduct.com/blog/wp-content/uploads/2021/07/32.png"
       width="450"
     />

diff --git a/src/components/molecules/bazaar-card/index.tsx b/src/components/molecules/bazaar-card/index.tsx
@@ -36,6 +36,7 @@ const BazaarCard: FC<BazaarCardProperties> = ({ name, description, image, prices
       alt="バザーに関するイメージ画像"
       width={450}
       height={300}
+      loading="lazy"
     />
     <BazaarCardContent>
       <Chip group={group} />

diff --git a/src/components/molecules/member-card/__snapshots__/member-card.test.tsx.snap b/src/components/molecules/member-card/__snapshots__/member-card.test.tsx.snap
@@ -0,0 +1,25 @@
+// Vitest Snapshot v1
+
+exports[`(components) molecules/member > take snap shot 1`] = `
+<div>
+  <figure>
+    <img
+      alt="Rintaro Itokawa"
+      class="css-crfi3p-MemberCard"
+      height="300"
+      loading="lazy"
+      src="/statics/members/rintaro_itokawa.webp"
+      width="450"
+    />
+    <figcaption
+      class="css-1mlw4fg-MemberCard"
+    >
+      <p
+        class="css-uqq0xe"
+      >
+        Rintaro Itokawa
+      </p>
+    </figcaption>
+  </figure>
+</div>
+`;
diff --git a/src/components/molecules/member-card/index.tsx b/src/components/molecules/member-card/index.tsx
@@ -0,0 +1,28 @@
+import type { FC } from "react";
+import tw, { css } from "twin.macro";
+import type { MemberCardProperties } from "./types/model";
+
+const Position = tw.p`font-zen font-bold underline text-xs sm:text-2xl`;
+
+const Name = tw.p`font-zen font-bold text-xs sm:text-2xl`;
+
+const MemberCard: FC<MemberCardProperties> = ({ imagePath, name, position = "other" }) => (
+  <figure>
+    <img
+      css={css`
+        aspect-ratio: 3 / 2;
+      `}
+      src={imagePath}
+      alt={name}
+      width={450}
+      height={300}
+      loading="lazy"
+    />
+    <figcaption css={[tw`flex items-center justify-center`, position !== "other" ? tw`space-x-4 sm:space-x-8` : null]}>
+      {position === "other" ? null : <Position>{position === "leader" ? "LEADER" : "SUB LEADER"}</Position>}
+      <Name>{name}</Name>
+    </figcaption>
+  </figure>
+);
+
+export { MemberCard };
diff --git a/src/components/molecules/member-card/member-card.stories.tsx b/src/components/molecules/member-card/member-card.stories.tsx
@@ -0,0 +1,53 @@
+import type { ComponentStoryObj, ComponentMeta } from "@storybook/react";
+import { ComponentPropsWithoutRef } from "react";
+import { MemberCard } from ".";
+
+type T = typeof MemberCard;
+type Story = ComponentStoryObj<T>;
+type Meta = ComponentMeta<T>;
+
+const args: ComponentPropsWithoutRef<T> = {
+  imagePath: "/statics/members/rintaro_itokawa.webp",
+  name: "Rintaro Itokawa",
+};
+
+export default {
+  args,
+  argTypes: {
+    imagePath: {
+      description: "Pass the path to photo",
+      control: {
+        type: "text",
+      },
+    },
+    name: {
+      description: "Name of member",
+      control: {
+        type: "text",
+      },
+    },
+    position: {
+      description: "Position in the members",
+      control: {
+        type: "text",
+      },
+    },
+  },
+  component: MemberCard,
+} as Meta;
+
+export const Default: Story = {};
+export const LEADER: Story = {
+  args: {
+    imagePath: "/statics/members/rikuto_kuwahara.webp",
+    name: "Rikuto Kuwahara",
+    position: "leader",
+  },
+};
+export const SUB: Story = {
+  args: {
+    imagePath: "/statics/members/shoma_kobayashi.webp",
+    name: "Shoma Kobayashi",
+    position: "sub",
+  },
+};
diff --git a/src/components/molecules/member-card/member-card.test.tsx b/src/components/molecules/member-card/member-card.test.tsx
@@ -0,0 +1,25 @@
+import { composeStories } from "@storybook/testing-react";
+import "@testing-library/jest-dom";
+import { render } from "@testing-library/react";
+import * as stories from "./member-card.stories";
+
+const { Default } = composeStories(stories);
+
+const options = {
+  name: "",
+};
+
+describe("(components) molecules/member", () => {
+  test("to be molecules", () => {
+    const { container } = render(<Default />);
+    expect(container).toBeMolecule();
+  });
+  test("to be [role=figure]", () => {
+    const { getByRole } = render(<Default />);
+    expect(getByRole("figure", options));
+  });
+  test("take snap shot", () => {
+    const { container } = render(<Default />);
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/components/molecules/member-card/types/model.ts b/src/components/molecules/member-card/types/model.ts
@@ -0,0 +1,11 @@
+const Position = {
+  leader: "LEADER",
+  sub: "SUB LEADER",
+  other: "",
+};
+
+export type MemberCardProperties = {
+  imagePath: string;
+  name: string;
+  position?: keyof typeof Position;
+};
diff --git a/src/components/molecules/title/__snapshots__/title.test.tsx.snap b/src/components/molecules/title/__snapshots__/title.test.tsx.snap
@@ -9,6 +9,7 @@ exports[`(components) molecules/title > (blue) take snap shot 1`] = `
       alt="ink"
       class="css-mhf7w5-Title"
       height="580"
+      loading="eager"
       src="/statics/Ink3_blue.webp"
       width="592"
     />
@@ -30,6 +31,7 @@ exports[`(components) molecules/title > (default) take snap shot 1`] = `
       alt="ink"
       class="css-mhf7w5-Title"
       height="580"
+      loading="eager"
       src="/statics/Ink3_yellow.webp"
       width="592"
     />
@@ -51,6 +53,7 @@ exports[`(components) molecules/title > (green) take snap shot 1`] = `
       alt="ink"
       class="css-mhf7w5-Title"
       height="580"
+      loading="eager"
       src="/statics/Ink3_green.webp"
       width="592"
     />
@@ -72,6 +75,7 @@ exports[`(components) molecules/title > (purple) take snap shot 1`] = `
       alt="ink"
       class="css-mhf7w5-Title"
       height="580"
+      loading="eager"
       src="/statics/Ink3_purple.webp"
       width="592"
     />
@@ -93,6 +97,7 @@ exports[`(components) molecules/title > (red) take snap shot 1`] = `
       alt="ink"
       class="css-mhf7w5-Title"
       height="580"
+      loading="eager"
       src="/statics/Ink3_red.webp"
       width="592"
     />
@@ -114,6 +119,7 @@ exports[`(components) molecules/title > (yellow) take snap shot 1`] = `
       alt="ink"
       class="css-mhf7w5-Title"
       height="580"
+      loading="eager"
       src="/statics/Ink3_yellow.webp"
       width="592"
     />

diff --git a/src/components/molecules/title/index.tsx b/src/components/molecules/title/index.tsx
@@ -38,6 +38,7 @@ const Title: FC<TitleProperties> = ({ children, colorKey, ...rest }) => {
         alt="ink"
         width={592}
         height={580}
+        loading="eager"
       />
       <TitleContainer>{children}</TitleContainer>
     </TitleWrapper>

diff --git a/src/components/organisms/map-section/__snapshots__/map-section.test.tsx.snap b/src/components/organisms/map-section/__snapshots__/map-section.test.tsx.snap
@@ -21,6 +21,7 @@ exports[`(components) organisms/map-section > take snap shot 1`] = `
         alt="校内マップ"
         class="css-1h35ydv-MapSection"
         height="2915"
+        loading="lazy"
         src="/statics/map.webp"
         width="4128"
       />

diff --git a/src/components/organisms/map-section/index.tsx b/src/components/organisms/map-section/index.tsx
@@ -27,6 +27,7 @@ const MapSection: FC<MapSectionProperties> = ({ title, ...rest }) => (
         alt="校内マップ"
         width={4128}
         height={2915}
+        loading="lazy"
       />
     </MapContainer>
   </MapSectionContainer>

diff --git a/src/components/templates/bazaar/__snapshots__/bazaar.test.tsx.snap b/src/components/templates/bazaar/__snapshots__/bazaar.test.tsx.snap
@@ -13,6 +13,7 @@ exports[`(components) templates/bazaar > take snap shot 1`] = `
         alt="ink"
         class="css-mhf7w5-Title"
         height="580"
+        loading="eager"
         src="/statics/Ink3_green.webp"
         width="592"
       />
@@ -59,6 +60,7 @@ exports[`(components) templates/bazaar > take snap shot 1`] = `
             alt="バザーに関するイメージ画像"
             class="css-61q9gc-BazaarCard"
             height="300"
+            loading="lazy"
             src="https://panproduct.com/blog/wp-content/uploads/2021/07/32.png"
             width="450"
           />
@@ -104,6 +106,7 @@ exports[`(components) templates/bazaar > take snap shot 1`] = `
             alt="バザーに関するイメージ画像"
             class="css-61q9gc-BazaarCard"
             height="300"
+            loading="lazy"
             src="https://panproduct.com/blog/wp-content/uploads/2021/07/32.png"
             width="450"
           />
@@ -149,6 +152,7 @@ exports[`(components) templates/bazaar > take snap shot 1`] = `
             alt="バザーに関するイメージ画像"
             class="css-61q9gc-BazaarCard"
             height="300"
+            loading="lazy"
             src="https://panproduct.com/blog/wp-content/uploads/2021/07/32.png"
             width="450"
           />
@@ -194,6 +198,7 @@ exports[`(components) templates/bazaar > take snap shot 1`] = `
             alt="バザーに関するイメージ画像"
             class="css-61q9gc-BazaarCard"
             height="300"
+            loading="lazy"
             src="https://panproduct.com/blog/wp-content/uploads/2021/07/32.png"
             width="450"
           />
@@ -239,6 +244,7 @@ exports[`(components) templates/bazaar > take snap shot 1`] = `
             alt="バザーに関するイメージ画像"
             class="css-61q9gc-BazaarCard"
             height="300"
+            loading="lazy"
             src="https://panproduct.com/blog/wp-content/uploads/2021/07/32.png"
             width="450"
           />
@@ -284,6 +290,7 @@ exports[`(components) templates/bazaar > take snap shot 1`] = `
             alt="バザーに関するイメージ画像"
             class="css-61q9gc-BazaarCard"
             height="300"
+            loading="lazy"
             src="https://panproduct.com/blog/wp-content/uploads/2021/07/32.png"
             width="450"
           />
@@ -329,6 +336,7 @@ exports[`(components) templates/bazaar > take snap shot 1`] = `
             alt="バザーに関するイメージ画像"
             class="css-61q9gc-BazaarCard"
             height="300"
+            loading="lazy"
             src="https://panproduct.com/blog/wp-content/uploads/2021/07/32.png"
             width="450"
           />