모바일청첩장 직접 만들기 with 코딩 - 10. 마음전할곳(계좌정보) 추가하기

티스토리 뷰

React로만드는 모바일청첩장

모바일청첩장 직접 만들기 with 코딩 - 10. 마음전할곳(계좌정보) 추가하기

Teus 2025. 2. 2. 21:20

728x90

안녕하세요 Teus입니다.

이번에는 결혼식에서 또 빠지면 섭한 마음(?) 전하는 곳을 추가해 보도록 하겠습니다.

# 1. 설계하기

이번같은 경우 신랑/신부 각각의 정보를 따로따로 볼 수 있으면 좋을것 같습니다.

Flip/unFlip 방법도 괜찮지만

Gallery에서 만들었던 modal 기능을 재활용 해보려고 합니다.

대표사진 삭제

사진 설명을 입력하세요.

이렇게 만들기 위해서 일단 Account.jsx 파일을 만들어 줍니다.

Account.jsx

const Account = () => {
    return (
        <>
            <p style = {{
            fontSize:"20px",
            fontFamily:"MaruBuri",
            margin:"20px"
            }}>마음 전하실 곳
            </p>
            <div
                style = {{
                backgroundColor:"rgb(242,238,238)",
                padding:"12px",
                margin:"12px",
                marginLeft:"20%",
                marginRight:"20%"
            }}>신랑측 계좌번호</div>
            <div
                style = {{
                backgroundColor:"rgb(242,238,238)",
                padding:"12px",
                margin:"12px",
                marginLeft:"20%",
                marginRight:"20%"
            }}>신부측 계좌번호</div>
        </>
    )
}
export default Account

그리고 App.jsx에 Account.jsx를 추가해주면, 아래처럼 화면에 표기가 됩니다.

이제 신랑/신부 를 각각 눌렀을 때, Modal 창이 뜨면서 계좌번호를 보여주기만 하면 됩니다.

다행히 Gallery.jsx를 만들 때 만든 Modal이 있기 때문에, 이걸 재활용 해 볼겁니다.

Modal을 사용해서 Account.jsx를 조금 수정해 줍니다,

Account.jsx

import { useState } from "react";
import Modal from "./modal";

const Account = () => {
    const [bank_modal, set_bank_modal] = useState({isopen:false, src:null});
    
    return (
        <>
            <p style = {{
            fontSize:"20px",
            fontFamily:"MaruBuri",
            margin:"20px"
            }}>마음 전하실 곳
            </p>
            <div onClick = {()=>{set_bank_modal({isopen:true, src:"M"});document.body.classList.add('modal-open')}}
                style = {{
                backgroundColor:"rgb(242,238,238)",
                padding:"12px",
                margin:"12px",
                marginLeft:"20%",
                marginRight:"20%"
            }}>신랑측 계좌번호</div>
            <div onClick = {()=>{set_bank_modal({isopen:true, src:"W"});document.body.classList.add('modal-open')}}
                style = {{
                backgroundColor:"rgb(242,238,238)",
                padding:"12px",
                margin:"12px",
                marginLeft:"20%",
                marginRight:"20%"
            }}>신부측 계좌번호</div>
            <Modal
            isOpen={bank_modal}
            onClose={() => {set_bank_modal({isopen:false, src:null});document.body.classList.remove('modal-open')}}
            mystyle = {{backgroundColor:"rgb(255, 246, 246)"}}
            >
            <div style = {{display:"flex", justifyContent:"center"}}>
                {bank_modal.src}
            </div>  
            </Modal>
        </>
    )
}
export default Account

그러면 이제 신랑을 누를경우 M, 신부를 누를경우 W가 bank_modal.src에 담겨서 modal로 보여지게 됩니다.

그러면 이제 보여기는 곳에 W가 왔을때 / M이 왔을때

각각 신랑/신부 측의 계좌정보를 담아줄 Bank.jsx를 만들어 줍니다.

그리고 처음 설계에서, 오른쪽에 복사하기 버튼을 만들기로 했죠?

그래서 복사하기 버튼에 사용될 copy button icon을 하나 받아서 assets/copy.svg로 저장해 줍니다.

