[feat] 🍀결제 상세에 연동 버튼 추가

Author: hhbb0081

Diff for: app/(default)/statistics/goal/register/page.tsx

@@ -5,6 +5,7 @@ import { Input } from '@/components/ui/input';
 import { QUERY_KEYS } from '@/constants/queryKey';
 import { useGenericMutation } from '@/hooks/query/globalQuery';
 import { useQueryClient } from '@tanstack/react-query';
+import { cubicBezier, motion } from 'framer-motion';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter, useSearchParams } from 'next/navigation';
@@ -57,33 +58,71 @@ function GoalRegisterContent() {
     }
   };
 
+  const easeCustom = cubicBezier(0.4, 0, 0.2, 1);
+
+  const container = {
+    hidden: { opacity: 0 },
+    show: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+        ease: easeCustom,
+      },
+    },
+  };
+
+  const item = {
+    hidden: { opacity: 0, height: 0, scale: 0.8 },
+    show: {
+      opacity: [0, 0.5, 1],
+      height: 'auto',
+      scale: 1,
+      transition: {
+        duration: 0.7,
+        ease: easeCustom,
+        opacity: {
+          duration: 1,
+          ease: easeCustom,
+        },
+      },
+    },
+  };
+
   if (!complete) {
     return (
-      <div className='min-h-screen w-[90%] mx-auto z-50 flex flex-col justify-start items-start gap-10'>
+      <motion.div
+        variants={container}
+        initial='hidden'
+        animate='show'
+        className='min-h-screen w-[90%] mx-auto z-50 flex flex-col justify-start items-start gap-10'
+      >
         <form
           className='w-full flex flex-col items-start justify-start gap-4 pt-40 sm:pt-24'
           onSubmit={handleSubmit}
         >
-          <span className='text-[1.25rem] font-bold'>
+          <motion.div variants={item} className='text-[1.25rem] font-bold'>
             이번 달 목표 금액을 설정해주세요.
-          </span>
-          <div className='mx-auto w-[150px] sm:w-[200px] h-auto'>
+          </motion.div>
+          <motion.div
+            variants={item}
+            className='mx-auto w-[150px] sm:w-[200px] h-auto'
+          >
             <Image
               src='/images/money.svg'
               alt='documentList'
               width={200}
               height={200}
               className='float-animation'
             />
-          </div>
-          <div className='flex flex-col gap-1'>
+          </motion.div>
+          <motion.div variants={item} className='flex flex-col gap-1'>
             <span className='text-[1.625rem] font-bold'>
               {formatNumber(avgSpent)}
               <span className='font-medium text-[1rem] ml-1'>원</span>
             </span>
             <span>최근 3개월 간 평균 지출액이에요</span>
-          </div>
-          <div className='flex items-end gap-2'>
+          </motion.div>
+          <motion.div variants={item} className='flex items-end gap-2'>
             <Input
               value={formatNumber(goal)}
               onChange={(e) => setGoal(e.target.value)}
@@ -92,20 +131,34 @@ function GoalRegisterContent() {
               className='bg-darkGrey border-none outline-none focus:outline-none focus:bg-[#515151]'
             />
             <span className='font-medium'>원</span>
+          </motion.div>
+          <div className='absolute bottom-8 left-1/2 transform -translate-x-1/2 w-[90%] max-w-[460px] flex items-center justify-between'>
+            <Button
+              type='button'
+              className='w-[35%] bg-white hover:bg-grey text-deepDarkGrey'
+              onClick={() => router.back()}
+            >
+              취소
+            </Button>
+            <Button
+              type='submit'
+              className='w-[60%] bg-main hover:bg-[#476BE3]'
+            >
+              등록
+            </Button>
           </div>
-          <Button
-            type='submit'
-            className='absolute bottom-8 left-1/2 transform -translate-x-1/2 w-[90%] max-w-[460px] bg-main hover:bg-[#476BE3]'
-          >
-            등록
-          </Button>
         </form>
-      </div>
+      </motion.div>
     );
   }
 
   return (
-    <div className='relative h-[100dvh] mx-auto z-50 flex flex-col justify-center items-center gap-10 pb-12 pt-40 sm:pt-20'>
+    <motion.div
+      variants={container}
+      initial='hidden'
+      animate='show'
+      className='relative h-[100dvh] mx-auto z-50 flex flex-col justify-center items-center gap-10 pb-12 pt-40 sm:pt-20'
+    >
       <div className='mx-auto w-[300px] sm:w-[350px] h-auto'>
         <video
           src='/images/complete.mp4'
@@ -117,10 +170,13 @@ function GoalRegisterContent() {
           playsInline
         />
       </div>
-      <div className='flex flex-col gap-3 text-[1rem] font-semibold'>
+      <motion.div
+        variants={item}
+        className='flex flex-col gap-3 text-[1.25rem] font-semibold'
+      >
         <span>목표 설정이 완료되었어요.</span>
         <span>목표를 달성하러 가볼까요?</span>
-      </div>
+      </motion.div>
       <Link href='/statistics/goal' className='w-full'>
         <Button
           type='submit'
@@ -129,7 +185,7 @@ function GoalRegisterContent() {
           목표 달성하러 가기
         </Button>
       </Link>
-    </div>
+    </motion.div>
   );
 }
 

Diff for: app/(head)/accounts/[accountId]/page.tsx

@@ -6,20 +6,20 @@ import { AccountDetailCard } from '@/components/molecules/sion/AccountDetailCard
 import TitleBottomLine from '@/components/ui/TitleBottomLine';
 import { QUERY_KEYS } from '@/constants/queryKey';
 import { useGenericQuery } from '@/hooks/query/globalQuery';
+import usePlatformCheck from '@/hooks/usePlatformCheck';
 import { AccountsPayment } from '@/types';
-import { PlatformType } from '@/types/authType';
 import dayjs from 'dayjs';
 import 'dayjs/locale/ko';
-import { getAccountsDetail, getPlatform } from '@/lib/api';
+import { getAccountsDetail } from '@/lib/api';
 
 dayjs.locale('ko');
 
-export const PLATFORMS = ['쿠팡', '11번가', '네이버페이'];
 export default function AccountDetail({
   params,
 }: {
   params: { accountId: string };
 }) {
+  const { platforms } = usePlatformCheck();
   const { resData: accountsDetail, isLoading } = useGenericQuery(
     [QUERY_KEYS.ACCOUNTS_DETAIL, params.accountId],
     () =>
@@ -29,24 +29,10 @@ export default function AccountDetail({
       })
   );
 
-  const { resData: platformData, isLoading: platformLoading } =
-    useGenericQuery<PlatformType>([QUERY_KEYS.PLATFORM], () => getPlatform());
-
-  if (isLoading || platformLoading || !platformData || !accountsDetail) {
+  if (!platforms || isLoading || !accountsDetail) {
     return <Loading />;
   }
 
-  const platforms = platformData?.data?.platformInfos
-    ?.map(({ platformName }) => {
-      const platformMap: Record<string, string> = {
-        COUPANG: '쿠팡',
-        '11ST': '11번가',
-        NAVER: '네이버페이',
-      };
-      return platformMap[platformName];
-    })
-    .filter((platform) => !PLATFORMS.includes(platform ?? ''));
-
   return (
     <>
       <div className='overflow-y-scroll scrollbar-hide min-h-full'>

Diff for: app/(head)/mypage/membership/[shop]/page.tsx

@@ -33,7 +33,13 @@ export default function MembershipDetail({
     {
       onSuccess: (data) => {
         if (data.code === 200) {
-          router.push(from === 'payments' ? `/payments` : `/mypage/membership`);
+          if (from === 'accounts') {
+            router.back();
+          } else {
+            router.push(
+              from === 'payments' ? '/payments' : '/mypage/membership'
+            );
+          }
 
           queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.PLATFORM] });
         }

Diff for: app/(head)/page.tsx

@@ -81,7 +81,7 @@ export default function Home() {
           animate='show'
           className='flex justify-center flex-col items-center w-full'
         >
-          <AdCarousel />
+          <AdCarousel userName={statisticsDiff?.data?.userName ?? ''} />
 
           <motion.div
             variants={item}
@@ -107,8 +107,8 @@ export default function Home() {
             <AccentText
               prefix='지난달 대비'
               accent={
-                (
-                  Math.abs(statisticsDiff?.data?.monthlyPaymentDifference) ?? 0
+                Math.abs(
+                  statisticsDiff?.data?.monthlyPaymentDifference
                 )?.toLocaleString() ?? 0
               }
               suffix='원 지출했어요.'

Diff for: app/(head)/statistics/[category]/page.tsx

@@ -9,6 +9,7 @@ import { CATEGORY } from '@/constants/category';
 import { COLORS } from '@/constants/color';
 import { QUERY_KEYS } from '@/constants/queryKey';
 import { useGenericQuery } from '@/hooks/query/globalQuery';
+import usePlatformCheck from '@/hooks/usePlatformCheck';
 import { AccountsPayment, AccountsPayments } from '@/types/paymentType';
 import { Category } from '@/types/table';
 import dayjs from 'dayjs';
@@ -24,13 +25,16 @@ function PaymentCategoryContent({ category }: { category: Category }) {
   const searchParams = useSearchParams();
   const date = searchParams.get('date');
 
+  const { platforms } = usePlatformCheck();
+
   const { resData: paymentsData, isLoading } =
     useGenericQuery<AccountsPayments>(
       [QUERY_KEYS.STATISTICS_CATEGORY, category],
       () => getPaymentsCategory({ category })
     );
 
-  if (!paymentsData || !paymentsData.data || isLoading) return <Loading />;
+  if (!platforms || !paymentsData || !paymentsData.data || isLoading)
+    return <Loading />;
 
   const {
     // paymentCount,
@@ -95,7 +99,13 @@ function PaymentCategoryContent({ category }: { category: Category }) {
             >
               {paymentDetail?.map((pd) => (
                 <div key={pd.paymentId}>
-                  <PaymentCard showAccount={true} paymentInfo={pd} />
+                  <PaymentCard
+                    showAccount={true}
+                    paymentInfo={pd}
+                    isConnect={
+                      platforms?.includes(pd?.paymentPlace ?? '11번가') ?? false
+                    }
+                  />
                 </div>
               ))}
             </TitleBottomLine>

Diff for: app/(head)/statistics/recommend/page.tsx

@@ -135,7 +135,7 @@ function RecommendationContent() {
                     >
                       <div>
                         <CategorySubCard
-                          img={`/images/subscribes/${productId}.png`}
+                          img={`/images/products/${productId}.png`}
                           category={category}
                           color={COLORS[idx]}
                           paymentName={storeName}

Diff for: components/molecules/CardBenefitContent.tsx

@@ -15,7 +15,6 @@ function CardBenefitContent({
   selectedIdx: number;
   productId: number;
 }) {
-  console.log(selectedIdx, productId);
   const { resData: productData, isLoading } =
     useGenericQuery<ProductDetailType>(
       [QUERY_KEYS.PRODUCT_DETAIL, selectedIdx],

Diff for: components/molecules/CardCarousel.tsx

@@ -95,7 +95,7 @@ export const CardCarousel = ({ cards }: { cards: RecommendationsType[] }) => {
                   >
                     <Image
                       ref={imageRef}
-                      src={`/images/subscribes/${productId}.png`}
+                      src={`/images/products/${productId}.png`}
                       alt='card'
                       width={0}
                       height={0}

Diff for: components/molecules/PaymentCard.tsx

@@ -1,6 +1,6 @@
-import { PLATFORMS } from '@/app/(head)/accounts/[accountId]/page';
+import { platformMap, PLATFORMS } from '@/constants/category';
 import { AccountsPaymentsDetail } from '@/types';
-import { Badge, ChevronRight } from 'lucide-react';
+import { ChevronRight } from 'lucide-react';
 import { parseCategory, parsePaymentType } from '@/lib/utils';
 import UploadButton from './ui/UploadButton';
 
@@ -62,18 +62,31 @@ function PaymentCard({
             </span>
           ) : null}
         </div>
-        {shootNeed && paymentType === 'OFFLINE' ? (
+        {shootNeed ? (
           <UploadButton paymentId={paymentId} />
-        ) : generalPlatform && !isConnect ? (
-          <Badge className='bg-main text-white text-[0.5rem] font-medium'>
-            연동하기
-          </Badge>
+        ) : generalPlatform ? (
+          isConnect ? (
+            <a
+              href={`/accounts/payments/${paymentId}`}
+              className='text-[0.5rem] font-medium flex items-center gap-1'
+            >
+              상세내역 불러오기
+              <ChevronRight className='w-2 h-2' />
+            </a>
+          ) : (
+            <a
+              className='px-3 py-1 text-[.625rem] rounded-full cursor-pointer bg-main text-white font-medium'
+              href={`/mypage/membership/${platformMap[paymentPlace]}?from=accounts`}
+            >
+              연동하기
+            </a>
+          )
         ) : (
           <a
             href={`/accounts/payments/${paymentId}`}
             className='text-[0.5rem] font-medium flex items-center gap-1'
           >
-            {shootNeed ? '상세내역 불러오기' : '상세보기'}{' '}
+            상세보기
             <ChevronRight className='w-2 h-2' />
           </a>
         )}

Diff for: components/molecules/sion/CardSlide.tsx

@@ -77,7 +77,7 @@ export default function CardSlide({ cards: initialCards }: CardSlideProps) {
           })}
         </ul>
       </div>
-      <div className='absolute bottom-0 left-0 w-full h-10 flex flex-col justify-center items-center'>
+      <div className='absolute -bottom-1 left-0 w-full h-10 flex flex-col justify-center items-center'>
         <p className='text-sm font-medium text-darkGrey'>{cards[0].bankName}</p>
         <p className='text-[0.9375rem]'>{cards[0].cardNumber}</p>
       </div>

Diff for: components/molecules/ui/SimpleBottomSheet.tsx

@@ -38,14 +38,13 @@ function SimpleBottomSheet({
       <DrawerContent
         ref={drawerRef}
         className='pb-24 pt-6 mx-auto max-w-[512px] px-2 w-full flex flex-col items-start justify-center border-none bg-black text-white'
-        tabIndex={-1} // 포커스 가능하도록 설정
-        role='dialog' // 접근성 역할 추가
-        aria-modal='true' // 모달 상태 명시
+        role='dialog'
+        aria-modal='true'
       >
         <DrawerHeader className='w-full'>
           <DrawerTitle></DrawerTitle>
-          <DrawerDescription></DrawerDescription>
           {content}
+          <DrawerDescription />
         </DrawerHeader>
       </DrawerContent>
     </Drawer>

Diff for: constants/category.ts

@@ -12,3 +12,14 @@ export const CATEGORY: Record<Category, string> = {
   HEALTH: '병원',
   OTHERS: '기타',
 };
+
+export const PLATFORMS = ['쿠팡', '11번가', '네이버페이'];
+
+export const platformMap: Record<string, string> = {
+  COUPANG: '쿠팡',
+  '11ST': '11번가',
+  NAVER: '네이버페이',
+  쿠팡: 'COUPANG',
+  '11번가': '11ST',
+  네이버페이: 'NAVER',
+};