연락처

고객이 궁금한 것이 있을 때 쉽게 연락할 수 있어야 합니다. 연락처 페이지를 만들어 봅시다.

연락처 페이지 만들기

AI에게 요청합니다:

"src/app/contact/page.tsx 파일을 만들어서 연락처 페이지를 만들어줘.

구성:

- 제목: 문의하기

- 전화번호: 02-1234-5678 (클릭하면 전화 걸리게)

- 카카오톡 채널 버튼: '봄날카페' 채널로 연결

- 간단한 문의 양식: 이름, 연락처, 문의 내용

- 양식 아래 '보내기' 버튼

따뜻한 분위기, 다른 페이지와 같은 스타일로."

스마트폰에서 전화번호를 터치하면 바로 전화가 걸리도록 하는 것이 중요합니다. AI가 이렇게 만들어 줍니다:


<a href="tel:02-1234-5678">02-1234-5678</a>

tel: 이라는 접두어가 붙으면 모바일에서 클릭 시 전화 앱이 열립니다. 고객 입장에서 매우 편리합니다.

카카오톡 채널이 있다면 버튼 하나로 연결할 수 있습니다:

"카카오톡 상담 버튼을 만들어줘. 링크는 https://pf.kakao.com/_xxxxx 로 연결해줘. 노란색 버튼으로."

카카오톡 채널이 없다면 이 부분은 건너뛰어도 됩니다. 전화번호만 있어도 충분합니다.

문의 양식은 고객이 이름, 연락처, 문의 내용을 입력하고 "보내기"를 누르는 간단한 형태입니다.

중요: 지금 단계에서는 양식의 모양만 만듭니다. "보내기" 버튼을 눌러도 실제로 데이터가 전송되지는 않습니다. 데이터를 실제로 저장하고 알림을 받는 기능은 프로젝트 2에서 배웁니다.

지금은 "이런 양식이 있구나" 정도로 만들어 두세요.

localhost:3000/contact에 접속해서 확인합니다:

"전화번호 옆에 전화기 아이콘을 넣어줘"

"카카오톡 버튼을 더 크게, 눈에 띄게 해줘"

"문의 양식 아래에 '영업시간 내에 답변드리겠습니다' 문구를 추가해줘"