InventoryGrid(Embla 페이지네이션) 도입 및 SelectPersonaList 통합 (#395)

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: sumi-0011

apps/web/src/app/[locale]/guild/(subpage)/create/GuildCreate.tsx

@@ -1,13 +1,13 @@
 'use client';
 import { useState } from 'react';
 import { createGuild } from '@gitanimals/api';
-import { Button } from '@gitanimals/ui-tailwind';
+import { Button, ScrollArea } from '@gitanimals/ui-tailwind';
 import { AxiosError } from 'axios';
 import { toast } from 'sonner';
 
 import { useRouter } from '@/i18n/routing';
 
-import { GuildSelectPersonaList } from '../../_components/GuildSelectPersonaList';
+import { SelectPersonaList } from '../../../mypage/PersonaList';
 
 import { GuildCreateForm } from './GuildCreateForm';
 
@@ -66,10 +66,15 @@ export default function GuildCreate() {
       )}
       {step === 'guild-persona' && (
         <>
-          <GuildSelectPersonaList
+          <SelectPersonaList
             selectPersona={selectPersona ? [selectPersona] : []}
             onSelectPersona={(persona) => setSelectPersona(persona.id)}
-          />
+          >
+            <SelectPersonaList.Toolbar showSearch />
+            <ScrollArea height="50vh">
+              <SelectPersonaList.Grid />
+            </ScrollArea>
+          </SelectPersonaList>
           <Button className="mx-auto" disabled={!selectPersona} onClick={onSubmit}>
             Done
           </Button>

apps/web/src/app/[locale]/guild/_components/GuildPetSelectDialog.tsx

@@ -3,9 +3,9 @@
 
 import { useState } from 'react';
 import type { Persona } from '@gitanimals/api';
-import { Button } from '@gitanimals/ui-tailwind';
+import { Button, ScrollArea } from '@gitanimals/ui-tailwind';
 
-import { GuildSelectPersonaList } from './GuildSelectPersonaList';
+import { SelectPersonaList } from '../../mypage/PersonaList';
 
 export const GuildJoinPetSelectDialog = ({ onSubmit }: { onSubmit: (selectPersona: string) => void }) => {
   const [selectPersona, setSelectPersona] = useState<string>();
@@ -22,7 +22,12 @@ export const GuildJoinPetSelectDialog = ({ onSubmit }: { onSubmit: (selectPerson
 
   return (
     <>
-      <GuildSelectPersonaList selectPersona={selectPersona ? [selectPersona] : []} onSelectPersona={onSelectPersona} />
+      <SelectPersonaList selectPersona={selectPersona ? [selectPersona] : []} onSelectPersona={onSelectPersona}>
+        <SelectPersonaList.Toolbar showSearch />
+        <ScrollArea height="50vh">
+          <SelectPersonaList.Grid />
+        </ScrollArea>
+      </SelectPersonaList>
       <Button className="mx-auto w-[100px]" onClick={onDone} disabled={!selectPersona}>
         Done
       </Button>

apps/web/src/app/[locale]/guild/_components/GuildSelectPersonaList.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { useTranslations } from 'next-intl';
 import type { Persona } from '@gitanimals/api';
 import { userQueries } from '@gitanimals/react-query';
-import { Dialog, ScrollArea } from '@gitanimals/ui-tailwind';
+import { Dialog } from '@gitanimals/ui-tailwind';
 import { useQueryClient } from '@tanstack/react-query';
 import { ExpandIcon } from 'lucide-react';
 import { toast } from 'sonner';
@@ -53,9 +53,9 @@ export function FarmPersonaSelect({ onImageRefresh }: { onImageRefresh: () => vo
           <ExpandIcon color="white" size={20} />
         </button>
       </section>
-      <ScrollArea height="160px">
-        <SelectPersonaList {...personaListProps} />
-      </ScrollArea>
+      <SelectPersonaList {...personaListProps}>
+        <SelectPersonaList.InventoryGrid rows={2} />
+      </SelectPersonaList>
       <Dialog open={isOpen} onOpenChange={setIsOpen}>
         <Dialog.Content size="large" scrollable>
           <Dialog.Title>{t('farm-type-select-pet')}</Dialog.Title>
@@ -64,7 +64,7 @@ export function FarmPersonaSelect({ onImageRefresh }: { onImageRefresh: () => vo
               <SelectPersonaList.Toolbar showSearch showVisibilityFilter />
             </Dialog.TopSlot>
             <Dialog.Body>
-              <SelectPersonaList.Grid />
+              <SelectPersonaList.InventoryGrid rows="auto" minRows={2} />
             </Dialog.Body>
           </SelectPersonaList>
         </Dialog.Content>

apps/web/src/app/[locale]/mypage/(github-custom)/FarmPersonaSelect.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react';
 import { useTranslations } from 'next-intl';
-import { Dialog, ScrollArea } from '@gitanimals/ui-tailwind';
+import { Dialog } from '@gitanimals/ui-tailwind';
 import { ExpandIcon } from 'lucide-react';
 
 import { SelectPersonaList } from '../PersonaList';
@@ -25,12 +25,12 @@ export const LinePersonaSelect = ({ selectPersona, onChangePersona }: Props) =>
           <ExpandIcon color="white" size={20} />
         </button>
       </section>
-      <ScrollArea height="160px">
-        <SelectPersonaList
-          selectPersona={selectPersona ? [selectPersona] : []}
-          onSelectPersona={(persona) => onChangePersona(persona.id)}
-        />
-      </ScrollArea>
+      <SelectPersonaList
+        selectPersona={selectPersona ? [selectPersona] : []}
+        onSelectPersona={(persona) => onChangePersona(persona.id)}
+      >
+        <SelectPersonaList.InventoryGrid rows={2} />
+      </SelectPersonaList>
       <Dialog open={isExtend} onOpenChange={() => setIsExtend(false)}>
         <Dialog.Content size="large" scrollable>
           <Dialog.Title>{t('line-type-select-pet')}</Dialog.Title>
@@ -42,7 +42,7 @@ export const LinePersonaSelect = ({ selectPersona, onChangePersona }: Props) =>
               <SelectPersonaList.Toolbar showSearch />
             </Dialog.TopSlot>
             <Dialog.Body>
-              <SelectPersonaList.Grid />
+              <SelectPersonaList.InventoryGrid rows="auto" minRows={2} />
             </Dialog.Body>
           </SelectPersonaList>
         </Dialog.Content>