Skip to content

Wedding Invitation πŸ€΅β€πŸ‘°πŸ’Œ

Notifications You must be signed in to change notification settings

tangjiegege/wedding-invitation

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

3 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Wedding Invitation React.js Template

κ²°ν˜Όμ‹ μ΄ˆλŒ€λ₯Ό μœ„ν•œ 청첩μž₯ ν…œν”Œλ¦Ώμž…λ‹ˆλ‹€.
이 μ €μž₯μ†Œκ°€ λ§ˆμŒμ— λ“€κ±°λ‚˜ μ‚¬μš©ν•˜κ²Œ λ˜μ‹ λ‹€λ©΄, Star와 Fork λΆ€νƒλ“œλ¦¬κ² μŠ΅λ‹ˆλ‹€πŸ˜‰

Template Preview

Wedding Invitation v1

Preview v1

Wedding Invitation v2

Preview v2

ν…œν”Œλ¦Ώμ— ν¬ν•¨ν•˜κ³  μžˆλŠ” λ‚΄μš© 및 κΈ°λŠ₯

  • κ²°ν˜Όμ‹ λ‚ μ§œ, μœ„μΉ˜, 인사말 좜λ ₯
  • 사진첩
  • μΆ•μ˜κΈˆμ„ 보내싀 κ³³ (κ³„μ’Œλ²ˆν˜Έ ν΄λ¦½λ³΄λ“œ 볡사 κΈ°λŠ₯ 지원)
  • μΉ΄μΉ΄μ˜€ν†‘ 곡유 κΈ°λŠ₯ 및 링크 곡유 κΈ°λŠ₯

Wedding Invitation v1 μ‚¬μš© 방법

./v1/public/index.html의 <head> 뢀뢄을 μ•Œλ§žκ²Œ μˆ˜μ •ν•΄ μ£Όμ„Έμš”.

<meta content="○○○❀○○○ κ²°ν˜Όμ‹μ— μ΄ˆλŒ€ν•©λ‹ˆλ‹€" name="Title" />
<meta content="β—‹β—‹β—‹β—‹λ…„ β—‹β—‹μ›” ○○일 β—‹μš”μΌ μ˜€μ „ β—‹β—‹μ‹œ β—‹β—‹λΆ„" name="Description" />
<meta content="β—‹β—‹β—‹β—‹λ…„ β—‹β—‹μ›” ○○일 β—‹μš”μΌ μ˜€μ „ β—‹β—‹μ‹œ β—‹β—‹λΆ„" name="Keyword" />
<meta property="og:title" content="○○○❀○○○ κ²°ν˜Όμ‹μ— μ΄ˆλŒ€ν•©λ‹ˆλ‹€" />
<meta property="og:description" content="β—‹β—‹β—‹β—‹λ…„ β—‹β—‹μ›” ○○일 β—‹μš”μΌ μ˜€μ „ β—‹β—‹μ‹œ β—‹β—‹λΆ„" />
<meta property="og:url" content="https://kyuhyuk.kr/wedding-invitation" />
<meta name="theme-color" content="#BCAAA4" />

./v1/src/Config.tsλ₯Ό μˆ˜μ •ν•˜μ—¬ μ‚¬μš©ν•©λ‹ˆλ‹€.

export const WEDDING_INVITATION_URL = 'http://localhost:8080';
export const KAKAOTALK_API_TOKEN = 'μΉ΄μΉ΄μ˜€ν†‘ API 토큰을 μž…λ ₯ν•΄μ£Όμ„Έμš”!';
export const KAKAOTALK_SHARE_IMAGE = 'μΉ΄μΉ΄μ˜€ν†‘μœΌλ‘œ κ³΅μœ ν•  λ•Œ μ‚¬μš©λ˜λŠ” λŒ€ν‘œμ΄λ―Έμ§€ URL을 μž…λ ₯ν•΄μ£Όμ„Έμš”!';

export const WEDDING_DATE = '1970λ…„ 01μ›” 01일, λͺ©μš”일 μ˜€μ „ 12μ‹œ 00λΆ„';
export const WEDDING_LOCATION = '○○○웨딩, β—‹μΈ΅ ○○홀';

export const GROOM_NAME = 'β—‹β—‹β—‹';
export const GROOM_ACCOUNT_NUMBER = '○○은행 ***-***-******';
export const GROOM_FATHER_NAME = 'β—‹β—‹β—‹';
export const GROOM_FATHER_ACCOUNT_NUMBER = '○○은행 ***-***-******';
export const GROOM_MOTHER_NAME = 'β—‹β—‹β—‹';
export const GROOM_MOTHER_ACCOUNT_NUMBER = '○○은행 ***-***-******';

