- 부가서비스: 계좌 성명조회 상세정보 목업 데이터 API 연동

src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx

@@ -1,10 +1,9 @@
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { ListDateGroup } from '../list-date-group';
-import { AccountHolderSearchListProps } from '../../model/types'
+import { AccountHolderSearchListProps, AdditionalServiceCategory } from '../../model/types'
 
 export const AccountHolderSearchList = ({
-    additionalServiceCategory,
     listItems,
     mid
 }: AccountHolderSearchListProps) => {
@@ -15,7 +14,7 @@ export const AccountHolderSearchList = ({
         for (const [key, value] of Object.entries(listItems)) {
             rs.push(
                 <ListDateGroup
-                    additionalServiceCategory={additionalServiceCategory}
+                    additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
                     key={key}
                     date={key}
                     items={value}

src/entities/additional-service/ui/info-wrap/detail-info-wrap.tsx

@@ -0,0 +1,47 @@
+import moment from 'moment';
+import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
+import { DetailInfoSectionProps } from '../../model/types';
+import { SlideDown } from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';
+
+export const DetailInfoWrap = ({
+    additionalServiceCategory,
+    detailInfo
+}: DetailInfoSectionProps) => {
+
+    return (
+        <>
+            <div className="detail-title">상세 정보</div>
+            <ul className="kv-list">
+                <li className="kv-row">
+                    <span className="k">예금주</span>
+                    <span className="v">{detailInfo?.accountName}</span>
+                </li>
+                <li className="kv-row">
+                    <span className="k">조회 일시</span>
+                    <span className="v">{detailInfo?.requestDate}</span>
+                </li>
+                <li className="kv-row">
+                    <span className="k">결과</span>
+                    <span className="v">{detailInfo?.resultStatus}</span>
+                </li>
+                <li className="kv-row">
+                    <span className="k">실패사유</span>
+                    <span className="v">{detailInfo?.failureReason}</span>
+                </li>
+                <li className="kv-row">
+                    <span className="k">은행</span>
+                    <span className="v">{detailInfo?.bankName}</span>
+                </li>
+                <li className="kv-row">
+                    <span className="k">계좌번호</span>
+                    <span className="v">{detailInfo?.accountNo}</span>
+                </li>
+                <li className="kv-row">
+                    <span className="k">요청 구분</span>
+                    <span className="v">{detailInfo?.requestWay}</span>
+                </li>
+            </ul>
+        </>
+    )
+};

src/entities/additional-service/ui/info-wrap/title-info-wrap.tsx

@@ -0,0 +1,46 @@
+import moment from 'moment';
+import { motion } from 'framer-motion';
+import { NumericFormat } from 'react-number-format';
+import { AdditionalServiceCategory, DetailInfoSectionKeys } from '../../model/types';
+import { DetailInfoSectionProps } from '../../model/types';
+
+export const TitleInfoWrap = ({
+  additionalServiceCategory,
+  titleInfo,
+  onClickToShowInfo
+}: DetailInfoSectionProps) => {
+
+  const variants = {
+    hidden: { height: 0, padding: 0, margin: 0, display: 'none' },
+    visible: { height: 'auto', padding: '16px', margin: '10px 0', display: 'block' },
+  };
+
+  const onClickToSetShowInfo = () => {
+    if (!!onClickToShowInfo) {
+      onClickToShowInfo(DetailInfoSectionKeys.Title);
+    }
+  };
+
+  let newTitleInfo: Record<string, any> | undefined = titleInfo;
+  console.log("NewTitleInfo Check: ", newTitleInfo)
+
+  const onClickToDownloadConfirmation = () => {
+
+  };
+
+
+
+  return (
+    <>
+      {additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch&& (
+          <>
+            <div className="num-amount">
+              <span className="amount">{titleInfo?.accountNo}</span>
+            </div>
+            <div className="num-store">{titleInfo?.bankName}</div>
+            <div className="num-day">{titleInfo?.requestDate}</div>
+          </>
+        )}
+    </>
+  );
+};

src/entities/additional-service/ui/list-date-group.tsx

@@ -24,6 +24,7 @@ export const ListDateGroup = ({
           <ListItem
             additionalServiceCategory={ additionalServiceCategory }
             key={ key }
+            mid={ mid }
             tid={ items[i]?.tid }
             paymentDate= { items[i]?.paymentDate}
             paymentStatus={ items[i]?.paymentStatus}

src/entities/additional-service/ui/list-item.tsx

@@ -68,6 +68,7 @@ export const ListItem = ({
     else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
       navigate(PATHS.additionalService.accountHolderSearch.detail, {
         state: {
+          additionalServiceCategory: additionalServiceCategory,
           mid: mid,
           tid: tid
         }
@@ -76,6 +77,7 @@ export const ListItem = ({
     else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
       navigate(PATHS.additionalService.linkPayment.detail, {
         state: {
+          additionalServiceCategory: additionalServiceCategory,
           mid: mid,
           tid: tid
         }
@@ -84,6 +86,7 @@ export const ListItem = ({
     else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
       navigate(PATHS.additionalService.linkPayment.detail, {
         state: {
+          additionalServiceCategory: additionalServiceCategory,
           mid: mid,
           tid: tid
         }