AI에게 몰라서 못 시킨 홈페이지 기능 20가지
─────────────────────────────────────────────

3부까지 마친 상태입니다. 여기서 4부를 이어 갑니다.


──────────────────────────────────────────
1.  4부 Chapter 01 · 입력하는 중에 바로 알려 주는 예약 폼
──────────────────────────────────────────

예약 폼에서 각 칸을 벗어날 때 그 칸만 검사해 줘. 글자를 칠 때마다 검사하지는 말고, 한 번 오류가 난 칸은 고치는 동안 다시 검사해서 맞으면 바로 안내를 지워. 보내기를 누를 때는 모든 칸을 한 번 더 검사해. 오류 안내가 나타나고 사라질 때 아래 칸들이 밀리지 않게 자리를 미리 비워 둬. 안내 문구는 무엇이 틀렸는지가 아니라 무엇을 하면 되는지 알려 주는 말로 바꿔. 연락처는 하이픈이 없어도 빈칸이 섞여 있어도 받아 주고, 02로 시작하는 가게 전화번호도 받아 줘. 휴대전화는 입력이 끝나면 010-1234-5678 형식으로 홈페이지가 정리해 줘. 모든 필수 칸이 채워지기 전에는 보내기 버튼을 흐리게 하고, 버튼 아래에 남은 칸이 몇 개인지 적어 줘.

──────────────────────────────────────────
2.  4부 Chapter 02 · 날짜에 따라 예약 시간을 바꾸기
──────────────────────────────────────────

방문 시간 칸을 직접 입력하는 방식에서 목록으로 바꾸고 11시부터 19시까지 두 시간 간격으로 만들어. 인원 칸과 같은 모양으로 맞춰. 날짜를 고르면 그 요일에 맞는 시간만 고를 수 있게 하되, 평일과 토요일은 19시까지, 일요일은 15시까지로 해. 화요일과 8월 15일, 9월 16일부터 18일은 휴무라 시간을 고를 수 없게 하고, 휴무일 목록은 나중에 쉽게 고칠 수 있도록 한곳에 모아 둬. 오늘 날짜를 고르면 지금 시각 두 시간 뒤부터 고를 수 있게 해. 오늘보다 이전 날짜는 아예 고를 수 없게 하고 달력에서도 흐리게 표시해. 고를 수 없는 시간은 목록에서 지우지 말고 흐리게 표시하고 ‘17:00 (마감)’처럼 뒤에 괄호로 적어. 날짜를 바꿨을 때 이미 고른 시간이 못 쓰게 되면 시간을 다시 골라 달라고 알려 줘. 휴무일 안내는 오류 안내와 다른 자리에 표시해서 서로 지우지 않게 해.

──────────────────────────────────────────
3.  4부 Chapter 03 · 선택한 예약 내용을 바로 요약하기
──────────────────────────────────────────

예약 폼에 예약할 제품과 수량을 고르는 칸을 추가해. 제품은 인기 메뉴 여섯 가지와 ‘제품 예약 없음’ 중에서 고르게 하고, 수량은 1개부터 10개까지로 해. 제품을 고르지 않으면 수량 칸은 흐리게 두고 고를 수 없게 해. 폼 오른쪽에 요약 영역을 만들어 날짜·시간·인원·제품·수량을 보여 주고 칸을 고를 때마다 바로 바뀌게 해. 이름·연락처·문의 내용은 요약에 넣지 마. 날짜는 ‘8월 14일 (금)’처럼, 시간은 ‘오후 3시’처럼 보여 주되 입력칸 표시는 그대로 둬. 아직 고르지 않은 항목은 지우지 말고 ‘아직 고르지 않음’이라고 흐리게 표시해. 요약이 바뀔 때 화면 읽어 주는 프로그램에도 읽던 것을 끊지 않고 알려지게 해. 휴대폰에서는 요약을 화면 아래에 접힌 상태로 붙여 두고, 접힌 상태에서도 고른 항목 개수는 보이게 해.

──────────────────────────────────────────
4.  4부 Chapter 04 · 옵션에 따라 예상 가격 계산하기
──────────────────────────────────────────

