프롬프트를 복사해 붙여넣으면,
나만의 독서 기록 웹사이트가 완성됩니다

안녕하세요, 앞으로 북노트(독서 기록장)를 같이 만들 거예요. 잘 부탁해요.

/init

CLAUDE.md에 아래 규칙을 추가해줘.

- 이 프로젝트는 '북노트'라는 독서 기록 웹앱이야. 만드는 사람은 코딩을 전혀 모르는 초보자야.
- 설명은 항상 쉬운 한국어로, 전문 용어 없이 해줘.
- 화면 글씨는 크고 또렷하게, 버튼은 큼직하게 만들어줘.
- 디자인은 따뜻하고 차분한 톤을 유지해줘.
- 무언가를 만들기 전에, 무엇을 할지 한두 문장으로 먼저 알려줘.

북노트라는 독서 기록 웹앱을 만들 거야.
첫 화면(책 목록)과 책 상세 화면의 기본 틀이 필요해.
어떻게 만들지 계획을 먼저 쉬운 말로 알려줘. 아직 만들지는 마.

좋아, 그 계획대로 만들어줘.
첫 화면 위쪽에는 '나의 북노트'라는 제목을 크게 넣고,
아직 책이 없을 때는 '첫 책을 기록해 보세요'라는 안내 문구가 보이게 해줘.
다 만들면 브라우저에서 확인하는 방법을 알려줘.

책을 기록하는 입력 폼을 만들어줘.
- 입력 칸: 제목, 저자, 별점, 한줄평 네 가지
- 별점은 별 5개 중에서 마음에 드는 별을 눌러 정하는 방식으로
- 저장 버튼을 누르면 데이터베이스에 저장되고 '저장했어요' 안내가 잠깐 보이게
- 첫 화면에 '+ 책 기록' 버튼을 달고, 누르면 이 폼이 열리게 해줘

저장한 책들을 첫 화면에 목록으로 보여줘.
- 책마다 제목, 저자, 별점, 한줄평이 카드처럼 보기 좋게
- 최근에 기록한 책이 맨 위에 오게
- 새 책을 저장하면 새로고침 없이 목록에 바로 나타나게 해줘

책을 수정하는 기능을 만들어줘.
- 목록의 책마다 '수정' 버튼을 달아줘
- 수정을 누르면 원래 적었던 제목·저자·별점·한줄평이 그대로 채워진 폼이 열리게 해줘
- 고치고 저장하면 목록에 바뀐 내용이 바로 반영되게 해줘

책 목록에 책마다 '삭제' 버튼을 달아줘.
삭제를 누르면 '정말 삭제할까요? 되돌릴 수 없어요.' 확인창이 먼저 뜨고,
확인을 누른 책만 목록에서 사라지게 해줘.
취소를 누르면 아무 일도 일어나지 않게 해줘.

지금 책은 어떤 정보들을 저장하고 있어? 쉬운 말로 알려줘.

책마다 '읽는 중 / 완독' 상태를 고를 수 있게 해줘.
- 책을 기록하거나 수정할 때 두 상태 중 하나를 선택할 수 있게
- 책 목록에서 제목 옆에 작은 배지로 상태가 보이게 (읽는 중=주황, 완독=초록)
- 선택한 상태는 새로고침해도 남도록 데이터베이스에 저장해줘

이메일과 비밀번호로 회원가입하는 화면을 만들어줘.
- 입력 칸: 이메일, 비밀번호, 그리고 화면에 표시될 이름(닉네임)
- 비밀번호는 6자 이상만 통과되게 하고, 짧으면 쉬운 한국어로 안내해줘
- 가입이 끝나면 '가입을 환영해요!' 인사와 함께 첫 화면으로 이동하게 해줘
- 오류가 나면 어려운 영어 메시지 대신 쉬운 한국어 안내가 뜨게 해줘

로그인과 로그아웃을 만들어줘.
- 로그인 화면에서 이메일·비밀번호로 로그인하면 화면 오른쪽 위에 내 이름이 보이게 해줘
- 이름 옆에 로그아웃 버튼을 두고, 누르면 처음 화면으로 돌아가게 해줘
- 로그인하지 않은 사람에게는 오른쪽 위에 '로그인' 버튼이 보이게 해줘
- 비밀번호가 틀리면 '비밀번호를 다시 확인해 주세요'라고 한국어로 알려줘

책마다 누가 기록했는지 저장하고, 권한을 걸어줘.
- 로그인한 본인이 기록한 책에만 수정·삭제 버튼이 보이게 해줘
- 다른 사람의 책에는 수정·삭제 버튼이 아예 안 보이게 해줘
- 화면에서만 숨기는 게 아니라, 서버 쪽에서도 남의 기록은 절대 고칠 수 없게 막아줘
- 로그인해야만 새 책을 기록할 수 있게 해줘

