feat: 이용기록 견적서 조회 컴포넌트 생성, quotationId 타입 추가

Duri-Salon · Dec 18, 2024 · 4719e7e · 4719e7e
1 parent 8f0e079
commit 4719e7e
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 35 deletions.
diff --git a/apps/duri/src/components/my/history/ResponseQuotationHistory.tsx b/apps/duri/src/components/my/history/ResponseQuotationHistory.tsx
@@ -0,0 +1,83 @@
+import { useNavigate } from 'react-router-dom';
+
+import { Button, ResponseQuotation, theme } from '@duri-fe/ui';
+import { useGetDetailQuotation } from '@duri-fe/utils';
+
+export const ResponseQuotationHistory = ({
+  requestId,
+  handleCloseButton,
+}: {
+  requestId: number;
+  handleCloseButton: () => void;
+}) => {
+  const navigate = useNavigate();
+  const { data: quotationData } = useGetDetailQuotation(requestId);
+  const handleClickReviewButton = (quotationId: number) => {
+    navigate('/review/write', {
+      state: {
+        quotationId: quotationId,
+      },
+    });
+  };
+
+  return (
+    <>
+      {quotationData && (
+        <ResponseQuotation responseList={quotationData}>
+          {quotationData.status === '리뷰 작성 가능' && (
+            <>
+              <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={() =>
+                  handleClickReviewButton(quotationData.quotationId)
+                }
+              >
+                후기 쓰기
+              </Button>
+            </>
+          )}
+          {quotationData.status === '리뷰 작성 ' && (
+            <>
+              <Button
+                bg={theme.palette.Gray20}
+                borderRadius="8px"
+                typo="Body3"
+                width="123px"
+                height="47px"
+                onClick={handleCloseButton}
+              >
+                닫기
+              </Button>
+              <Button
+                bg={theme.palette.Gray200}
+                fontColor={theme.palette.White}
+                borderRadius="8px"
+                typo="Body3"
+                width="173px"
+                height="47px"
+                disabled
+              >
+                후기 쓰기
+              </Button>
+            </>
+          )}
+        </ResponseQuotation>
+      )}
+    </>
+  );
+};
diff --git a/apps/duri/src/pages/My/MyHistory.tsx b/apps/duri/src/pages/My/MyHistory.tsx
@@ -1,7 +1,8 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { HistoryCard } from '@duri/components/diary/HistoryCard';
+import { ResponseQuotationHistory } from '@duri/components/my/history/ResponseQuotationHistory';
 import {
   DuriNavbar,
   Flex,
@@ -16,30 +17,16 @@ const MyHistoryPage = () => {
   //   미용일지 조회 데이터 상태관리 필요!
   const navigate = useNavigate();
   const handleNavigate = () => navigate('/my');
-  // const moveToWriteReview = () => {
-  //   //quotationId 전달
-  //   navigate('/my/review/write', { state: shopId });
-  // };
 
   const { data: historyData } = useGetVisitHistory();
 
   const { isOpenModal, toggleModal } = useModal();
 
-  const [selectedQuotationId, setSelectedQuotationId] = useState<number>();
-  // const [shopId, setShopId] = useState<number>();
+  const [requestId, setRequestId] = useState<number>();
 
-  useEffect(() => {
-    console.log(selectedQuotationId);
-  }, [selectedQuotationId]);
-
-  useEffect(() => {
-    console.log(historyData);
-  }, [historyData]);
   // 모달 토글 함수
-  // const handleToggleModal = (quotationId: number, shopId: number) => {
-  const handleToggleModal = (quotationId: number) => {
-    setSelectedQuotationId(quotationId);
-    // setShopId(shopId);
+  const handleToggleModal = (requestId: number) => {
+    setRequestId(requestId);
     toggleModal();
   };
 
@@ -63,35 +50,29 @@ const MyHistoryPage = () => {
             <div key={month}>
               {historyList.map((history) => (
                 <HistoryCard
-                  key={history.quotationId}
+                  key={history.requestId}
                   visitMonth={`${month}월`}
                   tagContent={history.complete ? '미용 완료' : '미완료'}
                   designerName={history.groomerName}
                   shopName={history.shopName}
                   petName={history.petName}
                   visitDate={history.startDate}
                   dayOfWeek={history.day}
-                  toggleModal={() =>
-                    // handleToggleModal(history.quotationId, history.shopId)
-                    handleToggleModal(history.quotationId)
-                  }
+                  toggleModal={() => handleToggleModal(history.requestId)}
                 />
               ))}
             </div>
           ))
         ) : (
           <Text>이용 기록이 없습니다.</Text>
         )}
-        {isOpenModal && selectedQuotationId && (
+        {isOpenModal && requestId && (
           <Modal isOpen={isOpenModal} toggleModal={toggleModal}>
-            <></>
-            {/*  여기는 따로 응답견적서UI 컴포넌트를 만들어야함
-            <DetailResponseQuotation
-              requestId={selectedQuotationId}
-              // quotationId={selectedQuotationId}
+            {/* 리뷰용 견적응답서 UI 컴포넌트 */}
+            <ResponseQuotationHistory
+              requestId={requestId}
               handleCloseButton={toggleModal}
-              handleNavigate={moveToWriteReview}
-            /> */}
+            />
           </Modal>
         )}
       </Flex>

diff --git a/apps/duri/src/pages/Request/index.tsx b/apps/duri/src/pages/Request/index.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import { RequestType } from '@duri/assets/types';
 import MonthlyCalendar from '@duri/components/request/Calendar';
@@ -47,6 +47,8 @@ const validateRequestInfo = (requestInfo: RequestType): boolean => {
 
 const RequestPage = () => {
   const navigate = useNavigate();
+  const location = useLocation();
+
   const { data: petInfo } = useGetPetInfo();
   const {
     mutateAsync: request,
@@ -90,12 +92,16 @@ const RequestPage = () => {
     navigate(-1);
   };
 
-  // const handle
-
+  //스크롤 멘 위로 옮기고 shopIds리스트 받은 애 set
   useEffect(() => {
     window.scrollTo(0, 0);
+    setRequestInfo((prev) => ({
+      ...prev,
+      shopIds: location.state?.shopIds,
+    }));
   }, []);
 
+
   useEffect(() => {
     if (petInfo) {
       setRequestInfo((prev) => ({ ...prev, petId: petInfo.petId }));
@@ -106,7 +112,6 @@ const RequestPage = () => {
   useEffect(() => {
     const isValid = validateRequestInfo(requestInfo);
     setIsButton(isValid);
-
   }, [requestInfo]);
 
   // 오류 처리

diff --git a/packages/utils/src/apis/types/my.ts b/packages/utils/src/apis/types/my.ts
@@ -95,7 +95,9 @@ export interface ReviewDetailResponse {
   };
 }
 
+//이용기록 - 견적응답서 조회를 위한 requestId 컬럼 추가
 export interface HistoryType {
+  requestId: number;
   quotationId: number;
   complete: boolean;
   groomerImageURL: string;