From dbdd11c8bfed09379c1115956508537361c28239 Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Thu, 19 Dec 2024 19:00:57 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20drop=20=ED=99=95=EC=9D=B8=EC=B0=BD?= =?UTF-8?q?=20=EA=B0=9C=EB=B0=9C=20=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mypage/my-pet/SelectedPetTable.tsx | 161 ++++++++++++++ .../src/app/[locale]/mypage/my-pet/page.tsx | 142 +------------ apps/web/src/components/Global/useDialog.tsx | 2 +- packages/ui/panda/package.json | 2 + .../src/components/CheckBox/CheckBox.tsx | 26 +++ .../ui/panda/src/components/CheckBox/index.ts | 1 + .../ui/panda/src/components/Label/Label.tsx | 5 + .../ui/panda/src/components/Label/index.tsx | 1 + packages/ui/panda/src/components/index.ts | 2 + pnpm-lock.yaml | 199 ++++++++++++++++-- 10 files changed, 382 insertions(+), 159 deletions(-) create mode 100644 apps/web/src/app/[locale]/mypage/my-pet/SelectedPetTable.tsx create mode 100644 packages/ui/panda/src/components/CheckBox/CheckBox.tsx create mode 100644 packages/ui/panda/src/components/CheckBox/index.ts create mode 100644 packages/ui/panda/src/components/Label/Label.tsx create mode 100644 packages/ui/panda/src/components/Label/index.tsx diff --git a/apps/web/src/app/[locale]/mypage/my-pet/SelectedPetTable.tsx b/apps/web/src/app/[locale]/mypage/my-pet/SelectedPetTable.tsx new file mode 100644 index 00000000..21a5f65d --- /dev/null +++ b/apps/web/src/app/[locale]/mypage/my-pet/SelectedPetTable.tsx @@ -0,0 +1,161 @@ +'use client'; + +import { useState } from 'react'; +import Image from 'next/image'; +import { useTranslations } from 'next-intl'; +import { css, cx } from '_panda/css'; +import { Flex } from '_panda/jsx'; +import { flex } from '_panda/patterns'; +import { dropPet, type Persona } from '@gitanimals/api'; +import { userQueries } from '@gitanimals/react-query'; +import { Button, Checkbox, Label } from '@gitanimals/ui-panda'; +import { snakeToTitleCase } from '@gitanimals/util-common'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; +import { toast } from 'sonner'; + +import { useDialog } from '@/components/Global/useDialog'; +import { ANIMAL_TIER_TEXT_MAP, getAnimalTierInfo } from '@/utils/animals'; +import { getPersonaImage } from '@/utils/image'; + +import { tableCss } from '../../shop/AuctionSection/table.styles'; + +import { MergePersona } from './(merge)'; + +interface SelectedPetTableProps { + currentPersona: Persona | null; + reset: () => void; +} + +export function SelectedPetTable({ currentPersona, reset }: SelectedPetTableProps) { + const queryClient = useQueryClient(); + const t = useTranslations('Shop'); + const [isMergeOpen, setIsMergeOpen] = useState(false); + const { showDialog } = useDialog(); + + const { mutate: dropPetMutation } = useMutation({ + mutationFn: (personaId: string) => dropPet({ personaId }), + onSuccess: (data) => { + toast.success((t('pet-sold') as string).replace('[money]', data.givenPoint.toString())); + queryClient.invalidateQueries({ queryKey: userQueries.allKey() }); + reset(); + }, + onError: () => { + toast.error(t('sell-product-fail')); + }, + }); + + const onSellClick = async () => { + if (!currentPersona) return; + // dropPetMutation(currentPersona.id); + showDialog({ + title: `${currentPersona.type} 판매하기`, + description: ( + <> +

정말로 판매하시겠습니까?

+ + + + + + ), + onConfirm: () => dropPetMutation(currentPersona.id), + }); + }; + + return ( +
+
+ {t('pet')} + {t('name')} + {t('grade')} + {t('level')} + +
+ +
+ {currentPersona && ( + <> +
+ {currentPersona.type} +
+
{snakeToTitleCase(currentPersona.type)}
+
{ANIMAL_TIER_TEXT_MAP[getAnimalTierInfo(Number(currentPersona.dropRate.replace('%', '')))]}
+
{currentPersona.level}
+
+ + +
+ + )} +
+ + {currentPersona && ( + setIsMergeOpen(false)} + targetPersona={currentPersona} + /> + )} +
+ ); +} + +const theadCss = css({ + display: 'grid', + gridTemplateColumns: '1fr 2.5fr 1fr 1fr 5.7fr', + gap: '16px', + padding: '4px 32px', + borderRadius: '12px', + backgroundColor: 'white_50', + alignItems: 'center', + + height: '46px', + textStyle: 'glyph18.bold', + color: 'white_100', + + '& > span:nth-child(1)': { + textAlign: 'center', + }, + + marginBottom: '4px', + + _mobile: { + fontSize: '16px', + }, +}); + +const rowStyle = css({ + width: '100%', + height: '80px', + backgroundColor: 'white_10', + borderRadius: '12px', + + display: 'grid', + gridTemplateColumns: '1fr 2.5fr 1fr 1fr 5.7fr', + alignItems: 'center', + padding: '0 32px', + gap: '16px', + + textStyle: 'glyph20.regular', + color: 'white.white_100', + + '& button': { + color: 'black.black', + width: '100%', + paddingX: '6px', + }, + + '& *': { + overflow: 'hidden', + textOverflow: 'ellipsis', + }, + + _mobile: { + fontSize: '16px', + }, +}); diff --git a/apps/web/src/app/[locale]/mypage/my-pet/page.tsx b/apps/web/src/app/[locale]/mypage/my-pet/page.tsx index 6ee89b46..2bc491cb 100644 --- a/apps/web/src/app/[locale]/mypage/my-pet/page.tsx +++ b/apps/web/src/app/[locale]/mypage/my-pet/page.tsx @@ -1,24 +1,16 @@ 'use client'; import React, { useState } from 'react'; -import Image from 'next/image'; import { useTranslations } from 'next-intl'; import { css, cx } from '_panda/css'; import { flex } from '_panda/patterns'; -import { dropPet, type Persona } from '@gitanimals/api'; -import { userQueries } from '@gitanimals/react-query'; -import { Button } from '@gitanimals/ui-panda'; -import { snakeToTitleCase } from '@gitanimals/util-common'; -import { useMutation, useQueryClient } from '@tanstack/react-query'; -import { toast } from 'sonner'; +import { type Persona } from '@gitanimals/api'; import { customScrollStyle } from '@/styles/scrollStyle'; -import { ANIMAL_TIER_TEXT_MAP, getAnimalTierInfo } from '@/utils/animals'; -import { getPersonaImage } from '@/utils/image'; import { SelectPersonaList } from '../PersonaList'; -import { MergePersona } from './(merge)'; +import { SelectedPetTable } from './SelectedPetTable'; function MypageMyPets() { const t = useTranslations('Mypage'); @@ -84,133 +76,3 @@ const selectPetContainerStyle = css({ marginBottom: '16px', }, }); - -interface SelectedPetTableProps { - currentPersona: Persona | null; - reset: () => void; -} - -function SelectedPetTable({ currentPersona, reset }: SelectedPetTableProps) { - const queryClient = useQueryClient(); - const t = useTranslations('Shop'); - const [isMergeOpen, setIsMergeOpen] = useState(false); - - const { mutate: dropPetMutation } = useMutation({ - mutationFn: (personaId: string) => dropPet({ personaId }), - onSuccess: (data) => { - toast.success((t('pet-sold') as string).replace('[money]', data.givenPoint.toString())); - queryClient.invalidateQueries({ queryKey: userQueries.allKey() }); - reset(); - }, - onError: () => { - toast.error(t('sell-product-fail')); - }, - }); - - const onSellClick = async () => { - if (!currentPersona) return; - dropPetMutation(currentPersona.id); - }; - - return ( -
-
- {t('pet')} - {t('name')} - {t('grade')} - {t('level')} - -
- -
- {currentPersona && ( - <> -
- {currentPersona.type} -
-
{snakeToTitleCase(currentPersona.type)}
-
{ANIMAL_TIER_TEXT_MAP[getAnimalTierInfo(Number(currentPersona.dropRate.replace('%', '')))]}
-
{currentPersona.level}
-
- - -
- - )} -
- - {currentPersona && ( - setIsMergeOpen(false)} - targetPersona={currentPersona} - /> - )} -
- ); -} - -const tableCss = css({ - width: '100%', - marginBottom: '32px', -}); - -const theadCss = css({ - display: 'grid', - gridTemplateColumns: '1fr 2.5fr 1fr 1fr 5.7fr', - gap: '16px', - padding: '4px 32px', - borderRadius: '12px', - backgroundColor: 'white_50', - alignItems: 'center', - - height: '46px', - textStyle: 'glyph18.bold', - color: 'white_100', - - '& > span:nth-child(1)': { - textAlign: 'center', - }, - - marginBottom: '4px', - - _mobile: { - fontSize: '16px', - }, -}); - -const rowStyle = css({ - width: '100%', - height: '80px', - backgroundColor: 'white_10', - borderRadius: '12px', - - display: 'grid', - gridTemplateColumns: '1fr 2.5fr 1fr 1fr 5.7fr', - alignItems: 'center', - padding: '0 32px', - gap: '16px', - - textStyle: 'glyph20.regular', - color: 'white.white_100', - - '& button': { - color: 'black.black', - width: '100%', - paddingX: '6px', - }, - - '& *': { - overflow: 'hidden', - textOverflow: 'ellipsis', - }, - - _mobile: { - fontSize: '16px', - }, -}); diff --git a/apps/web/src/components/Global/useDialog.tsx b/apps/web/src/components/Global/useDialog.tsx index 02a50e90..505350d9 100644 --- a/apps/web/src/components/Global/useDialog.tsx +++ b/apps/web/src/components/Global/useDialog.tsx @@ -66,7 +66,7 @@ export function DialogComponent() { await dialog.onConfirm(); setIsLoading(false); } - // closeDialog(); + closeDialog(); }; return ( diff --git a/packages/ui/panda/package.json b/packages/ui/panda/package.json index e8dce904..ed8d430a 100644 --- a/packages/ui/panda/package.json +++ b/packages/ui/panda/package.json @@ -11,7 +11,9 @@ "dependencies": { "@gitanimals/react": "workspace:*", "@radix-ui/react-accordion": "^1.2.1", + "@radix-ui/react-checkbox": "^1.1.1", "@radix-ui/react-dialog": "^1.1.2", + "@radix-ui/react-label": "^2.1.1", "@radix-ui/react-select": "^2.1.2", "@shadow-panda/style-context": "^0.7.1", "lucide-react": "^0.408.0" diff --git a/packages/ui/panda/src/components/CheckBox/CheckBox.tsx b/packages/ui/panda/src/components/CheckBox/CheckBox.tsx new file mode 100644 index 00000000..53ed6a85 --- /dev/null +++ b/packages/ui/panda/src/components/CheckBox/CheckBox.tsx @@ -0,0 +1,26 @@ +'use client'; + +import * as React from 'react'; +import * as CheckboxPrimitive from '@radix-ui/react-checkbox'; +import { Check } from 'lucide-react'; +import { cx } from '_panda/css'; +import { styled } from '_panda/jsx'; +import { checkbox, icon } from '_panda/recipes'; + +const BaseCheckbox = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => { + const styles = checkbox(); + + return ( + + + + + + ); +}); +BaseCheckbox.displayName = CheckboxPrimitive.Root.displayName; + +export const Checkbox = styled(BaseCheckbox); diff --git a/packages/ui/panda/src/components/CheckBox/index.ts b/packages/ui/panda/src/components/CheckBox/index.ts new file mode 100644 index 00000000..9c857f3d --- /dev/null +++ b/packages/ui/panda/src/components/CheckBox/index.ts @@ -0,0 +1 @@ +export { Checkbox } from './CheckBox'; diff --git a/packages/ui/panda/src/components/Label/Label.tsx b/packages/ui/panda/src/components/Label/Label.tsx new file mode 100644 index 00000000..6850e574 --- /dev/null +++ b/packages/ui/panda/src/components/Label/Label.tsx @@ -0,0 +1,5 @@ +import { styled, type HTMLStyledProps } from '_panda/jsx'; +import { label } from '_panda/recipes'; + +export const Label = styled('label', label); +export type LabelProps = HTMLStyledProps; diff --git a/packages/ui/panda/src/components/Label/index.tsx b/packages/ui/panda/src/components/Label/index.tsx new file mode 100644 index 00000000..dd0252d8 --- /dev/null +++ b/packages/ui/panda/src/components/Label/index.tsx @@ -0,0 +1 @@ +export { Label } from './Label'; diff --git a/packages/ui/panda/src/components/index.ts b/packages/ui/panda/src/components/index.ts index e934663d..6307f820 100644 --- a/packages/ui/panda/src/components/index.ts +++ b/packages/ui/panda/src/components/index.ts @@ -6,3 +6,5 @@ export * from './Textfield'; export * from './Accordion'; export * from './Dialog'; export * from './Select'; +export * from './CheckBox'; +export * from './Label'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5c87b8fa..2785eb69 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -377,7 +377,7 @@ importers: version: 2.0.0(eslint@8.57.0) eslint-plugin-import: specifier: ^2.29.1 - version: 2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + version: 2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) eslint-plugin-jsx-a11y: specifier: ^6.8.0 version: 6.8.0(eslint@8.57.0) @@ -491,9 +491,15 @@ importers: '@radix-ui/react-accordion': specifier: ^1.2.1 version: 1.2.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0) + '@radix-ui/react-checkbox': + specifier: ^1.1.1 + version: 1.1.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0) '@radix-ui/react-dialog': specifier: ^1.1.2 version: 1.1.2(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0) + '@radix-ui/react-label': + specifier: ^2.1.1 + version: 2.1.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0) '@radix-ui/react-select': specifier: ^2.1.2 version: 2.1.2(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0) @@ -2415,6 +2421,15 @@ packages: '@types/react': optional: true + '@radix-ui/react-compose-refs@1.1.1': + resolution: {integrity: sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==} + peerDependencies: + '@types/react': ^18 + react: ^18 + peerDependenciesMeta: + '@types/react': + optional: true + '@radix-ui/react-context@1.0.1': resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==} peerDependencies: @@ -2600,6 +2615,19 @@ packages: '@types/react': optional: true + '@radix-ui/react-label@2.1.1': + resolution: {integrity: sha512-UUw5E4e/2+4kFMH7+YxORXGWggtY6sM8WIwh5RZchhLuUg2H1hc98Py+pr8HMz6rdaYrK2t296ZEjYLOCO5uUw==} + peerDependencies: + '@types/react': ^18 + '@types/react-dom': '*' + react: ^18 + react-dom: ^18.3.1 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-menu@2.1.1': resolution: {integrity: sha512-oa3mXRRVjHi6DZu/ghuzdylyjaMXLymx83irM7hTxutQbD+7IhPKdMdRHD26Rm+kHRrWcrUkkRPv5pd47a2xFQ==} peerDependencies: @@ -2743,6 +2771,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-primitive@2.0.1': + resolution: {integrity: sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==} + peerDependencies: + '@types/react': ^18 + '@types/react-dom': '*' + react: ^18 + react-dom: ^18.3.1 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-roving-focus@1.1.0': resolution: {integrity: sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==} peerDependencies: @@ -2787,6 +2828,15 @@ packages: '@types/react': optional: true + '@radix-ui/react-slot@1.1.1': + resolution: {integrity: sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==} + peerDependencies: + '@types/react': ^18 + react: ^18 + peerDependenciesMeta: + '@types/react': + optional: true + '@radix-ui/react-tabs@1.1.0': resolution: {integrity: sha512-bZgOKB/LtZIij75FSuPzyEti/XBhJH52ExgtdVqjCIh+Nx/FW+LhnbXtbCzIi34ccyMsyOja8T0thCzoHFXNKA==} peerDependencies: @@ -11235,6 +11285,12 @@ snapshots: optionalDependencies: '@types/react': 18.2.61 + '@radix-ui/react-compose-refs@1.1.1(@types/react@18.2.61)(react@18.2.0)': + dependencies: + react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.61 + '@radix-ui/react-context@1.0.1(@types/react@18.2.61)(react@18.2.0)': dependencies: '@babel/runtime': 7.24.7 @@ -11417,6 +11473,15 @@ snapshots: optionalDependencies: '@types/react': 18.2.61 + '@radix-ui/react-label@2.1.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0)': + dependencies: + '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0) + react: 18.2.0 + react-dom: 18.3.1(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.61 + '@types/react-dom': 18.2.19 + '@radix-ui/react-menu@2.1.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0)': dependencies: '@radix-ui/primitive': 1.1.0 @@ -11563,6 +11628,15 @@ snapshots: '@types/react': 18.2.61 '@types/react-dom': 18.2.19 + '@radix-ui/react-primitive@2.0.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0)': + dependencies: + '@radix-ui/react-slot': 1.1.1(@types/react@18.2.61)(react@18.2.0) + react: 18.2.0 + react-dom: 18.3.1(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.61 + '@types/react-dom': 18.2.19 + '@radix-ui/react-roving-focus@1.1.0(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0)': dependencies: '@radix-ui/primitive': 1.1.0 @@ -11624,6 +11698,13 @@ snapshots: optionalDependencies: '@types/react': 18.2.61 + '@radix-ui/react-slot@1.1.1(@types/react@18.2.61)(react@18.2.0)': + dependencies: + '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.2.61)(react@18.2.0) + react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.61 + '@radix-ui/react-tabs@1.1.0(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.3.1(react@18.2.0))(react@18.2.0)': dependencies: '@radix-ui/primitive': 1.1.0 @@ -13451,10 +13532,10 @@ snapshots: '@typescript-eslint/eslint-plugin': 6.17.0(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5) '@typescript-eslint/parser': 6.17.0(eslint@8.57.0)(typescript@5.4.5) eslint-config-prettier: 9.1.0(eslint@8.57.0) - eslint-import-resolver-alias: 1.1.2(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)) - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0) + eslint-import-resolver-alias: 1.1.2(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)) + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0) eslint-plugin-eslint-comments: 3.2.0(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) eslint-plugin-jest: 27.6.0(@typescript-eslint/eslint-plugin@7.1.0(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5) eslint-plugin-jsx-a11y: 6.8.0(eslint@8.57.0) eslint-plugin-playwright: 0.16.0(eslint-plugin-jest@27.6.0(@typescript-eslint/eslint-plugin@6.17.0(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0) @@ -15015,8 +15096,8 @@ snapshots: '@typescript-eslint/parser': 7.1.0(eslint@8.57.0)(typescript@5.4.5) eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) eslint-plugin-jsx-a11y: 6.8.0(eslint@8.57.0) eslint-plugin-react: 7.33.2(eslint@8.57.0) eslint-plugin-react-hooks: 4.6.0(eslint@8.57.0) @@ -15035,9 +15116,9 @@ snapshots: eslint: 8.57.0 eslint-plugin-turbo: 2.0.0(eslint@8.57.0) - eslint-import-resolver-alias@1.1.2(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)): + eslint-import-resolver-alias@1.1.2(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)): dependencies: - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0) eslint-import-resolver-node@0.3.9: dependencies: @@ -15047,12 +15128,29 @@ snapshots: transitivePeerDependencies: - supports-color + eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0): + dependencies: + debug: 4.3.4 + enhanced-resolve: 5.17.0 + eslint: 8.57.0 + eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0) + fast-glob: 3.3.2 + get-tsconfig: 4.7.2 + is-core-module: 2.13.1 + is-glob: 4.0.3 + transitivePeerDependencies: + - '@typescript-eslint/parser' + - eslint-import-resolver-node + - eslint-import-resolver-webpack + - supports-color + eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0): dependencies: debug: 4.3.4 enhanced-resolve: 5.17.0 eslint: 8.57.0 - eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) fast-glob: 3.3.2 get-tsconfig: 4.7.2 @@ -15064,13 +15162,13 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0): + eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0): dependencies: debug: 4.3.4 enhanced-resolve: 5.17.0 eslint: 8.57.0 - eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0) fast-glob: 3.3.2 get-tsconfig: 4.7.2 is-core-module: 2.13.1 @@ -15081,7 +15179,18 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.8.0(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0): + eslint-module-utils@2.8.0(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): + dependencies: + debug: 3.2.7 + optionalDependencies: + '@typescript-eslint/parser': 6.17.0(eslint@8.57.0)(typescript@5.4.5) + eslint: 8.57.0 + eslint-import-resolver-node: 0.3.9 + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0) + transitivePeerDependencies: + - supports-color + + eslint-module-utils@2.8.0(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0): dependencies: debug: 3.2.7 optionalDependencies: @@ -15092,14 +15201,14 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-module-utils@2.8.0(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0): + eslint-module-utils@2.8.0(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): dependencies: debug: 3.2.7 optionalDependencies: '@typescript-eslint/parser': 7.1.0(eslint@8.57.0)(typescript@5.4.5) eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0) + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0) transitivePeerDependencies: - supports-color @@ -15109,6 +15218,33 @@ snapshots: eslint: 8.57.0 ignore: 5.3.1 + eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): + dependencies: + array-includes: 3.1.7 + array.prototype.findlastindex: 1.2.3 + array.prototype.flat: 1.3.2 + array.prototype.flatmap: 1.3.2 + debug: 3.2.7 + doctrine: 2.1.0 + eslint: 8.57.0 + eslint-import-resolver-node: 0.3.9 + eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + hasown: 2.0.0 + is-core-module: 2.13.1 + is-glob: 4.0.3 + minimatch: 3.1.2 + object.fromentries: 2.0.7 + object.groupby: 1.0.1 + object.values: 1.1.7 + semver: 6.3.1 + tsconfig-paths: 3.15.0 + optionalDependencies: + '@typescript-eslint/parser': 6.17.0(eslint@8.57.0)(typescript@5.4.5) + transitivePeerDependencies: + - eslint-import-resolver-typescript + - eslint-import-resolver-webpack + - supports-color + eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0): dependencies: array-includes: 3.1.7 @@ -15119,7 +15255,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.17.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) hasown: 2.0.0 is-core-module: 2.13.1 is-glob: 4.0.3 @@ -15136,7 +15272,34 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0): + eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): + dependencies: + array-includes: 3.1.7 + array.prototype.findlastindex: 1.2.3 + array.prototype.flat: 1.3.2 + array.prototype.flatmap: 1.3.2 + debug: 3.2.7 + doctrine: 2.1.0 + eslint: 8.57.0 + eslint-import-resolver-node: 0.3.9 + eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + hasown: 2.0.0 + is-core-module: 2.13.1 + is-glob: 4.0.3 + minimatch: 3.1.2 + object.fromentries: 2.0.7 + object.groupby: 1.0.1 + object.values: 1.1.7 + semver: 6.3.1 + tsconfig-paths: 3.15.0 + optionalDependencies: + '@typescript-eslint/parser': 7.1.0(eslint@8.57.0)(typescript@5.4.5) + transitivePeerDependencies: + - eslint-import-resolver-typescript + - eslint-import-resolver-webpack + - supports-color + + eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0): dependencies: array-includes: 3.1.7 array.prototype.findlastindex: 1.2.3 @@ -15146,7 +15309,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) hasown: 2.0.0 is-core-module: 2.13.1 is-glob: 4.0.3 From e4026ce2d277a1b25e9e772fef16186f1cb4354e Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Fri, 20 Dec 2024 14:24:29 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=ED=8E=AB=20=ED=8C=90=EB=A7=A4=20?= =?UTF-8?q?=ED=99=95=EC=9D=B8=EC=B0=BD=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/messages/en_US.json | 8 +- apps/web/messages/ko_KR.json | 9 +- .../mypage/my-pet/SelectedPetTable.tsx | 119 +++++++++++++++--- apps/web/src/components/Global/useDialog.tsx | 7 +- 4 files changed, 120 insertions(+), 23 deletions(-) diff --git a/apps/web/messages/en_US.json b/apps/web/messages/en_US.json index 47eaae5d..342e4972 100644 --- a/apps/web/messages/en_US.json +++ b/apps/web/messages/en_US.json @@ -27,7 +27,10 @@ "sell": "Sell", "pet-list": "Pet list", "merge": "Merge", - "prepare": "Prepare" + "prepare": "Prepare", + "confirm": "Confirm", + "close": "Close", + "processing": "Processing..." }, "Gotcha": { "pet-gotcha-desc": "Draw a S+ Grade pet for 1,000 points", @@ -67,6 +70,9 @@ "merge": "Merge", "edit-product": "Edit Product", "buy-error-not-login": "Please sign in to use this feature.", + "sell-confirm": "Are you sure you want to sell?", + "sell-confirm-description": "After selling, the pet will disappear.", + "sell-confirm-checkbox": "Do not show this message again", "Background": { "buy-success": "Background purchased successfully", "buy-fail": "Failed to purchase background", diff --git a/apps/web/messages/ko_KR.json b/apps/web/messages/ko_KR.json index 2f2331fa..a98ca7e6 100644 --- a/apps/web/messages/ko_KR.json +++ b/apps/web/messages/ko_KR.json @@ -20,7 +20,10 @@ "pet-list": "펫 목록", "sell": "판매", "merge": "합치기", - "prepare": "준비중" + "prepare": "준비중", + "confirm": "확인", + "close": "닫기", + "processing": "처리중..." }, "HomePage": { "title": "Hello world!", @@ -68,6 +71,9 @@ "prepare": "준비중", "merge": "펫 합치기", "edit-product": "펫 경매 수정", + "sell-confirm": "정말로 판매하시겠습니까?", + "sell-confirm-description": "판매 후 펫은 사라집니다.", + "sell-confirm-checkbox": "메시지 다시 보지 않기", "Background": { "buy-success": "배경 구매 완료!", "buy-fail": "배경 구매에 실패했습니다.", @@ -105,6 +111,7 @@ "invalid-size-error": "유효하지 않은 사이즈", "farm-type-select-pet": "Farm Type에 사용할 펫을 선택해주세요.", "line-type-select-pet": "Line Type에 사용할 펫을 선택해주세요.", + "Merge": { "merge": "합치기", "merge-result": "합치기 결과", diff --git a/apps/web/src/app/[locale]/mypage/my-pet/SelectedPetTable.tsx b/apps/web/src/app/[locale]/mypage/my-pet/SelectedPetTable.tsx index 21a5f65d..38166341 100644 --- a/apps/web/src/app/[locale]/mypage/my-pet/SelectedPetTable.tsx +++ b/apps/web/src/app/[locale]/mypage/my-pet/SelectedPetTable.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useState } from 'react'; +import { useCallback, useState } from 'react'; import Image from 'next/image'; import { useTranslations } from 'next-intl'; import { css, cx } from '_panda/css'; @@ -8,12 +8,11 @@ import { Flex } from '_panda/jsx'; import { flex } from '_panda/patterns'; import { dropPet, type Persona } from '@gitanimals/api'; import { userQueries } from '@gitanimals/react-query'; -import { Button, Checkbox, Label } from '@gitanimals/ui-panda'; +import { Button, Checkbox, Dialog, Label } from '@gitanimals/ui-panda'; import { snakeToTitleCase } from '@gitanimals/util-common'; import { useMutation, useQueryClient } from '@tanstack/react-query'; import { toast } from 'sonner'; -import { useDialog } from '@/components/Global/useDialog'; import { ANIMAL_TIER_TEXT_MAP, getAnimalTierInfo } from '@/utils/animals'; import { getPersonaImage } from '@/utils/image'; @@ -30,13 +29,15 @@ export function SelectedPetTable({ currentPersona, reset }: SelectedPetTableProp const queryClient = useQueryClient(); const t = useTranslations('Shop'); const [isMergeOpen, setIsMergeOpen] = useState(false); - const { showDialog } = useDialog(); + const [sellPersonaId, setSellPersonaId] = useState(null); + const { setDoNotShowAgain, isChecked: isDoNotShowAgain } = useDoNotShowAgain(); const { mutate: dropPetMutation } = useMutation({ mutationFn: (personaId: string) => dropPet({ personaId }), onSuccess: (data) => { toast.success((t('pet-sold') as string).replace('[money]', data.givenPoint.toString())); queryClient.invalidateQueries({ queryKey: userQueries.allKey() }); + setSellPersonaId(null); reset(); }, onError: () => { @@ -46,20 +47,19 @@ export function SelectedPetTable({ currentPersona, reset }: SelectedPetTableProp const onSellClick = async () => { if (!currentPersona) return; - // dropPetMutation(currentPersona.id); - showDialog({ - title: `${currentPersona.type} 판매하기`, - description: ( - <> -

