feat: 결제 배포 버전

Author: Jeon-suhyeon

src/app/favorites/_components/Favorites.tsx

@@ -1,28 +1,16 @@
 'use client'
 
 import useGetFavorites from '@/api/useGetFavorites'
-import LoginButtonSection from '@/components/shared/LoginButtonSection'
-import memberStore from '@/store/user'
 import FavoritesStoreList from './FavoritesStoreList'
 import RecentStoreList from './RecentStoreList'
 
 const Favorites = () => {
-  const { member } = memberStore()
   const { data: favorites } = useGetFavorites()
 
   return (
-    <div className="flex h-full flex-col bg-neutral-100">
-      {member && favorites ? (
-        <FavoritesStoreList favorites={favorites} />
-      ) : (
-        <div className="px-mobile_safe pb-4 pt-[calc(20px+1rem)]">
-          <LoginButtonSection
-            text={`찜한 맛집을 확인하려면 로그인이 필요해요.\n 지금 가입하고 행복에 가까워지세요!`}
-          />
-        </div>
-      )}
-
-      <RecentStoreList favorites={favorites} />
+    <div className="flex h-full flex-col bg-white">
+      <FavoritesStoreList favorites={favorites} />
+      <RecentStoreList favorites={favorites || []} />
     </div>
   )
 }

src/app/favorites/_components/FavoritesStoreList.tsx

@@ -1,11 +1,27 @@
 'use client'
 
 import { Favorites } from '@/api/useGetFavorites'
+import FullpageLoader from '@/components/FullpageLoader'
+import LoginButtonSection from '@/components/shared/LoginButtonSection'
+import memberStore from '@/store/user'
 import { ROUTE_PATHS } from '@/utils/routes'
 import { useRouter } from 'next/navigation'
 import FavoritesListItem from './FavoritesListItem'
 
-const FavoritesStoreList = ({ favorites }: { favorites: Favorites[] }) => {
+const FavoritesStoreList = ({ favorites }: { favorites?: Favorites[] }) => {
+  const { member } = memberStore()
+
+  if (!member)
+    return (
+      <div className="px-mobile_safe pb-4 pt-[calc(20px+1rem)]">
+        <LoginButtonSection
+          text={`찜한 맛집을 확인하려면 로그인이 필요해요.\n 지금 가입하고 행복에 가까워지세요!`}
+        />
+      </div>
+    )
+
+  if (!favorites) return <FullpageLoader useNavigation useBottomNavigation />
+
   return (
     <div>
       <p className="flex items-center gap-2 bg-neutral-100 px-mobile_safe py-3 text-base font-bold text-black">

src/app/globals.css

@@ -198,6 +198,14 @@ button {
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
   }
+  * {
+    -webkit-text-decoration: none !important;
+    text-decoration: none !important;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -webkit-text-size-adjust: none;
+    -webkit-text-fill-color: currentColor;
+  }
 }
 @layer base {
   * {

src/app/pay/_components/OrderInfo.tsx

@@ -264,9 +264,9 @@ const OrderInfo = () => {
           // customerMobilePhone: "01012341234",
           card: {
             useEscrow: false,
-            // flowMode: 'DIRECT',
-            flowMode: 'DEFAULT',
-            // cardCompany: 'TOSSBANK',
+            flowMode: 'DIRECT',
+            // flowMode: 'DEFAULT',
+            cardCompany: 'TOSSBANK',
             useCardPoint: false,
             useAppCardOnly: false,
           },
@@ -410,13 +410,10 @@ const OrderInfo = () => {
         </div>
       </div>
       <div className="flex flex-col gap-4 rounded-xl border border-solid border-gray-400 px-5 py-4">
-        <div className="flex flex-row justify-between">
+        <div className="flex flex-row justify-between" onClick={handleSelectOrderPay}>
           <div className="place-content-center text-base font-extrabold">결제수단</div>
           <div className="flex flex-row items-center gap-1">
-            <div
-              className="place-content-center text-sm font-semibold text-primary"
-              onClick={handleSelectOrderPay}
-            >
+            <div className="place-content-center text-sm font-semibold text-primary">
               {!paymentType ? (
                 '결제수단을 선택해주세요'
               ) : (

src/app/pay/fail/_components/PayFail.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import Icon from '@/components/Icon'
+import { ROUTE_PATHS } from '@/utils/routes'
+import { useRouter } from 'next/navigation'
+import { useEffect, useState } from 'react'
+
+const PayFail = () => {
+  const router = useRouter()
+  const [timer, setTimer] = useState(3)
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimer((prev) => prev - 1)
+    }, 1000)
+
+    return () => clearInterval(timer)
+  }, [])
+
+  useEffect(() => {
+    if (timer <= 0) {
+      router.push(ROUTE_PATHS.PAY)
+    }
+  }, [timer])
+
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-6">
+      <Icon name="CircleX" className="size-10 text-primary" size={40} />
+      <div className="flex flex-col items-center gap-1">
+        <p className="text-2xl font-bold">결제 중 오류가 발생했어요.</p>
+        {timer > 0 && <p className="text-sm text-gray-500">{timer}초 후 자동으로 이동합니다.</p>}
+      </div>
+    </div>
+  )
+}
+
+export default PayFail

src/app/pay/fail/page.tsx

@@ -0,0 +1,7 @@
+import PayFail from './_components/PayFail'
+
+const PayFailPage = () => {
+  return <PayFail />
+}
+
+export default PayFailPage

src/components/Badge.tsx

@@ -4,7 +4,7 @@ import * as React from 'react'
 import { cn } from '@/lib/utils'
 
 export const badgeVariants = cva(
-  'inline-flex items-center border px-[4px] py-[3px] text-[11px] leading-[11px] size-fit rounded-sm',
+  'inline-flex items-center border px-[4px] py-[3px] text-[11px] leading-[11px] size-fit rounded-sm [-webkit-tap-highlight-color:transparent] [-webkit-text-decoration:none]',
   {
     variants: {
       variant: {