여러 AI 코딩 도구로 디자인을 코드로 옮깁니다

아직 코드를 수정하지 마세요.

현재 프로젝트의 PRD.md와 지침 파일을 읽고 다음을 확인해 주세요.

1. 폴더 구조와 시작 파일
2. 사용 중인 기술과 패키지
3. 공통 CSS 변수와 디자인 토큰
4. 재사용할 수 있는 컴포넌트와 유틸리티
5. 이미지, 아이콘, 폰트 에셋
6. 실행, 빌드, 테스트 명령
7. 이번 작업에 영향을 주는 추가 규칙 파일

확인한 사실과 아직 확인하지 못한 내용을 나눠서 보고해 주세요.
코드는 수정하지 마세요.

공통 작업 규칙:
- PRD.md와 프로젝트 지침 파일을 먼저 읽어 주세요.
- 작업 전 기존 폴더 구조, 공통 스타일, 에셋, 패키지를 확인해 주세요.
- 확인된 사실과 추정을 구분해 주세요.
- 디자인에 없는 기능과 에셋을 임의로 만들지 마세요.
- 기존 코드와 공통 컴포넌트를 우선 재사용해 주세요.
- CSS class와 HTML id는 snake_case, JavaScript 변수와 함수는 camelCase로 작성해 주세요.
- 수정 후 360px, 768px, 1280px 화면과 키보드 포커스, 콘솔 오류를 확인해 주세요.
- 결과에는 변경 파일, 구현 내용, 검증 결과, 확인하지 못한 부분을 구분해 작성해 주세요.

제공한 디자인을 분석하고 구현 계획을 작성해 주세요.

디자인 자료: [Figma 링크 또는 이미지 경로]
이번 작업 화면: [화면 이름]

다음을 확인해 주세요.

1. 페이지와 공통 영역 구조
2. 색상, 폰트, 간격, 라운드, 그림자
3. 모바일, 태블릿, 데스크톱 배치 변화
4. hover, focus, active, disabled 상태
5. 로딩, 빈 상태, 오류 상태
6. 실제로 필요한 이미지, 아이콘, 폰트
7. 기존 코드에서 재사용할 부분
8. 수정할 파일과 수정하지 않을 파일

디자인에서 직접 확인한 내용과 추정한 내용을 구분해 주세요.
모르는 내용을 임의로 결정하지 말고 질문 목록으로 남겨 주세요.
아직 코드는 수정하지 마세요.

공통 작업 규칙:
- PRD.md와 프로젝트 지침 파일을 먼저 읽어 주세요.
- 작업 전 기존 폴더 구조, 공통 스타일, 에셋, 패키지를 확인해 주세요.
- 확인된 사실과 추정을 구분해 주세요.
- 디자인에 없는 기능과 에셋을 임의로 만들지 마세요.
- 기존 코드와 공통 컴포넌트를 우선 재사용해 주세요.
- CSS class와 HTML id는 snake_case, JavaScript 변수와 함수는 camelCase로 작성해 주세요.
- 수정 후 360px, 768px, 1280px 화면과 키보드 포커스, 콘솔 오류를 확인해 주세요.
- 결과에는 변경 파일, 구현 내용, 검증 결과, 확인하지 못한 부분을 구분해 작성해 주세요.

Figma MCP로 아래 디자인을 확인해 주세요.

대상: [Figma 프레임 링크]

다음 순서를 지켜 주세요.

1. metadata로 프레임과 레이어 구조를 확인합니다.
2. screenshot으로 실제 화면을 확인합니다.
3. variable 정의로 색상, 간격, 타이포 토큰을 확인합니다.
4. design context로 구현에 필요한 속성을 확인합니다.
5. 실제 이미지와 아이콘 에셋을 확인하고 제공된 방식으로 가져옵니다.
6. 현재 프로젝트의 HTML, CSS, JavaScript 구조에 맞는 구현 계획을 작성합니다.

MCP가 보여주는 React 또는 Tailwind 예시를 그대로 사용하지 마세요.
디자인 스크린샷을 배경 이미지로 붙이지 마세요.
모든 요소를 absolute로 배치하지 마세요.
확인한 값과 확인하지 못한 값을 구분해서 보고해 주세요.

공통 작업 규칙:
- PRD.md와 프로젝트 지침 파일을 먼저 읽어 주세요.
- 작업 전 기존 폴더 구조, 공통 스타일, 에셋, 패키지를 확인해 주세요.
- 확인된 사실과 추정을 구분해 주세요.
- 디자인에 없는 기능과 에셋을 임의로 만들지 마세요.
- 기존 코드와 공통 컴포넌트를 우선 재사용해 주세요.
- CSS class와 HTML id는 snake_case, JavaScript 변수와 함수는 camelCase로 작성해 주세요.
- 수정 후 360px, 768px, 1280px 화면과 키보드 포커스, 콘솔 오류를 확인해 주세요.
- 결과에는 변경 파일, 구현 내용, 검증 결과, 확인하지 못한 부분을 구분해 작성해 주세요.

[화면 이름]의 공통 구조와 기본 레이아웃을 구현해 주세요.

구현 범위:
- 시맨틱 HTML 구조
- 기존 디자인 토큰을 사용한 기본 CSS
- 360px, 768px, 1280px 반응형 배치
- 실제 로고, 이미지, 아이콘, 폰트 연결
- 기본, hover, focus-visible, disabled 상태

