{페이지명}은 다음과 같이 개발되어야 합니다.

페이지 진입 경로

{진입경로 및 URL 파라미터 설명}

처리 흐름

Step 1. 파라미터 취득

{URL이나 라우트에서 필요한 파라미터 설명}

Step 2. 초기 API 호출

{페이지 로드 시 호출할 API와 목적}

Step 3. 조건별 화면 처리

{API 응답에 따른 분기 처리 설명}

Step 4. 사용자 액션 처리

{버튼 클릭 등 사용자 인터랙션 시 호출할 API}

Step 5. 완료 처리

{성공 시 리다이렉트 또는 안내 메시지}

구현 시 참고사항

스타일 가이드

• 기존 {참고페이지명} 페이지의 스타일을 참고하되 컴포넌트는 재사용하지 않습니다.

에러 핸들링

• 프로젝트의 에러 핸들링 가이드 문서를 참고합니다.
• @{에러핸들링문서경로}

API 클라이언트

• 프로젝트의 공통 API 클라이언트를 활용합니다.
• @{API클라이언트경로}

다국어 대응

• 모든 텍스트는 다국어 대응이 되어야 합니다.
• i18n 설정을 따릅니다.

코딩 컨벤션

• 프로젝트의 코딩 컨벤션과 아키텍처 원칙을 준수합니다.
• @{코딩컨벤션문서경로}

분석 요청

방대하고 파일 크기도 큰 코드베이스와 문서를 분석하여 구현해야 합니다.

분석 지침

• Context Input 등의 이유로 일부만 읽고 추측하면 안 됩니다.
• 심층 분석이 필요합니다.
• Task 병렬 처리 등 고급 기능을 활용하세요.
• 빠짐없이 분석해서 구현 계획을 세우고 단계적으로 진행하세요.

참고할 파일들

• @{참고할디렉토리또는파일들}

예시: 비밀번호 재설정 페이지

진입 경로

/reset-password-confirm/[TOKEN]?email={URL인코딩된이메일}

처리 흐름

Step 1. Token 취득

• URL 경로에서 TOKEN 파라미터 추출
• 다음 단계에서 API 호출 시 사용

Step 2. Email 취득

• Query Parameter에서 email 추출
• URL 디코딩하여 사용

Step 3. 계정 확인 API 호출

• 엔드포인트: /auth/accounts/check
• email을 전달하여 계정 존재 여부 확인

Step 3-1. 계정이 없는 경우 (false)

• 탈퇴 회원 안내 메시지 표시
• 회원가입 페이지 이동 버튼 제공

Step 3-2. 계정이 있는 경우 (true)

• 이메일 주소 표시
• 새 비밀번호 입력 필드
• 비밀번호 확인 입력 필드
• 비밀번호 강도 검증 (회원가입 페이지와 동일)
• 재설정 버튼

Step 4. 비밀번호 재설정 API 호출

• 엔드포인트: /auth/password/reset/confirm
• token, email, new_password 전달

Step 5. 완료 처리

• 성공 메시지 표시
• 로그인 페이지로 리다이렉트

💡 사용 팁

효과적인 지시를 위한 체크리스트

1. URL 구조 명확히 정의

   • 동적 라우트 파라미터: [param]
   • Query Parameters: ?key=value

2. API 흐름을 단계별로 정리

   • 어떤 API를 언제 호출하는지
   • 응답에 따른 분기 처리

3. UI 요소 구체적으로 명시

   • 입력 필드 종류
   • 버튼 동작
   • 에러/성공 메시지

4. 참고할 기존 코드 지정

   • 스타일 참고용 페이지
   • 공통 컴포넌트
   • 유틸리티 함수

5. 프로젝트 문서 참조

   • 코딩 컨벤션
   • 에러 핸들링 가이드
   • API 클라이언트 사용법

---

🎯 기대 결과

• 5분 내에 새로운 페이지 개발 완료
• 프로젝트 컨벤션을 준수하는 코드
• 에러 핸들링이 적용된 안정적인 코드
• 다국어 지원이 완료된 코드
• API 연동이 완료된 동작하는 페이지

