Feature: 메모 리스트 보는 방식을 추가한다 (#80)

* refactor: `MemoList`에서 `MemoTable`로 네이밍을 수정한다

* feat: MemoGrid를 구현한다

* feat: `@egjs/react-infinitegrid`를 설치한다

* feat: react-infinitegrid를 적용한다

* fix: 최대 개수 이슈를 해결한다

* design: gap과 너비를 넓힌다

* fix: 타입 에러를 해결한다

* design: 가운데 정렬하고, gap을 넓힌다

Author: guesung

packages/shared/src/types/supabaseCustom.ts

@@ -2,5 +2,6 @@ import type { PostgrestSingleResponse, SupabaseClient } from '@supabase/supabase
 import { Database } from './supabase';
 
 export type MemoTable = Database['memo']['Tables']['memo'];
+export type MemoRow = Database['memo']['Tables']['memo']['Row'];
 export type MemoSupabaseClient = SupabaseClient<Database, 'memo', Database['memo']>;
 export type MemoSupabaseResponse = PostgrestSingleResponse<Array<MemoTable['Row']>>;

packages/web/package.json

@@ -8,6 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@egjs/react-infinitegrid": "^4.12.0",
     "@extension/shared": "workspace:*",
     "@extension/storage": "workspace:*",
     "@extension/ui": "workspace:*",

packages/web/src/app/memos/components/MemoGrid.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { useMemoListQuery } from '@extension/shared/hooks';
+
+import { getSupabaseClient } from '@src/utils/supabase.client';
+import { UseQueryResult } from '@tanstack/react-query';
+import { MasonryInfiniteGrid } from '@egjs/react-infinitegrid';
+import { useEffect, useState } from 'react';
+
+import { MemoRow, MemoSupabaseResponse } from '@extension/shared/types';
+import Link from 'next/link';
+
+const Item = ({ num }: any) => (
+  <div
+    style={{
+      width: '250px',
+    }}>
+    <div className="thumbnail">
+      <img src={`https://naver.github.io/egjs-infinitegrid/assets/image/${(num % 33) + 1}.jpg`} alt="egjs" />
+    </div>
+    <div className="info">{`egjs ${num}`}</div>
+  </div>
+);
+
+function getItems(nextGroupKey: number, count: number) {
+  const nextItems = [];
+  const nextKey = nextGroupKey * 10;
+
+  for (let i = 0; i < count; ++i) {
+    nextItems.push({ groupKey: nextGroupKey, key: nextKey + i });
+  }
+  return nextItems;
+}
+
+export default function MemoGrid() {
+  const supabaseClient = getSupabaseClient();
+  // TODO :타입 에러로 인해 타입 단언으로 임시 해결
+  const { data: memoListData }: UseQueryResult<MemoSupabaseResponse, Error> = useMemoListQuery({
+    supabaseClient,
+  });
+  const memoList = memoListData?.data;
+  const [items, setItems] = useState(() => getItems(0, 10));
+
+  if (!memoList || memoList.length === 0)
+    return <p className="text-center mt-8">아직 저장된 메모가 없어요. 사이드 패널을 열어 메모를 저장해보세요 !</p>;
+  return (
+    <MasonryInfiniteGrid
+      className="container"
+      gap={16}
+      align="center"
+      onRequestAppend={e => {
+        const nextGroupKey = (+e.groupKey! || 0) + 1;
+        const maxAddItem = items.length + 10 > memoList.length ? memoList.length - items.length : 10;
+
+        if (maxAddItem === 0) return;
+
+        setItems([...items, ...getItems(nextGroupKey, maxAddItem)]);
+      }}>
+      {items.map(item => (
+        <MemoItem data-grid-groupkey={item.groupKey} key={item.key} memo={memoList.at(item.key)} />
+      ))}
+    </MasonryInfiniteGrid>
+  );
+}
+
+interface MemoItemProps {
+  memo?: MemoRow;
+}
+
+function MemoItem({ memo }: MemoItemProps) {
+  if (!memo) return null;
+  return (
+    <div className="bg-base-100 shadow-xl card box-border w-[300px]">
+      <div className="card-body">
+        <Link className="font-bold line-clamp-2 link-hover" href={memo.url} target="_blank">
+          {memo.title}
+        </Link>
+        <p className="whitespace-break-spaces">{memo.memo}</p>
+      </div>
+    </div>
+  );
+}

packages/web/src/app/memos/components/MemoList.tsx packages/web/src/app/memos/components/MemoTable.tsx

@@ -7,7 +7,7 @@ import { useMemoDeleteMutation } from '@src/hooks';
 import { getSupabaseClient } from '@src/utils/supabase.client';
 import { UseQueryResult } from '@tanstack/react-query';
 
-export default function MemoList() {
+export default function MemoTable() {
   const { mutate: deleteMemoMutate } = useMemoDeleteMutation();
   const supabaseClient = getSupabaseClient();
   // TODO :타입 에러로 인해 타입 단언으로 임시 해결

packages/web/src/app/memos/components/index.ts

@@ -1 +1 @@
-export { default as MemoList } from './MemoList';
+export { default as MemoTable } from './MemoTable';

packages/web/src/app/memos/page.tsx

@@ -3,17 +3,17 @@ import { getMemoSupabase } from '@extension/shared/utils';
 import { HydrationBoundaryWrapper } from '@src/components';
 import { getSupabaseClient } from '@src/utils/supabase.server';
 import { redirect } from 'next/navigation';
-import { MemoList } from './components';
+import MemoGrid from './components/MemoGrid';
 
 export default async function Page() {
   const supabaseClient = getSupabaseClient();
   const user = await supabaseClient.auth.getUser();
 
   if (!user?.data?.user) redirect('/login');
   return (
-    <main>
+    <main className="flex justify-center">
       <HydrationBoundaryWrapper queryKey={queryKeys.memoList()} queryFn={() => getMemoSupabase(supabaseClient)}>
-        <MemoList />
+        <MemoGrid />
       </HydrationBoundaryWrapper>
     </main>
   );