ITeus

안녕하세요 Teus입니다. 이번에는 결혼식에서 또 빠지면 섭한 마음(?) 전하는 곳을 추가해 보도록 하겠습니다. # 1. 설계하기이번같은 경우 신랑/신부 각각의 정보를 따로따로 볼 수 있으면 좋을것 같습니다. Flip/unFlip 방법도 괜찮지만 Gallery에서 만들었던 modal 기능을 재활용 해보려고 합니다. 대표사진 삭제사진 설명을 입력하세요.이렇게 만들기 위해서 일단 Account.jsx 파일을 만들어 줍니다. Account.jsxconst Account = () => { return ( 마음 전하실 곳 신랑측 계좌번호 신부측 계좌번호 )}export default Accoun..

안녕하세요 Teus입니다. 드디어 모바일 청첩장의 모양세가 완성되어가고 있습니다. 이번에는 결혼식이 어디서 열리는지, 해당 내용을 담을 부분을 완성 하겠습니다. # 1. 설계하기이번 포스팅은 큰 내용은 없습니다. 약도 이미지를 확보하고, 해당하는 위치로 이동하기 위한 이동 방법을 기술하면 됩니다. 저는 아래처럼 설계를 했습니다.그러면 이 접근을 위해서 약도와 한글주소, 접근방법을 확인할 필요가 있을탠데요 대부분 이용하시는 웨딩컨밴션의 홈페이지가 있으실겁니다. 거기서 정보를 획득해 옵니다.  여기서 약도를 mymap.png 로 저장해 주고 나머지 텍스트는 임시로 저장해 줍니다. 그리고 이 내용을 활용해서 이제 Navi.jsx, Transport.jsx를 만들어 줍니다. Navi.jsximport weddi..

안녕하세요. Teus입니다. 지난번 Gallery가 만들어 졌지만 작은 크기의 사진만 볼 수 있고, 이 사진을 크게 볼 방법이 없었죠? 이번에는 사진을 눌렀을 때 사진을 확대해서 보여줄 수 있는 Modal을 구현해 보겠습니다. # 1. ModalModal을 들어본 적이 없더라도, 아래 이미지를 보면 뭔지 바로 알 수 있습니다.Modal이 특별해 보이지만 그저 뒤에있는 화면을 overly라고 해서 음영처리를 하고 내부의 Contents를 보여주는것 뿐 입니다. Modal을 modal-overlay와 modal-content로 나누면 이해가 편합니다. # 2. Modal on Gallery이제 Modal을 Gallery에 적용해 봅시다. 먼저 modal을 사용하기 위해서 modal.jsx를 통해서 modal..

안녕하세요. Teus입니다. 지난번까지 해서 드디어 캘린더를 추가해서 모바일 청첩장이 컴퓨터 한 화면에 안들어올 정도가 되었습니다. 이번에는 모바일 청첩장에서 중요한 사진을 보여줄 수 있는 이미지갤러리를 추가하겠습니다.# 1. 이미지갤러리이미지갤러리는 기본적으로는 6장만 보여주고 사용자가 원한다면 펼치기를 통해서 추가적인 사진을 확인할 수 있게 해줍니다.대표사진 삭제사진 설명을 입력하세요.이제 위 설계도에 맞게 코드를 작성합니다. Gallery.jsximport { useEffect, useState } from "react";//src/assets/images에 있는 모든 이미지를 한번에 불러오기 위한 방법입니다.const imagePaths = import.meta.glob('./assets/imag..

안녕하세요. Teus입니다. 지난번까지 해서 웰컴문구를 추가하고 지금까지 만든 모든 Components에 fade-in 효과를 적용 하였습니다. 이번에는 모바일 청첩장에서 빠질 수 없는 캘린더 입니다. # 1. 캘린더일반적인 App의 캘린더의 경우 날짜를 선택하는 기능이 있습니다. 하지만 모바일 청첩장 같은 경우 캘린더의 날짜를 고르기 보다 날짜를 시각적으로 표시해 주는 역할을 합니다. 그래서 table tag와 css를 사용해서 만들어 보도록 하겠습니다. 일단 어떻게 그릴지 설계부터 하고 갑니다.  일단 text를 이용해서 위에 날짜를 표기하고 아래에는 Table을 이용해서 달력을 표기한 다음 결혼식 당일 날짜에는 별도의 marking을 통해서 강조를 해 줍니다. 아래부분에는 해당 날짜까지 얼마의 기간..

안녕하세요. Teus입니다. 지난번 까지 대표사진의 그레디언트 음영까지 추가가 완료 되었습니다. 이번에는 웰컴문구를 추가하고 지금까지 만든 Components에 fade-in 효과(스르륵 올라오는 효과)를 넣어보겠습니다. # 1. 웰컴 문구웰컴문구는 별거 없습니다. 모바일 청첩장 보면 `환영합니다` 같은 멘트있죠? 그래서 아래와같이 작성해 보도록 하겠습니다.   이 부분 같은 경우는 div tag안에 text만 적절하게 배치하면 되기때문에 어려울게 없습니다. 아래 코드를 보면 쉬울거에요 App.jsximport reactLogo from './assets/react.svg'import viteLogo from '/vite.svg'import './App.css'import { useEffect, useR..