5, 6, 7, 8주차 활동

.env.example

@@ -0,0 +1,11 @@
+# Copy this file to .env.local and set variables as needed.
+#
+# Backend origin used by Next.js rewrite proxy.
+# - Local development default: http://127.0.0.1:8000
+# - Production: BACKEND_URL must be explicitly set.
+BACKEND_URL=
+#
+# Frontend axios base URL.
+# Keep this unset to use "/api" (same-origin via Next.js rewrite).
+# Set only when you intentionally bypass the rewrite proxy.
+NEXT_PUBLIC_API_BASE_URL=

.github/workflows/ci.yml

@@ -0,0 +1,73 @@
+name: CI
+
+on:
+  pull_request:
+    branches:
+      - main
+      - master
+      - develop
+
+concurrency:
+  group: ci-${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  lint-and-build:
+    name: Lint & Build
+    runs-on: ubuntu-latest
+
+    env:
+      NEXT_TELEMETRY_DISABLED: "1"
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Inject BACKEND_URL
+        shell: bash
+        env:
+          BACKEND_URL_PRODUCTION: ${{ secrets.BACKEND_URL_PRODUCTION }}
+          BACKEND_URL_STAGING: ${{ secrets.BACKEND_URL_STAGING }}
+        run: |
+          # fork PR은 보안상 secrets가 전달되지 않음 → 공개 URL(또는 더미)로 빌드만 통과
+          if [ "${{ github.event.pull_request.head.repo.fork }}" = "true" ]; then
+            echo "BACKEND_URL=https://primerflow-be.onrender.com" >> "$GITHUB_ENV"
+            exit 0
+          fi
+
+          if [ "${{ github.base_ref }}" = "main" ] || [ "${{ github.base_ref }}" = "master" ]; then
+            selected="$BACKEND_URL_PRODUCTION"
+            key="BACKEND_URL_PRODUCTION"
+          else
+            selected="$BACKEND_URL_STAGING"
+            key="BACKEND_URL_STAGING"
+          fi
+
+          if [ -z "$selected" ]; then
+            echo "::error::Missing secret $key"
+            echo "::error::Set it in Settings -> Secrets and variables -> Actions -> Repository secrets"
+            exit 1
+          fi
+
+          echo "BACKEND_URL=$selected" >> "$GITHUB_ENV"
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Test
+        run: npm test
+
+      - name: Build
+        run: npm run build

.gitignore

@@ -32,6 +32,7 @@ yarn-error.log*
 
 # env files (can opt-in for committing if needed)
 .env*
+!.env.example
 
 # vercel
 .vercel

README.md

@@ -73,13 +73,22 @@ git clone [https://github.com/Seq-Lab/PrimerFlow-FE.git](https://github.com/Seq-
 cd PrimerFlow-FE
 
 # 3. 패키지 설치
-npm install
+npm ci
 
 # 4. 환경 변수 설정 (.env.local 생성)
-# (백엔드 API 주소 설정 예시)
-# echo "NEXT_PUBLIC_API_URL=http://localhost:8000" > .env.local
+- `.env.example` 파일을 복사하여 `.env.local`을 생성하세요.
+- Next.js `rewrites`에서 백엔드 목적지는 `BACKEND_URL`이 설정되면 해당 값을, 없으면 `http://127.0.0.1:8000`(로컬)로 사용합니다.
+- 로컬 기본값(127.0.0.1:8000)을 사용하려면 `.env.local`을 비워 두어도 무방합니다.
+- 다른 백엔드로 프록시해야 한다면 `.env.local`에 아래처럼 설정하세요:
+
+```env
+BACKEND_URL=[https://api.example.com](https://api.example.com)
+```
+
+- Vercel 등 배포 환경에서도 동일한 환경 변수를 프로젝트 환경 변수로 추가하면 됩니다.
 
 # 5. 개발 서버 실행
+```
 npm run dev
 ```
 
@@ -97,7 +106,7 @@ npm run dev
 - AI 활용: Gemini로 자세한 내용 프롬프트로 작성, codex로 프로젝트 아키텍처 및 스켈레톤 코드 작성.
 - 다음 주 계획: page.tsx, layout.tsx 구현, 목 데이터 출력 해보기
 
-### Week 2 (25.12.29 - 26.01.04)
+### Week 2 (25.12.29 - 26.01.04)z`
 - 작업 내역: 
   - 더미 데이터로 페이지에 연결
   - 뷰 상태(Zustand)와 줌·패닝 동작을 정돈
@@ -136,3 +145,83 @@ npm run dev
 
     ![week3_screenshot#4.png](docs/screenshots/week3_screenshot%234.png)
 - 다음 주 계획: 실제 데이터 연동, GenomeCanvas 미리보기·컨트롤 마무리.
+
+### Week 4 (26.01.12 ~ 26.01.18)
+- 작업 내역:
+  - 백엔드 모킹 서비스 구현 및 결과 시각화
+  - Step 1 시퀀스 입력 편의성 개선
+  - 컴포넌트 아키텍처 개선 및 UI 업데이트
+- AI 활용:
+  - codex로 캔버스가 표시되는 모달 구현
+  - paste등 버튼 기능 구현
+- 완료 기능:
+  - 목데이터를 모달을 이용하여 표시
+  - Step1에서 DNA서열 입력 시, fasta파일 업로드, 클립보드에서 붙여넣기 지원
+
+- 테스트 결과:
+  - 목데이터 표시 확인
+
+    ![week4_screenshot#1.png](docs/screenshots/week4_screenshot%231.png)
+- 다음 주 계획: 완성된 백엔드와 연동하여 결과 표시 및 디버깅
+
+### Week 5 (26.01.19 ~ 26.01.25)
+- 작업 내역: 프론트엔드-백엔드 간 API 통신 규격(Spec) 정의 및 연동 구현
+- AI 활용: codex 이용하여 복잡한 Nested Object을 UI 전용 상태(Flat Object)로 변환하는 어댑터 패턴 코드 자동 생성
+- 완료 기능: 
+  - 프라이머 설계 요청(Request) 프로세스 구현: 입력값 → 어댑터 → API 호출 흐름 완성
+  - 결과 모달(Result Modal) 데이터 바인딩: Mock 데이터를 활용하여 캔버스 및 리스트에 분석 결과 렌더링
+- 다음 주 계획: 사용자 입력 데이터(DNA 서열)에 대한 전처리(Sanitization) 및 유효성 검증 로직 구현
+
+
+### Week 6 (26.01.26 ~ 26.02.01)
+- 작업 내역: 
+  - 대용량 데이터(10,000bp 이상) 렌더링 성능 최적화를 위한 뷰포트 탐색 로직 개선
+  - 캔버스 UI 스크롤 조작 시 배경이 함께 밀리는 버그(Jittering) 수정 및 레이어 고정 처리
+- AI 활용:
+  - codex를 이용하여 binary search 알고리즘 로직 검증 및 최적화
+  - gemini로 현재 발생하고 있는 상황을 정확하게 설명하여 해결을 요구하는 프롬프트 작성 및 codex를 이용한 수정
+- 완료 기능:
+  - Binary Search 렌더링 최적화: $O(N)$ 탐색을 $O(\log N)$으로 개선하여 High BP 구간 프레임 드랍 해결
+  - Canvas Background Fix: 스크롤 이벤트 시 배경 이미지가 고정되도록 렌더링 로직 수정
+- 다음 주 계획:
+  - 입력 데이터 validator 구현
+
+### Week 7 (26.02.02 ~ 26.02.08)
+- 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.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 활용:
+- 완료 기능:
+- 다음 주 계획:
+- 작업 내역: 

app/globals.css

@@ -45,6 +45,115 @@
   font-display: swap;
 }
 
+.poppins-thin {
+  font-family: "Poppins", sans-serif;
+  font-weight: 100;
+  font-style: normal;
+}
+
+.poppins-extralight {
+  font-family: "Poppins", sans-serif;
+  font-weight: 200;
+  font-style: normal;
+}
+
+.poppins-light {
+  font-family: "Poppins", sans-serif;
+  font-weight: 300;
+  font-style: normal;
+}
+
+.poppins-regular {
+  font-family: "Poppins", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+.poppins-medium {
+  font-family: "Poppins", sans-serif;
+  font-weight: 500;
+  font-style: normal;
+}
+
+.poppins-semibold {
+  font-family: "Poppins", sans-serif;
+  font-weight: 600;
+  font-style: normal;
+}
+
+.poppins-bold {
+  font-family: "Poppins", sans-serif;
+  font-weight: 700;
+  font-style: normal;
+}
+
+.poppins-extrabold {
+  font-family: "Poppins", sans-serif;
+  font-weight: 800;
+  font-style: normal;
+}
+
+.poppins-black {
+  font-family: "Poppins", sans-serif;
+  font-weight: 900;
+  font-style: normal;
+}
+
+.poppins-thin-italic {
+  font-family: "Poppins", sans-serif;
+  font-weight: 100;
+  font-style: italic;
+}
+
+.poppins-extralight-italic {
+  font-family: "Poppins", sans-serif;
+  font-weight: 200;
+  font-style: italic;
+}
+
+.poppins-light-italic {
+  font-family: "Poppins", sans-serif;
+  font-weight: 300;
+  font-style: italic;
+}
+
+.poppins-regular-italic {
+  font-family: "Poppins", sans-serif;
+  font-weight: 400;
+  font-style: italic;
+}
+
+.poppins-medium-italic {
+  font-family: "Poppins", sans-serif;
+  font-weight: 500;
+  font-style: italic;
+}
+
+.poppins-semibold-italic {
+  font-family: "Poppins", sans-serif;
+  font-weight: 600;
+  font-style: italic;
+}
+
+.poppins-bold-italic {
+  font-family: "Poppins", sans-serif;
+  font-weight: 700;
+  font-style: italic;
+}
+
+.poppins-extrabold-italic {
+  font-family: "Poppins", sans-serif;
+  font-weight: 800;
+  font-style: italic;
+}
+
+.poppins-black-italic {
+  font-family: "Poppins", sans-serif;
+  font-weight: 900;
+  font-style: italic;
+}
+
+
 :root {
   --background: #060b16;
   --foreground: #e2e8f0;

app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { JetBrains_Mono, Space_Grotesk } from "next/font/google";
+import { JetBrains_Mono, Poppins, Space_Grotesk } from "next/font/google";
 import SiteFooter from "@/components/ui/Footer";
 import Providers from "./providers";
 import "./globals.css";
@@ -14,6 +14,13 @@ const mono = JetBrains_Mono({
   subsets: ["latin"],
 });
 
+const poppins = Poppins({
+  variable: "--font-poppins",
+  subsets: ["latin"],
+  weight: ["400", "600", "700"],
+  display: "swap",
+});
+
 export const metadata: Metadata = {
   title: "PrimerFlow - Primer Design Workbench",
   description: "Dark-mode playground for primer visualization and tuning.",
@@ -28,7 +35,7 @@ export default function RootLayout({
     <html lang="ko">
       <head>
       </head>
-      <body className={`${display.variable} ${mono.variable} antialiased`}>
+      <body className={`${display.variable} ${mono.variable} ${poppins.variable} antialiased`}>
         <Providers>
           <div className="min-h-screen flex flex-col">
             <div className="flex-1">{children}</div>