From 3e4596c33f9498d12d799b897cc92e78aad0a026 Mon Sep 17 00:00:00 2001
From: gilyeon00 <12venus08@naver.com>
Date: Tue, 30 May 2023 12:52:01 +0900
Subject: [PATCH] =?UTF-8?q?[#95]Chore:=20=EC=A7=A0=ED=8E=98=EC=9D=B4=20?=
 =?UTF-8?q?=EA=B8=88=EC=95=A1,=20Slider=20=EA=B8=88=EC=95=A1=20=ED=8F=AC?=
 =?UTF-8?q?=EB=A7=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/join/CommonJoin.jsx     |  3 ++-
 src/components/payBanner/PayBanner.jsx | 32 ++++++++++++++++++++++----
 src/components/slider/Slider.jsx       |  3 ++-
 3 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/components/join/CommonJoin.jsx b/src/components/join/CommonJoin.jsx
index e93ca32..37b6222 100644
--- 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
index f18202c..5367e10 100644
--- 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
index 956c3de..5b0eca9 100644
--- 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'>