[#95]Chore: add markAccount lib

ITisYourLife-3rd-JJAN · May 30, 2023 · cb5196c · cb5196c
1 parent 9ae95cb
commit cb5196c
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/src/components/profile/FamCard.jsx b/src/components/profile/FamCard.jsx
@@ -2,6 +2,7 @@ import {React, useState, useEffect} from 'react';
 import './famCard.css';
 import { Link } from 'react-router-dom';
 import axios from 'axios';
+import { markAccount } from '../../lib/markAccount';
 
 const FamCard = ({isParent}) => {
     const [isGirl, setIsGirl] = useState(true);
@@ -46,7 +47,7 @@ const FamCard = ({isParent}) => {
         <img src={`${imgSrc}`} alt='' className='fam-profile' />
         <div className='fam-info-box'>
             <p id='fam-name'>{sessionStorage.getItem("username")}</p>
-            <p>계좌번호: {userAccount}</p>
+            <p>계좌번호: {markAccount(userAccount)}</p>
         </div>
         <div className='fam-edit-box'>
             {!isParent ? (

diff --git a/src/components/profile/MyBigCard.jsx b/src/components/profile/MyBigCard.jsx
@@ -3,6 +3,7 @@ import './myBigCard.css';
 import axios from 'axios';
 import Modal from 'react-modal';
 import Loading from '../../lib/Loading';
+import { markAccount } from '../../lib/markAccount';
 
 const MyBigCard = ({ isParent }) => {
   const containerStyle = {
@@ -157,7 +158,7 @@ const MyBigCard = ({ isParent }) => {
             <p id="my-balance">잔액: {userBalance}원</p>
           </>
         )}
-        <p id="my-account">계좌번호: {userAccount}</p>
+        <p id="my-account">계좌번호: {markAccount(userAccount)}</p>
         <p>{userEmail}</p>
       </div>
       <div className="my-edit-box">

diff --git a/src/lib/markAccount.js b/src/lib/markAccount.js
@@ -0,0 +1,9 @@
+export function markAccount(account) {
+    const chunkedAccount = account.match(/(\d{3})(\d{6})(\d{2})/);
+    if (chunkedAccount) {
+      return `${chunkedAccount[1]}-${chunkedAccount[2]}-${chunkedAccount[3]}`;
+    } else {
+      return account;
+    }
+  }
+