어드민 정보 검색 시 정보 등록 시각 필터 추가 (#4)

Stair-Crusher-Club · Apr 11, 2024 · 6040a86 · 6040a86
1 parent 48ecad3
commit 6040a86
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 38 deletions.
diff --git a/app/(private)/accessibility/components/Cells.tsx b/app/(private)/accessibility/components/Cells.tsx
@@ -2,7 +2,12 @@ import { InfiniteData, useQueryClient } from "@tanstack/react-query"
 import Image from "next/image"
 import { toast } from "react-toastify"
 
-import { SearchAccessibilitiesResult, deleteBuildingAccessibility, deletePlaceAccessibility } from "@/lib/apis/api"
+import {
+  SearchAccessibilitiesPayload,
+  SearchAccessibilitiesResult,
+  deleteBuildingAccessibility,
+  deletePlaceAccessibility,
+} from "@/lib/apis/api"
 import { AccessibilitySummary } from "@/lib/models/accessibility"
 
 import { useModal } from "@/hooks/useModal"
@@ -44,7 +49,7 @@ export function ImagesCell({ images }: { images: string[] }) {
   )
 }
 
-export function ActionsCell({ accessibility, query }: { accessibility: AccessibilitySummary; query?: string }) {
+export function ActionsCell({ accessibility, ctx }: { accessibility: AccessibilitySummary; ctx?: SearchAccessibilitiesPayload }) {
   const queryClient = useQueryClient()
   async function handleDeletePlaceAccessibility() {
     const { id, placeName } = accessibility.placeAccessibility
@@ -54,7 +59,7 @@ export function ActionsCell({ accessibility, query }: { accessibility: Accessibi
 
     // Refresh 하지는 않고 client 데이터에서 삭제
     queryClient.setQueryData(
-      ["@accessibilities", { placeName: query }],
+      ["@accessibilities", ctx],
       (data: InfiniteData<SearchAccessibilitiesResult>) => {
         const newPages = data.pages.map((page) => ({
           ...page,
@@ -75,7 +80,7 @@ export function ActionsCell({ accessibility, query }: { accessibility: Accessibi
 
     // Refresh 하지는 않고 client 데이터에서 삭제
     queryClient.setQueryData(
-      ["@accessibilities", { placeName: query }],
+      ["@accessibilities", ctx],
       (data: InfiniteData<SearchAccessibilitiesResult>) => {
         const newPages = data.pages.map((page) => ({
           ...page,

diff --git a/app/(private)/accessibility/page.style.ts b/app/(private)/accessibility/page.style.ts
@@ -6,6 +6,13 @@ export const Contents = styled("main", {
   },
 })
 
+export const InputTitle = styled("span", {
+  base: {
+    textWrap: "nowrap",
+    margin: "auto 8px auto 0",
+  },
+})
+
 export const SearchButton = styled("button", {
   base: {
     padding: "8px 16px",

diff --git a/app/(private)/accessibility/page.tsx b/app/(private)/accessibility/page.tsx
@@ -1,53 +1,80 @@
 "use client"
 
-import { TextInput } from "@reactleaf/input/hookform"
-import { useQueryClient } from "@tanstack/react-query"
+import { TextInput, DateInput } from "@reactleaf/input/hookform"
 import dayjs from "dayjs"
+import { format } from "date-fns"
 import { useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 
 import { AccessibilitySummary } from "@/lib/models/accessibility"
+import { SearchAccessibilitiesPayload } from "@/lib/apis/api";
 
 import Table, { makeTypedColumn } from "@/components/Table"
 import { Contents, Header } from "@/components/layout"
-import { Flex } from "@/styles/jsx"
 
+import { Flex } from "@/styles/jsx"
 import { ActionsCell, ImagesCell } from "./components/Cells"
 import * as S from "./page.style"
 import { useAccessibilities } from "./query"
 
 export default function AccessibilityList() {
-  const queryClient = useQueryClient()
-  const form = useForm<{ query: string }>()
-  const [query, setQuery] = useState<string>("")
-  const { data, fetchNextPage, hasNextPage } = useAccessibilities(query)
+  const form = useForm<SearchAccessibilitiesPayload>()
+  const [formInput, setFormInput] = useState<SearchAccessibilitiesPayload>({
+    placeName: "",
+    createdAtFromLocalDate: "",
+    createdAtToLocalDate: "",
+  })
+  const { data, fetchNextPage, hasNextPage } = useAccessibilities(formInput)
   const accessibilities = data?.pages.flatMap((p) => p.items) ?? []
 
+  const updateFormInput = (payload: SearchAccessibilitiesPayload) => {
+    setFormInput({
+      ...payload,
+      createdAtFromLocalDate: payload.createdAtFromLocalDate ? format(new Date(payload.createdAtFromLocalDate), "yyyy-MM-dd") : '',
+      createdAtToLocalDate: payload.createdAtToLocalDate ? format(new Date(payload.createdAtToLocalDate), "yyyy-MM-dd") : ''
+    })
+  }
+
   return (
     <>
       <Header title="등록된 정보 관리" />
       <Contents.Normal>
         <FormProvider {...form}>
-          <Flex>
-            <TextInput type="text" name="query" placeholder="등록 최신순 검색" />
-            <S.SearchButton style={{ width: 80 }} onClick={() => setQuery(form.watch("query"))}>
-              검색
-            </S.SearchButton>
-          </Flex>
+          <form id="search-accessibilities" onSubmit={form.handleSubmit(updateFormInput)}>
+            <Flex>
+              <S.InputTitle>장소명</S.InputTitle>
+              <TextInput type="text" name="placeName" placeholder="등록 최신순 검색" />
+            </Flex>
+            <Flex>
+              <S.InputTitle>정보 등록 시각</S.InputTitle>
+              <DateInput name="createdAtFromLocalDate" label="시작" dateFormat="yyyy-MM-dd" />
+              <DateInput name="createdAtToLocalDate" label="끝" dateFormat="yyyy-MM-dd" />
+            </Flex>
+            <Flex>
+              <S.SearchButton
+                type="submit"
+                form="search-accessibilities"
+                style={{ width: 80 }}
+                // onClick={() => { console.log(form.watch(), form.watch("createdAtToLocalDate")); setFormInput(form.watch()) }}
+              >
+                검색
+              </S.SearchButton>
+            </Flex>
+          </form>
         </FormProvider>
         <Table
           rows={accessibilities}
           rowKey={(row) => row.placeAccessibility.id}
           columns={columns}
-          context={{ query }}
+          context={formInput}
         />
         {hasNextPage && <S.LoadNextPageButton onClick={() => fetchNextPage()}>더 불러오기</S.LoadNextPageButton>}
       </Contents.Normal>
     </>
   )
 }
 
-const col = makeTypedColumn<AccessibilitySummary, { query: string }>()
+const col = makeTypedColumn<AccessibilitySummary, SearchAccessibilitiesPayload>()
 const columns = [
   col({
     title: "장소 사진",
@@ -72,5 +99,5 @@ const columns = [
       </p>
     ),
   }),
-  col({ field: "_", render: (_, row, ctx) => <ActionsCell accessibility={row} query={ctx?.query} /> }),
+  col({ field: "_", render: (_, row, ctx) => <ActionsCell accessibility={row} ctx={ctx} /> }),
 ]
diff --git a/app/(private)/accessibility/query.ts b/app/(private)/accessibility/query.ts
@@ -1,16 +1,16 @@
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query"
 import qs from "query-string"
 
-import { SearchAccessibilitiesResult } from "@/lib/apis/api"
 import { http } from "@/lib/http"
+import { SearchAccessibilitiesPayload, SearchAccessibilitiesResult } from "@/lib/apis/api";
 
-export function useAccessibilities(placeName: string) {
+export function useAccessibilities(payload: SearchAccessibilitiesPayload) {
   return useInfiniteQuery({
-    queryKey: ["@accessibilities", { placeName }],
+    queryKey: ["@accessibilities", payload],
     queryFn: ({ pageParam }) =>
       http(
         `/admin/accessibilities/search?${qs.stringify(
-          { placeName, cursor: pageParam, limit: 10 },
+          { ...payload, cursor: pageParam, limit: 10 },
           { skipNull: true },
         )}`,
       ).then((res) => res.json() as Promise<SearchAccessibilitiesResult>),

diff --git a/lib/apis/api.ts b/lib/apis/api.ts
@@ -142,24 +142,16 @@ export function deleteRegion({ id }: { id: string }) {
   })
 }
 
+export interface SearchAccessibilitiesPayload {
+  placeName: string
+  createdAtFromLocalDate: string
+  createdAtToLocalDate: string
+}
+
 export interface SearchAccessibilitiesResult {
   items: AccessibilitySummary[]
   cursor: string | null
 }
-export function searchAccessibilities(
-  query: string,
-  cursor: string | undefined,
-  limit: number | undefined,
-): Promise<SearchAccessibilitiesResult> {
-  const params: { [key: string]: any } = { placeName: query }
-  if (cursor) {
-    params["cursor"] = cursor
-  }
-  if (limit) {
-    params["limit"] = limit.toString()
-  }
-  return http(`/admin/accessibilities/search?${stringify(params)}`).then((res) => res.json())
-}
 
 export function deletePlaceAccessibility({ id }: { id: string }) {
   return http(`/admin/place-accessibilities/${id}`, {