diff --git a/README.md b/README.md index b177b66..ae435e9 100644 --- a/README.md +++ b/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 전용 트랙/프라이머 후보 매핑) 과정의 타입 안정성 점검 및 개선 - 완료 기능: -- 다음 주 계획: \ No newline at end of file + - 프라이머 설계 요청이 배포된 백엔드 API로 전송되도록 연동 완료 + - 백엔드 응답을 Result Modal/Canvas에 렌더링 가능한 형태로 변환하여 표시 + - Mock 의존 흐름을 제거하고 실데이터 기반 동작으로 전환 +- 다음 주 계획: + - Vercel 환경에 프론트엔드 배포 및 배포 환경 변수(API Base URL) 점검 + +### Week 9 (26.02.16 ~ 26.02.22) +- 작업 내역: +- AI 활용: +- 완료 기능: +- 다음 주 계획: +- 작업 내역: diff --git "a/docs/prompts/8\354\243\274\354\260\250/mock_data_removal_and_backend_integration.md" "b/docs/prompts/8\354\243\274\354\260\250/mock_data_removal_and_backend_integration.md" new file mode 100644 index 0000000..9b54b00 --- /dev/null +++ "b/docs/prompts/8\354\243\274\354\260\250/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 연동 안정성 개선. + - 실패 케이스에서 사용자 가시 에러 메시지를 제공해 디버깅 및 운영 대응성 향상.