[실험실] 같은 레벨, 타입의 펫 한번에 팔기 기능

apps/web/messages/en_US.json

@@ -107,7 +107,8 @@
       "merge-result": "Merge result",
       "cancel": "Cancel",
       "please-choose-pet": "Please choose a pet to use to merge the level. The pet used disappears."
-    }
+    },
+    "laboratory": "Laboratory"
   },
   "Event": {
     "event-end": "Event has ended.",
@@ -127,5 +128,12 @@
       "not-login-toast": "🎃 It's Halloween! 🎃\nLogin and draw your Halloween pet!",
       "go": "GO!"
     }
+  },
+  "Laboratory": {
+    "property-pet-sell": {
+      "title": "Property Pet Sell",
+      "description": "Sell your pet to other users!",
+      "count": "ea"
+    }
   }
 }

apps/web/messages/ko_KR.json

@@ -109,7 +109,8 @@
       "merge-result": "합치기 결과",
       "cancel": "취소",
       "please-choose-pet": "합치기에 사용할 펫을 선택해주세요. 합친 펫은 사라집니다."
-    }
+    },
+    "laboratory": "실험실"
   },
   "Event": {
     "event-end": "이벤트가 종료되었습니다.",
@@ -129,5 +130,12 @@
       "not-login-toast": "🎃 Halloween이 찾아왔어요! 🎃\n로그인 후 할로윈 펫을 뽑아보세요!",
       "go": "GO!"
     }
+  },
+  "Laboratory": {
+    "property-pet-sell": {
+      "title": "Property Pet Sell",
+      "description": "Sell your pet to other users!",
+      "count": "개"
+    }
   }
 }

