모바일청첩장 직접 만들기 with 코딩 - 9. 결혼식 장소 추가하기

 

안녕하세요 Teus입니다.

 

드디어 모바일 청첩장의 모양세가 완성되어가고 있습니다.

 

이번에는 결혼식이 어디서 열리는지, 해당 내용을 담을 부분을 완성 하겠습니다.

 

# 1. 설계하기

이번 포스팅은 큰 내용은 없습니다.

 

약도 이미지를 확보하고, 해당하는 위치로 이동하기 위한 이동 방법을 기술하면 됩니다.

 

저는 아래처럼 설계를 했습니다.

그러면 이 접근을 위해서 약도와 한글주소, 접근방법을 확인할 필요가 있을탠데요

 

대부분 이용하시는 웨딩컨밴션의 홈페이지가 있으실겁니다.

 

거기서 정보를 획득해 옵니다.

 

 

여기서 약도를 mymap.png 로 저장해 주고

 

나머지 텍스트는 임시로 저장해 줍니다.

 

그리고 이 내용을 활용해서 이제

 

Navi.jsx, Transport.jsx를 만들어 줍니다.

 

Navi.jsx

import wedding from './assets/wedding.png'
import mymap from './assets/mymap.png'
import Transport from './Transport'

const Navi = () => {
    return (
        <>
            <h1>Location</h1>
            <img src = {wedding} width={"35%"} style = {{marginTop : "2%"}}></img>
            <img src = {mymap} width={"90%"}></img><br/>
            주소 : 서울시 강남구 역삼로 607(대치동)<br/><br/>
            <Transport
                tr_type = "bus"
            />
            <Transport
                tr_type = "car"
            />
            <Transport
                tr_type = "metro"
            />
        </>
    )
}

export default Navi;

 

Transport.jsx

const Transport  = ({tr_type}) => {
    var rev_tr_type = tr_type
    var contents = "";
    if (tr_type ==="bus") {
        rev_tr_type = "버스"
        contents = `간선버스(파랑색)<br/>
143, 146, 341, 360, 401<br/>
지선버스(녹색)<br/>
2413, 3411, 3422, 4318, 11-3<br/>
광역버스(빨강색)<br/>
9407, 6900`
    } else if (tr_type === "metro") {
        rev_tr_type = "지하철"
        contents = `지하철 2호선 삼성역 1번출구<br/>
1번 출구 : 셔틀버스 항시 대기<br/> 
2번 출구 : 도보(5분 정도 소요)`
    } else if (tr_type === "car") {
        rev_tr_type = "자동차"
        contents = `올림픽 잠실 방향 / 영동대교 지나 3차선으로 차선 변경<br/> 
잠실운동장 조금 못가서 빠져나와 GS칼텍스 주유소 /<br/> 
강남경찰서 / 강남운전면허시험장 30M 직진`
    }
    
    return  (
    <div>
        <div style = {{fontSize : "16px"}}>
            {rev_tr_type}로 오시는 분들
        </div>
        <div style = {{fontSize : "12px"}}>
            <div dangerouslySetInnerHTML={{ __html: contents }} />
        </div>
        <br/>
    </div>
)}

export default Transport

 

 

여기서 div의 dnageroulySetInnerHTML이라는 것을 볼 수 있습니다
이는 div내부에 html tag를 외부에서 집어넣을 때 보안상의 위험이 발생할 수 있는데
이점을 인지 하고, 위험이 있다는점을 인지한 상태로 html tag를 injection하는 방법 입니다.

 

그리고 이렇게 만들어진 Navi.jsx를 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';

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


  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}}>
          신랑신부 계좌 정보
        </div>
        <div className = "fade-in" style={{ border: debug}}>
          카카오톡 공유하기 / 모청 주소 복사하기
        </div>
      </div>
    </>
  )
}

export default App

 

 

그러면 아래처럼 모바일청첩장 상에서

 

정상적으로 웨딩홀의 약도와 가는 방법 등을 확인할 수가 있게 됩니다.