전체적인 스타일 수정

frontend/components/admin/CodeFormModal.tsx

@@ -154,21 +154,21 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="sm:max-w-[500px]">
+      <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
         <DialogHeader>
-          <DialogTitle>{isEditing ? "코드 수정" : "새 코드"}</DialogTitle>
+          <DialogTitle className="text-base sm:text-lg">{isEditing ? "코드 수정" : "새 코드"}</DialogTitle>
         </DialogHeader>
 
-        <form onSubmit={handleSubmit} className="space-y-4">
+        <form onSubmit={handleSubmit} className="space-y-3 sm:space-y-4">
           {/* 코드값 */}
           <div className="space-y-2">
-            <Label htmlFor="codeValue">코드값 *</Label>
+            <Label htmlFor="codeValue" className="text-xs sm:text-sm">코드값 *</Label>
             <Input
               id="codeValue"
               {...form.register("codeValue")}
-              disabled={isLoading || isEditing} // 수정 시에는 비활성화
+              disabled={isLoading || isEditing}
               placeholder="코드값을 입력하세요"
-              className={(form.formState.errors as any)?.codeValue ? "border-destructive" : ""}
+              className={(form.formState.errors as any)?.codeValue ? "h-8 text-xs sm:h-10 sm:text-sm border-destructive" : "h-8 text-xs sm:h-10 sm:text-sm"}
               onBlur={(e) => {
                 const value = e.target.value.trim();
                 if (value && !isEditing) {
@@ -180,7 +180,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
               }}
             />
             {(form.formState.errors as any)?.codeValue && (
-              <p className="text-sm text-destructive">{getErrorMessage((form.formState.errors as any)?.codeValue)}</p>
+              <p className="text-[10px] sm:text-xs text-destructive">{getErrorMessage((form.formState.errors as any)?.codeValue)}</p>
             )}
             {!isEditing && !(form.formState.errors as any)?.codeValue && (
               <ValidationMessage
@@ -193,13 +193,13 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
 
           {/* 코드명 */}
           <div className="space-y-2">
-            <Label htmlFor="codeName">코드명 *</Label>
+            <Label htmlFor="codeName" className="text-xs sm:text-sm">코드명 *</Label>
             <Input
               id="codeName"
               {...form.register("codeName")}
               disabled={isLoading}
               placeholder="코드명을 입력하세요"
-              className={form.formState.errors.codeName ? "border-destructive" : ""}
+              className={form.formState.errors.codeName ? "h-8 text-xs sm:h-10 sm:text-sm border-destructive" : "h-8 text-xs sm:h-10 sm:text-sm"}
               onBlur={(e) => {
                 const value = e.target.value.trim();
                 if (value) {
@@ -211,7 +211,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
               }}
             />
             {form.formState.errors.codeName && (
-              <p className="text-sm text-destructive">{getErrorMessage(form.formState.errors.codeName)}</p>
+              <p className="text-[10px] sm:text-xs text-destructive">{getErrorMessage(form.formState.errors.codeName)}</p>
             )}
             {!form.formState.errors.codeName && (
               <ValidationMessage
@@ -224,13 +224,13 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
 
           {/* 영문명 */}
           <div className="space-y-2">
-            <Label htmlFor="codeNameEng">코드 영문명 *</Label>
+            <Label htmlFor="codeNameEng" className="text-xs sm:text-sm">코드 영문명 *</Label>
             <Input
               id="codeNameEng"
               {...form.register("codeNameEng")}
               disabled={isLoading}
               placeholder="코드 영문명을 입력하세요"
-              className={form.formState.errors.codeNameEng ? "border-destructive" : ""}
+              className={form.formState.errors.codeNameEng ? "h-8 text-xs sm:h-10 sm:text-sm border-destructive" : "h-8 text-xs sm:h-10 sm:text-sm"}
               onBlur={(e) => {
                 const value = e.target.value.trim();
                 if (value) {
@@ -242,7 +242,7 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
               }}
             />
             {form.formState.errors.codeNameEng && (
-              <p className="text-sm text-destructive">{getErrorMessage(form.formState.errors.codeNameEng)}</p>
+              <p className="text-[10px] sm:text-xs text-destructive">{getErrorMessage(form.formState.errors.codeNameEng)}</p>
             )}
             {!form.formState.errors.codeNameEng && (
               <ValidationMessage
@@ -255,57 +255,65 @@ export function CodeFormModal({ isOpen, onClose, categoryCode, editingCode, code
 
           {/* 설명 */}
           <div className="space-y-2">
-            <Label htmlFor="description">설명 *</Label>
+            <Label htmlFor="description" className="text-xs sm:text-sm">설명 *</Label>
             <Textarea
               id="description"
               {...form.register("description")}
               disabled={isLoading}
               placeholder="설명을 입력하세요"
               rows={3}
-              className={form.formState.errors.description ? "border-destructive" : ""}
+              className={form.formState.errors.description ? "text-xs sm:text-sm border-destructive" : "text-xs sm:text-sm"}
             />
             {form.formState.errors.description && (
-              <p className="text-sm text-destructive">{getErrorMessage(form.formState.errors.description)}</p>
+              <p className="text-[10px] sm:text-xs text-destructive">{getErrorMessage(form.formState.errors.description)}</p>
             )}
           </div>
 
           {/* 정렬 순서 */}
           <div className="space-y-2">
-            <Label htmlFor="sortOrder">정렬 순서</Label>
+            <Label htmlFor="sortOrder" className="text-xs sm:text-sm">정렬 순서</Label>
             <Input
               id="sortOrder"
               type="number"
               {...form.register("sortOrder", { valueAsNumber: true })}
               disabled={isLoading}
               min={1}
-              className={form.formState.errors.sortOrder ? "border-destructive" : ""}
+              className={form.formState.errors.sortOrder ? "h-8 text-xs sm:h-10 sm:text-sm border-destructive" : "h-8 text-xs sm:h-10 sm:text-sm"}
             />
             {form.formState.errors.sortOrder && (
-              <p className="text-sm text-destructive">{getErrorMessage(form.formState.errors.sortOrder)}</p>
+              <p className="text-[10px] sm:text-xs text-destructive">{getErrorMessage(form.formState.errors.sortOrder)}</p>
             )}
           </div>
 
           {/* 활성 상태 (수정 시에만) */}
           {isEditing && (
-            <div className="flex items-center space-x-2">
+            <div className="flex items-center gap-2">
               <Switch
                 id="isActive"
                 checked={form.watch("isActive") === "Y"}
                 onCheckedChange={(checked) => form.setValue("isActive", checked ? "Y" : "N")}
                 disabled={isLoading}
+                aria-label="활성 상태"
               />
-              <Label htmlFor="isActive">{form.watch("isActive") === "Y" ? "활성" : "비활성"}</Label>
+              <Label htmlFor="isActive" className="text-xs sm:text-sm">{form.watch("isActive") === "Y" ? "활성" : "비활성"}</Label>
             </div>
           )}
 
           {/* 버튼 */}
-          <div className="flex justify-end space-x-2 pt-4">
-            <Button type="button" variant="outline" onClick={onClose} disabled={isLoading}>
+          <div className="flex gap-2 pt-4 sm:justify-end sm:gap-0">
+            <Button 
+              type="button" 
+              variant="outline" 
+              onClick={onClose} 
+              disabled={isLoading}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
               취소
             </Button>
             <Button
               type="submit"
               disabled={isLoading || !form.formState.isValid || hasDuplicateErrors || isDuplicateChecking}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
             >
               {isLoading ? (
                 <>