feat: 이름 입력 오류 처리 및 에러 모달 개선 (#358)

Author: jeonghoon11

src/pages/ticket/components/inpur-section/input-section.tsx

@@ -22,9 +22,7 @@ const InputSection = ({
   onKeyChange,
 }: InputSectionProps) => {
   const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { value } = e.target;
-    const koreanOnlyValue = value.replace(/[^ㄱ-ㅎㅏ-ㅣ가-힣·]/g, '');
-    onNameChange(koreanOnlyValue);
+    onNameChange(e.target.value);
   };
 
   const handleStudentNumChange = (e: React.ChangeEvent<HTMLInputElement>) => {

src/pages/ticket/components/modal-type/error-modal.tsx

@@ -2,17 +2,30 @@ import Modal from '@shared/components/modal/modal';
 
 interface ErrorModalProps {
   onClose: () => void;
+  isNameError?: boolean;
 }
 
-const ErrorModal = ({ onClose }: ErrorModalProps) => {
+const ErrorModal = ({ onClose, isNameError = false }: ErrorModalProps) => {
   return (
     <Modal.Content>
       <Modal.Body>
-        <Modal.Title>인증키 불일치</Modal.Title>
+        <Modal.Title>
+          {isNameError ? '입력 정보 오류' : '인증키 불일치'}
+        </Modal.Title>
         <Modal.Description>
-          유효하지 않은 인증키 입니다.
-          <br />
-          다시 시도해 주세요.
+          {isNameError ? (
+            <>
+              이름과 학번을 다시 확인해주세요.
+              <br />
+              이름은 한글만 입력 가능합니다.
+            </>
+          ) : (
+            <>
+              유효하지 않은 인증키 입니다.
+              <br />
+              다시 시도해 주세요.
+            </>
+          )}
         </Modal.Description>
       </Modal.Body>
       <Modal.Footer>

src/pages/ticket/components/ticketmodal.tsx

@@ -6,7 +6,7 @@ import PremiumModal from './modal-type/premium-modal';
 import SuccessModal from './modal-type/success-modal';
 
 interface TicketModalProps {
-  modalType: 'confirm' | 'success' | 'error' | 'premium' | null;
+  modalType: 'confirm' | 'success' | 'error' | 'nameError' | 'premium' | null;
   name: string;
   studentNumber: string;
   onClose: () => void;
@@ -41,6 +41,13 @@ const TicketModal = ({
         );
       case 'error':
         return <ErrorModal onClose={onClose} />;
+      case 'nameError':
+        return (
+          <ErrorModal
+            onClose={onClose}
+            isNameError={true}
+          />
+        );
       case 'premium':
         return <PremiumModal {...sharedProps} />;
       default:

src/pages/ticket/hooks/use-ticket-form.ts

@@ -13,7 +13,13 @@ interface TicketForm {
   key: string;
 }
 
-type ModalType = 'confirm' | 'success' | 'error' | 'premium' | null;
+type ModalType =
+  | 'confirm'
+  | 'success'
+  | 'error'
+  | 'nameError'
+  | 'premium'
+  | null;
 
 export const useTicketForm = () => {
   const queryClient = useQueryClient();
@@ -40,7 +46,7 @@ export const useTicketForm = () => {
     TICKET_MUTATION_OPTIONS.MEMBER_LEVEL_UP(),
   );
 
-  const isErrorState = modalType === 'error';
+  const isErrorState = modalType === 'error' || modalType === 'nameError';
 
   useEffect(() => {
     if (memberRaffleProfile?.result) {
@@ -81,11 +87,18 @@ export const useTicketForm = () => {
 
   const handleConfirm = useCallback(async () => {
     try {
+      // 한글 이름 유효성 검사
+      const koreanNameRegex = /^[ㄱ-ㅎㅏ-ㅣ가-힣\s]+$/;
+      if (!koreanNameRegex.test(form.name.trim())) {
+        setModalType('nameError');
+        return;
+      }
+
       // UI level을 서버 level로 변환 (UI level과 동일)
       const serverLevel = selectedLevel;
 
       const response = await levelUpMutation.mutateAsync({
-        name: form.name,
+        name: form.name.trim(),
         studentId: form.studentNum,
         authenticationKey: form.key,
         level: serverLevel,
@@ -99,7 +112,7 @@ export const useTicketForm = () => {
       // Lv.3 응모 시 자동으로 Lv.4도 응모
       if (selectedLevel === 3) {
         await levelUpMutation.mutateAsync({
-          name: form.name,
+          name: form.name.trim(),
           studentId: form.studentNum,
           authenticationKey: form.key,
           level: 4, // Lv.4