export const BRIDE_NAME = 'β—‹β—‹β—‹';
export const BRIDE_ACCOUNT_NUMBER = '○○은행 ***-***-******';
export const BRIDE_FATHER_NAME = 'β—‹β—‹β—‹';
export const BRIDE_FATHER_ACCOUNT_NUMBER = '○○은행 ***-***-******';
export const BRIDE_MOTHER_NAME = 'β—‹β—‹β—‹';
export const BRIDE_MOTHER_ACCOUNT_NUMBER = '○○은행 ***-***-******';

Wedding Invitation v2 μ‚¬μš© 방법

./v2/public/index.html의 <head> 뢀뢄을 μ•Œλ§žκ²Œ μˆ˜μ •ν•΄ μ£Όμ„Έμš”.

<meta content="○○○❀○○○ κ²°ν˜Όμ‹μ— μ΄ˆλŒ€ν•©λ‹ˆλ‹€" name="Title" />
<meta content="β—‹β—‹β—‹β—‹λ…„ β—‹β—‹μ›” ○○일 β—‹μš”μΌ μ˜€μ „ β—‹β—‹μ‹œ β—‹β—‹λΆ„" name="Description" />
<meta content="β—‹β—‹β—‹β—‹λ…„ β—‹β—‹μ›” ○○일 β—‹μš”μΌ μ˜€μ „ β—‹β—‹μ‹œ β—‹β—‹λΆ„" name="Keyword" />
<meta property="og:title" content="○○○❀○○○ κ²°ν˜Όμ‹μ— μ΄ˆλŒ€ν•©λ‹ˆλ‹€" />
<meta property="og:description" content="β—‹β—‹β—‹β—‹λ…„ β—‹β—‹μ›” ○○일 β—‹μš”μΌ μ˜€μ „ β—‹β—‹μ‹œ β—‹β—‹λΆ„" />
<meta property="og:url" content="https://kyuhyuk.kr/wedding-invitation" />
<meta name="theme-color" content="#BCAAA4" />

./v2/src/configs.tsλ₯Ό μˆ˜μ •ν•˜μ—¬ μ‚¬μš©ν•©λ‹ˆλ‹€.

const Configs: ConfigsType = {
  url: 'http://localhost:3000',
  kakaoToken: 'μΉ΄μΉ΄μ˜€ν†‘ API 토큰을 μž…λ ₯ν•΄μ£Όμ„Έμš”!',
  kakaoImage: 'μΉ΄μΉ΄μ˜€ν†‘μœΌλ‘œ κ³΅μœ ν•  λ•Œ μ‚¬μš©λ˜λŠ” λŒ€ν‘œμ΄λ―Έμ§€ URL을 μž…λ ₯ν•΄μ£Όμ„Έμš”!',
  weddingDate: '1970λ…„ 01μ›” 01일, λͺ©μš”일 μ˜€μ „ 12μ‹œ 00λΆ„',
  weddingLocation: '○○○웨딩, β—‹μΈ΅ ○○홀',
  groom: {
    name: 'β—‹β—‹β—‹',
    accountNumber: '○○은행 ***-***-******',
    fatherName: 'β—‹β—‹β—‹',
    fatherAccountNumber: '○○은행 ***-***-******',
    motherName: 'β—‹β—‹β—‹',
    motherAccountNumber: '○○은행 ***-***-******',
  },
  bride: {
    name: 'β—‹β—‹β—‹',
    accountNumber: '○○은행 ***-***-******',
    fatherName: 'β—‹β—‹β—‹',
    fatherAccountNumber: '○○은행 ***-***-******',
    motherName: 'β—‹β—‹β—‹',
    motherAccountNumber: '○○은행 ***-***-******',
  },
  titleImage: TitleImage,
  locationMapImage: LocationMapImage,
  galleryImages: [
    GalleryPhoto1,
    GalleryPhoto2,
    GalleryPhoto3,
    GalleryPhoto4,
    GalleryPhoto5,
    GalleryPhoto6,
  ],
};

About

Wedding Invitation πŸ€΅β€πŸ‘°πŸ’Œ

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 87.0%
  • HTML 6.5%
  • CSS 3.9%
  • JavaScript 2.6%