추가이미지 / css 수정 / 결제 정보 수정

src/entities/payment/ui/info-item.tsx

@@ -0,0 +1,34 @@
+import { InfoItemProps } from '../model/types';
+
+export const InfoItem = ({
+  payName,
+  payImage,
+  infoLink 
+}: InfoItemProps) => {
+
+  const onClickToShow = () => {
+    if(!!infoLink){
+      
+    }
+  };
+  return (
+    <>
+      <li className="ing-card">
+        <div className="ing-card-head">
+          <div className="ing-card-icon">
+            <img 
+              src={ payImage }
+              alt={ payName }
+            />
+          </div>
+          <span className="ing-card-name">{ payName }</span>
+        </div>
+        <button 
+          className="ing-card-link" 
+          type="button"
+          onClick={ () => onClickToShow() }
+        >수수료 및 정산주기 &gt;</button>
+      </li>
+    </>
+  )
+};

src/entities/payment/ui/info-wrap.tsx

@@ -1,361 +1,76 @@
 import { IMAGE_ROOT } from "@/shared/constants/common";
+import { InfoItem } from "./info-item";
+import { InfoItemProps } from "../model/types";
 
 export const InfoWrap = () => {
   
+  const list1 = [
+    {payName: '신용카드', payImage: 'pay_01.svg', infoLink: ''},
+    {payName: '카카오페이', payImage: 'pay_02.svg', infoLink: ''},
+    {payName: '네이버페이', payImage: 'pay_03.svg', infoLink: ''},
+    {payName: '삼성페이', payImage: 'pay_04.svg', infoLink: ''},
+    {payName: '계좌이체', payImage: 'pay_05.svg', infoLink: ''},
+    {payName: '휴대폰결제', payImage: 'pay_06.svg', infoLink: ''},
+    {payName: '문화상품권', payImage: 'pay_07.svg', infoLink: ''},
+    {payName: 'SSG머니', payImage: 'pay_08.svg', infoLink: ''},
+    {payName: 'TV페이', payImage: 'pay_09.svg', infoLink: ''},
+    {payName: '삼성페이(카드)', payImage: 'pay_10.svg', infoLink: ''},
+    {payName: '애플페이', payImage: 'pay_11.svg', infoLink: ''},
+    {payName: '토스페이', payImage: 'pay_12.svg', infoLink: ''},
+    {payName: 'PAYCO', payImage: 'pay_13.svg', infoLink: ''},
+    {payName: '리브페이', payImage: 'pay_14.svg', infoLink: ''},
+    {payName: '대만결제', payImage: 'pay_15.svg', infoLink: ''},
+    {payName: '티머니페이', payImage: 'pay_16.svg', infoLink: ''},
+    {payName: 'L.PAY', payImage: 'pay_17.svg', infoLink: ''},
+    {payName: 'PAYU', payImage: 'pay_18.svg', infoLink: ''},
+    {payName: 'TW라인페이', payImage: 'pay_19.svg', infoLink: ''},
+    {payName: 'SSG페이', payImage: 'pay_21.svg', infoLink: ''},
+    {payName: '케이뱅크페이', payImage: 'pay_22.svg', infoLink: ''},
+    {payName: '가상계좌', payImage: 'pay_23.svg', infoLink: ''},
+    {payName: 'SSG은행계좌', payImage: 'pay_21.svg', infoLink: ''},
+    {payName: '계좌간편결제', payImage: 'pay_24.svg', infoLink: ''},
+  ];
+
+  const list2 = [
+    {payName: '신용카드', payImage: 'pay_01.svg', infoLink: ''},
+    {payName: 'SK PAY', payImage: 'pay_20.svg', infoLink: ''},
+    {payName: 'TV페이', payImage: 'pay_09.svg', infoLink: ''},
+    {payName: '삼성페이(카드)', payImage: 'pay_04.svg', infoLink: ''},
+  ];
+
+  const getList = (type: 'comission' | 'NoInterest') => {
+    let rs = [];
+    let arr: Array<InfoItemProps> = [];
+    if(type === 'comission'){
+      arr = list1;
+    }
+    else if(type === 'NoInterest'){
+      arr = list2; 
+    }
+    for(let i=0;i<arr.length;i++){
+      rs.push(
+        <InfoItem
+          payName={ arr[i]?.payName }
+          payImage={ IMAGE_ROOT + '/' + arr[i]?.payImage }
+          infoLink={ arr[i]?.infoLink }
+        ></InfoItem>
+      );
+    }
+    return rs;
+  }
+
+
   return (
     <>
       <div className="ing-list">
         <div className="ing-title">서비스 이용, 수수료 및 정산주기</div>
         <ul className="ing-card-list">
-          <li className="ing-card">
-            <div className="ing-card-head">
-              <div className="ing-card-icon">
-                <img 
-                  src={ IMAGE_ROOT + '/pay_01.svg' }
-                  alt="신용카드"
-                />
-              </div>
-              <span className="ing-card-name">신용카드</span>
-            </div>
-            <button 
-              className="ing-card-link" 
-              type="button"
-            >수수료 및 정산주기 &gt;</button>
-          </li>
-          <li className="ing-card">
-            <div className="ing-card-head">
-              <div className="ing-card-icon">
-                <img 
-                  src={ IMAGE_ROOT + '/pay_02.svg' }
-                  alt="카카오페이"
-                />
-              </div>
-              <span className="ing-card-name">카카오페이</span>
-            </div>
-            <button 
-              className="ing-card-link" 
-              type="button"
-            >수수료 및 정산주기 &gt;</button>
-          </li>
-          <li className="ing-card">
-            <div className="ing-card-head">
-              <div className="ing-card-icon">
-                <img 
-                  src={ IMAGE_ROOT + '/pay_03.svg' }
-                  alt="네이버페이"
-                />
-              </div>
-              <span className="ing-card-name">네이버페이</span>
-            </div>
-            <button 
-              className="ing-card-link" 
-              type="button"
-            >수수료 및 정산주기 &gt;</button>
-          </li>
-          <li className="ing-card">
-            <div className="ing-card-head">
-              <div className="ing-card-icon">
-                <img 
-                  src={ IMAGE_ROOT + '/pay_04.svg' }
-                  alt="삼성페이"
-                />
-              </div>
-              <span className="ing-card-name">삼성페이</span>
-            </div>
-            <button 
-              className="ing-card-link" 
-              type="button"
-            >수수료 및 정산주기 &gt;</button>
-          </li>
-          <li className="ing-card">
-            <div className="ing-card-head">
-              <div className="ing-card-icon">
-                <img 
-                  src={ IMAGE_ROOT + '/pay_05.svg' }
-                  alt="계좌이체"
-                />
-              </div>
-              <span className="ing-card-name">계좌이체</span>
-            </div>
-            <button 
-              className="ing-card-link" 
-              type="button"
-            >수수료 및 정산주기 &gt;</button>
-          </li>
-          <li className="ing-card">
-            <div className="ing-card-head">
-              <div className="ing-card-icon">
-                <img 
-                  src={ IMAGE_ROOT + '/pay_06.svg' }
-                  alt="휴대폰결제"
-                />
-              </div>
-              <span className="ing-card-name">휴대폰결제</span>
-            </div>
-            <button 
-              className="ing-card-link" 
-              type="button"
-            >수수료 및 정산주기 &gt;</button>
-          </li>
-          <li className="ing-card">
-            <div className="ing-card-head">
-              <div className="ing-card-icon">
-                <img 
-                  src={ IMAGE_ROOT + '/pay_07.svg' }
-                  alt="문화상품권"
-                />
-              </div>
-              <span className="ing-card-name">문화상품권</span>
-            </div>
-            <button 
-              className="ing-card-link" 
-              type="button"
-            >수수료 및 정산주기 &gt;</button>
-          </li>
-          <li className="ing-card">
-            <div className="ing-card-head">
-              <div className="ing-card-icon">
-                <img 
-                  src={ IMAGE_ROOT + '/pay_08.svg' }
-                  alt="SSG머니" 
-                />
-              </div>
-              <span className="ing-card-name">SSG머니</span>
-            </div>
-            <button 
-              className="ing-card-link" 
-              type="button"
-            >수수료 및 정산주기 &gt;</button>
-          </li>
-          <li className="ing-card">
-            <div className="ing-card-head">
-              <div className="ing-card-icon">
-                <img 
-                  src={ IMAGE_ROOT + '/pay_09.svg' }
-                  alt="TV페이"
-                />
-              </div>
-              <span className="ing-card-name">TV페이</span>
-            </div>
-            <button 
-              className="ing-card-link" 
-              type="button"
-            >수수료 및 정산주기 &gt;</button>
-          </li>
-          <li className="ing-card">
-            <div className="ing-card-head">
-              <div className="ing-card-icon">
-                <img 
-                  src={ IMAGE_ROOT + '/pay_10.svg' }
-                  alt="삼성페이(카드)" 
-                />
-              </div>
-              <span className="ing-card-name">삼성페이(카드)</span>
-            </div>
-            <button 
-              className ="ing-card-link" 
-              type="button"
-            >수수료 및 정산주기 &gt;</button>
-          </li>
-          <li className="ing-card">
-            <div className="ing-card-head">
-              <div className="ing-card-icon">
-                <img 
-                  src={ IMAGE_ROOT + '/pay_11.svg' }
-                  alt="애플페이"
-                />
-              </div>
-              <span className="ing-card-name">애플페이</span>
-            </div>
-            <button 
-              className="ing-card-link" 
-              type="button"
-            >수수료 및 정산주기 &gt;</button>
-          </li>
-          <li className="ing-card">
-            <div className="ing-card-head">
-              <div className="ing-card-icon">
-                <img 
-                  src={ IMAGE_ROOT + '/pay_12.svg' }
-                  alt="토스페이"
-                />
-              </div>
-              <span className="ing-card-name">토스페이</span>
-            </div>
-            <button 
-              className="ing-card-link" 
-              type="button"
-            >수수료 및 정산주기 &gt;</button>
-          </li>
-          <li className="ing-card">
-            <div className="ing-card-head">
-              <div className="ing-card-icon">
-                <img 
-                  src={ IMAGE_ROOT + '/pay_13.svg' }
-                  alt="PAYCO"
-                />
-              </div>
-              <span className="ing-card-name">PAYCO</span>
-            </div>
-            <button 
-              className="ing-card-link" 
-              type="button"
-            >수수료 및 정산주기 &gt;</button>
-          </li>
-          <li className="ing-card">
-            <div className="ing-card-head">
-              <div className="ing-card-icon">
-                <img 
-                  src={ IMAGE_ROOT + '/pay_14.svg' }
-                  alt="리브페이"
-                />
-              </div>
-              <span className="ing-card-name">리브페이</span>
-            </div>
-            <button 
-              className="ing-card-link" 
-              type="button"
-            >수수료 및 정산주기 &gt;</button>
-          </li>
-          <li className="ing-card">
-            <div className="ing-card-head">
-              <div className="ing-card-icon">
-                <img 
-                  src={ IMAGE_ROOT + '/pay_14.svg' }
-                  alt="대만결제"
-                />
-              </div>
-              <span className="ing-card-name">대만결제</span>
-            </div>
-            <button 
-              className="ing-card-link" 
-              type="button"
-            >수수료 및 정산주기 &gt;</button>
-          </li>
-          <li className="ing-card">
-            <div className="ing-card-head">
-              <div className="ing-card-icon">
-                <img 
-                  src={ IMAGE_ROOT + '/pay_15.svg' }
-                  alt="티머니페이"
-                />
-              </div>
-              <span className="ing-card-name">티머니페이</span>
-            </div>
-            <button 
-              className="ing-card-link" 
-              type="button"
-            >수수료 및 정산주기 &gt;</button>
-          </li>
-          <li className="ing-card">
-            <div className="ing-card-head">
-              <div className="ing-card-icon">
-                <img 
-                  src={ IMAGE_ROOT + '/pay_16.svg' }
-                  alt="L.PAY"
-                />
-              </div>
-              <span className="ing-card-name">L.PAY</span>
-            </div>
-            <button 
-              className="ing-card-link" 
-              type="button"
-            >수수료 및 정산주기 &gt;</button>
-          </li>
-          <li className="ing-card">
-            <div className="ing-card-head">
-              <div className="ing-card-icon">
-                <img 
-                  src={ IMAGE_ROOT + '/pay_17.svg' }
-                  alt="PAYU"
-                />
-              </div>
-              <span className="ing-card-name">PAYU</span>
-            </div>
-            <button 
-              className="ing-card-link" 
-              type="button"
-            >수수료 및 정산주기 &gt;</button>
-          </li>
-          <li className="ing-card">
-            <div className="ing-card-head">
-              <div className="ing-card-icon">
-                <img 
-                  src={ IMAGE_ROOT + '/pay_18.svg' }
-                  alt="TW라인페이"
-                />
-              </div>
-              <span className="ing-card-name">TW라인페이</span>
-            </div>
-            <button 
-              className="ing-card-link" 
-              type="button"
-            >수수료 및 정산주기 &gt;</button>
-          </li>
+          { getList('comission') }
         </ul>
 
         <div className="ing-title">가맹점 분담 무이자 정보</div>
         <ul className="ing-card-list">
-          <li className="ing-card">
-            <div className="ing-card-head">
-              <div className="ing-card-icon">
-                <img 
-                  src={ IMAGE_ROOT + '/pay_01.svg' }
-                  alt="신용카드"
-                />
-              </div>
-              <span className="ing-card-name">신용카드</span>
-            </div>
-            <button 
-              className="ing-card-link" 
-              type="button"
-            >수수료 및 정산주기 &gt;</button>
-          </li>
-          <li className="ing-card">
-            <div className="ing-card-head">
-              <div className="ing-card-icon">
-                <img 
-                  src={ IMAGE_ROOT + '/pay_20.svg' }
-                  alt="SK PAY"
-                />
-              </div>
-              <span className="ing-card-name">SK PAY</span>
-            </div>
-            <button 
-              className="ing-card-link" 
-              type="button"
-            >수수료 및 정산주기 &gt;</button>
-          </li>
-          <li className="ing-card">
-            <div className="ing-card-head">
-              <div className="ing-card-icon">
-                <img 
-                  src={ IMAGE_ROOT + '/pay_09.svg' }
-                  alt="TV페이" 
-                />
-              </div>
-              <span className="ing-card-name">TV페이</span>
-            </div>
-            <button 
-              className="ing-card-link" 
-              type="button"
-            >수수료 및 정산주기 &gt;</button>
-          </li>
-          <li className="ing-card">
-            <div className="ing-card-head">
-              <div className="ing-card-icon">
-                <img 
-                  src={ IMAGE_ROOT + '/pay_04.svg' }
-                  alt="삼성페이(카드)"
-                />
-              </div>
-              <span className="ing-card-name">삼성페이(카드)</span>
-            </div>
-            <button 
-              className="ing-card-link" 
-              type="button"
-            >수수료 및 정산주기 &gt;</button>
-          </li>
+          { getList('NoInterest') }
         </ul>
       </div>
     </>