From ba17c7cbdaaba2bf5369e86d95fe99fa987ee55a Mon Sep 17 00:00:00 2001
From: Minji Lee <79428205+alswlfl29@users.noreply.github.com>
Date: Mon, 8 Jul 2024 09:09:28 +0900
Subject: [PATCH] =?UTF-8?q?[Fix/#55]=20=EC=98=A4=EB=A5=98=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20(#56)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 모집인원, 가격 숫자만 입력 가능하게

* fix: qr 카메라 꺼지게, 영역 제한

* fix: 비밀번호 눌렀을 때 hover 제거

* fix: 날짜, 시간 input css 수정

* fix: 토큰 만료시 response 처리
---
 src/apis/apiClient.ts                         | 27 ++++++------
 src/components/molecules/AddLessonInput.tsx   |  8 ++++
 .../molecules/AddLessonTimeList.tsx           |  1 -
 src/components/molecules/PasswordKeypad.tsx   |  4 +-
 src/components/molecules/QRScanner.tsx        | 43 ++++++++++++++-----
 src/index.css                                 | 12 ++++++
 src/pages/main/HanaFunMain.tsx                |  2 +-
 src/pages/search/LessonDetail.tsx             |  9 +++-
 8 files changed, 78 insertions(+), 28 deletions(-)

diff --git a/src/apis/apiClient.ts b/src/apis/apiClient.ts
index 4766b55..996eed5 100644
--- a/src/apis/apiClient.ts
+++ b/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
@@ -397,18 +395,23 @@ export class ApiClient
       }
     );
 
-    newInstance.interceptors.response.use((response) => {
-      if (response.status === 403) {
-        removeCookie('token');
-        removeCookie('username');
-        location.href = '/';
-      }
+    newInstance.interceptors.response.use(
+      (response) => {
+        console.log('dd', response);
+        return response;
+      },
+      (error) => {
+        console.log(error.response.status);
+        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;
   };
diff --git a/src/components/molecules/AddLessonInput.tsx b/src/components/molecules/AddLessonInput.tsx
index 56bc2d6..5b7e648 100644
--- a/src/components/molecules/AddLessonInput.tsx
+++ b/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'
         />
diff --git a/src/components/molecules/AddLessonTimeList.tsx b/src/components/molecules/AddLessonTimeList.tsx
index 59ba1aa..f860620 100644
--- a/src/components/molecules/AddLessonTimeList.tsx
+++ b/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'
diff --git a/src/components/molecules/PasswordKeypad.tsx b/src/components/molecules/PasswordKeypad.tsx
index 6c5776b..e453b7c 100644
--- a/src/components/molecules/PasswordKeypad.tsx
+++ b/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' />
diff --git a/src/components/molecules/QRScanner.tsx b/src/components/molecules/QRScanner.tsx
index 572c268..ddb308e 100644
--- a/src/components/molecules/QRScanner.tsx
+++ b/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,9 +28,9 @@ 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,
@@ -35,20 +38,34 @@ export const QRScanner: FC<IProps> = ({ onClose }) => {
       },
     });
   };
+
   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>
   );
 };
diff --git a/src/index.css b/src/index.css
index dd5ffc2..839b812 100644
--- a/src/index.css
+++ b/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;
+}
diff --git a/src/pages/main/HanaFunMain.tsx b/src/pages/main/HanaFunMain.tsx
index c68e9b4..cec743b 100644
--- a/src/pages/main/HanaFunMain.tsx
+++ b/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)}
diff --git a/src/pages/search/LessonDetail.tsx b/src/pages/search/LessonDetail.tsx
index ace1bea..2453049 100644
--- a/src/pages/search/LessonDetail.tsx
+++ b/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 && (