feat: トップ画面の作成

.github/workflows/lint.yaml

@@ -1,11 +1,14 @@
-name: Lint
+name: Prettier & ESLint
 
 on:
-  pull_request
-
-permissions:
-  checks: write
-  contents: write
+  # Trigger the workflow on push or pull request,
+  # but only for the main branch
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
 
 jobs:
   run-linters:
@@ -14,9 +17,20 @@ jobs:
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 21
+
+      # ESLint and Prettier must be in `package.json`
+      - name: Install Node.js dependencies
+        run: yarn install
 
       - name: Run linters
         uses: wearerequired/lint-action@v2
         with:
           eslint: true
+          prettier: true
+          eslint_args: --ext .ts,.tsx ./src

.vscode/settings.json

@@ -1,3 +1,10 @@
 {
-  "cSpell.words": ["fontsource", "localstorage", "meibo", "Noto Sans"]
-}
+  "cSpell.words": [
+    "antd",
+    "fontsource",
+    "hoverable",
+    "localstorage",
+    "meibo",
+    "Noto Sans"
+  ]
+}

src/components/pages/top/body.tsx

@@ -1,19 +1,30 @@
 import { type ReactElement } from 'react';
+import styled from 'styled-components';
+import TopList from './list';
 import { type User } from '@/types/user';
 
+const UserList = styled.div`
+  display: grid;
+  justify-content: left;
+  margin: 0 auto;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+  padding: 20px;
+`;
+
 interface Props {
-  user: User<false>;
+  users: Array<User<false>>;
 }
 
 const TopBody = (props: Props): ReactElement => {
-  const { user } = props;
+  const { users } = props;
 
   return (
-    <div key={user.id}>
-      <p>
-        {user.lastName} {user.firstName}
-      </p>
-    </div>
+    <UserList>
+      {users.map((user) => (
+        <TopList key={user.id} user={user} />
+      ))}
+    </UserList>
   );
 };
 

src/components/pages/top/index.tsx

@@ -10,7 +10,8 @@ const TopPage = (): ReactElement => {
     <main>
       {users.state === 'hasError' && <p>エラー</p>}
       {users.state === 'loading' && <p>ローディング中</p>}
-      {users.state === 'hasData' && users.data.map((user) => <TopBody key={user.id} user={user} />)}
+
+      {users.state === 'hasData' && <TopBody users={users.data} />}
     </main>
   );
 };

src/components/pages/top/list.tsx

@@ -0,0 +1,39 @@
+import { Card } from 'antd';
+import { type ReactElement } from 'react';
+import styled from 'styled-components';
+import { type User } from '@/types/user';
+
+const UserCard = styled.div`
+  padding: 5px;
+
+  h3 {
+    font-size: 1.5em;
+  }
+`;
+
+interface Props {
+  user: User<false>;
+}
+
+const TopBody = (props: Props): ReactElement => {
+  const { user } = props;
+
+  return (
+    <div>
+      {user.type === 'active' && (
+        <UserCard>
+          <Card cover={<img alt="icon" src={user.iconUrl} />} hoverable>
+            <p>
+              [{user.grade}] {user.studentNumber}
+              <h3>
+                {user.lastName} {user.firstName}
+              </h3>
+            </p>
+          </Card>
+        </UserCard>
+      )}
+    </div>
+  );
+};
+
+export default TopBody;

src/stores/usersAtom.ts

@@ -16,7 +16,7 @@ const fetchUsers = async (): Promise<Array<User<false>>> => {
       skills: ['JavaScript', 'TypeScript', 'React'],
       graduationYear: 2027,
       slackName: '',
-      iconUrl: '',
+      iconUrl: 'https://via.placeholder.com/50',
       type: 'active',
       grade: 'B1',
       position: '部員',
@@ -31,6 +31,21 @@ const fetchUsers = async (): Promise<Array<User<false>>> => {
       skills: ['JavaScript', 'TypeScript', 'React'],
       graduationYear: 2027,
       slackName: '',
+      iconUrl: 'https://via.placeholder.com/50',
+      type: 'active',
+      grade: 'B1',
+      position: '部員',
+      studentNumber: 'k23075',
+    },
+    {
+      id: '',
+      firstName: 'さとる',
+      lastName: '佐藤',
+      firstNameKana: '',
+      lastNameKana: '',
+      skills: ['JavaScript', 'TypeScript', 'React'],
+      graduationYear: 2027,
+      slackName: '',
       iconUrl: '',
       type: 'active',
       grade: 'B1',