MemberCardの作成

.storybook/preview.tsx

@@ -1,6 +1,8 @@
 import type { Preview } from '@storybook/react';
+import 'devicon/devicon.min.css';
 import React from 'react';
 import { I18nextProvider } from 'react-i18next';
+import '../app/app.css';
 import "../app/i18n/config";
 import i18n from '../app/i18n/config';
 

Makefile

@@ -15,3 +15,6 @@ init:
 
 tree:
 	@tree -da -I "node_modules|.git|.react-router"
+
+test:
+	@npx eslint

app/app.css

@@ -1,15 +1,25 @@
 @import "tailwindcss";
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
 
 @theme {
   --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
+:root {
+  --main-text-color: #242525;
+  --grey-text-color: #9D9F9F;
+  --accent-color: #F5F5F5;
+  --based-color: #242525;
+}
+
 html,
 body {
   @apply bg-white dark:bg-gray-950;
 
   @media (prefers-color-scheme: dark) {
     color-scheme: dark;
   }
+
+  font-family: "Noto Sans JP";
 }

app/components/Devicon/Devicon.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Devicon } from './Devicon';
+
+const meta = {
+  title: 'Common/Devicon',
+  component: Devicon,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    color: { control: 'color' },
+  },
+} satisfies Meta<typeof Devicon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Icon: Story = {
+  args: {
+    icon: 'storybook',
+    tooltip: 'disable',
+    size: '100px'
+  },
+};
+
+export const IconWithTooltip: Story = {
+  args: {
+    icon: 'storybook',
+    tooltip: 'enable',
+    size: '100px'
+  },
+};

app/components/Devicon/Devicon.tsx

@@ -0,0 +1,39 @@
+
+import { Tooltip } from '../Tooltip/Tooltip';
+
+export interface DeviconProps {
+  icon: string;
+  tooltip?: 'enable' | 'disable';
+  color?: string;
+  size?: string;
+  className?: string;
+}
+
+const abbreviation: Record<string, string> = {
+  "aws": "amazonwebservices",
+}
+
+export const Devicon = ({
+  icon,
+  tooltip = 'enable',
+  color = "var(--based-color)",
+  size = "20px",
+  className = "",
+  ...props
+}: DeviconProps) => {
+  const Icon = (
+    <i
+      className={`devicon-${abbreviation[icon] ?? icon}-plain ${className}`}
+      style={{ color, fontSize: size }}
+      {...props}
+    />
+  );
+
+  return (
+    (tooltip === 'disable') ?
+    Icon :
+    <Tooltip content={icon}>
+      {Icon}
+    </Tooltip>
+  );
+};

