style: 💄 markup the projects page

components/Layout.tsx

@@ -9,7 +9,7 @@ export const Layout: React.FC<Props> = ({ children }) => {
   return (
     <div>
       <Header />
-      <div className="container px-4 mx-auto lg:max-w-5xl lg:mt-12">
+      <div className="container px-4 mx-auto lg:max-w-6xl lg:mt-12">
         {children}
       </div>
     </div>

components/ProjectsList.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { useProjectsQuery } from '../__generated__/types'
+
+import { ProjectsListItem } from './ProjectsListItem'
+
+export const ProjectsList: React.FC = () => {
+  const { data } = useProjectsQuery()
+
+  return (
+    <div className="flex flex-wrap">
+      {data?.projects?.map((project) => {
+        return (
+          <div key={project?.id} className="p-4 lg:w-1/3 w-full md:w-1/2">
+            <ProjectsListItem
+              id={project?.id}
+              title={project?.title}
+              image={project?.imageUrlLarge}
+            />
+          </div>
+        )
+      })}
+    </div>
+  )
+}

components/ProjectsListItem.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import Link from 'next/link'
+import Image from 'next/image'
+
+type Props = {
+  id?: string
+  title?: string
+  image?: string | null
+}
+
+export const ProjectsListItem: React.FC<Props> = ({ id, title, image }) => {
+  return (
+    <Link href={`/projects/${id}`}>
+      <a>
+        <div className="transition duration-300 bg-white shadow-md rounded-3xl group hover:shadow-lg hover:scale-105">
+          <Image
+            alt={`${title}の画像`}
+            src={image ? image : './noImage.png'}
+            width={1956}
+            height={796}
+            className="object-cover object-center w-full transition duration-300 rounded-t-3xl saturate-150"
+          />
+          <div className="p-6">
+            <h2 className="mb-1 text-xl font-bold text-gray-900 transition duration-300 group-hover:text-blue-500">
+              {title}
+            </h2>
+          </div>
+        </div>
+      </a>
+    </Link>
+  )
+}

graphql/queries/projects.graphql

@@ -2,15 +2,6 @@ query Projects {
   projects {
     id
     title
-    whyDescription
-    whatDescription
-    howDescription
-    imageUrlSmall
     imageUrlLarge
-    staffs {
-      id
-      name
-      avatarUrl
-    }
   }
 }

next.config.js

@@ -1,5 +1,8 @@
 const config = {
   reactStrictMode: true,
+  images: {
+    domains: ['d2fde157oxqkl4.cloudfront.net'],
+  },
 }
 
 module.exports = config

pages/_app.tsx

@@ -30,9 +30,10 @@ const App = ({ Component, pageProps }: AppProps) => {
       </Head>
       <DefaultSeo {...SEO} />
       <style global jsx>{`
-        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
         body {
           font-family: 'Noto Sans JP', sans-serif;
+          background-color: #fafafa;
         }
       `}</style>
       <Component {...pageProps} />

pages/index.tsx

@@ -1,30 +1,20 @@
 import React from 'react'
 import { Layout } from '../components/Layout'
+import Link from 'next/link'
 import { NextSeo } from 'next-seo'
-import { useProjectsQuery } from '../generated/graphql'
 
 const Home: React.FC = () => {
-  const { data, loading } = useProjectsQuery()
-
-  if (loading) {
-    return <div>loading...</div>
-  } else {
-    return (
-      <Layout>
-        <NextSeo
-          title="Wantedly"
-          description="Wantedly Frontend Internship 選考課題"
-        />
-        <div>
-          {!data?.projects
-            ? null
-            : data.projects.map((project) => {
-                return <div key={project?.id}>{project?.title}</div>
-              })}
-        </div>
-      </Layout>
-    )
-  }
+  return (
+    <Layout>
+      <NextSeo
+        title="Wantedly"
+        description="Wantedly Frontend Internship 選考課題"
+      />
+      <Link href="/projects">
+        <a>募集リストを見る</a>
+      </Link>
+    </Layout>
+  )
 }
 
 export default Home

pages/projects/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Layout } from '../../components/Layout'
+import { NextSeo } from 'next-seo'
+
+import { ProjectsList } from '../../components/ProjectsList'
+
+const ProjectsListPage: React.FC = () => {
+  return (
+    <Layout>
+      <NextSeo
+        title="Projects - Wantedly"
+        description="Wantedly Frontend Internship 選考課題"
+      />
+      <ProjectsList />
+    </Layout>
+  )
+}
+
+export default ProjectsListPage