docs: 5 6 7 주차 프롬프트 정리

docs/prompts/5주차/adapter_pattern_and_mock_response_flow.md

@@ -0,0 +1,36 @@
+### 1. 배경 및 목적
+ - 프론트엔드의 폼 입력 상태(Flat Object)와 백엔드 API가 요구하는 복잡한 중첩 구조(Nested Object) 간의 규격 차이를 해결하기 위함.
+ - Mock 데이터를 활용하여 분석 결과를 시각화하는 모달(Modal) 뷰에 실제 데이터 바인딩 파이프라인을 구축.
+
+### 2. 프롬프트 (User Input)
+```aiignore
+Phase 1: 프론트-백엔드 데이터 규격 변환 (Adapter 로직)
+[요구사항 정의]
+프론트엔드의 Zustand 스토어에 저장된 평면적인(Flat) 입력 데이터들을 백엔드 FastAPI 규격에 맞는 중첩(Nested) JSON 형태로 변환하는 Adapter 함수를 작성해 줘.
+요구사항:
+1. 입력 데이터 중 `Range`, `PrimerDesignRequest` 타입을 백엔드 스펙에 맞게 매핑할 것.
+2. 타입 안정성을 보장하고, 누락된 필드가 없도록 TypeScript 인터페이스를 기반으로 작성할 것.
+
+Phase 2: Mock API 클라이언트 구축 및 Result Modal 연동
+[데이터 바인딩 요청]
+만들어진 Adapter를 거쳐 생성된 Request 객체를 서버로 전송하는 API 호출 함수(`lib/api/primer.ts`)를 만들어 줘.
+아직 실제 서버가 없으니, 지연 시간(Delay)을 시뮬레이션하고 Mock 데이터를 반환하도록 구현해 줘.
+반환된 결과를 바탕으로, Result Modal 내의 캔버스와 결과 리스트 UI에 데이터가 렌더링되도록 연결해 줘.
+```
+
+### 3. AI 응답 요약 (AI Output)
+ - src/lib/api/adapters.ts 생성:
+   - UI 상태를 백엔드 DTO로 변환하는 mapStoreToPrimerRequest 함수 구현.
+
+ - src/lib/api/primer.ts 모킹:
+   - axios 혹은 fetch 기반의 API 통신 뼈대 작성.
+   - setTimeout을 활용한 네트워크 지연 시뮬레이션 및 PrimerDesignResponse 타입에 맞춘 더미(Mock) 데이터 반환 로직 추가.
+
+ - ResultModal 컴포넌트 수정:
+
+반환된 Mock 데이터를 React 상태로 받아와 내부 캔버스와 리스트 컴포넌트로 Prop 전달.
+
+4. 결과 및 적용 (Result)
+   적용 파일: src/lib/api/adapters.ts, src/lib/api/primer.ts, components/PrimerResultModal.tsx
+
+주요 결과: 프라이머 설계 요청(Request) 프로세스(입력값 → 어댑터 → API 호출)의 전체 흐름 완성. Mock 데이터를 활용해 결과 화면 시각화 성공.

docs/prompts/6주차/canvas_performance_and_jitter_fix.md.md