{페이지명}은 다음과 같이 개발되어야 합니다.

페이지 진입 경로

{진입경로 및 URL 파라미터 설명}

처리 흐름

Step 1. 파라미터 취득

{URL이나 라우트에서 필요한 파라미터 설명}

Step 2. 초기 API 호출

{페이지 로드 시 호출할 API와 목적}

Step 3. 조건별 화면 처리

{API 응답에 따른 분기 처리 설명}

Step 4. 사용자 액션 처리

{버튼 클릭 등 사용자 인터랙션 시 호출할 API}

Step 5. 완료 처리

{성공 시 리다이렉트 또는 안내 메시지}

구현 시 참고사항

스타일 가이드

• 기존 {참고페이지명} 페이지의 스타일을 참고하되 컴포넌트는 재사용하지 않습니다.

에러 핸들링

• 프로젝트의 에러 핸들링 가이드 문서를 참고합니다.
• @{에러핸들링문서경로}

API 클라이언트

• 프로젝트의 공통 API 클라이언트를 활용합니다.
• @{API클라이언트경로}

다국어 대응

• 모든 텍스트는 다국어 대응이 되어야 합니다.
• i18n 설정을 따릅니다.

코딩 컨벤션

• 프로젝트의 코딩 컨벤션과 아키텍처 원칙을 준수합니다.
• @{코딩컨벤션문서경로}

분석 요청

방대하고 파일 크기도 큰 코드베이스와 문서를 분석하여 구현해야 합니다.

분석 지침

• Context Input 등의 이유로 일부만 읽고 추측하면 안 됩니다.
• 심층 분석이 필요합니다.
• Task 병렬 처리 등 고급 기능을 활용하세요.
• 빠짐없이 분석해서 구현 계획을 세우고 단계적으로 진행하세요.

참고할 파일들

• @{참고할디렉토리또는파일들}

예시: 비밀번호 재설정 페이지

진입 경로

/reset-password-confirm/[TOKEN]?email={URL인코딩된이메일}

처리 흐름

Step 1. Token 취득

• URL 경로에서 TOKEN 파라미터 추출
• 다음 단계에서 API 호출 시 사용

Step 2. Email 취득

• Query Parameter에서 email 추출
• URL 디코딩하여 사용

Step 3. 계정 확인 API 호출

• 엔드포인트: /auth/accounts/check
• email을 전달하여 계정 존재 여부 확인

Step 3-1. 계정이 없는 경우 (false)

• 탈퇴 회원 안내 메시지 표시
• 회원가입 페이지 이동 버튼 제공

Step 3-2. 계정이 있는 경우 (true)

• 이메일 주소 표시
• 새 비밀번호 입력 필드
• 비밀번호 확인 입력 필드
• 비밀번호 강도 검증 (회원가입 페이지와 동일)
• 재설정 버튼

Step 4. 비밀번호 재설정 API 호출

• 엔드포인트: /auth/password/reset/confirm
• token, email, new_password 전달

Step 5. 완료 처리

• 성공 메시지 표시
• 로그인 페이지로 리다이렉트

💡 사용 팁

효과적인 지시를 위한 체크리스트

1. URL 구조 명확히 정의

   • 동적 라우트 파라미터: [param]
   • Query Parameters: ?key=value

2. API 흐름을 단계별로 정리

   • 어떤 API를 언제 호출하는지
   • 응답에 따른 분기 처리

3. UI 요소 구체적으로 명시

   • 입력 필드 종류
   • 버튼 동작
   • 에러/성공 메시지

4. 참고할 기존 코드 지정

   • 스타일 참고용 페이지
   • 공통 컴포넌트
   • 유틸리티 함수

5. 프로젝트 문서 참조

   • 코딩 컨벤션
   • 에러 핸들링 가이드
   • API 클라이언트 사용법

---

🎯 기대 결과

• 5분 내에 새로운 페이지 개발 완료
• 프로젝트 컨벤션을 준수하는 코드
• 에러 핸들링이 적용된 안정적인 코드
• 다국어 지원이 완료된 코드
• API 연동이 완료된 동작하는 페이지