refactor: InventoryGrid 전면 적용 및 레이아웃 높이 제한

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

@@ -3,7 +3,7 @@
 import React, { useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { cn } from '@gitanimals/ui-tailwind';
-import { DialogV2, ScrollArea } from '@gitanimals/ui-tailwind';
+import { DialogV2 } from '@gitanimals/ui-tailwind';
 import { ExpandIcon } from 'lucide-react';
 
 import { SelectPersonaList } from '../PersonaList';
@@ -31,25 +31,25 @@ export const LinePersonaSelect = ({ selectPersona, onChangePersona }: Props) =>
           <ExpandIcon color="white" size={20} />
         </button>
       </section>
-      <ScrollArea className="h-40">
-        <SelectPersonaList
-          selectPersona={selectPersona ? [selectPersona] : []}
-          onSelectPersona={(persona) => onChangePersona(persona.id)}
-        />
-      </ScrollArea>
+      <SelectPersonaList
+        selectPersona={selectPersona ? [selectPersona] : []}
+        onSelectPersona={(persona) => onChangePersona(persona.id)}
+      >
+        <SelectPersonaList.InventoryGrid minRows={2} maxRows={3} />
+      </SelectPersonaList>
       <DialogV2 open={isExtend} onOpenChange={() => setIsExtend(false)}>
-        <DialogV2.Content size="lg">
+        <DialogV2.Content size="lg" className="h-full">
           <DialogV2.CloseButton />
-          <DialogV2.Header>
-            <DialogV2.Title>{t('line-type-select-pet')}</DialogV2.Title>
-          </DialogV2.Header>
           <SelectPersonaList
             selectPersona={selectPersona ? [selectPersona] : []}
             onSelectPersona={(persona) => onChangePersona(persona.id)}
           >
-            <SelectPersonaList.Toolbar showSearch />
-            <DialogV2.Body>
-              <SelectPersonaList.Grid />
+            <DialogV2.Header>
+              <DialogV2.Title>{t('line-type-select-pet')}</DialogV2.Title>
+              <SelectPersonaList.Toolbar showSearch />
+            </DialogV2.Header>
+            <DialogV2.Body scroll={false} className="h-full flex-1">
+              <SelectPersonaList.InventoryGrid minRows={2} mode="dialog" />
             </DialogV2.Body>
           </SelectPersonaList>
         </DialogV2.Content>

apps/web/src/app/[locale]/mypage/PersonaList.tsx

@@ -101,10 +101,9 @@ function Grid() {
 // ─── InventoryGrid (Embla carousel + dynamic grid) ─────────────────
 
 const MAX_DOTS = 5;
-const NAV_HEIGHT = 44; // arrows + dots bar
+const NAV_HEIGHT = 40; // arrows(24px) + gap(8px)
 /** 다이얼로그 크롬: 제목(50) + 검색(40) + 필터(40) + 패딩/갭(30) + nav(44) */
 const DIALOG_CHROME_HEIGHT = 204;
-const INLINE_CHROME_HEIGHT = NAV_HEIGHT;
 
 function useInventoryGrid(
   totalItems: number,
@@ -134,17 +133,27 @@ function useInventoryGrid(
         if (width < minItemSize * 2) return;
         const nextCols = Math.max(Math.floor((width + gap) / (minItemSize + gap)), 1);
 
-        // rows: 뷰포트 높이에서 크롬 높이를 뺀 가용 영역 기반
-        // 실제 아이템 높이를 측정하여 정확한 행 수 계산
-        const firstItem = el.querySelector('[class*="grid"] > button');
-        const measuredHeight = firstItem ? firstItem.getBoundingClientRect().height : 0;
-        const itemHeight = measuredHeight > 0 ? measuredHeight : minItemSize;
+        // rows: 가용 높이 기반. 아이템이 aspect-square이므로 컬럼 너비 = 아이템 높이
+        const colWidth = (width - (nextCols - 1) * gap) / nextCols;
+        const itemHeight = colWidth;
         const rowHeight = itemHeight + gap;
 
         const vh = window.innerHeight;
-        const chrome = mode === 'dialog' ? DIALOG_CHROME_HEIGHT : INLINE_CHROME_HEIGHT;
-        const dialogHeight = mode === 'dialog' ? vh * 0.9 : vh;
-        const availableHeight = dialogHeight - chrome;
+        let availableHeight: number;
+        if (mode === 'dialog') {
+          availableHeight = vh * 0.9 - DIALOG_CHROME_HEIGHT;
+        } else {
+          // inline: 컨테이너에 flex-1 min-h-0이 설정되어 있으므로
+          // clientHeight가 부모 flex에 의해 제한된 실제 높이
+          const containerHeight = el.clientHeight;
+          if (containerHeight > 0) {
+            availableHeight = containerHeight - NAV_HEIGHT;
+          } else {
+            // 초기 렌더링 시 높이가 0일 수 있음 → fallback
+            const rect = el.getBoundingClientRect();
+            availableHeight = vh - rect.top - NAV_HEIGHT;
+          }
+        }
         const nextRows =
           availableHeight > 0 ? Math.min(Math.max(Math.floor(availableHeight / rowHeight), minRows), maxRows) : minRows;
 
@@ -225,11 +234,11 @@ function InventoryGrid({ minRows = 2, maxRows = 10, minItemSize = 64, gap = 4, m
   }
 
   return (
-    <div ref={containerRef} className="overflow-hidden">
+    <div ref={containerRef} className="overflow-hidden flex flex-col gap-2 flex-1 min-h-0">
       {!ready ? null : (
         <>
           {/* Navigation: arrows left, dots right */}
-          <div className="flex mb-2 justify-between items-center">
+          <div className="flex justify-between items-center">
             <div className="flex gap-[10px]">
               <PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled} className="w-6 h-6" />
               <NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled} className="w-6 h-6" />

apps/web/src/app/[locale]/mypage/layout.tsx

@@ -19,10 +19,10 @@ async function MypageLayout({ children }: { children: React.ReactNode }) {
         <ProfileSection />
         <div
           className={cn(
-            'overflow-x-hidden w-full rounded-2xl',
-            'bg-white/10 backdrop-blur-[7px] max-h-[1400px]',
+            'overflow-hidden w-full rounded-2xl',
+            'bg-white/10 backdrop-blur-[7px] max-h-[calc(100vh-300px)]',
             'p-10 flex flex-col relative gap-10',
-            'max-pc:gap-6 max-pc:p-6',
+            'max-pc:max-h-[calc(100vh-124px)] max-pc:gap-6 max-pc:p-6',
             'max-mobile:gap-3 max-mobile:bg-transparent max-mobile:p-0',
             'max-mobile:max-h-none max-mobile:h-auto max-mobile:overflow-y-auto max-mobile:rounded-none',
           )}

apps/web/src/app/[locale]/mypage/my-pet/(merge)/MergePersona.tsx

@@ -9,7 +9,7 @@ import { useQueryClient } from '@tanstack/react-query';
 
 import { useClientSession } from '@/shared/utils/clientAuth';
 
-import { SelectPersonaList } from '../_components/SelectPersonaList';
+import { SelectPersonaList } from '../../PersonaList';
 import { SpinningLoader } from '../_components/SpinningLoader';
 
 import { MergePreview } from './MergePreview';
@@ -72,9 +72,14 @@ export function MergePersona({ isOpen, onClose, targetPersona: initTargetPersona
         </DialogV2.Header>
         <MergePreview targetPersona={targetPersona} materialPersona={materialPersona} />
 
-        <DialogV2.Body>
-          <SelectPersonaList selectPersona={selectPersona} onSelectPersona={onSelectPersona} />
-        </DialogV2.Body>
+        <SelectPersonaList selectPersona={selectPersona} onSelectPersona={onSelectPersona}>
+          <SelectPersonaList.Toolbar showSearch />
+
+          <DialogV2.Body scroll={false} className="h-full flex-1">
+            <SelectPersonaList.InventoryGrid minRows={2} mode="dialog" />
+          </DialogV2.Body>
+        </SelectPersonaList>
+
 
         <DialogV2.Footer className="justify-center">
           <Button variant="secondary" onClick={onClose}>

apps/web/src/app/[locale]/mypage/my-pet/page.tsx

@@ -4,7 +4,6 @@ import { useCallback, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { type Persona } from '@gitanimals/api';
 import { cn } from '@gitanimals/ui-tailwind';
-import { ScrollArea } from '@gitanimals/ui-tailwind';
 
 import { SelectPersonaList } from '../PersonaList';
 
@@ -19,28 +18,26 @@ function MypageMyPets() {
   }, []);
 
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col h-full min-h-0">
       <SelectedPetTable currentPersona={selectPersona} reset={() => setSelectPersona(null)} />
       <section
         className={cn(
-          'relative',
+          'relative flex-1 min-h-0 flex flex-col',
           '[&_.heading]:font-product [&_.heading]:text-glyph-18 [&_.heading]:font-bold',
           '[&_.heading]:text-white [&_.heading]:mb-4',
         )}
       >
         <h2 className="heading">{t('pet-list')}</h2>
 
-        <ScrollArea className="h-[calc(100vh-424px)]">
-          <SelectPersonaList
-            selectPersona={selectPersona ? [selectPersona.id] : []}
-            onSelectPersona={(persona) => setSelectPersona(persona)}
-            initSelectPersonas={initSelectPersonas}
-            isSpecialEffect
-          >
-            <SelectPersonaList.Toolbar showSearch showEvolvableFilter />
-            <SelectPersonaList.Grid />
-          </SelectPersonaList>
-        </ScrollArea>
+        <SelectPersonaList
+          selectPersona={selectPersona ? [selectPersona.id] : []}
+          onSelectPersona={(persona) => setSelectPersona(persona)}
+          initSelectPersonas={initSelectPersonas}
+          isSpecialEffect
+        >
+          <SelectPersonaList.Toolbar showSearch showEvolvableFilter />
+          <SelectPersonaList.InventoryGrid minRows={2} mode="inline" />
+        </SelectPersonaList>
       </section>
 
       <p

apps/web/src/app/[locale]/shop/_auction/SellSection/EditModal.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { auctionQueries, useChangeProductPrice, useDeleteProduct, userQueries } from '@gitanimals/react-query';
 import { cn } from '@gitanimals/ui-tailwind';
-import { Button, DialogV2 } from '@gitanimals/ui-tailwind';
+import { Button, DialogV2, TextField } from '@gitanimals/ui-tailwind';
 import { useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 
@@ -63,12 +63,12 @@ function EditModal({ isOpen, onClose, productId }: { isOpen: boolean; onClose: (
         <DialogV2.Header>
           <DialogV2.Title className={titleStyle}>{t('edit-product')}</DialogV2.Title>
         </DialogV2.Header>
-        <input
-          className={inputStyle}
+        <TextField
           placeholder="Type price..."
           type="number"
           value={Boolean(price) ? price : ''}
           onChange={(e) => setPrice(Number(e.target.value))}
+          className="[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0"
         />
         <DialogV2.Footer>
           <Button onClick={onSave} variant="secondary" size="m">
@@ -86,14 +86,3 @@ function EditModal({ isOpen, onClose, productId }: { isOpen: boolean; onClose: (
 export default EditModal;
 
 const titleStyle = cn('font-product text-glyph-20 text-left text-white w-full');
-
-const inputStyle = cn(
-  'flex h-[55px] py-3.5 pl-5 pr-3.5',
-  'items-start gap-2 w-full outline-none',
-  'rounded-lg border border-white/25',
-  'font-product text-glyph-16 text-white',
-  'placeholder:text-glyph-16 placeholder:text-white/75',
-  '[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0',
-);
-
-const buttonWrapperStyle = cn('flex justify-end gap-2 w-full');

apps/web/src/app/[locale]/shop/_auction/SellSection/SellInputRow.tsx

@@ -5,7 +5,7 @@ import { useTranslations } from 'next-intl';
 import type { Persona } from '@gitanimals/api';
 import useIsMobile from '@gitanimals/react/src/hooks/useIsMobile/useIsMobile';
 import { auctionQueries, userQueries } from '@gitanimals/react-query';
-import { Button, DialogV2 } from '@gitanimals/ui-tailwind';
+import { Button, DialogV2, TextField } from '@gitanimals/ui-tailwind';
 import { cn } from '@gitanimals/ui-tailwind/utils';
 import { snakeToTitleCase } from '@gitanimals/util-common';
 import { useQueryClient } from '@tanstack/react-query';
@@ -112,11 +112,10 @@ function SellInputRow({ item, initPersona }: Props) {
             <div>{ANIMAL_TIER_TEXT_MAP[personaTier]}</div>
             <div>{item.level}</div>
             <div>
-              <input
+              <TextField
                 className={cn(
-                  'font-product text-glyph-20',
-                  'w-full h-full min-h-16 text-xl font-bold',
-                  'border-none outline-none',
+                  'text-glyph-20 text-xl font-bold',
+                  'h-full min-h-16 border-none',
                   'placeholder:text-glyph-20 placeholder:text-white/25',
                   '[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0',
                 )}
@@ -156,19 +155,12 @@ function SellPriceModal({
         <DialogV2.Header>
           <DialogV2.Title>{t('sell-price-modal-title')}</DialogV2.Title>
         </DialogV2.Header>
-        <input
-          className={cn(
-            'flex h-[55px] py-3.5 pl-5 pr-3.5',
-            'items-start gap-2 w-full outline-none',
-            'rounded-lg border border-white/25',
-            'font-product text-glyph-16 text-white',
-            'placeholder:text-glyph-16 placeholder:text-white/75',
-            '[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0',
-          )}
+        <TextField
           placeholder="Type price..."
           type="number"
           value={Boolean(sellPrice) ? sellPrice : ''}
           onChange={(e) => setSellPrice(Number(e.target.value))}
+          className="[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0"
         />
         <DialogV2.Footer>
           <Button onClick={onClose} variant="secondary" size="m">

apps/web/src/components/Global/FeedbackForm.tsx

@@ -5,11 +5,11 @@ import { useState } from 'react';
 import Image from 'next/image';
 import { XIcon } from '@gitanimals/ui-icon';
 import { Button } from '@gitanimals/ui-tailwind';
+import { cn } from '@gitanimals/ui-tailwind/utils';
 import { toast } from 'sonner';
 
 import { usePostFeedback } from '@/features/feedback/model/usePostFeedback';
 import type { PostIssueRequest } from '@/features/feedback/model/usePostIssue';
-import Input from '@/components/Input';
 import Select from '@/components/Select';
 import TextArea from '@/components/TextArea';
 import type { GithubIssueType } from '@/shared/config/github';
@@ -152,6 +152,23 @@ const useFeedbackContent = () => {
   return { content, onContentChange, isValid, initContent };
 };
 
+function Input(props: React.ComponentProps<'input'>) {
+  return (
+    <input
+      {...props}
+      className={cn(
+        'border border-black/10 bg-transparent text-black/75',
+        'py-[14px] pb-[13px] pl-5 pr-[14px]',
+        'font-product text-glyph-16',
+        'rounded-lg outline-none w-full',
+        'focus:border-[#00894d]',
+        'placeholder:text-black/50 placeholder:font-product placeholder:text-glyph-16',
+        props.className,
+      )}
+    />
+  );
+}
+
 function LabelSelect({ onChange }: { onChange: (value: string[]) => void }) {
   return (
     <Select>