AI로 홈페이지 만들기 - 책목록 카테고리 구분하기, 부가 기능들

AI로 홈페이지 만들기 - 책목록 카테고리 구분하기

목차 : https://itadventure.tistory.com/772

지난 시간에는 보여주기용 도서 목록을 SQLITE 데이터베이스에 연동하였습니다.

오늘은 그 후속편으로 카테고리 기능과 페이지 기능을 만들텐데요.
카테고리 먼저 진행하겠습니다.

AI가 만든 홈페이지는 마치 주사위 굴리기와 같아서, 어떤분은 도서목록에 카테고리 탭이 없을 수도 있습니다. 그러니 카테고리 기능를 삭제하고 새로 시작하겠습니다.

Windsurf 에 아래와 같이 지시를 내리면 되는데요. 모델은 역시나 똑똑한 클로드 소넷 3.7(Think)입니다.

홈페이지를 분석하고 도서목록 페이지 카테고리 탭을 삭제해줘

처음에 잘 알아듣지 못해 이미지를 캡쳐해서 함께 전달해 주니 알아 듣더라구요.

이제 카테고리 탭을 붙이기 전에 잠깐, 생각하고 넘어갑시다.
카테고리 목록을 정하는 걸 AI에게 일임할 필요는 없습니다.
내가 실제 서점을 운영한다면?
AI가 분명 사용하지도 않는 카테고리를 만들텐데 다시 수정하는 것보다는
먼저 생각하는 게 좋습니다. 이런건 주도권을 가져가자구요~

구상이 떠오르지 않는다면 AI에게 추천 목록을 물어보면 되는데요.
저는 이럴 때 chatGPT를 사용합니다. 무료로 사용할 수 있으니까요.
가입 안하셨으면 구글 로그인으로 가입하시면 됩니다.

https://chatgpt.com/

서점 홈페이지를 만드는 중이야. 도서 카테고리 추천해줘,

어마무시한 양을 추천해주세요.

저는 큰 카테고리만 골라보았습니다.
그래도 많네요.

문학, 인문, 경제/경영, 자기계발, 예술/대중문화, 과학/기술, 취미/실용, 학습/수험사, 만화/웹툰

이 카테고리를 sqlite 데이터베이스 책정보에 넣을텐데요.
카테고리 목록도 sqlite 에 연동하는게 좋습니다.
그래야 나중에 운영툴에서 카테고리를 추가하거나, 카테고리별 책 관리하기가 수월해지거든요.

sqlite 작업을 해야겠네요. 윈드서프를 새로 시작했기 때문에 먼저 sqlite mcp 인식을 시켜주겠습니다.

sqlite mcp 로 도서 목록 조회해줘.

이제 카테고리 정보를 연동하겠습니다.

도서 카테고리 목록을 추가할거야. 
sqlite에 카테고리 테이블을 만들고 아래 항목들을 넣어줘, 그리고 각각 일련번호를 붙여줘,

문학, 인문, 경제/경영, 자기계발, 예술/대중문화, 과학/기술, 취미/실용, 학습/수험사, 만화/웹툰

'일련번호'는 꽤 중요한데요. 앞으로 카테고리와 도서목록을 연결하는 기준이 될 겁니다.
일련번호로 도서를 연결해야 카테고리 이름을 자유롭게 변경할 수 있거든요.결과는? 순조롭군요.

좋았어! 이제 도서 목록 페이지에 카테고리 목록을 넣어줘.

'좋았어!' => 이건 그냥 독자님들의 어그로를 끌려고 넣은 거니 무시해 주세요 ㅎㅎ
이런 식으로 추가해주었네요. 뭐 나쁘지 않습니다.

세상에나~! 클로드 소넷이 하도 똑똑하다보니 또 시키지 않은 짓을 계속 합니다.
그런데 제 마음을 읽은 것 같아 이번에는 마음에 쏙 드네요.

이제 카테고리 기능이 추가된 도서 목록 페이지를 확인해보겠습니다. 
다음 단계로 카테고리 필터링이 작동하도록 PHP 코드를 수정하겠습니다.

이제 도서와 카테고리를 연결하는 테이블을 생성하고 적용할 필요가 있습니다. 
현재 코드에서는 카테고리 드롭다운이 추가되었지만, 
실제로 도서와 카테고리가 연결되지 않아 필터링이 작동하지 않습니다.
도서-카테고리 연결 테이블을 만들고 샘플 데이터를 추가하겠습니다:
   :
도서마다 랜덤으로 카테고리를 할당하겠습니다.
   :
이제 사용자는 카테고리별로 도서를 필터링하여 원하는 도서를 쉽게 찾을 수 있습니다.
추가적인 기능이나 수정이 필요하신가요?

사실은 다음 단계로 아래 내용들을 지시할 생각이었는데 이걸 그냥 한번에 만들어 버리네요! 나이스!
- 책 정보에 카테고리 일련번호를 연결할 항목 추가하고 랜덤하게 번호를 배정해줘.
- 카테고리를 선택하면 조건에 맞는 책목록이 나열되게 해줘

이제 페이지 기능을 넣겠습니다.

도서 목록에 페이지 기능을 넣어줘. 도서는 한 페이지에 10개씩 보여줘.

가끔은 이런 오류 안내가 뜨기도 하는데요.

그냥 놔두면 알아서 진행합니다.
결과는 오우~ 

페이지 이동도 잘 작동합니다. 오늘은 너무 순탄하네요.

내친 김에 상단의 최신순, 20개씩 보기 이런 기능도 해달라고 하겠습니다.

최신순, 20개씩 보기 선택상자가 작동하지 않아. 기능을 연동해줄래?

잘 작동합니다!

하나 더 욕심부려 보겠습니다.

도서 목록을 20권 랜덤하게 추가하고 이미지는 픽썸에서 적당한 걸로 채워줘

도서 검색 기능을 추가해줘

짠!

솔직히 이렇게까지 선전할 줄은 몰랐네요.
AI와 sqlite mcp의 조합은 정말 강력하다는 생각이 듭니다.

오늘도 흥미로운 주제가 되셨을까요?
방문해 주셔서 감사합니다!