ATGC 염기서열 입력 검증 및 자동 대문자 변환 기능 추가

app/page.tsx

@@ -9,6 +9,10 @@ import {
 import { demoGenome } from "@/lib/mocks/demoGenome";
 import type { GenomeData, PrimerDesignResponseUI } from "@/types";
 import { useViewStore } from "@/store/useViewStore";
+import {
+    getInvalidStep1TemplateSequenceChar,
+    normalizeStep1TemplateSequence,
+} from "../src/lib/parsers/step1TemplateSequence";
 import Step1TemplateEssential from "@/components/steps/Step1TemplateEssential";
 import Step2PrimerProperties from "@/components/steps/Step2PrimerProperties";
 import Step3BindingLocation from "@/components/steps/Step3BindingLocation";
@@ -56,13 +60,37 @@ export default function Home() {
     const [isLoading, setIsLoading] = useState(false);
     const [apiResult, setApiResult] = useState<PrimerDesignResponseUI | null>(null);
     const [errorMessage, setErrorMessage] = useState<string | null>(null);
+    const [step1WarningMessage, setStep1WarningMessage] = useState<string | null>(null);
     const [isModalOpen, setIsModalOpen] = useState(false);
     const totalSteps = steps.length;
     const handleStepChange = (next: number) => {
         const clamped = Math.min(Math.max(next, 1), totalSteps) as 1 | 2 | 3 | 4;
         setStep(clamped);
     };
-    const handleNext = () => handleStepChange(step + 1);
+    const clearStep1Warning = () => {
+        if (step1WarningMessage) {
+            setStep1WarningMessage(null);
+        }
+    };
+    const validateStep1Sequence = () => {
+        const invalidChar = getInvalidStep1TemplateSequenceChar(sequenceInputRef.current);
+        if (!invalidChar) {
+            setStep1WarningMessage(null);
+            return true;
+        }
+
+        const warningMessage = `대소문자 구분 없이 A, T, G, C만 입력 가능합니다. 잘못된 문자를 제거해 주세요.`;
+        setStep1WarningMessage(warningMessage);
+        alert(warningMessage);
+        return false;
+    };
+    const handleNext = () => {
+        if (step === 1 && !validateStep1Sequence()) {
+            return;
+        }
+
+        handleStepChange(step + 1);
+    };
     const handleBack = () => handleStepChange(step - 1);
     const isLastStep = step === totalSteps;
 
@@ -74,11 +102,22 @@ export default function Home() {
     );
 
     const handleGenerate = async () => {
-        const inputSequence = sequenceInputRef.current;
+        const rawInputSequence = sequenceInputRef.current;
+        const inputSequence = normalizeStep1TemplateSequence(rawInputSequence);
+        if (rawInputSequence.trim().length > 0 && inputSequence.length === 0) {
+            const warningMessage =
+                "전송할 수 있는 유효한 염기서열이 없습니다. A, T, G, C 문자만 입력해 주세요.";
+            setStep1WarningMessage(warningMessage);
+            setErrorMessage(warningMessage);
+            alert(warningMessage);
+            return;
+        }
+
         const targetSeq =
             inputSequence && inputSequence.trim().length > 0
                 ? inputSequence.trim()
                 : "ATGCGTACGTAGCTAGCTAGCTAGCTAATGCGTACGTAGCTAGCTAGCTAGCTA";
+
         const payload: AnalyzeRequestInput = {
             target_sequence: targetSeq,
             species: "Homo sapiens",
@@ -149,6 +188,8 @@ export default function Home() {
                 {step === 1 && (
                     <Step1TemplateEssential
                         sequenceRef={sequenceInputRef}
+                        validationMessage={step1WarningMessage}
+                        onSequenceChange={clearStep1Warning}
                     />
                 )}
 

components/steps/Step1TemplateEssential.tsx

@@ -3,15 +3,22 @@
 import {
     type ClipboardEvent,
     type ChangeEvent,
+    type FormEvent,
     type MutableRefObject,
     useEffect,
     useRef,
     useState,
 } from "react";
 import { SlidersHorizontal } from "lucide-react";
+import {
+    getInvalidStep1TemplateSequenceChars,
+    sanitizeStep1TemplateSequenceInput,
+} from "../../src/lib/parsers/step1TemplateSequence";
 
 type Step1TemplateEssentialProps = {
     sequenceRef: MutableRefObject<string>;
+    validationMessage?: string | null;
+    onSequenceChange?: (value: string) => void;
 };
 
 const countAlphabeticChars = (value: string) => {
@@ -47,6 +54,8 @@ const getPreviewValue = (value: string) => {
 
 export default function Step1TemplateEssential({
     sequenceRef,
+    validationMessage,
+    onSequenceChange,
 }: Step1TemplateEssentialProps) {
     const fileInputRef = useRef<HTMLInputElement | null>(null);
     const textareaRef = useRef<HTMLTextAreaElement | null>(null);
@@ -77,6 +86,7 @@ export default function Step1TemplateEssential({
 
     const updateSequence = (value: string, countMode: "defer" | "immediate" = "defer") => {
         sequenceRef.current = value;
+        onSequenceChange?.(value);
         const nextIsLargeSequence = value.length > MAX_EDITOR_CHARS;
         setIsLargeSequenceMode(nextIsLargeSequence);
 
@@ -104,21 +114,63 @@ export default function Step1TemplateEssential({
 
     const focusTextarea = () => textareaRef.current?.focus();
 
-    const appendSequence = (next: string) => {
-        const sanitized = next.trim();
+    const confirmInvalidRemoval = (rawSequence: string) => {
+        const invalidChars = getInvalidStep1TemplateSequenceChars(rawSequence);
+        if (invalidChars.length === 0) return true;
+
+        const previewInvalidChars = invalidChars.slice(0, 8).join(", ");
+        const extraKinds = invalidChars.length > 8 ? ` 외 ${invalidChars.length - 8}종` : "";
+        return window.confirm(
+            `붙여넣으려는 데이터에 A, T, G, C 이외 문자가 포함되어 있습니다 (${previewInvalidChars}${extraKinds}). 해당 문자를 제거하고 계속할까요?`,
+        );
+    };
+
+    const appendSequence = (
+        next: string,
+        options: { requireInvalidRemovalConsent?: boolean } = {},
+    ) => {
+        if (options.requireInvalidRemovalConsent && !confirmInvalidRemoval(next)) {
+            focusTextarea();
+            return;
+        }
 
-        if (!sanitized) {
+        const sanitizedChunk = sanitizeStep1TemplateSequenceInput(next);
+        if (!sanitizedChunk) {
             focusTextarea();
             return;
         }
 
         const currentValue = sequenceRef.current;
-        const appendedValue = currentValue ? `${currentValue}\n${sanitized}` : sanitized;
+        const appendedValue = `${currentValue}${sanitizedChunk}`;
 
         updateSequence(appendedValue, "immediate");
         focusTextarea();
     };
 
+    const insertSanitizedChunkAtSelection = (
+        textarea: HTMLTextAreaElement,
+        rawChunk: string,
+    ) => {
+        const sanitizedChunk = sanitizeStep1TemplateSequenceInput(rawChunk);
+        const currentValue = sequenceRef.current;
+        const selectionStart = textarea.selectionStart ?? currentValue.length;
+        const selectionEnd = textarea.selectionEnd ?? currentValue.length;
+        const nextValue =
+            currentValue.slice(0, selectionStart) +
+            sanitizedChunk +
+            currentValue.slice(selectionEnd);
+
+        if (nextValue !== currentValue) {
+            updateSequence(nextValue, "immediate");
+        }
+
+        if (textareaRef.current && nextValue.length <= MAX_EDITOR_CHARS) {
+            const cursor = selectionStart + sanitizedChunk.length;
+            textareaRef.current.selectionStart = cursor;
+            textareaRef.current.selectionEnd = cursor;
+        }
+    };
+
     const handleUploadClick = () => fileInputRef.current?.click();
 
     const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
@@ -128,7 +180,7 @@ export default function Step1TemplateEssential({
 
         try {
             const text = await file.text();
-            appendSequence(text);
+            appendSequence(text, { requireInvalidRemovalConsent: true });
         } catch (error) {
             console.error("Failed to read FASTA file", error);
         } finally {
@@ -144,7 +196,7 @@ export default function Step1TemplateEssential({
 
         try {
             const text = await navigator.clipboard.readText();
-            appendSequence(text);
+            appendSequence(text, { requireInvalidRemovalConsent: true });
         } catch (error) {
             console.error("Failed to read from clipboard", error);
         }
@@ -160,27 +212,37 @@ export default function Step1TemplateEssential({
 
         const pastedText = event.clipboardData.getData("text");
         if (!pastedText) return;
+        if (!confirmInvalidRemoval(pastedText)) {
+            focusTextarea();
+            return;
+        }
+        insertSanitizedChunkAtSelection(event.currentTarget, pastedText);
+    };
 
-        const currentValue = sequenceRef.current;
-        const selectionStart = event.currentTarget.selectionStart ?? currentValue.length;
-        const selectionEnd = event.currentTarget.selectionEnd ?? currentValue.length;
-        const nextValue =
-            currentValue.slice(0, selectionStart) +
-            pastedText +
-            currentValue.slice(selectionEnd);
+    const handleTextareaBeforeInput = (event: FormEvent<HTMLTextAreaElement>) => {
+        if (isLargeSequenceMode || event.currentTarget.readOnly) {
+            event.preventDefault();
+            return;
+        }
 
-        updateSequence(nextValue, "immediate");
+        const nativeEvent = event.nativeEvent as InputEvent;
+        const inputType = nativeEvent.inputType ?? "";
+        if (inputType === "insertFromPaste") return;
+        if (!inputType.startsWith("insert")) return;
 
-        if (textareaRef.current && nextValue.length <= MAX_EDITOR_CHARS) {
-            const cursor = selectionStart + pastedText.length;
-            textareaRef.current.selectionStart = cursor;
-            textareaRef.current.selectionEnd = cursor;
-        }
+        const rawChunk = nativeEvent.data ?? "";
+        if (!rawChunk) return;
+
+        const sanitizedChunk = sanitizeStep1TemplateSequenceInput(rawChunk);
+        if (sanitizedChunk === rawChunk) return;
+
+        event.preventDefault();
+        insertSanitizedChunkAtSelection(event.currentTarget, rawChunk);
     };
 
     const handleTextareaChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
         if (isLargeSequenceMode || event.currentTarget.readOnly) return;
-        updateSequence(event.currentTarget.value);
+        updateSequence(sanitizeStep1TemplateSequenceInput(event.currentTarget.value));
     };
 
     const handleCleanClick = () => {
@@ -221,6 +283,7 @@ export default function Step1TemplateEssential({
                                 readOnly={isLargeSequenceMode}
                                 defaultValue={getPreviewValue(sequenceRef.current)}
                                 onChange={handleTextareaChange}
+                                onBeforeInput={handleTextareaBeforeInput}
                                 onPaste={handleTextareaPaste}
                             />
                         </div>
@@ -231,6 +294,13 @@ export default function Step1TemplateEssential({
                                 shows only a preview.
                             </p>
                         )}
+                        <p className="mt-2 text-[11px] text-slate-500">
+                            A, T, G, C 이외 문자는 입력 시 자동으로 제거됩니다. Paste 버튼,
+                            Ctrl+V, Upload FASTA에서는 제거 전에 확인을 요청합니다.
+                        </p>
+                        {validationMessage && (
+                            <p className="mt-2 text-xs text-red-300">{validationMessage}</p>
+                        )}
                     </label>
                     <div className="flex flex-wrap gap-2 justify-end">
                         <input

src/lib/parsers/step1TemplateSequence.ts

@@ -0,0 +1,40 @@
+const FASTA_HEADER_PREFIX = ">";
+const ATGC_ONLY_PATTERN = /^[ATGC]*$/i;
+const UPPERCASE_ATGC_ONLY_PATTERN = /^[ATGC]+$/;
+const NON_ATGC_PATTERN = /[^ATGCatgc]/;
+const NON_ATGC_GLOBAL_PATTERN = /[^ATGCatgc]/g;
+
+const stripFastaHeadersAndWhitespace = (rawSequence: string) =>
+  rawSequence
+    .split(/\r?\n/)
+    .filter((line) => !line.trim().startsWith(FASTA_HEADER_PREFIX))
+    .join("")
+    .replace(/\s+/g, "");
+
+export const toUpperCaseAtgcOnly = (value: string) =>
+  ATGC_ONLY_PATTERN.test(value) ? value.toUpperCase() : value;
+
+export const sanitizeStep1TemplateSequenceInput = (rawSequence: string) =>
+  stripFastaHeadersAndWhitespace(rawSequence)
+    .replace(NON_ATGC_GLOBAL_PATTERN, "")
+    .toUpperCase();
+
+export const normalizeStep1TemplateSequence = (rawSequence: string) =>
+  sanitizeStep1TemplateSequenceInput(rawSequence);
+
+export const isUppercaseAtgcOnlySequence = (value: string) =>
+  UPPERCASE_ATGC_ONLY_PATTERN.test(value);
+
+export const getInvalidStep1TemplateSequenceChars = (rawSequence: string) => {
+  const matches = stripFastaHeadersAndWhitespace(rawSequence).match(NON_ATGC_GLOBAL_PATTERN);
+  if (!matches) return [];
+
+  const uniqueChars = new Set<string>();
+  for (const char of matches) {
+    uniqueChars.add(char);
+  }
+  return [...uniqueChars];
+};
+
+export const getInvalidStep1TemplateSequenceChar = (rawSequence: string) =>
+  stripFastaHeadersAndWhitespace(rawSequence).match(NON_ATGC_PATTERN)?.[0] ?? null;