'내 책장'이라는 페이지를 만들어줘.
- 위쪽 메뉴에 '내 책장' 버튼을 추가하고, 로그인한 사람에게만 보이게 해줘
- 이 페이지에는 지금 로그인한 사람이 직접 기록한 책만 모아서 보여줘
- 다른 사람의 책은 절대 안 보이게 해줘
- 맨 위에 '○○님의 책장 · 총 N권'처럼 이름과 권수를 보여줘

책을 기록하거나 수정할 때 표지 사진을 올릴 수 있게 해줘.
- 폼에 '표지 사진 올리기' 버튼을 두고, 누르면 내 컴퓨터에서 사진을 고를 수 있게
- 사진을 고르면 폼 안에서 미리보기가 바로 보이게 해줘
- 저장하면 책 목록 카드에 표지가 세로 책 비율로 예쁘게 보이게 해줘
- 너무 큰 사진은 자동으로 알맞게 줄여서 올라가게 해줘

표지를 안 올린 책은 깨진 그림 대신 기본 이미지를 보여줘.
- 깔끔한 책 모양 아이콘에 은은한 배경색을 깐 기본 표지로 해줘
- 기본 표지 위에 책 제목의 첫 두 글자가 보이면 더 좋아
- 예전에 표지 없이 저장한 책들에도 똑같이 적용해줘

'둘러보기' 페이지를 만들어줘.
- 위쪽 메뉴에 '둘러보기' 버튼을 추가해줘
- 모든 사람의 책 기록을 최신순으로 모아 보여줘
- 카드마다 표지, 제목, 별점, 한줄평, 그리고 기록한 사람 이름이 보이게 해줘
- 로그인 안 한 사람도 구경은 할 수 있게 해줘 (기록은 로그인해야만)

책 기록 아래에 댓글 기능을 만들어줘.
- 댓글 입력칸과 등록 버튼을 두고, 등록하면 새로고침 없이 바로 목록에 보이게 해줘
- 댓글마다 작성자 이름과 몇 분 전에 썼는지 함께 보여줘
- 내가 쓴 댓글에만 삭제 버튼이 보이게 해줘
- 빈 댓글은 등록되지 않게 하고, '내용을 입력해 주세요'라고 안내해줘

책마다 좋아요(하트) 버튼과 좋아요 수를 만들어줘.
- 하트를 누르면 빨갛게 채워지며 숫자가 1 올라가고, 다시 누르면 취소돼서 1 내려가게 해줘
- 한 사람이 같은 책에 좋아요를 두 번 이상 누를 수 없게 해줘
- 로그인 안 한 사람이 하트를 누르면 '로그인이 필요해요' 안내가 뜨게 해줘

댓글과 좋아요가 실시간으로 보이게 해줘.
다른 사람이 댓글을 달거나 좋아요를 누르면,
내가 새로고침하지 않아도 내 화면에 몇 초 안에 자동으로 나타나게 해줘.

알림 기능을 만들어줘.
- 위쪽 메뉴에 종 모양 아이콘을 추가해줘
- 내 책 기록에 다른 사람이 댓글이나 좋아요를 남기면 종에 빨간 점이 뜨게 해줘
- 종을 누르면 '누가 무엇을 했는지' 목록이 보이고, 빨간 점은 사라지게 해줘

북노트 전체를 따뜻하고 깔끔한 느낌으로 예쁘게 만들어줘.
- 카드형 디자인에 부드러운 그림자와 둥근 모서리
- 포인트 색은 주황 계열 하나만 써서 통일감 있게
- 글씨는 40~50대가 읽기 편하게 충분히 크고 또렷하게
- 버튼은 큼직하게, 눌렀을 때 살짝 반응이 느껴지게
- 화면마다 스타일이 들쭉날쭉하지 않게 전체를 통일해줘

휴대폰 화면에서도 안 깨지고 보기 좋게 만들어줘.
- 좁은 화면에서는 책 카드가 한 줄에 하나씩 세로로 쌓이게
- 위쪽 메뉴는 좁은 화면에서 간단하게 접히게
- 버튼과 입력칸은 손가락으로 누르기 편한 크기로
- 책 제목이 길어도 잘리지 않고 다 보이게 해줘

이 북노트 프로젝트를 GitHub에 올려줘.
GitHub 계정이 연결되어 있는지 먼저 확인하고,
안 되어 있으면 무엇을 해야 하는지 한 단계씩 쉬운 한국어로 안내해줘.
비밀번호나 열쇠(API 키) 같은 민감한 파일은 올라가지 않게 꼭 빼줘.

이 북노트를 Vercel로 무료 배포하고 싶어.
필요한 과정을 한 단계씩 안내하면서 같이 진행해줘.
배포에 필요한 설정값이 있으면 어디서 찾아 어떻게 넣는지도 알려줘.
끝나면 접속할 수 있는 인터넷 주소를 알려줘.

책 목록 위쪽에 검색칸을 추가해줘.
제목이나 저자를 입력하면 입력하는 즉시 목록이 걸러지게 해줘.
검색 결과가 없으면 '찾는 책이 없어요'라고 보여줘.