From 31939a80c3f2a17788985d42df3e5b2622ef54a3 Mon Sep 17 00:00:00 2001
From: Suhyeon Jeon <suhyeon.jeon@fig.xyz>
Date: Sun, 2 Mar 2025 00:27:33 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B2=B0=EC=A0=9C=20=EB=B0=B0=ED=8F=AC?=
 =?UTF-8?q?=20=EB=B2=84=EC=A0=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/favorites/_components/Favorites.tsx   | 18 ++-------
 .../_components/FavoritesStoreList.tsx        | 18 ++++++++-
 src/app/globals.css                           |  8 ++++
 src/app/pay/_components/OrderInfo.tsx         | 13 +++----
 src/app/pay/fail/_components/PayFail.tsx      | 37 +++++++++++++++++++
 src/app/pay/fail/page.tsx                     |  7 ++++
 src/components/Badge.tsx                      |  2 +-
 7 files changed, 78 insertions(+), 25 deletions(-)
 create mode 100644 src/app/pay/fail/_components/PayFail.tsx
 create mode 100644 src/app/pay/fail/page.tsx

diff --git a/src/app/favorites/_components/Favorites.tsx b/src/app/favorites/_components/Favorites.tsx
index b7b7e83..ffbc5c7 100644
--- a/src/app/favorites/_components/Favorites.tsx
+++ b/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>
   )
 }
diff --git a/src/app/favorites/_components/FavoritesStoreList.tsx b/src/app/favorites/_components/FavoritesStoreList.tsx
index 26d7c05..3eb103f 100644
--- a/src/app/favorites/_components/FavoritesStoreList.tsx
+++ b/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">
diff --git a/src/app/globals.css b/src/app/globals.css
index a628e56..c3c6865 100644
--- a/src/app/globals.css
+++ b/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 {
   * {
diff --git a/src/app/pay/_components/OrderInfo.tsx b/src/app/pay/_components/OrderInfo.tsx
index 2f92907..68f9943 100644
--- a/src/app/pay/_components/OrderInfo.tsx
+++ b/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 ? (
                 '결제수단을 선택해주세요'
               ) : (
diff --git a/src/app/pay/fail/_components/PayFail.tsx b/src/app/pay/fail/_components/PayFail.tsx
new file mode 100644
index 0000000..4118f05
--- /dev/null
+++ b/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
diff --git a/src/app/pay/fail/page.tsx b/src/app/pay/fail/page.tsx
new file mode 100644
index 0000000..fbc2c78
--- /dev/null
+++ b/src/app/pay/fail/page.tsx
@@ -0,0 +1,7 @@
+import PayFail from './_components/PayFail'
+
+const PayFailPage = () => {
+  return <PayFail />
+}
+
+export default PayFailPage
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index ffb56df..dc4b262 100644
--- a/src/components/Badge.tsx
+++ b/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: {