app/components/MemberCard/MemberCard.stories.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { MemberCard } from './MemberCard';
+
+const meta = {
+  title: 'Card/MemberCard',
+  component: MemberCard,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof MemberCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LoggedIn: Story = {
+  args: {
+    name: "Naoto Kido",
+    role: "代表",
+    description: "よわよわプログラマ",
+    stacks: ["kubernetes", "aws", "java", "go", "flutter"],
+    headerImage: "https://pbs.twimg.com/profile_banners/1846395762277826560/1737992837/1500x500",
+    iconImage: "https://avatars.githubusercontent.com/u/54303857",
+    githubName: "naoido",
+  },
+};

app/components/MemberCard/MemberCard.tsx

@@ -0,0 +1,75 @@
+import { useTranslation } from 'react-i18next';
+import { Devicon } from '../Devicon/Devicon';
+import './member-card.css';
+
+export interface MemberCardProps {
+  name: string;
+  role: string;
+  description: string,
+  stacks: string[];
+  headerImage: string;
+  iconImage: string;
+  githubName: string;
+}
+
+export const MemberCard = ({
+  name,
+  role,
+  description,
+  stacks,
+  headerImage,
+  iconImage,
+  githubName,
+  ...props
+}: MemberCardProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <div 
+      className='container'
+      { ...props }
+    >
+      <div 
+        className='header'
+        style={{backgroundImage: `url(${headerImage})`}}
+      >
+        <div 
+          className='icon'
+          style={{backgroundImage: `url(${iconImage})`}}
+        />
+      </div>
+      <div className='profile-container'>
+        <h1 className='name'>{ name }</h1>
+        <h2 className='role'>{ role }</h2>
+        <p className='description'>{ description }</p>
+        <p className='stack-title'>{ t("card.memberCard.stack") }</p>
+        <div className='stack-container'>
+          {
+            stacks.map((stack, i) => (
+              <Devicon
+                key={i}
+                icon={stack}
+                size='32px'
+              />
+            ))
+          }
+        </div>
+        <div className='github-container'>
+          <Devicon 
+            icon='github' 
+            size='24px' 
+            tooltip='disable'
+          />
+          <a
+            href={`https://github.com/${githubName}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className='github-username'
+          >
+            {githubName}
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};

app/components/MemberCard/member-card.css

@@ -0,0 +1,92 @@
+.container {
+  width: 435px;
+  background-color: var(--accent-color);
+}
+
+.header {
+  height: 166px;
+  background-size: cover;
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+.header::after {
+  content: "";
+  background-color: #0000003d;
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.icon {
+  position: absolute;
+  height: 106px;
+  width: 106px;
+  border-radius: 100%;
+  bottom: -53px;
+  background-size: cover;
+  box-shadow: #afafaf 0 4px 4px;
+}
+
+.name {
+  text-align: center;
+  font-size: 30px;
+  font-weight: 300;
+  margin-top: 64px;
+  letter-spacing: 1px;
+  color: var(--main-text-color);
+}
+
+.role {
+  text-align: center;
+  font-size: 16px;
+  font-weight: 300;
+  letter-spacing: 1px;
+  color: var(--main-text-color);
+}
+
+.description {
+  text-align: center;
+  font-size: 16px;
+  font-weight: 300;
+  margin-top: 28px;
+  letter-spacing: 1px;
+  color: var(--main-text-color);
+}
+
+.stack-title {
+  text-align: center;
+  font-size: 16px;
+  font-weight: 300;
+  margin-top: 27px;
+  color: var(--grey-text-color);
+}
+
+.stack-container {
+  height: 50px;
+  width: 100%;
+  border-bottom: solid 1px var(--based-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.stack-container > * {
+  margin: 0 8px;
+}
+
+.github-container {
+  display: flex;
+  height: 40px;
+  justify-content: center;
+  align-items: center;
+}
+
+.github-username {
+  text-align: center;
+  font-size: 16px;
+  font-weight: 300;
+  margin-left: 8px;
+  color: var(--main-text-color);
+}

app/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Tooltip } from './Tooltip';
+
+const meta = {
+  title: 'Common/Tooltip',
+  component: Tooltip,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const BottomTooltip: Story = {
+  args: {
+    content: 'content',
+    location: 'bottom',
+    children: (
+      <button>クリック</button>
+    )
+  },
+};

app/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,52 @@
+
+import { useRef, useState, type ReactNode } from 'react';
+import './tooltip.css';
+
+export interface TooltipProps {
+  content: string;
+  children: ReactNode;
+  location?: 'top' | 'bottom' | 'left' | 'right';
+  duration?: number,
+  color?: string;
+  backgroundColor?: string;
+}
+
+export const Tooltip = ({
+  content,
+  children,
+  duration = 1000,
+  location = 'bottom',
+  color = "#ffffff",
+  backgroundColor = "#242525",
+  ...props
+}: TooltipProps) => {
+  const [visible, setVisible] = useState(false);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const click = () => {
+    setVisible(true);
+
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+
+    timerRef.current = setTimeout(() => setVisible(false), duration);
+  }
+
+  return (
+    <div
+      className='tooltip-container'
+      onClick={click}
+      {...props}
+    >
+      { children }
+      <div 
+        style={{color, '--tooltip-bg': backgroundColor} as React.CSSProperties}
+        className={`tooltip-box tooltip-${location}`}
+        data-visible={visible}
+      >
+        { content }
+      </div>
+    </div>
+  );
+};