배포된 백엔드 api와 연결

.env.example

@@ -1,3 +1,3 @@
 # Copy this file to .env.local and set variables as needed.
-# If unset, Next.js rewrites fall back to http://127.0.0.1:8000.
-BACKEND_URL=
+# If unset, frontend requests default to https://primerflow-be.onrender.com.
+NEXT_PUBLIC_API_BASE_URL=

app/page.tsx

@@ -6,7 +6,6 @@ import {
     analyzeGenome,
     type AnalyzeRequestInput,
 } from "@/services/analysisService";
-import { demoGenome } from "@/lib/mocks/demoGenome";
 import type { GenomeData, PrimerDesignResponseUI } from "@/types";
 import { useViewStore } from "@/store/useViewStore";
 import {
@@ -31,6 +30,28 @@ const toGenomeDataFromResponse = (response: PrimerDesignResponseUI | null): Geno
     return { length, tracks };
 };
 
+const DEFAULT_PREVIEW_GENOME: GenomeData = {
+    length: 12000,
+    tracks: [
+        {
+            id: "preview-primer-candidates",
+            name: "Primer 후보군",
+            height: 28,
+            features: [
+                { id: "p-01", start: 400, end: 1200, label: "P-01", color: "#2563eb" },
+                { id: "p-02", start: 1800, end: 2600, label: "P-02", color: "#0ea5e9" },
+                { id: "p-03", start: 3200, end: 4300, label: "P-03", color: "#22c55e" },
+            ],
+        },
+        {
+            id: "preview-target-region",
+            name: "Target 구간",
+            height: 18,
+            features: [{ id: "amplicon", start: 1500, end: 5200, label: "Amplicon", color: "#f97316" }],
+        },
+    ],
+};
+
 export default function Home() {
     const viewState = useViewStore((state) => state.viewState);
     const setViewState = useViewStore((state) => state.setViewState);
@@ -118,7 +139,7 @@ export default function Home() {
     const handleBack = () => handleStepChange(step - 1);
     const isLastStep = step === totalSteps;
 
-    const previewGenome = demoGenome;
+    const previewGenome = DEFAULT_PREVIEW_GENOME;
     const trackCount = previewGenome.tracks.length;
     const featureCount = previewGenome.tracks.reduce(
         (count, track) => count + track.features.length,
@@ -131,16 +152,16 @@ export default function Home() {
             return;
         }
 
-        const targetSeq =
-            validation.normalizedSequence && validation.normalizedSequence.trim().length > 0
-                ? validation.normalizedSequence.trim()
-                : "ATGCGTACGTAGCTAGCTAGCTAGCTAATGCGTACGTAGCTAGCTAGCTAGCTA";
+        const targetSeq = validation.normalizedSequence?.trim() ?? "";
+        if (!targetSeq) {
+            setErrorMessage("Template sequence is required.");
+            return;
+        }
 
         const payload: AnalyzeRequestInput = {
             target_sequence: targetSeq,
             species: "Homo sapiens",
             analysis_type: "primer_generation",
-            notes: "UI mock request while backend is offline",
             product_size_min: 100,
             product_size_max: 300,
             tm_min: 57,

components/steps/Step1TemplateEssential.tsx

@@ -324,7 +324,7 @@ export default function Step1TemplateEssential({
                         <p className="mt-2 text-[11px] text-slate-500">
                             A, T, G, C 이외 문자는 입력 시 자동으로 제거됩니다.
                             <br />
-                            Paste 버튼, Ctrl+V, Upload FASTA에서는 제거 전에 확인을 요청합니다.
+                            Paste 버튼, Ctrl+V, Upload as file에서는 제거 전에 확인을 요청합니다.
                         </p>
                         {validationMessage && (
                             <p className="mt-2 text-xs text-red-300">{validationMessage}</p>
@@ -334,7 +334,7 @@ export default function Step1TemplateEssential({
                         <input
                             ref={fileInputRef}
                             type="file"
-                            accept=".fa,.fasta,.txt"
+                            accept=".fa,.fasta,.fna,.txt"
                             className="hidden"
                             onChange={handleFileChange}
                         />
@@ -343,7 +343,7 @@ export default function Step1TemplateEssential({
                             className="flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-bold text-slate-300 hover:text-white hover:bg-slate-800 transition-colors border border-transparent hover:border-slate-700"
                             onClick={handleUploadClick}
                         >
-                            Upload FASTA
+                            Upload as file
                         </button>
                         <button
                             type="button"

next.config.ts

@@ -1,19 +1,5 @@
 import type { NextConfig } from "next";
 
-const nextConfig: NextConfig = {
-    // ... 기타 설정들 ...
-
-    async rewrites() {
-        // BACKEND_URL 값이 없으면 로컬(8000)로 연결
-        const backendUrl = process.env.BACKEND_URL || "http://127.0.0.1:8000";
-
-        return [
-            {
-                source: "/api/v1/:path*",
-                destination: `${backendUrl}/:path*`, // 여기를 변수로 변경
-            },
-        ];
-    },
-};
+const nextConfig: NextConfig = {};
 
 export default nextConfig;

src/lib/api/client.ts

@@ -1,13 +1,14 @@
 import axios from "axios";
 
+const DEFAULT_API_BASE_URL = "https://primerflow-be.onrender.com";
+const apiBaseUrl =
+  process.env.NEXT_PUBLIC_API_BASE_URL?.trim() || DEFAULT_API_BASE_URL;
+
 export const apiClient = axios.create({
-  // 모든 API 호출을 /api/v1 이하 상대 경로로 강제합니다.
-  baseURL: "/api/v1",
+  baseURL: apiBaseUrl,
   headers: {
     "Content-Type": "application/json",
   },
-  // 필요한 경우 쿠키 공유를 위해 아래 옵션을 사용하세요.
-  // withCredentials: true,
 });
 
 export const api = apiClient;

src/lib/api/primer.ts

@@ -13,7 +13,7 @@ export const postDesignPrimers = async (
   payload: PrimerDesignRequest,
 ): Promise<PrimerDesignResponse> => {
   const response: AxiosResponse<PrimerDesignResponse> = await apiClient.post(
-    "/primer/design",
+    "/design",
     payload,
   );
 

src/services/analysisService.ts

@@ -52,11 +52,11 @@ export interface AnalyzeRequestInput {
 
 // Adapter: flat UI -> official request schema
 const toPrimerDesignRequest = (input: AnalyzeRequestInput): PrimerDesignRequest => {
-  const seq = input.target_sequence || input.templateSequence || "ATGC";
+  const seq = input.target_sequence || input.templateSequence || "";
   const searchFrom = input.search_start ?? 1;
   const searchTo =
     input.search_end ??
-    searchFrom + (seq?.length || 1000);
+    searchFrom + Math.max(seq.length - 1, 0);
 
   return {
     basic: {
@@ -224,7 +224,7 @@ export const analyzeGenome = async (
 
   console.log("🚀 Sending Payload:", payload);
 
-  const response = await api.post<PrimerDesignResponse>("/primer/design", payload);
+  const response = await api.post<PrimerDesignResponse>("/design", payload);
   const rawData = response.data;
 
   const transformed = toUiResponse(rawData);