apps/web/src/app/[locale]/laboratory/_component/AlertDialog.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { css } from '_panda/css';
+import { Flex } from '_panda/jsx';
+import { Button, Dialog } from '@gitanimals/ui-panda';
+
+export function AlertDialog(props: {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  description: React.ReactNode;
+}) {
+  return (
+    <Dialog open={props.isOpen} onOpenChange={props.onClose}>
+      <Dialog.Content>
+        <Dialog.Title className={titleStyle}>{props.title}</Dialog.Title>
+        <Dialog.Description className={descriptionStyle}>{props.description}</Dialog.Description>
+        <Flex gap="8px" justifyContent="flex-end" width="100%">
+          <Button onClick={props.onClose} variant="primary" size="m">
+            Close
+          </Button>
+        </Flex>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
+const titleStyle = css({
+  textStyle: 'glyph20.regular',
+  textAlign: 'left',
+});
+
+const descriptionStyle = css({
+  textStyle: 'glyph16.regular',
+  textAlign: 'left',
+  color: 'white.white_75',
+  width: '100%',
+});

apps/web/src/app/[locale]/laboratory/_component/ConfirmDialog.tsx

@@ -0,0 +1,39 @@
+import { css } from '_panda/css';
+import { Flex } from '_panda/jsx';
+import { Button, Dialog } from '@gitanimals/ui-panda';
+
+export function ConfirmDialog(props: {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  description: string;
+}) {
+  return (
+    <Dialog open={props.isOpen} onOpenChange={props.onClose}>
+      <Dialog.Content>
+        <Dialog.Title className={titleStyle}>{props.title}</Dialog.Title>
+        <Dialog.Description className={descriptionStyle}>{props.description}</Dialog.Description>
+        <Flex gap="8px" justifyContent="flex-end" width="100%">
+          <Button onClick={props.onConfirm} variant="secondary" size="m">
+            Ok
+          </Button>
+          <Button onClick={props.onClose} variant="primary" size="m">
+            Close
+          </Button>
+        </Flex>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
+const titleStyle = css({
+  textStyle: 'glyph20.regular',
+  textAlign: 'left',
+});
+
+const descriptionStyle = css({
+  textStyle: 'glyph16.regular',
+  textAlign: 'left',
+  color: 'white.white_75',
+  width: '100%',
+});

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

@@ -0,0 +1,16 @@
+import { css } from '_panda/css';
+
+export default function LaboratoryLayout({ children }: { children: React.ReactNode }) {
+  return <div className={containerStyle}>{children}</div>;
+}
+const containerStyle = css({
+  minHeight: '100vh',
+  height: 'fit-content',
+  backgroundColor: '#019C5A',
+  padding: '120px 200px',
+  color: 'white.white_100',
+
+  '@media (max-width: 1400px)': {
+    padding: '120px 100px',
+  },
+});

apps/web/src/app/[locale]/laboratory/page.tsx

@@ -0,0 +1,56 @@
+import { css } from '_panda/css';
+
+import { Link } from '@/i18n/routing';
+
+export default function LaboratoryPage() {
+  return (
+    <div className={contentStyle}>
+      <Card href="/laboratory/property-pet-sell">
+        <h2>레벨, 타입 같은 펫 한번에 팔기</h2>
+        <p>펫 레벨, 타입 등 펫 속성을 선택하여 한번에 팔 수 있어요.</p>
+      </Card>
+      <Card href="#">Card</Card>
+    </div>
+  );
+}
+
+function Card({ children, href }: { children: React.ReactNode; href: string }) {
+  return (
+    <Link href={href} className={cardStyle}>
+      {children}
+    </Link>
+  );
+}
+
+const contentStyle = css({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(2, 1fr)',
+  gap: '16px',
+});
+
+const cardStyle = css({
+  background: 'white.white_10',
+  backdropFilter: 'blur(7px)',
+  borderRadius: '16px',
+  p: 8,
+  display: 'flex',
+  gap: '10px',
+  textStyle: 'glyph16.regular',
+  color: 'white.white_100',
+  flexDirection: 'column',
+
+  '& h2 ': {
+    textStyle: 'glyph24.bold',
+  },
+
+  '& p': {
+    textStyle: 'glyph16.regular',
+  },
+
+  _hover: {
+    background: 'white.white_20',
+    transform: 'translateY(-2px)',
+    boxShadow: '0 5px 10px rgba(0, 0, 0, 0.1)',
+    transition: 'background 0.3s ease, transform 0.3s ease',
+  },
+});

apps/web/src/app/[locale]/laboratory/property-pet-sell/page.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import { memo, useMemo } from 'react';
+import { useTranslations } from 'next-intl';
+import { css, cx } from '_panda/css';
+import { dropPets } from '@gitanimals/api/src/shop/dropPet';
+import { userQueries } from '@gitanimals/react-query/src/user';
+import { LevelBanner } from '@gitanimals/ui-panda';
+import { wrap } from '@suspensive/react';
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { useDialog } from '@/components/GlobalComponent/useDialog';
+import { trackEvent } from '@/lib/analytics';
+import { customScrollStyle } from '@/styles/scrollStyle';
+import { useClientUser } from '@/utils/clientAuth';
+import { getPersonaImage } from '@/utils/image';
+
+export default function PropertyPetSellPage() {
+  return (
+    <div>
+      <PersonaList />
+    </div>
+  );
+}
+
+interface PetItemType {
+  ids: string[];
+  type: string;
+  level: string;
+}
+
+const PersonaList = wrap
+  .ErrorBoundary({ fallback: <div> </div> })
+  .Suspense({ fallback: <></> })
+  .on(function PersonaList() {
+    const { name } = useClientUser();
+    const { data } = useSuspenseQuery(userQueries.allPersonasOptions(name));
+
+    const { showDialog } = useDialog();
+
+    const onPetClick = (ids: string[]) => {
+      showDialog({
+        title: '펫 판매',
+        description: `펫을 판매하시겠습니까? ${ids.length}마리를 판매합니다.`,
+        onConfirm: () => onSell(ids),
+      });
+    };
+
+    const onSell = async (ids: string[]) => {
+      const res = await dropPets({ personaIds: ids });
+
+      const totalPrice = res.success.reduce((acc, curr) => acc + curr.givenPoint, 0);
+
+      trackEvent('laboratory', {
+        type: '레벨, 타입 같은 펫 한번에 팔기',
+      });
+
+      showDialog({
+        title: '펫 판매 완료',
+        description: (
+          <div>
+            <p>
+              {res.success.length}마리 판매 완료, {res.errors.length}마리 판매 실패
+            </p>
+            <p>총 판매 금액: {totalPrice}P</p>
+          </div>
+        ),
+      });
+    };
+
+    // 레벨 오름차순 정렬
+    const petList = useMemo(() => {
+      const petItemMap = new Map<string, PetItemType>();
+
+      data.personas.forEach((persona) => {
+        const level = persona.level;
+        const type = persona.type;
+        const uniqueKey = `${type}-${level}`;
+        const petItem = petItemMap.get(uniqueKey);
+        if (petItem) {
+          petItem.ids.push(persona.id);
+        } else {
+          petItemMap.set(uniqueKey, { ids: [persona.id], type, level });
+        }
+      });
+
+      return Array.from(petItemMap.values()).sort((a, b) => Number(a.level) - Number(b.level));
+    }, [data.personas]);
+
+    return (
+      <section className={sectionStyle}>
+        <div className={flexOverflowStyle}>
+          {petList.map((petItem) => (
+            <div key={petItem.type + petItem.level}>
+              <MemoizedPersonaItem
+                type={petItem.type}
+                level={petItem.level}
+                onClick={() => onPetClick(petItem.ids)}
+                count={petItem.ids.length}
+              />
+            </div>
+          ))}
+        </div>
+      </section>
+    );
+  });
+
+const sectionStyle = css({
+  height: '100%',
+  maxHeight: '100%',
+  minHeight: '0',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '16px',
+});
+
+const flexOverflowStyle = cx(
+  css({
+    display: 'flex',
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    width: '100%',
+    gap: '12px 4px',
+    height: '100%',
+    minHeight: '0',
+    flexWrap: 'wrap',
+    maxHeight: 'calc(100% - 24px)',
+  }),
+  customScrollStyle,
+);
+
+interface PersonaItemProps {
+  type: string;
+  level: string;
+  onClick: () => void;
+  count: number;
+}
+
+function PersonaItem({ type, level, onClick, count }: PersonaItemProps) {
+  const t = useTranslations('Laboratory.property-pet-sell');
+  return (
+    <button onClick={onClick} className={css({ outline: 'none', bg: 'transparent' })}>
+      <div className={levelTagStyle}>
+        {count}
+        {t('count')}
+      </div>
+      <LevelBanner image={getPersonaImage(type)} level={Number(level)} size="small" />
+    </button>
+  );
+}
+
+const MemoizedPersonaItem = memo(PersonaItem, (prev, next) => {
+  return prev.type === next.type && prev.level === next.level;
+});
+
+const levelTagStyle = css({
+  borderRadius: '4px',
+  background: 'black.black_25',
+  padding: '0 8px',
+  color: 'white.white_75',
+  textStyle: 'glyph16.bold',
+  fontSize: '10px',
+  lineHeight: '20px',
+  mb: '4px',
+});