fix: 결제 api 수정에 따른 코드 변경 완료(DURI-126)

Duri-Salon · Dec 17, 2024 · 7a651b1 · 7a651b1
1 parent a2ade6a
commit 7a651b1
Show file tree

Hide file tree

Showing 12 changed files with 79 additions and 106 deletions.
diff --git a/apps/duri/src/App.tsx b/apps/duri/src/App.tsx
@@ -63,7 +63,7 @@ function App() {
 
           <Route path="/quotation" element={<QuotationPage />} />
           <Route
-            path="/quotation/:quotationId"
+            path="/quotation/:quotationReqId"
             element={<QuotationDetailPage />}
           />
 

diff --git a/apps/duri/src/components/home/reservation/UpcomingReservation.tsx b/apps/duri/src/components/home/reservation/UpcomingReservation.tsx
@@ -140,16 +140,19 @@ const UpcomingReservation = ({
         padding="12px 27px"
       >
         <Text typo="Label2" colorCode={theme.palette.Normal800}>
-        {formatReservationDate(reservationDate)}
+          {formatReservationDate(reservationDate)}
         </Text>
         <Text typo="Label2" colorCode={theme.palette.Normal800}>
-        {price ? `${price.toLocaleString()} 원` : '가격 정보 없음'}
+          {price ? `${price.toLocaleString()} 원` : '가격 정보 없음'}
         </Text>
       </BottomWrapper>
     </Wrapper>
   );
 };
 
+export default UpcomingReservation;
+
+
 const Wrapper = styled(Flex)`
   flex-shrink: 0;
   position: relative;
@@ -161,8 +164,6 @@ const BottomWrapper = styled(Flex)`
   border-radius: 0 0 12px 12px;
 `;
 
-export default UpcomingReservation;
-
 const ImageWrapper = styled(Image)`
   cursor: pointer;
 `;

diff --git a/apps/duri/src/components/payment/Widget.tsx b/apps/duri/src/components/payment/Widget.tsx
@@ -80,7 +80,7 @@ const PaymentWidget = ({
           <Flex direction="column" id="payment-method" />
 
           {/* 이용약관 UI */}
-          <Flex id="agreement" padding="0" />
+          <Flex id="agreement" padding="0"></Flex>
           {/* 쿠폰 체크박스 */}
           {/* <div>
           <div>

diff --git a/apps/duri/src/components/quotation/DetailResponseQuotation.tsx b/apps/duri/src/components/quotation/DetailResponseQuotation.tsx
@@ -1,57 +1,54 @@
+import { useNavigate } from 'react-router-dom';
+
 import { Button, ResponseQuotation, theme } from '@duri-fe/ui';
 import { useGetDetailQuotation } from '@duri-fe/utils';
 
 export const DetailResponseQuotation = ({
   requestId,
   handleCloseButton,
-  handleNavigate,
 }: {
   requestId: number;
-  quotationId: number;
   handleCloseButton: () => void;
-  handleNavigate: () => void;
 }) => {
+  const navigate = useNavigate();
   const { data: quotationData } = useGetDetailQuotation(requestId);
+  const handleClickPayment = (quotationId: number) => {
+    navigate('/payment', {
+      state: {
+        quotationId: quotationId,
+        requestId: requestId,
+      },
+    });
+  };
 
   return (
     <>
       {quotationData && (
         <ResponseQuotation responseList={quotationData}>
-          <Button
-            bg={theme.palette.Gray20}
-            borderRadius="8px"
-            typo="Body3"
-            width="123px"
-            height="47px"
-            onClick={handleCloseButton}
-          >
-            닫기
-          </Button>
           {quotationData.status === '결제 전' && (
-            <Button
-              bg={theme.palette.Black}
-              fontColor={theme.palette.White}
-              borderRadius="8px"
-              typo="Body3"
-              width="173px"
-              height="47px"
-              onClick={handleNavigate}
-            >
-              수락 및 결제진행
-            </Button>
-          )}
-          {quotationData.status === '결제 완료' && (
-            <Button
-              bg={theme.palette.Gray200}
-              fontColor={theme.palette.White}
-              borderRadius="8px"
-              typo="Body3"
-              width="173px"
-              height="47px"
-              disabled
-            >
-              {quotationData.status}
-            </Button>
+            <>
+              <Button
+                bg={theme.palette.Gray20}
+                borderRadius="8px"
+                typo="Body3"
+                width="123px"
+                height="47px"
+                onClick={handleCloseButton}
+              >
+                닫기
+              </Button>
+              <Button
+                bg={theme.palette.Black}
+                fontColor={theme.palette.White}
+                borderRadius="8px"
+                typo="Body3"
+                width="173px"
+                height="47px"
+                onClick={() => handleClickPayment(quotationData.quotationId)}
+              >
+                수락 및 결제진행
+              </Button>
+            </>
           )}
         </ResponseQuotation>
       )}

diff --git a/apps/duri/src/components/quotation/IncomingQuotation.tsx b/apps/duri/src/components/quotation/IncomingQuotation.tsx
@@ -5,25 +5,17 @@ import styled from '@emotion/styled';
 import { DetailResponseQuotation } from './DetailResponseQuotation';
 
 interface IncomingQuotationProps {
-  quotationId: number;
   requestId: number;
-  onSelect: () => void;
   salonName: string;
   price: number | null;
 }
 
 export const IncomingQuotation = ({
-  quotationId,
   requestId,
   salonName,
   price = null,
-  onSelect,
 }: IncomingQuotationProps) => {
   const { isOpenModal, toggleModal } = useModal();
-  const handleClickNavigateButton = () => {
-    toggleModal();
-    onSelect();
-  };
 
   return (
     <>
@@ -49,10 +41,8 @@ export const IncomingQuotation = ({
       <Modal isOpen={isOpenModal} toggleModal={toggleModal} title="견적서">
         {
           <DetailResponseQuotation
-            quotationId={quotationId} //결제를 위한 quotationId 전달
-            requestId={requestId} //견적서 조회를 위한 requestId 전달
+            requestId={requestId} //결제 시 메뉴 조회를 위한 requestId 전달
             handleCloseButton={toggleModal}
-            handleNavigate={handleClickNavigateButton}
           />
         }
       </Modal>

diff --git a/apps/duri/src/components/quotation/RequestItem.tsx b/apps/duri/src/components/quotation/RequestItem.tsx
@@ -15,7 +15,8 @@ export const RequestItem = ({
 }: RequestItemType) => {
   const navigate = useNavigate();
   const handleNavigate = () => {
-    navigate(`/quotation/${quotationReqId}`); //URL에서는 요청 자체 id가 뜨게 하고, 실제 세부조회에서는 요청서의 id를 전달해서 조회할 수 있도록
+    navigate(`/quotation/${quotationReqId}`, {state: requestId}); 
+    //URL에서는 요청 자체 id가 뜨게 하고, 실제 세부조회에서는 요청서의 id를 전달해서 조회할 수 있도록
   };
 
   return (

diff --git a/apps/duri/src/pages/Payment/index.tsx b/apps/duri/src/pages/Payment/index.tsx
@@ -1,19 +1,26 @@
 import { useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import PaymentWidget from '@duri/components/payment/Widget';
-import { DuriNavbar, Flex, MobileLayout, Text } from '@duri-fe/ui';
+import { DuriNavbar, Flex, Header, MobileLayout, Text } from '@duri-fe/ui';
 import { useGetDetailQuotation } from '@duri-fe/utils';
 
 const PaymentPage = () => {
+  const navigate = useNavigate();
   const location = useLocation();
   const { quotationId, requestId } = location.state; // state에서 quotationId 가져오기
 
-  //매장 및 시술 정보
+  //매장 및 시술 정보 조회 & 결제를 위해 파라미터로 들어가는 애들 유효성 검사
   if (requestId === undefined) return;
+  if (quotationId === undefined) return;
+
   const { data: quotationData } = useGetDetailQuotation(requestId);
+
   const [groomingList, setGroomingList] = useState<string[]>([]);
-  console.log('quotationId, requestId : ', quotationData, requestId);
+
+  const handleClickBackButton = () => {
+    navigate(-1);
+  };
 
   useEffect(() => {
     if (quotationData) {
@@ -30,6 +37,7 @@ const PaymentPage = () => {
 
   return (
     <MobileLayout>
+      <Header backIcon onClickBack={handleClickBackButton} title="주문서" />
       {quotationData ? (
         <Flex direction="column">
           {/* 결제 방법 - 쿠폰 개발된다면 쿠폰 정보도 같이 넘겨야 함 */}

diff --git a/apps/duri/src/pages/Quotation/QuotationDetail.tsx b/apps/duri/src/pages/Quotation/QuotationDetail.tsx
@@ -17,7 +17,6 @@ import { ShopType, useGeolocation, useGetQuotationList } from '@duri-fe/utils';
 
 interface QuotationType {
   requestId: number;
-  quotationId: number;
   shopName: string;
   totalPrice: number | null;
 }
@@ -27,7 +26,7 @@ const QuotationDetailPage = () => {
 
   const location = useLocation();
   const requestId = location.state; //요청 id
-  const { quotationId } = useParams(); //견적서 id
+  const { quotationReqId } = useParams<{ quotationReqId: string }>(); //견적서 id
   const { coordinates } = useGeolocation();
 
   const [lat, setLat] = useState<number | null>(null);
@@ -42,7 +41,7 @@ const QuotationDetailPage = () => {
   );
 
   const { data: quotationListData } = useGetQuotationList(
-    Number(quotationId),
+    Number(quotationReqId),
     lat,
     lon,
   );
@@ -51,14 +50,6 @@ const QuotationDetailPage = () => {
     navigate(-1);
   };
 
-  const handleClickPayment = (quotationId: number) => {
-    navigate('/payment', {
-      state: {
-        quotationId: quotationId,
-      },
-    });
-  };
-
   useEffect(() => {
     window.scrollTo(0, 0);
   }, []);
@@ -153,16 +144,16 @@ const QuotationDetailPage = () => {
           <Flex direction="column" align="flex-start" margin="31px 0 17px">
             <Text typo="Title2">들어온 견적</Text>
             <Flex direction="column" margin="17px 0 0 0" gap={8}>
-              {quotationList?.map(({ quotationId, requestId, shopName, totalPrice }) => (
-                <IncomingQuotation
-                  key={quotationId}
-                  quotationId={quotationId} //요청에 대한 응답견적서
-                  requestId={Number(requestId)} //사용자 요청 견적서
-                  salonName={shopName}
-                  price={totalPrice}
-                  onSelect={() => handleClickPayment(quotationId)}
-                />
-              ))}
+              {quotationList?.map(
+                ({ requestId, shopName, totalPrice }) => (
+                  <IncomingQuotation
+                    key={requestId}
+                    requestId={Number(requestId)}
+                    salonName={shopName}
+                    price={totalPrice}
+                  />
+                ),
+              )}
             </Flex>
           </Flex>
         }

diff --git a/apps/duri/src/pages/Quotation/index.tsx b/apps/duri/src/pages/Quotation/index.tsx
@@ -4,10 +4,8 @@ import { RequestItemType } from '@duri/assets/types';
 import { RequestItem } from '@duri/components/quotation/RequestItem';
 import {
   DuriNavbar,
-  FilledLocation,
   Flex,
   Header,
-  HeightFitFlex,
   MobileLayout,
   Text,
   theme,
@@ -21,9 +19,9 @@ const QuotationPage = () => {
     window.scrollTo(0, 0);
   }, []);
 
-  useEffect(()=>{
-console.log(requestList);
-  },[requestList])
+  useEffect(() => {
+    console.log(requestList);
+  }, [requestList]);
 
   return (
     <MobileLayout backgroundColor={theme.palette.Gray_White}>
@@ -34,17 +32,6 @@ console.log(requestList);
         padding="0 20px"
         margin="10px 0 102px 0"
       >
-        <HeightFitFlex gap={5} justify="flex-start">
-          <FilledLocation
-            width={22}
-            height={22}
-            color={theme.palette.Gray500}
-          />
-          <Text typo="Label2" colorCode={theme.palette.Gray600}>
-            경기도 성남시
-          </Text>
-        </HeightFitFlex>
-
         {requestList && requestList.length > 0 ? (
           <Flex direction="column" padding="0 22px" align="flex-start" gap={12}>
             {requestList.map(

diff --git a/packages/ui/src/components/Quotation/ResponseQuotation.tsx b/packages/ui/src/components/Quotation/ResponseQuotation.tsx
@@ -93,9 +93,11 @@ export const ResponseQuotation = ({
           </Flex>
         </HeightFitFlex>
       </Flex>
-      <Flex gap={7} margin="6px 0" padding="16px 18.5px">
-        {children}
-      </Flex>
+      {children && (
+        <Flex gap={7} margin="6px 0" padding="16px 18.5px">
+          {children}
+        </Flex>
+      )}
     </MaxWidthFlex>
   );
 };

diff --git a/packages/ui/src/types/quotation.ts b/packages/ui/src/types/quotation.ts
@@ -18,9 +18,9 @@ export interface ResponseQuotationType {
     designCut: string[];
     otherRequests: string;
   };
+  quotationId: number;
   quotation: {
     requestId: number;
-    quotationId: number;
     memo: string;
     startDateTime: string;
     endDateTime: string;

diff --git a/packages/utils/src/apis/types/quotation.ts b/packages/utils/src/apis/types/quotation.ts
@@ -144,10 +144,6 @@ export interface CompletedQuotationListResponse extends BaseResponse {
   };
 }
 
-//매장 순위 api 수정때문에 응답 견적서 quotation 속성에 quotationId가 추가됐는데 일단 따로 타입 만들었어요
-export interface GetQuotationResponseListType extends PostQuotationRequest{
-  quotationId: number;
-}
 
 //응답 견적서 상세조회
 export interface QuotationDetailResponse extends BaseResponse {
@@ -156,7 +152,8 @@ export interface QuotationDetailResponse extends BaseResponse {
     quotationCreatedAt: string;
     petDetail: RequestDetailPetType;
     menuDetail: QuotationDetailsType;
-    quotation: GetQuotationResponseListType;
+    quotation: PostQuotationRequest;
+    quotationId: number;
     status: string;
   };
 }
@@ -182,7 +179,6 @@ export interface QuotationListResponse extends BaseResponse {
     bestRatingShop: ShopType | null;
     bestShop: ShopType | null;
     quotations: {
-      quotationId: number;
       requestId: number;
       shopName: string;
       totalPrice: number | null;