feature: 클래스 리스트 페이지 기능 구현 (API MOCK) (#59)

Author: KIMSEUNGGYU

frontend/zicdding-class.com/app/class/page.tsx

@@ -1,7 +1,12 @@
 'use client';
 
 import { ClassListPage } from '@/src/views/class-list';
+import { Suspense } from 'react';
 
 export default function Page() {
-  return <ClassListPage />;
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <ClassListPage />
+    </Suspense>
+  );
 }

frontend/zicdding-class.com/src/views/class-list/model/type.ts

@@ -0,0 +1 @@
+export type SortType = 'popular' | 'recent';

frontend/zicdding-class.com/src/views/class-list/ui/index.tsx

@@ -5,15 +5,23 @@ import { Tabs } from '@zicdding-web/ui/Tabs';
 import { Input } from '@zicdding-web/ui/Input';
 import { Button } from '@zicdding-web/ui';
 import { ClassCard, useGetClasses } from '@/src/features/class-card';
+import type { SortType } from '../model/type';
+import { useSearchClass } from './use-search-class';
 import { useRouter } from 'next/navigation';
+import { useMemo } from 'react';
 
 export function ClassListPage() {
-  const { data: classList, isLoading } = useGetClasses();
   const router = useRouter();
 
-  // GYU-TODO: 인기순/최신순 query 로 관리하고 데이터가 없으면 기본값 설정해서 tabs 와 데이터 일치하게 하기!
-  // tabs 도 상태로 해야하나? 아니면 onChange 가 발생할때 url 로 제어해서 따로 client-component 로 추출하지 않게 해야하나?
-  // URL 로 제어하는게 좋을듯
+  const { data: classList, isLoading } = useGetClasses();
+
+  const { localSearchValue, searchValue, sortType, onSearchSubmit, onChangeSearchValue, onSearch, onSortTypeChange } =
+    useSearchClass();
+
+  const _classList = useMemo(() => {
+    return classList?.filter((classItem) => classItem.classTitle.includes(searchValue));
+  }, [classList, searchValue]);
+
   return (
     <div className="px-6">
       <div className="flex justify-between items-center">
@@ -23,7 +31,8 @@ export function ClassListPage() {
             { title: '인기순', value: 'popular' },
             { title: '최신순', value: 'recent' },
           ]}
-          onChange={() => {}}
+          value={sortType}
+          onChange={(value) => onSortTypeChange(value as SortType)}
           defaultValue="popular"
         />
       </div>
@@ -32,14 +41,23 @@ export function ClassListPage() {
 
       <div className="flex justify-between items-center">
         <Button>클래스 만들기</Button>
-        <Input type="search" width={366} onClickSearch={() => {}} />
+        <form onSubmit={onSearchSubmit}>
+          <Input
+            type="search" //
+            name="search"
+            width={366}
+            value={localSearchValue}
+            onChange={onChangeSearchValue}
+            onClickSearch={onSearch}
+          />
+        </form>
       </div>
 
       <ul className="flex flex-wrap items-start gap-8 mx-auto mt-8">
         {isLoading ? (
           <div>loading...</div>
         ) : (
-          classList?.map((classItem) => (
+          _classList?.map((classItem) => (
             <ClassCard
               key={classItem.classId}
               title={classItem.classTitle}

frontend/zicdding-class.com/src/views/class-list/ui/use-search-class.ts

@@ -0,0 +1,52 @@
+import { useRouter, useSearchParams } from 'next/navigation';
+import type { SortType } from '../model/type';
+import { useEffect, useState } from 'react';
+
+export function useSearchClass() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const [localSearchValue, setLocalSearchValue] = useState('');
+
+  const sortType = searchParams.get('sortType') ?? 'popular';
+  const searchValue = searchParams.get('search') ?? '';
+
+  const onSearchSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const formData = new FormData(e.target as HTMLFormElement);
+    const searchValue = formData.get('search');
+    if (typeof searchValue === 'string') {
+      onSearch(searchValue);
+    }
+  };
+
+  const onSearch = (searchValue: string) => {
+    router.replace(`/class?sortType=${sortType}&search=${searchValue}`);
+  };
+
+  const onSortTypeChange = (sortTypeValue: SortType) => {
+    router.replace(`/class?sortType=${sortTypeValue}&search=${searchValue}`);
+  };
+
+  const onChangeSearchValue = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setLocalSearchValue(e.target.value);
+  };
+
+  useEffect(
+    function mountedSyncQueryValueToLocalValue() {
+      setLocalSearchValue(searchValue);
+    },
+    [searchValue],
+  );
+
+  return {
+    localSearchValue,
+    searchValue,
+    sortType,
+    onSearchSubmit,
+    onSearch,
+    onSortTypeChange,
+    onChangeSearchValue,
+  };
+}

frontend/zicdding-class.com/src/views/class-list/ui/use-search.ts

@@ -0,0 +1,50 @@
+import { useRouter, useSearchParams } from 'next/navigation';
+import type { SortType } from '../model/type';
+import { useEffect, useState } from 'react';
+
+export function useSearch() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const [localSearchValue, setLocalSearchValue] = useState('');
+
+  const sortType = (searchParams.get('sortType') as SortType) ?? 'popular';
+  const searchValue = searchParams.get('search') ?? '';
+
+  const onSearchSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const formData = new FormData(e.target as HTMLFormElement);
+    const _searchValue = formData.get('search') as string;
+    onSearch(_searchValue);
+  };
+
+  const onSearch = (searchValue: string) => {
+    router.replace(`/class?sortType=${sortType}&search=${searchValue}`);
+  };
+
+  const onSortTypeChange = (sortTypeValue: SortType) => {
+    router.replace(`/class?sortType=${sortTypeValue}&search=${searchValue}`);
+  };
+
+  const onChangeSearchValue = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setLocalSearchValue(e.target.value);
+  };
+
+  useEffect(
+    function mountedSyncQueryValueToLocalValue() {
+      setLocalSearchValue(searchValue);
+    },
+    [searchValue],
+  );
+
+  return {
+    localSearchValue,
+    searchValue,
+    sortType,
+    onSearchSubmit,
+    onSearch,
+    onSortTypeChange,
+    onChangeSearchValue,
+  };
+}