제품 칸 아래에 크기와 추가 옵션을 넣어. 크기는 조각·1호·2호·3호 중 하나만 고르게 하고 각각 +0원·+8,000원·+18,000원·+26,000원이야. 추가 옵션은 레터링 +3,000원, 초 +1,000원, 포장 +2,000원을 여러 개 함께 고를 수 있게 해. 케이크가 아닌 제품이나 ‘제품 예약 없음’을 고르면 크기와 추가 옵션은 흐리게 두고 고를 수 없게 해. 제품을 바꾸면 크기와 추가 옵션을 처음 상태로 되돌려. 요약 영역에 예상 금액을 보여 주되 제품 기본 가격에 크기와 옵션 금액을 먼저 더한 뒤 수량을 곱해. 무엇이 얼마인지 항목별로도 보여 주고, 세 자리마다 쉼표를 넣는 데는 Intl.NumberFormat을 써. 금액만 글자를 크고 진하게 하고, 옆에 ‘예상’이라고 표시한 뒤 아래에 ‘확정 금액은 매장 확인 후 안내드립니다’를 항상 보이게 적어. 마지막으로 예약 폼 전체를 두 묶음으로 나눠. 제품·크기·추가 옵션·수량을 ‘케이크 예약’, 나머지 칸을 ‘방문 정보’로 fieldset과 legend를 써서 묶고 묶음 이름이 화면에도 보이게 해.

──────────────────────────────────────────
5.  4부 Chapter 05 · 보내기 전에 예약 내용 확인하기  (1번째)
──────────────────────────────────────────

예약 문의 보내기를 누르면 바로 보내지 말고 고른 내용을 보여 주는 확인 창을 먼저 띄워. 갤러리 확대 창과 같은 방식으로 만들고 날짜·시간·인원·제품·수량·예상 금액을 보여 줘. 버튼은 왼쪽에 테두리만 있는 ‘고치기’, 오른쪽에 색이 채워진 ‘예약 보내기’ 두 개로 하고 크기는 같게 해. ‘고치기’나 Esc를 누르면 창만 닫히고 입력한 내용은 그대로 남아 있어야 해. 창이 열리면 ‘고치기’ 버튼에 먼저 커서가 가고, 탭 키로 창 밖으로 나가지 않게 해. 창이 닫히면 원래 눌렀던 보내기 버튼으로 커서를 되돌려 줘. 확인 창이 상단 메뉴보다 위에 오게 하고, 휴대폰에서는 두 버튼을 위아래로 놓되 ‘예약 보내기’를 위에 ‘고치기’를 아래에 둬.

──────────────────────────────────────────
6.  4부 Chapter 05 · 보내기 전에 예약 내용 확인하기  (2번째)
──────────────────────────────────────────

예약을 보낸 뒤에는 폼 자리에 접수 안내를 남기고 보낸 내용도 함께 보여 줘. ‘새 예약 문의하기’ 버튼을 하나 두고 누르면 빈 폼으로 돌아가게 해. 토스트로 알리지 마.

──────────────────────────────────────────
7.  4부 Chapter 06 · 작성 중인 예약 내용을 자동 저장하기
──────────────────────────────────────────

예약 폼에 입력한 내용을 브라우저에 자동으로 저장해. 3부에서 즐겨찾기를 저장한 것과 같은 방식으로 하되, 글자를 칠 때마다가 아니라 입력이 1초쯤 멈춘 뒤에 한 번만 저장해. 이름과 연락처는 저장하지 말고 날짜·시간·인원·제품·수량·문의 내용만 저장해. 저장한 지 사흘이 지난 내용은 불러오지 말고 지워. 다시 열었을 때 저장해 둔 내용을 칸에 채우고 폼 위에 ‘이전에 작성하던 내용을 불러왔습니다’라고 알려 줘. 그 옆에 ‘새로 작성하기’ 버튼을 두고 누르면 저장된 내용을 지우고 빈 폼으로 만들어. 저장될 때마다 폼 오른쪽 위에 ‘작성 중인 내용이 저장되었습니다’라고 작게 표시하되 토스트로 띄우지 말고 몇 초 뒤 흐려지게만 해. 예약을 보내고 나면 저장해 둔 내용을 바로 지워.


─────────────────────────────────────────────
한 번에 하나씩 보내세요. 보낸 뒤 책의 「직접 해 보기」로 확인하고 다음으로 갑니다.
결과가 어긋나면 책의 「이럴 때는」 상자에 있는 한 줄을 이어서 보내면 됩니다.
같은 요청문을 보내도 AI가 만드는 코드는 조금씩 다르게 나옵니다. 정상입니다.

다 마치면 3_4부까지 폴더와 같은 상태가 됩니다.
