AI 프롬프트
강의를 만들면서 생성한 프롬프트입니다. 필요하신 분은 사용하세요.
(명령 1)
나는 nextjs 14 와 material ui v5를 이용해서
pc와 모바일에서 잘 보이는 반응형 홈페이지를 만들고 싶다.
프로젝트 이름은 alto-landing 으로 할 것이고
create-next-app 명령부터 알려줘.
제일 위에는 hero 이미지를 화면폭을 가득차게 배치하며
흰색으로 텍스트를 쓰기 위해 투명도를 조금 낮춰줘
이미지 이름은 01-hero01.png 이다.
nextjs에서 어느폴더에 이미지를 위치시켜야 하는지도 알려줘
hero이미지 위에 올라갈 텍스트는 아래와 같다.
아래는 큰 타이틀 글자 볼드로 해줘
Alto del Carmen
아래 두줄은 subtitle 작은 글자로 해줘
전 세계에서 사랑받는 칠레의 맛
이제 한국에서 만날 수 있습니다.
명령2)
나는 pages폴더가 없고 app폴더가 있다.
명령 3)
그 다음, Hero섹션 밑에 Product섹션을 만들어
간단한 텍스트 문구를 넣고 싶다.
섹션 배경은 검은색으로 해줘
먼저 타이틀은
"피스코란 무엇인가요?" 이고,
그 밑에 색이 들어간 박스에 아래 설명 문구를 넣고 싶다.
"피스코는 와인을 증류하여 만든 브랜디로,
칠레와 페루에서 깊은 역사를 자랑합니다.
알토 델 카르멘은 부드럽고 과일향이 풍부한 맛으로
칠레에서 국민주로 사랑받고 있습니다."
명령 4)
그 다음은 그 밑에 회전목마 슬라이드를 넣고 싶다.
이미지는 모두 12장이며
public/mages/02-card01@2x.png
public/mages/02-card02@2x.png
public/mages/02-card03@2x.png
...
public/mages/02-card12@2x.png
와 같은 이름으로 되어있다.
pc버전에서는 한화면에 3개를 보여주고
좌우에 화살표가 있어서 이전/다음 이미지를 볼 수 있게 해줘
모바일에서는 한화면에 1개씩 보여주고 역시 화살표로 좌우 이미지를 볼수 있게해주고
좌우 스크롤로 볼수 있게도 해줘
명령 5)
다음 섹션에서는 유튜브 영상을 임베드하고 싶다.
먼저 타이틀은
"칠레에서는, 하이볼대신 Pisco를"
으로 해주고 그 밑에 영상을 임베드 해줘
영상 URL은 https://www.youtube.com/watch?v=uZeZ9-vV450 이다.
명령 6)
다음은 Call to Action 섹션을 넣고 싶다.
타이틀: 피스코의 매력에 빠져보세요!
서브타이틀: 칠레의 국민 주, 피스코의 역사와 맛있는 칵테일 레시피를 지금 확인하세요.
버튼: "피스코 더 알아보기" 버튼이고
링크는 https://blog.naver.com/zauin/221008283469 로 해줘
명령 7)
다음은 레시피 섹션이다.
타이틀: 완벽한 피스코 사워 만들기
레시피:
재료
- 피스코 2 oz
- 라임 주스 1 oz
- 설탕 시럽 1 oz
- 계란 흰자 1개
- 얼음
- 비터스 한 방울
를 넣을 예정이며
섹션 배경은 /images/03-recipe-02-bg.png로 할것이고
레시피는 좌우로 나누어
왼쪽에는 03-recipe-01-main.png 이미지,
오른쪽에는 텍스트로 레시피를 노출해줘
명령 7 보완)
레시피 섹션의 배경을 글자가 잘 보이도록 하기 위해 불투명도를 줘.
왼쪽 이미지는 비율을 유지하며 보여줘
명령 8)
그 다음은 문의하기 섹션을 만들 예정이다.
좌우로 화면을 나누어 왼쪽에는 로고 이미지가 들어간다.
로고 이미지는 04-logo02.png 이고 가로x세로가 140 × 330 이다.
오른쪽 문의하기에는
-이름, 이메일 을 필수로 받고
-전화는 선택값으로 받는다.
- 라디오버튼으로 개인/매장 이라는 값을 선택하게 하고 기본으로 개인을 선택한다.
- 문의내용은 필수이고 3줄정도 입력할 수 있게 화면을 구성한다.
- 마지막에는 "문의하기" 버튼이 있고, 버튼을 누를 경우 이메일을 발송한다.
이메일은 gmail 을 이용하고
발송자 정보는 teracokr@gmail.com 이고 앱비밀번호는 1234로 할 예정이다.
문의하기 버튼을 누르면, 두번 누르지 못하도록 로딩 인디케이터를 띄워 오작동을 방지한다.
메일은 문의한 사람에게도 보내고 나(teracokr@gmail.com)에게도 보낸다.
명령 8-1) 에러 보완
POST /api/send-email 404 in 53ms
나는 app 폴더를 사용하고 있고 app/api/send-email.js 이렇게 구성했다.
명령 8-2) 보완
이메일 비밀번호 보안을위해 .env.local파일을 이용하고 싶다.
내 .env.local은 아래와 같다.
SEND_MAIL_PW=1234
SEND_MAIL_USER=teracokr@gmail.com
명령 9)
이제 마지막으로 푸터를 만드려고 한다.
아래 문구를 푸터로 해줘
© 2024 Uvacellar Inc.