[Fix/#51] 오류 수정 및 내용 변경 (#54)

* fix: 결제 input 금액 검은색으로 색 변경

* fix: 후면 카메라로 설정 변경

* fix: 신청자 수 추가, 날짜=>등록 이름 변경

* fix: 내가 호스트일 경우 신청 버튼 비활성화

* fix: 계좌 데이터 캐시 무효화

src/components/Atom/InputMoney.tsx

@@ -48,7 +48,7 @@ export const InputMoney: FC<IProps> = ({
           defaultValue={isChangeMoney ? 0 : maxMoney.toLocaleString()}
           disabled={!isChangeMoney}
           onChange={handleChangeMoney}
-          className='border-none bg-transparent text-end pr-2 focus:outline-none'
+          className='border-none bg-transparent text-end pr-2 focus:outline-none disabled:text-black'
           style={{ width: width + 'rem' }}
         />
         원

src/components/molecules/LessonSearchCard.tsx

@@ -25,12 +25,18 @@ export const LessonSearchCard: FC<IProps> = ({ lesson }) => {
             {lesson.price.toLocaleString()}원
           </p>
         </div>
+
         <div className='w-full'>
           <hr className='border-hanaSilver mb-2' />
-          <p className='flex items-center gap-1 font-hanaRegular text-sm'>
-            <img src='/images/logo.svg' alt='logo' className='w-7' />
-            {lesson.hostName}
-          </p>
+          <div className='flex justify-between'>
+            <p className='flex items-center gap-1 font-hanaRegular text-sm'>
+              <img src='/images/logo.svg' alt='logo' className='w-7' />
+              {lesson.hostName}
+            </p>
+            <p className='flex items-center font-hanaLight text-xs text-black/70'>
+              참여자 {lesson.applicantSum}
+            </p>
+          </div>
         </div>
       </div>
     </div>

src/components/molecules/QRScanner.tsx

@@ -18,7 +18,7 @@ export const QRScanner: FC<IProps> = ({ onClose }) => {
 
   const QrOptions = {
     // 핸드폰의 경우, 외부 카메라인지 셀프카메라인지
-    preferredCamera: 'user',
+    preferredCamera: 'environment',
     // 1초당 몇번의 스캔을 할 것인지? ex) 1초에 5번 QR 코드 감지한다.
     maxScansPerSecond: 5,
     // QR 스캔이 일어나는 부분을 표시해줄 지 (노란색 네모 테두리가 생긴다.)

src/constants/sortList.ts

@@ -5,7 +5,7 @@ export type SortType = {
 
 export const SortCategories: SortType[] = [
   {
-    name: '날짜순',
+    name: '등록순',
     sort: 'date',
   },
   {

src/pages/main/QRPay.tsx

@@ -7,13 +7,15 @@ import { ChoiceAccount } from '../../components/organisms/ChoiceAccount';
 import { InputMoney } from '../../components/Atom/InputMoney';
 import { ChoiceInput } from '../../components/molecules/ChoiceInput';
 import { CompleteSend } from '../../components/organisms/CompleteSend';
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { ApiClient } from '../../apis/apiClient';
 import { ModalBottomContainer } from '../../components/organisms/ModalBottomContainer';
 import { useModal } from '../../context/ModalContext';
 import { Loading } from '../Loading';
+import { getCookie } from '../../utils/cookie';
 
 export const QRPay = () => {
+  const queryClient = useQueryClient();
   const location = useLocation();
   const navigate = useNavigate();
   const { openModal, closeModal } = useModal();
@@ -31,7 +33,12 @@ export const QRPay = () => {
       return res;
     },
     onSuccess: (data) => {
-      if (data.isSuccess && data.data?.transactionId) setIsSend(true);
+      if (data.isSuccess && data.data?.transactionId) {
+        queryClient.invalidateQueries({
+          queryKey: [getCookie('token'), 'accountList'],
+        });
+        setIsSend(true);
+      }
     },
   });
 

src/pages/search/LessonDetail.tsx

@@ -171,7 +171,13 @@ export const LessonDetail = () => {
       <div className='mt-28'>
         <Button
           message={lessonDateList?.data?.length !== 0 ? '신청하기' : '예약마감'}
-          isActive={lessonDateList?.data?.length !== 0 ? true : false}
+          isActive={
+            lessonDateList?.data?.length !== 0
+              ? !lesson?.data?.hostMe
+                ? true
+                : false
+              : false
+          }
           onClick={() => setChoiceModal(true)}
         />
       </div>

src/pages/search/LessonSearch.tsx

@@ -75,7 +75,6 @@ export const LessonSearch = () => {
   const handleSearchInput = () => {
     if (inputRef.current) setSearchText(inputRef.current.value);
   };
-
   useEffect(() => {
     if (lessonList?.data && selectedCategory === -1) setItems(lessonList.data);
     if (lessonListByCategory?.data && selectedCategory !== -1)

src/pages/search/PayLesson.tsx

@@ -10,13 +10,14 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { AccountPwKeypad } from '../../components/organisms/AccountPwKeypad';
 import { CompleteSend } from '../../components/organisms/CompleteSend';
 import { ChoiceAccount } from '../../components/organisms/ChoiceAccount';
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { ApiClient } from '../../apis/apiClient';
 import { getCookie } from '../../utils/cookie';
 import { Loading } from '../Loading';
 import { useModal } from '../../context/ModalContext';
 
 export const PayLesson = () => {
+  const queryClient = useQueryClient();
   const navigate = useNavigate();
   const { state } = useLocation();
   const [account, setAccount] = useState<AccountType | null>(null);
@@ -84,6 +85,12 @@ export const PayLesson = () => {
     },
     onSuccess: (data) => {
       if (data.isSuccess) {
+        queryClient.invalidateQueries({
+          queryKey: [getCookie('token'), 'accountList'],
+        });
+        queryClient.invalidateQueries({
+          queryKey: [getCookie('token'), 'hanamoney'],
+        });
         setIsSend(true);
         setShowModal(false);
         setShowPwModal(false);

src/types/category.d.ts

@@ -9,6 +9,7 @@ interface SearchLessonResType {
   title: string;
   price: number;
   hostName: string;
+  applicantSum: number;
 }
 
 interface CategoryType {

src/types/lesson.d.ts

@@ -24,6 +24,7 @@ interface LessonDetailType {
   materials: string;
   capacity: number;
   categoryName: string;
+  hostMe: boolean;
 }
 
 interface CreateLessonReqType {