@@ -0,0 +1,42 @@
+### 1. 배경 및 목적
+ - 10,000bp 이상의 대용량 DNA 서열 데이터를 캔버스에 렌더링할 때 발생하던 프레임 드랍(렉) 이슈를 완화.
+ - 캔버스 줌/패닝 시 배경 레이어가 함께 밀려 보이는 Jittering 현상을 줄여 UX 안정화.
+
+### 2. 프롬프트 (User Input)
+```
+Phase 1: 대용량 데이터 렌더링 성능 최적화 (O(log N))
+[알고리즘 구현 요청]
+전체 트랙을 매번 순회(O(N))하지 않고, 뷰포트에 보이는 구간의 시작/끝 인덱스를
+이분 탐색으로 빠르게 계산해 렌더링 범위를 줄여줘.
+
+Phase 2: Jittering 버그(배경 밀림 현상) 수정
+[이슈 트러블슈팅]
+캔버스 렌더링 시 배경이 스크롤/패닝 영향으로 같이 움직여 보이지 않도록,
+좌표계 변환과 배경 렌더링 순서를 분리해 화면 기준으로 안정적으로 그려줘.
+```
+
+### 3. AI 응답 요약 (AI Output)
+ - `src/lib/algorithms/visibleRange.ts`:
+   - `createPrefixSums`, `findItemIndexByPosition`(Binary Search), `getVisibleRange` 구현.
+   - 누적 높이(prefix sums) 기반으로 보이는 트랙 인덱스 범위(`startIndex ~ endIndex`) 계산.
+
+ - `hooks/useVisibleRange.ts`:
+   - 스크롤 위치/뷰포트 높이를 받아 가시 범위를 계산하는 커스텀 훅 제공.
+   - `onScroll`, `setScrollTop`, `findIndexByPosition` 유틸 포함.
+
+ - 캔버스 렌더링 로직 정리:
+   - `components/canvas/GenomeCanvas.tsx`에서 `setTransform` + `save()/restore()`로 변환 경계 분리.
+   - `components/steps/Step4SpecificityPreview.tsx`에서 배경/그리드와 트랙 렌더링 좌표 처리를 분리하고,
+     `getVisibleRange`를 사용해 보이는 트랙만 그리도록 적용.
+
+### 4. 결과 및 적용 (Result)
+ - 적용 파일:
+   - `src/lib/algorithms/visibleRange.ts`
+   - `hooks/useVisibleRange.ts`
+   - `components/canvas/GenomeCanvas.tsx`
+   - `components/steps/Step4SpecificityPreview.tsx`
+   - `tests/visibleRange.test.ts`
+
+ - 주요 결과:
+   - 가시 범위 계산을 이분 탐색 기반으로 개선하여 대용량 데이터에서 렌더링 부담 완화.
+   - 배경/레이어 좌표 처리 분리로 줌/패닝 시 시각적 떨림(Jittering) 현상 완화.

docs/prompts/7주차/sequence_input_normalization.md

