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

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


──────────────────────────────────────────
1.  3부 Chapter 01 · 만들어 둔 검색을 메뉴에도 붙이기
──────────────────────────────────────────

FAQ에 넣은 검색과 같은 방식으로 인기 메뉴에도 검색창을 넣어. 메뉴 이름과 설명 글에서 찾고 가격은 검색 대상에서 빼. 입력이 0.3초쯤 멈춘 뒤에 한 번만 걸러내되 방문자가 느끼기에는 지금처럼 빨라야 해. FAQ 검색은 그대로 두고 건드리지 마. 카드 디자인과 배치는 유지해.

──────────────────────────────────────────
2.  3부 Chapter 02 · 여러 조건으로 메뉴 걸러 보기  (1번째)
──────────────────────────────────────────

메뉴 카드마다 화면에 보이지 않는 표시를 넣어. 종류는 아메리카노·카페라테·바닐라빈 라테가 커피, 버터 크루아상·소금빵이 빵, 딸기 생크림 케이크가 케이크. 재료는 라테 둘과 케이크에 우유, 크루아상·소금빵·케이크에 밀, 크루아상·소금빵에 버터. 아메리카노에는 아무것도 넣지 마. 화면에 보이는 모습은 지금과 똑같이 유지해.

──────────────────────────────────────────
3.  3부 Chapter 02 · 여러 조건으로 메뉴 걸러 보기  (2번째)
──────────────────────────────────────────

메뉴 검색창 아래에 조건 버튼을 넣어. 종류는 전체·커피·빵·케이크, 재료는 ‘우유 없는 것’·‘밀 없는 것’으로 하고, 고른 조건을 **모두 만족하는** 카드만 남게 해. 같은 버튼을 다시 누르면 그 조건만 풀리고, 선택된 버튼은 다른 색으로 표시해. 오른쪽 끝에 ‘조건 지우기’ 버튼을 두고 누르면 검색어까지 함께 지워 줘. 조건에 맞는 메뉴가 없으면 걸려 있는 조건과 함께 ‘조건을 하나 줄여 보세요’라고 안내해. 앞 장에서 만든 검색과 함께 작동하게 해.

──────────────────────────────────────────
4.  3부 Chapter 03 · 좋아하는 메뉴를 새로고침 후에도 남기기
──────────────────────────────────────────

메뉴 카드마다 오른쪽 위에 하트 버튼을 넣어. 누르면 채워지고 한 번 더 누르면 비워지게 하되, 하트를 눌러도 카드가 열리거나 다른 곳으로 이동하지 않게 해. 누른 메뉴를 브라우저에 저장해서 새로고침하거나 다시 열어도 그대로 남아 있게 해. 저장하는 자리의 이름은 mellow-favorites로 하고 메뉴 이름을 그대로 적어 둬. 조건 버튼 줄에 ‘내가 고른 메뉴’ 버튼을 더하고 고른 개수도 함께 보여 줘. 고른 메뉴가 없으면 ‘아직 고른 메뉴가 없습니다. 하트를 눌러 담아 보세요.’라고 안내해. ‘모두 지우기’ 버튼도 두되 정말 지울지 한 번 물어봐.

──────────────────────────────────────────
5.  3부 Chapter 04 · 화면을 가리지 않는 작은 알림 보여 주기
──────────────────────────────────────────

하트를 눌러 메뉴를 담으면 화면 아래 가운데에 작은 알림을 잠깐 보여 줘. 담았을 때는 ‘즐겨찾기에 담았습니다’, 풀었을 때는 ‘즐겨찾기에서 뺐습니다’라고 하고 2초 뒤 저절로 사라지게 해. 확인 버튼은 만들지 말고, 알림이 뜨는 동안에도 화면을 계속 쓸 수 있게 해. 알림이 떠 있을 때 새 알림이 생기면 앞 알림을 지우고 새 알림으로 바꿔 줘. 2부에서 만든 맨 위로 이동 버튼과 겹치지 않게 해.


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

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