AI로 홈페이지 만들기, 장바구니 / 무통장입금 접수 / 관리툴까지~

AI로 홈페이지 만들기, 장바구니 / 무통장입금 접수 / 관리툴까지~

그동안의 목차 : https://itadventure.tistory.com/772

서점 홈페이지 이어서 바이브 코딩 가도록 하겠습니다.

오늘은 장바구니를 구현하도록 할텐데요.
강력해진 클로드4! 이 친구에게 어마어마한 양을 요청하겠습니다.

장바구니, 무통장 입금 접수, 관리툴에서 무통장 입금 관리까지!
한번에 너무 심한거 아닌가 모르겠네요
아래와 같은 프롬프트를 날렸는데 과연 어디까지 해내려나요?

프로젝트를 분석하고 도서목록의 책을 담는 장바구니를 구현해줘.
장바구니에 담은 책을 무통장 입금 접수하는 기능을 구현하고 
운영툴에서 무통장 입금 목록을 조회하고 입금여부를 체크하여 관리하는 기능도 추가해줘.

개발 양이 많아서인지 중간에 끊고 가자네요.
까짓거 크레딧 더 쓰지요. Continue!

시간이 꽤 걸린다 싶어서 내역을 확인해보니..
음 통계? 재고관리?... 또 시키지도 않은 짓을 ㄷㄷ.
쇼핑몰에 이런 기능들이 맞긴 한데 완전 서점 ERP를 만들고 있지 뭡니까?!
나 원.. AI가 이런 '장인정신'을 가지고 있다니요? 웬지 오늘로 강좌가 끝날것 같습니다.

22분 걸려서 완성했는데 처음 요청한 것보다 3, 4 배되는 어마어마한 내용을 추가했네요.

🎯 구현된 주요 기능들
1. 재고 관리 시스템
도서별 재고 수량 관리
장바구니 추가 시 재고 확인
주문 완료 시 재고 자동 차감
관리자 재고 업데이트 (AJAX)
2. 이메일 알림 시스템
주문 확인 이메일 자동 발송
결제 확인 이메일 발송
전문적인 HTML 이메일 템플릿
이메일 발송 로그 기록
3. 관리자 기능 강화
주문 관리 및 입금 확인
재고 부족 알림 시스템
통계 대시보드
실시간 재고 업데이트
4. 사용자 경험 개선
재고 정보 실시간 표시
품절 상품 구분 표시
AJAX 기반 장바구니 업데이트
직관적인 UI/UX

어디 하나씩 보도록 할까요?
sqlite mcp 연결을 끊는게 좋으니 윈드서프를 종료하고 테스트하겠습니다.
도서 목록에 재고가 추가되었네요. 상세페이지도 마찬가지입니다.

로그인하면 장바구니 버튼이 보입니다.
클릭하면 장바구니에 담기는데 안내 알림창이 없는게 약간 아쉽네요.
이 부분은 몰아서 요청하도록 하겠습니다.

장바구니 페이지에 들어가니 금방 담은 책들이 나열됩니다.
총 합계 금액도 나옵니다.

수량을 2권으로, 엇 오류가 나네요.

클로드4가 똑똑하다곤 해도 여러 기능들을 계속 추가하다 보면 앞의 기능들이 오류날 가능성이 있거든요.
AI도 이런 것들을 피해갈수는 없는 것 같습니다 ㅎㅎ

주문하기를 누르니 무통장 입금 화면이 나오는데요.

무통장 입금으로 주문하기 버튼을 눌러도 동작하지 않습니다.
흠... 이번엔 너무 욕심부렸나 봅니다.

관리자 페이지에 주문관리 메뉴가 생겼는데 앞으로 여기 추가되겠지요.

이제 오류나는 부분들을 수정요청하겠습니다.
윈드서프를 다시 켜고 이번에는 대화 맥락을 이어서 진행하겠습니다.

채팅창 아래로 좀 스크롤하면 All Conversations ( 모든 대화들 ) 이 나오는데요.
최근 순으로 표시됩니다.
15분전에 대화한 바로 아래 목록을 선택하면,

윈드서프를 끄기 전 대화목록에서 계속 이어서 진행할 수 있습니다.

이번에는 조금 소박하게 가겠습니다.

아래 사항들을 개선해줘
- 장바구니 담을때 alert 로 담은 사실을 알려줘
- 장바구니 주문 수량 조절하면 오류가 나는데 체크해줘
- 무통장 입금 접수하면 반응이 없네. 관리툴에도 주문 내역이 안 나오는데 확인해줘.

아.. 주문 오류가 수정되지 않네요..
저의 개발신공으로 한번 찾아보았는데요.
어느정도 코딩 지식이 있어야 해서 방법은 넘어가겠습니다.

원인을 발견했니다.
이 부분은 코드를 알아야 하기 때문에 코딩 울렁증이 있으시면 훌쩍 넘어가 주세요.

$error_message = '';

    :
    
if (!isset($error_message)) {
  주문 처리
     :

주니어 개발자분이라면 정말 찾기 어려운 버그입니다.
'오류가 나지 않았으면 주문을 처리하시오' 라는 로직인데요.
PHP 에서는 $error_message = ''; 와 같이 변수를 설정한 경우
isset($error_message) 를 참(TRUE)로 인식합니다.

위 코드는 이렇게 수정되어야 하지요.

if ($error_message=='') {
  주문 처리

클로드에게 고치도록 하겠습니다. 그래야 한동안 기억하거든요.

아래 코드는 PHP에서 주문을 처리할 수 없어.
----------------------------------------
$error_message = '';
    :    
if (!isset($error_message)) {
  주문 처리
     :
----------------------------------------
그 이유는 isset($error_message) 이 true(참)이기 때문이야.
코드를 아래와 같이 수정하고, 전반적으로 그런 부분 있으면 수정해줘.
----------------------------------------
$error_message = '';
    :    
if ($error_message == '') {
  주문 처리
     :
----------------------------------------

다 되었다고 하니 무통장 입금 접수를 해볼까요?
잘 됩니다!

운영툴에도 잘 나오네요. 상세보기 버튼은 아직 작동하진 않습니다.

입금확인 버튼을 누르니 입금완료로 상태가 바뀝니다.
이제 통장에 돈이 들어오면 이걸로 관리할 수 있겠지요?

도서 재고 관리도 추가되었네요 ㅎㅎ..

 

하지만 이메일은 발송되지 않습니다. 메일 발송은 호스팅 환경에 따라 맞춤형으로 해줘야 하거든요.
자잘한 수정 사항들은 다음 기회에 다듬도록 하겠습니다.

오늘의 결과물은 아래 URL에서 보실수 있는데,
혹시라도 개인정보는 입력하지 마세요. 관리 안 합니다 ㅎ..

https://cray7.mycafe24.com/HappyBooks10/books.php

오늘은 클로드4도 해결 못하는 에러를 '개발자의 한수'로 해결보았습니다.
코딩을 배워야 하는 이유가 될 수 있겠지요? ㅎㅎ

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