feat: pay, account 관련 empty case 처리

Author: Chaemin-L

next.config.ts

@@ -1,6 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
+  reactStrictMode: false,
   async rewrites() {
     return [
       {

src/app/(with-layout)/pay/(components)/pay-card.tsx

@@ -7,7 +7,11 @@ import "swiper/css/effect-flip";
 import { EffectFlip } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 
-export default function PayCard() {
+interface Props {
+  balance: number;
+}
+
+export default function PayCard({ balance }: Props) {
   const [fullScreen, setFullScreen] = useState<boolean | HTMLImageElement>(
     false
   );
@@ -150,7 +154,7 @@ export default function PayCard() {
             <div className="flex flex-col gap-2">
               <div className="flex justify-between w-[200px]">
                 <span className="text-bd3 xs:text-bd1">포인트</span>
-                <span className="text-t4 xs:text-t3">8106원</span>
+                <span className="text-t4 xs:text-t3">{balance}원</span>
               </div>
               <div className="flex items-center justify-between w-[200px]">
                 <span className="text-bd3 xs:text-bd1">머니</span>

src/app/(with-layout)/pay/accounts/add/page.tsx

@@ -41,14 +41,14 @@ export default function Page() {
             </Accordion.Summary>
           </div>
           <Accordion.Details>
-            <div className="grid grid-cols-4 gap-5">
+            <div className="grid grid-cols-4 gap-2">
               {bankList.map((bank) => (
                 <button
                   key={bank.id}
-                  className="hover:bg-shadow-800 aspect-square rounded-xl place-content-center select-none"
+                  className="hover:bg-shadow-800 p-2 aspect-square rounded-xl flex justify-center items-center select-none"
                   onClick={() => handleBankClick(bank)}
                 >
-                  <div className="flex flex-col gap-3 justify-center items-center">
+                  <div className="flex flex-col gap-2 justify-center items-center">
                     <div className="bg-white rounded-xl p-2">
                       <Image
                         width={24}
@@ -58,7 +58,7 @@ export default function Page() {
                         className="w-8 h-8"
                       />
                     </div>
-                    <div className="text-bd1 font-bold text-center">
+                    <div className="text-bd4 xs:text-bd3 sm:text-bd1 font-bold text-center">
                       {bank.name}
                     </div>
                   </div>

src/app/(with-layout)/pay/accounts/page.tsx

@@ -2,20 +2,38 @@
 import BottomFixedButton, {
   Button,
 } from "@/app/(_components)/bottom-fixed-button";
-import Link from "next/link";
+import BottomSheet from "@/app/(_components)/bottom-sheet";
 import { PATH } from "@/lib/_shared/paths";
+import { AccountType } from "@/types/api/pay";
+import getBankId from "@/utils/getBankName";
 import Image from "next/image";
-import BottomSheet from "@/app/(_components)/bottom-sheet";
+import Link from "next/link";
 import {
-  useState,
   ChangeEventHandler,
   KeyboardEventHandler,
   useEffect,
+  useState,
 } from "react";
 
-const accounts = [
-  { id: "hana", name: "하나", accountNum: 1010102030210 },
-  { id: "woori", name: "우리", accountNum: 1000023366635 },
+const accounts: AccountType[] = [
+  {
+    accountId: 123,
+    bankName: "하나",
+    accountNum: 1010102030210,
+    accountStatus: "ACTIVE",
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    accountHolder: "이채민",
+  },
+  {
+    accountId: 2322,
+    bankName: "우리",
+    accountNum: 1000023366635,
+    accountStatus: "ACTIVE",
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    accountHolder: "이채민",
+  },
 ];
 
 const pay = 12230;
@@ -41,7 +59,12 @@ export default function AccountListPage() {
     <div className="flex flex-col gap-10 pt-5">
       <h1 className="text-t2">연결 계좌</h1>
       <ul className="flex flex-col ">
-        {accounts.map(({ id, name, accountNum }) => (
+        {accounts.length === 0 && (
+          <div className="text-center text-shadow-500">
+            등록된 계좌가 없습니다
+          </div>
+        )}
+        {accounts.map(({ bankName, accountNum }) => (
           <div
             key={accountNum}
             className="flex justify-between hover:bg-shadow-800 p-5 rounded-xl"
@@ -51,12 +74,12 @@ export default function AccountListPage() {
                 <Image
                   width={28}
                   height={28}
-                  src={`/icons/bank/${id}.svg`}
-                  alt={name}
+                  src={`/icons/bank/${getBankId(bankName)}.svg`}
+                  alt={bankName}
                 />
               </div>
               <div className="text-bd1">
-                {name}&nbsp;
+                {bankName}&nbsp;
                 {accountNum.toString().slice(-4)}
               </div>
             </div>

src/app/(with-layout)/pay/page.tsx

@@ -4,19 +4,27 @@ import Link from "next/link";
 import BadgeStatus from "./(components)/badge-status";
 import FundingProgress from "./(components)/funding-progress";
 import GoCardBenefit from "./(components)/go-card-benefit";
-import PayCard from "./(components)/pay-card";
 import PayNotice from "./(components)/pay-notice";
 import PointMoney from "./(components)/point-money";
 
 export default async function HomePage() {
+  // const { balance } = await getPay();
+  const balance = 1000;
+
   // TODO: 실제 데이터 fetching
   return (
     <div className="flex flex-col gap-5 w-full">
       {/** 알림 */}
       <PayNotice />
 
       {/** 페이 */}
-      <PayCard />
+      <Link
+        href={PATH.PAY_ACCOUNTS}
+        className="card aspect-[1.6/1] w-full min-h-36 flex p-0 justify-center items-center "
+      >
+        페이 등록하기 +
+      </Link>
+      {/* <PayCard balance={balance} /> */}
 
       {/** 포인트, 머니 */}
       <PointMoney />

src/types/api/pay.ts

@@ -0,0 +1,24 @@
+import { BankNameType } from "../bank";
+
+export interface PayType {
+  payNum: number;
+  balance: number;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+export interface PaymentType {
+  userId: string;
+  sellerId: string;
+  orderName: string;
+}
+
+export interface AccountType {
+  accountId: number;
+  accountNum: number;
+  bankName: BankNameType;
+  accountStatus: "ACTIVE" | "INACTIVE" | "SUSPENDED";
+  accountHolder: string; // 계좌 주
+  createdAt: Date;
+  updatedAt: Date;
+}

src/utils/getBankName.ts

@@ -1,26 +1,27 @@
-// @deprecated
-export default function getBankName(bankId: string) {
-  switch (bankId) {
-    case "hana":
-      return "하나";
-    case "ibk":
-      return "IBK";
-    case "kakao":
-      return "카카오";
-    case "kb":
-      return "KB";
-    case "kbank":
-      return "케이뱅크";
-    case "nonghyup":
-      return "농협";
-    case "sc":
-      return "SC제일";
-    case "shinhan":
-      return "신한";
-    case "toss":
-      return "토스";
-    case "woori":
-      return "우리";
+import { BankNameType } from "@/types/bank";
+
+export default function getBankId(bankName: BankNameType) {
+  switch (bankName) {
+    case "하나":
+      return "hana";
+    case "IBK기업":
+      return "ibk";
+    case "카카오뱅크":
+      return "kakao";
+    case "국민":
+      return "kb";
+    case "케이뱅크":
+      return "kbank";
+    case "농협":
+      return "nonghyup";
+    case "SC제일":
+      return "sc";
+    case "신한":
+      return "shinhan";
+    case "토스뱅크":
+      return "toss";
+    case "우리":
+      return "woori";
     default:
       return null;
   }