정말로 판매하시겠습니까?

- - - - - - ), - onConfirm: () => dropPetMutation(currentPersona.id), - }); + if (isDoNotShowAgain) { + dropPetMutation(currentPersona.id); + } else { + setSellPersonaId(currentPersona.id); + } + }; + + const onSellAction = async (isDoNotShowAgain: boolean) => { + if (!sellPersonaId) return; + dropPetMutation(sellPersonaId); + if (isDoNotShowAgain) { + setDoNotShowAgain(true); + } }; return ( @@ -101,6 +101,11 @@ export function SelectedPetTable({ currentPersona, reset }: SelectedPetTableProp targetPersona={currentPersona} /> )} + setSellPersonaId(null)} + /> ); } @@ -159,3 +164,81 @@ const rowStyle = css({ fontSize: '16px', }, }); + +const DO_NOT_SHOW_AGAIN_KEY = '@gitanimals/do-not-show-again'; + +const useDoNotShowAgain = () => { + const [isChecked, setIsChecked] = useState(() => { + if (typeof window === 'undefined') return false; + return localStorage.getItem(DO_NOT_SHOW_AGAIN_KEY) === 'true'; + }); + + const setDoNotShowAgain = useCallback((value: boolean) => { + setIsChecked(value); + if (typeof window === 'undefined') return; + localStorage.setItem(DO_NOT_SHOW_AGAIN_KEY, value.toString()); + }, []); + + return { + isChecked, + setDoNotShowAgain, + }; +}; + +function SellConfirmDialog({ + onConfirm, + onClose, + isOpen, +}: { + onConfirm: (isDoNotShowAgain: boolean) => Promise; + onClose: () => void; + isOpen: boolean; +}) { + const [isLoading, setIsLoading] = useState(false); + const t = useTranslations(); + const [isDoNotShowAgain, setIsDoNotShowAgain] = useState(false); + console.log('isDoNotShowAgain: ', isDoNotShowAgain); + + const confirmDialog = async () => { + if (isLoading) return; + + setIsLoading(true); + await onConfirm(isDoNotShowAgain); + setIsLoading(false); + + onClose(); + }; + + return ( + + + {t('Shop.sell-confirm')} + +

{t('Shop.sell-confirm-description')}

+ + + + setIsDoNotShowAgain(!isDoNotShowAgain)} /> + + + + + + + + + + ); +} + +const descriptionStyle = css({ + textAlign: 'left', + color: 'white.white_75', + width: '100%', +}); diff --git a/apps/web/src/components/Global/useDialog.tsx b/apps/web/src/components/Global/useDialog.tsx index 505350d9..b80f7ce3 100644 --- a/apps/web/src/components/Global/useDialog.tsx +++ b/apps/web/src/components/Global/useDialog.tsx @@ -1,6 +1,7 @@ 'use client'; import { type ReactNode, useState } from 'react'; +import { useTranslations } from 'next-intl'; import { css } from '_panda/css'; import { Flex } from '_panda/jsx'; import { Button, Dialog } from '@gitanimals/ui-panda'; @@ -50,7 +51,7 @@ export function useDialog() { export function DialogComponent() { const [dialog, setDialog] = useAtom(dialogAtom); const [isLoading, setIsLoading] = useState(false); - + const t = useTranslations('Common'); const closeDialog = () => { setDialog((prev) => ({ ...prev, @@ -79,11 +80,11 @@ export function DialogComponent() { {dialog.onConfirm && ( )} From 03e5bf09fb0fa3e861f96c06da037419bd20b154 Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Fri, 20 Dec 2024 17:19:05 +0900 Subject: [PATCH 3/4] =?UTF-8?q?style:=20checkbox=20style=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/panda/src/components/CheckBox/CheckBox.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/ui/panda/src/components/CheckBox/CheckBox.tsx b/packages/ui/panda/src/components/CheckBox/CheckBox.tsx index 53ed6a85..769556ef 100644 --- a/packages/ui/panda/src/components/CheckBox/CheckBox.tsx +++ b/packages/ui/panda/src/components/CheckBox/CheckBox.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import * as CheckboxPrimitive from '@radix-ui/react-checkbox'; import { Check } from 'lucide-react'; -import { cx } from '_panda/css'; +import { css, cx } from '_panda/css'; import { styled } from '_panda/jsx'; import { checkbox, icon } from '_panda/recipes'; @@ -14,7 +14,7 @@ const BaseCheckbox = React.forwardRef< const styles = checkbox(); return ( - + @@ -24,3 +24,12 @@ const BaseCheckbox = React.forwardRef< BaseCheckbox.displayName = CheckboxPrimitive.Root.displayName; export const Checkbox = styled(BaseCheckbox); + +const checkboxLightStyle = css({ + borderColor: '#fafafa', + + '&[data-state="checked"]': { + backgroundColor: '#fafafa', + color: '#000', + }, +}); From 8884b6b130fd5bddba340565f0c8c5c00ebd3c08 Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Tue, 24 Dec 2024 23:29:31 +0900 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=EC=BD=94=EB=93=9C=EB=A6=AC=EB=B7=B0?= =?UTF-8?q?=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/src/app/[locale]/mypage/my-pet/SelectedPetTable.tsx | 4 ++-- apps/web/src/constants/storage.ts | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/web/src/app/[locale]/mypage/my-pet/SelectedPetTable.tsx b/apps/web/src/app/[locale]/mypage/my-pet/SelectedPetTable.tsx index 38166341..d36edf15 100644 --- a/apps/web/src/app/[locale]/mypage/my-pet/SelectedPetTable.tsx +++ b/apps/web/src/app/[locale]/mypage/my-pet/SelectedPetTable.tsx @@ -13,6 +13,7 @@ import { snakeToTitleCase } from '@gitanimals/util-common'; import { useMutation, useQueryClient } from '@tanstack/react-query'; import { toast } from 'sonner'; +import { LOCAL_STORAGE_KEY } from '@/constants/storage'; import { ANIMAL_TIER_TEXT_MAP, getAnimalTierInfo } from '@/utils/animals'; import { getPersonaImage } from '@/utils/image'; @@ -165,7 +166,7 @@ const rowStyle = css({ }, }); -const DO_NOT_SHOW_AGAIN_KEY = '@gitanimals/do-not-show-again'; +const DO_NOT_SHOW_AGAIN_KEY = LOCAL_STORAGE_KEY.isDoNotShowAgain; const useDoNotShowAgain = () => { const [isChecked, setIsChecked] = useState(() => { @@ -197,7 +198,6 @@ function SellConfirmDialog({ const [isLoading, setIsLoading] = useState(false); const t = useTranslations(); const [isDoNotShowAgain, setIsDoNotShowAgain] = useState(false); - console.log('isDoNotShowAgain: ', isDoNotShowAgain); const confirmDialog = async () => { if (isLoading) return; diff --git a/apps/web/src/constants/storage.ts b/apps/web/src/constants/storage.ts index 1a59c647..55374f87 100644 --- a/apps/web/src/constants/storage.ts +++ b/apps/web/src/constants/storage.ts @@ -1,3 +1,4 @@ export const LOCAL_STORAGE_KEY = { callbackUrl: 'callbackUrl', + isDoNotShowAgain: '@gitanimals/isDoNotShowAgain', } as const;