Bank.jsx

import copyicon from './assets/copy.svg'
const MyBank  = ({src}) => {
    //복사하기 버튼이 동작할 수 있게 함수를 준비해둠
    const copy_bank = (num) => {
        navigator.clipboard.writeText(num)
        alert("계좌가 복사되었습니다.")
    }

    const dt = src === "W" ? {
        //신부측의 계좌정보
        "mother" : ["부버지","국민은행", "11111111111111"],
        "father" : ["부모니","신한은행", "22222222222222"],
        "me" : ["신부님","수협은행", "33333333333333"],
    } : {
        //신랑측의 계좌정보
        "mother" :  ["랑머니","국민은행", "11111111111111"],
        "father" : ["랑버지","신한은행", "22222222222222"],
        "me" : ["신랑님","국민은행", "33333333333333"]
    } 
    return  (
    <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height: '100%' }}>
        {
            ["mother", "father", "me"].map((key, idx) => {
                return <div key = {idx}
                style = {{
                    display: "flex", 
                    justifyContent: "space-between", 
                    alignItems: "center", 
                    textAlign:"left",
                    borderRadius:"12px",
                    padding:"12px",
                    margin:"12px", 
                }}>
                    <div>
                        <p style = {{fontFamily : "MaruBuriLight", fontSize : "18px", marginTop: "0px"}}>{dt[key][0]}</p>
                        {dt[key][1]} {dt[key][2]}
                    </div>
                    <div style = {{width : "3vw"}}></div>
                    <button
                        onClick={()=>copy_bank(dt[key][2])}
                        style = {{
                            backgroundColor : "rgb(249, 246, 242)",
                            color : "black",
                            border : "1px solid rgb(197, 219, 238)",//
                            padding : "6px",
                            borderRadius : "5px"
                        }}
                    >
                        <img src = {copyicon} width={"12px"}></img>
                        <span style = {{marginLeft : "10px", marginRight:"5px"}}>복사</span>
                    </button>
                </div>
            })
        }
    </div>
)}

export default MyBank

이렇게 해주면

이제 Modal창에서 정상적으로 신랑/신부측의 계좌정보를 확인하고

계좌복사하기까지 정상적으로 동작하는것을 확인할 수 있습니다.

대표사진 삭제

사진 편집
작게문서 너비옆트임
삭제

사진 설명을 입력하세요.

App.jsx

import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'


import { useEffect, useRef, useState } from 'react';
import Audiocomp from './Audiocomp'
import Topmsg from './Topmsg';
import Mainphoto from './Mainphoto';
import Invitation from './Invitation';
import Calendar from './Calendar';
import Gallery from './Gallery';
import Navi from './Navi';
import Account from './Account';

function App() {
  const debug = process.env.NODE_ENV === 'development'?"solid":"none";
  //console.log(navigator.clipboard)
  


  return (
    <>
      <div className='main-frame'>
        <div style={{ border: debug, textAlign: 'right' }}>
          <Audiocomp/>
        </div>
        <div className = "fade-in" style={{ border: debug}}>
          <Topmsg/>
        </div>
        <div className = "fade-in" style={{ border: debug}}>
          <Mainphoto/>
        </div>
        <div className = "fade-in" style={{ border: debug}}>
          <Invitation/>
        </div>
        <div className = "fade-in" style={{ border: debug}}>
          <Calendar/>
        </div>
        <div className = "fade-in" style={{ border: debug}}>
          <Gallery/>
        </div>
        <div className = "fade-in" style={{ border: debug}}>
          <Navi/>
        </div>
        <div className = "fade-in" style={{ border: debug}}>
          <Account/>
        </div>
        <div className = "fade-in" style={{ border: debug}}>
          카카오톡 공유하기 / 모청 주소 복사하기
        </div>
      </div>
    </>
  )
}

export default App

Account.jsx

import { useState } from "react";
import Modal from "./modal";
import MyBank from "./Bank";

