🎨

디자인 가이드

CSS만 수정하고 싶을 때

9.2 KB
💻

개발 가이드

새 페이지를 만들 때

15 KB
🔧

트러블슈팅

오류가 발생했을 때

26 KB
📋

복붙 템플릿

빠르게 시작하고 싶을 때

4개

예시 1: 기존 페이지 색상 변경

디자인

기존 페이지의 블루 색상을 민트로 바꾸고 싶을 때 사용하세요.

안녕!

PA-TOOLS-DESIGN-GUIDE.md 파일을 읽어줘.

그리고 첨부한 quote-generator.html 파일의
모든 블루 색상(#5C85E0)을 민트 테마로 변경해줘.

변경 사항:
- 버튼 배경: #7DE3C8
- 버튼 텍스트: #2B2B2B
- Hover: #8FD4C7
- 페이지 배경: #FCFAF5

HTML 구조는 건드리지 말고 CSS만 수정해줘.

예시 2: 버튼만 민트 테마로

디자인

페이지의 모든 버튼을 가이드의 Primary 버튼 스타일로 통일하고 싶을 때

안녕!

PA-TOOLS-DESIGN-GUIDE.md의
Primary 버튼 스타일을 참고해서

첨부한 color-palette.html의
모든 버튼을 민트 테마로 바꿔줘.

- border-radius: 50px
- 그림자 효과 포함
- Hover 애니메이션 포함

예시 3: 카드 스타일 적용

디자인

카드 컴포넌트에 민트 테마의 호버 효과를 추가하고 싶을 때

안녕!

PA-TOOLS-DESIGN-GUIDE.md 파일을 읽고

image-resizing.html의
.tool-card 클래스를
가이드의 카드 스타일로 변경해줘.

적용할 것:
- border-radius: 24px
- border: rgba(125, 227, 200, 0.2)
- hover 효과 (transform + box-shadow)

예시 4: Input 스타일 통일

디자인

모든 입력 필드를 일관된 스타일로 만들고 싶을 때

안녕!

PA-TOOLS-DESIGN-GUIDE.md를 참고해서

case-converter.html의
모든 input과 textarea를
가이드 스타일로 통일해줘.

- focus 시 민트 border
- placeholder 색상
- border-radius: 12px

예시 5: 디자인 체크리스트 확인

디자인

페이지가 디자인 가이드를 제대로 따르는지 확인하고 싶을 때

안녕!

PA-TOOLS-DESIGN-GUIDE.md의
디자인 체크리스트를 읽고

첨부한 gif-editor.html이
모든 항목을 만족하는지 확인해줘.

만족하지 않는 항목이 있으면
수정 방법을 알려줘.

예시 6: 페이지 전체 리디자인

디자인

페이지 전체를 민트 테마로 완전히 바꾸고 싶을 때 (가장 많이 사용!)

안녕!

PA-TOOLS-DESIGN-GUIDE.md 파일 전체를 읽어줘.

그리고 첨부한 text-animator.html을
민트 테마로 완전히 리디자인해줘.

변경 사항:
✅ 모든 블루 → 민트
✅ 페이지 배경 → #FCFAF5
✅ 버튼 스타일 → 가이드 Primary 버튼
✅ 카드 스타일 → 가이드 카드
✅ Input 스타일 → 가이드 Input
✅ Slider → 민트 색상
✅ 히어로 섹션 → 제거

HTML 구조는 유지하고 CSS만 수정해줘.

예시 7: 새 HTML 도구 페이지

개발

새로운 HTML 도구 페이지를 처음부터 만들고 싶을 때

안녕!

PA-TOOLS-DEVELOPMENT-GUIDE.md 파일을 읽어줘.

그리고 새로운 도구 페이지를 만들어줘:
- 파일명: webp-to-gif.html
- 기능: WebP를 GIF로 변환
- 디자인: 민트 테마
- 구조: 가이드의 HTML 템플릿 사용

필수 포함:
[ ] <nav class="navbar"></nav>
[ ] <footer class="footer"></footer>
[ ] navigation.js, footer.js 로드
[ ] body padding-top: 80px
[ ] 배경색 #FCFAF5

예시 8: 새 PHP 회원 페이지

개발

로그인이 필요한 PHP 페이지를 만들고 싶을 때 (가장 중요!)

안녕!

PA-TOOLS-DEVELOPMENT-GUIDE.md 파일을 읽고

구독 취소 페이지를 만들어줘:
- 파일명: cancel-subscription.php
- 위치: /mypage/

가이드의 PHP 템플릿 사용해서:
✅ session_start() 맨 위
✅ 로그인 체크
✅ user-data.php 포함 (<head> 첫 줄)
✅ includes 최소화 (직접 DB 연결)
✅ session_write_close() 사용 안 함
✅ try-catch 에러 처리
✅ 민트 테마 디자인

기능:
- 현재 구독 정보 표시
- 취소 확인 모달
- DB 업데이트 (subscriptions 테이블)

예시 9: 기존 페이지 PHP 변환

개발

정적 HTML을 동적 PHP로 바꾸고 싶을 때

안녕!

다음 2개 파일을 읽어줘:
1. PA-TOOLS-DEVELOPMENT-GUIDE.md
2. 2_DATABASE-SCHEMA.md

그리고 첨부한 profile.html을
profile.php로 변환해줘.

추가할 기능:
✅ 세션에서 회원 정보 가져오기
✅ DB에서 추가 정보 조회
✅ 프로필 수정 폼 처리
✅ 비밀번호 변경 기능

가이드의 체크리스트 모두 적용:
- user-data.php 포함
- 로그인 체크
- includes 최소화
- 에러 처리

예시 10: API 연동 페이지

개발

API를 호출하고 데이터를 표시하는 페이지를 만들고 싶을 때

안녕!

다음 3개 파일을 읽어줘:
1. PA-TOOLS-DEVELOPMENT-GUIDE.md (구조)
2. 3_API-SPEC.md (API 명세)
3. 2_DATABASE-SCHEMA.md (DB 구조)

그리고 결제 내역 페이지를 만들어줘:
- 파일명: payment-history.php
- 위치: /mypage/

기능:
✅ /api/v1/payments/history API 호출
✅ 테이블로 결제 내역 표시
✅ 필터링 (기간, 상태)
✅ 페이지네이션
✅ 영수증 다운로드 버튼

민트 테마 + 가이드 체크리스트 준수

예시 11: 완전히 새로운 기능

개발

DB 테이블 설계부터 필요한 완전히 새로운 기능을 만들고 싶을 때

안녕!

PA-TOOLS-DEVELOPMENT-GUIDE.md를 참고해서

쿠폰 등록 페이지를 만들어줘:
- 파일명: redeem-coupon.php
- 위치: /mypage/

DB 테이블 설계부터 해줘:
- coupons 테이블
- user_coupons 테이블

기능:
1. 쿠폰 코드 입력
2. 유효성 검증
3. 적용 (구독 기간 연장)
4. 사용 이력 저장

전체 개발 가이드 체크리스트 준수!

예시 12: 로그인 문제

트러블슈팅

로그인 후에도 로그인 버튼이 계속 보일 때 (가장 흔한 문제!)

안녕!

PA-TOOLS-TROUBLESHOOTING.md 파일을 읽어줘.

문제:
로그인 후 메인 페이지로 이동하는데
여전히 "로그인" 버튼이 보여.

증상별 진단 가이드를 따라서
문제를 진단하고 해결해줘.

첨부 파일:
- login.php
- index.php

예시 13: 세션 문제

트러블슈팅

세션이 비어있거나 저장되지 않을 때

안녕!

PA-TOOLS-TROUBLESHOOTING.md를 읽고

현재 세션 문제를 해결해줘:
- 로그인 성공 → 메인으로 이동
- test-session.php 확인: array(0) {}
- 세션이 완전히 비어있음

가이드의 "로그인 성공했는데 세션 비어있음" 섹션을
참고해서 해결해줘.

첨부 파일:
- login.php
- user-data.php

예시 14: 500 에러

트러블슈팅

페이지 접속 시 500 에러가 발생할 때

안녕!

PA-TOOLS-TROUBLESHOOTING.md의
"500 Internal Server Error" 섹션을 읽어줘.

문제:
dashboard.php 접속 시 500 에러
페이지가 완전히 하얗게 나옴

단계별 진단을 따라서
원인을 찾고 해결해줘.

첨부 파일:
- dashboard.php

예시 15: 네비게이션 안 보임

트러블슈팅

상단 메뉴가 아예 표시되지 않을 때

안녕!

PA-TOOLS-TROUBLESHOOTING.md를 읽고

네비게이션이 아예 안 보이는 문제를 해결해줘.

증상:
- 페이지는 정상 로드
- 상단 메뉴 없음
- 콘솔: window.paToolsUser = undefined

가이드의 "네비게이션 바가 안 보임" 섹션
참고해서 단계별로 확인하고 수정해줘.

첨부 파일:
- subscription.php

예시 16: 예방 점검

트러블슈팅

새로 만든 페이지가 문제없는지 미리 확인하고 싶을 때

안녕!

PA-TOOLS-TROUBLESHOOTING.md의
"예방 체크리스트"를 읽고

새로 만든 payment-history.php가
모든 항목을 만족하는지 확인해줘.

PHP 파일 체크리스트:
[ ] session_start() 맨 위
[ ] user-data.php 첫 줄
[ ] includes 최소화
[ ] try-catch 에러 처리
[ ] session_write_close() 안 씀
[ ] navigation.js, footer.js 로드
[ ] body padding-top: 80px

문제 있으면 수정해줘.

예시 17: 디자인 + 개발

복합

디자인과 기능을 동시에 완성하고 싶을 때

안녕!

다음 2개 파일을 읽어줘:
1. PA-TOOLS-DESIGN-GUIDE.md (디자인)
2. PA-TOOLS-DEVELOPMENT-GUIDE.md (개발)

새로운 마이페이지를 만들어줘:
- 파일명: my-tools.php
- 기능: 최근 사용한 도구 목록

디자인:
✅ 민트 테마
✅ 카드 레이아웃
✅ Primary 버튼

개발:
✅ PHP 템플릿 사용
✅ DB에서 usage_logs 조회
✅ 로그인 체크
✅ user-data.php 포함

예시 18: 개발 + 트러블슈팅

복합

처음부터 문제 없는 완벽한 페이지를 만들고 싶을 때

안녕!

다음 2개 파일을 읽어줘:
1. PA-TOOLS-DEVELOPMENT-GUIDE.md
2. PA-TOOLS-TROUBLESHOOTING.md

결제 페이지(payment.php)를 만들되
트러블슈팅 가이드의 예방 체크리스트를
모두 적용해서 만들어줘.

기능:
- PortOne 결제 연동
- 구독 플랜 선택
- 결제 완료 후 DB 업데이트

예방 조치:
- session_write_close() 사용 금지
- includes 의존성 최소화
- user-data.php 필수 포함
- 에러 처리 완벽하게

예시 19: 3개 모두 사용 (최고급)

복합

디자인, 개발, 예방까지 완벽한 페이지를 만들고 싶을 때

안녕!

프로젝트의 다음 3개 파일을 모두 읽어줘:
1. PA-TOOLS-DESIGN-GUIDE.md
2. PA-TOOLS-DEVELOPMENT-GUIDE.md
3. PA-TOOLS-TROUBLESHOOTING.md

관리자 대시보드를 만들어줘:
- 파일명: admin-dashboard.php
- 위치: /admin/

디자인 (DESIGN-GUIDE):
✅ 민트 테마
✅ 카드 레이아웃
✅ 통계 표시용 카드

개발 (DEVELOPMENT-GUIDE):
✅ 관리자 권한 체크
✅ DB에서 통계 조회
✅ PHP 템플릿 준수
✅ user-data.php 포함

예방 (TROUBLESHOOTING):
✅ 모든 체크리스트 적용
✅ 세션 문제 예방
✅ includes 최소화

완벽하게 작동하는 페이지를 만들어줘!

💡 템플릿 사용법

대괄호 [ ] 부분만 수정하면 바로 사용할 수 있어요!

📝 템플릿 1: 디자인 변경

CSS만 수정할 때 사용

안녕!

PA-TOOLS-DESIGN-GUIDE.md 파일을 읽어줘.

첨부한 [파일명]을 민트 테마로 변경해줘.

변경 사항:
- 버튼: #7DE3C8
- 배경: #FCFAF5
- Hover: #8FD4C7
- 블루 제거

CSS만 수정, HTML 구조 유지.

🔨 템플릿 2: 새 페이지 개발

PHP 페이지를 새로 만들 때

안녕!

PA-TOOLS-DEVELOPMENT-GUIDE.md 파일을 읽어줘.

[페이지명]을 만들어줘:
- 파일명: [파일명].php
- 위치: /[폴더]/

기능:
- [기능1]
- [기능2]
- [기능3]

가이드의 PHP 템플릿 + 체크리스트 준수.
민트 테마 적용.

🔧 템플릿 3: 문제 해결

오류가 발생했을 때

안녕!

PA-TOOLS-TROUBLESHOOTING.md 파일을 읽어줘.

문제:
[증상 설명]

가이드의 증상별 진단을 따라
문제를 찾고 해결해줘.

첨부 파일:
- [파일1]
- [파일2]

🎯 템플릿 4: 종합 작업

여러 가이드를 함께 사용할 때

안녕!

프로젝트의 다음 파일들을 읽어줘:
1. PA-TOOLS-DESIGN-GUIDE.md
2. PA-TOOLS-DEVELOPMENT-GUIDE.md
3. [추가 필요 파일]

[작업 내용] 해줘.

디자인: 민트 테마
개발: PHP 템플릿 준수
예방: 체크리스트 적용

✨ 사용 팁

대괄호 [ ] 찾기:
Ctrl + F (또는 Cmd + F)로 "[" 검색하면 수정할 부분을 쉽게 찾을 수 있어요!

💡 효과적인 사용 방법

1단계: 위의 탭에서 원하는 작업 찾기
2단계: 📋 복사 버튼 클릭
3단계: 새 채팅창에 붙여넣기
4단계: 필요한 파일 첨부하고 전송!

💬 가이드 파일들은 프로젝트에 추가하면 자동으로 읽어줍니다!