refactor(forms): centralize validation with zod mini

package.json

@@ -18,6 +18,7 @@
     "lint": "eslint .",
     "test:timetable": "node --experimental-strip-types --test tests/timetable/*.test.ts",
     "test:feedback": "node --experimental-strip-types --test tests/feedback/*.test.ts",
+    "test:forms": "node --experimental-strip-types --test tests/forms/*.test.ts",
     "test:todo": "node --experimental-strip-types --test tests/todo/*.test.ts",
     "preview": "vite preview",
     "deploy": "git subtree push --prefix gh-pages origin gh-pages"

src/components/Editor/EditorSidebar/QuickAddDialog.tsx

@@ -20,7 +20,11 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useEditorContext } from '@/hooks/useEditorContext';
 import { Plus } from 'lucide-react';
 import { toast } from 'sonner';
-import { validateLinkForm } from '@/utils/formValidation';
+import {
+  getFirstValidationMessage,
+  LINK_NAME_MAX_LENGTH,
+  linkFormSchema,
+} from '@/utils/formValidation';
 import { IconGrid } from '@/components/Editor/shared/IconGrid';
 import type { Icon } from '@/types/api';
 
@@ -73,19 +77,17 @@ const QuickAddDialogContent = ({
   );
 
   const handleAdd = () => {
-    // Validate form using centralized validation
-    const validation = validateLinkForm(name, url, selectedIconId, 15);
-    if (!validation.valid) {
-      toast.error(validation.error!);
+    const validation = linkFormSchema.safeParse({
+      name,
+      url,
+      iconId: selectedIconId,
+    });
+    if (!validation.success) {
+      toast.error(getFirstValidationMessage(validation.error));
       return;
     }
 
-    // Add link with iconId
-    onAdd({
-      name: name.trim(),
-      url: url.trim(),
-      iconId: selectedIconId!,
-    });
+    onAdd(validation.data);
 
     // Close dialog
     onOpenChange(false);
@@ -103,19 +105,19 @@ const QuickAddDialogContent = ({
         <div className="space-y-4 py-4">
           {/* Name Input */}
           <div className="space-y-2">
-            <Label htmlFor="link-name">링크 이름 (최대 15자)</Label>
+            <Label htmlFor="link-name">링크 이름 (최대 {LINK_NAME_MAX_LENGTH}자)</Label>
             <Input
               id="link-name"
               placeholder="예: 이캠퍼스"
               value={name}
               onChange={(e) => {
                 const value = e.target.value;
-                if (value.length <= 15) {
+                if (value.length <= LINK_NAME_MAX_LENGTH) {
                   setName(value);
                 }
               }}
               autoComplete="off"
-              maxLength={15}
+              maxLength={LINK_NAME_MAX_LENGTH}
             />
           </div>
 

src/components/Editor/ItemPropertiesPanel/ItemPropertiesPanel.tsx

@@ -12,7 +12,11 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Trash2, Save, ArrowRight } from 'lucide-react';
 import { toast } from 'sonner';
 import { GRID_CONFIG } from '@/utils/template';
-import { validateLinkForm } from '@/utils/formValidation';
+import {
+  getFirstValidationMessage,
+  LINK_NAME_MAX_LENGTH,
+  linkFormSchema,
+} from '@/utils/formValidation';
 import { IconGrid } from '@/components/Editor/shared/IconGrid';
 import type { TemplateIcon, TemplateItem } from '@/types/api';
 import { InputGroup } from '@/components/Editor/shared/InputGroup';
@@ -96,16 +100,21 @@ const ItemPropertiesPanelForm = ({
   }, [selectedItem]);
 
   const handleSave = () => {
-    // Validate form using centralized validation
-    const validation = validateLinkForm(name, url, selectedIconId, 15);
-    if (!validation.valid) {
-      toast.error(validation.error!);
+    const validation = linkFormSchema.safeParse({
+      name,
+      url,
+      iconId: selectedIconId,
+    });
+    if (!validation.success) {
+      toast.error(getFirstValidationMessage(validation.error));
       return;
     }
 
+    const { name: validatedName, url: validatedUrl, iconId } = validation.data;
+
     // Find selected icon
     const allIcons = [...defaultIcons, ...userIcons];
-    const icon = allIcons.find((i) => i.id === selectedIconId);
+    const icon = allIcons.find((i) => i.id === iconId);
     if (!icon) {
       toast.error('선택한 아이콘을 찾을 수 없습니다.');
       return;
@@ -129,8 +138,8 @@ const ItemPropertiesPanelForm = ({
       payload: {
         id: selectedItem.templateItemId,
         changes: {
-          name: name.trim(),
-          siteUrl: url.trim(),
+          name: validatedName,
+          siteUrl: validatedUrl,
           icon: {
             iconId: icon.id,
             iconName: icon.name,
@@ -180,19 +189,21 @@ const ItemPropertiesPanelForm = ({
 
         {/* Name Input */}
         <div className="space-y-2">
-          <Label htmlFor="item-name" className="text-xs">링크 이름 (최대 15자)</Label>
+          <Label htmlFor="item-name" className="text-xs">
+            링크 이름 (최대 {LINK_NAME_MAX_LENGTH}자)
+          </Label>
           <Input
             id="item-name"
             value={name}
             onChange={(e) => {
               const value = e.target.value;
-              if (value.length <= 15) {
+              if (value.length <= LINK_NAME_MAX_LENGTH) {
                 setName(value);
               }
             }}
             placeholder="예: 이캠퍼스"
             className="h-8"
-            maxLength={15}
+            maxLength={LINK_NAME_MAX_LENGTH}
           />
         </div>
 

src/components/EmailVerificationDialog.tsx

@@ -18,8 +18,9 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { sendVerificationCode, verifyEmailCode } from '@/apis/auth';
 import {
-  validateKonkukEmail,
-  validateAuthCode,
+  authCodeSchema,
+  getFirstValidationMessage,
+  konkukEmailSchema,
 } from '@/utils/formValidation';
 import { errorLog } from '@/utils/logger';
 import { sendAuthEmailVerificationStart, sendAuthEmailVerificationSuccess } from '@/utils/analytics';
@@ -60,18 +61,18 @@ export function EmailVerificationDialog({
       return;
     }
 
-    // Validate full email
-    const validation = validateKonkukEmail(kuMail);
-    if (!validation.valid) {
-      toast.error(validation.error);
+    const validation = konkukEmailSchema.safeParse(kuMail);
+    if (!validation.success) {
+      toast.error(getFirstValidationMessage(validation.error));
       return;
     }
 
     setIsLoading(true);
     try {
-      const response = await sendVerificationCode({ kuMail });
+      const response = await sendVerificationCode({ kuMail: validation.data });
 
       if (response.success) {
+        setEmailId(validation.data.slice(0, -EMAIL_DOMAIN.length));
         toast.success('인증 코드가 발송되었습니다. 이메일을 확인해주세요.');
         setStep('code');
       } else {
@@ -94,16 +95,18 @@ export function EmailVerificationDialog({
   };
 
   const handleVerifyCode = async () => {
-    // Validate code
-    const validation = validateAuthCode(authCode);
-    if (!validation.valid) {
-      toast.error(validation.error);
+    const validation = authCodeSchema.safeParse(authCode);
+    if (!validation.success) {
+      toast.error(getFirstValidationMessage(validation.error));
       return;
     }
 
     setIsLoading(true);
     try {
-      const response = await verifyEmailCode({ kuMail, authCode });
+      const response = await verifyEmailCode({
+        kuMail,
+        authCode: validation.data,
+      });
 
       if (response.success) {
         toast.success('이메일 인증이 완료되었습니다!');

src/components/Labs/QRGeneratorSection.tsx

@@ -6,6 +6,7 @@ import { Info, Download, Check, Upload, X } from "lucide-react";
 import QRCode from "qrcode";
 import { warnLog } from '@/utils/logger';
 import { sendLabsFeatureUse } from '@/utils/analytics';
+import { qrUrlSchema } from '@/utils/formValidation';
 
 // LinKU 로고 (public/assets/icon128.png) - 고해상도 사용
 const LINKU_LOGO_URL = "/assets/icon128.png";
@@ -90,16 +91,14 @@ const QRGeneratorSection = () => {
       return;
     }
 
-    // URL 유효성 검사
-    try {
-      new URL(inputUrl);
-    } catch {
+    const validation = qrUrlSchema.safeParse(inputUrl);
+    if (!validation.success) {
       setError("올바른 URL 형식이 아닙니다");
       setQrDataUrl("");
       return;
     }
 
-    setActiveUrl(inputUrl);
+    setActiveUrl(validation.data);
     setError("");
   }, [inputUrl]);
 

src/components/SettingsDialog.tsx

@@ -53,6 +53,10 @@ import {
   refreshTodoCount,
 } from "@/utils/todo/count";
 import { errorLog } from '@/utils/logger';
+import {
+  eCampusCredentialsSchema,
+  getFirstValidationMessage,
+} from "@/utils/formValidation";
 
 interface SettingsDialogProps {
   open: boolean;
@@ -100,15 +104,24 @@ const ECampusCredential = () => {
 
   // 인증 정보 저장하기
   const saveCredentials = async () => {
-    if (!savedId || !savedPassword) {
-      toast.error("ID와 비밀번호를 모두 입력해주세요.");
+    const validation = eCampusCredentialsSchema.safeParse({
+      userId: savedId,
+      userPw: savedPassword,
+    });
+    if (!validation.success) {
+      toast.error(getFirstValidationMessage(validation.error));
       return;
     }
 
+    const credentials = validation.data;
+
     setIsSaving(true);
 
     try {
-      const loginAttempt = await loginECampusAccount(savedId, savedPassword);
+      const loginAttempt = await loginECampusAccount(
+        credentials.userId,
+        credentials.userPw,
+      );
       if (loginAttempt.superseded) {
         toast.error("다른 계정 변경으로 저장을 완료하지 않았습니다.");
         return;
@@ -123,7 +136,7 @@ const ECampusCredential = () => {
       }
 
       // 검증에 성공한 계정만 브라우저에 저장한다.
-      await saveECampusCredentials(savedId, savedPassword);
+      await saveECampusCredentials(credentials.userId, credentials.userPw);
       if (!isECampusAccountCurrent(loginAttempt.requestGeneration)) {
         return;
       }

src/components/Tabs/TodoList/LoginDialog.tsx

@@ -21,6 +21,10 @@ import {
 } from "@/utils/ecampus/todos";
 import { errorLog } from "@/utils/logger";
 import { clearECampusTodoCount } from "@/utils/todo/count";
+import {
+  eCampusCredentialsSchema,
+  getFirstValidationMessage,
+} from "@/utils/formValidation";
 
 interface LoginDialogProps {
   isOpen: boolean;
@@ -46,18 +50,21 @@ const LoginDialog = ({
   }, [isOpen]);
 
   const handleLogin = async () => {
-    if (!userId || !userPw) {
-      setError("ID와 비밀번호를 모두 입력해주세요.");
+    const validation = eCampusCredentialsSchema.safeParse({ userId, userPw });
+    if (!validation.success) {
+      setError(getFirstValidationMessage(validation.error));
       return;
     }
 
+    const credentials = validation.data;
+
     setError("");
     setIsSubmitting(true);
 
     try {
       const loginAttempt = await loginECampusAccount(
-        userId,
-        userPw,
+        credentials.userId,
+        credentials.userPw,
       );
 
       if (loginAttempt.superseded) {
@@ -77,7 +84,7 @@ const LoginDialog = ({
 
       if (rememberLogin) {
         try {
-          await saveECampusCredentials(userId, userPw);
+          await saveECampusCredentials(credentials.userId, credentials.userPw);
         } catch (saveError) {
           errorLog("Failed to save credentials:", saveError);
         }

src/components/Tabs/TodoList/TodoAddDialog.tsx

@@ -13,6 +13,10 @@ import { addCustomTodo } from "@/utils/todo/customTodo";
 import { toast } from "sonner";
 import { errorLog } from '@/utils/logger';
 import { sendTodoItemCreate } from '@/utils/analytics';
+import {
+  getFirstValidationMessage,
+  todoInputSchema,
+} from '@/utils/formValidation';
 
 interface TodoAddDialogProps {
   open: boolean;
@@ -56,34 +60,32 @@ const TodoAddDialog = ({ open, onOpenChange, onSuccess }: TodoAddDialogProps) =>
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
-    if (!title.trim()) {
-      toast.error("할 일 제목을 입력해주세요.");
-      return;
-    }
-
-    if (!dueDate) {
-      toast.error("마감일을 선택해주세요.");
+    const validation = todoInputSchema.safeParse({
+      title,
+      subject,
+      dueDate,
+      dueTime,
+    });
+    if (!validation.success) {
+      toast.error(getFirstValidationMessage(validation.error));
       return;
     }
 
-    if (!dueTime) {
-      toast.error("마감 시간을 선택해주세요.");
-      return;
-    }
+    const todo = validation.data;
 
     setIsSubmitting(true);
 
     try {
       // YYYY-MM-DD → YYYY.MM.DD 변환
-      const formattedDate = dueDate.replace(/-/g, '.');
+      const formattedDate = todo.dueDate.replace(/-/g, '.');
 
       await addCustomTodo(
-        title.trim(),
+        todo.title,
         formattedDate,
-        dueTime,
-        subject.trim() || undefined
+        todo.dueTime,
+        todo.subject || undefined
       );
-      sendTodoItemCreate("dialog", Boolean(dueDate));
+      sendTodoItemCreate("dialog", Boolean(todo.dueDate));
       toast.success("할 일이 추가되었습니다.");
 
       // 다이얼로그 닫기 (폼 초기화는 useEffect에서 처리)