이체화면 통합 및 오류수정 #15

front-end/timepay-user/src/App.tsx

@@ -16,7 +16,10 @@ function App() {
           <Route path={PATH.HOME} element={<PageRoutes.IntroPage />} />
           <Route path={PATH.SIGN_UP} element={<PageRoutes.SignUp />} />
           <Route path={PATH.MAIN} element={<PageRoutes.UserMainPage />} />
-
+          <Route path={PATH.TRANSFER} element={<PageRoutes.Transfer/>} />
+          <Route path={PATH.TRANSFERAMOUNT} element={<PageRoutes.TransferAmt/>} />
+          <Route path={PATH.TRANSFERPASSWORD} element={<PageRoutes.TransferPW/>} />
+          <Route path={PATH.TRANSFERLOG} element={<PageRoutes.TransferLog/>} />
             {/* <Route path={PATH.HOME} element={<PageRoutes.HomePage />} />
             <Route path={PATH.SEARCH} element={<PageRoutes.SearchPage />} />
             <Route path={PATH.MY_PAGE} element={<PageRoutes.MyPage />} /> */}

front-end/timepay-user/src/components/BaseLayout/BaseLayout.styles.tsx

@@ -6,7 +6,7 @@ export const cssBaseLayoutStyle = css`
   font-family: unset !important;
   background: ${COMMON_COLOR.WHITE};
   overflow-x: hidden;
-  width: 100%;
+  width: 100wh;
   height: 100vh;
   main {
     font-family: unset !important;

front-end/timepay-user/src/pages/MainPage/UserMainPage.tsx

@@ -85,7 +85,7 @@ const UserMainPage = () => {
             </div>
           </div>
 
-          <div className='bottom-btn'>
+          <div className='bottom-btn' onClick = { ()=>handleOnClickLinkBtn(PATH.TRANSFER)}>
             이체
           </div>
         </div>

front-end/timepay-user/src/pages/Transfer/TransferAccount.tsx

@@ -0,0 +1,51 @@
+import { Link } from "react-router-dom";
+import { useState, useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
+import { headerTitleState } from '../../states/uiState';
+import "./transfer_account.css";
+import "./bgImage.css";
+
+function TransferAcc() {
+    const [account, setAccount] = useState("");
+    const [error, setError] = useState("");
+
+    var accountExist = false;
+    const handleNext = (e : React.MouseEvent<HTMLButtonElement>) =>{
+        if(accountExist === false){
+            if (account === "123"){
+                accountExist = true;
+            }
+        }
+
+        if(account === "" || accountExist === false) {
+            e.preventDefault();
+            setError("계좌번호 오류. 다시 입력해주세요.")
+        }
+        //console.log("clicked : " + account);
+        //window.location.href = "/transfer/amount" > Link 태그로 대체
+    };
+
+    const setHeaderTitle = useSetRecoilState(headerTitleState);
+    useEffect(() => {
+      setHeaderTitle('계좌번호 입력');
+    });
+
+    return(
+        <div>
+            <div>
+            <span className="menuInfo">계좌번호 입력</span>
+            <input onChange={e => setAccount(e.target.value)} placeholder="계좌 번호 입력" value={account||""} className="inputBox"></input>
+            <span className="errorMessage">{error}</span>
+            </div>
+
+            <div>
+            <Link to="/transfer/amount" state={{account : account}}><button onClick={handleNext} className="nextButton">다음</button></Link>
+            <Link to="/main" ><button className="beforeButton">이전</button></Link>
+            </div>
+            </div>
+    );
+
+
+}
+
+export default TransferAcc;

front-end/timepay-user/src/pages/Transfer/TransferAmount.tsx

@@ -0,0 +1,108 @@
+import React from "react";
+
+import { Link, useLocation } from "react-router-dom";
+import { useState, useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
+import { headerTitleState } from '../../states/uiState';
+
+import "./bgImage.css";
+import "./transfer_amount.css";
+import "./transfer_account.css"; /* inputbox, nextbutton css 가져옴 */
+import Modal from "react-modal";
+
+Modal.setAppElement('#root');
+
+function TransferAmt() {
+    const location = useLocation();
+    const account = location.state.account;
+    const name = "옥상수";
+    const balance = 1000;
+
+
+    const [amount, setAmount] = useState(0);
+
+
+    const [openModal, setOpenModal] = useState(false);
+    /*const [pwModal, setPwModal] = useState(false);*/
+
+    const [error, setError] = useState("");
+    const [errorModal, setErrorModal] = useState(false);
+
+    const handleNext = (amount : number) =>{
+        if(amount===0 || isNaN(amount) || amount > balance){
+            setError("금액을 다시 확인해주세요.")
+            setErrorModal(true);
+        }
+        else{
+            setOpenModal(true);
+            setError("");
+        }
+    };
+
+    const addValue = (adder : number) =>{
+        //console.log(isNaN(amount) || amount==="");
+        setAmount(amount + adder);
+    };
+
+
+    const setHeaderTitle = useSetRecoilState(headerTitleState);
+    useEffect(() => {
+      setHeaderTitle('금액 입력');
+    });
+
+    return(
+<div className="unscrollable">
+
+                <div>
+                    <div className="accountInfo">
+                        <span className="fontGrey">받는 분</span>
+                        <span className="fontBlack">{name}</span>
+                        <span className="fontOrange">{account}</span>
+                    </div>
+
+                    <div>
+                        <input type="number" onChange={(e:React.ChangeEvent<HTMLInputElement>) => setAmount(+e.target.value)} placeholder="금액 입력" value={amount===0 ? "" : amount} className="inputBox"></input>
+                        <span className="fontTP">TP</span>
+
+                        <div className="incButton">
+                            <button onClick={()=>addValue(10)} value={10} className="incTen">+10</button>                      
+                            <button onClick={()=>addValue(30)} value={30} className="incThirty">+30</button>
+                            <button onClick={()=>addValue(60)} value={60} className="incSixty">+60</button>
+                        </div>
+                    </div>
+
+                </div>
+
+                <div>
+                <button onClick={() => handleNext(amount)} className="nextButton">다음</button>
+
+                <Modal isOpen={errorModal} onRequestClose={() => setErrorModal(false)} className="modalError">
+                    <span className="fontErrConfirm">{error}</span>
+                    <button onClick={()=>setErrorModal(false)} className="errorConfirm">확인</button>
+                </Modal>
+
+                <Modal isOpen={openModal} onRequestClose={() => setOpenModal(false)} className="modalImage">
+                    <div className="modalInfo">
+                        <p className="fontGrey">받는 분</p>
+                        <span className="fontBlack">{name} <span className="fontGrey">님</span></span>
+                        <span className="fontOrange">{account}</span>
+                        <br></br><br></br>
+                        <p className="fontGrey">보내는 TIME PAY</p>
+                        <span className="fontBlack">{amount}</span>
+                        <span className="fontOrange">TP</span>
+                    </div>
+                    <button onClick={()=>setOpenModal(false)} className="modalClose">&#10005;</button>
+                    <button onClick={()=>setOpenModal(false)} className="beforeModal">이전</button>
+                    <Link to="/transfer/password" state={{account : account, amount : amount, name : name}}>"<button onClick={()=>setOpenModal(false)} className="nextModal">다음</button></Link>
+                </Modal>
+
+                <Link to="/transfer/account" ><button className="beforeButton">이전</button></Link>
+                </div>
+            </div>
+
+    );
+
+
+}
+
+export default TransferAmt;

front-end/timepay-user/src/pages/Transfer/TransferLog.tsx

@@ -0,0 +1,48 @@
+import { Link, useLocation } from "react-router-dom";
+import { useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
+import { headerTitleState } from '../../states/uiState';
+
+import Card from "antd/es/card/Card";
+
+import "./transfer_account.css";
+import "./bgImage.css";
+import "./transfer_log.css";
+
+function TransferLog() {
+    const location = useLocation();
+    const account = location.state.account;
+    const amount = location.state.amount;
+    const name = location.state.name;
+    const date = new Date();
+    const datestr = date.getFullYear() + "." + (date.getMonth()+1) + "." + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
+
+
+    const setHeaderTitle = useSetRecoilState(headerTitleState);
+    useEffect(() => {
+      setHeaderTitle('이체하기');
+    });
+
+    return(
+            <div>
+                <div>
+                <span className="menuInfo">이체 완료</span>
+                <Card title="거래내역" className="transferInfo">
+                <p>계좌번호 : {account}</p>
+                <p>금액 : {amount}</p>
+                <p>이름 : {name}</p>
+                <p>거래일시 : {datestr}</p>
+                </Card>
+
+                </div>
+
+                <div>
+                <Link to="/main"><button className="endButton">완료</button></Link>
+                </div>
+            </div>
+    );
+
+
+}
+
+export default TransferLog;

front-end/timepay-user/src/pages/Transfer/TransferPassword.tsx

@@ -0,0 +1,56 @@
+import { Link, useLocation } from "react-router-dom";
+import { useState, useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
+import { headerTitleState } from '../../states/uiState';
+
+import "./transfer_account.css";
+import "./bgImage.css";
+
+
+function TransferPW() {
+    const location = useLocation();
+    const account = location.state.account;
+    const amount = location.state.amount;
+    const name = location.state.name;
+
+    const [password, setPassword] = useState("");
+    const [error, setError] = useState("");
+    var passwordCorrect = true;
+
+    const handleNext = (e : React.MouseEvent<HTMLButtonElement>) =>{
+        if(password === "" || passwordCorrect === false) {
+            setError("비밀번호 오류. 다시 입력해주세요.");
+            e.preventDefault();
+        }
+        else{
+            setError("");
+            //console.log("correct password");
+        }
+    };
+
+    const setHeaderTitle = useSetRecoilState(headerTitleState);
+    useEffect(() => {
+      setHeaderTitle('거래비밀번호 입력');
+    });
+
+
+    return(
+            <div>
+
+                <div>
+                <span className="menuInfo">거래 비밀번호 입력</span>
+                <input type='password' onChange={e => setPassword(e.target.value)} placeholder="비밀번호입력" value={password||""} className="inputBox"></input>
+                <span className="errorMessage">{error}</span>
+                </div>
+
+                <div>
+                <Link to="/transfer/amount" state={{account : account}}><button className="beforeButton">이전</button></Link>
+                <Link to="/transfer/log" state={{account : account, amount : amount, name : name}}><button onClick={handleNext} className="nextButton">이체</button></Link>
+                </div>
+            </div>
+    );
+
+
+}
+
+export default TransferPW;