7. 프론트엔드 — 화면과 로그인

이 단계에서 하는 것: 프론트엔드 개발자 역할을 세우고, 회원가입/로그인 화면과 거래 목록·입력·월별 통계 화면을 만든다. 화면은 앞서 만든 API를 호출해 실제 데이터와 AI 결과를 표시한다. 다음 단계로 넘길 것: 로그인해야 내 가계부가 보이고, 화면→API→Supabase가 이어져 실제 거래·통계·AI 결과가 뜨는 상태.

지금까지 데이터(Supabase), API 명세, 백엔드 구현을 갖췄다. 이제 사람이 보는 화면을 만든다. 화면은 값을 스스로 계산하지 않는다. 잔액도, 통계도, AI 추천도 서버가 정한 답을 받아 표시만 한다. 화면은 표시, 판정은 서버라는 원칙을 이 단계에서 눈으로 확인한다.

준비 확인

• 3단계에서 docs/화면기획서.md가 만들어져 있고, 화면 목록과 상태(빈 상태·로딩·에러), 수입=녹색/지출=빨강 규칙이 적혀 있다.
• 4단계에서 Supabase에 테이블·인증·행 수준 보안(RLS)이 서 있다.
• 5단계에서 docs/API명세.md가 만들어져 있다.
• 6단계에서 백엔드가 이 명세대로 API와 AI 기능(자동 분류·월별 요약)을 구현해 두었다.
• 색·간격·컴포넌트의 근거가 되는 docs/가이드/디자인시스템.pdf가 있다.

따라하기

단계 1 — 프론트엔드 개발자 역할로 화면과 로그인 만들기

같은 대화창에서 프론트엔드 개발자 역할을 세우고, 로그인 화면부터 통계 화면까지 한 번에 만든다. 아래 프롬프트를 그대로 붙여 넣는다.

'프론트엔드 개발자' 역할을 만들어줘. docs/화면기획서.md와 docs/API명세.md, docs/가이드/디자인시스템.pdf를 진실 원천으로 삼는다.
판정은 서버 응답을 그대로 표시만 하고 화면에서 다시 계산하지 않는다.
이 역할로:
1) Supabase Auth로 회원가입/로그인 화면을 만들고, 로그인해야 내 가계부를 보게 해줘.
2) 거래 내역 목록·입력·월별 통계 화면을 화면기획서대로 만들고, 우리 API를 호출해 실제 데이터를 표시해줘.
3) 거래 입력 시 AI 추천 카테고리를 보여주고, 통계 화면에 월별 AI 요약을 표시해줘.
색·간격·컴포넌트는 디자인시스템 토큰을 그대로 쓰고, 수입=녹색/지출=빨강 규칙을 지켜줘.

이렇게 나오면 성공: AI가 프론트엔드 개발자 역할을 맡고, 다음 화면 파일들이 만들어진다. - 회원가입/로그인 화면. 로그인하지 않은 상태에서는 가계부 화면으로 들어갈 수 없다. - 거래 내역 목록 화면, 수입·지출 입력 화면, 월별 통계 화면. - 거래 입력 화면에 AI 추천 카테고리가 표시되고, 통계 화면에 월별 AI 요약이 표시된다. - 색·간격은 임의 값이 아니라 디자인시스템 토큰으로 지정되고, 수입은 녹색·지출은 빨강으로 구분된다.

단계 2 — 로그인해야 내 가계부가 보이는지 확인

화면이 만들어졌으면 로그인 문이 제대로 서 있는지 확인한다. 아래 프롬프트를 그대로 붙여 넣는다.

방금 만든 화면에서, 로그인하지 않은 사용자가 거래 목록·입력·통계 화면에 바로 들어가면 어떻게 되는지 짚어줘.
로그인해야 내 데이터가 보인다는 흐름이 지켜지는지, 로그인한 사용자는 자기 거래만 보게 되는지 확인해줘. 지금 새 기능은 만들지 마.

이렇게 나오면 성공: 로그인하지 않으면 가계부 화면 대신 로그인으로 보내지고, 로그인한 사용자는 자기 거래만 본다는 점이 확인된다.

단계 3 — 화면이 서버 답을 표시만 하는지 짚어 보기

잔액·통계·AI 결과를 화면이 스스로 계산하지 않고 API 응답을 그대로 표시하는지 확인한다.

거래 목록·월별 통계·AI 추천 화면이 값을 화면에서 다시 계산하지 않고, 우리 API 응답을 그대로 표시만 하는지 짚어줘.
잔액과 카테고리별 합계, AI 추천 카테고리와 월별 요약이 서버에서 온 값인지 한 줄씩 확인해줘.
그리고 화면에서 Supabase를 직접 부르는 곳 없이 우리 API를 거치는지도 확인해줘.

이렇게 나오면 성공: 잔액·통계·AI 결과가 서버 응답을 그대로 표시한 값이라는 점과, 화면이 Supabase를 직접 부르지 않고 API를 거친다는 점이 확인된다.

단계 4 — [사람 검증] 화면을 열어 내 눈으로 확인

AI가 "화면 만들었다"고 해도, 브라우저에서 내가 직접 끝까지 눌러 본다. 이게 이 과정의 핵심이다.

1. npm run dev 로 앱을 켜고 http://localhost:3000 을 연다. 로그인 안 하면 로그인 화면으로 보내지는지 확인한다(비로그인 접근 차단).
2. 표준 테스트 계정(demo@moneynote.dev / moneynote1234, 4장에서 만든 것)으로 로그인한다. (회원가입 화면도 한 번 눌러 새 계정 만들기가 되는지 확인해 본다.)
3. 수입 한 건과 지출 한 건을 입력한다. 입력 화면에서 AI 추천 카테고리가 뜨는지 본다.
4. 목록에서 수입은 녹색, 지출은 빨강으로 구분되는지 본다.
5. 통계 화면에서 잔액·카테고리별 합계와 월별 AI 요약이 뜨는지 본다. 요약의 숫자가 목록의 금액과 맞는지도 눈으로 맞춰 본다.

이렇게 나오면 성공: 로그인 후 화면→API→Supabase가 이어져 내가 넣은 거래·통계·AI 결과가 화면에 뜬다. 하나라도 안 뜨면 그 화면 이름과 증상을 AI에게 그대로 주고 고치게 한다.

이 단계 마무리

• 프론트엔드 개발자 역할로 회원가입/로그인 화면과 거래 목록·입력·월별 통계 화면을 만들었다.
• 로그인해야 내 가계부가 보이고, 로그인한 사용자는 자기 거래만 본다.
• 화면은 값을 다시 계산하지 않고 API 응답을 표시만 하며, Supabase를 직접 부르지 않고 API를 거친다.
• 색·간격은 디자인시스템 토큰을 따르고, 수입=녹색/지출=빨강 규칙이 지켜진다.
• 막히면: 화면 색이나 간격이 디자인시스템과 어긋나면 "디자인시스템 토큰으로 다시 맞춰줘"라고 요청한다. 잔액·통계가 화면에서 계산되고 있으면 "그 값은 서버 응답을 그대로 표시만 하게 고쳐줘"라고 되돌린다. 로그인 없이 화면이 열리면 "로그인해야 접근하게 막아줘"라고 요청한다.

로그인부터 통계까지 화면이 이어졌다. 다음 단계에서 QA·보안 역할을 세워 이 흐름을 검증하고 문제를 고친다.