feat: Show search results for SPARCS users

src/api/paginated.ts

@@ -1,6 +1,6 @@
 import { z } from 'zod'
 
-type Paginated<T> = {
+export type Paginated<T> = {
   data: T[]
   pageInfo: {
     page: number

src/app/home.module.scss

@@ -15,3 +15,17 @@
 
     background-color: transparent;
 }
+
+.searchResult {
+    padding: 2rem 0;
+
+    th,
+    td {
+        text-align: left;
+        padding: 0.5rem 1rem;
+    }
+}
+
+.searchResultTable {
+    padding-bottom: 1rem;
+}

src/app/home.tsx

@@ -1,16 +1,98 @@
-import type { FC } from 'react'
+import { type FC, useRef, useState } from 'react'
 import { Form } from 'react-router'
+import { Paginated } from '@/api/paginated'
+import { searchSparcsUsers } from '@/api/user-sparcs'
+import { Pagination } from '@/components/pagination/pagination'
 import styles from './home.module.scss'
 
-export const Home: FC = () => (
-  <main className={styles.main}>
-    <Form action="/user">
-      <input
-        type="search"
-        placeholder="이름 or 닉네임"
-        name="q"
-        className={styles.search}
-      />
-    </Form>
-  </main>
-)
+type SparcsUser = {
+  id: number
+  nickname: string
+  fullName: string
+}
+
+const PAGE_SIZE = 10
+const INITIAL_PAGE = 0
+
+export const Home: FC = () => {
+  const [paginatedSparcsUsers, setPaginatedSparcsUsers] = useState<
+    Paginated<SparcsUser> | undefined
+  >()
+  const formRef = useRef<HTMLFormElement | null>(null)
+
+  const handleSearchPage = async (
+    e?: React.FormEvent<HTMLFormElement>,
+    page: number = INITIAL_PAGE,
+    size: number = PAGE_SIZE,
+  ) => {
+    if (e) {
+      e.preventDefault()
+    }
+
+    if (!formRef.current) {
+      return
+    }
+
+    const formData = new FormData(formRef.current)
+    const q = formData.get('q') as string
+
+    if (!q) {
+      setPaginatedSparcsUsers(undefined)
+      return
+    }
+
+    const paginatedSparcsUsers = await searchSparcsUsers({
+      q,
+      page,
+      size,
+    })
+
+    setPaginatedSparcsUsers(paginatedSparcsUsers)
+  }
+
+  return (
+    <main className={styles.main}>
+      <Form
+        action="/user"
+        onSubmit={(e) => handleSearchPage(e, INITIAL_PAGE)}
+        ref={formRef}
+      >
+        <input
+          type="search"
+          placeholder="이름 or 닉네임"
+          name="q"
+          className={styles.search}
+        />
+      </Form>
+      <div className={styles.searchResult}>
+        {paginatedSparcsUsers?.data.length ? (
+          <>
+            <table className={styles.searchResultTable}>
+              <thead>
+                <tr>
+                  <th>이름</th>
+                  <th>닉네임</th>
+                </tr>
+              </thead>
+              <tbody>
+                {paginatedSparcsUsers?.data.map((user) => (
+                  <tr key={user.id}>
+                    <td>{user.fullName}</td>
+                    <td>{user.nickname}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+            <Pagination
+              currentPage={paginatedSparcsUsers.pageInfo.page}
+              totalPages={paginatedSparcsUsers.pageInfo.totalPages}
+              onClickPage={(page) => handleSearchPage(undefined, page)}
+            />
+          </>
+        ) : (
+          <span>검색 결과가 없습니다.</span>
+        )}
+      </div>
+    </main>
+  )
+}

src/components/pagination/pagination.module.scss

@@ -0,0 +1,23 @@
+.paginationButton {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+
+    border: 1px solid var(--clr-button-border);
+    background-color: transparent;
+
+    &:hover {
+        background-color: var(--clr-button-hover-bg);
+        cursor: pointer;
+    }
+
+    &:active {
+        background-color: var(--clr-button-active-bg);
+    }
+}
+
+.paginationButtonSelected {
+    @extend .paginationButton;
+
+    background-color: var(--clr-button-selected-bg);
+}

src/components/pagination/pagination.tsx

@@ -0,0 +1,36 @@
+import { FC } from 'react'
+import styles from './pagination.module.scss'
+
+export const Pagination: FC<{
+  currentPage: number
+  totalPages: number
+  onClickPage: (page: number) => void
+}> = ({ currentPage, totalPages, onClickPage }) => {
+  const currentPageIndex = currentPage + 1
+
+  return (
+    <div>
+      {currentPageIndex >= 2 && (
+        <button
+          className={styles.paginationButton}
+          onClick={() => onClickPage(currentPage - 1)}
+        >
+          {currentPageIndex - 1}
+        </button>
+      )}
+
+      <button className={styles.paginationButtonSelected}>
+        {currentPageIndex}
+      </button>
+
+      {currentPageIndex < totalPages && (
+        <button
+          className={styles.paginationButton}
+          onClick={() => onClickPage(currentPage + 1)}
+        >
+          {currentPageIndex + 1}
+        </button>
+      )}
+    </div>
+  )
+}

src/styles/theme/_dark-theme.scss

@@ -1,4 +1,4 @@
-@use "colors";
+@use 'colors';
 
 @media (prefers-color-scheme: dark) {
     :root {
@@ -19,6 +19,11 @@
 
         --clr-home-search-shadow: #{colors.$grayOpacity300};
         --clr-home-search-border: #{colors.$whiteOpacity100};
+
+        --clr-button-selected-bg: #{colors.$inverseGray100};
+        --clr-button-border: #{colors.$inverseGray300};
+        --clr-button-hover-bg: #{colors.$inverseGray200};
+        --clr-button-active-bg: #{colors.$inverseGray300};
     }
 
     html {

src/styles/theme/_light-theme.scss

@@ -1,4 +1,4 @@
-@use "colors";
+@use 'colors';
 
 :root {
     --clr-bg: #{colors.$white};
@@ -18,4 +18,9 @@
 
     --clr-home-search-shadow: #{colors.$grayOpacity200};
     --clr-home-search-border: #{colors.$whiteOpacity50};
+
+    --clr-button-selected-bg: #{colors.$gray100};
+    --clr-button-border: #{colors.$gray300};
+    --clr-button-hover-bg: #{colors.$gray200};
+    --clr-button-active-bg: #{colors.$gray300};
 }