feat: 전화번호 인증 api 구현

Author: hyeeuncho

design-system/ui/Button.tsx

@@ -3,11 +3,13 @@ interface ButtonProps {
   onClick: () => void; // 클릭 핸들러
   disabled?: boolean; // 비활성화 여부
   className?: string; // 추가 스타일링 클래스
+  type?: 'button' | 'submit' | 'reset';
 }
 
-const Button = ({ label, onClick, disabled = false, className = '' }: ButtonProps) => {
+const Button = ({ label, onClick, disabled = false, className = '', type = 'submit' }: ButtonProps) => {
   return (
     <button
+    type={type} 
       onClick={onClick}
       disabled={disabled}
       className={`py-2 px-4 text-white font-semibold transition text-base sm:text-xs md:text-sm lg:text-base

src/features/dashboard/api/participants.ts

@@ -29,16 +29,18 @@ export const downloadExcel = async (eventId:number): Promise<void> => {
       params: { eventId }, 
     }
   );
+  console.log(response.headers)
 
   //파일이름 추출
   const disposition = response.headers['content-disposition'];
-  let filename = '같이가요_구매참가자목록.xlsx'; // 기본값
-  if (disposition) {
-    const match = disposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
-    if (match && match[1]) {
-      filename = decodeURIComponent(match[1].replace(/['"]/g, ''));
-    }
+let filename = '기본값.xlsx';
+if (disposition) {
+  const match = disposition.match(/filename\*=UTF-8''(.+)/);
+  if (match && match[1]) {
+    filename = decodeURIComponent(match[1]);
   }
+}
+console.log(disposition)
 
   //저장
   const blob = new Blob([response.data], {

src/features/join/api/user.ts

@@ -22,3 +22,13 @@ export const agreeTerms = async (data: TermsAgreementRequest) => {
   });
   return response.data;
 };
+
+//인증번호 발급
+export const sendCertificationCode = async (phoneNum: string): Promise<void> => {
+  await axiosClient.post('/sms/send', { phoneNum });
+};
+
+//인증번호 검증 
+export const verifyCertificationCode = async (phoneNum: string, certificationCode: string): Promise<void> => {
+  await axiosClient.post('/sms/verify', { phoneNum, certificationCode });
+};

src/features/join/hooks/useUserHook.ts

@@ -1,5 +1,5 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
-import { agreeTerms, readUser, updateUser } from '../api/user';
+import { agreeTerms, readUser, sendCertificationCode, updateUser, verifyCertificationCode } from '../api/user';
 import { UserInfoRequest, UserInfoResponse } from '../model/userInformation';
 
 export const useUserInfo = (enabled: boolean = true) => {
@@ -26,4 +26,32 @@ export const useAgreeTerms = () => {
       alert('약관 동의 처리에 실패했습니다.');
     }
   });
-};
+};
+
+
+// 인증번호 발급
+export const useSendCertificationCode = () => {
+  return useMutation({
+    mutationFn: (phoneNum: string) => sendCertificationCode(phoneNum),
+    onSuccess: () => {
+      alert('인증번호를 발송했습니다.');
+    },
+    onError: () => {
+      alert('인증번호 전송에 실패했습니다.');
+    },
+  });
+};
+
+// 인증번호 확인 
+export const useVerifyCertificationCode = () => {
+  return useMutation({
+    mutationFn: (params: { phoneNum: string; certificationCode: string }) =>
+      verifyCertificationCode(params.phoneNum, params.certificationCode),
+    onSuccess: () => {
+      alert('인증에 성공했습니다.');
+    },
+    onError: () => {
+      alert('인증번호가 일치하지 않습니다.');
+    },
+  });
+}

src/pages/join/InfoInputPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect} from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import Header from '../../../design-system/ui/Header';
@@ -41,21 +41,6 @@ const InfoInputPage = () => {
     const formatted = formatPhoneNumber(e.target.value);
     setValue('phone', formatted, { shouldValidate: true });
   };
-  // 전화번호 인증
-  const [isVerifyVisible, setIsVerifyVisible] = useState(false);
-  const [verificationCode, setVerificationCode] = useState('');
-  const handlePhoneVerifyClick = () => {
-    if (!phoneValue) {
-      alert('연락처를 입력해주세요.');
-      return;
-    }
-    setIsVerifyVisible(true);
-  };
-  const handleVerifySubmit = () => {
-    // 여기서 인증번호 검증 로직 실행 (백엔드 호출 등)
-    console.log("tets");
-  };
-
   const onSubmit: SubmitHandler<FormData> = formData => {
     const agreementStates = getAgreementStates();
     const updatedData = {
@@ -131,29 +116,7 @@ const InfoInputPage = () => {
               onChange={handlePhoneChange}
             />
           </div>
-          <Button
-            label="인증하기"
-            onClick={handlePhoneVerifyClick}
-            className="h-11 px-4 rounded-md"
-          />
         </div>
-
-        {/* 인증번호 입력 필드 */}
-        {isVerifyVisible && (
-          <div className="flex flex-col gap-2 mt-2">
-            <UnderlineTextField
-              placeholder="인증번호 4자리"
-              value={verificationCode}
-              onChange={(e) => setVerificationCode(e.target.value)}
-              className="text-xl" 
-              label={''} />
-            <Button
-              label="인증 확인"
-              onClick={handleVerifySubmit}
-              className="w-full h-10 rounded-full"
-            />
-          </div>
-        )}
         {/* 이메일 필드 */}
         <UnderlineTextField
           label="이메일"

src/shared/lib/formValidation.ts

@@ -9,7 +9,7 @@ export const formSchema = z.object({
     .regex(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/, '올바른 이메일 형식이어야 합니다.'),
   phone: z
     .string()
-    .regex(/^[0-9]{3}-[0-9]{3,4}-[0-9]{4}$/, '연락처는 휴대전화 번호 형식(예: 010-1234-5678)이어야 합니다.'),
+    .regex(/^[0-9]{3}-[0-9]{3,4}-[0-9]{4}$/, '000-0000-0000 형식으로 입력해주세요.'),
 });
 export const organizerFormSchema = formSchema.pick({ email: true, phone: true });
 export const eventTitleSchema = z.object({