Docs: 8주차까지 프롬프트, 주간보고서 정리

README.md

@@ -187,13 +187,41 @@ npm run dev
   - 입력 데이터 validator 구현
 
 ### Week 7 (26.02.02 ~ 26.02.08)
-- 작업 내역: 
-- AI 활용: 
+- Step1 시퀀스 입력 정규화 및 검증 UX 개선
+  - ATGC 대소문자 처리 및 비정상 문자(N, 숫자, 특수문자) 필터링 로직 정립
+  - 붙여넣기 및 파일 업로드 시 사용자 동의 UX 일관성 확보
+
+- AI 활용:
+  - 4단계 프롬프트(Phase 1~4)를 구성하여 AI와 단계별 로직 고도화 및 트러블슈팅 진행
+  - Next.js Turbopack 빌드 에러(Import 경로 이슈) 분석 및 해결
+  - 대량 문자열 붙여넣기 시 발생하는 데이터 손실(과도한 삭제) 문제에 대한 최적화된 Sanitize 접근 방식 제안 및 적용
+
 - 완료 기능:
+  - 실시간 정규화: 입력 즉시 대소문자 구분 없이 대문자 ATGC로 자동 변환 및 실시간 필터링 적용 (안내 캡션 추가)
+  - 사용자 동의 기반 예외 처리: FASTA 파일 업로드, Paste 버튼, Ctrl+V 입력 시 비정상 문자가 감지되면 즉시 삭제하지 않고 window.confirm을 통한 사용자 제거 동의 로직 구현
+  - 로직 최적화: 조각(chunk) 단위 산니타이즈(Sanitize) 방식으로 전환하여 성능 개선 및 Generate 단계의 불필요한 중복 검증 로직 제거
+
 - 다음 주 계획:
+  - 목데이터 제거 및 배포된 백엔드와 연결
 
-### Week 8 (26.02.02 ~ 26.02.08)
+### Week 8 (26.02.09 ~ 26.02.15)
 - 작업 내역:
+  - 목데이터(Mock Data) 기반 응답 제거 및 실서버 응답 구조 기준으로 프론트 로직 전환
+  - 프라이머 분석 요청 파라미터를 백엔드 스펙에 맞게 정리하고 요청/응답 매핑 흐름 점검
+  - API 호출 실패 상황(네트워크/서버 오류)에 대한 사용자 메시지 노출 및 상태 처리 보강
 - AI 활용:
+  - Codex를 활용해 API 클라이언트 경로(`/api/design`)와 서비스 레이어 매핑 로직 검증
+  - 응답 데이터 변환(UI 전용 트랙/프라이머 후보 매핑) 과정의 타입 안정성 점검 및 개선
 - 완료 기능:
-- 다음 주 계획:
+  - 프라이머 설계 요청이 배포된 백엔드 API로 전송되도록 연동 완료
+  - 백엔드 응답을 Result Modal/Canvas에 렌더링 가능한 형태로 변환하여 표시
+  - Mock 의존 흐름을 제거하고 실데이터 기반 동작으로 전환
+- 다음 주 계획:
+  - Vercel 환경에 프론트엔드 배포 및 배포 환경 변수(API Base URL) 점검
+
+### Week 9 (26.02.16 ~ 26.02.22)
+- 작업 내역:
+- AI 활용:
+- 완료 기능:
+- 다음 주 계획:
+- 작업 내역: 

docs/prompts/8주차/mock_data_removal_and_backend_integration.md

@@ -0,0 +1,61 @@
+# Mock Data Removal and Deployed Backend Integration
+
+## 1. 배경 및 목적
+
+- Week 5~7까지 사용하던 Mock 기반 결과 흐름을 제거하고, 실제 배포된 백엔드 API 응답을 기준으로 프론트엔드 동작을 전환.
+- 프라이머 설계 요청(Request)부터 결과 모달(Canvas) 렌더링까지 실데이터 파이프라인을 안정화.
+- API 실패 상황(네트워크/서버 오류)에서도 사용자에게 명확한 에러 메시지를 노출하도록 예외 처리를 보강.
+
+## 2. 프롬프트 (User Input)
+
+```text
+Phase 1: Mock 제거 및 실서버 API 연동
+[요구사항]
+기존 Mock 응답(setTimeout 기반) 의존 로직을 제거하고, 배포된 백엔드 API를 호출하도록 프론트엔드 요청 흐름을 전환해 주세요.
+
+- API Base URL은 환경변수(NEXT_PUBLIC_API_BASE_URL)로 주입하고, 미지정 시 /api를 기본값으로 사용해 주세요.
+- 요청 엔드포인트는 /design으로 통일해 주세요.
+- 요청 payload는 UI의 flat 입력을 백엔드 스펙의 nested 구조로 변환해 주세요.
+
+Phase 2: 응답 매핑 및 UI 바인딩
+[데이터 변환]
+백엔드 응답(Genome/Candidate)을 Result Modal과 Canvas에서 바로 사용할 수 있는 UI 구조로 변환해 주세요.
+
+- length, tracks, candidate 좌표(start_bp/end_bp)를 UI 친화 형태로 매핑해 주세요.
+- 일부 필드가 누락된 경우에도 기본값으로 안전하게 동작하게 처리해 주세요.
+
+Phase 3: 오류 처리 및 사용자 피드백
+[UX 보강]
+요청 실패 시 에러를 콘솔에만 남기지 말고 화면에서도 확인 가능하도록 처리해 주세요.
+
+- 로딩/성공/실패 상태 전이를 명확히 관리해 주세요.
+- 빈 입력이나 무효 입력은 API 호출 전에 차단해 주세요.
+```
+
+## 3. AI 응답 요약 (AI Output)
+
+- `src/lib/api/client.ts`
+  - `NEXT_PUBLIC_API_BASE_URL` 기반 axios 클라이언트 구성.
+  - 기본값 `/api` 사용으로 로컬/배포 환경 모두 대응.
+- `src/services/analysisService.ts`
+  - `AnalyzeRequestInput`(flat) -> `PrimerDesignRequest`(nested) 변환 어댑터(`toPrimerDesignRequest`) 정리.
+  - 백엔드 응답을 UI 트랙/프라이머 후보 구조로 변환하는 `toUiResponse` 로직 적용.
+  - `analyzeGenome`에서 실제 `POST /design` 호출 후 UI 전용 응답 반환.
+- `app/page.tsx`
+  - Step1 검증 이후 `analyzeGenome` 호출하도록 Generate 흐름 연결.
+  - 로딩/에러/성공 상태를 모달 오픈과 함께 관리.
+- `components/PrimerResultModal.tsx`
+  - API 결과를 기반으로 캔버스 데이터 표시 및 결과 메타 정보 렌더링.
+
+## 4. 결과 및 적용 (Result)
+
+- 적용 파일:
+  - `src/lib/api/client.ts`
+  - `src/lib/api/primer.ts`
+  - `src/services/analysisService.ts`
+  - `app/page.tsx`
+  - `components/PrimerResultModal.tsx`
+- 주요 결과:
+  - Mock 의존 흐름을 제거하고, 배포된 백엔드 API 기반의 실데이터 파이프라인으로 전환.
+  - 프론트 입력 스키마와 백엔드 요청 스키마 간 매핑을 정리해 API 연동 안정성 개선.
+  - 실패 케이스에서 사용자 가시 에러 메시지를 제공해 디버깅 및 운영 대응성 향상.