@@ -0,0 +1,90 @@
+# Step1 시퀀스 입력 정규화 및 검증 UX 개선
+
+## 1. 배경 및 목적
+
+- Step1 입력에서 `atgc` 대소문자 처리, 비정상 문자(`N`, 숫자, 특수문자) 정리, 붙여넣기/업로드 동의 UX를 일관되게 만들기 위해 파서/입력 이벤트 로직을 개선.
+
+## 2. 프롬프트 (User Input)
+
+```text
+Phase 1: 염기서열(ATGC) 입력 파서 및 기본 UX 구현
+[요구사항 정의]
+src/lib/parsers 디렉토리 내에 Step 1에서 사용할 DNA 염기서열 입력 파싱 및 검증 로직을 구현해 주세요.
+
+자동 대문자 변환: 입력된 'atgc' 문자열을 대소문자 구분 없이 자동으로 대문자로 변환하여 상태를 업데이트해야 합니다.
+
+실시간 Sanitize: 입력 시점에서 ATGC 이외의 유효하지 않은 문자가 감지되면 즉시 필터링하여 제거하는 로직을 포함해 주세요.
+
+사용자 안내(UX): Caps Lock이 꺼져 있어도 대문자로 강제 변환되거나 예외 문자가 사라지는 동작에 사용자가 당황하지 않도록, 입력창 하단에 해당 동작을 설명하는 작은 안내 캡션(Caption) 텍스트를 추가해 주세요.
+
+Phase 2: 빌드 에러 트러블슈팅 및 로직 수정
+[이슈 해결 요청]
+Next.js 환경에서 Turbopack과 관련된 빌드 에러가 발생하여 Job이 실패했습니다.
+
+제공된 에러 로그를 기반으로 ./app/page.tsx (약 12번 라인) 및 ./components/steps/Step1TemplateEssential.tsx (약 12번 라인)의 모듈 Import 경로를 검토해 주세요.
+
+지정된 경로에 실제 모듈이나 파일이 존재하는지 확인하고, 누락되거나 잘못된 참조가 있다면 수정해 주세요.
+
+
+[로직 결함 수정 및 대안 제시]
+현재 구현된 파서 로직에서 긴 문자열을 한 번에 붙여넣기(Paste)할 때, 유효한 문자까지 과도하게 삭제되는 이슈가 확인되었습니다.
+
+해당 문자열 손실 문제를 해결할 수 있는 최적화된 Sanitize 접근 방식을 2~3가지 제안해 주세요.
+
+제안해 주신 솔루션 중 1번 방식을 채택하여 코드를 수정해 주시고, 클라이언트에서 백엔드로 데이터를 전송하기 직전에 최종 문자열이 '대문자 ATGC'로만 구성되어 있는지 다시 한번 엄격하게 확인하는 최종 검증(Validation) 로직을 추가해 주세요.
+
+Phase 3: 예외 케이스 처리 및 대화상자(Dialog) 연동
+[UX 개선 및 예외 문자 처리 로직 보강]
+단순 텍스트 입력과 달리, .fasta 파일 업로드나 대량 텍스트 붙여넣기 시 미확인 염기(예: 'N')가 포함되어 있을 수 있습니다. 무조건적인 삭제보다는 사용자 확인을 거치는 방향으로 흐름을 개선하고자 합니다.
+
+유효하지 않은 문자가 감지되었을 때 즉시 삭제하지 않고, "이상 문자를 제거하시겠습니까?"를 묻는 사용자 동의 대화상자(Confirmation Dialog)를 띄우도록 로직을 수정해 주세요.
+
+이 대화상자 호출 로직은 다음 세 가지 이벤트에 모두 동일하게 적용되어야 합니다:
+
+UI 상의 'Paste' 버튼 클릭 시
+
+'Upload FASTA' 기능을 통한 파일 로드 시
+
+입력 텍스트 영역(Textarea) 내에서의 Ctrl + V 키보드 이벤트 발생 시
+
+Phase 4: 이벤트 핸들러 리팩토링 및 로직 최적화
+[코드 최적화]
+이전 단계들에서 추가된 검증 로직들로 인해 중복된 코드가 발생하여, 컴포넌트의 상태 관리 로직을 다음과 같이 정리하고자 합니다.
+
+handleTextareaChange 이벤트 핸들러 내부에서 입력과 동시에 필터링이 이루어질 수 있도록 코드를 수정해 주세요.
+(예: updateSequence(sanitizeStep1TemplateSequenceInput(event.currentTarget.value)) 구조 활용)
+
+입력 단계에서 Sanitize가 보장됨에 따라, 폼 제출 시 작동하는 handleGenerate 함수 내의 불필요한 중복 검증 로직을 제거하고 전체 흐름을 단순화해 주세요.
+```
+
+## 3. AI 응답 요약 (AI Output)
+
+- `src/lib/parsers/step1TemplateSequence.ts` 생성/확장:
+    - `toUpperCaseAtgcOnly`, `sanitizeStep1TemplateSequenceInput`, `normalizeStep1TemplateSequence`
+    - `getInvalidStep1TemplateSequenceChar`, `getInvalidStep1TemplateSequenceChars`
+    - `isUppercaseAtgcOnlySequence`
+- `Step1TemplateEssential` 입력 처리 개선:
+    - 전체 문자열 sanitize 방식 → 입력 조각(chunk) sanitize 방식으로 전환.
+    - `Paste 버튼`, `Upload FASTA`, `Ctrl+V` 경로에서 비-ATGC 문자 발견 시 `window.confirm`으로 제거 동의 요청.
+    - `onBeforeInput` 기반 실시간 정리 + `onChange` sanitize 폴백 추가.
+    - 안내 문구 추가 및 2줄 줄바꿈 반영.
+- `app/page.tsx` 반영:
+    - Generate 직전 정규화 적용.
+    - “입력은 있었지만 정규화 후 빈 시퀀스” 차단 로직 추가.
+    - 중복 `ATGC-only` 재검증 블록 제거로 검증 단순화.
+    - Turbopack module-not-found 대응으로 parser import 경로 조정.
+- 테스트 추가/보강:
+    - `tests/step1TemplateSequence.test.ts`에 대문자화/정규화/invalid 문자 수집/검증 케이스 추가.
+
+## 4. 결과 및 적용 (Result)
+
+- 적용 파일:
+    - `src/lib/parsers/step1TemplateSequence.ts`
+    - `components/steps/Step1TemplateEssential.tsx`
+    - `app/page.tsx`
+    - `tests/step1TemplateSequence.test.ts`
+- 주요 결과:
+    - Step1 입력은 `ATGC` 중심으로 자동 정리되고, 가져오기(Paste/Ctrl+V/Upload) 시 비정상 문자 제거 전에 사용자 동의를 받음.
+    - paste 시 과도 삭제 문제를 조각 단위 처리로 완화.
+    - Generate 직전 유효 염기열 존재 여부를 보장.
+    - Turbopack import 에러 재발 가능성을 낮춤.