Merge branch 'dev' of https://github.com/HanaFun/HanaFun_FE into dev

src/apis/apiClient.ts

@@ -7,8 +7,6 @@ import { hostApi } from './interfaces/hostApi';
 import { categoryApi } from './interfaces/categoryApi';
 import { transactionApi } from './interfaces/transactionApi';
 import { reservationApi } from './interfaces/reservationApi';
-import { useNavigate } from 'react-router-dom';
-import { useModal } from '../context/ModalContext';
 
 export class ApiClient
   implements
@@ -240,7 +238,6 @@ export class ApiClient
       method: 'get',
       url: '/reservation/my/lessons',
     });
-    console.log('신청클래스 싹다', response.data);
     return response.data;
   }
 
@@ -273,7 +270,7 @@ export class ApiClient
       method: 'get',
       url: '/reservation/my/opened',
     });
-    console.log(response);
+
     return response.data;
   }
 
@@ -285,8 +282,7 @@ export class ApiClient
       method: 'get',
       url: `/reservation/my/opened/${lesson_id}`,
     });
-    console.log(lesson_id);
-    console.log(response);
+
     return response.data;
   }
 
@@ -303,7 +299,6 @@ export class ApiClient
 
   // 예약자 정보
   async peopleList(lessondateId: PeopleListReqType) {
-    console.log('전달된 lessondate_id: ', lessondateId);
     const response = await this.axiosInstance.request<
       BaseResponseType<PeopleListType>
     >({
@@ -392,23 +387,25 @@ export class ApiClient
         return config;
       },
       (error) => {
-        console.log(error);
         return Promise.reject(error);
       }
     );
 
-    newInstance.interceptors.response.use((response) => {
-      if (response.status === 403) {
-        removeCookie('token');
-        removeCookie('username');
-        location.href = '/';
-      }
+    newInstance.interceptors.response.use(
+      (response) => {
+        return response;
+      },
+      (error) => {
+        if (error.response.status === 403) {
+          alert('로그아웃되었습니다.');
+          removeCookie('token');
+          removeCookie('username');
+          location.href = '/hana';
+        }
 
-      if (response.status === 404) {
-        location.href = '/error';
+        return Promise.reject(error);
       }
-      return response;
-    });
+    );
 
     return newInstance;
   };

src/apis/imageApiClient.ts

@@ -12,7 +12,6 @@ export class ImageApiClient {
 
   // 이미지 업로드
   async postLessonImg(formData: FormData) {
-    console.log('ddddfsdjf>>', formData);
     const response = await this.axiosImgInstance.request<string>({
       method: 'post',
       url: '/lesson/image-upload',
@@ -55,7 +54,6 @@ export class ImageApiClient {
         return config;
       },
       (error) => {
-        console.log(error);
         return Promise.reject(error);
       }
     );

src/components/molecules/AddLessonInput.tsx

@@ -10,6 +10,13 @@ interface IProps {
 
 export const AddLessonInput = forwardRef(
   (props: IProps, ref: Ref<HTMLInputElement>) => {
+    const onInputNumber = (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (props.type === 'number') {
+        event.target.value = event.target.value
+          .replace(/[^0-9.]/g, '')
+          .replace(/(\..*)\./g, '');
+      }
+    };
     return (
       <AddLessonInputLabel title={props.title}>
         <input
@@ -18,6 +25,7 @@ export const AddLessonInput = forwardRef(
           placeholder={props.placeholder}
           maxLength={props.type === 'text' ? 50 : undefined}
           min={props.type === 'number' ? 0 : undefined}
+          onInput={onInputNumber}
           onChange={props.onChange}
           className='w-full rounded border-[0.7px] border-hanaSilver text-xs placeholder:text-hanaSilver p-2 focus:outline-none'
         />

src/components/molecules/AddLessonTimeList.tsx

@@ -124,7 +124,6 @@ export const AddLessonTimeList: FC<IProps> = ({ onChangeTimes }) => {
               <p className='w-full flex items-center justify-between gap-2'>
                 <input
                   type='date'
-                  placeholder='클래스 날짜'
                   min={format(
                     new Date(new Date().setDate(new Date().getDate())),
                     'yyyy-MM-dd'

src/components/molecules/Calculator.tsx

@@ -70,7 +70,6 @@ export const Calculator = ({ data, lessonId, year }: IProps) => {
       return response;
     },
     onSuccess: async (response) => {
-      console.log('성공');
       if (response.data) {
         setMaterialPrice(response.data.materialPrice);
         setRentalPrice(response.data.rentalPrice);
@@ -83,9 +82,7 @@ export const Calculator = ({ data, lessonId, year }: IProps) => {
         queryClient.invalidateQueries({ queryKey: ['monthRevenue'] });
       }
     },
-    onError: async () => {
-      console.log('에러');
-    },
+    onError: async () => {},
   });
 
   const saveEditPrice = () => {

src/components/molecules/LessonSearchCard.tsx

@@ -18,7 +18,7 @@ export const LessonSearchCard: FC<IProps> = ({ lesson }) => {
       </div>
       <div className='w-44 flex flex-col justify-between px-2'>
         <div>
-          <h1 className='w-full font-hanaRegular text-base mb-1 break-all'>
+          <h1 className='w-full font-hanaRegular text-base mb-1 break-all text-ellipsis line-clamp-2'>
             {lesson.title}
           </h1>
           <p className='font-hanaBold text-sm'>

src/components/molecules/MyCalendar.tsx

@@ -44,9 +44,7 @@ export const MyCalendar = ({
     }
   }, [data]);
 
-  const handleOpenList = () => {
-    console.log(value);
-  };
+  const handleOpenList = () => {};
 
   useEffect(() => {
     onDateChange(new Date());

src/components/molecules/PasswordKeypad.tsx

@@ -21,7 +21,7 @@ export const PasswordKeypad: FC<IProps> = ({
       {[1, -1, 2, -1, 3, 4, 5, 6, 7, 8, 9, 0].map((num, index) => (
         <button
           key={index}
-          className='font-hanaBold text-xl flex justify-center items-center hover:bg-white/20 hover:rounded-md'
+          className='font-hanaBold text-xl flex justify-center items-center active:bg-white/20 active:rounded-md'
           onClick={() => clickKeypad(num)}
         >
           {num === -1 ? (
@@ -34,7 +34,7 @@ export const PasswordKeypad: FC<IProps> = ({
         </button>
       ))}
       <button
-        className='col-end-5 flex justify-center items-center'
+        className='col-end-5 flex justify-center items-center active:bg-white/20 active:rounded-md'
         onClick={handleCancle}
       >
         <IoBackspaceOutline size={30} color='#B5B5B5' />

src/components/molecules/QRScanner.tsx

@@ -1,5 +1,5 @@
 import QrScanner from 'qr-scanner';
-import { FC, useEffect, useRef } from 'react';
+import { FC, useEffect, useRef, useState } from 'react';
 import { IoMdClose } from 'react-icons/io';
 import { useNavigate } from 'react-router-dom';
 
@@ -14,7 +14,10 @@ export type qrUserInfo = {
 
 export const QRScanner: FC<IProps> = ({ onClose }) => {
   const navigate = useNavigate();
-  const videoRef = useRef(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const qrScannerRef = useRef<QrScanner>();
+  const qrBox = useRef<HTMLDivElement>(null);
+  const [qrOn, setQrOn] = useState<boolean>(true);
 
   const QrOptions = {
     // 핸드폰의 경우, 외부 카메라인지 셀프카메라인지
@@ -25,30 +28,44 @@ export const QRScanner: FC<IProps> = ({ onClose }) => {
     highlightScanRegion: true,
   };
 
-  const handleScan = (result: QrScanner.ScanResult, qrScanner: QrScanner) => {
+  const handleScan = (result: QrScanner.ScanResult) => {
     const parsedData: qrUserInfo = JSON.parse(result.data);
-    qrScanner.destroy();
+
     navigate('/qr-pay', {
       state: {
         accountId: parsedData.accountId,
         balance: parsedData.balance,
       },
     });
   };
+
   useEffect(() => {
-    const videoElement = videoRef.current;
-    if (videoElement) {
-      const qrScanner = new QrScanner(
-        videoElement,
-        (result) => handleScan(result, qrScanner),
+    if (videoRef.current && !qrScannerRef.current) {
+      qrScannerRef.current = new QrScanner(
+        videoRef.current,
+        (result) => handleScan(result),
         QrOptions
       );
-      qrScanner.start();
     }
+
+    qrScannerRef.current
+      ?.start()
+      .then(() => setQrOn(true))
+      .catch((err) => {
+        if (err) setQrOn(false);
+      });
+
+    return () => {
+      if (!videoRef?.current) qrScannerRef.current?.stop();
+    };
   }, []);
 
+  useEffect(() => {
+    if (!qrOn) alert('카메라 접근 허용을 해주세요.');
+  }, [qrOn]);
+
   return (
-    <div className='relative top-0 left-0 flex flex-col w-full h-full justify-center items-center z-[60]'>
+    <div className='relative top-0 left-0 flex flex-col w-full h-full justify-center items-center z-[60] overflow-hidden bg-black'>
       <IoMdClose
         size={30}
         color='white'
@@ -59,6 +76,10 @@ export const QRScanner: FC<IProps> = ({ onClose }) => {
         QR코드를 스캔해 주세요.
       </h1>
       <video className='w-full h-screen object-cover' ref={videoRef}></video>
+      <div
+        className='absolute inset-0 border-y-[250px] border-x-[50px] border-black/70'
+        ref={qrBox}
+      ></div>
     </div>
   );
 };

src/components/organisms/ApplicantList.tsx

@@ -4,7 +4,6 @@ interface IProps {
 }
 
 export const ApplicantList = ({ applicants }: IProps) => {
-  console.log('신청자list: ', applicants);
   return (
     <div>
       <div className='font-hanaMedium flex justify-between text-lg mt-5 '>

src/components/organisms/LessonSlider.tsx

@@ -29,7 +29,6 @@ export const LessonSlider = ({ data, show, option }: IProps) => {
         const cancelResponse = await ApiClient.getInstance().cancelLesson({
           reservationId: reservationId,
         });
-        console.log('cancleResponse', cancelResponse);
         if (cancelResponse.success) {
           openModal('예약이 취소되었습니다', () =>
             navigate('/mypage/my-lesson-list')

src/index.css

@@ -46,3 +46,15 @@
 .custom-slider2 .slick-slide > div {
   padding: 0 20px;
 }
+
+input[type='date'],
+input[type='time'] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  margin: 0;
+  background-color: white;
+  min-height: 16px;
+  height: 32px;
+  padding: 8px;
+}

src/pages/main/HanaFunMain.tsx

@@ -126,9 +126,9 @@ export const HanaFunMain = () => {
 
   if (isGetAccountListError || isGetPopularLessonError) return <ErrorPage />;
 
+  if (isScan) return <QRScanner onClose={() => setIsScan(false)} />;
   return (
     <>
-      {isScan && <QRScanner onClose={() => setIsScan(false)} />}
       {showKeypad && (
         <AccountPwKeypad
           handleClickedPassword={(pw: string) => sendAccountPassword(pw)}

src/pages/mypage/HostLessonCalendar.tsx

@@ -58,7 +58,6 @@ export const HostLessonCalendar = () => {
 
   const handleLessonDetail = async (lessondateId: number) => {
     try {
-      console.log('Fetching applicants for lessondate_id:', lessondateId);
       const response = await ApiClient.getInstance().peopleList({
         lessondateId: lessondateId,
       });

src/pages/mypage/LessonCalendar.tsx

@@ -37,7 +37,6 @@ export const LessonCalendar = () => {
         month: month,
       };
       const response = await ApiClient.getInstance().getMySchedule(reqData);
-      console.log(response.data);
       return response.data;
     },
   });
@@ -82,7 +81,6 @@ export const LessonCalendar = () => {
       setSelectedLessonId(null);
       queryClient.invalidateQueries({ queryKey: ['lessonDetails'] });
     }
-    console.log('dddd>>', selectedLessonDetail);
   }, [check]);
 
   if (isLoadingLessons || isLoadingDetail) {

src/pages/mypage/MyLessonList.tsx

@@ -13,7 +13,6 @@ export const MyLessonList = () => {
     queryKey: ['allLessons'],
     queryFn: async () => {
       const response = await ApiClient.getInstance().getMyLessonAll();
-      console.log('신청 클래스 api 호출 : ', response.data);
       return response.data;
     },
     retry: 1,

src/pages/mypage/MyPage.tsx

@@ -75,7 +75,6 @@ const MyPage = () => {
   }
 
   if (listError || moneyError) {
-    console.log('point error', point);
     return <ErrorPage />;
   }
 

src/pages/search/LessonDetail.tsx

@@ -10,6 +10,7 @@ import { LessonDateChoice } from '../../components/molecules/LessonDateChoice';
 import { useQuery } from '@tanstack/react-query';
 import { ApiClient } from '../../apis/apiClient';
 import { Loading } from '../Loading';
+import { ErrorPage } from '../ErrorPage';
 
 export const LessonDetail = () => {
   const navigate = useNavigate();
@@ -19,7 +20,11 @@ export const LessonDetail = () => {
   const [copyLocation, setCopyLocation] = useState<boolean>(false);
   const [materials, setMaterials] = useState<string[]>([]);
   const [choiceModal, setChoiceModal] = useState<boolean>(false);
-  const { isLoading: isGetLessonLoading, data: lesson } = useQuery({
+  const {
+    isLoading: isGetLessonLoading,
+    data: lesson,
+    isError: isGetLessonError,
+  } = useQuery({
     queryKey: ['lesson', lessonId],
     queryFn: () => {
       if (lessonId) {
@@ -67,6 +72,8 @@ export const LessonDetail = () => {
 
   if (isGetLessonLoading || isGetLessonDateLoading) return <Loading />;
 
+  if (isGetLessonError) return <ErrorPage />;
+
   return (
     <>
       {copyLocation && (