[#95]Chore: 짠페이 금액, Slider 금액 포맷

ITisYourLife-3rd-JJAN · May 30, 2023 · 3e4596c · 3e4596c
1 parent a8d81ff
commit 3e4596c
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 6 deletions.
diff --git a/src/components/join/CommonJoin.jsx b/src/components/join/CommonJoin.jsx
@@ -1,5 +1,5 @@
 import {React, useState, useEffect} from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import axios from "axios";
 
 const CommonJoin = ({isParent}) => {
@@ -385,6 +385,7 @@ const CommonJoin = ({isParent}) => {
         {!(emailExistCheck&&famcodeCheck) && <button className="joinBtn2" onClick = {checkPlease}>가입하기</button>}
         {/* 이메일 및 가족코드 확인 버튼 완료 시 */}
         {(emailExistCheck&&famcodeCheck) && <button className="joinBtn" onClick = {registerAxios}>가입하기</button>}
+        <Link to = {"/login"}><p id="RegisterText">이미 가입되어 있으신가요?</p></Link>
 
         </div>
     );

diff --git a/src/components/payBanner/PayBanner.jsx b/src/components/payBanner/PayBanner.jsx
@@ -1,8 +1,32 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import './payBanner.css'
-
+import axios from 'axios';
+import { markThousand } from '../../lib/markThousand.js'
+import { checkFinalSound } from '../../lib/checkFinalSound'
 
 const PayBanner = ({ isCreated, qrDiv }) => {
+    const userId = sessionStorage.getItem("userId")
+    const name = sessionStorage.getItem("username");
+    const [balance, setBalance] = useState(0);
+
+    useEffect (() => {
+        axios
+            .get(`http://localhost:8080/api/v1/users/${userId}`)
+            .then((response) => {
+                setBalance(response.data.data.balance);
+            })
+            .catch((error) => {
+                console.log(error)
+            })
+
+    },[])
+
+    const getEnding = (text) => {
+        const lastTwoChars = text.slice(-2); 
+
+        if(checkFinalSound(text)) return `${lastTwoChars}의`;
+        else return `${lastTwoChars}이의`;
+      };
 
     return (
         <div className='payBanner'>
@@ -11,8 +35,8 @@ const PayBanner = ({ isCreated, qrDiv }) => {
                 짠페이!
             </div>
             <div className='kidBalance'>
-                <div>아이 현재 잔액:</div>
-                <div>찌글이 원</div>
+                <div> {getEnding(name)} 현재 잔액: </div>
+                <div> {markThousand(balance)} 원</div>
             </div>
             <div onClick={qrDiv} className='paybannerdiv'>
                 {isCreated ? '짠페이 생성완료' : '짠페이 생성하기'}

diff --git a/src/components/slider/Slider.jsx b/src/components/slider/Slider.jsx
@@ -6,6 +6,7 @@ import axios
 import React, { Component, useEffect, useState } from "react";
 import Slider from "react-slick";
 import { checkFinalSound } from '../../lib/checkFinalSound';
+import { markThousand } from '../../lib/markThousand';
 
 export default class SimpleSlider extends Component {
     constructor(props) {
@@ -104,7 +105,7 @@ export default class SimpleSlider extends Component {
                 <div className='slide-item'>
                     <div style={{display: "flex"}}> 
                         <img className='slider-img' src={`${process.env.PUBLIC_URL}/assets/images/slider-money.png`} alt="" />
-                        <p> {getEnding2(name)} 현재 잔액 : {balance}원 💰 </p>
+                        <p> {getEnding2(name)} 현재 잔액 : { markThousand(balance)}원 💰 </p>
                     </div>
                 </div>
                 <div className='slide-item'>