const Account = () => {
    const [bank_modal, set_bank_modal] = useState({isopen:false, src:null});
    
    return (
        <>
            <p style = {{
            fontSize:"20px",
            fontFamily:"MaruBuri",
            margin:"20px"
            }}>마음 전하실 곳
            </p>
            <div onClick = {()=>{set_bank_modal({isopen:true, src:"M"});document.body.classList.add('modal-open')}}
                style = {{
                backgroundColor:"rgb(242,238,238)",
                padding:"12px",
                margin:"12px",
                marginLeft:"20%",
                marginRight:"20%"
            }}>신랑측 계좌번호</div>
            <div onClick = {()=>{set_bank_modal({isopen:true, src:"W"});document.body.classList.add('modal-open')}}
                style = {{
                backgroundColor:"rgb(242,238,238)",
                padding:"12px",
                margin:"12px",
                marginLeft:"20%",
                marginRight:"20%"
            }}>신부측 계좌번호</div>
            <Modal
            isOpen={bank_modal}
            onClose={() => {set_bank_modal({isopen:false, src:null});document.body.classList.remove('modal-open')}}
            mystyle = {{backgroundColor:"rgb(255, 246, 246)"}}
            >
            <div style = {{display:"flex", justifyContent:"center"}}>
                <MyBank src ={bank_modal.src}/>
            </div>  
            </Modal>
        </>
    )
}
export default Account

Bank.jsx

import copyicon from './assets/copy.svg'
const MyBank  = ({src}) => {
    //복사하기 버튼이 동작할 수 있게 함수를 준비해둠
    const copy_bank = (num) => {
        navigator.clipboard.writeText(num)
        alert("계좌가 복사되었습니다.")
    }

    const dt = src === "W" ? {
        //신부측의 계좌정보
        "mother" : ["부버지","국민은행", "11111111111111"],
        "father" : ["부모니","신한은행", "22222222222222"],
        "me" : ["신부님","수협은행", "33333333333333"],
    } : {
        //신랑측의 계좌정보
        "mother" :  ["랑머니","국민은행", "11111111111111"],
        "father" : ["랑버지","신한은행", "22222222222222"],
        "me" : ["신랑님","국민은행", "33333333333333"]
    } 
    return  (
    <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height: '100%' }}>
        {
            ["mother", "father", "me"].map((key, idx) => {
                return <div key = {idx}
                style = {{
                    display: "flex", 
                    justifyContent: "space-between", 
                    alignItems: "center", 
                    textAlign:"left",
                    borderRadius:"12px",
                    padding:"12px",
                    margin:"12px", 
                }}>
                    <div>
                        <p style = {{fontFamily : "MaruBuriLight", fontSize : "18px", marginTop: "0px"}}>{dt[key][0]}</p>
                        {dt[key][1]} {dt[key][2]}
                    </div>
                    <div style = {{width : "3vw"}}></div>
                    <button
                        onClick={()=>copy_bank(dt[key][2])}
                        style = {{
                            backgroundColor : "rgb(249, 246, 242)",
                            color : "black",
                            border : "1px solid rgb(197, 219, 238)",//
                            padding : "6px",
                            borderRadius : "5px"
                        }}
                    >
                        <img src = {copyicon} width={"12px"}></img>
                        <span style = {{marginLeft : "10px", marginRight:"5px"}}>복사</span>
                    </button>
                </div>
            })
        }
    </div>
)}

export default MyBank

728x90

저작자표시

'React로만드는 모바일청첩장' 카테고리의 다른 글

모바일청첩장 직접 만들기 with 코딩 - 9. 결혼식 장소 추가하기 (0)	2025.02.02
모바일청첩장 직접 만들기 with 코딩 - 8. Modal 추가하기 (0)	2025.01.29
모바일청첩장 직접 만들기 with 코딩 - 7. 이미지갤러리 추가하기 (0)	2025.01.29
모바일청첩장 직접 만들기 with 코딩 - 6. 달력 추가하기 (0)	2025.01.29
모바일청첩장 직접 만들기 with 코딩 - 5. 웰컴 문구 추가하기, Fade-in 추가하기. (0)	2025.01.29

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

글 보관함

ITeus

티스토리 뷰