이번 단계에서는 디자인에 없는 인터랙션이나 새 기능을 추가하지 마세요.
기존 헤더, 푸터, 버튼, 카드가 있으면 재사용해 주세요.
구현 후 브라우저 화면을 디자인 시안과 비교하고 차이를 보고해 주세요.

공통 작업 규칙:
- PRD.md와 프로젝트 지침 파일을 먼저 읽어 주세요.
- 작업 전 기존 폴더 구조, 공통 스타일, 에셋, 패키지를 확인해 주세요.
- 확인된 사실과 추정을 구분해 주세요.
- 디자인에 없는 기능과 에셋을 임의로 만들지 마세요.
- 기존 코드와 공통 컴포넌트를 우선 재사용해 주세요.
- CSS class와 HTML id는 snake_case, JavaScript 변수와 함수는 camelCase로 작성해 주세요.
- 수정 후 360px, 768px, 1280px 화면과 키보드 포커스, 콘솔 오류를 확인해 주세요.
- 결과에는 변경 파일, 구현 내용, 검증 결과, 확인하지 못한 부분을 구분해 작성해 주세요.

[화면 이름]에 디자인과 PRD에 명시된 인터랙션만 구현해 주세요.

필요한 동작:
- [메뉴 열기와 닫기]
- [탭 또는 필터 선택]
- [폼 입력과 오류 표시]
- [슬라이더 또는 스크롤 모션]

먼저 CSS와 기본 JavaScript로 구현 가능한지 확인해 주세요.
외부 라이브러리는 package.json에 이미 있거나 PRD에 명시된 경우에만 사용해 주세요.
모션이 없어도 콘텐츠와 기능을 사용할 수 있어야 하며 prefers-reduced-motion을 반영해 주세요.
키보드 Enter, Space, Tab으로 주요 동작을 확인해 주세요.

공통 작업 규칙:
- PRD.md와 프로젝트 지침 파일을 먼저 읽어 주세요.
- 작업 전 기존 폴더 구조, 공통 스타일, 에셋, 패키지를 확인해 주세요.
- 확인된 사실과 추정을 구분해 주세요.
- 디자인에 없는 기능과 에셋을 임의로 만들지 마세요.
- 기존 코드와 공통 컴포넌트를 우선 재사용해 주세요.
- CSS class와 HTML id는 snake_case, JavaScript 변수와 함수는 camelCase로 작성해 주세요.
- 수정 후 360px, 768px, 1280px 화면과 키보드 포커스, 콘솔 오류를 확인해 주세요.
- 결과에는 변경 파일, 구현 내용, 검증 결과, 확인하지 못한 부분을 구분해 작성해 주세요.

코드를 수정하기 전에 현재 구현을 검수해 주세요.

검수 기준:
1. 디자인 시안과 레이아웃, 간격, 정렬, 색상, 폰트 비교
2. 360px, 768px, 1280px의 잘림, 겹침, 가로 스크롤
3. 모든 링크, 버튼, 폼, 메뉴의 실제 동작
4. hover, focus, active, disabled 상태
5. 로딩, 빈 상태, 오류 상태
6. 키보드 Tab 순서와 focus-visible
7. 의미 있는 이미지 alt와 폼 label
8. 모션 감소 설정
9. 콘솔 오류와 임시 console.log
10. 임의 기능, 임의 에셋, 존재하지 않는 URL 추가 여부

문제마다 재현 위치, 원인, 영향, 수정할 파일을 적어 주세요.
확인하지 못한 항목은 통과로 표시하지 마세요.

공통 작업 규칙:
- PRD.md와 프로젝트 지침 파일을 먼저 읽어 주세요.
- 작업 전 기존 폴더 구조, 공통 스타일, 에셋, 패키지를 확인해 주세요.
- 확인된 사실과 추정을 구분해 주세요.
- 디자인에 없는 기능과 에셋을 임의로 만들지 마세요.
- 기존 코드와 공통 컴포넌트를 우선 재사용해 주세요.
- CSS class와 HTML id는 snake_case, JavaScript 변수와 함수는 camelCase로 작성해 주세요.
- 수정 후 360px, 768px, 1280px 화면과 키보드 포커스, 콘솔 오류를 확인해 주세요.
- 결과에는 변경 파일, 구현 내용, 검증 결과, 확인하지 못한 부분을 구분해 작성해 주세요.

방금 검수에서 확인한 문제만 수정해 주세요.

수정 대상:
- [문제 1]
- [문제 2]
- [문제 3]

관련 없는 리팩터링이나 디자인 변경은 하지 마세요.
각 문제를 재현하는 테스트가 가능하면 먼저 실패하는 테스트를 작성해 주세요.
수정 후 같은 조건으로 다시 검증하고 전후 결과를 비교해 주세요.
남아 있는 문제와 확인하지 못한 부분을 숨기지 말고 보고해 주세요.

공통 작업 규칙:
- PRD.md와 프로젝트 지침 파일을 먼저 읽어 주세요.
- 작업 전 기존 폴더 구조, 공통 스타일, 에셋, 패키지를 확인해 주세요.
- 확인된 사실과 추정을 구분해 주세요.
- 디자인에 없는 기능과 에셋을 임의로 만들지 마세요.
- 기존 코드와 공통 컴포넌트를 우선 재사용해 주세요.
- CSS class와 HTML id는 snake_case, JavaScript 변수와 함수는 camelCase로 작성해 주세요.
- 수정 후 360px, 768px, 1280px 화면과 키보드 포커스, 콘솔 오류를 확인해 주세요.
- 결과에는 변경 파일, 구현 내용, 검증 결과, 확인하지 못한 부분을 구분해 작성해 주세요.